diff --git a/.github/workflows/deploy-react-sample-apps.yml b/.github/workflows/deploy-react-sample-apps.yml
index dad9ca9c98..35ea87778a 100644
--- a/.github/workflows/deploy-react-sample-apps.yml
+++ b/.github/workflows/deploy-react-sample-apps.yml
@@ -21,6 +21,10 @@ on:
       - '!**/docusaurus/**'
   workflow_dispatch:
 
+concurrency:
+  group: deploy-react-sample-apps-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build-and-deploy-sample-apps:
     name: Deploy ${{ matrix.application.name }}
@@ -30,22 +34,22 @@ jobs:
       matrix:
         application:
           - name: messenger-clone-react
-            folder: messenger-clone
             project-id: prj_FNUiw2FtWJEDVHP5XttyLQmGw39n
             populate-tokens: true
           - name: zoom-clone-react
-            folder: zoom-clone
             project-id: prj_y2GjsUXNvW7MdQ0EpJVG0FBNNovL
             populate-tokens: true
           - name: egress-composite
             project-id: prj_R6DLpP2Gxc0aRHGEopQWE8tveNDX
           - name: livestream-app-react
-            folder: livestream-app
             project-id: prj_uNJTw7DefSAntAoWCXwJaHc1khoA
           - name: audio-rooms
             project-id: prj_0WnHcvVkXpM4PRc2ymVmrAHFILoT
-          - name: react-dogfood
-            project-id: prj_bUGd9z0sMAMxZmmgMaec3oiRbWzT
+          - name: react-dogfood - https://pronto.getstream.io
+            project-id: prj_4TTdjeVHEDhWWiFRfjIr1QFb5ell
+          - name: react-dogfood - https://getstream.io/video/demos
+            project-id: prj_tTLn3XMVal4D1Nnel9nPJ0hoI9wA
+            base-path: /video/demos
 
     env:
       VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
@@ -87,6 +91,8 @@ jobs:
       ### Vercel deployment (Preview) ###
       - name: Vercel Pull/Build/Deploy (Preview)
         if: ${{ github.ref_name != 'main' }}
+        env:
+          NEXT_PUBLIC_BASE_PATH: ${{ matrix.application.base-path || '' }}
         run: >
           yarn vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} &&
           yarn vercel build --token=${{ secrets.VERCEL_TOKEN }} &&
@@ -95,6 +101,8 @@ jobs:
       ### Vercel deployment (Production) ###
       - name: Vercel Pull/Build/Deploy (Production)
         if: ${{ github.ref_name == 'main' }}
+        env:
+          NEXT_PUBLIC_BASE_PATH: ${{ matrix.application.base-path || '' }}
         run: >
           yarn vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }} &&
           yarn vercel build --prod --token=${{ secrets.VERCEL_TOKEN }} &&
diff --git a/package.json b/package.json
index b20417c2b6..89107851d5 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "nx": "16.0.1",
     "prettier": "^2.8.8",
     "typescript": "^5.2.2",
-    "vercel": "^32.4.1",
+    "vercel": "^33.2.0",
     "vite": "^4.4.11"
   }
 }
diff --git a/packages/client/package.json b/packages/client/package.json
index 5f28ab032a..c026b99272 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -28,9 +28,9 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@protobuf-ts/runtime": "^2.9.1",
-    "@protobuf-ts/runtime-rpc": "^2.9.1",
-    "@protobuf-ts/twirp-transport": "^2.9.1",
+    "@protobuf-ts/runtime": "^2.9.3",
+    "@protobuf-ts/runtime-rpc": "^2.9.3",
+    "@protobuf-ts/twirp-transport": "^2.9.3",
     "@types/ws": "^8.5.7",
     "axios": "^1.6.0",
     "base64-js": "^1.5.1",
diff --git a/packages/client/src/__tests__/server-side/call.test.ts b/packages/client/src/__tests__/server-side/call.test.ts
index 91a47f4479..fbabcf0c2c 100644
--- a/packages/client/src/__tests__/server-side/call.test.ts
+++ b/packages/client/src/__tests__/server-side/call.test.ts
@@ -89,12 +89,6 @@ describe('call API', () => {
     });
 
     expect(response.calls.length).toBeLessThanOrEqual(2);
-
-    response = await client.queryCalls({
-      filter_conditions: { backstage: { $eq: false } },
-    });
-
-    expect(response.calls.length).toBeGreaterThanOrEqual(1);
   });
 
   describe('recording', () => {
@@ -150,7 +144,7 @@ describe('call API', () => {
       );
     });
 
-    it('query recordings', async () => {
+    it.skip('query recordings', async () => {
       // somewhat dummy test, we should do a proper test in the future
       let response = await call.queryRecordings();
 
diff --git a/packages/client/src/gen/google/protobuf/struct.ts b/packages/client/src/gen/google/protobuf/struct.ts
index 6fdb1763d8..600a93af62 100644
--- a/packages/client/src/gen/google/protobuf/struct.ts
+++ b/packages/client/src/gen/google/protobuf/struct.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.0 with parameter long_type_string,client_generic,server_none,eslint_disable
+// @generated by protobuf-ts 2.9.3 with parameter long_type_string,client_generic,server_none,eslint_disable
 // @generated from protobuf file "google/protobuf/struct.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
 //
@@ -46,7 +46,6 @@ import type {
 } from '@protobuf-ts/runtime';
 import {
   isJsonObject,
-  MESSAGE_TYPE,
   MessageType,
   reflectionMergePartial,
   typeofJsonValue,
@@ -226,11 +225,8 @@ class Struct$Type extends MessageType<Struct> {
     return target;
   }
   create(value?: PartialMessage<Struct>): Struct {
-    const message = { fields: {} };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.fields = {};
     if (value !== undefined)
       reflectionMergePartial<Struct>(this, message, value);
     return message;
@@ -300,7 +296,7 @@ class Struct$Type extends MessageType<Struct> {
     options: BinaryWriteOptions,
   ): IBinaryWriter {
     /* map<string, google.protobuf.Value> fields = 1; */
-    for (let k of Object.keys(message.fields)) {
+    for (let k of globalThis.Object.keys(message.fields)) {
       writer
         .tag(1, WireType.LengthDelimited)
         .fork()
@@ -385,7 +381,10 @@ class Value$Type extends MessageType<Value> {
       case 'nullValue':
         return null;
       case 'numberValue':
-        return message.kind.numberValue;
+        let numberValue = message.kind.numberValue;
+        if (typeof numberValue == 'number' && !Number.isFinite(numberValue))
+          throw new globalThis.Error();
+        return numberValue;
       case 'stringValue':
         return message.kind.stringValue;
       case 'listValue':
@@ -446,11 +445,8 @@ class Value$Type extends MessageType<Value> {
     return target;
   }
   create(value?: PartialMessage<Value>): Value {
-    const message = { kind: { oneofKind: undefined } };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.kind = { oneofKind: undefined };
     if (value !== undefined)
       reflectionMergePartial<Value>(this, message, value);
     return message;
@@ -616,11 +612,8 @@ class ListValue$Type extends MessageType<ListValue> {
     return target;
   }
   create(value?: PartialMessage<ListValue>): ListValue {
-    const message = { values: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.values = [];
     if (value !== undefined)
       reflectionMergePartial<ListValue>(this, message, value);
     return message;
diff --git a/packages/client/src/gen/google/protobuf/timestamp.ts b/packages/client/src/gen/google/protobuf/timestamp.ts
index 7274be52b4..853e7bd9b4 100644
--- a/packages/client/src/gen/google/protobuf/timestamp.ts
+++ b/packages/client/src/gen/google/protobuf/timestamp.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.0 with parameter long_type_string,client_generic,server_none,eslint_disable
+// @generated by protobuf-ts 2.9.3 with parameter long_type_string,client_generic,server_none,eslint_disable
 // @generated from protobuf file "google/protobuf/timestamp.proto" (package "google.protobuf", syntax proto3)
 // tslint:disable
 //
@@ -44,7 +44,6 @@ import type {
   PartialMessage,
 } from '@protobuf-ts/runtime';
 import {
-  MESSAGE_TYPE,
   MessageType,
   PbLong,
   reflectionMergePartial,
@@ -285,11 +284,9 @@ class Timestamp$Type extends MessageType<Timestamp> {
     return target;
   }
   create(value?: PartialMessage<Timestamp>): Timestamp {
-    const message = { seconds: '0', nanos: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.seconds = '0';
+    message.nanos = 0;
     if (value !== undefined)
       reflectionMergePartial<Timestamp>(this, message, value);
     return message;
diff --git a/packages/client/src/gen/video/sfu/event/events.ts b/packages/client/src/gen/video/sfu/event/events.ts
index e1e2dac5b3..12af85c2d5 100644
--- a/packages/client/src/gen/video/sfu/event/events.ts
+++ b/packages/client/src/gen/video/sfu/event/events.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.0 with parameter long_type_string,client_generic,server_none,eslint_disable
+// @generated by protobuf-ts 2.9.3 with parameter long_type_string,client_generic,server_none,eslint_disable
 // @generated from protobuf file "video/sfu/event/events.proto" (package "stream.video.sfu.event", syntax proto3)
 // tslint:disable
 import type {
@@ -10,7 +10,6 @@ import type {
   PartialMessage,
 } from '@protobuf-ts/runtime';
 import {
-  MESSAGE_TYPE,
   MessageType,
   reflectionMergePartial,
   UnknownFieldHandler,
@@ -884,11 +883,8 @@ class SfuEvent$Type extends MessageType<SfuEvent> {
     ]);
   }
   create(value?: PartialMessage<SfuEvent>): SfuEvent {
-    const message = { eventPayload: { oneofKind: undefined } };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.eventPayload = { oneofKind: undefined };
     if (value !== undefined)
       reflectionMergePartial<SfuEvent>(this, message, value);
     return message;
@@ -1281,11 +1277,8 @@ class PinsChanged$Type extends MessageType<PinsChanged> {
     ]);
   }
   create(value?: PartialMessage<PinsChanged>): PinsChanged {
-    const message = { pins: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.pins = [];
     if (value !== undefined)
       reflectionMergePartial<PinsChanged>(this, message, value);
     return message;
@@ -1359,11 +1352,7 @@ class Error$Type extends MessageType<Error> {
     ]);
   }
   create(value?: PartialMessage<Error>): Error {
-    const message = {};
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
     if (value !== undefined)
       reflectionMergePartial<Error>(this, message, value);
     return message;
@@ -1451,11 +1440,9 @@ class ICETrickle$Type extends MessageType<ICETrickle> {
     ]);
   }
   create(value?: PartialMessage<ICETrickle>): ICETrickle {
-    const message = { peerType: 0, iceCandidate: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.peerType = 0;
+    message.iceCandidate = '';
     if (value !== undefined)
       reflectionMergePartial<ICETrickle>(this, message, value);
     return message;
@@ -1534,11 +1521,8 @@ class ICERestart$Type extends MessageType<ICERestart> {
     ]);
   }
   create(value?: PartialMessage<ICERestart>): ICERestart {
-    const message = { peerType: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.peerType = 0;
     if (value !== undefined)
       reflectionMergePartial<ICERestart>(this, message, value);
     return message;
@@ -1619,11 +1603,8 @@ class SfuRequest$Type extends MessageType<SfuRequest> {
     ]);
   }
   create(value?: PartialMessage<SfuRequest>): SfuRequest {
-    const message = { requestPayload: { oneofKind: undefined } };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.requestPayload = { oneofKind: undefined };
     if (value !== undefined)
       reflectionMergePartial<SfuRequest>(this, message, value);
     return message;
@@ -1719,11 +1700,7 @@ class HealthCheckRequest$Type extends MessageType<HealthCheckRequest> {
     super('stream.video.sfu.event.HealthCheckRequest', []);
   }
   create(value?: PartialMessage<HealthCheckRequest>): HealthCheckRequest {
-    const message = {};
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
     if (value !== undefined)
       reflectionMergePartial<HealthCheckRequest>(this, message, value);
     return message;
@@ -1768,11 +1745,7 @@ class HealthCheckResponse$Type extends MessageType<HealthCheckResponse> {
     ]);
   }
   create(value?: PartialMessage<HealthCheckResponse>): HealthCheckResponse {
-    const message = {};
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
     if (value !== undefined)
       reflectionMergePartial<HealthCheckResponse>(this, message, value);
     return message;
@@ -1861,11 +1834,10 @@ class TrackPublished$Type extends MessageType<TrackPublished> {
     ]);
   }
   create(value?: PartialMessage<TrackPublished>): TrackPublished {
-    const message = { userId: '', sessionId: '', type: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.userId = '';
+    message.sessionId = '';
+    message.type = 0;
     if (value !== undefined)
       reflectionMergePartial<TrackPublished>(this, message, value);
     return message;
@@ -1981,11 +1953,11 @@ class TrackUnpublished$Type extends MessageType<TrackUnpublished> {
     ]);
   }
   create(value?: PartialMessage<TrackUnpublished>): TrackUnpublished {
-    const message = { userId: '', sessionId: '', type: 0, cause: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.userId = '';
+    message.sessionId = '';
+    message.type = 0;
+    message.cause = 0;
     if (value !== undefined)
       reflectionMergePartial<TrackUnpublished>(this, message, value);
     return message;
@@ -2105,16 +2077,11 @@ class JoinRequest$Type extends MessageType<JoinRequest> {
     ]);
   }
   create(value?: PartialMessage<JoinRequest>): JoinRequest {
-    const message = {
-      token: '',
-      sessionId: '',
-      subscriberSdp: '',
-      fastReconnect: false,
-    };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.token = '';
+    message.sessionId = '';
+    message.subscriberSdp = '';
+    message.fastReconnect = false;
     if (value !== undefined)
       reflectionMergePartial<JoinRequest>(this, message, value);
     return message;
@@ -2249,11 +2216,10 @@ class Migration$Type extends MessageType<Migration> {
     ]);
   }
   create(value?: PartialMessage<Migration>): Migration {
-    const message = { fromSfuId: '', announcedTracks: [], subscriptions: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.fromSfuId = '';
+    message.announcedTracks = [];
+    message.subscriptions = [];
     if (value !== undefined)
       reflectionMergePartial<Migration>(this, message, value);
     return message;
@@ -2350,11 +2316,8 @@ class JoinResponse$Type extends MessageType<JoinResponse> {
     ]);
   }
   create(value?: PartialMessage<JoinResponse>): JoinResponse {
-    const message = { reconnected: false };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.reconnected = false;
     if (value !== undefined)
       reflectionMergePartial<JoinResponse>(this, message, value);
     return message;
@@ -2438,11 +2401,8 @@ class ParticipantJoined$Type extends MessageType<ParticipantJoined> {
     ]);
   }
   create(value?: PartialMessage<ParticipantJoined>): ParticipantJoined {
-    const message = { callCid: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.callCid = '';
     if (value !== undefined)
       reflectionMergePartial<ParticipantJoined>(this, message, value);
     return message;
@@ -2526,11 +2486,8 @@ class ParticipantLeft$Type extends MessageType<ParticipantLeft> {
     ]);
   }
   create(value?: PartialMessage<ParticipantLeft>): ParticipantLeft {
-    const message = { callCid: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.callCid = '';
     if (value !== undefined)
       reflectionMergePartial<ParticipantLeft>(this, message, value);
     return message;
@@ -2614,11 +2571,9 @@ class SubscriberOffer$Type extends MessageType<SubscriberOffer> {
     ]);
   }
   create(value?: PartialMessage<SubscriberOffer>): SubscriberOffer {
-    const message = { iceRestart: false, sdp: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.iceRestart = false;
+    message.sdp = '';
     if (value !== undefined)
       reflectionMergePartial<SubscriberOffer>(this, message, value);
     return message;
@@ -2692,11 +2647,8 @@ class PublisherAnswer$Type extends MessageType<PublisherAnswer> {
     ]);
   }
   create(value?: PartialMessage<PublisherAnswer>): PublisherAnswer {
-    const message = { sdp: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.sdp = '';
     if (value !== undefined)
       reflectionMergePartial<PublisherAnswer>(this, message, value);
     return message;
@@ -2772,11 +2724,8 @@ class ConnectionQualityChanged$Type extends MessageType<ConnectionQualityChanged
   create(
     value?: PartialMessage<ConnectionQualityChanged>,
   ): ConnectionQualityChanged {
-    const message = { connectionQualityUpdates: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.connectionQualityUpdates = [];
     if (value !== undefined)
       reflectionMergePartial<ConnectionQualityChanged>(this, message, value);
     return message;
@@ -2865,11 +2814,10 @@ class ConnectionQualityInfo$Type extends MessageType<ConnectionQualityInfo> {
     ]);
   }
   create(value?: PartialMessage<ConnectionQualityInfo>): ConnectionQualityInfo {
-    const message = { userId: '', sessionId: '', connectionQuality: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.userId = '';
+    message.sessionId = '';
+    message.connectionQuality = 0;
     if (value !== undefined)
       reflectionMergePartial<ConnectionQualityInfo>(this, message, value);
     return message;
@@ -2952,11 +2900,9 @@ class DominantSpeakerChanged$Type extends MessageType<DominantSpeakerChanged> {
   create(
     value?: PartialMessage<DominantSpeakerChanged>,
   ): DominantSpeakerChanged {
-    const message = { userId: '', sessionId: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.userId = '';
+    message.sessionId = '';
     if (value !== undefined)
       reflectionMergePartial<DominantSpeakerChanged>(this, message, value);
     return message;
@@ -3033,11 +2979,11 @@ class AudioLevel$Type extends MessageType<AudioLevel> {
     ]);
   }
   create(value?: PartialMessage<AudioLevel>): AudioLevel {
-    const message = { userId: '', sessionId: '', level: 0, isSpeaking: false };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.userId = '';
+    message.sessionId = '';
+    message.level = 0;
+    message.isSpeaking = false;
     if (value !== undefined)
       reflectionMergePartial<AudioLevel>(this, message, value);
     return message;
@@ -3128,11 +3074,8 @@ class AudioLevelChanged$Type extends MessageType<AudioLevelChanged> {
     ]);
   }
   create(value?: PartialMessage<AudioLevelChanged>): AudioLevelChanged {
-    const message = { audioLevels: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.audioLevels = [];
     if (value !== undefined)
       reflectionMergePartial<AudioLevelChanged>(this, message, value);
     return message;
@@ -3211,11 +3154,8 @@ class AudioMediaRequest$Type extends MessageType<AudioMediaRequest> {
     ]);
   }
   create(value?: PartialMessage<AudioMediaRequest>): AudioMediaRequest {
-    const message = { channelCount: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.channelCount = 0;
     if (value !== undefined)
       reflectionMergePartial<AudioMediaRequest>(this, message, value);
     return message;
@@ -3289,11 +3229,7 @@ class AudioSender$Type extends MessageType<AudioSender> {
     ]);
   }
   create(value?: PartialMessage<AudioSender>): AudioSender {
-    const message = {};
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
     if (value !== undefined)
       reflectionMergePartial<AudioSender>(this, message, value);
     return message;
@@ -3397,11 +3333,10 @@ class VideoMediaRequest$Type extends MessageType<VideoMediaRequest> {
     ]);
   }
   create(value?: PartialMessage<VideoMediaRequest>): VideoMediaRequest {
-    const message = { idealHeight: 0, idealWidth: 0, idealFrameRate: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.idealHeight = 0;
+    message.idealWidth = 0;
+    message.idealFrameRate = 0;
     if (value !== undefined)
       reflectionMergePartial<VideoMediaRequest>(this, message, value);
     return message;
@@ -3506,18 +3441,13 @@ class VideoLayerSetting$Type extends MessageType<VideoLayerSetting> {
     ]);
   }
   create(value?: PartialMessage<VideoLayerSetting>): VideoLayerSetting {
-    const message = {
-      name: '',
-      active: false,
-      maxBitrate: 0,
-      scaleResolutionDownBy: 0,
-      priority: 0,
-      maxFramerate: 0,
-    };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.name = '';
+    message.active = false;
+    message.maxBitrate = 0;
+    message.scaleResolutionDownBy = 0;
+    message.priority = 0;
+    message.maxFramerate = 0;
     if (value !== undefined)
       reflectionMergePartial<VideoLayerSetting>(this, message, value);
     return message;
@@ -3643,11 +3573,8 @@ class VideoSender$Type extends MessageType<VideoSender> {
     ]);
   }
   create(value?: PartialMessage<VideoSender>): VideoSender {
-    const message = { layers: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.layers = [];
     if (value !== undefined)
       reflectionMergePartial<VideoSender>(this, message, value);
     return message;
@@ -3768,11 +3695,9 @@ class ChangePublishQuality$Type extends MessageType<ChangePublishQuality> {
     ]);
   }
   create(value?: PartialMessage<ChangePublishQuality>): ChangePublishQuality {
-    const message = { audioSenders: [], videoSenders: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.audioSenders = [];
+    message.videoSenders = [];
     if (value !== undefined)
       reflectionMergePartial<ChangePublishQuality>(this, message, value);
     return message;
@@ -3859,11 +3784,8 @@ class CallGrantsUpdated$Type extends MessageType<CallGrantsUpdated> {
     ]);
   }
   create(value?: PartialMessage<CallGrantsUpdated>): CallGrantsUpdated {
-    const message = { message: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.message = '';
     if (value !== undefined)
       reflectionMergePartial<CallGrantsUpdated>(this, message, value);
     return message;
@@ -3955,11 +3877,8 @@ class GoAway$Type extends MessageType<GoAway> {
     ]);
   }
   create(value?: PartialMessage<GoAway>): GoAway {
-    const message = { reason: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.reason = 0;
     if (value !== undefined)
       reflectionMergePartial<GoAway>(this, message, value);
     return message;
diff --git a/packages/client/src/gen/video/sfu/models/models.ts b/packages/client/src/gen/video/sfu/models/models.ts
index 069afafb8e..b6ed5e976f 100644
--- a/packages/client/src/gen/video/sfu/models/models.ts
+++ b/packages/client/src/gen/video/sfu/models/models.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.0 with parameter long_type_string,client_generic,server_none,eslint_disable
+// @generated by protobuf-ts 2.9.3 with parameter long_type_string,client_generic,server_none,eslint_disable
 // @generated from protobuf file "video/sfu/models/models.proto" (package "stream.video.sfu.models", syntax proto3)
 // tslint:disable
 import type {
@@ -10,7 +10,6 @@ import type {
   PartialMessage,
 } from '@protobuf-ts/runtime';
 import {
-  MESSAGE_TYPE,
   MessageType,
   reflectionMergePartial,
   UnknownFieldHandler,
@@ -737,11 +736,9 @@ class CallState$Type extends MessageType<CallState> {
     ]);
   }
   create(value?: PartialMessage<CallState>): CallState {
-    const message = { participants: [], pins: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.participants = [];
+    message.pins = [];
     if (value !== undefined)
       reflectionMergePartial<CallState>(this, message, value);
     return message;
@@ -858,11 +855,9 @@ class ParticipantCount$Type extends MessageType<ParticipantCount> {
     ]);
   }
   create(value?: PartialMessage<ParticipantCount>): ParticipantCount {
-    const message = { total: 0, anonymous: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.total = 0;
+    message.anonymous = 0;
     if (value !== undefined)
       reflectionMergePartial<ParticipantCount>(this, message, value);
     return message;
@@ -937,11 +932,9 @@ class Pin$Type extends MessageType<Pin> {
     ]);
   }
   create(value?: PartialMessage<Pin>): Pin {
-    const message = { userId: '', sessionId: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.userId = '';
+    message.sessionId = '';
     if (value !== undefined) reflectionMergePartial<Pin>(this, message, value);
     return message;
   }
@@ -1061,23 +1054,18 @@ class Participant$Type extends MessageType<Participant> {
     ]);
   }
   create(value?: PartialMessage<Participant>): Participant {
-    const message = {
-      userId: '',
-      sessionId: '',
-      publishedTracks: [],
-      trackLookupPrefix: '',
-      connectionQuality: 0,
-      isSpeaking: false,
-      isDominantSpeaker: false,
-      audioLevel: 0,
-      name: '',
-      image: '',
-      roles: [],
-    };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.userId = '';
+    message.sessionId = '';
+    message.publishedTracks = [];
+    message.trackLookupPrefix = '';
+    message.connectionQuality = 0;
+    message.isSpeaking = false;
+    message.isDominantSpeaker = false;
+    message.audioLevel = 0;
+    message.name = '';
+    message.image = '';
+    message.roles = [];
     if (value !== undefined)
       reflectionMergePartial<Participant>(this, message, value);
     return message;
@@ -1252,11 +1240,9 @@ class StreamQuality$Type extends MessageType<StreamQuality> {
     ]);
   }
   create(value?: PartialMessage<StreamQuality>): StreamQuality {
-    const message = { videoQuality: 0, userId: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.videoQuality = 0;
+    message.userId = '';
     if (value !== undefined)
       reflectionMergePartial<StreamQuality>(this, message, value);
     return message;
@@ -1331,11 +1317,9 @@ class VideoDimension$Type extends MessageType<VideoDimension> {
     ]);
   }
   create(value?: PartialMessage<VideoDimension>): VideoDimension {
-    const message = { width: 0, height: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.width = 0;
+    message.height = 0;
     if (value !== undefined)
       reflectionMergePartial<VideoDimension>(this, message, value);
     return message;
@@ -1427,11 +1411,11 @@ class VideoLayer$Type extends MessageType<VideoLayer> {
     ]);
   }
   create(value?: PartialMessage<VideoLayer>): VideoLayer {
-    const message = { rid: '', bitrate: 0, fps: 0, quality: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.rid = '';
+    message.bitrate = 0;
+    message.fps = 0;
+    message.quality = 0;
     if (value !== undefined)
       reflectionMergePartial<VideoLayer>(this, message, value);
     return message;
@@ -1557,18 +1541,13 @@ class Codec$Type extends MessageType<Codec> {
     ]);
   }
   create(value?: PartialMessage<Codec>): Codec {
-    const message = {
-      payloadType: 0,
-      name: '',
-      fmtpLine: '',
-      clockRate: 0,
-      encodingParameters: '',
-      feedbacks: [],
-    };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.payloadType = 0;
+    message.name = '';
+    message.fmtpLine = '';
+    message.clockRate = 0;
+    message.encodingParameters = '';
+    message.feedbacks = [];
     if (value !== undefined)
       reflectionMergePartial<Codec>(this, message, value);
     return message;
@@ -1680,11 +1659,10 @@ class ICETrickle$Type extends MessageType<ICETrickle> {
     ]);
   }
   create(value?: PartialMessage<ICETrickle>): ICETrickle {
-    const message = { peerType: 0, iceCandidate: '', sessionId: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.peerType = 0;
+    message.iceCandidate = '';
+    message.sessionId = '';
     if (value !== undefined)
       reflectionMergePartial<ICETrickle>(this, message, value);
     return message;
@@ -1785,19 +1763,14 @@ class TrackInfo$Type extends MessageType<TrackInfo> {
     ]);
   }
   create(value?: PartialMessage<TrackInfo>): TrackInfo {
-    const message = {
-      trackId: '',
-      trackType: 0,
-      layers: [],
-      mid: '',
-      dtx: false,
-      stereo: false,
-      red: false,
-    };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.trackId = '';
+    message.trackType = 0;
+    message.layers = [];
+    message.mid = '';
+    message.dtx = false;
+    message.stereo = false;
+    message.red = false;
     if (value !== undefined)
       reflectionMergePartial<TrackInfo>(this, message, value);
     return message;
@@ -1921,11 +1894,11 @@ class Call$Type extends MessageType<Call> {
     ]);
   }
   create(value?: PartialMessage<Call>): Call {
-    const message = { type: '', id: '', createdByUserId: '', hostUserId: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.type = '';
+    message.id = '';
+    message.createdByUserId = '';
+    message.hostUserId = '';
     if (value !== undefined) reflectionMergePartial<Call>(this, message, value);
     return message;
   }
@@ -2066,11 +2039,10 @@ class Error$Type extends MessageType<Error> {
     ]);
   }
   create(value?: PartialMessage<Error>): Error {
-    const message = { code: 0, message: '', shouldRetry: false };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.code = 0;
+    message.message = '';
+    message.shouldRetry = false;
     if (value !== undefined)
       reflectionMergePartial<Error>(this, message, value);
     return message;
@@ -2152,11 +2124,7 @@ class ClientDetails$Type extends MessageType<ClientDetails> {
     ]);
   }
   create(value?: PartialMessage<ClientDetails>): ClientDetails {
-    const message = {};
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
     if (value !== undefined)
       reflectionMergePartial<ClientDetails>(this, message, value);
     return message;
@@ -2286,11 +2254,11 @@ class Sdk$Type extends MessageType<Sdk> {
     ]);
   }
   create(value?: PartialMessage<Sdk>): Sdk {
-    const message = { type: 0, major: '', minor: '', patch: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.type = 0;
+    message.major = '';
+    message.minor = '';
+    message.patch = '';
     if (value !== undefined) reflectionMergePartial<Sdk>(this, message, value);
     return message;
   }
@@ -2381,11 +2349,10 @@ class OS$Type extends MessageType<OS> {
     ]);
   }
   create(value?: PartialMessage<OS>): OS {
-    const message = { name: '', version: '', architecture: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.name = '';
+    message.version = '';
+    message.architecture = '';
     if (value !== undefined) reflectionMergePartial<OS>(this, message, value);
     return message;
   }
@@ -2465,11 +2432,9 @@ class Browser$Type extends MessageType<Browser> {
     ]);
   }
   create(value?: PartialMessage<Browser>): Browser {
-    const message = { name: '', version: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.name = '';
+    message.version = '';
     if (value !== undefined)
       reflectionMergePartial<Browser>(this, message, value);
     return message;
@@ -2544,11 +2509,9 @@ class Device$Type extends MessageType<Device> {
     ]);
   }
   create(value?: PartialMessage<Device>): Device {
-    const message = { name: '', version: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.name = '';
+    message.version = '';
     if (value !== undefined)
       reflectionMergePartial<Device>(this, message, value);
     return message;
@@ -2639,15 +2602,10 @@ class CallGrants$Type extends MessageType<CallGrants> {
     ]);
   }
   create(value?: PartialMessage<CallGrants>): CallGrants {
-    const message = {
-      canPublishAudio: false,
-      canPublishVideo: false,
-      canScreenshare: false,
-    };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.canPublishAudio = false;
+    message.canPublishVideo = false;
+    message.canScreenshare = false;
     if (value !== undefined)
       reflectionMergePartial<CallGrants>(this, message, value);
     return message;
diff --git a/packages/client/src/gen/video/sfu/signal_rpc/signal.client.ts b/packages/client/src/gen/video/sfu/signal_rpc/signal.client.ts
index 876228c597..f599bf27c0 100644
--- a/packages/client/src/gen/video/sfu/signal_rpc/signal.client.ts
+++ b/packages/client/src/gen/video/sfu/signal_rpc/signal.client.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.0 with parameter long_type_string,client_generic,server_none,eslint_disable
+// @generated by protobuf-ts 2.9.3 with parameter long_type_string,client_generic,server_none,eslint_disable
 // @generated from protobuf file "video/sfu/signal_rpc/signal.proto" (package "stream.video.sfu.signal", syntax proto3)
 // tslint:disable
 import type {
diff --git a/packages/client/src/gen/video/sfu/signal_rpc/signal.ts b/packages/client/src/gen/video/sfu/signal_rpc/signal.ts
index 5be6809103..ffc5511253 100644
--- a/packages/client/src/gen/video/sfu/signal_rpc/signal.ts
+++ b/packages/client/src/gen/video/sfu/signal_rpc/signal.ts
@@ -1,5 +1,5 @@
 /* eslint-disable */
-// @generated by protobuf-ts 2.9.0 with parameter long_type_string,client_generic,server_none,eslint_disable
+// @generated by protobuf-ts 2.9.3 with parameter long_type_string,client_generic,server_none,eslint_disable
 // @generated from protobuf file "video/sfu/signal_rpc/signal.proto" (package "stream.video.sfu.signal", syntax proto3)
 // tslint:disable
 import {
@@ -19,7 +19,6 @@ import type {
   PartialMessage,
 } from '@protobuf-ts/runtime';
 import {
-  MESSAGE_TYPE,
   MessageType,
   reflectionMergePartial,
   UnknownFieldHandler,
@@ -235,11 +234,9 @@ class ICERestartRequest$Type extends MessageType<ICERestartRequest> {
     ]);
   }
   create(value?: PartialMessage<ICERestartRequest>): ICERestartRequest {
-    const message = { sessionId: '', peerType: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.sessionId = '';
+    message.peerType = 0;
     if (value !== undefined)
       reflectionMergePartial<ICERestartRequest>(this, message, value);
     return message;
@@ -313,11 +310,7 @@ class ICERestartResponse$Type extends MessageType<ICERestartResponse> {
     ]);
   }
   create(value?: PartialMessage<ICERestartResponse>): ICERestartResponse {
-    const message = {};
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
     if (value !== undefined)
       reflectionMergePartial<ICERestartResponse>(this, message, value);
     return message;
@@ -403,11 +396,9 @@ class UpdateMuteStatesRequest$Type extends MessageType<UpdateMuteStatesRequest>
   create(
     value?: PartialMessage<UpdateMuteStatesRequest>,
   ): UpdateMuteStatesRequest {
-    const message = { sessionId: '', muteStates: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.sessionId = '';
+    message.muteStates = [];
     if (value !== undefined)
       reflectionMergePartial<UpdateMuteStatesRequest>(this, message, value);
     return message;
@@ -489,11 +480,7 @@ class UpdateMuteStatesResponse$Type extends MessageType<UpdateMuteStatesResponse
   create(
     value?: PartialMessage<UpdateMuteStatesResponse>,
   ): UpdateMuteStatesResponse {
-    const message = {};
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
     if (value !== undefined)
       reflectionMergePartial<UpdateMuteStatesResponse>(this, message, value);
     return message;
@@ -580,11 +567,9 @@ class TrackMuteState$Type extends MessageType<TrackMuteState> {
     ]);
   }
   create(value?: PartialMessage<TrackMuteState>): TrackMuteState {
-    const message = { trackType: 0, muted: false };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.trackType = 0;
+    message.muted = false;
     if (value !== undefined)
       reflectionMergePartial<TrackMuteState>(this, message, value);
     return message;
@@ -658,11 +643,8 @@ class AudioMuteChanged$Type extends MessageType<AudioMuteChanged> {
     ]);
   }
   create(value?: PartialMessage<AudioMuteChanged>): AudioMuteChanged {
-    const message = { muted: false };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.muted = false;
     if (value !== undefined)
       reflectionMergePartial<AudioMuteChanged>(this, message, value);
     return message;
@@ -730,11 +712,8 @@ class VideoMuteChanged$Type extends MessageType<VideoMuteChanged> {
     ]);
   }
   create(value?: PartialMessage<VideoMuteChanged>): VideoMuteChanged {
-    const message = { muted: false };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.muted = false;
     if (value !== undefined)
       reflectionMergePartial<VideoMuteChanged>(this, message, value);
     return message;
@@ -811,11 +790,9 @@ class UpdateSubscriptionsRequest$Type extends MessageType<UpdateSubscriptionsReq
   create(
     value?: PartialMessage<UpdateSubscriptionsRequest>,
   ): UpdateSubscriptionsRequest {
-    const message = { sessionId: '', tracks: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.sessionId = '';
+    message.tracks = [];
     if (value !== undefined)
       reflectionMergePartial<UpdateSubscriptionsRequest>(this, message, value);
     return message;
@@ -901,11 +878,7 @@ class UpdateSubscriptionsResponse$Type extends MessageType<UpdateSubscriptionsRe
   create(
     value?: PartialMessage<UpdateSubscriptionsResponse>,
   ): UpdateSubscriptionsResponse {
-    const message = {};
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
     if (value !== undefined)
       reflectionMergePartial<UpdateSubscriptionsResponse>(this, message, value);
     return message;
@@ -997,11 +970,10 @@ class TrackSubscriptionDetails$Type extends MessageType<TrackSubscriptionDetails
   create(
     value?: PartialMessage<TrackSubscriptionDetails>,
   ): TrackSubscriptionDetails {
-    const message = { userId: '', sessionId: '', trackType: 0 };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.userId = '';
+    message.sessionId = '';
+    message.trackType = 0;
     if (value !== undefined)
       reflectionMergePartial<TrackSubscriptionDetails>(this, message, value);
     return message;
@@ -1103,11 +1075,10 @@ class SendAnswerRequest$Type extends MessageType<SendAnswerRequest> {
     ]);
   }
   create(value?: PartialMessage<SendAnswerRequest>): SendAnswerRequest {
-    const message = { peerType: 0, sdp: '', sessionId: '' };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.peerType = 0;
+    message.sdp = '';
+    message.sessionId = '';
     if (value !== undefined)
       reflectionMergePartial<SendAnswerRequest>(this, message, value);
     return message;
@@ -1187,11 +1158,7 @@ class SendAnswerResponse$Type extends MessageType<SendAnswerResponse> {
     ]);
   }
   create(value?: PartialMessage<SendAnswerResponse>): SendAnswerResponse {
-    const message = {};
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
     if (value !== undefined)
       reflectionMergePartial<SendAnswerResponse>(this, message, value);
     return message;
@@ -1268,11 +1235,7 @@ class ICETrickleResponse$Type extends MessageType<ICETrickleResponse> {
     ]);
   }
   create(value?: PartialMessage<ICETrickleResponse>): ICETrickleResponse {
-    const message = {};
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
     if (value !== undefined)
       reflectionMergePartial<ICETrickleResponse>(this, message, value);
     return message;
@@ -1357,11 +1320,10 @@ class SetPublisherRequest$Type extends MessageType<SetPublisherRequest> {
     ]);
   }
   create(value?: PartialMessage<SetPublisherRequest>): SetPublisherRequest {
-    const message = { sdp: '', sessionId: '', tracks: [] };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.sdp = '';
+    message.sessionId = '';
+    message.tracks = [];
     if (value !== undefined)
       reflectionMergePartial<SetPublisherRequest>(this, message, value);
     return message;
@@ -1450,11 +1412,10 @@ class SetPublisherResponse$Type extends MessageType<SetPublisherResponse> {
     ]);
   }
   create(value?: PartialMessage<SetPublisherResponse>): SetPublisherResponse {
-    const message = { sdp: '', sessionId: '', iceRestart: false };
-    globalThis.Object.defineProperty(message, MESSAGE_TYPE, {
-      enumerable: false,
-      value: this,
-    });
+    const message = globalThis.Object.create(this.messagePrototype!);
+    message.sdp = '';
+    message.sessionId = '';
+    message.iceRestart = false;
     if (value !== undefined)
       reflectionMergePartial<SetPublisherResponse>(this, message, value);
     return message;
diff --git a/packages/react-bindings/src/contexts/StreamI18nContext.tsx b/packages/react-bindings/src/contexts/StreamI18nContext.tsx
index 3fa0280005..0d3519c8e6 100644
--- a/packages/react-bindings/src/contexts/StreamI18nContext.tsx
+++ b/packages/react-bindings/src/contexts/StreamI18nContext.tsx
@@ -23,6 +23,7 @@ const StreamI18nContext = createContext<StreamI18nContextValue>({
 type CreateI18nParams = {
   i18nInstance?: StreamI18n;
   language?: string;
+  fallbackLanguage?: string;
   translationsOverrides?: TranslationsMap;
 };
 
@@ -44,12 +45,17 @@ export const StreamI18nProvider = ({
 export const useCreateI18n = ({
   i18nInstance,
   language,
+  fallbackLanguage,
   translationsOverrides,
 }: CreateI18nParams) => {
   const [i18n] = useState(
     () =>
       i18nInstance ||
-      new StreamI18n({ currentLanguage: language, translationsOverrides }),
+      new StreamI18n({
+        currentLanguage: language,
+        fallbackLanguage,
+        translationsOverrides,
+      }),
   );
   const [t, setTranslationFn] = useState<StreamI18n['t']>(
     () => defaultTranslationFunction,
diff --git a/packages/react-bindings/src/i18n/StreamI18n.ts b/packages/react-bindings/src/i18n/StreamI18n.ts
index 4be09bcea2..aa24b4ed37 100644
--- a/packages/react-bindings/src/i18n/StreamI18n.ts
+++ b/packages/react-bindings/src/i18n/StreamI18n.ts
@@ -12,7 +12,8 @@ export const DEFAULT_NAMESPACE = 'stream-video';
 const DEFAULT_CONFIG = {
   debug: false,
   currentLanguage: DEFAULT_LANGUAGE,
-};
+  fallbackLanguage: false,
+} as const;
 
 const DEFAULT_TRANSLATIONS_REGISTRY = mapToRegistry({}, DEFAULT_NAMESPACE);
 
@@ -21,6 +22,8 @@ export const defaultTranslationFunction = (key: string) => key;
 export type StreamI18nConstructor = {
   /** Language into which the provided strings are translated */
   currentLanguage?: TranslationLanguage;
+  /** Fallback language which will be used if no translation is found for current language */
+  fallbackLanguage?: TranslationLanguage;
   /** Logs info level to console output. Helps find issues with loading not working. */
   debug?: boolean;
   /** Custom translations that will be merged with the defaults provided by the library. */
@@ -37,13 +40,14 @@ export class StreamI18n {
     const {
       debug = DEFAULT_CONFIG.debug,
       currentLanguage = DEFAULT_CONFIG.currentLanguage,
+      fallbackLanguage = DEFAULT_CONFIG.fallbackLanguage,
       translationsOverrides,
     } = options;
 
     this.i18nInstance = i18next.createInstance({
       debug,
       defaultNS: DEFAULT_NAMESPACE,
-      fallbackLng: false,
+      fallbackLng: fallbackLanguage,
       interpolation: { escapeValue: false },
       keySeparator: false,
       lng: currentLanguage,
diff --git a/packages/react-sdk/CHANGELOG.md b/packages/react-sdk/CHANGELOG.md
index dd882be54a..c671bce18c 100644
--- a/packages/react-sdk/CHANGELOG.md
+++ b/packages/react-sdk/CHANGELOG.md
@@ -2,782 +2,898 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+# Styling
+
+- New global variables like spacing, font-size, colors, button states etc, have been added. The old variables are still available.
+- Major style changes have been made to the following items: Callstats, Device settings, Buttons, Particpant layout
+- Icons have been updated and added
+
+# Components
+
+## Button
+
+### CompositeButton.tsx
+
+- `ToggleMenuButton` prop has been added by default `DefaultToggleMenuButton`
+- The composite buttons has an optional variant `primary` and `secondary` to indicate a primary and secondary active state of the button
+- An `active` class has been added to the `DefaultToggleMenuButton`.
+
+## Call controls
+
+- The default caption value has been removed
+- A title has been added to the buttons
+- Some buttons have been provided a variant prop
+- CallStats button has been replaced with Reactions button
+
+### CancelCallButton.tsx
+
+- A cancel call confirmation button is added to allow the user end the call for all participants or leave the call.
+
+### ToggleAudioButton.tsx
+
+- A default permission state has been added to indicate that the browsers audio permissions have not been granted
+
+### ToggleVideoButton.tsx
+
+- A default permission state has been added to indicate that the browsers camera permissions have not been granted
+
+### ReactionsButton.tsx
+
+- Added a layout prop `horizontal` or `vertical` defaults to `horizontal`
+
+### RecordCallButton.tsx
+
+- An end recording confirmation button component has been added. To display a confirmation modal to the user either continue the recording or cancel it
+
+### Other
+
+### CallParticipantsList.tsx
+
+- Removed the copy url button invite new participants
+- Removed other related invite functionality
+
+### CallRecordingListHeader
+
+- Put the refresh functionality to optional
+
+### CallStats.tsx
+
+- The stats are defined with a `lowBound` (default 75) and a `highBound` (default 400) prop to indicate what you think is an acceptable latency.
+
+### DropdownSelect.tsx
+
+- Added a dropdown selector used in the device settings
+
+### Icon.tsx
+
+- Added a className prop to icon
+
+### MenuToggle.tsx
+
+- Ability to choose between to visual types `portal` or `menu` to display the MenuToggle.
+
+### Notification.tsx
+
+- Added a `close` prop so a notification can be closed by the user
+
+### RecordingInProgressNotification.tsx
+
+- Added a notification that can be used to be displayed when a recording is in progress
+
+### DefaultVideoPlaceholder
+
+- Added an initials fallback
+
 ### [0.4.26](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.25...@stream-io/video-react-sdk-0.4.26) (2024-02-19)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.11`
-* `@stream-io/video-react-bindings` updated to version `0.3.22`
+- `@stream-io/video-client` updated to version `0.5.11`
+- `@stream-io/video-react-bindings` updated to version `0.3.22`
+
 ### [0.4.25](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.24...@stream-io/video-react-sdk-0.4.25) (2024-02-16)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.10`
-* `@stream-io/video-react-bindings` updated to version `0.3.21`
+- `@stream-io/video-client` updated to version `0.5.10`
+- `@stream-io/video-react-bindings` updated to version `0.3.21`
+
 ### [0.4.24](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.23...@stream-io/video-react-sdk-0.4.24) (2024-02-12)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.9`
-* `@stream-io/video-react-bindings` updated to version `0.3.20`
+- `@stream-io/video-client` updated to version `0.5.9`
+- `@stream-io/video-react-bindings` updated to version `0.3.20`
+
 ### [0.4.23](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.22...@stream-io/video-react-sdk-0.4.23) (2024-02-06)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.8`
-* `@stream-io/video-react-bindings` updated to version `0.3.19`
+- `@stream-io/video-client` updated to version `0.5.8`
+- `@stream-io/video-react-bindings` updated to version `0.3.19`
+
 ### [0.4.22](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.21...@stream-io/video-react-sdk-0.4.22) (2024-01-29)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.7`
-* `@stream-io/video-react-bindings` updated to version `0.3.18`
+- `@stream-io/video-client` updated to version `0.5.7`
+- `@stream-io/video-react-bindings` updated to version `0.3.18`
+
 ### [0.4.21](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.20...@stream-io/video-react-sdk-0.4.21) (2024-01-19)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.6`
-* `@stream-io/video-react-bindings` updated to version `0.3.17`
-### [0.4.20](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.19...@stream-io/video-react-sdk-0.4.20) (2024-01-16)
+- `@stream-io/video-client` updated to version `0.5.6`
+- `@stream-io/video-react-bindings` updated to version `0.3.17`
 
+### [0.4.20](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.19...@stream-io/video-react-sdk-0.4.20) (2024-01-16)
 
 ### Bug Fixes
 
-* **react-sdk:** handle external full-screen toggling ([#1243](https://github.com/GetStream/stream-video-js/issues/1243)) ([9578155](https://github.com/GetStream/stream-video-js/commit/95781555e8450c780ca73cf9d9d940d12613d893))
+- **react-sdk:** handle external full-screen toggling ([#1243](https://github.com/GetStream/stream-video-js/issues/1243)) ([9578155](https://github.com/GetStream/stream-video-js/commit/95781555e8450c780ca73cf9d9d940d12613d893))
 
 ### [0.4.19](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.18...@stream-io/video-react-sdk-0.4.19) (2024-01-16)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.5`
-* `@stream-io/video-react-bindings` updated to version `0.3.16`
+- `@stream-io/video-client` updated to version `0.5.5`
+- `@stream-io/video-react-bindings` updated to version `0.3.16`
+
 ### [0.4.18](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.17...@stream-io/video-react-sdk-0.4.18) (2024-01-16)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.4`
-* `@stream-io/video-react-bindings` updated to version `0.3.15`
+- `@stream-io/video-client` updated to version `0.5.4`
+- `@stream-io/video-react-bindings` updated to version `0.3.15`
+
 ### [0.4.17](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.16...@stream-io/video-react-sdk-0.4.17) (2023-12-22)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.3`
-* `@stream-io/video-react-bindings` updated to version `0.3.14`
+- `@stream-io/video-client` updated to version `0.5.3`
+- `@stream-io/video-react-bindings` updated to version `0.3.14`
+
 ### [0.4.16](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.15...@stream-io/video-react-sdk-0.4.16) (2023-12-11)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.2`
-* `@stream-io/video-react-bindings` updated to version `0.3.13`
+- `@stream-io/video-client` updated to version `0.5.2`
+- `@stream-io/video-react-bindings` updated to version `0.3.13`
+
 ### [0.4.15](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.14...@stream-io/video-react-sdk-0.4.15) (2023-12-05)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.1`
-* `@stream-io/video-react-bindings` updated to version `0.3.12`
+- `@stream-io/video-client` updated to version `0.5.1`
+- `@stream-io/video-react-bindings` updated to version `0.3.12`
+
 ### [0.4.14](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.13...@stream-io/video-react-sdk-0.4.14) (2023-11-29)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.5.0`
-* `@stream-io/video-react-bindings` updated to version `0.3.11`
+- `@stream-io/video-client` updated to version `0.5.0`
+- `@stream-io/video-react-bindings` updated to version `0.3.11`
+
 ### [0.4.13](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.12...@stream-io/video-react-sdk-0.4.13) (2023-11-27)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.10`
-* `@stream-io/video-react-bindings` updated to version `0.3.10`
+- `@stream-io/video-client` updated to version `0.4.10`
+- `@stream-io/video-react-bindings` updated to version `0.3.10`
+
 ### [0.4.12](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.11...@stream-io/video-react-sdk-0.4.12) (2023-11-22)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.9`
-* `@stream-io/video-react-bindings` updated to version `0.3.9`
+- `@stream-io/video-client` updated to version `0.4.9`
+- `@stream-io/video-react-bindings` updated to version `0.3.9`
 
 ### Features
 
-* **participant-view:** allow opting-out from rendering VideoPlaceholder ([#1198](https://github.com/GetStream/stream-video-js/issues/1198)) ([acb020c](https://github.com/GetStream/stream-video-js/commit/acb020c8157a1338771bef11ef5e501bc9cd6f69))
+- **participant-view:** allow opting-out from rendering VideoPlaceholder ([#1198](https://github.com/GetStream/stream-video-js/issues/1198)) ([acb020c](https://github.com/GetStream/stream-video-js/commit/acb020c8157a1338771bef11ef5e501bc9cd6f69))
 
 ### [0.4.11](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.10...@stream-io/video-react-sdk-0.4.11) (2023-11-16)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.8`
-* `@stream-io/video-react-bindings` updated to version `0.3.8`
+- `@stream-io/video-client` updated to version `0.4.8`
+- `@stream-io/video-react-bindings` updated to version `0.3.8`
+
 ### [0.4.10](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.9...@stream-io/video-react-sdk-0.4.10) (2023-11-13)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.7`
-* `@stream-io/video-react-bindings` updated to version `0.3.7`
+- `@stream-io/video-client` updated to version `0.4.7`
+- `@stream-io/video-react-bindings` updated to version `0.3.7`
 
 ### Features
 
-* **device-api:** Browser Permissions API ([#1184](https://github.com/GetStream/stream-video-js/issues/1184)) ([a0b3573](https://github.com/GetStream/stream-video-js/commit/a0b3573b630ff8450953cdf1102fe722aea83f6f))
+- **device-api:** Browser Permissions API ([#1184](https://github.com/GetStream/stream-video-js/issues/1184)) ([a0b3573](https://github.com/GetStream/stream-video-js/commit/a0b3573b630ff8450953cdf1102fe722aea83f6f))
 
 ### [0.4.9](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.8...@stream-io/video-react-sdk-0.4.9) (2023-11-13)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.6`
-* `@stream-io/video-react-bindings` updated to version `0.3.6`
+- `@stream-io/video-client` updated to version `0.4.6`
+- `@stream-io/video-react-bindings` updated to version `0.3.6`
+
 ### [0.4.8](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.7...@stream-io/video-react-sdk-0.4.8) (2023-11-07)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.5`
-* `@stream-io/video-react-bindings` updated to version `0.3.5`
-* `@stream-io/video-styling` updated to version `0.1.14`
+- `@stream-io/video-client` updated to version `0.4.5`
+- `@stream-io/video-react-bindings` updated to version `0.3.5`
+- `@stream-io/video-styling` updated to version `0.1.14`
 
 ### Bug Fixes
 
-* lift the debug helpers from the SDK to Pronto ([#1182](https://github.com/GetStream/stream-video-js/issues/1182)) ([8f31efc](https://github.com/GetStream/stream-video-js/commit/8f31efc71d9f85ef147d21b42f23876599c36072))
+- lift the debug helpers from the SDK to Pronto ([#1182](https://github.com/GetStream/stream-video-js/issues/1182)) ([8f31efc](https://github.com/GetStream/stream-video-js/commit/8f31efc71d9f85ef147d21b42f23876599c36072))
 
 ### [0.4.7](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.6...@stream-io/video-react-sdk-0.4.7) (2023-11-03)
 
-
 ### Bug Fixes
 
-* set `key` prop to the correct element ([#1178](https://github.com/GetStream/stream-video-js/issues/1178)) ([b24c07d](https://github.com/GetStream/stream-video-js/commit/b24c07dd366e8aa64055aae7dd48cabe8761eac0)), closes [#1176](https://github.com/GetStream/stream-video-js/issues/1176)
+- set `key` prop to the correct element ([#1178](https://github.com/GetStream/stream-video-js/issues/1178)) ([b24c07d](https://github.com/GetStream/stream-video-js/commit/b24c07dd366e8aa64055aae7dd48cabe8761eac0)), closes [#1176](https://github.com/GetStream/stream-video-js/issues/1176)
 
 ### [0.4.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.5...@stream-io/video-react-sdk-0.4.6) (2023-11-02)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.4`
-* `@stream-io/video-react-bindings` updated to version `0.3.4`
+- `@stream-io/video-client` updated to version `0.4.4`
+- `@stream-io/video-react-bindings` updated to version `0.3.4`
 
 ### Bug Fixes
 
-* allow audio and screen share audio tracks, delay setSinkId ([#1176](https://github.com/GetStream/stream-video-js/issues/1176)) ([6a099c5](https://github.com/GetStream/stream-video-js/commit/6a099c5c7cc6f5d389961a7c594e914e19be4ddb))
+- allow audio and screen share audio tracks, delay setSinkId ([#1176](https://github.com/GetStream/stream-video-js/issues/1176)) ([6a099c5](https://github.com/GetStream/stream-video-js/commit/6a099c5c7cc6f5d389961a7c594e914e19be4ddb))
 
 ### [0.4.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.4...@stream-io/video-react-sdk-0.4.5) (2023-11-01)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.3`
-* `@stream-io/video-react-bindings` updated to version `0.3.3`
+- `@stream-io/video-client` updated to version `0.4.3`
+- `@stream-io/video-react-bindings` updated to version `0.3.3`
+
 ### [0.4.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.3...@stream-io/video-react-sdk-0.4.4) (2023-11-01)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.2`
-* `@stream-io/video-react-bindings` updated to version `0.3.2`
+- `@stream-io/video-client` updated to version `0.4.2`
+- `@stream-io/video-react-bindings` updated to version `0.3.2`
 
 ### Bug Fixes
 
-* respect server-side settings in the lobby ([#1175](https://github.com/GetStream/stream-video-js/issues/1175)) ([b722a0a](https://github.com/GetStream/stream-video-js/commit/b722a0a4f8fd4e4e56787db3d9a56e45ee195974))
+- respect server-side settings in the lobby ([#1175](https://github.com/GetStream/stream-video-js/issues/1175)) ([b722a0a](https://github.com/GetStream/stream-video-js/commit/b722a0a4f8fd4e4e56787db3d9a56e45ee195974))
 
 ### [0.4.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.2...@stream-io/video-react-sdk-0.4.3) (2023-10-30)
 
-
 ### Bug Fixes
 
-* add marker classes for the default `VideoPreview` components ([#1172](https://github.com/GetStream/stream-video-js/issues/1172)) ([7948cd8](https://github.com/GetStream/stream-video-js/commit/7948cd81a5ad6271872239a77b2a5ab8a856d231))
+- add marker classes for the default `VideoPreview` components ([#1172](https://github.com/GetStream/stream-video-js/issues/1172)) ([7948cd8](https://github.com/GetStream/stream-video-js/commit/7948cd81a5ad6271872239a77b2a5ab8a856d231))
 
 ### [0.4.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.1...@stream-io/video-react-sdk-0.4.2) (2023-10-30)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.1`
-* `@stream-io/video-react-bindings` updated to version `0.3.1`
-### [0.4.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.0...@stream-io/video-react-sdk-0.4.1) (2023-10-27)
+- `@stream-io/video-client` updated to version `0.4.1`
+- `@stream-io/video-react-bindings` updated to version `0.3.1`
 
+### [0.4.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.4.0...@stream-io/video-react-sdk-0.4.1) (2023-10-27)
 
 ### Bug Fixes
 
-* **video-preview:** accept `className` prop ([#1166](https://github.com/GetStream/stream-video-js/issues/1166)) ([bfbfa1e](https://github.com/GetStream/stream-video-js/commit/bfbfa1ed52d4a0b19f9221252640d2926ebda641))
+- **video-preview:** accept `className` prop ([#1166](https://github.com/GetStream/stream-video-js/issues/1166)) ([bfbfa1e](https://github.com/GetStream/stream-video-js/commit/bfbfa1ed52d4a0b19f9221252640d2926ebda641))
 
 ## [0.4.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.47...@stream-io/video-react-sdk-0.4.0) (2023-10-27)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.4.0`
-* `@stream-io/video-react-bindings` updated to version `0.3.0`
+- `@stream-io/video-client` updated to version `0.4.0`
+- `@stream-io/video-react-bindings` updated to version `0.3.0`
 
 ### ⚠ BREAKING CHANGES
 
-* **react-sdk:** Universal Device Management API (#1127)
+- **react-sdk:** Universal Device Management API (#1127)
 
 ### Features
 
-* **react-sdk:** Universal Device Management API ([#1127](https://github.com/GetStream/stream-video-js/issues/1127)) ([aeb3561](https://github.com/GetStream/stream-video-js/commit/aeb35612745f45254b536281c5f81d1bcac2bab5))
+- **react-sdk:** Universal Device Management API ([#1127](https://github.com/GetStream/stream-video-js/issues/1127)) ([aeb3561](https://github.com/GetStream/stream-video-js/commit/aeb35612745f45254b536281c5f81d1bcac2bab5))
 
 ### [0.3.47](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.46...@stream-io/video-react-sdk-0.3.47) (2023-10-26)
 
-
 ### Bug Fixes
 
-* Localize "Screen Share" caption ([#1164](https://github.com/GetStream/stream-video-js/issues/1164)) ([0a9ed96](https://github.com/GetStream/stream-video-js/commit/0a9ed960ee5ef8409b61dc5d747912b17a521160))
+- Localize "Screen Share" caption ([#1164](https://github.com/GetStream/stream-video-js/issues/1164)) ([0a9ed96](https://github.com/GetStream/stream-video-js/commit/0a9ed960ee5ef8409b61dc5d747912b17a521160))
 
 ### [0.3.46](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.45...@stream-io/video-react-sdk-0.3.46) (2023-10-25)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.3.36`
-* `@stream-io/video-react-bindings` updated to version `0.2.37`
-### [0.3.45](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.44...@stream-io/video-react-sdk-0.3.45) (2023-10-24)
+- `@stream-io/video-client` updated to version `0.3.36`
+- `@stream-io/video-react-bindings` updated to version `0.2.37`
 
+### [0.3.45](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.44...@stream-io/video-react-sdk-0.3.45) (2023-10-24)
 
 ### Bug Fixes
 
-* add missing translations ([#1158](https://github.com/GetStream/stream-video-js/issues/1158)) ([6eb0c7a](https://github.com/GetStream/stream-video-js/commit/6eb0c7abf1b6a403438e4d80f275265e07e4f82f))
+- add missing translations ([#1158](https://github.com/GetStream/stream-video-js/issues/1158)) ([6eb0c7a](https://github.com/GetStream/stream-video-js/commit/6eb0c7abf1b6a403438e4d80f275265e07e4f82f))
 
 ### [0.3.44](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.43...@stream-io/video-react-sdk-0.3.44) (2023-10-19)
 
-
 ### Bug Fixes
 
-* sync video "paused" state more accurately ([#1150](https://github.com/GetStream/stream-video-js/issues/1150)) ([39cd42f](https://github.com/GetStream/stream-video-js/commit/39cd42f0035bbabdd9bb078fc8df9192f3b6c42f))
+- sync video "paused" state more accurately ([#1150](https://github.com/GetStream/stream-video-js/issues/1150)) ([39cd42f](https://github.com/GetStream/stream-video-js/commit/39cd42f0035bbabdd9bb078fc8df9192f3b6c42f))
 
 ### [0.3.43](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.42...@stream-io/video-react-sdk-0.3.43) (2023-10-19)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.3.35`
-* `@stream-io/video-react-bindings` updated to version `0.2.36`
+- `@stream-io/video-client` updated to version `0.3.35`
+- `@stream-io/video-react-bindings` updated to version `0.2.36`
 
 ### Features
 
-* mute screenshare_audio, update to the newest OpenAPI schema ([#1148](https://github.com/GetStream/stream-video-js/issues/1148)) ([81c45a7](https://github.com/GetStream/stream-video-js/commit/81c45a77e6a526de05ce5457357d212fb3e613d9))
+- mute screenshare_audio, update to the newest OpenAPI schema ([#1148](https://github.com/GetStream/stream-video-js/issues/1148)) ([81c45a7](https://github.com/GetStream/stream-video-js/commit/81c45a77e6a526de05ce5457357d212fb3e613d9))
 
 ### [0.3.42](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.41...@stream-io/video-react-sdk-0.3.42) (2023-10-18)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.3.34`
-* `@stream-io/video-react-bindings` updated to version `0.2.35`
-* `@stream-io/video-styling` updated to version `0.1.13`
+- `@stream-io/video-client` updated to version `0.3.34`
+- `@stream-io/video-react-bindings` updated to version `0.2.35`
+- `@stream-io/video-styling` updated to version `0.1.13`
 
 ### Features
 
-* **build:** ESM and CJS bundles ([#1144](https://github.com/GetStream/stream-video-js/issues/1144)) ([58b60ee](https://github.com/GetStream/stream-video-js/commit/58b60eee4b1cd667d2eef8f17ed4e6da74876a51)), closes [#1025](https://github.com/GetStream/stream-video-js/issues/1025)
+- **build:** ESM and CJS bundles ([#1144](https://github.com/GetStream/stream-video-js/issues/1144)) ([58b60ee](https://github.com/GetStream/stream-video-js/commit/58b60eee4b1cd667d2eef8f17ed4e6da74876a51)), closes [#1025](https://github.com/GetStream/stream-video-js/issues/1025)
 
 ### [0.3.41](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.40...@stream-io/video-react-sdk-0.3.41) (2023-10-13)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.3.33`
-* `@stream-io/video-react-bindings` updated to version `0.2.34`
+- `@stream-io/video-client` updated to version `0.3.33`
+- `@stream-io/video-react-bindings` updated to version `0.2.34`
+
 ### [0.3.40](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.39...@stream-io/video-react-sdk-0.3.40) (2023-10-13)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.3.32`
-* `@stream-io/video-react-bindings` updated to version `0.2.33`
+- `@stream-io/video-client` updated to version `0.3.32`
+- `@stream-io/video-react-bindings` updated to version `0.2.33`
+
 ### [0.3.39](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.38...@stream-io/video-react-sdk-0.3.39) (2023-10-09)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.3.31`
-* `@stream-io/video-react-bindings` updated to version `0.2.32`
+- `@stream-io/video-client` updated to version `0.3.31`
+- `@stream-io/video-react-bindings` updated to version `0.2.32`
 
 ### Bug Fixes
 
-* sorting in paginated grid ([#1129](https://github.com/GetStream/stream-video-js/issues/1129)) ([d5b280a](https://github.com/GetStream/stream-video-js/commit/d5b280aadeaa4c718d0158561197c7045620ae0f))
+- sorting in paginated grid ([#1129](https://github.com/GetStream/stream-video-js/issues/1129)) ([d5b280a](https://github.com/GetStream/stream-video-js/commit/d5b280aadeaa4c718d0158561197c7045620ae0f))
 
 ### [0.3.38](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.37...@stream-io/video-react-sdk-0.3.38) (2023-10-06)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.3.30`
-* `@stream-io/video-react-bindings` updated to version `0.2.31`
+- `@stream-io/video-client` updated to version `0.3.30`
+- `@stream-io/video-react-bindings` updated to version `0.2.31`
 
 ### Features
 
-* ScreenShare Audio support ([#1118](https://github.com/GetStream/stream-video-js/issues/1118)) ([5b63e1c](https://github.com/GetStream/stream-video-js/commit/5b63e1c5f52c76e3761e6907bd3786c19f0e5c6d))
+- ScreenShare Audio support ([#1118](https://github.com/GetStream/stream-video-js/issues/1118)) ([5b63e1c](https://github.com/GetStream/stream-video-js/commit/5b63e1c5f52c76e3761e6907bd3786c19f0e5c6d))
 
 ### [0.3.37](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.36...@stream-io/video-react-sdk-0.3.37) (2023-10-05)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.3.29`
-* `@stream-io/video-react-bindings` updated to version `0.2.30`
-### [0.3.36](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.35...@stream-io/video-react-sdk-0.3.36) (2023-10-03)
+- `@stream-io/video-client` updated to version `0.3.29`
+- `@stream-io/video-react-bindings` updated to version `0.2.30`
 
+### [0.3.36](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.35...@stream-io/video-react-sdk-0.3.36) (2023-10-03)
 
 ### Bug Fixes
 
-* check if `currentParticipant` is actually initialized ([#1124](https://github.com/GetStream/stream-video-js/issues/1124)) ([797b84f](https://github.com/GetStream/stream-video-js/commit/797b84f9f63ae2c98a97b28afc08858705cd6840))
+- check if `currentParticipant` is actually initialized ([#1124](https://github.com/GetStream/stream-video-js/issues/1124)) ([797b84f](https://github.com/GetStream/stream-video-js/commit/797b84f9f63ae2c98a97b28afc08858705cd6840))
 
 ### [0.3.35](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.34...@stream-io/video-react-sdk-0.3.35) (2023-10-02)
 
-
 ### Bug Fixes
 
-* requestPermission should be no-op when permission is already granted ([#1122](https://github.com/GetStream/stream-video-js/issues/1122)) ([f3d9e34](https://github.com/GetStream/stream-video-js/commit/f3d9e349825a6052850f7a78c3d6af9f517d136e))
+- requestPermission should be no-op when permission is already granted ([#1122](https://github.com/GetStream/stream-video-js/issues/1122)) ([f3d9e34](https://github.com/GetStream/stream-video-js/commit/f3d9e349825a6052850f7a78c3d6af9f517d136e))
 
 ### [0.3.34](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.33...@stream-io/video-react-sdk-0.3.34) (2023-10-02)
 
 ### Dependency Updates
 
-* `@stream-io/video-styling` updated to version `0.1.12`
+- `@stream-io/video-styling` updated to version `0.1.12`
 
 ### Features
 
-* **egress-composite:** add support for new options ([#1104](https://github.com/GetStream/stream-video-js/issues/1104)) ([2e039c2](https://github.com/GetStream/stream-video-js/commit/2e039c280cd808e6464ee3ab54e8c3606a0a0180)), closes [/github.com/GetStream/stream-video-js/blob/acc7301c069daeff68a8ad495e4f66bc2e61a137/sample-apps/react/egress-composite/src/ConfigurationContext.tsx#L53-L117](https://github.com/GetStream//github.com/GetStream/stream-video-js/blob/acc7301c069daeff68a8ad495e4f66bc2e61a137/sample-apps/react/egress-composite/src/ConfigurationContext.tsx/issues/L53-L117)
+- **egress-composite:** add support for new options ([#1104](https://github.com/GetStream/stream-video-js/issues/1104)) ([2e039c2](https://github.com/GetStream/stream-video-js/commit/2e039c280cd808e6464ee3ab54e8c3606a0a0180)), closes [/github.com/GetStream/stream-video-js/blob/acc7301c069daeff68a8ad495e4f66bc2e61a137/sample-apps/react/egress-composite/src/ConfigurationContext.tsx#L53-L117](https://github.com/GetStream//github.com/GetStream/stream-video-js/blob/acc7301c069daeff68a8ad495e4f66bc2e61a137/sample-apps/react/egress-composite/src/ConfigurationContext.tsx/issues/L53-L117)
 
 ### [0.3.33](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.32...@stream-io/video-react-sdk-0.3.33) (2023-09-28)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.3.28`
-* `@stream-io/video-react-bindings` updated to version `0.2.29`
+- `@stream-io/video-client` updated to version `0.3.28`
+- `@stream-io/video-react-bindings` updated to version `0.2.29`
+
 ### [0.3.32](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.31...@stream-io/video-react-sdk-0.3.32) (2023-09-28)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.28`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.28`
+
 ### [0.3.31](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.30...@stream-io/video-react-sdk-0.3.31) (2023-09-27)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.27`
-* `@stream-io/video-styling` updated to version `0.1.11`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.27`
+- `@stream-io/video-styling` updated to version `0.1.11`
 
 ### Features
 
-* **Call Preview:** Support for call thumbnails ([#1099](https://github.com/GetStream/stream-video-js/issues/1099)) ([9274f76](https://github.com/GetStream/stream-video-js/commit/9274f760ed264ee0ee6ac97c6fe679288e067fd8))
+- **Call Preview:** Support for call thumbnails ([#1099](https://github.com/GetStream/stream-video-js/issues/1099)) ([9274f76](https://github.com/GetStream/stream-video-js/commit/9274f760ed264ee0ee6ac97c6fe679288e067fd8))
 
 ### [0.3.30](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.29...@stream-io/video-react-sdk-0.3.30) (2023-09-27)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.26`
-* `@stream-io/video-styling` updated to version `0.1.10`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.26`
+- `@stream-io/video-styling` updated to version `0.1.10`
 
 ### Features
 
-* **react-sdk:** LivestreamLayout ([#1103](https://github.com/GetStream/stream-video-js/issues/1103)) ([6636699](https://github.com/GetStream/stream-video-js/commit/6636699701dfd5eb5886c50781dd5f16a8470da5))
+- **react-sdk:** LivestreamLayout ([#1103](https://github.com/GetStream/stream-video-js/issues/1103)) ([6636699](https://github.com/GetStream/stream-video-js/commit/6636699701dfd5eb5886c50781dd5f16a8470da5))
 
 ### [0.3.29](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.28...@stream-io/video-react-sdk-0.3.29) (2023-09-27)
 
-
 ### Features
 
-* **SpeakerLayout:** add participantsBarLimit ([#1090](https://github.com/GetStream/stream-video-js/issues/1090)) ([712f1e7](https://github.com/GetStream/stream-video-js/commit/712f1e7010fdb8859aaa6caba7e7d9e0f4557ccb))
+- **SpeakerLayout:** add participantsBarLimit ([#1090](https://github.com/GetStream/stream-video-js/issues/1090)) ([712f1e7](https://github.com/GetStream/stream-video-js/commit/712f1e7010fdb8859aaa6caba7e7d9e0f4557ccb))
 
 ### [0.3.28](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.27...@stream-io/video-react-sdk-0.3.28) (2023-09-26)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.25`
-* `@stream-io/video-styling` updated to version `0.1.9`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.25`
+- `@stream-io/video-styling` updated to version `0.1.9`
 
 ### Features
 
-* show the anonymous user count in the participant list ([#1109](https://github.com/GetStream/stream-video-js/issues/1109)) ([a253cbf](https://github.com/GetStream/stream-video-js/commit/a253cbfa7552a9ab4302ce824a72653a27dd324d))
+- show the anonymous user count in the participant list ([#1109](https://github.com/GetStream/stream-video-js/issues/1109)) ([a253cbf](https://github.com/GetStream/stream-video-js/commit/a253cbfa7552a9ab4302ce824a72653a27dd324d))
 
 ### [0.3.27](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.26...@stream-io/video-react-sdk-0.3.27) (2023-09-26)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.24`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.24`
+
 ### [0.3.26](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.25...@stream-io/video-react-sdk-0.3.26) (2023-09-25)
 
 ### Dependency Updates
 
-* `@stream-io/i18n` updated to version `0.1.2`
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.23`
-* `@stream-io/video-styling` updated to version `0.1.8`
+- `@stream-io/i18n` updated to version `0.1.2`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.23`
+- `@stream-io/video-styling` updated to version `0.1.8`
 
 ### Bug Fixes
 
-* Add extra delay before attempting to play video in Safari and Firefox ([#1106](https://github.com/GetStream/stream-video-js/issues/1106)) ([5b4a589](https://github.com/GetStream/stream-video-js/commit/5b4a58918240a7b63807726609d6d54b92cfe1d2))
+- Add extra delay before attempting to play video in Safari and Firefox ([#1106](https://github.com/GetStream/stream-video-js/issues/1106)) ([5b4a589](https://github.com/GetStream/stream-video-js/commit/5b4a58918240a7b63807726609d6d54b92cfe1d2))
 
 ### [0.3.25](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.24...@stream-io/video-react-sdk-0.3.25) (2023-09-20)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.22`
-* `@stream-io/video-styling` updated to version `0.1.7`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.22`
+- `@stream-io/video-styling` updated to version `0.1.7`
 
 ### Bug Fixes
 
-* unmount video element when there is no video track or participant is invisible ([#1096](https://github.com/GetStream/stream-video-js/issues/1096)) ([bd01835](https://github.com/GetStream/stream-video-js/commit/bd01835f4e93c981ca2e5a7e4e09142ea4e326cf)), closes [#1094](https://github.com/GetStream/stream-video-js/issues/1094)
+- unmount video element when there is no video track or participant is invisible ([#1096](https://github.com/GetStream/stream-video-js/issues/1096)) ([bd01835](https://github.com/GetStream/stream-video-js/commit/bd01835f4e93c981ca2e5a7e4e09142ea4e326cf)), closes [#1094](https://github.com/GetStream/stream-video-js/issues/1094)
 
 ### [0.3.24](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.23...@stream-io/video-react-sdk-0.3.24) (2023-09-19)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.21`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.21`
+
 ### [0.3.23](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.22...@stream-io/video-react-sdk-0.3.23) (2023-09-18)
 
 ### Dependency Updates
 
-* `@stream-io/video-styling` updated to version `0.1.6`
+- `@stream-io/video-styling` updated to version `0.1.6`
 
 ### Bug Fixes
 
-* hide the video element when a placeholder is visible ([#1094](https://github.com/GetStream/stream-video-js/issues/1094)) ([9efd84c](https://github.com/GetStream/stream-video-js/commit/9efd84cb77b98c372917e6bfa36161763969dddd))
+- hide the video element when a placeholder is visible ([#1094](https://github.com/GetStream/stream-video-js/issues/1094)) ([9efd84c](https://github.com/GetStream/stream-video-js/commit/9efd84cb77b98c372917e6bfa36161763969dddd))
 
 ### [0.3.22](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.21...@stream-io/video-react-sdk-0.3.22) (2023-09-15)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.20`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.20`
+
 ### [0.3.21](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.20...@stream-io/video-react-sdk-0.3.21) (2023-09-15)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.19`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.19`
+
 ### [0.3.20](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.19...@stream-io/video-react-sdk-0.3.20) (2023-09-14)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.18`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.18`
+
 ### [0.3.19](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.18...@stream-io/video-react-sdk-0.3.19) (2023-09-13)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.17`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.17`
+
 ### [0.3.18](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.17...@stream-io/video-react-sdk-0.3.18) (2023-09-11)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.16`
-### [0.3.17](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.16...@stream-io/video-react-sdk-0.3.17) (2023-09-08)
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.16`
 
+### [0.3.17](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.16...@stream-io/video-react-sdk-0.3.17) (2023-09-08)
 
 ### Bug Fixes
 
-* hook dependency issues, re-compute video aspect ratio after track unmute ([#1067](https://github.com/GetStream/stream-video-js/issues/1067)) ([392c36a](https://github.com/GetStream/stream-video-js/commit/392c36af9dbabd22f72d4cc4b11aab7b1d642b1f))
+- hook dependency issues, re-compute video aspect ratio after track unmute ([#1067](https://github.com/GetStream/stream-video-js/issues/1067)) ([392c36a](https://github.com/GetStream/stream-video-js/commit/392c36af9dbabd22f72d4cc4b11aab7b1d642b1f))
 
 ### [0.3.16](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.15...@stream-io/video-react-sdk-0.3.16) (2023-09-05)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.15`
-### [0.3.15](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.14...@stream-io/video-react-sdk-0.3.15) (2023-08-31)
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.15`
 
+### [0.3.15](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.14...@stream-io/video-react-sdk-0.3.15) (2023-08-31)
 
 ### Features
 
-* **react-sdk:** add browser permissions hook ([#972](https://github.com/GetStream/stream-video-js/issues/972)) ([4f1b40c](https://github.com/GetStream/stream-video-js/commit/4f1b40c3d19d580964c1e999c8055c3b736674a4))
+- **react-sdk:** add browser permissions hook ([#972](https://github.com/GetStream/stream-video-js/issues/972)) ([4f1b40c](https://github.com/GetStream/stream-video-js/commit/4f1b40c3d19d580964c1e999c8055c3b736674a4))
 
 ### [0.3.14](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.13...@stream-io/video-react-sdk-0.3.14) (2023-08-31)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.14`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.14`
+
 ### [0.3.13](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.12...@stream-io/video-react-sdk-0.3.13) (2023-08-31)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.13`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.13`
+
 ### [0.3.12](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.11...@stream-io/video-react-sdk-0.3.12) (2023-08-30)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.12`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.12`
+
 ### [0.3.11](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.10...@stream-io/video-react-sdk-0.3.11) (2023-08-30)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.11`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.11`
 
 ### Features
 
-* **Call:** Dynascale support for Plain-JS SDK ([#914](https://github.com/GetStream/stream-video-js/issues/914)) ([d295fd3](https://github.com/GetStream/stream-video-js/commit/d295fd341bbe325310fc6479f24ef647b013429b))
+- **Call:** Dynascale support for Plain-JS SDK ([#914](https://github.com/GetStream/stream-video-js/issues/914)) ([d295fd3](https://github.com/GetStream/stream-video-js/commit/d295fd341bbe325310fc6479f24ef647b013429b))
 
 ### [0.3.10](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.9...@stream-io/video-react-sdk-0.3.10) (2023-08-29)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.10`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.10`
+
 ### [0.3.9](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.8...@stream-io/video-react-sdk-0.3.9) (2023-08-29)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.9`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.9`
+
 ### [0.3.8](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.7...@stream-io/video-react-sdk-0.3.8) (2023-08-24)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.8`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.8`
+
 ### [0.3.7](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.6...@stream-io/video-react-sdk-0.3.7) (2023-08-23)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.7`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.7`
+
 ### [0.3.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.5...@stream-io/video-react-sdk-0.3.6) (2023-08-22)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.6`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.6`
+
 ### [0.3.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.4...@stream-io/video-react-sdk-0.3.5) (2023-08-21)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.5`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.5`
+
 ### [0.3.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.3...@stream-io/video-react-sdk-0.3.4) (2023-08-18)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.4`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.4`
+
 ### [0.3.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.2...@stream-io/video-react-sdk-0.3.3) (2023-08-16)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.3`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.3`
+
 ### [0.3.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.1...@stream-io/video-react-sdk-0.3.2) (2023-08-16)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.2`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.2`
+
 ### [0.3.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.3.0...@stream-io/video-react-sdk-0.3.1) (2023-08-16)
 
 ### Dependency Updates
 
-* `@stream-io/video-react-bindings` updated to version `0.2.1`
+- `@stream-io/video-react-bindings` updated to version `0.2.1`
+
 ## [0.3.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.2.8...@stream-io/video-react-sdk-0.3.0) (2023-08-16)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.2.0`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.2.0`
 
 ### ⚠ BREAKING CHANGES
 
-* Call State reorganization (#931)
+- Call State reorganization (#931)
 
 ### Features
 
-* Call State reorganization ([#931](https://github.com/GetStream/stream-video-js/issues/931)) ([441dbd4](https://github.com/GetStream/stream-video-js/commit/441dbd4ffb8c851abb0ca719be143a1e80d1418c)), closes [#917](https://github.com/GetStream/stream-video-js/issues/917)
+- Call State reorganization ([#931](https://github.com/GetStream/stream-video-js/issues/931)) ([441dbd4](https://github.com/GetStream/stream-video-js/commit/441dbd4ffb8c851abb0ca719be143a1e80d1418c)), closes [#917](https://github.com/GetStream/stream-video-js/issues/917)
 
 ### [0.2.8](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.2.7...@stream-io/video-react-sdk-0.2.8) (2023-08-15)
 
 ### Dependency Updates
 
-* `@stream-io/video-styling` updated to version `0.1.5`
+- `@stream-io/video-styling` updated to version `0.1.5`
+
 ### [0.2.7](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.2.6...@stream-io/video-react-sdk-0.2.7) (2023-08-14)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.18`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.18`
 
 ### Features
 
-* extra config params in goLive() API ([#924](https://github.com/GetStream/stream-video-js/issues/924)) ([e14a082](https://github.com/GetStream/stream-video-js/commit/e14a0829460a3c5ff6d249dd159e6118df0b8352))
+- extra config params in goLive() API ([#924](https://github.com/GetStream/stream-video-js/issues/924)) ([e14a082](https://github.com/GetStream/stream-video-js/commit/e14a0829460a3c5ff6d249dd159e6118df0b8352))
 
 ### [0.2.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.2.5...@stream-io/video-react-sdk-0.2.6) (2023-08-11)
 
-
 ### Features
 
-* flag the dominant speaker with a CSS class ([#923](https://github.com/GetStream/stream-video-js/issues/923)) ([d503578](https://github.com/GetStream/stream-video-js/commit/d5035788c6f2b1a9db195d9f5fb9dd062cad1627))
+- flag the dominant speaker with a CSS class ([#923](https://github.com/GetStream/stream-video-js/issues/923)) ([d503578](https://github.com/GetStream/stream-video-js/commit/d5035788c6f2b1a9db195d9f5fb9dd062cad1627))
 
 ### [0.2.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.2.4...@stream-io/video-react-sdk-0.2.5) (2023-08-11)
 
 ### Dependency Updates
 
-* `@stream-io/video-react-bindings` updated to version `0.1.17`
+- `@stream-io/video-react-bindings` updated to version `0.1.17`
 
 ### Features
 
-* Wrap all call state hooks in useCallStateHooks() ([#917](https://github.com/GetStream/stream-video-js/issues/917)) ([19f891a](https://github.com/GetStream/stream-video-js/commit/19f891aab42b725b6a1d0194bf0ef8f645ccc792))
+- Wrap all call state hooks in useCallStateHooks() ([#917](https://github.com/GetStream/stream-video-js/issues/917)) ([19f891a](https://github.com/GetStream/stream-video-js/commit/19f891aab42b725b6a1d0194bf0ef8f645ccc792))
 
 ### [0.2.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.2.3...@stream-io/video-react-sdk-0.2.4) (2023-08-10)
 
 ### Dependency Updates
 
-* `@stream-io/video-react-bindings` updated to version `0.1.16`
-### [0.2.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.2.2...@stream-io/video-react-sdk-0.2.3) (2023-08-10)
+- `@stream-io/video-react-bindings` updated to version `0.1.16`
 
+### [0.2.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.2.2...@stream-io/video-react-sdk-0.2.3) (2023-08-10)
 
 ### Bug Fixes
 
-* **ParticipantView:** remove audio element while muted ([#918](https://github.com/GetStream/stream-video-js/issues/918)) ([076c7ff](https://github.com/GetStream/stream-video-js/commit/076c7ffbc4a525b0fb2acbc62a560734381e362b))
+- **ParticipantView:** remove audio element while muted ([#918](https://github.com/GetStream/stream-video-js/issues/918)) ([076c7ff](https://github.com/GetStream/stream-video-js/commit/076c7ffbc4a525b0fb2acbc62a560734381e362b))
 
 ### [0.2.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.2.1...@stream-io/video-react-sdk-0.2.2) (2023-08-08)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.15`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.15`
 
 ### Features
 
-* **livestream:** Livestream tutorial rewrite ([#909](https://github.com/GetStream/stream-video-js/issues/909)) ([49efdaa](https://github.com/GetStream/stream-video-js/commit/49efdaa14faccaa4848e8f9bdf3abb7748b925ac))
+- **livestream:** Livestream tutorial rewrite ([#909](https://github.com/GetStream/stream-video-js/issues/909)) ([49efdaa](https://github.com/GetStream/stream-video-js/commit/49efdaa14faccaa4848e8f9bdf3abb7748b925ac))
 
 ### [0.2.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.2.0...@stream-io/video-react-sdk-0.2.1) (2023-08-07)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.14`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.14`
+
 ## [0.2.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.18...@stream-io/video-react-sdk-0.2.0) (2023-08-07)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.13`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.13`
 
 ### ⚠ BREAKING CHANGES
 
-* Server-side participant pinning (#881)
+- Server-side participant pinning (#881)
 
 ### Features
 
-* Server-side participant pinning ([#881](https://github.com/GetStream/stream-video-js/issues/881)) ([72829f1](https://github.com/GetStream/stream-video-js/commit/72829f1caf5b9c719d063a7e5175b7aa7431cd71))
+- Server-side participant pinning ([#881](https://github.com/GetStream/stream-video-js/issues/881)) ([72829f1](https://github.com/GetStream/stream-video-js/commit/72829f1caf5b9c719d063a7e5175b7aa7431cd71))
 
 ### [0.1.18](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.17...@stream-io/video-react-sdk-0.1.18) (2023-08-04)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.12`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.12`
+
 ### [0.1.17](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.16...@stream-io/video-react-sdk-0.1.17) (2023-08-01)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.11`
-### [0.1.16](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.15...@stream-io/video-react-sdk-0.1.16) (2023-08-01)
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.11`
 
+### [0.1.16](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.15...@stream-io/video-react-sdk-0.1.16) (2023-08-01)
 
 ### Documentation
 
-* add prop description to client and call prop of StreamVideo and StreamCall ([#873](https://github.com/GetStream/stream-video-js/issues/873)) ([4d4a2b8](https://github.com/GetStream/stream-video-js/commit/4d4a2b81506af9cf7e81a4925cabc4429f32b401))
-* adjust Quickstart ([#872](https://github.com/GetStream/stream-video-js/issues/872)) ([42637a0](https://github.com/GetStream/stream-video-js/commit/42637a06c1b828ebd9285296be5a32a509c6c624))
-* rewrite video-calling tutorial ([#866](https://github.com/GetStream/stream-video-js/issues/866)) ([c16d0a2](https://github.com/GetStream/stream-video-js/commit/c16d0a283b005a77dfbcbb3bb7c9946dcc501094))
+- add prop description to client and call prop of StreamVideo and StreamCall ([#873](https://github.com/GetStream/stream-video-js/issues/873)) ([4d4a2b8](https://github.com/GetStream/stream-video-js/commit/4d4a2b81506af9cf7e81a4925cabc4429f32b401))
+- adjust Quickstart ([#872](https://github.com/GetStream/stream-video-js/issues/872)) ([42637a0](https://github.com/GetStream/stream-video-js/commit/42637a06c1b828ebd9285296be5a32a509c6c624))
+- rewrite video-calling tutorial ([#866](https://github.com/GetStream/stream-video-js/issues/866)) ([c16d0a2](https://github.com/GetStream/stream-video-js/commit/c16d0a283b005a77dfbcbb3bb7c9946dcc501094))
 
 ### [0.1.15](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.14...@stream-io/video-react-sdk-0.1.15) (2023-07-28)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.10`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.10`
 
 ### Bug Fixes
 
-* set initial device state regardless of call state ([#869](https://github.com/GetStream/stream-video-js/issues/869)) ([3c3cb29](https://github.com/GetStream/stream-video-js/commit/3c3cb29e5585e30b0eacc4b0ecb7bab2e075c111))
-
+- set initial device state regardless of call state ([#869](https://github.com/GetStream/stream-video-js/issues/869)) ([3c3cb29](https://github.com/GetStream/stream-video-js/commit/3c3cb29e5585e30b0eacc4b0ecb7bab2e075c111))
 
 ### Documentation
 
-* **react-native:** UI Cookbook - Connection Quality Indicator ([#861](https://github.com/GetStream/stream-video-js/issues/861)) ([f9fc8fc](https://github.com/GetStream/stream-video-js/commit/f9fc8fc9653f29721989a52fd888b3db99b41cea))
+- **react-native:** UI Cookbook - Connection Quality Indicator ([#861](https://github.com/GetStream/stream-video-js/issues/861)) ([f9fc8fc](https://github.com/GetStream/stream-video-js/commit/f9fc8fc9653f29721989a52fd888b3db99b41cea))
 
 ### [0.1.14](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.13...@stream-io/video-react-sdk-0.1.14) (2023-07-27)
 
-
 ### Documentation
 
-* Update audio room tutorial to support strict mode ([#840](https://github.com/GetStream/stream-video-js/issues/840)) ([9aec392](https://github.com/GetStream/stream-video-js/commit/9aec392ec4a44fb0c1eaee00c19568f01d7b3da9))
+- Update audio room tutorial to support strict mode ([#840](https://github.com/GetStream/stream-video-js/issues/840)) ([9aec392](https://github.com/GetStream/stream-video-js/commit/9aec392ec4a44fb0c1eaee00c19568f01d7b3da9))
 
 ### [0.1.13](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.12...@stream-io/video-react-sdk-0.1.13) (2023-07-27)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.9`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.9`
+
 ### [0.1.12](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.11...@stream-io/video-react-sdk-0.1.12) (2023-07-26)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.8`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.8`
+
 ### [0.1.11](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.10...@stream-io/video-react-sdk-0.1.11) (2023-07-26)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.7`
-### [0.1.10](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.9...@stream-io/video-react-sdk-0.1.10) (2023-07-25)
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.7`
 
+### [0.1.10](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.9...@stream-io/video-react-sdk-0.1.10) (2023-07-25)
 
 ### Features
 
-* **react-native:** add translations to SDK and DF app ([#828](https://github.com/GetStream/stream-video-js/issues/828)) ([c7a7f73](https://github.com/GetStream/stream-video-js/commit/c7a7f73b5cfd9222101e4c44b6c9ec42006bcac2))
+- **react-native:** add translations to SDK and DF app ([#828](https://github.com/GetStream/stream-video-js/issues/828)) ([c7a7f73](https://github.com/GetStream/stream-video-js/commit/c7a7f73b5cfd9222101e4c44b6c9ec42006bcac2))
 
 ### [0.1.9](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.8...@stream-io/video-react-sdk-0.1.9) (2023-07-21)
 
-
 ### Documentation
 
-* Fix code snippet in video calling tutorial ([dc8f8cc](https://github.com/GetStream/stream-video-js/commit/dc8f8cc58d13b32eda2c7624152470c5909698e7))
+- Fix code snippet in video calling tutorial ([dc8f8cc](https://github.com/GetStream/stream-video-js/commit/dc8f8cc58d13b32eda2c7624152470c5909698e7))
 
 ### [0.1.8](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.7...@stream-io/video-react-sdk-0.1.8) (2023-07-21)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.6`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.6`
 
 ### Bug Fixes
 
-* strict mode issue ([#740](https://github.com/GetStream/stream-video-js/issues/740)) ([c39e4e4](https://github.com/GetStream/stream-video-js/commit/c39e4e4041a2326393478ad808b2aa791d50f8ce))
-
+- strict mode issue ([#740](https://github.com/GetStream/stream-video-js/issues/740)) ([c39e4e4](https://github.com/GetStream/stream-video-js/commit/c39e4e4041a2326393478ad808b2aa791d50f8ce))
 
 ### Documentation
 
-* add backlinks to the main marketing pages ([#838](https://github.com/GetStream/stream-video-js/issues/838)) ([7374972](https://github.com/GetStream/stream-video-js/commit/7374972a93e6a6052b384a11e5883b7ccbb559ff))
+- add backlinks to the main marketing pages ([#838](https://github.com/GetStream/stream-video-js/issues/838)) ([7374972](https://github.com/GetStream/stream-video-js/commit/7374972a93e6a6052b384a11e5883b7ccbb559ff))
 
 ### [0.1.7](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.6...@stream-io/video-react-sdk-0.1.7) (2023-07-21)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.5`
-### [0.1.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.5...@stream-io/video-react-sdk-0.1.6) (2023-07-20)
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.5`
 
+### [0.1.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.5...@stream-io/video-react-sdk-0.1.6) (2023-07-20)
 
 ### Bug Fixes
 
-* Apply sinkId settings in paginated grid layout ([#829](https://github.com/GetStream/stream-video-js/issues/829)) ([017996b](https://github.com/GetStream/stream-video-js/commit/017996b42c3df3faaff40c15999880e65b3e097a))
+- Apply sinkId settings in paginated grid layout ([#829](https://github.com/GetStream/stream-video-js/issues/829)) ([017996b](https://github.com/GetStream/stream-video-js/commit/017996b42c3df3faaff40c15999880e65b3e097a))
 
 ### [0.1.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.4...@stream-io/video-react-sdk-0.1.5) (2023-07-20)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.4`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.4`
+
 ### [0.1.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.3...@stream-io/video-react-sdk-0.1.4) (2023-07-19)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.3`
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.3`
+
 ### [0.1.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.2...@stream-io/video-react-sdk-0.1.3) (2023-07-18)
 
 ### Dependency Updates
 
-* `@stream-io/video-client` updated to version `0.1.0`
-* `@stream-io/video-react-bindings` updated to version `0.1.2`
-### [0.1.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.1...@stream-io/video-react-sdk-0.1.2) (2023-07-17)
+- `@stream-io/video-client` updated to version `0.1.0`
+- `@stream-io/video-react-bindings` updated to version `0.1.2`
 
+### [0.1.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.1...@stream-io/video-react-sdk-0.1.2) (2023-07-17)
 
 ### Features
 
-* Trigger react-sdk release to test sample app deployment ([77abdb6](https://github.com/GetStream/stream-video-js/commit/77abdb67bafa6c33bf7b86070999f7ad9d6010df))
+- Trigger react-sdk release to test sample app deployment ([77abdb6](https://github.com/GetStream/stream-video-js/commit/77abdb67bafa6c33bf7b86070999f7ad9d6010df))
 
 ### [0.1.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.1.0...@stream-io/video-react-sdk-0.1.1) (2023-07-17)
 
diff --git a/packages/react-sdk/docusaurus/docs/React/03-ui-components/call/call-controls.mdx b/packages/react-sdk/docusaurus/docs/React/03-ui-components/call/call-controls.mdx
index f502547c78..c3b18dafd9 100644
--- a/packages/react-sdk/docusaurus/docs/React/03-ui-components/call/call-controls.mdx
+++ b/packages/react-sdk/docusaurus/docs/React/03-ui-components/call/call-controls.mdx
@@ -71,6 +71,18 @@ This component can be used to leave a call or to reject an incoming/outgoing cal
 | `onClick`  | Event handler to override the default click behavior | `MouseEventHandler<HTMLButtonElement>` \| `undefined` |
 | `onLeave`  | Custom event handler to call after the call was left | `() => void` \| `undefined`                           |
 
+### `CancelCallConfirmButton`
+
+This component can be used to leave a call or end the call for all participants but only if the particpant has the requiredGrants `OwnCapability.END_CALL`.
+
+#### Props
+
+| Name       | Description                                          | Type                                                  |
+| ---------- | ---------------------------------------------------- | ----------------------------------------------------- |
+| `disabled` | Set `true` to disable the button                     | `boolean` \| `undefined`                              |
+| `onClick`  | Event handler to override the default click behavior | `MouseEventHandler<HTMLButtonElement>` \| `undefined` |
+| `onLeave`  | Custom event handler to call after the call was left | `() => void` \| `undefined`                           |
+
 ### `ReactionsButton`
 
 This component can be used to send reactions during a call. The following reactions are supported by default:
@@ -95,6 +107,16 @@ This component can be used to start/stop call recording. It's also used as a vis
 | --------- | ------------------------------------------------------- | ----------------------- |
 | `caption` | The explanatory text displayed under the control button | `string` \| `undefined` |
 
+### `RecordCallConfirmationButton`
+
+This component can be used to start/stop a call recording. A confirmation will be show to let the particpant cancel or confirm to ending the recording that is in progress.
+
+#### Props
+
+| Name      | Description                                             | Type                    |
+| --------- | ------------------------------------------------------- | ----------------------- |
+| `caption` | The explanatory text displayed under the control button | `string` \| `undefined` |
+
 ### `ScreenShareButton`
 
 This component can be used to start/stop screen sharing. It's also used as a visual indicator to let participants know if there is an ongoing screen share. This component only allows a single ongoing screen share.
diff --git a/packages/react-sdk/docusaurus/docs/React/03-ui-components/participants/device-settings.mdx b/packages/react-sdk/docusaurus/docs/React/03-ui-components/participants/device-settings.mdx
index 7d7f80dcff..66e8323671 100644
--- a/packages/react-sdk/docusaurus/docs/React/03-ui-components/participants/device-settings.mdx
+++ b/packages/react-sdk/docusaurus/docs/React/03-ui-components/participants/device-settings.mdx
@@ -84,37 +84,30 @@ const MyDevicePanel = () => {
 
 ### DeviceSettings
 
-None
+| Name         | Description                                  | Type                                | Default |
+| ------------ | -------------------------------------------- | ----------------------------------- | ------- |
+| `visualType` | Visually display a list or dropdown selector | `list` \| `dropdown` \| `undefined` | `list`  |
 
 ### DeviceSelectorVideo
 
-### `title`
-
-| Type                    | Default             |
-| ----------------------- | ------------------- |
-| `string` \| `undefined` | `'Select a Camera'` |
-
-String displayed at the top of the selector component.
+| Name         | Description                                             | Type                                | Default           |
+| ------------ | ------------------------------------------------------- | ----------------------------------- | ----------------- |
+| `title`      | Title is displayed at the top of the selector component | `string` \| `undefined`             | `Select a Camera` |
+| `visualType` | Visually display a list or dropdown selector            | `list` \| `dropdown` \| `undefined` | `list`            |
 
 ### DeviceSelectorAudioInput
 
-### `title`
-
-| Type                    | Default          |
-| ----------------------- | ---------------- |
-| `string` \| `undefined` | `'Select a Mic'` |
-
-String displayed at the top of the selector component.
+| Name         | Description                                             | Type                                | Default        |
+| ------------ | ------------------------------------------------------- | ----------------------------------- | -------------- |
+| `title`      | Title is displayed at the top of the selector component | `string` \| `undefined`             | `Select a Mic` |
+| `visualType` | Visually display a list or dropdown selector            | `list` \| `dropdown` \| `undefined` | `list`         |
 
 ### DeviceSelectorAudioOutput
 
-### `title`
-
-| Type                    | Default             |
-| ----------------------- | ------------------- |
-| `string` \| `undefined` | `'Select Speakers'` |
-
-String displayed at the top of the selector component.
+| Name         | Description                                             | Type                                | Default            |
+| ------------ | ------------------------------------------------------- | ----------------------------------- | ------------------ |
+| `title`      | Title is displayed at the top of the selector component | `string` \| `undefined`             | `Select a Speaker` |
+| `visualType` | Visually display a list or dropdown selector            | `list` \| `dropdown` \| `undefined` | `list`             |
 
 ## Customization
 
diff --git a/packages/react-sdk/docusaurus/docs/React/03-ui-components/utility/dropdown-select.mdx b/packages/react-sdk/docusaurus/docs/React/03-ui-components/utility/dropdown-select.mdx
new file mode 100644
index 0000000000..0a1b2aa0a6
--- /dev/null
+++ b/packages/react-sdk/docusaurus/docs/React/03-ui-components/utility/dropdown-select.mdx
@@ -0,0 +1,28 @@
+---
+id: dropdown-select
+title: Dropdown select
+---
+
+import DropdownSelect from '../../assets/03-ui-components/dropdown-select.png';
+
+The `DropDownSelect` utility component can be used to to simply create a dropdown select component.
+
+#### Props
+
+| Name                   | Description                                             | Type                                                                                     |
+| ---------------------- | ------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `icon`                 | Icon to be shown next to the label of the selected item | `string` \| `undefined`                                                                  |
+| `defaultSelectedLabel` | Label to be shown on default                            | `string`                                                                                 |
+| `defaultSelectedIndex` | Sets the default selected option                        | `number`                                                                                 |
+| `handleSelect`         | Handler to handle the selected option                   | `(index: number) => void`                                                                |
+| `children`             | DropDownSelectOption                                    | `ReactElement<DropDownSelectOptionProps>` \| `ReactElement<DropDownSelectOptionProps[]>` |
+
+#### DropDownSelectOptionProps
+
+You can provide the `DropdownSelectOption` as a child to the `DropdownSelect`
+
+| Name       | Description | Type                     |
+| ---------- | ----------- | ------------------------ |
+| `label`    |             | `string`                 |
+| `selected` |             | `boolean` \| `undefined` |
+| `icon`     |             | `string`                 |
diff --git a/packages/react-sdk/docusaurus/docs/React/03-ui-components/utility/recording-in-progress-notification.mdx b/packages/react-sdk/docusaurus/docs/React/03-ui-components/utility/recording-in-progress-notification.mdx
new file mode 100644
index 0000000000..22ff5a52e0
--- /dev/null
+++ b/packages/react-sdk/docusaurus/docs/React/03-ui-components/utility/recording-in-progress-notification.mdx
@@ -0,0 +1,45 @@
+---
+id: recording-in-progress-notification
+title: Recording in progress notification
+---
+
+import RecordingInProgressNotification from '../../assets/03-ui-components/recording-in-progress-notification.png';
+
+The `RecordingInProgressNotification` component is based on `Notification` component that is a simple popover. The SDK attaches the component to [`RecordCallButton`](../../call/call-controls). The popover rendering is controlled by detecting if there is a recording in progress, `useToggleCallRecording()`.
+
+<div
+  style={{
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    marginBlock: '1rem',
+  }}
+>
+  <img
+    src={RecordingInProgressNotification}
+    alt="Default UI of RecordingInProgressNotification component"
+    width={300}
+  />
+</div>
+
+## General usage
+
+The component is used by wrapping the component to which it will refer:
+
+```tsx
+<RecordingInProgressNotification>
+  <RecordCallButton />
+</RecordingInProgressNotification>
+```
+
+## Props
+
+| Name   | Type                    | Default                      |
+| ------ | ----------------------- | ---------------------------- |
+| `text` | `string` \| `undefined` | `'Recording in progress...'` |
+
+Text message displayed by the notification.
+
+## Customization
+
+To learn more about the recording functionality, have a look at our [call-controls](../../../ui-components/call/call-controls).
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/avatar.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/avatar.png
index 9009db5b8b..787d755c70 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/avatar.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/avatar.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-controls.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-controls.png
index f66aed750e..dc7538e404 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-controls.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-controls.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list-with-admin-actions-menu.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list-with-admin-actions-menu.png
index 6a9073d7b7..cfdf25f47b 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list-with-admin-actions-menu.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list-with-admin-actions-menu.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list-with-user-actions-menu.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list-with-user-actions-menu.png
index da4048725d..b4bd4e2573 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list-with-user-actions-menu.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list-with-user-actions-menu.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list.png
index 05b4bdefb8..36d5baa533 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-participant-list/call-participant-list.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-recording-list/empty-call-recording-list.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-recording-list/empty-call-recording-list.png
index 54c92f7220..84336f5f58 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-recording-list/empty-call-recording-list.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-recording-list/empty-call-recording-list.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-stats.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-stats.png
index 6391e07a0d..4b6de4b9a7 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-stats.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/call-stats.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-selector-audio-input.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-selector-audio-input.png
index 223a949a2b..fe8f2569cb 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-selector-audio-input.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-selector-audio-input.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-selector-video.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-selector-video.png
index 83f87f2f02..2c6d1a401a 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-selector-video.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-selector-video.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-settings.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-settings.png
index 1a4fff165f..4469592b20 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-settings.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/device-settings.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/dropdown-select.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/dropdown-select.png
new file mode 100644
index 0000000000..1be57c45ab
Binary files /dev/null and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/dropdown-select.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/participant.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/participant.png
index 85f79657cc..f09c54cddc 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/participant.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/participant.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/reaction.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/reaction.png
index faf9217a04..6491d8bc3e 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/reaction.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/reaction.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/recording-in-progress-notification.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/recording-in-progress-notification.png
new file mode 100644
index 0000000000..bc647df29b
Binary files /dev/null and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/recording-in-progress-notification.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/speaking-while-muted-notification.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/speaking-while-muted-notification.png
index f09a9877fa..01d46bca18 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/speaking-while-muted-notification.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/speaking-while-muted-notification.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/video-preview/disabled-video-preview.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/video-preview/disabled-video-preview.png
index d2e4d80356..9ccb0c830c 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/video-preview/disabled-video-preview.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/video-preview/disabled-video-preview.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/video-preview/no-camera-found-video-preview.png b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/video-preview/no-camera-found-video-preview.png
index 880980c5c2..3ffd670de8 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/video-preview/no-camera-found-video-preview.png and b/packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/video-preview/no-camera-found-video-preview.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/03-custom-label/default-participant-label-muted.png b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/03-custom-label/default-participant-label-muted.png
index 2277aa1da9..7e97a8bcf8 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/03-custom-label/default-participant-label-muted.png and b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/03-custom-label/default-participant-label-muted.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/03-custom-label/default-user-label-connection-dominant-speaker.png b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/03-custom-label/default-user-label-connection-dominant-speaker.png
index e0592ad0dd..7f77512419 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/03-custom-label/default-user-label-connection-dominant-speaker.png and b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/03-custom-label/default-user-label-connection-dominant-speaker.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/14-participant-view-customizations/participant-view-ui.png b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/14-participant-view-customizations/participant-view-ui.png
index b75b044be2..92b57067c1 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/14-participant-view-customizations/participant-view-ui.png and b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/14-participant-view-customizations/participant-view-ui.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/15-watching-a-livestream/normal-mode.png b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/15-watching-a-livestream/normal-mode.png
index 636fc157ca..d898d4ead3 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/15-watching-a-livestream/normal-mode.png and b/packages/react-sdk/docusaurus/docs/React/assets/06-ui-cookbook/15-watching-a-livestream/normal-mode.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/lobby-preview.png b/packages/react-sdk/docusaurus/docs/React/assets/lobby-preview.png
index af0d8ef341..759efbc505 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/lobby-preview.png and b/packages/react-sdk/docusaurus/docs/React/assets/lobby-preview.png differ
diff --git a/packages/react-sdk/docusaurus/docs/React/assets/no-video-fallback-avatar.png b/packages/react-sdk/docusaurus/docs/React/assets/no-video-fallback-avatar.png
index 06396dd7c8..b35c64f5d2 100644
Binary files a/packages/react-sdk/docusaurus/docs/React/assets/no-video-fallback-avatar.png and b/packages/react-sdk/docusaurus/docs/React/assets/no-video-fallback-avatar.png differ
diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
index a03b83a9f1..8eec8ce4d9 100644
--- a/packages/react-sdk/package.json
+++ b/packages/react-sdk/package.json
@@ -28,13 +28,12 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.26.1",
-    "@nivo/core": "^0.80.0",
-    "@nivo/line": "^0.80.0",
+    "@floating-ui/react": "^0.26.5",
     "@stream-io/video-client": "workspace:^",
     "@stream-io/video-react-bindings": "workspace:^",
+    "chart.js": "^4.4.1",
     "clsx": "^2.0.0",
-    "prop-types": "^15.8.1"
+    "react-chartjs-2": "^5.2.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -45,7 +44,6 @@
     "@rollup/plugin-replace": "^5.0.4",
     "@rollup/plugin-typescript": "^11.1.5",
     "@stream-io/video-styling": "workspace:^",
-    "@types/prop-types": "^15.7.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
diff --git a/packages/react-sdk/src/components/Button/CompositeButton.tsx b/packages/react-sdk/src/components/Button/CompositeButton.tsx
index 730aef0b66..638073d247 100644
--- a/packages/react-sdk/src/components/Button/CompositeButton.tsx
+++ b/packages/react-sdk/src/components/Button/CompositeButton.tsx
@@ -1,33 +1,85 @@
 import clsx from 'clsx';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
-import { ComponentType, forwardRef, PropsWithChildren } from 'react';
-import { useI18n } from '@stream-io/video-react-bindings';
+import {
+  ComponentProps,
+  ComponentType,
+  forwardRef,
+  JSX,
+  PropsWithChildren,
+} from 'react';
 import { Placement } from '@floating-ui/react';
 
 import { IconButton } from './IconButton';
 import { isComponentType } from '../../utilities';
 
-export type IconButtonWithMenuProps = PropsWithChildren<{
-  active?: boolean;
-  Menu?: ComponentType | JSX.Element;
-  caption?: string;
-  menuPlacement?: Placement;
-}>;
+export type IconButtonWithMenuProps<E extends HTMLElement = HTMLButtonElement> =
+  PropsWithChildren<{
+    active?: boolean;
+    Menu?: ComponentType | JSX.Element;
+    caption?: string;
+    className?: string;
+    menuPlacement?: Placement;
+    menuOffset?: number;
+    ToggleMenuButton?: ComponentType<ToggleMenuButtonProps<E>>;
+    variant?: 'primary' | 'secondary';
+  }> &
+    ComponentProps<'button'>;
 
 export const CompositeButton = forwardRef<
   HTMLDivElement,
   IconButtonWithMenuProps
->(({ caption, children, active, Menu, menuPlacement }, ref) => {
+>(function CompositeButton(
+  {
+    caption,
+    children,
+    className,
+    active,
+    Menu,
+    menuPlacement,
+    menuOffset,
+    title,
+    ToggleMenuButton = DefaultToggleMenuButton,
+    variant,
+    onClick,
+    ...restButtonProps
+  },
+  ref,
+) {
   return (
-    <div className="str-video__composite-button" ref={ref}>
+    <div
+      className={clsx('str-video__composite-button', className, {
+        'str-video__composite-button--caption': caption,
+        'str-video__composite-button--menu': Menu,
+      })}
+      title={title}
+      ref={ref}
+    >
       <div
         className={clsx('str-video__composite-button__button-group', {
           'str-video__composite-button__button-group--active': active,
+          'str-video__composite-button__button-group--active-primary':
+            active && variant === 'primary',
+          'str-video__composite-button__button-group--active-secondary':
+            active && variant === 'secondary',
         })}
       >
-        {children}
+        <button
+          type="button"
+          className="str-video__composite-button__button"
+          onClick={(e) => {
+            e.preventDefault();
+            onClick?.(e);
+          }}
+          {...restButtonProps}
+        >
+          {children}
+        </button>
         {Menu && (
-          <MenuToggle placement={menuPlacement} ToggleButton={ToggleMenuButton}>
+          <MenuToggle
+            offset={menuOffset}
+            placement={menuPlacement}
+            ToggleButton={ToggleMenuButton}
+          >
             {isComponentType(Menu) ? <Menu /> : Menu}
           </MenuToggle>
         )}
@@ -39,17 +91,17 @@ export const CompositeButton = forwardRef<
   );
 });
 
-const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  ({ menuShown }, ref) => {
-    const { t } = useI18n();
-
-    return (
-      <IconButton
-        className={'str-video__menu-toggle-button'}
-        icon={menuShown ? 'caret-down' : 'caret-up'}
-        title={t('Toggle device menu')}
-        ref={ref}
-      />
-    );
-  },
-);
+const DefaultToggleMenuButton = forwardRef<
+  HTMLButtonElement,
+  ToggleMenuButtonProps
+>(function DefaultToggleMenuButton({ menuShown }, ref) {
+  return (
+    <IconButton
+      className={clsx('str-video__menu-toggle-button', {
+        'str-video__menu-toggle-button--active': menuShown,
+      })}
+      icon={menuShown ? 'caret-down' : 'caret-up'}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/react-sdk/src/components/Button/CopyToClipboardButton.tsx b/packages/react-sdk/src/components/Button/CopyToClipboardButton.tsx
deleted file mode 100644
index 74ded53c3e..0000000000
--- a/packages/react-sdk/src/components/Button/CopyToClipboardButton.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import {
-  ComponentProps,
-  ComponentPropsWithRef,
-  ComponentType,
-  ForwardedRef,
-  forwardRef,
-  MouseEventHandler,
-  useCallback,
-  useState,
-} from 'react';
-import clsx from 'clsx';
-import { Placement } from '@floating-ui/react';
-
-import { Tooltip } from '../Tooltip';
-
-type CopyToClipboardButtonProps = ComponentProps<'button'> & {
-  /** Custom button component implementation. Will be rendered instead of native button element */
-  Button?: ComponentType<
-    ComponentPropsWithRef<'button'> & { ref: ForwardedRef<HTMLButtonElement> }
-  >;
-  /** Custom function to override the logic of generating the call invitation link */
-  copyValue: (() => string) | string;
-  /** Callback invoked if the copy-to-clipboard action fails */
-  onError?: (button: HTMLButtonElement, e: Error) => void;
-  /** Callback invoked if the copy-to-clipboard action succeeds */
-  onSuccess?: (button: HTMLButtonElement) => void;
-};
-
-export const CopyToClipboardButton = forwardRef<
-  HTMLButtonElement,
-  CopyToClipboardButtonProps
->(
-  (
-    { Button, className, copyValue, onClick, onError, onSuccess, ...restProps },
-    ref,
-  ) => {
-    const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-      async (event) => {
-        if (onClick) onClick(event);
-        const value = typeof copyValue === 'function' ? copyValue() : copyValue;
-        try {
-          await navigator?.clipboard.writeText(value);
-          onSuccess?.(event.target as HTMLButtonElement);
-        } catch (error) {
-          onError?.(event.target as HTMLButtonElement, error as Error);
-        }
-      },
-      [copyValue, onClick, onError, onSuccess],
-    );
-
-    const props = {
-      ...restProps,
-      ref: ref,
-      className: clsx('str-video__copy-to-clipboard-button', className),
-      onClick: handleClick,
-    };
-
-    return Button ? <Button {...props} /> : <button {...props} />;
-  },
-);
-
-type CopyToClipboardButtonWithPopupProps = Exclude<
-  CopyToClipboardButtonProps,
-  'onError' | 'onSuccess'
-> & {
-  dismissAfterMs?: number;
-  /** String displayed when copy-to-clipboard action fails */
-  onErrorMessage?: string;
-  /** String displayed when copy-to-clipboard succeeds fails */
-  onSuccessMessage?: string;
-  /** Class applied to the popup container element */
-  popupClassName?: string;
-  // todo: We should replace Placement for internal type
-  popupPlacement?: Placement;
-};
-
-export const CopyToClipboardButtonWithPopup = ({
-  dismissAfterMs = 1500,
-  onErrorMessage = 'Failed to copy',
-  onSuccessMessage = 'Copied to clipboard',
-  popupClassName,
-  popupPlacement,
-  ...restProps
-}: CopyToClipboardButtonWithPopupProps) => {
-  const [tooltipText, setTooltipText] = useState('');
-  const [tooltipAnchor, setTooltipAnchor] = useState<HTMLButtonElement | null>(
-    null,
-  );
-
-  const setTemporaryPopup = useCallback(
-    (popupText: string) => {
-      setTooltipText(popupText);
-      setTimeout(() => setTooltipText(''), dismissAfterMs);
-    },
-    [dismissAfterMs],
-  );
-
-  const onSuccess = useCallback(
-    () => setTemporaryPopup(onSuccessMessage),
-    [onSuccessMessage, setTemporaryPopup],
-  );
-
-  const onError = useCallback(
-    () => setTemporaryPopup(onErrorMessage),
-    [onErrorMessage, setTemporaryPopup],
-  );
-
-  return (
-    <>
-      <Tooltip
-        tooltipClassName={clsx(
-          'str-video__copy-to-clipboard-button__popup',
-          popupClassName,
-        )}
-        tooltipPlacement={popupPlacement}
-        referenceElement={tooltipAnchor}
-        visible={!!tooltipText}
-      >
-        {tooltipText}
-      </Tooltip>
-      <CopyToClipboardButton
-        {...restProps}
-        onError={onError}
-        onSuccess={onSuccess}
-        ref={setTooltipAnchor}
-      />
-    </>
-  );
-};
diff --git a/packages/react-sdk/src/components/Button/IconButton.tsx b/packages/react-sdk/src/components/Button/IconButton.tsx
index 771a0b0dac..af09c5ad55 100644
--- a/packages/react-sdk/src/components/Button/IconButton.tsx
+++ b/packages/react-sdk/src/components/Button/IconButton.tsx
@@ -9,24 +9,25 @@ export type ButtonWithIconProps = {
 } & ComponentProps<'button'> &
   IconProps;
 
-export const IconButton = forwardRef(
-  (props: ButtonWithIconProps, ref: ForwardedRef<HTMLButtonElement>) => {
-    const { icon, enabled, variant, onClick, className, ...rest } = props;
-    return (
-      <button
-        className={clsx('str-video__call-controls__button', className, {
-          [`str-video__call-controls__button--variant-${variant}`]: variant,
-          'str-video__call-controls__button--enabled': enabled,
-        })}
-        onClick={(e) => {
-          e.preventDefault();
-          onClick?.(e);
-        }}
-        ref={ref}
-        {...rest}
-      >
-        <Icon icon={icon} />
-      </button>
-    );
-  },
-);
+export const IconButton = forwardRef(function IconButton(
+  props: ButtonWithIconProps,
+  ref: ForwardedRef<HTMLButtonElement>,
+) {
+  const { icon, enabled, variant, onClick, className, ...rest } = props;
+  return (
+    <button
+      className={clsx('str-video__call-controls__button', className, {
+        [`str-video__call-controls__button--variant-${variant}`]: variant,
+        'str-video__call-controls__button--enabled': enabled,
+      })}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick?.(e);
+      }}
+      ref={ref}
+      {...rest}
+    >
+      <Icon icon={icon} />
+    </button>
+  );
+});
diff --git a/packages/react-sdk/src/components/Button/index.ts b/packages/react-sdk/src/components/Button/index.ts
index c801325a6a..1775408668 100644
--- a/packages/react-sdk/src/components/Button/index.ts
+++ b/packages/react-sdk/src/components/Button/index.ts
@@ -1,4 +1,3 @@
 export * from './CompositeButton';
-export * from './CopyToClipboardButton';
 export * from './IconButton';
 export * from './TextButton';
diff --git a/packages/react-sdk/src/components/CallControls/AcceptCallButton.tsx b/packages/react-sdk/src/components/CallControls/AcceptCallButton.tsx
index 0bc85e0b43..642e98a9e4 100644
--- a/packages/react-sdk/src/components/CallControls/AcceptCallButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/AcceptCallButton.tsx
@@ -30,6 +30,7 @@ export const AcceptCallButton = ({
       disabled={disabled}
       icon="call-accept"
       variant="success"
+      data-testid="accept-call-button"
       onClick={handleClick}
     />
   );
diff --git a/packages/react-sdk/src/components/CallControls/CallControls.tsx b/packages/react-sdk/src/components/CallControls/CallControls.tsx
index 827daf9f8b..54e39ed0bf 100644
--- a/packages/react-sdk/src/components/CallControls/CallControls.tsx
+++ b/packages/react-sdk/src/components/CallControls/CallControls.tsx
@@ -1,6 +1,6 @@
 import { SpeakingWhileMutedNotification } from '../Notification';
 import { RecordCallButton } from './RecordCallButton';
-import { CallStatsButton } from './CallStatsButton';
+import { ReactionsButton } from './ReactionsButton';
 import { ScreenShareButton } from './ScreenShareButton';
 import { ToggleAudioPublishingButton } from './ToggleAudioButton';
 import { ToggleVideoPublishingButton } from './ToggleVideoButton';
@@ -13,7 +13,7 @@ export type CallControlsProps = {
 export const CallControls = ({ onLeave }: CallControlsProps) => (
   <div className="str-video__call-controls">
     <RecordCallButton />
-    <CallStatsButton />
+    <ReactionsButton />
     <ScreenShareButton />
     <SpeakingWhileMutedNotification>
       <ToggleAudioPublishingButton />
diff --git a/packages/react-sdk/src/components/CallControls/CallStatsButton.tsx b/packages/react-sdk/src/components/CallControls/CallStatsButton.tsx
index dbfc6e0b12..0a774c4985 100644
--- a/packages/react-sdk/src/components/CallControls/CallStatsButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/CallStatsButton.tsx
@@ -1,8 +1,14 @@
 import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
 
 import { CallStats } from '../CallStats';
-import { CompositeButton, IconButton } from '../Button/';
+import { CompositeButton } from '../Button/';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+import { Icon } from '../Icon';
+
+export type CallStatsButtonProps = {
+  caption?: string;
+};
 
 export const CallStatsButton = () => (
   <MenuToggle placement="top-end" ToggleButton={ToggleMenuButton}>
@@ -12,9 +18,20 @@ export const CallStatsButton = () => (
 
 const ToggleMenuButton = forwardRef<
   HTMLDivElement,
-  ToggleMenuButtonProps<HTMLDivElement>
->(({ menuShown }, ref) => (
-  <CompositeButton ref={ref} active={menuShown} caption={'Stats'}>
-    <IconButton icon="stats" title="Statistics" />
-  </CompositeButton>
-));
+  ToggleMenuButtonProps<HTMLDivElement> & CallStatsButtonProps
+>(function ToggleMenuButton(props, ref) {
+  const { t } = useI18n();
+  const { caption, menuShown } = props;
+
+  return (
+    <CompositeButton
+      ref={ref}
+      active={menuShown}
+      caption={caption}
+      title={caption || t('Statistics')}
+      data-testid="stats-button"
+    >
+      <Icon icon="stats" />
+    </CompositeButton>
+  );
+});
diff --git a/packages/react-sdk/src/components/CallControls/CancelCallButton.tsx b/packages/react-sdk/src/components/CallControls/CancelCallButton.tsx
index 33ef637561..82bdb3bb99 100644
--- a/packages/react-sdk/src/components/CallControls/CancelCallButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/CancelCallButton.tsx
@@ -1,6 +1,65 @@
-import { MouseEventHandler, useCallback } from 'react';
-import { IconButton } from '../Button/';
-import { useCall } from '@stream-io/video-react-bindings';
+import { forwardRef, MouseEventHandler, useCallback } from 'react';
+import { OwnCapability } from '@stream-io/video-client';
+import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
+
+import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+
+import { IconButton } from '../Button';
+import { Icon } from '../Icon';
+
+const EndCallMenu = (props: {
+  onLeave: MouseEventHandler<HTMLButtonElement>;
+  onEnd: MouseEventHandler<HTMLButtonElement>;
+}) => {
+  const { onLeave, onEnd } = props;
+  const { t } = useI18n();
+  return (
+    <div className="str-video__end-call__confirmation">
+      <button
+        className="str-video__button str-video__end-call__leave"
+        type="button"
+        data-testid="leave-call-button"
+        onClick={onLeave}
+      >
+        <Icon
+          className="str-video__button__icon str-video__end-call__leave-icon"
+          icon="logout"
+        />
+        {t('Leave call')}
+      </button>
+      <Restricted requiredGrants={[OwnCapability.END_CALL]}>
+        <button
+          className="str-video__button str-video__end-call__end"
+          type="button"
+          data-testid="end-call-for-all-button"
+          onClick={onEnd}
+        >
+          <Icon
+            className="str-video__button__icon str-video__end-call__end-icon"
+            icon="call-end"
+          />
+          {t('End call for all')}
+        </button>
+      </Restricted>
+    </div>
+  );
+};
+
+const CancelCallToggleMenuButton = forwardRef<
+  HTMLButtonElement,
+  ToggleMenuButtonProps
+>(function CancelCallToggleMenuButton(props, ref) {
+  const { t } = useI18n();
+  return (
+    <IconButton
+      icon="call-end"
+      variant="danger"
+      title={t('Leave call')}
+      data-testid="leave-call-button"
+      ref={ref}
+    />
+  );
+});
 
 export type CancelCallButtonProps = {
   disabled?: boolean;
@@ -8,12 +67,50 @@ export type CancelCallButtonProps = {
   onLeave?: () => void;
 };
 
+export const CancelCallConfirmButton = ({
+  onClick,
+  onLeave,
+}: CancelCallButtonProps) => {
+  const call = useCall();
+
+  const handleLeave: MouseEventHandler<HTMLButtonElement> = useCallback(
+    async (e) => {
+      if (onClick) {
+        onClick(e);
+      } else if (call) {
+        await call.leave();
+        onLeave?.();
+      }
+    },
+    [onClick, onLeave, call],
+  );
+
+  const handleEndCall: MouseEventHandler<HTMLButtonElement> = useCallback(
+    async (e) => {
+      if (onClick) {
+        onClick(e);
+      } else if (call) {
+        await call.endCall();
+        onLeave?.();
+      }
+    },
+    [onClick, onLeave, call],
+  );
+
+  return (
+    <MenuToggle placement="top-start" ToggleButton={CancelCallToggleMenuButton}>
+      <EndCallMenu onEnd={handleEndCall} onLeave={handleLeave} />
+    </MenuToggle>
+  );
+};
+
 export const CancelCallButton = ({
   disabled,
   onClick,
   onLeave,
 }: CancelCallButtonProps) => {
   const call = useCall();
+  const { t } = useI18n();
   const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
     async (e) => {
       if (onClick) {
@@ -30,6 +127,8 @@ export const CancelCallButton = ({
       disabled={disabled}
       icon="call-end"
       variant="danger"
+      title={t('Leave call')}
+      data-testid="cancel-call-button"
       onClick={handleClick}
     />
   );
diff --git a/packages/react-sdk/src/components/CallControls/ReactionsButton.tsx b/packages/react-sdk/src/components/CallControls/ReactionsButton.tsx
index 947765ccd3..e06c2d801d 100644
--- a/packages/react-sdk/src/components/CallControls/ReactionsButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ReactionsButton.tsx
@@ -1,8 +1,13 @@
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+
 import { OwnCapability, StreamReaction } from '@stream-io/video-client';
 import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
 
-import { CompositeButton, IconButton } from '../Button';
+import { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';
+import { CompositeButton } from '../Button';
 import { defaultEmojiReactionMap } from '../Reaction';
+import { Icon } from '../Icon';
 
 export const defaultReactions: StreamReaction[] = [
   {
@@ -39,38 +44,53 @@ export interface ReactionsButtonProps {
 export const ReactionsButton = ({
   reactions = defaultReactions,
 }: ReactionsButtonProps) => {
-  const { t } = useI18n();
-
   return (
     <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
-      <CompositeButton
-        active={false}
-        caption={t('Reactions')}
-        menuPlacement="top-start"
-        Menu={<DefaultReactionsMenu reactions={reactions} />}
+      <MenuToggle
+        placement="top"
+        ToggleButton={ToggleReactionsMenuButton}
+        visualType={MenuVisualType.MENU}
       >
-        <IconButton
-          icon="reactions"
-          title={t('Reactions')}
-          onClick={() => {
-            console.log('Reactions');
-          }}
-        />
-      </CompositeButton>
+        <DefaultReactionsMenu reactions={reactions} />
+      </MenuToggle>
     </Restricted>
   );
 };
 
+const ToggleReactionsMenuButton = forwardRef<
+  HTMLDivElement,
+  ToggleMenuButtonProps
+>(function ToggleReactionsMenuButton({ menuShown }, ref) {
+  const { t } = useI18n();
+  return (
+    <CompositeButton
+      ref={ref}
+      active={menuShown}
+      variant="primary"
+      title={t('Reactions')}
+    >
+      <Icon icon="reactions" />
+    </CompositeButton>
+  );
+});
+
 export interface DefaultReactionsMenuProps {
   reactions: StreamReaction[];
+  layout?: 'horizontal' | 'vertical';
 }
 
 export const DefaultReactionsMenu = ({
   reactions,
+  layout = 'horizontal',
 }: DefaultReactionsMenuProps) => {
   const call = useCall();
   return (
-    <div className="str-video__reactions-menu">
+    <div
+      className={clsx('str-video__reactions-menu', {
+        'str-video__reactions-menu--horizontal': layout === 'horizontal',
+        'str-video__reactions-menu--vertical': layout === 'vertical',
+      })}
+    >
       {reactions.map((reaction) => (
         <button
           key={reaction.emoji_code}
diff --git a/packages/react-sdk/src/components/CallControls/RecordCallButton.tsx b/packages/react-sdk/src/components/CallControls/RecordCallButton.tsx
index 676c219bbc..c69e7f49dd 100644
--- a/packages/react-sdk/src/components/CallControls/RecordCallButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/RecordCallButton.tsx
@@ -1,22 +1,94 @@
+import { forwardRef } from 'react';
+
 import { OwnCapability } from '@stream-io/video-client';
-import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
-import { CompositeButton, IconButton } from '../Button/';
+import { Restricted, useI18n } from '@stream-io/video-react-bindings';
+import { CompositeButton } from '../Button/';
+import { Icon } from '../Icon';
+import {
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+  useMenuContext,
+} from '../Menu';
 import { LoadingIndicator } from '../LoadingIndicator';
-import { useToggleCallRecording } from '../../hooks/useToggleCallRecording';
+import { useToggleCallRecording } from '../../hooks';
 
 export type RecordCallButtonProps = {
   caption?: string;
 };
 
-export const RecordCallButton = ({
-  caption = 'Record',
-}: RecordCallButtonProps) => {
-  const call = useCall();
+const RecordEndConfirmation = () => {
+  const { t } = useI18n();
+  const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();
+
+  const { close } = useMenuContext();
+
+  return (
+    <div className="str-video__end-recording__confirmation">
+      <div className="str-video__end-recording__header">
+        <Icon icon="recording-on" />
+        <h2 className="str-video__end-recording__heading">
+          {t('End recording')}
+        </h2>
+      </div>
+      <p className="str-video__end-recording__description">
+        {t('Are you sure you want end the recording?')}
+      </p>
+      <div className="str-video__end-recording__actions">
+        <CompositeButton variant="secondary" onClick={close}>
+          {t('Cancel')}
+        </CompositeButton>
+        <CompositeButton variant="primary" onClick={toggleCallRecording}>
+          {isAwaitingResponse ? <LoadingIndicator /> : t('End recording')}
+        </CompositeButton>
+      </div>
+    </div>
+  );
+};
+
+const ToggleEndRecordingMenuButton = forwardRef<
+  HTMLDivElement,
+  ToggleMenuButtonProps
+>(function ToggleEndRecordingMenuButton(props, ref) {
+  return (
+    <CompositeButton
+      ref={ref}
+      active={true}
+      variant="secondary"
+      data-testid="recording-stop-button"
+    >
+      <Icon icon="recording-off" />
+    </CompositeButton>
+  );
+});
 
+export const RecordCallConfirmationButton = ({
+  caption,
+}: {
+  caption?: string;
+}) => {
   const { t } = useI18n();
   const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =
     useToggleCallRecording();
 
+  if (isCallRecordingInProgress) {
+    return (
+      <Restricted
+        requiredGrants={[
+          OwnCapability.START_RECORD_CALL,
+          OwnCapability.STOP_RECORD_CALL,
+        ]}
+      >
+        <MenuToggle
+          ToggleButton={ToggleEndRecordingMenuButton}
+          visualType={MenuVisualType.PORTAL}
+        >
+          <RecordEndConfirmation />
+        </MenuToggle>
+      </Restricted>
+    );
+  }
+
   return (
     <Restricted
       requiredGrants={[
@@ -24,23 +96,61 @@ export const RecordCallButton = ({
         OwnCapability.STOP_RECORD_CALL,
       ]}
     >
-      <CompositeButton active={isCallRecordingInProgress} caption={caption}>
+      <CompositeButton
+        active={isCallRecordingInProgress}
+        caption={caption}
+        title={caption || t('Record call')}
+        variant="secondary"
+        data-testid="recording-start-button"
+        onClick={isAwaitingResponse ? undefined : toggleCallRecording}
+      >
         {isAwaitingResponse ? (
-          <LoadingIndicator
-            tooltip={
-              isCallRecordingInProgress
-                ? t('Waiting for recording to stop...')
-                : t('Waiting for recording to start...')
-            }
-          />
+          <LoadingIndicator tooltip={t('Waiting for recording to start...')} />
+        ) : (
+          <Icon icon="recording-off" />
+        )}
+      </CompositeButton>
+    </Restricted>
+  );
+};
+
+export const RecordCallButton = ({ caption }: RecordCallButtonProps) => {
+  const { t } = useI18n();
+  const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =
+    useToggleCallRecording();
+
+  let title = caption || t('Record call');
+
+  if (isAwaitingResponse) {
+    title = isCallRecordingInProgress
+      ? t('Waiting for recording to stop...')
+      : t('Waiting for recording to start...');
+  }
+
+  return (
+    <Restricted
+      requiredGrants={[
+        OwnCapability.START_RECORD_CALL,
+        OwnCapability.STOP_RECORD_CALL,
+      ]}
+    >
+      <CompositeButton
+        active={isCallRecordingInProgress}
+        caption={caption}
+        variant="secondary"
+        data-testid={
+          isCallRecordingInProgress
+            ? 'recording-stop-button'
+            : 'recording-start-button'
+        }
+        title={title}
+        onClick={isAwaitingResponse ? undefined : toggleCallRecording}
+      >
+        {isAwaitingResponse ? (
+          <LoadingIndicator />
         ) : (
-          <IconButton
-            // FIXME OL: sort out this ambiguity
-            enabled={!!call}
-            disabled={!call}
+          <Icon
             icon={isCallRecordingInProgress ? 'recording-on' : 'recording-off'}
-            title={t('Record call')}
-            onClick={toggleCallRecording}
           />
         )}
       </CompositeButton>
diff --git a/packages/react-sdk/src/components/CallControls/ScreenShareButton.tsx b/packages/react-sdk/src/components/CallControls/ScreenShareButton.tsx
index 22561cd3db..a64a4a94f7 100644
--- a/packages/react-sdk/src/components/CallControls/ScreenShareButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ScreenShareButton.tsx
@@ -4,9 +4,10 @@ import {
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
-import { CompositeButton, IconButton } from '../Button/';
+import { CompositeButton } from '../Button/';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
+import { Icon } from '../Icon';
 
 export type ScreenShareButtonProps = {
   caption?: string;
@@ -14,7 +15,7 @@ export type ScreenShareButtonProps = {
 
 export const ScreenShareButton = (props: ScreenShareButtonProps) => {
   const { t } = useI18n();
-  const { caption = t('Screen Share') } = props;
+  const { caption } = props;
 
   const { useHasOngoingScreenShare, useScreenShareState } = useCallStateHooks();
   const isSomeoneScreenSharing = useHasOngoingScreenShare();
@@ -34,20 +35,29 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
         messageAwaitingApproval={t('Awaiting for an approval to share screen.')}
         messageRevoked={t('You can no longer share your screen.')}
       >
-        <CompositeButton active={isSomeoneScreenSharing} caption={caption}>
-          <IconButton
+        <CompositeButton
+          active={isSomeoneScreenSharing}
+          caption={caption}
+          title={caption || t('Share screen')}
+          variant="primary"
+          data-testid={
+            isSomeoneScreenSharing
+              ? 'screen-share-stop-button'
+              : 'screen-share-start-button'
+          }
+          disabled={disableScreenShareButton}
+          onClick={async () => {
+            if (!hasPermission) {
+              await requestPermission();
+            } else {
+              await screenShare.toggle();
+            }
+          }}
+        >
+          <Icon
             icon={
               isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off'
             }
-            title={t('Share screen')}
-            disabled={disableScreenShareButton}
-            onClick={async () => {
-              if (!hasPermission) {
-                await requestPermission();
-              } else {
-                await screenShare.toggle();
-              }
-            }}
           />
         </CompositeButton>
       </PermissionNotification>
diff --git a/packages/react-sdk/src/components/CallControls/ToggleAudioButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleAudioButton.tsx
index db0c80c7ad..b21604fe6f 100644
--- a/packages/react-sdk/src/components/CallControls/ToggleAudioButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ToggleAudioButton.tsx
@@ -1,55 +1,82 @@
-import { ComponentType } from 'react';
 import { OwnCapability } from '@stream-io/video-client';
 import {
   Restricted,
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+import { CompositeButton, IconButtonWithMenuProps } from '../Button';
 import { DeviceSelectorAudioInput } from '../DeviceSettings';
-import { CompositeButton, IconButton } from '../Button';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
+import { Icon } from '../Icon';
 
-export type ToggleAudioPreviewButtonProps = {
-  caption?: string;
-  Menu?: ComponentType;
-};
+export type ToggleAudioPreviewButtonProps = Pick<
+  IconButtonWithMenuProps,
+  'caption' | 'Menu' | 'menuPlacement'
+>;
 
 export const ToggleAudioPreviewButton = (
   props: ToggleAudioPreviewButtonProps,
 ) => {
+  const { caption, Menu, menuPlacement, ...restCompositeButtonProps } = props;
   const { t } = useI18n();
-  const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
-
   const { useMicrophoneState } = useCallStateHooks();
-  const { microphone, isMute } = useMicrophoneState();
+  const { microphone, isMute, hasBrowserPermission } = useMicrophoneState();
 
   return (
-    <CompositeButton Menu={Menu} active={isMute} caption={caption || t('Mic')}>
-      <IconButton
-        icon={!isMute ? 'mic' : 'mic-off'}
-        onClick={() => microphone.toggle()}
-      />
+    <CompositeButton
+      active={isMute}
+      caption={caption}
+      className={clsx(!hasBrowserPermission && 'str-video__device-unavailable')}
+      variant="secondary"
+      title={
+        !hasBrowserPermission
+          ? t('Check your browser audio permissions')
+          : caption || t('Mic')
+      }
+      disabled={!hasBrowserPermission}
+      data-testid={
+        isMute ? 'preview-audio-unmute-button' : 'preview-audio-mute-button'
+      }
+      onClick={() => microphone.toggle()}
+      Menu={Menu}
+      menuPlacement={menuPlacement}
+      {...restCompositeButtonProps}
+    >
+      <Icon icon={!isMute ? 'mic' : 'mic-off'} />
+      {!hasBrowserPermission && (
+        <span
+          className="str-video__no-media-permission"
+          title={t('Check your browser audio permissions')}
+          children="!"
+        />
+      )}
     </CompositeButton>
   );
 };
 
-export type ToggleAudioPublishingButtonProps = {
-  caption?: string;
-  Menu?: ComponentType;
-};
+export type ToggleAudioPublishingButtonProps = Pick<
+  IconButtonWithMenuProps,
+  'caption' | 'Menu' | 'menuPlacement'
+>;
 
 export const ToggleAudioPublishingButton = (
   props: ToggleAudioPublishingButtonProps,
 ) => {
   const { t } = useI18n();
-  const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
+  const {
+    caption,
+    Menu = <DeviceSelectorAudioInput visualType="list" />,
+    menuPlacement = 'top',
+    ...restCompositeButtonProps
+  } = props;
 
   const { hasPermission, requestPermission, isAwaitingPermission } =
     useRequestPermission(OwnCapability.SEND_AUDIO);
 
   const { useMicrophoneState } = useCallStateHooks();
-  const { microphone, isMute } = useMicrophoneState();
+  const { microphone, isMute, hasBrowserPermission } = useMicrophoneState();
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
@@ -60,17 +87,33 @@ export const ToggleAudioPublishingButton = (
         messageAwaitingApproval={t('Awaiting for an approval to speak.')}
         messageRevoked={t('You can no longer speak.')}
       >
-        <CompositeButton Menu={Menu} active={isMute} caption={caption}>
-          <IconButton
-            icon={isMute ? 'mic-off' : 'mic'}
-            onClick={async () => {
-              if (!hasPermission) {
-                await requestPermission();
-              } else {
-                await microphone.toggle();
-              }
-            }}
-          />
+        <CompositeButton
+          active={isMute}
+          caption={caption}
+          title={
+            !hasBrowserPermission || !hasPermission
+              ? t('Check your browser mic permissions')
+              : caption || t('Mic')
+          }
+          variant="secondary"
+          disabled={!hasBrowserPermission || !hasPermission}
+          data-testid={isMute ? 'audio-unmute-button' : 'audio-mute-button'}
+          onClick={async () => {
+            if (!hasPermission) {
+              await requestPermission();
+            } else {
+              await microphone.toggle();
+            }
+          }}
+          Menu={Menu}
+          menuPlacement={menuPlacement}
+          menuOffset={16}
+          {...restCompositeButtonProps}
+        >
+          <Icon icon={isMute ? 'mic-off' : 'mic'} />
+          {(!hasBrowserPermission || !hasPermission) && (
+            <span className="str-video__no-media-permission">!</span>
+          )}
         </CompositeButton>
       </PermissionNotification>
     </Restricted>
diff --git a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
index ccb80eee60..bb3052456e 100644
--- a/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ToggleAudioOutputButton.tsx
@@ -1,22 +1,26 @@
-import { CompositeButton, IconButton } from '../Button';
-import { DeviceSelectorAudioOutput } from '../DeviceSettings';
+import { CompositeButton, IconButtonWithMenuProps } from '../Button';
 import { useI18n } from '@stream-io/video-react-bindings';
-import { ComponentType } from 'react';
+import { Icon } from '../Icon';
 
-export type ToggleAudioOutputButtonProps = {
-  caption?: string;
-  Menu?: ComponentType;
-};
+export type ToggleAudioOutputButtonProps = Pick<
+  IconButtonWithMenuProps,
+  'caption' | 'Menu' | 'menuPlacement'
+>;
 
 export const ToggleAudioOutputButton = (
   props: ToggleAudioOutputButtonProps,
 ) => {
   const { t } = useI18n();
-  const { caption = t('Speakers'), Menu = DeviceSelectorAudioOutput } = props;
+  const { caption, Menu } = props;
 
   return (
-    <CompositeButton Menu={Menu} caption={caption}>
-      <IconButton icon="speaker" />
+    <CompositeButton
+      Menu={Menu}
+      caption={caption}
+      title={caption || t('Speakers')}
+      data-testid="audio-output-button"
+    >
+      <Icon icon="speaker" />
     </CompositeButton>
   );
 };
diff --git a/packages/react-sdk/src/components/CallControls/ToggleVideoButton.tsx b/packages/react-sdk/src/components/CallControls/ToggleVideoButton.tsx
index 127e8df2f0..0275d28162 100644
--- a/packages/react-sdk/src/components/CallControls/ToggleVideoButton.tsx
+++ b/packages/react-sdk/src/components/CallControls/ToggleVideoButton.tsx
@@ -1,56 +1,80 @@
-import { ComponentType } from 'react';
 import {
   Restricted,
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
-
+import clsx from 'clsx';
 import { OwnCapability } from '@stream-io/video-client';
-import { CompositeButton, IconButton } from '../Button/';
+import { CompositeButton, IconButtonWithMenuProps } from '../Button/';
 import { DeviceSelectorVideo } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
+import { Icon } from '../Icon';
 
-export type ToggleVideoPreviewButtonProps = {
-  caption?: string;
-  Menu?: ComponentType;
-};
+export type ToggleVideoPreviewButtonProps = Pick<
+  IconButtonWithMenuProps,
+  'caption' | 'Menu' | 'menuPlacement'
+>;
 
 export const ToggleVideoPreviewButton = (
   props: ToggleVideoPreviewButtonProps,
 ) => {
+  const { caption, ...restCompositeButtonProps } = props;
   const { t } = useI18n();
-  const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
-
   const { useCameraState } = useCallStateHooks();
-  const { camera, isMute } = useCameraState();
+  const { camera, isMute, hasBrowserPermission } = useCameraState();
 
   return (
-    <CompositeButton Menu={Menu} active={isMute} caption={caption}>
-      <IconButton
-        icon={!isMute ? 'camera' : 'camera-off'}
-        onClick={() => camera.toggle()}
-      />
+    <CompositeButton
+      active={isMute}
+      caption={caption}
+      className={clsx(!hasBrowserPermission && 'str-video__device-unavailable')}
+      title={
+        !hasBrowserPermission
+          ? t('Check your browser video permissions')
+          : caption || t('Video')
+      }
+      variant="secondary"
+      data-testid={
+        isMute ? 'preview-video-unmute-button' : 'preview-video-mute-button'
+      }
+      onClick={() => camera.toggle()}
+      disabled={!hasBrowserPermission}
+      {...restCompositeButtonProps}
+    >
+      <Icon icon={!isMute ? 'camera' : 'camera-off'} />
+      {!hasBrowserPermission && (
+        <span
+          className="str-video__no-media-permission"
+          title={t('Check your browser video permissions')}
+          children="!"
+        />
+      )}
     </CompositeButton>
   );
 };
 
-type ToggleVideoPublishingButtonProps = {
-  caption?: string;
-  Menu?: ComponentType;
-};
+type ToggleVideoPublishingButtonProps = Pick<
+  IconButtonWithMenuProps,
+  'caption' | 'Menu' | 'menuPlacement'
+>;
 
 export const ToggleVideoPublishingButton = (
   props: ToggleVideoPublishingButtonProps,
 ) => {
   const { t } = useI18n();
-  const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
+  const {
+    caption,
+    Menu = <DeviceSelectorVideo visualType="list" />,
+    menuPlacement = 'top',
+    ...restCompositeButtonProps
+  } = props;
 
   const { hasPermission, requestPermission, isAwaitingPermission } =
     useRequestPermission(OwnCapability.SEND_VIDEO);
 
   const { useCameraState } = useCallStateHooks();
-  const { camera, isMute } = useCameraState();
+  const { camera, isMute, hasBrowserPermission } = useCameraState();
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
@@ -63,17 +87,33 @@ export const ToggleVideoPublishingButton = (
         )}
         messageRevoked={t('You can no longer share your video.')}
       >
-        <CompositeButton Menu={Menu} active={isMute} caption={caption}>
-          <IconButton
-            icon={isMute ? 'camera-off' : 'camera'}
-            onClick={async () => {
-              if (!hasPermission) {
-                await requestPermission();
-              } else {
-                await camera.toggle();
-              }
-            }}
-          />
+        <CompositeButton
+          active={isMute}
+          caption={caption}
+          variant="secondary"
+          title={
+            !hasBrowserPermission || !hasPermission
+              ? t('Check your browser video permissions')
+              : caption || t('Video')
+          }
+          disabled={!hasBrowserPermission || !hasPermission}
+          data-testid={isMute ? 'video-unmute-button' : 'video-mute-button'}
+          onClick={async () => {
+            if (!hasPermission) {
+              await requestPermission();
+            } else {
+              await camera.toggle();
+            }
+          }}
+          Menu={Menu}
+          menuPlacement={menuPlacement}
+          menuOffset={16}
+          {...restCompositeButtonProps}
+        >
+          <Icon icon={isMute ? 'camera-off' : 'camera'} />
+          {!hasBrowserPermission && (
+            <span className="str-video__no-media-permission">!</span>
+          )}
         </CompositeButton>
       </PermissionNotification>
     </Restricted>
diff --git a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListHeader.tsx b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListHeader.tsx
index b036c20275..0c4d5390f7 100644
--- a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListHeader.tsx
+++ b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListHeader.tsx
@@ -1,7 +1,11 @@
 import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
 
+import { IconButton } from '../Button';
+
 export type CallParticipantListHeaderProps = {
-  /** Click event listener function to be invoked in order to dismiss / hide the CallParticipantsList from the UI */
+  /**
+   * Click event listener function to be invoked to dismiss / hide the CallParticipantsList from the UI.
+   */
   onClose: () => void;
 };
 
@@ -18,7 +22,7 @@ export const CallParticipantListHeader = ({
       <div className="str-video__participant-list-header__title">
         {t('Participants')}{' '}
         <span className="str-video__participant-list-header__title-count">
-          ({participants.length})
+          [{participants.length}]
         </span>
         {anonymousParticipantCount > 0 && (
           <span className="str-video__participant-list-header__title-anonymous">
@@ -26,12 +30,11 @@ export const CallParticipantListHeader = ({
           </span>
         )}
       </div>
-      <button
+      <IconButton
         onClick={onClose}
         className="str-video__participant-list-header__close-button"
-      >
-        <span className="str-video__participant-list-header__close-button--icon" />
-      </button>
+        icon="close"
+      />
     </div>
   );
 };
diff --git a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx
index 83a19e1edf..ab92a4ab26 100644
--- a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx
+++ b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListingItem.tsx
@@ -1,31 +1,15 @@
 import clsx from 'clsx';
-import {
-  ComponentProps,
-  ComponentType,
-  forwardRef,
-  useEffect,
-  useState,
-} from 'react';
-import {
-  Restricted,
-  useCall,
-  useConnectedUser,
-  useI18n,
-} from '@stream-io/video-react-bindings';
-import {
-  OwnCapability,
-  SfuModels,
-  StreamVideoParticipant,
-} from '@stream-io/video-client';
+import { ComponentProps, ComponentType, forwardRef } from 'react';
+import { useConnectedUser, useI18n } from '@stream-io/video-react-bindings';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
 import { IconButton } from '../Button';
-import {
-  GenericMenu,
-  GenericMenuButtonItem,
-  MenuToggle,
-  ToggleMenuButtonProps,
-} from '../Menu';
+import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 import { WithTooltip } from '../Tooltip';
-import { Icon } from '../Icon';
+import { Avatar } from '../Avatar';
+import {
+  ParticipantActionsContextMenu,
+  ParticipantViewContext,
+} from '../../core/';
 
 type CallParticipantListingItemProps = {
   /** Participant object be rendered */
@@ -49,6 +33,7 @@ export const CallParticipantListingItem = ({
 
   return (
     <div className="str-video__participant-listing-item">
+      <Avatar name={participant.name} imageSrc={participant.image} />
       <DisplayName participant={participant} />
       <div className="str-video__participant-listing-item__media-indicator-group">
         <MediaIndicator
@@ -80,7 +65,11 @@ export const CallParticipantListingItem = ({
         )}
 
         <MenuToggle placement="bottom-end" ToggleButton={ToggleButton}>
-          <ParticipantActionsContextMenu participant={participant} />
+          <ParticipantViewContext.Provider
+            value={{ participant, trackType: 'none' }}
+          >
+            <ParticipantActionsContextMenu />
+          </ParticipantViewContext.Provider>
         </MenuToggle>
       </div>
     </div>
@@ -95,7 +84,7 @@ type DisplayNameProps = {
   /** Participant object that provides the data from which display name can be generated */
   participant: StreamVideoParticipant;
 };
-// todo: implement display device flag
+
 const DefaultDisplayName = ({ participant }: DisplayNameProps) => {
   const connectedUser = useConnectedUser();
   const { t } = useI18n();
@@ -122,260 +111,7 @@ const DefaultDisplayName = ({ participant }: DisplayNameProps) => {
 };
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  (props, ref) => {
+  function ToggleButton(props, ref) {
     return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
   },
 );
-
-export const ParticipantActionsContextMenu = ({
-  participant,
-  participantViewElement,
-  videoElement,
-}: {
-  participant: StreamVideoParticipant;
-  participantViewElement?: HTMLDivElement | null;
-  videoElement?: HTMLVideoElement | null;
-}) => {
-  const [fullscreenModeOn, setFullscreenModeOn] = useState(
-    !!document.fullscreenElement,
-  );
-  const [pictureInPictureElement, setPictureInPictureElement] = useState(
-    document.pictureInPictureElement,
-  );
-  const call = useCall();
-  const { t } = useI18n();
-
-  const { pin, publishedTracks, sessionId, userId } = participant;
-
-  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
-  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
-  const hasScreenShare = publishedTracks.includes(
-    SfuModels.TrackType.SCREEN_SHARE,
-  );
-  const hasScreenShareAudio = publishedTracks.includes(
-    SfuModels.TrackType.SCREEN_SHARE_AUDIO,
-  );
-
-  const blockUser = () => call?.blockUser(userId);
-  const muteAudio = () => call?.muteUser(userId, 'audio');
-  const muteVideo = () => call?.muteUser(userId, 'video');
-  const muteScreenShare = () => call?.muteUser(userId, 'screenshare');
-  const muteScreenShareAudio = () =>
-    call?.muteUser(userId, 'screenshare_audio');
-
-  const grantPermission = (permission: string) => () => {
-    call?.updateUserPermissions({
-      user_id: userId,
-      grant_permissions: [permission],
-    });
-  };
-
-  const revokePermission = (permission: string) => () => {
-    call?.updateUserPermissions({
-      user_id: userId,
-      revoke_permissions: [permission],
-    });
-  };
-
-  const toggleParticipantPinnedAt = () => {
-    if (pin) {
-      call?.unpin(sessionId);
-    } else {
-      call?.pin(sessionId);
-    }
-  };
-
-  const pinForEveryone = () => {
-    call
-      ?.pinForEveryone({
-        user_id: userId,
-        session_id: sessionId,
-      })
-      .catch((err) => {
-        console.error(`Failed to pin participant ${userId}`, err);
-      });
-  };
-
-  const unpinForEveryone = () => {
-    call
-      ?.unpinForEveryone({
-        user_id: userId,
-        session_id: sessionId,
-      })
-      .catch((err) => {
-        console.error(`Failed to unpin participant ${userId}`, err);
-      });
-  };
-
-  const toggleFullscreenMode = () => {
-    if (!fullscreenModeOn) {
-      return participantViewElement
-        ?.requestFullscreen()
-        .then(() => setFullscreenModeOn(true))
-        .catch(console.error);
-    }
-
-    document
-      .exitFullscreen()
-      .catch(console.error)
-      .finally(() => setFullscreenModeOn(false));
-  };
-
-  useEffect(() => {
-    // handles the case when fullscreen mode is toggled externally,
-    // e.g., by pressing ESC key or some other keyboard shortcut
-    const handleFullscreenChange = () => {
-      setFullscreenModeOn(!!document.fullscreenElement);
-    };
-    document.addEventListener('fullscreenchange', handleFullscreenChange);
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!videoElement) return;
-
-    const handlePictureInPicture = () => {
-      setPictureInPictureElement(document.pictureInPictureElement);
-    };
-
-    videoElement.addEventListener(
-      'enterpictureinpicture',
-      handlePictureInPicture,
-    );
-    videoElement.addEventListener(
-      'leavepictureinpicture',
-      handlePictureInPicture,
-    );
-
-    return () => {
-      videoElement.removeEventListener(
-        'enterpictureinpicture',
-        handlePictureInPicture,
-      );
-      videoElement.removeEventListener(
-        'leavepictureinpicture',
-        handlePictureInPicture,
-      );
-    };
-  }, [videoElement]);
-
-  const togglePictureInPicture = () => {
-    if (videoElement && pictureInPictureElement !== videoElement) {
-      return videoElement
-        .requestPictureInPicture()
-        .catch(console.error) as Promise<void>;
-    }
-
-    document.exitPictureInPicture().catch(console.error);
-  };
-
-  return (
-    <GenericMenu>
-      <GenericMenuButtonItem
-        onClick={toggleParticipantPinnedAt}
-        disabled={pin && !pin.isLocalPin}
-      >
-        <Icon icon="pin" />
-        {pin ? t('Unpin') : t('Pin')}
-      </GenericMenuButtonItem>
-      <Restricted requiredGrants={[OwnCapability.PIN_FOR_EVERYONE]}>
-        <GenericMenuButtonItem
-          onClick={pinForEveryone}
-          disabled={pin && !pin.isLocalPin}
-        >
-          <Icon icon="pin" />
-          {t('Pin for everyone')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem
-          onClick={unpinForEveryone}
-          disabled={!pin || pin.isLocalPin}
-        >
-          <Icon icon="pin" />
-          {t('Unpin for everyone')}
-        </GenericMenuButtonItem>
-      </Restricted>
-      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>
-        <GenericMenuButtonItem onClick={blockUser}>
-          <Icon icon="not-allowed" />
-          {t('Block')}
-        </GenericMenuButtonItem>
-      </Restricted>
-      <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
-        <GenericMenuButtonItem disabled={!hasVideo} onClick={muteVideo}>
-          <Icon icon="camera-off-outline" />
-          {t('Turn off video')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem
-          disabled={!hasScreenShare}
-          onClick={muteScreenShare}
-        >
-          <Icon icon="screen-share-off" />
-          {t('Turn off screen share')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem disabled={!hasAudio} onClick={muteAudio}>
-          <Icon icon="no-audio" />
-          {t('Mute audio')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem
-          disabled={!hasScreenShareAudio}
-          onClick={muteScreenShareAudio}
-        >
-          <Icon icon="no-audio" />
-          {t('Mute screen share audio')}
-        </GenericMenuButtonItem>
-      </Restricted>
-      {participantViewElement && (
-        <GenericMenuButtonItem onClick={toggleFullscreenMode}>
-          {t('{{ direction }} fullscreen', {
-            direction: fullscreenModeOn ? t('Leave') : t('Enter'),
-          })}
-        </GenericMenuButtonItem>
-      )}
-      {videoElement && document.pictureInPictureEnabled && (
-        <GenericMenuButtonItem onClick={togglePictureInPicture}>
-          {t('{{ direction }} picture-in-picture', {
-            direction:
-              pictureInPictureElement === videoElement
-                ? t('Leave')
-                : t('Enter'),
-          })}
-        </GenericMenuButtonItem>
-      )}
-      <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>
-        <GenericMenuButtonItem
-          onClick={grantPermission(OwnCapability.SEND_AUDIO)}
-        >
-          {t('Allow audio')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem
-          onClick={grantPermission(OwnCapability.SEND_VIDEO)}
-        >
-          {t('Allow video')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem
-          onClick={grantPermission(OwnCapability.SCREENSHARE)}
-        >
-          {t('Allow screen sharing')}
-        </GenericMenuButtonItem>
-
-        <GenericMenuButtonItem
-          onClick={revokePermission(OwnCapability.SEND_AUDIO)}
-        >
-          {t('Disable audio')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem
-          onClick={revokePermission(OwnCapability.SEND_VIDEO)}
-        >
-          {t('Disable video')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem
-          onClick={revokePermission(OwnCapability.SCREENSHARE)}
-        >
-          {t('Disable screen sharing')}
-        </GenericMenuButtonItem>
-      </Restricted>
-    </GenericMenu>
-  );
-};
diff --git a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantsList.tsx b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantsList.tsx
index 8b5d61b650..fbf59d1b1d 100644
--- a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantsList.tsx
+++ b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantsList.tsx
@@ -1,7 +1,5 @@
 import {
-  ComponentProps,
   Dispatch,
-  ForwardedRef,
   forwardRef,
   SetStateAction,
   useCallback,
@@ -17,14 +15,9 @@ import {
   OwnCapability,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
-import clsx from 'clsx';
 
 import { BlockedUserListing } from './BlockedUserListing';
-import {
-  CopyToClipboardButtonWithPopup,
-  IconButton,
-  TextButton,
-} from '../Button';
+import { IconButton, TextButton } from '../Button';
 import { CallParticipantListHeader } from './CallParticipantListHeader';
 import { CallParticipantListing } from './CallParticipantListing';
 import { EmptyParticipantSearchList } from './EmptyParticipantSearchList';
@@ -97,12 +90,6 @@ export const CallParticipantsList = ({
           />
         )}
       </div>
-      <div className="str-video__participant-list__footer">
-        <CopyToClipboardButtonWithPopup
-          Button={InviteLinkButton}
-          copyValue={typeof window !== 'undefined' ? window.location.href : ''}
-        />
-      </div>
     </div>
   );
 };
@@ -123,7 +110,6 @@ const CallParticipantListContentHeader = ({
   return (
     <div className="str-video__participant-list__content-header">
       <div className="str-video__participant-list__content-header-title">
-        <span>{UserListTypes[userListType]}</span>
         {userListType === 'active' && (
           <Restricted
             requiredGrants={[OwnCapability.MUTE_USERS]}
@@ -234,23 +220,7 @@ const BlockedUsersSearchResults = ({
 };
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  (props, ref) => {
+  function ToggleButton(props, ref) {
     return <IconButton enabled={props.menuShown} icon="filter" ref={ref} />;
   },
 );
-
-const InviteLinkButton = forwardRef(
-  (
-    { className, ...props }: ComponentProps<'button'>,
-    ref: ForwardedRef<HTMLButtonElement>,
-  ) => (
-    <button
-      {...props}
-      className={clsx('str-video__invite-link-button', className)}
-      ref={ref}
-    >
-      <div className="str-video__invite-participant-icon" />
-      <div className="str-video__invite-link-button__text">Invite Link</div>
-    </button>
-  ),
-);
diff --git a/packages/react-sdk/src/components/CallRecordingList/CallRecordingList.tsx b/packages/react-sdk/src/components/CallRecordingList/CallRecordingList.tsx
index 102086e807..981ba86487 100644
--- a/packages/react-sdk/src/components/CallRecordingList/CallRecordingList.tsx
+++ b/packages/react-sdk/src/components/CallRecordingList/CallRecordingList.tsx
@@ -51,12 +51,30 @@ export const CallRecordingList = ({
         {loading ? (
           <LoadingCallRecordingList callRecordings={callRecordings} />
         ) : callRecordings.length ? (
-          callRecordings.map((recording) => (
-            <CallRecordingListItem
-              recording={recording}
-              key={recording.filename}
-            />
-          ))
+          <>
+            <ul className="str-video__call-recording-list__list">
+              <li className="str-video__call-recording-list__item">
+                <div className="str-video__call-recording-list__filename">
+                  Name
+                </div>
+                <div className="str-video__call-recording-list__time">
+                  Start time
+                </div>
+                <div className="str-video__call-recording-list__time">
+                  End time
+                </div>
+                <div className="str-video__call-recording-list__download"></div>
+              </li>
+            </ul>
+            <ul className="str-video__call-recording-list__list">
+              {callRecordings.map((recording) => (
+                <CallRecordingListItem
+                  recording={recording}
+                  key={recording.filename}
+                />
+              ))}
+            </ul>
+          </>
         ) : (
           <EmptyCallRecordingList />
         )}
diff --git a/packages/react-sdk/src/components/CallRecordingList/CallRecordingListHeader.tsx b/packages/react-sdk/src/components/CallRecordingList/CallRecordingListHeader.tsx
index d56770c77b..e92a084691 100644
--- a/packages/react-sdk/src/components/CallRecordingList/CallRecordingListHeader.tsx
+++ b/packages/react-sdk/src/components/CallRecordingList/CallRecordingListHeader.tsx
@@ -1,4 +1,5 @@
 import { CallRecording } from '@stream-io/video-client';
+import { useI18n } from '@stream-io/video-react-bindings';
 import { IconButton } from '../Button';
 
 export type CallRecordingListHeaderProps = {
@@ -12,13 +13,16 @@ export const CallRecordingListHeader = ({
   callRecordings,
   onRefresh,
 }: CallRecordingListHeaderProps) => {
+  const { t } = useI18n();
   return (
     <div className="str-video__call-recording-list__header">
       <div className="str-video__call-recording-list__title">
-        <span>Call Recordings</span>
+        <span>{t('Call Recordings')}</span>
         {callRecordings.length ? <span>({callRecordings.length})</span> : null}
       </div>
-      <IconButton icon="refresh" title="Refresh" onClick={onRefresh} />
+      {onRefresh && (
+        <IconButton icon="refresh" title={t('Refresh')} onClick={onRefresh} />
+      )}
     </div>
   );
 };
diff --git a/packages/react-sdk/src/components/CallRecordingList/CallRecordingListItem.tsx b/packages/react-sdk/src/components/CallRecordingList/CallRecordingListItem.tsx
index ed92cde504..26351f3724 100644
--- a/packages/react-sdk/src/components/CallRecordingList/CallRecordingListItem.tsx
+++ b/packages/react-sdk/src/components/CallRecordingList/CallRecordingListItem.tsx
@@ -1,23 +1,31 @@
 import clsx from 'clsx';
-import { ComponentProps, ForwardedRef, forwardRef } from 'react';
 import { CallRecording } from '@stream-io/video-client';
-import { CopyToClipboardButtonWithPopup } from '../Button';
+import { Icon } from '../Icon';
 
 export type CallRecordingListItemProps = {
   /** CallRecording object to represent */
   recording: CallRecording;
 };
+
+const dateFormat = (date: string) => {
+  const format = new Date(date);
+  return format.toTimeString().split(' ')[0];
+};
 export const CallRecordingListItem = ({
   recording,
 }: CallRecordingListItemProps) => {
   return (
-    <div className="str-video__call-recording-list-item">
-      <div className="str-video__call-recording-list-item__info">
-        <div className="str-video__call-recording-list-item__created">
-          {new Date(recording.end_time).toLocaleString()}
-        </div>
+    <li className="str-video__call-recording-list__item">
+      <div className="str-video__call-recording-list__table-cell str-video__call-recording-list__filename">
+        {recording.filename}
+      </div>
+      <div className="str-video__call-recording-list__table-cell str-video__call-recording-list__time">
+        {dateFormat(recording.start_time)}
       </div>
-      <div className="str-video__call-recording-list-item__actions">
+      <div className="str-video__call-recording-list__table-cell str-video__call-recording-list__time">
+        {dateFormat(recording.end_time)}
+      </div>
+      <div className="str-video__call-recording-list__table-cell str-video__call-recording-list__download">
         <a
           className={clsx(
             'str-video__call-recording-list-item__action-button',
@@ -28,40 +36,9 @@ export const CallRecordingListItem = ({
           download={recording.filename}
           title="Download the recording"
         >
-          <span
-            className={clsx(
-              'str-video__call-recording-list-item__action-button-icon',
-              'str-video__download-button--icon',
-            )}
-          />
+          <Icon icon="download" />
         </a>
-        <CopyToClipboardButtonWithPopup
-          Button={CopyUrlButton}
-          copyValue={recording.url}
-        />
       </div>
-    </div>
+    </li>
   );
 };
-const CopyUrlButton = forwardRef(
-  (props: ComponentProps<'button'>, ref: ForwardedRef<HTMLButtonElement>) => {
-    return (
-      <button
-        {...props}
-        className={clsx(
-          'str-video__call-recording-list-item__action-button',
-          'str-video__call-recording-list-item__action-button--copy-link',
-        )}
-        ref={ref}
-        title="Copy the recording link"
-      >
-        <span
-          className={clsx(
-            'str-video__call-recording-list-item__action-button-icon',
-            'str-video__copy-button--icon',
-          )}
-        />
-      </button>
-    );
-  },
-);
diff --git a/packages/react-sdk/src/components/CallStats/CallStats.tsx b/packages/react-sdk/src/components/CallStats/CallStats.tsx
index 1b3f02445b..ec9730f0d5 100644
--- a/packages/react-sdk/src/components/CallStats/CallStats.tsx
+++ b/packages/react-sdk/src/components/CallStats/CallStats.tsx
@@ -1,12 +1,52 @@
-import { useEffect, useRef, useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
 import {
   AggregatedStatsReport,
   CallStatsReport,
 } from '@stream-io/video-client';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+
+import { useFloating, useHover, useInteractions } from '@floating-ui/react';
+
 import { CallStatsLatencyChart } from './CallStatsLatencyChart';
+import { Icon } from '../Icon';
+
+export enum Statuses {
+  GOOD = 'Good',
+  OK = 'Ok',
+  BAD = 'Bad',
+}
+export type Status = Statuses.GOOD | Statuses.OK | Statuses.BAD;
+
+const statsStatus = ({
+  value,
+  lowBound,
+  highBound,
+}: {
+  value: number;
+  lowBound: number;
+  highBound: number;
+}): Status => {
+  if (value <= lowBound) {
+    return Statuses.GOOD;
+  }
+
+  if (value >= lowBound && value <= highBound) {
+    return Statuses.OK;
+  }
+
+  if (value >= highBound) {
+    return Statuses.BAD;
+  }
 
-export const CallStats = () => {
+  return Statuses.GOOD;
+};
+
+export const CallStats = (props: {
+  latencyLowBound?: number;
+  latencyHighBound?: number;
+}) => {
+  const { latencyLowBound = 75, latencyHighBound = 400 } = props;
   const [latencyBuffer, setLatencyBuffer] = useState<
     Array<{ x: number; y: number }>
   >(() => {
@@ -14,6 +54,7 @@ export const CallStats = () => {
     return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));
   });
 
+  const { t } = useI18n();
   const [publishBitrate, setPublishBitrate] = useState('-');
   const [subscribeBitrate, setSubscribeBitrate] = useState('-');
   const previousStats = useRef<CallStatsReport>();
@@ -49,27 +90,72 @@ export const CallStats = () => {
     previousStats.current = callStatsReport;
   }, [callStatsReport]);
 
+  const latencyComparison = {
+    lowBound: latencyLowBound,
+    highBound: latencyHighBound,
+    value: callStatsReport?.publisherStats.averageRoundTripTimeInMs || 0,
+  };
+
   return (
     <div className="str-video__call-stats">
       {callStatsReport && (
         <>
-          <h3>Call Latency</h3>
-          <CallStatsLatencyChart values={latencyBuffer} />
+          <div className="str-video__call-stats__header">
+            <h3 className="str-video__call-stats__heading">
+              <Icon
+                className="str-video__call-stats__icon"
+                icon="call-latency"
+              />
+              {t('Call Latency')}
+            </h3>
+            <p className="str-video__call-stats__description">
+              {t(
+                'Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.',
+              )}
+            </p>
+          </div>
+
+          <div className="str-video__call-stats__latencychart">
+            <CallStatsLatencyChart values={latencyBuffer} />
+          </div>
+
+          <div className="str-video__call-stats__header">
+            <h3 className="str-video__call-stats__heading">
+              <Icon
+                className="str-video__call-stats__icon"
+                icon="network-quality"
+              />
+              {t('Call performance')}
+            </h3>
+            <p className="str-video__call-stats__description">
+              {t(
+                'Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.',
+              )}
+            </p>
+          </div>
 
-          <h3>Call performance</h3>
           <div className="str-video__call-stats__card-container">
             <StatCard label="Region" value={callStatsReport.datacenter} />
             <StatCard
               label="Latency"
               value={`${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`}
+              comparison={latencyComparison}
             />
             <StatCard
               label="Receive jitter"
               value={`${callStatsReport.subscriberStats.averageJitterInMs} ms.`}
+              comparison={{
+                ...latencyComparison,
+                value: callStatsReport.subscriberStats.averageJitterInMs,
+              }}
             />
             <StatCard
               label="Publish jitter"
               value={`${callStatsReport.publisherStats.averageJitterInMs} ms.`}
+              comparison={{
+                ...latencyComparison,
+                value: callStatsReport.publisherStats.averageJitterInMs,
+              }}
             />
             <StatCard
               label="Publish resolution"
@@ -96,12 +182,83 @@ export const CallStats = () => {
   );
 };
 
-export const StatCard = (props: { label: string; value: string }) => {
-  const { label, value } = props;
+export const StatCardExplanation = (props: { description: string }) => {
+  const { description } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+  });
+
+  const hover = useHover(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
+
+  return (
+    <>
+      <div
+        className="str-video__call-explanation"
+        ref={refs.setReference}
+        {...getReferenceProps()}
+      >
+        <Icon className="str-video__call-explanation__icon" icon="info" />
+      </div>
+      {isOpen && (
+        <div
+          className="str-video__call-explanation__description"
+          ref={refs.setFloating}
+          style={floatingStyles}
+          {...getFloatingProps()}
+        >
+          {description}
+        </div>
+      )}
+    </>
+  );
+};
+
+export const StatsTag = ({
+  children,
+  status = Statuses.GOOD,
+}: {
+  children: ReactNode;
+  status: Statuses.GOOD | Statuses.OK | Statuses.BAD;
+}) => {
+  return (
+    <div
+      className={clsx('str-video__call-stats__tag', {
+        'str-video__call-stats__tag--good': status === Statuses.GOOD,
+        'str-video__call-stats__tag--ok': status === Statuses.OK,
+        'str-video__call-stats__tag--bad': status === Statuses.BAD,
+      })}
+    >
+      <div className="str-video__call-stats__tag__text">{children}</div>
+    </div>
+  );
+};
+
+export const StatCard = (props: {
+  label: string;
+  value: string | ReactNode;
+  description?: string;
+  comparison?: { value: number; highBound: number; lowBound: number };
+}) => {
+  const { label, value, description, comparison } = props;
+
+  const { t } = useI18n();
+  const status = comparison ? statsStatus(comparison) : undefined;
+
   return (
     <div className="str-video__call-stats__card">
-      <div className="str-video__call-stats__card_label">{label}</div>
-      <div className="str-video__call-stats__card_value">{value}</div>
+      <div className="str-video__call-stats__card-content">
+        <div className="str-video__call-stats__card-label">
+          {label}
+          {description && <StatCardExplanation description={description} />}
+        </div>
+        <div className="str-video__call-stats__card-value">{value}</div>
+      </div>
+      {comparison && status && <StatsTag status={status}>{t(status)}</StatsTag>}
     </div>
   );
 };
diff --git a/packages/react-sdk/src/components/CallStats/CallStatsLatencyChart.tsx b/packages/react-sdk/src/components/CallStats/CallStatsLatencyChart.tsx
index 88cc8fbb26..8fd0a06fb8 100644
--- a/packages/react-sdk/src/components/CallStats/CallStatsLatencyChart.tsx
+++ b/packages/react-sdk/src/components/CallStats/CallStatsLatencyChart.tsx
@@ -1,57 +1,86 @@
-import { ResponsiveLine } from '@nivo/line';
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  ChartData,
+  ChartOptions,
+  LinearScale,
+  LineElement,
+  PointElement,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+import { useMemo } from 'react';
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement);
 
 export const CallStatsLatencyChart = (props: {
   values: Array<{ x: number; y: number }>;
 }) => {
   const { values } = props;
   let max = 0;
-  const data = values.map((point) => {
-    const { y } = point;
-    max = Math.max(max, y);
-    return point;
-  });
-  return (
-    <div className="str-video__call-stats-line-chart-container">
-      <ResponsiveLine
-        colors={{ scheme: 'blues' }}
-        data={[
-          {
-            id: 'Latency',
-            data: data,
-          },
-        ]}
-        animate={false}
-        margin={{ top: 10, right: 5, bottom: 5, left: 30 }}
-        enablePoints
-        enableGridX={false}
-        enableGridY
-        enableSlices="x"
-        isInteractive
-        useMesh={false}
-        xScale={{ type: 'point' }}
-        yScale={{
-          type: 'linear',
+  const data: ChartData<'line'> = {
+    labels: values.map((point) => {
+      const date = new Date(point.x * 1000);
+      return `${date.getHours()}:${date.getMinutes()}`;
+    }),
+    datasets: [
+      {
+        data: values.map((point) => {
+          const { y } = point;
+          max = Math.max(max, y);
+          return point;
+        }),
+        borderColor: '#00e2a1',
+        backgroundColor: '#00e2a1',
+      },
+    ],
+  };
+
+  const options = useMemo<ChartOptions<'line'>>(() => {
+    return {
+      maintainAspectRatio: false,
+      animation: {
+        duration: 0,
+      },
+      elements: {
+        line: {
+          borderWidth: 1,
+        },
+        point: {
+          radius: 2,
+        },
+      },
+      scales: {
+        y: {
+          position: 'right',
+          stacked: true,
           min: 0,
-          max: max < 220 ? 220 : max + 30,
-          nice: true,
-        }}
-        theme={{
-          axis: {
-            ticks: {
-              text: {
-                fill: '#FCFCFD',
-              },
-              line: {
-                stroke: '#FCFCFD',
-              },
-            },
+          max: Math.max(180, Math.ceil((max + 10) / 10) * 10),
+          grid: {
+            display: true,
+            color: '#979ca0',
           },
+          ticks: {
+            stepSize: 30,
+          },
+        },
+        x: {
           grid: {
-            line: {
-              strokeWidth: 0.1,
-            },
+            display: false,
+          },
+          ticks: {
+            display: false,
           },
-        }}
+        },
+      },
+    };
+  }, [max]);
+
+  return (
+    <div className="str-video__call-stats-line-chart-container">
+      <Line
+        options={options}
+        data={data}
+        className="str-video__call-stats__latencychart"
       />
     </div>
   );
diff --git a/packages/react-sdk/src/components/DeviceSettings/DeviceSelector.tsx b/packages/react-sdk/src/components/DeviceSettings/DeviceSelector.tsx
index 04ca451ea1..4ac0132fe3 100644
--- a/packages/react-sdk/src/components/DeviceSettings/DeviceSelector.tsx
+++ b/packages/react-sdk/src/components/DeviceSettings/DeviceSelector.tsx
@@ -1,10 +1,12 @@
 import clsx from 'clsx';
-import { ChangeEventHandler } from 'react';
+import { ChangeEventHandler, useCallback } from 'react';
+
+import { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';
 
 type DeviceSelectorOptionProps = {
   id: string;
   label: string;
-  name: string;
+  name?: string;
   selected?: boolean;
   value: string;
   disabled?: boolean;
@@ -44,19 +46,23 @@ const DeviceSelectorOption = ({
     </label>
   );
 };
-export const DeviceSelector = (props: {
+
+export type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';
+
+const DeviceSelectorList = (props: {
   devices: MediaDeviceInfo[];
+  type: DeviceSelectorType;
   selectedDeviceId?: string;
-  title: string;
+  title?: string;
   onChange?: (deviceId: string) => void;
 }) => {
   const {
     devices = [],
     selectedDeviceId: selectedDeviceFromProps,
     title,
+    type,
     onChange,
   } = props;
-  const inputGroupName = title.replace(' ', '-').toLowerCase();
 
   // sometimes the browser (Chrome) will report the system-default device
   // with an id of 'default'. In case when it doesn't, we'll select the first
@@ -71,14 +77,16 @@ export const DeviceSelector = (props: {
 
   return (
     <div className="str-video__device-settings__device-kind">
-      <div className="str-video__device-settings__device-selector-title">
-        {title}
-      </div>
+      {title && (
+        <div className="str-video__device-settings__device-selector-title">
+          {title}
+        </div>
+      )}
       {!devices.length ? (
         <DeviceSelectorOption
-          id={`${inputGroupName}--default`}
+          id={`${type}--default`}
           label="Default"
-          name={inputGroupName}
+          name={type}
           defaultChecked
           value="default"
         />
@@ -86,14 +94,14 @@ export const DeviceSelector = (props: {
         devices.map((device) => {
           return (
             <DeviceSelectorOption
-              id={`${inputGroupName}--${device.deviceId}`}
+              id={`${type}--${device.deviceId}`}
               value={device.deviceId}
               label={device.label}
               key={device.deviceId}
               onChange={(e) => {
                 onChange?.(e.target.value);
               }}
-              name={inputGroupName}
+              name={type}
               selected={
                 device.deviceId === selectedDeviceId || devices.length === 1
               }
@@ -104,3 +112,90 @@ export const DeviceSelector = (props: {
     </div>
   );
 };
+
+const DeviceSelectorDropdown = (props: {
+  devices: MediaDeviceInfo[];
+  selectedDeviceId?: string;
+  title?: string;
+  onChange?: (deviceId: string) => void;
+  visualType?: 'list' | 'dropdown';
+  icon: string;
+  placeholder?: string;
+}) => {
+  const {
+    devices = [],
+    selectedDeviceId: selectedDeviceFromProps,
+    title,
+    onChange,
+    icon,
+  } = props;
+
+  // sometimes the browser (Chrome) will report the system-default device
+  // with an id of 'default'. In case when it doesn't, we'll select the first
+  // available device.
+  let selectedDeviceId = selectedDeviceFromProps;
+  if (
+    devices.length > 0 &&
+    !devices.find((d) => d.deviceId === selectedDeviceId)
+  ) {
+    selectedDeviceId = devices[0].deviceId;
+  }
+
+  const selectedIndex = devices.findIndex(
+    (d) => d.deviceId === selectedDeviceId,
+  );
+
+  const handleSelect = useCallback(
+    (index: number) => {
+      onChange?.(devices[index].deviceId);
+    },
+    [devices, onChange],
+  );
+
+  return (
+    <div className="str-video__device-settings__device-kind">
+      <div className="str-video__device-settings__device-selector-title">
+        {title}
+      </div>
+      <DropDownSelect
+        icon={icon}
+        defaultSelectedIndex={selectedIndex}
+        defaultSelectedLabel={devices[selectedIndex]?.label}
+        handleSelect={handleSelect}
+      >
+        {devices.map((device) => {
+          return (
+            <DropDownSelectOption
+              key={device.deviceId}
+              icon={icon}
+              label={device.label}
+              selected={
+                device.deviceId === selectedDeviceId || devices.length === 1
+              }
+            />
+          );
+        })}
+      </DropDownSelect>
+    </div>
+  );
+};
+
+export const DeviceSelector = (props: {
+  devices: MediaDeviceInfo[];
+  icon: string;
+  type: DeviceSelectorType;
+  selectedDeviceId?: string;
+  title?: string;
+  onChange?: (deviceId: string) => void;
+  visualType?: 'list' | 'dropdown';
+  placeholder?: string;
+}) => {
+  const { visualType = 'list', icon, placeholder, ...rest } = props;
+
+  if (visualType === 'list') {
+    return <DeviceSelectorList {...rest} />;
+  }
+  return (
+    <DeviceSelectorDropdown {...rest} icon={icon} placeholder={placeholder} />
+  );
+};
diff --git a/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorAudio.tsx b/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorAudio.tsx
index 511fcdb696..794a8032ba 100644
--- a/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorAudio.tsx
+++ b/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorAudio.tsx
@@ -1,14 +1,15 @@
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { DeviceSelector } from './DeviceSelector';
 
 export type DeviceSelectorAudioInputProps = {
   title?: string;
+  visualType?: 'list' | 'dropdown';
 };
 
 export const DeviceSelectorAudioInput = ({
   title,
+  visualType,
 }: DeviceSelectorAudioInputProps) => {
-  const { t } = useI18n();
   const { useMicrophoneState } = useCallStateHooks();
   const { microphone, selectedDevice, devices } = useMicrophoneState();
 
@@ -16,22 +17,26 @@ export const DeviceSelectorAudioInput = ({
     <DeviceSelector
       devices={devices || []}
       selectedDeviceId={selectedDevice}
+      type="audioinput"
       onChange={async (deviceId) => {
         await microphone.select(deviceId);
       }}
-      title={title || t('Select a Mic')}
+      title={title}
+      visualType={visualType}
+      icon="mic"
     />
   );
 };
 
 export type DeviceSelectorAudioOutputProps = {
   title?: string;
+  visualType?: 'list' | 'dropdown';
 };
 
 export const DeviceSelectorAudioOutput = ({
   title,
+  visualType,
 }: DeviceSelectorAudioOutputProps) => {
-  const { t } = useI18n();
   const { useSpeakerState } = useCallStateHooks();
   const { speaker, selectedDevice, devices, isDeviceSelectionSupported } =
     useSpeakerState();
@@ -41,11 +46,14 @@ export const DeviceSelectorAudioOutput = ({
   return (
     <DeviceSelector
       devices={devices}
+      type="audiooutput"
       selectedDeviceId={selectedDevice}
       onChange={(deviceId) => {
         speaker.select(deviceId);
       }}
-      title={title || t('Select Speakers')}
+      title={title}
+      visualType={visualType}
+      icon="speaker"
     />
   );
 };
diff --git a/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorVideo.tsx b/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorVideo.tsx
index 109f8df4c5..a3334ce5d4 100644
--- a/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorVideo.tsx
+++ b/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorVideo.tsx
@@ -1,23 +1,29 @@
 import { DeviceSelector } from './DeviceSelector';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 
 export type DeviceSelectorVideoProps = {
   title?: string;
+  visualType?: 'list' | 'dropdown';
 };
 
-export const DeviceSelectorVideo = ({ title }: DeviceSelectorVideoProps) => {
-  const { t } = useI18n();
+export const DeviceSelectorVideo = ({
+  title,
+  visualType,
+}: DeviceSelectorVideoProps) => {
   const { useCameraState } = useCallStateHooks();
   const { camera, devices, selectedDevice } = useCameraState();
 
   return (
     <DeviceSelector
       devices={devices || []}
+      type="videoinput"
       selectedDeviceId={selectedDevice}
       onChange={async (deviceId) => {
         await camera.select(deviceId);
       }}
-      title={title || t('Select a Camera')}
+      title={title}
+      visualType={visualType}
+      icon="camera"
     />
   );
 };
diff --git a/packages/react-sdk/src/components/DeviceSettings/DeviceSettings.tsx b/packages/react-sdk/src/components/DeviceSettings/DeviceSettings.tsx
index 96c35d1be2..e4af3ae71e 100644
--- a/packages/react-sdk/src/components/DeviceSettings/DeviceSettings.tsx
+++ b/packages/react-sdk/src/components/DeviceSettings/DeviceSettings.tsx
@@ -1,44 +1,56 @@
 import { forwardRef } from 'react';
 import { useI18n } from '@stream-io/video-react-bindings';
-import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+import clsx from 'clsx';
+import { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';
 import {
   DeviceSelectorAudioInput,
   DeviceSelectorAudioOutput,
 } from './DeviceSelectorAudio';
 import { DeviceSelectorVideo } from './DeviceSelectorVideo';
 import { IconButton } from '../Button';
-import clsx from 'clsx';
 
-export const DeviceSettings = () => {
+export type DeviceSettingsProps = {
+  visualType?: MenuVisualType;
+};
+
+export const DeviceSettings = ({
+  visualType = MenuVisualType.MENU,
+}: DeviceSettingsProps) => {
   return (
-    <MenuToggle placement="bottom-end" ToggleButton={ToggleMenuButton}>
+    <MenuToggle
+      placement="bottom-end"
+      ToggleButton={ToggleDeviceSettingsMenuButton}
+      visualType={visualType}
+    >
       <Menu />
     </MenuToggle>
   );
 };
 
-const Menu = () => (
-  <div className="str-video__device-settings">
-    <DeviceSelectorVideo />
-    <DeviceSelectorAudioInput />
-    <DeviceSelectorAudioOutput />
-  </div>
-);
-
-const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  ({ menuShown }, ref) => {
-    const { t } = useI18n();
+const Menu = () => {
+  const { t } = useI18n();
+  return (
+    <div className="str-video__device-settings">
+      <DeviceSelectorVideo title={t('Select a Camera')} />
+      <DeviceSelectorAudioInput title={t('Select a Mic')} />
+      <DeviceSelectorAudioOutput title={t('Select Speakers')} />
+    </div>
+  );
+};
 
-    return (
-      <IconButton
-        className={clsx('str-video__device-settings__button', {
-          'str-video__device-settings__button--active': menuShown,
-        })}
-        title={t('Toggle device menu')}
-        icon="device-settings"
-        ref={ref}
-        // tabindex={0}
-      />
-    );
-  },
-);
+const ToggleDeviceSettingsMenuButton = forwardRef<
+  HTMLButtonElement,
+  ToggleMenuButtonProps
+>(function ToggleDeviceSettingsMenuButton({ menuShown }, ref) {
+  const { t } = useI18n();
+  return (
+    <IconButton
+      className={clsx('str-video__device-settings__button', {
+        'str-video__device-settings__button--active': menuShown,
+      })}
+      title={t('Toggle device menu')}
+      icon="device-settings"
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/react-sdk/src/components/DropdownSelect/DropdownSelect.tsx b/packages/react-sdk/src/components/DropdownSelect/DropdownSelect.tsx
new file mode 100644
index 0000000000..6323121543
--- /dev/null
+++ b/packages/react-sdk/src/components/DropdownSelect/DropdownSelect.tsx
@@ -0,0 +1,214 @@
+import {
+  createContext,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import clsx from 'clsx';
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingList,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListItem,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+} from '@floating-ui/react';
+
+import { Icon } from '../Icon';
+
+interface SelectContextValue {
+  activeIndex: number | null;
+  selectedIndex: number | null;
+  getItemProps: ReturnType<typeof useInteractions>['getItemProps'];
+  handleSelect: (index: number | null) => void;
+}
+
+const SelectContext = createContext<SelectContextValue>(
+  {} as SelectContextValue,
+);
+
+const Select = (props: {
+  children: ReactNode;
+  icon?: string;
+  defaultSelectedLabel: string;
+  defaultSelectedIndex: number;
+  handleSelect: (index: number) => void;
+}) => {
+  const {
+    children,
+    icon,
+    defaultSelectedLabel,
+    defaultSelectedIndex,
+    handleSelect: handleSelectProp,
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(
+    defaultSelectedIndex,
+  );
+  const [selectedLabel, setSelectedLabel] = useState<string | null>(
+    defaultSelectedLabel,
+  );
+
+  const { refs, context } = useFloating({
+    placement: 'bottom-start',
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [flip()],
+  });
+
+  const elementsRef = useRef<Array<HTMLElement | null>>([]);
+  const labelsRef = useRef<Array<string | null>>([]);
+
+  const handleSelect = useCallback(
+    (index: number | null) => {
+      setSelectedIndex(index);
+      handleSelectProp(index || 0);
+      setIsOpen(false);
+      if (index !== null) {
+        setSelectedLabel(labelsRef.current[index]);
+      }
+    },
+    [handleSelectProp],
+  );
+
+  const handleTypeaheadMatch = (index: number | null) => {
+    if (isOpen) {
+      setActiveIndex(index);
+    } else {
+      handleSelect(index);
+    }
+  };
+
+  const listNav = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    selectedIndex,
+    onNavigate: setActiveIndex,
+  });
+  const typeahead = useTypeahead(context, {
+    listRef: labelsRef,
+    activeIndex,
+    selectedIndex,
+    onMatch: handleTypeaheadMatch,
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'listbox' });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [listNav, typeahead, click, dismiss, role],
+  );
+
+  const selectContext = useMemo(
+    () => ({
+      activeIndex,
+      selectedIndex,
+      getItemProps,
+      handleSelect,
+    }),
+    [activeIndex, selectedIndex, getItemProps, handleSelect],
+  );
+
+  return (
+    <div className="str-video__dropdown">
+      <div
+        className="str-video__dropdown-selected"
+        ref={refs.setReference}
+        tabIndex={0}
+        {...getReferenceProps()}
+      >
+        <label className="str-video__dropdown-selected__label">
+          {icon && (
+            <Icon className="str-video__dropdown-selected__icon" icon={icon} />
+          )}
+          {selectedLabel}
+        </label>
+        <Icon
+          className="str-video__dropdown-selected__chevron"
+          icon={isOpen ? 'chevron-up' : 'chevron-down'}
+        />
+      </div>
+      <SelectContext.Provider value={selectContext}>
+        {isOpen && (
+          <FloatingFocusManager context={context} modal={false}>
+            <div
+              className="str-video__dropdown-list"
+              ref={refs.setFloating}
+              {...getFloatingProps()}
+            >
+              <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
+                {children}
+              </FloatingList>
+            </div>
+          </FloatingFocusManager>
+        )}
+      </SelectContext.Provider>
+    </div>
+  );
+};
+
+export type DropDownSelectOptionProps = {
+  label: string;
+  selected?: boolean;
+  icon: string;
+};
+
+export const DropDownSelectOption = (props: DropDownSelectOptionProps) => {
+  const { selected, label, icon } = props;
+  const { getItemProps, handleSelect } = useContext(SelectContext);
+  const { ref, index } = useListItem();
+  return (
+    <div
+      className={clsx('str-video__dropdown-option', {
+        'str-video__dropdown-option--selected': selected,
+      })}
+      ref={ref}
+      {...getItemProps({
+        onClick: () => handleSelect(index),
+      })}
+    >
+      <Icon className="str-video__dropdown-icon" icon={icon} />
+      <span className="str-video__dropdown-label">{label}</span>
+    </div>
+  );
+};
+
+export const DropDownSelect = (props: {
+  icon?: string;
+  defaultSelectedLabel: string;
+  defaultSelectedIndex: number;
+  handleSelect: (index: number) => void;
+  children:
+    | ReactElement<DropDownSelectOptionProps>
+    | ReactElement<DropDownSelectOptionProps>[];
+}) => {
+  const {
+    children,
+    icon,
+    handleSelect,
+    defaultSelectedLabel,
+    defaultSelectedIndex,
+  } = props;
+  return (
+    <Select
+      icon={icon}
+      handleSelect={handleSelect}
+      defaultSelectedIndex={defaultSelectedIndex}
+      defaultSelectedLabel={defaultSelectedLabel}
+    >
+      {children}
+    </Select>
+  );
+};
diff --git a/packages/react-sdk/src/components/DropdownSelect/index.ts b/packages/react-sdk/src/components/DropdownSelect/index.ts
new file mode 100644
index 0000000000..5468ab79aa
--- /dev/null
+++ b/packages/react-sdk/src/components/DropdownSelect/index.ts
@@ -0,0 +1 @@
+export * from './DropdownSelect';
diff --git a/packages/react-sdk/src/components/Icon/Icon.tsx b/packages/react-sdk/src/components/Icon/Icon.tsx
index 4704b1f57a..c143ab7dff 100644
--- a/packages/react-sdk/src/components/Icon/Icon.tsx
+++ b/packages/react-sdk/src/components/Icon/Icon.tsx
@@ -2,10 +2,15 @@ import clsx from 'clsx';
 
 export type IconProps = {
   icon: string;
+  className?: string;
 };
 
-export const Icon = ({ icon }: IconProps) => (
+export const Icon = ({ className, icon }: IconProps) => (
   <span
-    className={clsx('str-video__icon', icon && `str-video__icon--${icon}`)}
+    className={clsx(
+      'str-video__icon',
+      icon && `str-video__icon--${icon}`,
+      className,
+    )}
   />
 );
diff --git a/packages/react-sdk/src/components/Menu/GenericMenu.tsx b/packages/react-sdk/src/components/Menu/GenericMenu.tsx
index 1cd4afcc8f..160a561089 100644
--- a/packages/react-sdk/src/components/Menu/GenericMenu.tsx
+++ b/packages/react-sdk/src/components/Menu/GenericMenu.tsx
@@ -1,7 +1,29 @@
-import { ComponentProps, PropsWithChildren } from 'react';
+import { ComponentProps, MouseEvent, PropsWithChildren, useRef } from 'react';
 
-export const GenericMenu = ({ children }: PropsWithChildren) => {
-  return <ul className="str-video__generic-menu">{children}</ul>;
+export const GenericMenu = ({
+  children,
+  onItemClick,
+}: PropsWithChildren<{
+  onItemClick?: (e: MouseEvent) => void;
+}>) => {
+  const ref = useRef<HTMLUListElement>(null);
+  return (
+    <ul
+      className="str-video__generic-menu"
+      ref={ref}
+      onClick={(e) => {
+        if (
+          onItemClick &&
+          e.target !== ref.current &&
+          ref.current?.contains(e.target as Node)
+        ) {
+          onItemClick(e);
+        }
+      }}
+    >
+      {children}
+    </ul>
+  );
 };
 
 export const GenericMenuButtonItem = ({
diff --git a/packages/react-sdk/src/components/Menu/MenuToggle.tsx b/packages/react-sdk/src/components/Menu/MenuToggle.tsx
index 08f13c1f80..2d2464a3fe 100644
--- a/packages/react-sdk/src/components/Menu/MenuToggle.tsx
+++ b/packages/react-sdk/src/components/Menu/MenuToggle.tsx
@@ -1,11 +1,20 @@
 import {
   ComponentType,
+  createContext,
+  ForwardedRef,
   PropsWithChildren,
+  useContext,
   useEffect,
+  useMemo,
   useState,
-  ForwardedRef,
 } from 'react';
-import { Placement, Strategy } from '@floating-ui/react';
+import {
+  FloatingOverlay,
+  FloatingPortal,
+  Placement,
+  Strategy,
+  UseFloatingReturn,
+} from '@floating-ui/react';
 
 import { useFloatingUIPreset } from '../../hooks';
 
@@ -14,16 +23,66 @@ export type ToggleMenuButtonProps<E extends HTMLElement = HTMLButtonElement> = {
   ref: ForwardedRef<E>;
 };
 
+export enum MenuVisualType {
+  PORTAL = 'portal',
+  MENU = 'menu',
+}
+
 export type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{
   ToggleButton: ComponentType<ToggleMenuButtonProps<E>>;
   placement?: Placement;
   strategy?: Strategy;
+  offset?: number;
+  visualType?: MenuVisualType;
 }>;
 
+export type MenuContextValue = {
+  close?: () => void;
+};
+
+/**
+ * Used to provide utility APIs to the components rendered inside the portal.
+ */
+const MenuContext = createContext<MenuContextValue>({});
+
+/**
+ * Access to the closes MenuContext.
+ */
+export const useMenuContext = (): MenuContextValue => {
+  return useContext(MenuContext);
+};
+
+const MenuPortal = ({
+  children,
+  refs,
+}: PropsWithChildren<{
+  refs: UseFloatingReturn['refs'];
+}>) => {
+  const portalId = useMemo(
+    () => `str-video-portal-${Math.random().toString(36).substring(2, 9)}`,
+    [],
+  );
+
+  return (
+    <>
+      <div id={portalId} className="str-video__portal" />
+      <FloatingOverlay>
+        <FloatingPortal id={portalId}>
+          <div className="str-video__portal-content" ref={refs.setFloating}>
+            {children}
+          </div>
+        </FloatingPortal>
+      </FloatingOverlay>
+    </>
+  );
+};
+
 export const MenuToggle = <E extends HTMLElement>({
   ToggleButton,
   placement = 'top-start',
   strategy = 'absolute',
+  offset,
+  visualType = MenuVisualType.MENU,
   children,
 }: MenuToggleProps<E>) => {
   const [menuShown, setMenuShown] = useState(false);
@@ -31,6 +90,7 @@ export const MenuToggle = <E extends HTMLElement>({
   const { floating, domReference, refs, x, y } = useFloatingUIPreset({
     placement,
     strategy,
+    offset,
   });
 
   useEffect(() => {
@@ -62,18 +122,23 @@ export const MenuToggle = <E extends HTMLElement>({
   return (
     <>
       {menuShown && (
-        <div
-          className="str-video__menu-container"
-          ref={refs.setFloating}
-          style={{
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
-            overflowY: 'auto',
-          }}
-        >
-          {children}
-        </div>
+        <MenuContext.Provider value={{ close: () => setMenuShown(false) }}>
+          {visualType === MenuVisualType.PORTAL ? (
+            <MenuPortal refs={refs} children={children} />
+          ) : visualType === MenuVisualType.MENU ? (
+            <div
+              className="str-video__menu-container"
+              ref={refs.setFloating}
+              style={{
+                position: strategy,
+                top: y ?? 0,
+                left: x ?? 0,
+                overflowY: 'auto',
+              }}
+              children={children}
+            />
+          ) : null}
+        </MenuContext.Provider>
       )}
       <ToggleButton menuShown={menuShown} ref={refs.setReference} />
     </>
diff --git a/packages/react-sdk/src/components/Notification/Notification.tsx b/packages/react-sdk/src/components/Notification/Notification.tsx
index b5173a7b47..b927a75036 100644
--- a/packages/react-sdk/src/components/Notification/Notification.tsx
+++ b/packages/react-sdk/src/components/Notification/Notification.tsx
@@ -10,6 +10,7 @@ export type NotificationProps = {
   resetIsVisible?: () => void;
   placement?: Placement;
   iconClassName?: string | null;
+  close?: () => void;
 };
 
 export const Notification = (props: PropsWithChildren<NotificationProps>) => {
@@ -21,6 +22,7 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
     resetIsVisible,
     placement = 'top',
     iconClassName = 'str-video__notification__icon',
+    close,
   } = props;
 
   const { refs, x, y, strategy } = useFloatingUIPreset({
@@ -53,6 +55,12 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
         >
           {iconClassName && <i className={iconClassName} />}
           <span className="str-video__notification__message">{message}</span>
+          {close ? (
+            <i
+              className="str-video__icon str-video__icon--close str-video__notification__close"
+              onClick={close}
+            />
+          ) : null}
         </div>
       )}
       {children}
diff --git a/packages/react-sdk/src/components/Notification/RecordingInProgressNotification.tsx b/packages/react-sdk/src/components/Notification/RecordingInProgressNotification.tsx
new file mode 100644
index 0000000000..72b01e9921
--- /dev/null
+++ b/packages/react-sdk/src/components/Notification/RecordingInProgressNotification.tsx
@@ -0,0 +1,40 @@
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { useToggleCallRecording } from '../../hooks';
+import { Notification } from './Notification';
+
+export type RecordingInProgressNotificationProps = {
+  text?: string;
+};
+
+export const RecordingInProgressNotification = ({
+  children,
+  text,
+}: PropsWithChildren<RecordingInProgressNotificationProps>) => {
+  const { t } = useI18n();
+  const { isCallRecordingInProgress } = useToggleCallRecording();
+
+  const [isVisible, setVisible] = useState(false);
+
+  const message = text ?? t('Recording in progress...');
+
+  useEffect(() => {
+    if (isCallRecordingInProgress) {
+      setVisible(true);
+    } else {
+      setVisible(false);
+    }
+  }, [isCallRecordingInProgress]);
+
+  return (
+    <Notification
+      message={message}
+      iconClassName="str-video__icon str-video__icon--recording-on"
+      isVisible={isVisible}
+      placement="top-start"
+      close={() => setVisible(false)}
+    >
+      {children}
+    </Notification>
+  );
+};
diff --git a/packages/react-sdk/src/components/Notification/SpeakingWhileMutedNotification.tsx b/packages/react-sdk/src/components/Notification/SpeakingWhileMutedNotification.tsx
index 32b15e6430..f43a60c8c6 100644
--- a/packages/react-sdk/src/components/Notification/SpeakingWhileMutedNotification.tsx
+++ b/packages/react-sdk/src/components/Notification/SpeakingWhileMutedNotification.tsx
@@ -1,4 +1,6 @@
 import { PropsWithChildren } from 'react';
+import { Placement } from '@floating-ui/react';
+
 import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
 import { Notification } from './Notification';
 
@@ -7,11 +9,13 @@ export type SpeakingWhileMutedNotificationProps = {
    * Text message displayed by the notification.
    */
   text?: string;
+  placement?: Placement;
 };
 
 export const SpeakingWhileMutedNotification = ({
   children,
   text,
+  placement,
 }: PropsWithChildren<SpeakingWhileMutedNotificationProps>) => {
   const { useMicrophoneState } = useCallStateHooks();
   const { isSpeakingWhileMuted } = useMicrophoneState();
@@ -19,7 +23,11 @@ export const SpeakingWhileMutedNotification = ({
 
   const message = text ?? t('You are muted. Unmute to speak.');
   return (
-    <Notification message={message} isVisible={isSpeakingWhileMuted}>
+    <Notification
+      message={message}
+      isVisible={isSpeakingWhileMuted}
+      placement={placement || 'top-start'}
+    >
       {children}
     </Notification>
   );
diff --git a/packages/react-sdk/src/components/Notification/index.ts b/packages/react-sdk/src/components/Notification/index.ts
index 2f3ea7382d..0f5306c4b4 100644
--- a/packages/react-sdk/src/components/Notification/index.ts
+++ b/packages/react-sdk/src/components/Notification/index.ts
@@ -1,3 +1,4 @@
 export * from './Notification';
 export * from './PermissionNotification';
 export * from './SpeakingWhileMutedNotification';
+export * from './RecordingInProgressNotification';
diff --git a/packages/react-sdk/src/components/Permissions/PermissionRequests.tsx b/packages/react-sdk/src/components/Permissions/PermissionRequests.tsx
index 21229e8152..7d094d8864 100644
--- a/packages/react-sdk/src/components/Permissions/PermissionRequests.tsx
+++ b/packages/react-sdk/src/components/Permissions/PermissionRequests.tsx
@@ -138,7 +138,7 @@ export type PermissionRequestListProps = ComponentProps<'div'> & {
 export const PermissionRequestList = forwardRef<
   HTMLDivElement,
   PermissionRequestListProps
->((props, ref) => {
+>(function PermissionRequestList(props, ref) {
   const { permissionRequests, handleUpdatePermission, ...rest } = props;
 
   const { t } = useI18n();
diff --git a/packages/react-sdk/src/components/Search/hooks/useSearch.ts b/packages/react-sdk/src/components/Search/hooks/useSearch.ts
index 3eff413921..bf1484e679 100644
--- a/packages/react-sdk/src/components/Search/hooks/useSearch.ts
+++ b/packages/react-sdk/src/components/Search/hooks/useSearch.ts
@@ -25,7 +25,11 @@ export const useSearch = <T>({
   const [searchQueryInProgress, setSearchQueryInProgress] = useState(false);
 
   useEffect(() => {
-    if (!searchQuery.length) return setSearchResults([]);
+    if (!searchQuery.length) {
+      setSearchQueryInProgress(false);
+      setSearchResults([]);
+      return;
+    }
 
     setSearchQueryInProgress(true);
 
diff --git a/packages/react-sdk/src/components/index.ts b/packages/react-sdk/src/components/index.ts
index c6f41bec5e..10d13e0dfb 100644
--- a/packages/react-sdk/src/components/index.ts
+++ b/packages/react-sdk/src/components/index.ts
@@ -3,9 +3,11 @@ export * from './Button';
 export * from './CallControls';
 export * from './CallParticipantsList';
 export * from './CallPreview';
+export * from './CallStats';
 export * from './CallRecordingList';
 export * from './CallStats';
 export * from './DeviceSettings';
+export * from './DropdownSelect';
 export * from './Icon';
 export * from './LoadingIndicator';
 export * from './Menu';
diff --git a/packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx b/packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx
index 611f3f9224..156e6284db 100644
--- a/packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx
+++ b/packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx
@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { ComponentType, forwardRef } from 'react';
 import { Placement } from '@floating-ui/react';
 import { SfuModels } from '@stream-io/video-client';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
@@ -9,9 +9,9 @@ import {
   IconButton,
   MenuToggle,
   Notification,
-  ParticipantActionsContextMenu,
   ToggleMenuButtonProps,
 } from '../../../components';
+import { ParticipantActionsContextMenu as DefaultParticipantActionsContextMenu } from './ParticipantActionsContextMenu';
 import { Reaction } from '../../../components/Reaction';
 import { useParticipantViewContext } from './ParticipantViewContext';
 
@@ -28,10 +28,14 @@ export type DefaultParticipantViewUIProps = {
    * Option to show/hide menu button component
    */
   showMenuButton?: boolean;
+  /**
+   * Custom component to render the context menu
+   */
+  ParticipantActionsContextMenu?: ComponentType;
 };
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  (props, ref) => {
+  function ToggleButton(props, ref) {
     return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
   },
 );
@@ -62,11 +66,11 @@ export const DefaultScreenShareOverlay = () => {
 
 export const DefaultParticipantViewUI = ({
   indicatorsVisible = true,
-  menuPlacement = 'bottom-end',
+  menuPlacement = 'bottom-start',
   showMenuButton = true,
+  ParticipantActionsContextMenu = DefaultParticipantActionsContextMenu,
 }: DefaultParticipantViewUIProps) => {
-  const { participant, participantViewElement, trackType, videoElement } =
-    useParticipantViewContext();
+  const { participant, trackType } = useParticipantViewContext();
   const { publishedTracks } = participant;
 
   const hasScreenShare = publishedTracks.includes(
@@ -94,11 +98,7 @@ export const DefaultParticipantViewUI = ({
           placement={menuPlacement}
           ToggleButton={ToggleButton}
         >
-          <ParticipantActionsContextMenu
-            participantViewElement={participantViewElement}
-            participant={participant}
-            videoElement={videoElement}
-          />
+          <ParticipantActionsContextMenu />
         </MenuToggle>
       )}
       <Reaction participant={participant} />
@@ -112,7 +112,6 @@ export const ParticipantDetails = ({
 }: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => {
   const { participant } = useParticipantViewContext();
   const {
-    isDominantSpeaker,
     isLocalParticipant,
     connectionQuality,
     publishedTracks,
@@ -133,50 +132,65 @@ export const ParticipantDetails = ({
   const canUnpin = !!pin && pin.isLocalPin;
 
   return (
-    <div className="str-video__participant-details">
-      <span className="str-video__participant-details__name">
-        {name || userId}
-        {indicatorsVisible && isDominantSpeaker && (
-          <span
-            className="str-video__participant-details__name--dominant_speaker"
-            title={t('Dominant speaker')}
-          />
-        )}
-        {indicatorsVisible && (
-          <Notification
-            isVisible={
-              isLocalParticipant &&
-              connectionQuality === SfuModels.ConnectionQuality.POOR
-            }
-            message={t('Poor connection quality')}
-          >
-            {connectionQualityAsString && (
-              <span
-                className={clsx(
-                  'str-video__participant-details__connection-quality',
-                  `str-video__participant-details__connection-quality--${connectionQualityAsString}`,
-                )}
-                title={connectionQualityAsString}
-              />
-            )}
-          </Notification>
-        )}
-        {indicatorsVisible && !hasAudio && (
-          <span className="str-video__participant-details__name--audio-muted" />
-        )}
-        {indicatorsVisible && !hasVideo && (
-          <span className="str-video__participant-details__name--video-muted" />
-        )}
-        {indicatorsVisible && canUnpin && (
-          // TODO: remove this monstrosity once we have a proper design
-          <span
-            title={t('Unpin')}
-            onClick={() => call?.unpin(sessionId)}
-            style={{ cursor: 'pointer' }}
-            className="str-video__participant-details__name--pinned"
-          />
-        )}
-      </span>
-    </div>
+    <>
+      <div className="str-video__participant-details">
+        <span className="str-video__participant-details__name">
+          {name || userId}
+
+          {indicatorsVisible && !hasAudio && (
+            <span className="str-video__participant-details__name--audio-muted" />
+          )}
+          {indicatorsVisible && !hasVideo && (
+            <span className="str-video__participant-details__name--video-muted" />
+          )}
+          {indicatorsVisible && canUnpin && (
+            // TODO: remove this monstrosity once we have a proper design
+            <span
+              title={t('Unpin')}
+              onClick={() => call?.unpin(sessionId)}
+              className="str-video__participant-details__name--pinned"
+            />
+          )}
+          {indicatorsVisible && <SpeechIndicator />}
+        </span>
+      </div>
+      {indicatorsVisible && (
+        <Notification
+          isVisible={
+            isLocalParticipant &&
+            connectionQuality === SfuModels.ConnectionQuality.POOR
+          }
+          message={t('Poor connection quality')}
+        >
+          {connectionQualityAsString && (
+            <span
+              className={clsx(
+                'str-video__participant-details__connection-quality',
+                `str-video__participant-details__connection-quality--${connectionQualityAsString}`,
+              )}
+              title={connectionQualityAsString}
+            />
+          )}
+        </Notification>
+      )}
+    </>
+  );
+};
+
+export const SpeechIndicator = () => {
+  const { participant } = useParticipantViewContext();
+  const { isSpeaking, isDominantSpeaker } = participant;
+  return (
+    <span
+      className={clsx(
+        'str-video__speech-indicator',
+        isSpeaking && 'str-video__speech-indicator--speaking',
+        isDominantSpeaker && 'str-video__speech-indicator--dominant',
+      )}
+    >
+      <span className="str-video__speech-indicator__bar" />
+      <span className="str-video__speech-indicator__bar" />
+      <span className="str-video__speech-indicator__bar" />
+    </span>
   );
 };
diff --git a/packages/react-sdk/src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx b/packages/react-sdk/src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx
new file mode 100644
index 0000000000..e650599af4
--- /dev/null
+++ b/packages/react-sdk/src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx
@@ -0,0 +1,241 @@
+import { useEffect, useState } from 'react';
+import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
+import { OwnCapability, SfuModels } from '@stream-io/video-client';
+import { useParticipantViewContext } from './ParticipantViewContext';
+import {
+  GenericMenu,
+  GenericMenuButtonItem,
+  Icon,
+  useMenuContext,
+} from '../../../components';
+
+export const ParticipantActionsContextMenu = () => {
+  const { participant, participantViewElement, videoElement } =
+    useParticipantViewContext();
+  const [fullscreenModeOn, setFullscreenModeOn] = useState(
+    !!document.fullscreenElement,
+  );
+  const [pictureInPictureElement, setPictureInPictureElement] = useState(
+    document.pictureInPictureElement,
+  );
+  const call = useCall();
+  const { t } = useI18n();
+
+  const { pin, publishedTracks, sessionId, userId } = participant;
+
+  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
+  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+  const hasScreenShare = publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE,
+  );
+  const hasScreenShareAudio = publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE_AUDIO,
+  );
+
+  const blockUser = () => call?.blockUser(userId);
+  const muteAudio = () => call?.muteUser(userId, 'audio');
+  const muteVideo = () => call?.muteUser(userId, 'video');
+  const muteScreenShare = () => call?.muteUser(userId, 'screenshare');
+  const muteScreenShareAudio = () =>
+    call?.muteUser(userId, 'screenshare_audio');
+
+  const grantPermission = (permission: string) => () => {
+    call?.updateUserPermissions({
+      user_id: userId,
+      grant_permissions: [permission],
+    });
+  };
+
+  const revokePermission = (permission: string) => () => {
+    call?.updateUserPermissions({
+      user_id: userId,
+      revoke_permissions: [permission],
+    });
+  };
+
+  const toggleParticipantPin = () => {
+    if (pin) {
+      call?.unpin(sessionId);
+    } else {
+      call?.pin(sessionId);
+    }
+  };
+
+  const pinForEveryone = () => {
+    call
+      ?.pinForEveryone({
+        user_id: userId,
+        session_id: sessionId,
+      })
+      .catch((err) => {
+        console.error(`Failed to pin participant ${userId}`, err);
+      });
+  };
+
+  const unpinForEveryone = () => {
+    call
+      ?.unpinForEveryone({
+        user_id: userId,
+        session_id: sessionId,
+      })
+      .catch((err) => {
+        console.error(`Failed to unpin participant ${userId}`, err);
+      });
+  };
+
+  const toggleFullscreenMode = () => {
+    if (!fullscreenModeOn) {
+      return participantViewElement?.requestFullscreen().catch(console.error);
+    }
+    return document.exitFullscreen().catch(console.error);
+  };
+
+  useEffect(() => {
+    // handles the case when fullscreen mode is toggled externally,
+    // e.g., by pressing ESC key or some other keyboard shortcut
+    const handleFullscreenChange = () => {
+      setFullscreenModeOn(!!document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!videoElement) return;
+
+    const handlePiP = () => {
+      setPictureInPictureElement(document.pictureInPictureElement);
+    };
+
+    videoElement.addEventListener('enterpictureinpicture', handlePiP);
+    videoElement.addEventListener('leavepictureinpicture', handlePiP);
+
+    return () => {
+      videoElement.removeEventListener('enterpictureinpicture', handlePiP);
+      videoElement.removeEventListener('leavepictureinpicture', handlePiP);
+    };
+  }, [videoElement]);
+
+  const togglePictureInPicture = () => {
+    if (videoElement && pictureInPictureElement !== videoElement) {
+      return videoElement
+        .requestPictureInPicture()
+        .catch(console.error) as Promise<void>;
+    }
+
+    return document.exitPictureInPicture().catch(console.error);
+  };
+
+  const { close } = useMenuContext() || {};
+  return (
+    <GenericMenu onItemClick={close}>
+      <GenericMenuButtonItem
+        onClick={toggleParticipantPin}
+        disabled={pin && !pin.isLocalPin}
+      >
+        <Icon icon="pin" />
+        {pin ? t('Unpin') : t('Pin')}
+      </GenericMenuButtonItem>
+      <Restricted requiredGrants={[OwnCapability.PIN_FOR_EVERYONE]}>
+        <GenericMenuButtonItem
+          onClick={pinForEveryone}
+          disabled={pin && !pin.isLocalPin}
+        >
+          <Icon icon="pin" />
+          {t('Pin for everyone')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={unpinForEveryone}
+          disabled={!pin || pin.isLocalPin}
+        >
+          <Icon icon="pin" />
+          {t('Unpin for everyone')}
+        </GenericMenuButtonItem>
+      </Restricted>
+      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>
+        <GenericMenuButtonItem onClick={blockUser}>
+          <Icon icon="not-allowed" />
+          {t('Block')}
+        </GenericMenuButtonItem>
+      </Restricted>
+      <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
+        {hasVideo && (
+          <GenericMenuButtonItem onClick={muteVideo}>
+            <Icon icon="camera-off-outline" />
+            {t('Turn off video')}
+          </GenericMenuButtonItem>
+        )}
+        {hasScreenShare && (
+          <GenericMenuButtonItem onClick={muteScreenShare}>
+            <Icon icon="screen-share-off" />
+            {t('Turn off screen share')}
+          </GenericMenuButtonItem>
+        )}
+        {hasAudio && (
+          <GenericMenuButtonItem onClick={muteAudio}>
+            <Icon icon="no-audio" />
+            {t('Mute audio')}
+          </GenericMenuButtonItem>
+        )}
+        {hasScreenShareAudio && (
+          <GenericMenuButtonItem onClick={muteScreenShareAudio}>
+            <Icon icon="no-audio" />
+            {t('Mute screen share audio')}
+          </GenericMenuButtonItem>
+        )}
+      </Restricted>
+      {participantViewElement && (
+        <GenericMenuButtonItem onClick={toggleFullscreenMode}>
+          {t('{{ direction }} fullscreen', {
+            direction: fullscreenModeOn ? t('Leave') : t('Enter'),
+          })}
+        </GenericMenuButtonItem>
+      )}
+      {videoElement && document.pictureInPictureEnabled && (
+        <GenericMenuButtonItem onClick={togglePictureInPicture}>
+          {t('{{ direction }} picture-in-picture', {
+            direction:
+              pictureInPictureElement === videoElement
+                ? t('Leave')
+                : t('Enter'),
+          })}
+        </GenericMenuButtonItem>
+      )}
+      <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>
+        <GenericMenuButtonItem
+          onClick={grantPermission(OwnCapability.SEND_AUDIO)}
+        >
+          {t('Allow audio')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={grantPermission(OwnCapability.SEND_VIDEO)}
+        >
+          {t('Allow video')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={grantPermission(OwnCapability.SCREENSHARE)}
+        >
+          {t('Allow screen sharing')}
+        </GenericMenuButtonItem>
+
+        <GenericMenuButtonItem
+          onClick={revokePermission(OwnCapability.SEND_AUDIO)}
+        >
+          {t('Disable audio')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={revokePermission(OwnCapability.SEND_VIDEO)}
+        >
+          {t('Disable video')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={revokePermission(OwnCapability.SCREENSHARE)}
+        >
+          {t('Disable screen sharing')}
+        </GenericMenuButtonItem>
+      </Restricted>
+    </GenericMenu>
+  );
+};
diff --git a/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx b/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
index 5cf8445ee9..9cdeb9f577 100644
--- a/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
+++ b/packages/react-sdk/src/core/components/ParticipantView/ParticipantView.tsx
@@ -62,7 +62,7 @@ export type ParticipantViewProps = {
 } & Pick<VideoProps, 'VideoPlaceholder'>;
 
 export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
-  (
+  function ParticipantView(
     {
       participant,
       trackType = 'videoTrack',
@@ -73,7 +73,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
       ParticipantViewUI = DefaultParticipantViewUI as ComponentType,
     },
     ref,
-  ) => {
+  ) {
     const {
       isLocalParticipant,
       isSpeaking,
diff --git a/packages/react-sdk/src/core/components/ParticipantView/ParticipantViewContext.tsx b/packages/react-sdk/src/core/components/ParticipantView/ParticipantViewContext.tsx
index 8e29ac5446..d425c95ce1 100644
--- a/packages/react-sdk/src/core/components/ParticipantView/ParticipantViewContext.tsx
+++ b/packages/react-sdk/src/core/components/ParticipantView/ParticipantViewContext.tsx
@@ -4,9 +4,9 @@ import { ParticipantViewProps } from './ParticipantView';
 export type ParticipantViewContextValue = Required<
   Pick<ParticipantViewProps, 'participant' | 'trackType'>
 > & {
-  participantViewElement: HTMLDivElement | null;
-  videoElement: HTMLVideoElement | null;
-  videoPlaceholderElement: HTMLDivElement | null;
+  participantViewElement?: HTMLDivElement | null;
+  videoElement?: HTMLVideoElement | null;
+  videoPlaceholderElement?: HTMLDivElement | null;
 };
 
 export const ParticipantViewContext = createContext<
diff --git a/packages/react-sdk/src/core/components/ParticipantView/index.ts b/packages/react-sdk/src/core/components/ParticipantView/index.ts
index 972cce4d75..bbf285cd6c 100644
--- a/packages/react-sdk/src/core/components/ParticipantView/index.ts
+++ b/packages/react-sdk/src/core/components/ParticipantView/index.ts
@@ -1,3 +1,4 @@
+export * from './ParticipantActionsContextMenu';
 export * from './ParticipantView';
 export * from './ParticipantViewContext';
 export * from './DefaultParticipantViewUI';
diff --git a/packages/react-sdk/src/core/components/Video/BaseVideo.tsx b/packages/react-sdk/src/core/components/Video/BaseVideo.tsx
index 2befee39b9..8d5f2ae5fc 100644
--- a/packages/react-sdk/src/core/components/Video/BaseVideo.tsx
+++ b/packages/react-sdk/src/core/components/Video/BaseVideo.tsx
@@ -12,7 +12,7 @@ export type BaseVideoProps = ComponentPropsWithRef<'video'> & {
  * (`srcObject`) to reactively handle stream changes
  */
 export const BaseVideo = forwardRef<HTMLVideoElement, BaseVideoProps>(
-  ({ stream, ...rest }, ref) => {
+  function BaseVideo({ stream, ...rest }, ref) {
     const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
       null,
     );
diff --git a/packages/react-sdk/src/core/components/Video/DefaultVideoPlaceholder.tsx b/packages/react-sdk/src/core/components/Video/DefaultVideoPlaceholder.tsx
index a210cc8989..af377572bd 100644
--- a/packages/react-sdk/src/core/components/Video/DefaultVideoPlaceholder.tsx
+++ b/packages/react-sdk/src/core/components/Video/DefaultVideoPlaceholder.tsx
@@ -9,7 +9,7 @@ export type VideoPlaceholderProps = {
 export const DefaultVideoPlaceholder = forwardRef<
   HTMLDivElement,
   VideoPlaceholderProps
->(({ participant, style }, ref) => {
+>(function DefaultVideoPlaceholder({ participant, style }, ref) {
   const { t } = useI18n();
   const [error, setError] = useState(false);
   const name = participant.name || participant.userId;
@@ -17,11 +17,11 @@ export const DefaultVideoPlaceholder = forwardRef<
     <div className="str-video__video-placeholder" style={style} ref={ref}>
       {(!participant.image || error) &&
         (name ? (
-          <div className="str-video__video-placeholder__initials-fallback">
-            <div>{name[0]}</div>
-          </div>
+          <InitialsFallback name={name} />
         ) : (
-          <div>{t('Video is disabled')}</div>
+          <div className="str-video__video-placeholder__no-video-label">
+            {t('Video is disabled')}
+          </div>
         ))}
       {participant.image && !error && (
         <img
@@ -34,3 +34,17 @@ export const DefaultVideoPlaceholder = forwardRef<
     </div>
   );
 });
+
+const InitialsFallback = (props: { name: string }) => {
+  const { name } = props;
+  const initials = name
+    .split(' ')
+    .slice(0, 2)
+    .map((n) => n[0])
+    .join('');
+  return (
+    <div className="str-video__video-placeholder__initials-fallback">
+      {initials}
+    </div>
+  );
+};
diff --git a/packages/react-sdk/src/hooks/useFloatingUIPreset.ts b/packages/react-sdk/src/hooks/useFloatingUIPreset.ts
index 44e3838c35..514ab3fd55 100644
--- a/packages/react-sdk/src/hooks/useFloatingUIPreset.ts
+++ b/packages/react-sdk/src/hooks/useFloatingUIPreset.ts
@@ -12,7 +12,8 @@ import {
 export const useFloatingUIPreset = ({
   placement,
   strategy,
-}: Pick<UseFloatingData, 'placement' | 'strategy'>) => {
+  offset: offsetInPx = 10,
+}: Pick<UseFloatingData, 'placement' | 'strategy'> & { offset?: number }) => {
   const {
     refs,
     x,
@@ -23,7 +24,7 @@ export const useFloatingUIPreset = ({
     placement,
     strategy,
     middleware: [
-      offset(10),
+      offset(offsetInPx),
       shift(),
       flip(),
       size({
diff --git a/packages/react-sdk/src/translations/en.json b/packages/react-sdk/src/translations/en.json
index d2cf47ec5c..3930336560 100644
--- a/packages/react-sdk/src/translations/en.json
+++ b/packages/react-sdk/src/translations/en.json
@@ -24,6 +24,7 @@
   "Waiting for recording to start...": "Waiting for recording to start...",
   "Record call": "Record call",
   "Reactions": "Reactions",
+  "Statistics": "Statistics",
   "You can now share your screen.": "You can now share your screen.",
   "Awaiting for an approval to share screen.": "Awaiting for an approval to share screen.",
   "You can no longer share your screen.": "You can no longer share your screen.",
@@ -37,6 +38,8 @@
   "Me": "Me",
   "Unknown": "Unknown",
   "Toggle device menu": "Toggle device menu",
+  "Call Recordings": "Call Recordings",
+  "Refresh": "Refresh",
 
   "You are presenting your screen": "You are presenting your screen",
   "Stop Screen Sharing": "Stop Screen Sharing",
@@ -69,6 +72,8 @@
   "Disable screen sharing": "Disable screen sharing",
   "Enter": "Enter",
   "Leave": "Leave",
+  "Leave call": "Leave call",
+  "End call for all": "End call for all",
   "{{ direction }} fullscreen": "{{ direction }} fullscreen",
   "{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
 
diff --git a/packages/styling/index.scss b/packages/styling/index.scss
index 6cd92be0d1..307ffd0a82 100644
--- a/packages/styling/index.scss
+++ b/packages/styling/index.scss
@@ -13,6 +13,7 @@
 @import 'src/CallRecodingList';
 @import 'src/CallStats';
 @import 'src/DeviceSettings';
+@import 'src/DropdownSelect';
 @import 'src/Icon';
 @import 'src/LoadingIndicator';
 @import 'src/Menu';
diff --git a/packages/styling/package.json b/packages/styling/package.json
index 0c2d9ae991..46ee9121f5 100644
--- a/packages/styling/package.json
+++ b/packages/styling/package.json
@@ -10,6 +10,6 @@
   },
   "devDependencies": {
     "rimraf": "^5.0.5",
-    "sass": "^1.69.3"
+    "sass": "^1.69.5"
   }
 }
diff --git a/packages/styling/src/Button/Button-layout.scss b/packages/styling/src/Button/Button-layout.scss
index 68dee2e495..be107c3d47 100644
--- a/packages/styling/src/Button/Button-layout.scss
+++ b/packages/styling/src/Button/Button-layout.scss
@@ -1,24 +1,67 @@
-.str-video__composite-button {
+.str-video__button {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 0.25rem;
-  height: 100%;
+  justify-content: center;
+  border-radius: var(--str-video__border-radius-md);
+  padding: var(--str-video__spacing-sm) var(--str-video__spacing-lg);
+  text-align: center;
+  min-width: 120px;
+  width: 100%;
+  font-size: var(--str-video__font-size-md);
+  font-weight: 500;
+  border: 1px solid transparent;
+  color: var(--str-video__text-color1);
+
+  background-color: var(--str-video__button-primary-base);
+
+  &:hover {
+    background-color: var(--str-video__button-primary-hover);
+    cursor: pointer;
+  }
+
+  &__icon {
+    margin-right: var(--str-video__spacing-xs);
+    height: 16px;
+    background-color: var(--str-video__text-color1);
+  }
+
+  &:disabled {
+    background-color: var(--str-video__button-default-disabled);
+    cursor: not-allowed;
+  }
+}
+
+.str-video__composite-button {
+  &--caption {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
 
   .str-video__composite-button__button-group {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    height: 38px;
 
-    .str-video__call-controls__button {
-      padding: 0;
+    .str-video__composite-button__button {
+      all: unset;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      height: calc(38px - 1rem);
+      padding: 0.5rem;
+
+      &:hover {
+        cursor: pointer;
+      }
     }
 
-    .str-video__call-controls__button.str-video__menu-toggle-button {
-      height: 100%;
-      padding-inline: 2px;
+    .str-video__menu-toggle-button {
+      padding: 0;
+      margin-left: -30px;
+      margin-right: 8px;
     }
 
     .str-video__loading-indicator__icon {
@@ -28,32 +71,30 @@
       mask-size: 1.25rem;
     }
   }
+
+  &.str-video__composite-button--menu .str-video__composite-button__button {
+    padding-right: 2.5rem;
+  }
 }
 
 .str-video__call-controls__button {
   padding: 0.5rem;
 
-  &--variant-danger, &--variant-success {
+  &--variant-danger,
+  &--variant-success {
     padding: 0.5rem 1rem;
   }
 
-  // FIXME: ask Jared for better styling
   &[disabled] {
     cursor: not-allowed;
-    opacity: 0.7;
   }
 
-  .str-video__icon {
-    &--caret-down {
-      width: 0.5rem;
-      height: 0.5rem;
-    }
-
-    &--caret-up {
-      width: 0.5rem;
-      height: 0.5rem;
-    }
+  &:hover,
+  &:hover > *:hover {
+    cursor: pointer;
+  }
 
+  .str-video__icon {
     &--call-end {
       width: 1.5rem;
       height: 1.5rem;
@@ -77,3 +118,7 @@
     --str-video__participant-list-header__close-button--background-color
   );
 }
+
+.str-video__call-recording-list-item__action-button {
+  border: none;
+}
diff --git a/packages/styling/src/Button/Button-theme.scss b/packages/styling/src/Button/Button-theme.scss
index 15db9c05c6..b8b871e558 100644
--- a/packages/styling/src/Button/Button-theme.scss
+++ b/packages/styling/src/Button/Button-theme.scss
@@ -8,29 +8,91 @@
 
   /* The background color of the component */
   --str-video__composite-button__button-group--background-color: var(
-    --str-video__background-color1
+    --str-video__button-primary-base
+  );
+
+  /* The active background color of the component */
+  --str-video__composite-button__button-group-active--background-color: var(
+    --str-video__button-primary-active
+  );
+
+  --str-video__composite-button__button-group-active-primary--background-color: var(
+    --str-video__button-primary-active
+  );
+
+  --str-video__composite-button__button-group-active-secondary--background-color: var(
+    --str-video__button-secondary-active
+  );
+
+  --str-video__composite-button__button-group-active-secondary-hover--background-color: var(
+    --str-video__button-secondary-hover
+  );
+
+  /* The hover background color of the component */
+  --str-video__composite-button__button-group-hover--background-color: var(
+    --str-video__button-default-hover
   );
 
   /* The border radius used for the borders of the component */
   --str-video__composite-button__button-group--border-radius: var(
     --str-video__border-radius-xs
   );
-
-  /* The background color of the component */
-  --str-video__composite-button__button-group-active--background-color: var(
-    --str-video__background-color7
-  );
 }
 
 .str-video__composite-button__button-group {
   @include utils.component-layer-overrides('composite-button__button-group');
+  background-color: var(
+    --str-video__composite-button__button-group--background-color
+  );
+  border-radius: var(--str-video__border-radius-circle);
+
+  .str-video__call-controls__button.str-video__menu-toggle-button {
+    background-color: var(--str-video__button-primary-base);
 
-  .str-video__call-controls__button {
-    background-color: transparent;
+    &:hover {
+      background-color: var(--str-video__button-default-hover);
+    }
+
+    &--active {
+      background-color: var(
+        --str-video__composite-button__button-group-hover--background-color
+      );
+      color: white;
+
+      &:hover {
+        background-color: var(
+          --str-video__composite-button__button-group-hover--background-color
+        );
+      }
+
+      &:disabled {
+        background-color: var(
+          --str-video__composite-button__button-group-hover--background-color
+        );
+      }
+    }
   }
 
-  .str-video__call-controls__button.str-video__menu-toggle-button {
-    background-color: var(--str-video__background-color1);
+  &.str-video__composite-button__button-group--active {
+    background-color: var(
+      --str-video__composite-button__button-group-active--background-color
+    );
+
+    &:hover {
+      background-color: var(--str-video__button-primary-hover);
+    }
+  }
+
+  &.str-video__composite-button__button-group--active-primary {
+    background-color: var(
+      --str-video__composite-button__button-group-active-primary--background-color
+    );
+  }
+
+  &.str-video__composite-button__button-group--active-secondary {
+    background-color: var(
+      --str-video__composite-button__button-group-active-secondary--background-color
+    );
   }
 }
 
@@ -42,32 +104,50 @@
   white-space: nowrap;
 }
 
-.str-video__composite-button__button-group:hover,
-.str-video__composite-button__button-group--active {
+.str-video__composite-button__button-group:hover {
   background-color: var(
-    --str-video__composite-button__button-group-active--background-color
+    --str-video__composite-button__button-group-hover--background-color
   );
+
+  &.str-video__composite-button__button-group--active-secondary:hover {
+    background-color: var(
+      --str-video__composite-button__button-group-active-secondary-hover--background-color
+    );
+  }
+
+  .str-video__icon {
+    background-color: var(--str-video__icon-hover);
+  }
 }
 
 .str-video__call-controls__button {
-  border-radius: var(--str-video__border-radius-xs);
+  border-radius: var(--str-video__border-radius-circle);
   text-decoration: none;
   box-shadow: none;
   border: none;
-  background-color: var(--str-video__background-color1);
+  background-color: var(--str-video__button-primary-base);
 
   &:hover {
     text-decoration: none;
     background-color: var(
-      --str-video__composite-button__button-group-active--background-color
+      --str-video__composite-button__button-group-hover--background-color
     );
+
+    .str-video__icon {
+      background-color: var(--str-video__icon-hover);
+    }
   }
 
   &--variant-danger {
-    background-color: var(--str-video__danger-color);
+    background-color: var(--str-video__button-tertiary-base);
+    padding: 0.4rem;
+
+    .str-video__icon {
+      background-color: white;
+    }
 
     &:hover {
-      background-color: var(--str-video__danger-color--accent);
+      background-color: var(--str-video__button-tertiary-hover);
     }
   }
 
diff --git a/packages/styling/src/CallControls/CallControls-layout.scss b/packages/styling/src/CallControls/CallControls-layout.scss
index d149799f86..f257a9fc3b 100644
--- a/packages/styling/src/CallControls/CallControls-layout.scss
+++ b/packages/styling/src/CallControls/CallControls-layout.scss
@@ -5,15 +5,65 @@
   padding: 1rem 0;
 
   .str-video__reactions-menu {
-    background-color: var(--str-video__background-color1);
+    background-color: var(--str-video__base-color7);
     display: flex;
-    flex-direction: column;
-    padding: 10px;
-    border-radius: var(--str-video__border-radius-xs);
+
+    padding: var(--str-video__spacing-sm);
+    gap: 0.5rem;
+
+    border-radius: var(--str-video__border-radius-lg);
+
+    &--horizontal {
+      flex-direction: row;
+    }
+
+    &--vertical {
+      flex-direction: column;
+    }
 
     .str-video__reactions-menu__button {
-      font-size: 1.5rem;
-      background-color: var(--str-video__background-color1);
+      font-size: 1.2rem;
+      height: 38px;
+      width: 38px;
+      background-color: var(--str-video__button-primary-base);
+      border-radius: var(--str-video__border-radius-circle);
+      border: 1px solid transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        background-color: var(--str-video__button-primary-hover);
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.str-video__no-media-permission {
+  position: absolute;
+  background-color: var(--str-video__alert-caution);
+  height: 12px;
+  width: 12px;
+  border-radius: var(--str-video__border-radius-circle);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: var(--str-video__font-size-xxs);
+  color: var(--str-video__base-color4);
+  cursor: pointer;
+  font-weight: 600;
+  top: 0;
+  right: -3px;
+}
+
+.str-video__composite-button.str-video__device-unavailable {
+  .str-video__composite-button__button-group {
+    background-color: var(--str-video__button-default-disabled);
+
+    &:hover {
+      background-color: var(--str-video__button-default-hover);
     }
   }
 }
diff --git a/packages/styling/src/CallControls/CancelCallButton.scss b/packages/styling/src/CallControls/CancelCallButton.scss
new file mode 100644
index 0000000000..587059bfc9
--- /dev/null
+++ b/packages/styling/src/CallControls/CancelCallButton.scss
@@ -0,0 +1,114 @@
+.str-video__end-call {
+  &__confirmation {
+    background-color: var(--str-video__base-color7);
+
+    border-radius: var(--str-video__border-radius-xl);
+
+    padding: var(--str-video__spacing-sm);
+    gap: var(--str-video__spacing-md);
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__leave,
+  &__end {
+    min-width: 211px;
+    color: var(--str-video__text-color1);
+
+    &-icon {
+      background-color: var(--str-video__text-color1);
+    }
+  }
+
+  &__leave {
+    background-color: var(--str-video__button-tertiary-base);
+    border: 1px solid transparent;
+
+    &:hover {
+      background-color: var(--str-video__button-primary-hover);
+    }
+  }
+
+  &__end {
+    background-color: var(--str-video__button-primary-base);
+
+    &:hover {
+      background-color: var(--str-video__button-tertiary-hover);
+    }
+  }
+}
+
+.str-video__end-call.str-video__end-call__leave-icon,
+.str-video__icon.str-video__end-call__end-icon {
+  background-color: var(--str-video__text-color1);
+}
+
+.str-video__end-recording__confirmation {
+  background-color: var(--str-video__base-color7);
+  border-radius: var(--str-video__border-radius-lg);
+  padding: var(--str-video__spacing-xl);
+  gap: var(--str-video__spacing-lg);
+  display: flex;
+  flex-direction: column;
+}
+
+.str-video__end-recording__header {
+  display: flex;
+  flex-direction: row;
+  gap: var(--str-video__spacing-md);
+}
+
+.str-video__end-recording__heading {
+  font-size: var(--str-video__font-size-lg);
+  font-weight: 600;
+  margin: 0;
+}
+
+.str-video__end-recording__description {
+  margin: 0;
+  color: var(--str-video__text-color2);
+  font-size: var(--str-video__font-size-sm);
+}
+
+.str-video__end-recording__actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--str-video__spacing-md);
+
+  .str-video__composite-button {
+    width: 100%;
+    gap: var(--str-video__spacing-md);
+
+    &:first-of-type {
+      background-color: transparent;
+
+      .str-video__composite-button__button-group {
+        background-color: transparent;
+        border: 1px solid var(--str-video__base-color2);
+        width: 100%;
+        justify-content: center;
+
+        &:hover {
+          background-color: var(--str-video__button-default-hover);
+        }
+      }
+    }
+    .str-video__composite-button__button-group {
+      background-color: var(--str-video__button-tertiary-base);
+      width: 100%;
+      justify-content: center;
+
+      .str-video__text-button {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+
+      &:hover {
+        background-color: var(--str-video__button-tertiary-hover);
+      }
+    }
+  }
+}
diff --git a/packages/styling/src/CallControls/index.scss b/packages/styling/src/CallControls/index.scss
index 704475cd08..cc51b31678 100644
--- a/packages/styling/src/CallControls/index.scss
+++ b/packages/styling/src/CallControls/index.scss
@@ -1 +1,2 @@
-@import "CallControls-layout";
+@import 'CallControls-layout';
+@import 'CancelCallButton';
diff --git a/packages/styling/src/CallLayout/SpeakerLayout-layout.scss b/packages/styling/src/CallLayout/SpeakerLayout-layout.scss
index 5f63120760..fbf5c38c05 100644
--- a/packages/styling/src/CallLayout/SpeakerLayout-layout.scss
+++ b/packages/styling/src/CallLayout/SpeakerLayout-layout.scss
@@ -13,6 +13,7 @@ $scope-name: 'str-video__speaker-layout';
   width: 100%;
   gap: 1rem;
   padding-inline: 2px; // to see "speaking" outline
+  padding: 2px;
 
   .str-video__participant-view {
     aspect-ratio: 16/9;
@@ -20,9 +21,9 @@ $scope-name: 'str-video__speaker-layout';
 
   .str-video__speaker-layout__spotlight {
     display: flex;
-    align-items: center;
     justify-content: center;
     min-height: 0;
+    height: 100%;
 
     .str-video__participant-view--speaking:has(
         .str-video__video--screen-share
@@ -31,7 +32,8 @@ $scope-name: 'str-video__speaker-layout';
     }
 
     .str-video__video {
-      object-fit: contain;
+      height: 100%;
+      width: 100%;
     }
 
     .str-video__participant-details,
@@ -131,3 +133,16 @@ $scope-name: 'str-video__speaker-layout';
     }
   }
 }
+
+@media (min-width: 600px) {
+  .str-video__speaker-layout {
+    .str-video__speaker-layout__spotlight {
+      align-items: center;
+      height: auto;
+
+      .str-video__video {
+        object-fit: contain;
+      }
+    }
+  }
+}
diff --git a/packages/styling/src/CallParticipantList/CallParticiantListingItem-layout.scss b/packages/styling/src/CallParticipantList/CallParticiantListingItem-layout.scss
index a6a890f20b..eb8dcf1918 100644
--- a/packages/styling/src/CallParticipantList/CallParticiantListingItem-layout.scss
+++ b/packages/styling/src/CallParticipantList/CallParticiantListingItem-layout.scss
@@ -3,7 +3,7 @@
 .str-video__participant-listing-item {
   display: flex;
   justify-content: space-between;
-  gap: 0.75rem;
+  gap: var(--str-video__spacing-sm);
   padding-block: 0.5rem;
   width: 100%;
   align-items: center;
@@ -13,14 +13,20 @@
   }
 
   .str-video__participant-listing-item__display-name {
+    flex: 1;
     @include utils.ellipsis-text();
   }
 
+  .str-video__participant-avatar {
+    display: flex;
+    align-items: center;
+    gap: var(--str-video__spacing-sm);
+  }
+
   .str-video__participant-listing-item__media-indicator-group {
     display: flex;
     align-items: center;
-    padding-inline: 0.5rem;
-    gap: 0.75rem;
+    gap: var(--str-video__spacing-sm);
 
     .str-video__participant-listing-item__icon {
       width: 0.75rem;
diff --git a/packages/styling/src/CallParticipantList/CallParticipantList-layout.scss b/packages/styling/src/CallParticipantList/CallParticipantList-layout.scss
index 73c706696e..c5999b4ff6 100644
--- a/packages/styling/src/CallParticipantList/CallParticipantList-layout.scss
+++ b/packages/styling/src/CallParticipantList/CallParticipantList-layout.scss
@@ -3,10 +3,6 @@ $scope-name: 'str-video__participant-list';
 .str-video__participant-list {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  height: 100%;
-  width: 100%;
-  padding: 0.75rem;
 
   .str-video__participant-list-header {
     display: flex;
@@ -14,30 +10,31 @@ $scope-name: 'str-video__participant-list';
 
     .str-video__participant-list-header__title {
       flex: 1;
+      font-size: var(--str-video__font-size-sm);
     }
-
     .str-video__participant-list-header__close-button {
-      width: 1.75rem;
-      height: 1.75rem;
-
-      .str-video__participant-list-header__close-button--icon {
-        display: block;
-        height: 1rem;
-        width: 1rem;
+      > span {
+        height: 15px;
+        width: 15px;
       }
     }
   }
 
+  .str-video__search-input__container {
+    margin-top: var(--str-video__spacing-md);
+  }
+
   .str-video__participant-list__content-header {
-    display: flex;
+    display: none;
     align-items: center;
     gap: 0.5rem;
+    margin-top: var(--str-video__spacing-md);
+    justify-content: flex-end;
 
     .str-video__participant-list__content-header-title {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      flex-grow: 1;
+      justify-content: flex-end;
     }
 
     .str-video__call-controls__button {
@@ -56,9 +53,10 @@ $scope-name: 'str-video__participant-list';
   }
 
   .str-video__participant-list__content {
-    height: 0;
+    height: auto;
     flex-grow: 1;
     overflow-y: auto;
+    margin-top: var(--str-video__spacing-xl);
   }
 
   .str-video__participant-list__footer {
@@ -89,7 +87,8 @@ $scope-name: 'str-video__participant-list';
     display: flex;
     align-items: center;
     width: 100%;
-    padding-block: 0.5rem;
+    padding: var(--str-video__spacing-md);
+    font-size: var(--str-video__font-size-sm);
   }
 }
 
diff --git a/packages/styling/src/CallParticipantList/CallParticipantList-theme.scss b/packages/styling/src/CallParticipantList/CallParticipantList-theme.scss
index 00c321e503..e69de29bb2 100644
--- a/packages/styling/src/CallParticipantList/CallParticipantList-theme.scss
+++ b/packages/styling/src/CallParticipantList/CallParticipantList-theme.scss
@@ -1,86 +0,0 @@
-@use '../utils';
-
-.str-video {
-  --str-video__participant-list--background-color: var(
-    --str-video__background-color1
-  );
-  --str-video__participant-list--border-radius: var(
-    --str-video__border-radius-xs
-  );
-
-  --str-video__participant-list-header--color: var(--str-video__text-color1);
-
-  --str-video__participant-list-header--title-count__color: var(
-    --str-video__text-color3
-  );
-
-  --str-video__participant-list-header__close-button--background-color: #121416;
-  --str-video__participant-list-header__close-button--border-radius: var(
-    --str-video__border-radius-xs
-  );
-
-  --str-video__participant-list-header__close-button-icon--background-color: #72767e;
-}
-
-.str-video__participant-list {
-  @include utils.component-layer-overrides('participant-list');
-
-  .str-video__participant-list-header__title {
-    @include utils.component-layer-overrides('participant-list-header');
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-
-  .str-video__participant-list-header__title-count {
-    @include utils.component-layer-overrides(
-      'participant-list-header--title-count'
-    );
-  }
-
-  .str-video__participant-list-header__title-anonymous {
-    @include utils.component-layer-overrides(
-      'participant-list-header--title-anonymous'
-    );
-  }
-
-  .str-video__participant-list-header__close-button {
-    @include utils.component-layer-overrides(
-      'participant-list-header__close-button'
-    );
-
-    .str-video__participant-list-header__close-button--icon {
-      @include utils.apply-mask-image(
-        var(--str-video__icon--close),
-        var(
-          --str-video__participant-list-header__close-button-icon--background-color
-        ),
-        0.75rem 0.75rem
-      );
-    }
-  }
-
-  .str-video__participant-list--empty {
-    font-size: 13px;
-  }
-
-  .str-video__participant-list__footer {
-    display: flex;
-    justify-content: center;
-    padding: 0 0.75rem 0.75rem;
-
-    .str-video__invite-link-button {
-      font-size: 13px;
-      color: var(--str-video__text-color4);
-      background-color: var(--str-video__background-color4);
-      border-radius: var(--str-video__border-radius-xl);
-
-      .str-video__invite-participant-icon {
-        @include utils.apply-mask-image(
-          var(--str-video__icon--user-plus),
-          var(--str-video__text-color4),
-          1rem
-        );
-      }
-    }
-  }
-}
diff --git a/packages/styling/src/CallRecodingList/CallRecordingList-layout.scss b/packages/styling/src/CallRecodingList/CallRecordingList-layout.scss
index 330a14bd20..7134b06631 100644
--- a/packages/styling/src/CallRecodingList/CallRecordingList-layout.scss
+++ b/packages/styling/src/CallRecodingList/CallRecordingList-layout.scss
@@ -1,105 +1,60 @@
-@use '../utils';
-
-.str-video__call-recording-list {
-  padding: 0.625rem; // todo: unify menu root paddings
-  min-width: 300px;
+.str-video__call-recording-list__list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &:first-of-type {
+    .str-video__call-recording-list__item {
+      font-weight: 600;
+    }
+  }
 }
 
-.str-video__call-recording-list__header {
+.str-video__call-recording-list__item {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
-  padding: 0rem 0.5rem 0.5rem; // todo: unify menu header paddings
   align-items: center;
+  font-size: var(--str-video__font-size-xs);
+  border-bottom: 1px solid var(--str-video__base-color2);
+  padding: var(--str-video__spacing-sm) 0;
+  gap: var(--str-video__spacing-sm);
 
-  .str-video__call-recording-list__title {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  .str-video__call-controls__button {
-    .str-video__icon {
-      width: 1rem;
-      height: 1rem;
-    }
+  &:last-of-type {
+    border-bottom: none;
   }
 }
+.str-video__call-recording-list__filename {
+  width: 200px;
+}
 
-.str-video__call-recording-list__listing {
-  padding-inline: 0.5rem;
-  max-height: 400px;
-  overflow-y: auto;
-
-  &.str-video__call-recording-list__listing--empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding-block: 2rem;
-
-    .str-video__call-recording-list__listing--icon-empty {
-      width: 3rem;
-      height: 3rem;
-    }
-
-    .str-video__call-recording-list__listing--text-empty {
-      margin: 0;
-    }
-  }
+.str-video__call-recording-list__time {
+  width: 100px;
 }
 
-.str-video__call-recording-list-item {
+.str-video__call-recording-list__download {
   display: flex;
-  justify-content: space-between;
-  overflow: hidden;
-  width: 100%;
-  padding-block: 0.125rem;
-
-  .str-video__call-recording-list-item__info {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  .str-video__call-recording-list-item__actions {
-    display: flex;
-
-    .str-video__call-recording-list-item__action-button {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0;
-      width: 1.5rem;
-      height: 1.5rem;
-
-      .str-video__call-recording-list-item__action-button-icon {
-        display: block;
-        width: 1.5rem;
-        height: 1.5rem;
-
-        &.str-video__copy-button--icon {
-          width: 1.25rem;
-          height: 1.25rem;
-        }
-      }
-    }
-  }
+  justify-content: flex-end;
+  width: 100px;
 }
 
-.str-video__call-recording-list__listing {
-  .str-video__loading-indicator {
-    padding-block: 0.5rem;
-    flex-direction: row;
-    justify-content: flex-start;
-    gap: 0.5rem;
-
-    .str-video__loading-indicator__icon.spinner {
-      height: 1rem;
-      width: 1rem;
-      mask-size: 1rem;
-    }
+.str-video__call-recording-list__filename,
+.str-video__call-recording-list__time {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 
-    .str-video__loading-indicator-text {
-      @include utils.ellipsis-text;
+.str-video__call-recording-list-item__action-button--download {
+  .str-video__icon--download {
+    height: 32px;
+    width: 32px;
+  }
+  &:hover {
+    .str-video__icon--download {
+      cursor: pointer;
+      background-color: var(--str-video__brand-color1);
     }
   }
 }
diff --git a/packages/styling/src/CallRecodingList/CallRecordingList-theme.scss b/packages/styling/src/CallRecodingList/CallRecordingList-theme.scss
index a4c0d5763d..4403104cec 100644
--- a/packages/styling/src/CallRecodingList/CallRecordingList-theme.scss
+++ b/packages/styling/src/CallRecodingList/CallRecordingList-theme.scss
@@ -8,9 +8,9 @@
 
 .str-video__call-controls__button--icon-call-recordings {
   @include utils.apply-mask-image(
-      var(--str-video__icon--film-roll),
-      var(--str-video__text-color1),
-      2px,
+    var(--str-video__icon--film-roll),
+    var(--str-video__text-color1),
+    2px
   );
 }
 
@@ -37,60 +37,14 @@
       var(--str-video__icon--refresh),
       var(--str-video__text-color1),
       contain
-    )
+    );
   }
 }
 
 .str-video__call-recording-list__listing--icon-empty {
   @include utils.apply-mask-image(
-      var(--str-video__icon--film-roll),
-      var(--str-video__text-color1),
-      contain
+    var(--str-video__icon--film-roll),
+    var(--str-video__text-color1),
+    contain
   );
 }
-
-.str-video__call-recording-list-item__actions {
-  .str-video__call-recording-list-item__action-button {
-    border-radius: 4px;
-    background-color: transparent;
-
-
-    &:hover {
-      background-color: var(--str-video__background-color7);
-    }
-
-    &:active {
-      background-color: var(--str-video__background-color5);
-      transition: background-color 0.2s ease-out;
-    }
-
-    .str-video__download-button--icon {
-      @include utils.apply-mask-image(
-          var(--str-video__icon--download),
-          var(--str-video__text-color1),
-          contain
-      );
-    }
-
-    .str-video__copy-button--icon {
-      @include utils.apply-mask-image(
-          var(--str-video__icon--copy),
-          var(--str-video__text-color1),
-          contain
-      );
-    }
-  }
-}
-
-
-.str-video__call-recording-list__listing {
-  .str-video__loading-indicator {
-    .str-video__loading-indicator-text {
-      font-weight: 500;
-      font-size: 0.75rem;
-      line-height: 1rem;
-    }
-  }
-}
-
-
diff --git a/packages/styling/src/CallStats.scss b/packages/styling/src/CallStats.scss
index dbceaf4a96..3fb43032a3 100644
--- a/packages/styling/src/CallStats.scss
+++ b/packages/styling/src/CallStats.scss
@@ -1,8 +1,8 @@
 .str-video__call-stats {
-  background-color: var(--str-video__background-color1);
-  border-radius: var(--str-video__border-radius-xs);
-  padding: 0.75rem;
-  max-width: 400px;
+  border-radius: var(--str-video__border-radius-lg);
+  background-color: var(--str-video__base-color7);
+  padding: var(--str-video__spacing-md);
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -11,6 +11,29 @@
     margin: unset;
   }
 
+  .str-video__call-stats__header {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--str-video__spacing-md);
+  }
+
+  .str-video__call-stats__heading {
+    display: flex;
+    align-items: center;
+  }
+
+  .str-video__call-stats__icon {
+    margin-right: var(--str-video__spacing-sm);
+    height: 18px;
+    width: 18px;
+  }
+
+  .str-video__call-stats__description {
+    font-size: var(--str-video__font-size-sm);
+    margin-bottom: var(--str-video__spacing-sm);
+    font-weight: 600;
+  }
+
   .str-video__call-stats__card-container {
     --gap: 1rem;
     display: flex;
@@ -20,26 +43,76 @@
   }
 
   .str-video__call-stats__card {
-    background-color: var(--str-video__background-color2);
+    display: flex;
+    justify-content: space-between;
+    background-color: var(--str-video__background-color4);
     border-radius: var(--str-video__border-radius-xs);
     width: calc(50% - calc(var(--gap) / 2));
     padding: 0.5rem 0.5rem;
 
-    .str-video__call-stats__card_label {
+    .str-video__call-stats__card-content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .str-video__call-stats__card-label {
+      display: flex;
       color: var(--str-video__text-color2);
       font-size: 0.5625rem;
       font-weight: 500;
       text-transform: uppercase;
     }
 
-    .str-video__call-stats__card_value {
+    .str-video__call-stats__card-value {
       font-size: 1.0625rem;
       font-weight: 500;
       line-height: 1.25rem;
     }
   }
 
+  .str-video__call-explanation__icon {
+    height: 12px;
+    width: 12px;
+    margin-left: var(--str-video__spacing-xs);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .str-video__call-explanation__description {
+    background-color: var(--str-video__base-color3);
+    padding: var(--str-video__spacing-xs);
+    font-size: var(--str-video__font-size-xs);
+    border-radius: var(--str-video__border-radius-xs);
+  }
+
   .str-video__call-stats-line-chart-container {
-    height: 15vh;
+    position: relative;
+    margin: auto;
+    height: 170px;
+    width: 100%;
+  }
+
+  .str-video__call-stats__tag {
+    border-radius: var(--str-video__border-radius-sm);
+    padding: var(--str-video__spacing-xs);
+    font-size: var(--str-video__font-size-sm);
+    font-weight: 600;
+    height: 30px;
+
+    &--good {
+      color: var(--str-video__alert-success);
+      background-color: var(--str-video__alert-success-background);
+    }
+    &--ok {
+      color: var(--str-video__alert-caution);
+      background-color: var(--str-video__alert-caution-background);
+    }
+
+    &--bad {
+      color: var(--str-video__alert-warning);
+      background-color: var(--str-video__alert-warming-background);
+    }
   }
 }
diff --git a/packages/styling/src/DeviceSettings/DeviceSettings-layout.scss b/packages/styling/src/DeviceSettings/DeviceSettings-layout.scss
index e112c4da40..7508635311 100644
--- a/packages/styling/src/DeviceSettings/DeviceSettings-layout.scss
+++ b/packages/styling/src/DeviceSettings/DeviceSettings-layout.scss
@@ -8,22 +8,87 @@
 .str-video__device-settings {
   padding: 0.625rem;
   z-index: 1;
+  font-family: 'Inter';
+}
+
+.str-video__device-settings__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 16px 0px 16px;
+  margin-bottom: 33px;
+}
+
+.str-video__icon.str-video__device-settings__settings-icon {
+  height: 24px;
+  width: 24px;
+  color: var(--str-video__base-color1);
+}
+
+.str-video__device-settings__heading {
+  width: 100%;
+  justify-self: start;
+  margin: unset;
+  margin-left: 8px;
+  color: var(--str-video__base-color1);
+  font-size: 24;
+  font-weight: 500;
+  word-wrap: 'break-word';
+}
+
+.str-video__device-settings__close-button {
+  color: var(--str-video__base-color1);
+  background-color: transparent;
 }
 
 .str-video__device-settings__device-kind {
-  padding: 0.75rem 1rem;
+  background-color: var(--str-video__base-color7);
+  padding: var(--str-video__spacing-lg);
+  border-radius: var(--str-video__border-radius-lg);
 
   .str-video__device-settings__device-selector-title {
+    font-size: var(--str-video__font-size-xs);
+    line-height: 1.25rem;
+
     padding-bottom: 0.5rem;
+    font-size: 13px;
+    margin-bottom: 8px;
   }
 
+  .str-video__option,
   .str-video__device-settings__option {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
-    padding: 0.5rem;
+    border-radius: var(--str-video__border-radius-lg);
+    background-color: var(--str-video__button-primary-base);
+    padding: var(--str-video__spacing-xs) var(--str-video__spacing-md);
+
+    gap: 8px;
+
+    font-weight: 600;
+    font-size: var(--str-video__font-size-sm);
 
-    input[type="radio"] {
+    &:not(:first-of-type) {
+      margin-top: 8px;
+    }
+
+    &__icon {
+      &--selected {
+        background-color: var(--str-video__brand-color1);
+      }
+    }
+
+    &:hover {
+      background-color: var(--str-video__button-default-hover);
+      cursor: pointer;
+    }
+
+    &--selected,
+    &--active {
+      background-color: var(--str-video__button-default-hover);
+    }
+
+    input[type='radio'] {
       margin: 0;
       height: 1rem;
       width: 1rem;
@@ -31,7 +96,7 @@
       place-content: center;
 
       &::before {
-        content: "";
+        content: '';
         width: 0.5rem;
         height: 0.5rem;
         transform: scale(0);
@@ -39,6 +104,10 @@
       &:checked::before {
         transform: scale(1);
       }
+
+      &:checked {
+        border-color: var(--str-video__primary-color);
+      }
     }
   }
 }
diff --git a/packages/styling/src/DeviceSettings/DeviceSettings-theme.scss b/packages/styling/src/DeviceSettings/DeviceSettings-theme.scss
deleted file mode 100644
index 6ef5b39add..0000000000
--- a/packages/styling/src/DeviceSettings/DeviceSettings-theme.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-@use "../utils";
-
-.str-video {
-  /* The font color applied inside the component */
-  --str-video__menu-container--color: var(--str-video__text-color1);
-
-  /* The background color of the component */
-  --str-video__menu-container--background-color: var(--str-video__background-color1);
-
-  /* The border radius used for the borders of the component */
-  --str-video__menu-container--border-radius: var(--str-video__border-radius-xs);
-
-  /* The background color of the component */
-  --str-video__device-settings--background-color: var(--str-video__background-color1);
-
-  /* The border radius used for the borders of the component */
-  --str-video__device-settings--border-radius: var(--str-video__border-radius-xs);
-
-  /* The box shadow applied to the component */
-  --str-video__device-settings--box-shadow:  0 0 4px 1px var(--str-video__background-color2);
-}
-
-.str-video__device-settings {
-  @include utils.component-layer-overrides('device-settings');
-}
-
-.str-video__menu-container {
-  @include utils.component-layer-overrides('menu-container');
-}
-
-.str-video__device-settings__device-kind {
-  font-size: 1rem;
-
-  .str-video__device-settings__device-selector-title {
-    font-weight: 500;
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-
-  .str-video__device-settings__option {
-    color: var(--str-video__text-color3);
-    font-size: 1rem;
-    line-height: 1.25rem;
-    border-radius: var(--str-video__border-radius-xxs);
-    cursor: pointer;
-    transition: all 0.3s ease-out;
-
-    &:hover, &.str-video__device-settings__option--selected {
-      color: var(--str-video__text-color1);
-      background-color: var(--str-video__background-color2);
-    }
-
-    input[type="radio"] {
-      -webkit-appearance: none;
-      appearance: none;
-      /* For iOS < 15 to remove gradient background */
-      background-color: currentColor;
-      font: inherit;
-      color: var(--str-video__text-color3);
-      border: 0.5rem solid var(--str-video__text-color3);
-      border-radius: var(--str-video__border-radius-circle);
-
-      &:checked {
-        border-color: var(--str-video__primary-color);
-      }
-
-      &::before {
-        border-radius: var(--str-video__border-radius-circle);
-        transition: 120ms transform ease-in-out;
-      }
-      &:checked::before {
-        box-shadow: inset 0.5rem 0.5rem var(--str-video__text-color1);
-      }
-    }
-  }
-}
-
-.str-video__device-settings__button {
-  cursor: pointer;
-  border: none;
-  background-color: var(--str-video__background-color1);
-
-  .str-video__call-controls__button--icon-device-settings {
-    @include utils.apply-mask-image(
-        var(--str-video__icon--settings),
-        var(--str-video__text-color1),
-        contain
-    );
-  }
-
-  &:hover,
-  &:active {
-    background-color: var(--str-video__background-color7);
-    border-radius: var(--str-video__border-radius-xs);
-  }
-}
-
-.str-video__device-settings__button--active {
-  background-color: var(--str-video__background-color7);
-}
diff --git a/packages/styling/src/DeviceSettings/index.scss b/packages/styling/src/DeviceSettings/index.scss
index 1dd09153d6..2d13ba3986 100644
--- a/packages/styling/src/DeviceSettings/index.scss
+++ b/packages/styling/src/DeviceSettings/index.scss
@@ -1,2 +1 @@
-@import "DeviceSettings-layout";
-@import "DeviceSettings-theme";
+@import 'DeviceSettings-layout';
diff --git a/packages/styling/src/DropdownSelect/DropdownSelect.scss b/packages/styling/src/DropdownSelect/DropdownSelect.scss
new file mode 100644
index 0000000000..e1db972903
--- /dev/null
+++ b/packages/styling/src/DropdownSelect/DropdownSelect.scss
@@ -0,0 +1,104 @@
+.str-video {
+  &__dropdown {
+    position: relative;
+    &-selected {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: var(--str-video__base-color4);
+      border-radius: var(--str-video__border-radius-lg);
+      border: 1px solid var(--str-video__base-color6);
+
+      &__label {
+        display: flex;
+        align-items: center;
+        font-weight: 600;
+        padding: var(--str-video__spacing-sm);
+        font-size: var(--str-video__font-size-xs);
+      }
+
+      &__icon {
+        margin-right: var(--str-video__spacing-sm);
+      }
+
+      &__chevron {
+        margin-right: var(--str-video__spacing-md);
+      }
+
+      & > *:hover,
+      &:hover {
+        cursor: pointer;
+      }
+
+      &:hover {
+        border: 1px solid var(--str-video__brand-color1);
+      }
+    }
+
+    &-list {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      z-index: 2;
+      width: 100%;
+      margin-top: var(--str-video__spacing-sm);
+      background-color: var(--str-video__base-color4);
+      border-radius: var(--str-video__border-radius-lg);
+      padding: var(--str-video__spacing-md);
+
+      box-shadow: 0px 14px 34px rgba(0, 0, 0, 0.75);
+    }
+
+    &-option {
+      display: flex;
+      align-items: center;
+      border-radius: var(--str-video__border-radius-lg);
+
+      padding: 8px 16px;
+      margin-top: 8px;
+      gap: 8px;
+
+      font-weight: 600;
+      font-size: var(--str-video__font-size-sm);
+
+      &:hover {
+        background-color: var(--str-video__button-default-hover);
+        cursor: pointer;
+      }
+
+      &--selected {
+        background-color: var(--str-video__button-primary-active);
+        color: var(--str-video__text-color1);
+
+        &:hover {
+          background-color: var(--str-video__button-primary-hover);
+        }
+      }
+    }
+
+    &-icon {
+      background-color: var(--str-video__icon-default);
+
+      .str-video__dropdown__option:hover & {
+        background-color: var(--str-video__icon-hover);
+      }
+
+      .str-video__dropdown-option--selected & {
+        background-color: var(--str-video__text-color1);
+      }
+    }
+
+    &-label {
+      font-size: var(--str-video__font-size-xs);
+      .str-video__dropdown__option:hover & {
+        color: var(--str-video__base-color1);
+      }
+    }
+  }
+}
+
+@media (min-width: 600px) {
+  .str-video__dropdown-selected__label {
+    font-size: var(--str-video__font-size-sm);
+  }
+}
diff --git a/packages/styling/src/DropdownSelect/index.scss b/packages/styling/src/DropdownSelect/index.scss
new file mode 100644
index 0000000000..61153f314d
--- /dev/null
+++ b/packages/styling/src/DropdownSelect/index.scss
@@ -0,0 +1 @@
+@import 'DropdownSelect';
diff --git a/packages/styling/src/Icon/Icon-theme.scss b/packages/styling/src/Icon/Icon-theme.scss
index f30682e570..22fee65e4d 100644
--- a/packages/styling/src/Icon/Icon-theme.scss
+++ b/packages/styling/src/Icon/Icon-theme.scss
@@ -1,5 +1,5 @@
 .str-video__icon {
-  background-color: var(--str-video__text-color1);
+  background-color: var(--str-video__base-color1);
 
   &--chat {
     mask-image: var(--str-video__icon--chat);
@@ -11,10 +11,100 @@
     mask-image: var(--str-video__icon--reactions);
   }
 
+  &--call-latency {
+    -webkit-mask-image: var(--str-video__icon--call-latency);
+    mask-image: var(--str-video__icon--call-latency);
+  }
+
+  &--network-quality {
+    -webkit-mask-image: var(--str-video__icon--network-quality);
+    mask-image: var(--str-video__icon--network-quality);
+  }
+
+  &--support-agent {
+    -webkit-mask-image: var(--str-video__icon--support-agent);
+    mask-image: var(--str-video__icon--support-agent);
+  }
+
   &--recording-on {
     mask-image: var(--str-video__icon--recording-on);
     -webkit-mask-image: var(--str-video__icon--recording-on);
-    background-color: var(--str-video__danger-color);
+  }
+
+  &--mediation {
+    mask-image: var(--str-video__icon--mediation);
+    -webkit-mask-image: var(--str-video__icon--mediation);
+  }
+
+  &--copy {
+    mask-image: var(--str-video__icon--copy);
+    -webkit-mask-image: var(--str-video__icon--copy);
+  }
+
+  &--caret-up {
+    mask-image: var(--str-video__icon--caret-up);
+    -webkit-mask-image: var(--str-video__icon--caret-up);
+  }
+
+  &--download {
+    mask-image: var(--str-video__icon--download);
+    -webkit-mask-image: var(--str-video__icon--download);
+  }
+
+  &--caret-down {
+    mask-image: var(--str-video__icon--caret-down);
+    -webkit-mask-image: var(--str-video__icon--caret-down);
+    transform: rotate(180deg);
+  }
+
+  &--layout-speaker-bottom {
+    mask-image: var(--str-video__icon--layout-speaker-bottom);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-bottom);
+  }
+
+  &--layout-speaker-top {
+    mask-image: var(--str-video__icon--layout-speaker-top);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-top);
+  }
+
+  &--layout-speaker-left {
+    mask-image: var(--str-video__icon--layout-speaker-left);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-left);
+  }
+
+  &--layout-speaker-one-on-one {
+    mask-image: var(--str-video__icon--layout-speaker-one-on-one);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-one-on-one);
+  }
+
+  &--layout-speaker-live-stream {
+    mask-image: var(--str-video__icon--layout-speaker-live-stream);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-live-stream);
+  }
+
+  &--layout-speaker-right {
+    mask-image: var(--str-video__icon--layout-speaker-right);
+    -webkit-mask-image: var(--str-video__icon--layout-speaker-right);
+  }
+
+  &--layout {
+    mask-image: var(--str-video__icon--layout);
+    -webkit-mask-image: var(--str-video__icon--layout);
+  }
+
+  &--folder {
+    mask-image: var(--str-video__icon--folder);
+    -webkit-mask-image: var(--str-video__icon--folder);
+  }
+
+  &--paperclip {
+    mask-image: var(--str-video__icon--paperclip);
+    -webkit-mask-image: var(--str-video__icon--paperclip);
+  }
+
+  &--chevron-right {
+    mask-image: var(--str-video__icon--chevron-right);
+    -webkit-mask-image: var(--str-video__icon--chevron-right);
   }
 
   &--recording-off {
@@ -22,6 +112,72 @@
     -webkit-mask-image: var(--str-video__icon--recording-off);
   }
 
+  &--camera-add {
+    mask-image: var(--str-video__icon--camera-add);
+    -webkit-mask-image: var(--str-video__icon--camera-add);
+  }
+
+  &--person-add {
+    mask-image: var(--str-video__icon--person-add);
+    -webkit-mask-image: var(--str-video__icon--person-add);
+  }
+
+  &--qr-code {
+    mask-image: var(--str-video__icon--qr-code);
+    -webkit-mask-image: var(--str-video__icon--qr-code);
+  }
+
+  &--loading {
+    mask-image: var(--str-video__icon--loading);
+    -webkit-mask-image: var(--str-video__icon--loading);
+
+    transform: rotate(360deg);
+    transition-duration: 1s;
+    transition-delay: now;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+
+  &--login {
+    mask-image: var(--str-video__icon--login);
+    -webkit-mask-image: var(--str-video__icon--login);
+  }
+
+  &--logout {
+    mask-image: var(--str-video__icon--logout);
+    -webkit-mask-image: var(--str-video__icon--logout);
+  }
+
+  &--provider-google {
+    mask-image: var(--str-video__icon--provider-google);
+    -webkit-mask-image: var(--str-video__icon--provider-google);
+  }
+
+  &--person-off {
+    mask-image: var(--str-video__icon--person-off);
+    -webkit-mask-image: var(--str-video__icon--person-off);
+  }
+
+  &--verified {
+    mask-image: var(--str-video__icon--verified);
+    -webkit-mask-image: var(--str-video__icon--verified);
+  }
+
+  &--chevron-up {
+    mask-image: var(--str-video__icon--chevron-up);
+    -webkit-mask-image: var(--str-video__icon--chevron-up);
+  }
+
+  &--chevron-down {
+    mask-image: var(--str-video__icon--chevron-down);
+    -webkit-mask-image: var(--str-video__icon--chevron-down);
+  }
+
+  &--developer {
+    mask-image: var(--str-video__icon--developer);
+    -webkit-mask-image: var(--str-video__icon--developer);
+  }
+
   &--screen-share-on {
     mask-image: var(--str-video__icon--screen-share-on);
     -webkit-mask-image: var(--str-video__icon--screen-share-on);
@@ -55,6 +211,11 @@
     -webkit-mask-image: var(--str-video__icon--caret);
   }
 
+  &--star {
+    mask-image: var(--str-video__icon--star);
+    -webkit-mask-image: var(--str-video__icon--star);
+  }
+
   &--close {
     mask-image: var(--str-video__icon--close);
     -webkit-mask-image: var(--str-video__icon--close);
@@ -70,6 +231,11 @@
     -webkit-mask-image: var(--str-video__icon--mic-off);
   }
 
+  &--more {
+    mask-image: var(--str-video__icon--more);
+    -webkit-mask-image: var(--str-video__icon--more);
+  }
+
   &--camera {
     mask-image: var(--str-video__icon--camera);
     -webkit-mask-image: var(--str-video__icon--camera);
@@ -100,6 +266,11 @@
     mask-image: var(--str-video__icon--info-icon);
   }
 
+  &--feedback {
+    -webkit-mask-image: var(--str-video__icon--feedback);
+    mask-image: var(--str-video__icon--feedback);
+  }
+
   &--info-document {
     -webkit-mask-image: var(--str-video__icon--info-document);
     mask-image: var(--str-video__icon--info-document);
@@ -125,6 +296,11 @@
     -webkit-mask-image: var(--str-video__icon--speaker);
   }
 
+  &--language {
+    mask-image: var(--str-video__icon--language);
+    -webkit-mask-image: var(--str-video__icon--language);
+  }
+
   &--ellipsis {
     mask-image: var(--str-video__icon--ellipsis);
     -webkit-mask-image: var(--str-video__icon--ellipsis);
@@ -150,7 +326,7 @@
     -webkit-mask-image: var(--str-video__icon--not-allowed);
   }
 
-  &--call-recordings {
+  &--film-roll {
     mask-image: var(--str-video__icon--film-roll);
     -webkit-mask-image: var(--str-video__icon--film-roll);
   }
@@ -165,8 +341,6 @@
     -webkit-mask-image: var(--str-video__icon--filter);
   }
 
-
-
   &--refresh {
     mask-image: var(--str-video__icon--refresh);
     -webkit-mask-image: var(--str-video__icon--refresh);
diff --git a/packages/styling/src/Menu/GenericMenu-layout.scss b/packages/styling/src/Menu/GenericMenu-layout.scss
index 98b52ecc7e..75b7ce8871 100644
--- a/packages/styling/src/Menu/GenericMenu-layout.scss
+++ b/packages/styling/src/Menu/GenericMenu-layout.scss
@@ -1,20 +1,32 @@
 .str-video__generic-menu {
   list-style: none;
   margin: unset;
-  padding: 5px;
-  border-radius: var(--str-video__border-radius-xs);
+  background-color: var(--str-video__base-color7);
+  padding: var(--str-video__spacing-md);
+
+  border-radius: var(--str-video__border-radius-lg);
+
   display: flex;
   flex-direction: column;
   gap: 1px;
 
   .str-video__generic-menu--item {
+    align-items: center;
+
+    margin-top: 8px;
+    gap: 8px;
+
+    font-weight: 600;
+    font-size: var(--str-video__font-size-md);
+
     display: flex;
     button {
       all: unset;
       width: 100%;
       font-size: 13px;
-      padding: 5px 10px;
-      border-radius: var(--str-video__border-radius-xs);
+      border-radius: var(--str-video__border-radius-lg);
+      background-color: var(--str-video__button-primary-base);
+      padding: 8px 16px;
       gap: 10px;
       display: flex;
       align-items: center;
@@ -24,6 +36,16 @@
         width: 1.1rem;
         height: 1rem;
       }
+
+      &:hover {
+        background-color: var(--str-video__button-default-hover);
+        cursor: pointer;
+      }
+
+      &--selected,
+      &--active {
+        background-color: var(--str-video__button-primary-hover);
+      }
     }
 
     // TODO: remove once "device selector" component becomes reusable
diff --git a/packages/styling/src/Menu/GenericMenu-theme.scss b/packages/styling/src/Menu/GenericMenu-theme.scss
index 8445f8a972..e69de29bb2 100644
--- a/packages/styling/src/Menu/GenericMenu-theme.scss
+++ b/packages/styling/src/Menu/GenericMenu-theme.scss
@@ -1,15 +0,0 @@
-.str-video__generic-menu {
-  background: var(--str-video__background-color2);
-
-  .str-video__generic-menu--item {
-    button:hover {
-      background: var(--str-video__background-color1);
-    }
-
-    button[disabled] {
-      background-color: var(--str-video__background-color5);
-      color: var(--str-video__text-color2);
-      cursor: not-allowed;
-    }
-  }
-}
diff --git a/packages/styling/src/Menu/Menu-layout.scss b/packages/styling/src/Menu/Menu-layout.scss
index 19a6cfc55e..74d5383a34 100644
--- a/packages/styling/src/Menu/Menu-layout.scss
+++ b/packages/styling/src/Menu/Menu-layout.scss
@@ -1,3 +1,9 @@
 .str-video__menu-container {
   z-index: 2;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
diff --git a/packages/styling/src/Menu/Menu-theme.scss b/packages/styling/src/Menu/Menu-theme.scss
index 462fbb9051..2cb27a5fbd 100644
--- a/packages/styling/src/Menu/Menu-theme.scss
+++ b/packages/styling/src/Menu/Menu-theme.scss
@@ -1,3 +1,4 @@
 .str-video__menu-container {
-  box-shadow: 0px 0px 5px var(--str-video__background-color1);
+  background-color: var(--str-video__base-color7);
+  border-radius: var(--str-video__border-radius-lg);
 }
diff --git a/packages/styling/src/Menu/Portal-layout.scss b/packages/styling/src/Menu/Portal-layout.scss
new file mode 100644
index 0000000000..9c482cac63
--- /dev/null
+++ b/packages/styling/src/Menu/Portal-layout.scss
@@ -0,0 +1,21 @@
+.str-video__portal {
+  position: fixed;
+  z-index: 1;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--str-video__backdrop1);
+
+  left: 0;
+  top: 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+.str-video__portal-content {
+  z-index: 2;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/packages/styling/src/Menu/index.scss b/packages/styling/src/Menu/index.scss
index 1c8f875d28..c0bec613e7 100644
--- a/packages/styling/src/Menu/index.scss
+++ b/packages/styling/src/Menu/index.scss
@@ -1,4 +1,5 @@
-@import "Menu-layout";
-@import "Menu-theme";
-@import "GenericMenu-layout";
-@import "GenericMenu-theme";
\ No newline at end of file
+@import 'Menu-layout';
+@import 'Portal-layout';
+@import 'Menu-theme';
+@import 'GenericMenu-layout';
+@import 'GenericMenu-theme';
diff --git a/packages/styling/src/Notification/Notification-layout.scss b/packages/styling/src/Notification/Notification-layout.scss
index 240fada6cb..6f27cc4094 100644
--- a/packages/styling/src/Notification/Notification-layout.scss
+++ b/packages/styling/src/Notification/Notification-layout.scss
@@ -13,4 +13,14 @@
   .str-video__notification__message {
     flex: 1;
   }
+
+  .str-video__notification__close {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }
diff --git a/packages/styling/src/ParticipantView/ParticipantView-layout.scss b/packages/styling/src/ParticipantView/ParticipantView-layout.scss
index 4282601048..81581ab99d 100644
--- a/packages/styling/src/ParticipantView/ParticipantView-layout.scss
+++ b/packages/styling/src/ParticipantView/ParticipantView-layout.scss
@@ -17,7 +17,6 @@ $scope-name: 'str-video__participant-view';
     outline: 2px solid var(--str-video__primary-color);
   }
 
-  .str-video__participant-details,
   .str-video__call-controls__button {
     transition: opacity 200ms ease-out;
     opacity: 0.3;
@@ -25,7 +24,6 @@ $scope-name: 'str-video__participant-view';
   }
 
   &:hover {
-    .str-video__participant-details,
     .str-video__call-controls__button {
       opacity: 1;
     }
@@ -34,28 +32,30 @@ $scope-name: 'str-video__participant-view';
   & > .str-video__call-controls__button {
     position: absolute;
     top: 0.875rem;
-    right: 0.875rem;
+    left: 0.875rem;
     padding: 0.3rem;
   }
 
   .str-video__participant-details {
     position: absolute;
-    left: 0.875rem;
-    bottom: 0.875rem;
+    left: 0;
+    bottom: 0;
     display: flex;
     align-items: center;
-    gap: 0.3125rem;
-    border-radius: var(--str-video__border-radius-xs);
+    gap: var(--str-video__spacing-sm);
+    border-radius: 0 var(--str-video__border-radius-xs) 0
+      var(--str-video__border-radius-sm);
     background-color: var(--str-video__background-color4);
 
     .str-video__participant-details__name {
       display: flex;
       align-items: center;
-      gap: 0.3125rem;
+      gap: var(--str-video__spacing-sm);
       padding: 4px 6px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      font-size: var(--str-video__font-size-sm);
 
       @mixin icon {
         $icon-size: 1rem;
@@ -72,19 +72,6 @@ $scope-name: 'str-video__participant-view';
         -webkit-mask-image: var(--str-video__icon--mic-off);
       }
 
-      .str-video__participant-details__name--dominant_speaker {
-        @include icon();
-        mask-image: var(--str-video__icon--dominant-speaker);
-        -webkit-mask-image: var(--str-video__icon--dominant-speaker);
-
-        mask-size: contain;
-        -webkit-mask-size: contain;
-        mask-repeat: no-repeat;
-        -webkit-mask-repeat: no-repeat;
-        mask-position: center;
-        -webkit-mask-position: center;
-      }
-
       .str-video__participant-details__name--video-muted {
         @include icon();
         mask-image: var(--str-video__icon--camera-off);
@@ -92,6 +79,7 @@ $scope-name: 'str-video__participant-view';
       }
 
       .str-video__participant-details__name--pinned {
+        cursor: pointer;
         @include icon();
         width: 0.8rem;
         -webkit-mask-size: 0.8rem;
@@ -112,22 +100,114 @@ $scope-name: 'str-video__participant-view';
         margin-right: 0.625rem;
       }
     }
+  }
 
-    .str-video__participant-details__connection-quality {
-      width: 1.5rem;
-      height: 1.5rem;
-      display: block;
-      background-size: cover;
+  .str-video__participant-details__connection-quality {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    border-radius: var(--str-video__border-radius-sm) 0
+      var(--str-video__border-radius-sm) 0;
+
+    width: 24px;
+    height: 24px;
+    display: block;
+    background-size: cover;
+    background-color: var(--str-video__background-color4);
 
-      &--poor {
-        background-image: var(--str-video__icon--connection-quality-poor);
+    &--poor {
+      background-image: var(--str-video__icon--connection-quality-poor);
+    }
+    &--good {
+      background-image: var(--str-video__icon--connection-quality-good);
+    }
+    &--excellent {
+      background-image: var(--str-video__icon--connection-quality-excellent);
+    }
+  }
+}
+
+.str-video__speech-indicator {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1px;
+  height: 16px;
+
+  .str-video__speech-indicator__bar {
+    width: 3px;
+    height: 20%;
+    background-color: var(--str-video__primary-color);
+    border-radius: 2px;
+    animation-duration: 0.4s;
+    animation-iteration-count: 1;
+    animation-name: speech-indicator-silence;
+    animation-timing-function: ease-in-out;
+  }
+
+  &.str-video__speech-indicator--dominant {
+    .str-video__speech-indicator__bar {
+      background-color: var(--str-video__primary-color);
+    }
+  }
+
+  &.str-video__speech-indicator--speaking {
+    .str-video__speech-indicator__bar {
+      height: 100%;
+      animation-iteration-count: infinite;
+
+      &:nth-child(1) {
+        height: 70%;
+        animation-duration: 0.8s;
+        animation-name: speech-indicator-quiet;
       }
-      &--good {
-        background-image: var(--str-video__icon--connection-quality-good);
+      &:nth-child(2) {
+        height: 80%;
+        animation-duration: 1s;
+        animation-name: speech-indicator-loud;
       }
-      &--excellent {
-        background-image: var(--str-video__icon--connection-quality-excellent);
+      &:nth-child(3) {
+        height: 60%;
+        animation-duration: 0.9s;
+        animation-name: speech-indicator-quiet;
       }
     }
   }
+
+  @keyframes speech-indicator-silence {
+    25% {
+      transform: scaleY(2);
+    }
+    50% {
+      transform: scaleY(2.5);
+    }
+    75% {
+      transform: scaleY(1);
+    }
+  }
+
+  @keyframes speech-indicator-quiet {
+    25% {
+      transform: scaleY(0.5);
+    }
+    50% {
+      transform: scaleY(0.3);
+    }
+    75% {
+      transform: scaleY(0.5);
+    }
+  }
+
+  @keyframes speech-indicator-loud {
+    25% {
+      transform: scaleY(1);
+    }
+    50% {
+      transform: scaleY(0.45);
+    }
+    75% {
+      transform: scaleY(1.1);
+    }
+  }
 }
diff --git a/packages/styling/src/Reaction/Reaction-layout.scss b/packages/styling/src/Reaction/Reaction-layout.scss
index a7772a96ed..a9f8b79492 100644
--- a/packages/styling/src/Reaction/Reaction-layout.scss
+++ b/packages/styling/src/Reaction/Reaction-layout.scss
@@ -1,7 +1,7 @@
 .str-video__reaction {
   position: absolute;
   right: 0.875rem;
-  bottom: 0.875rem;
+  top: 0.875rem;
 
   .str-video__reaction__emoji {
     display: flex;
diff --git a/packages/styling/src/Search/SearchInput-theme.scss b/packages/styling/src/Search/SearchInput-theme.scss
index 90c5b1ed17..f2334e49c8 100644
--- a/packages/styling/src/Search/SearchInput-theme.scss
+++ b/packages/styling/src/Search/SearchInput-theme.scss
@@ -47,6 +47,12 @@
   }
   .str-video__search-input__clear-btn {
     background-color: transparent;
+    border-radius: var(--str-video__border-radius-circle);
+    border: none;
+
+    &:hover {
+      cursor: pointer;
+    }
 
     .str-video__search-input__icon--active {
       @include utils.apply-mask-image(
diff --git a/packages/styling/src/Tooltip/Tooltip-theme.scss b/packages/styling/src/Tooltip/Tooltip-theme.scss
index ece99535e3..63c4aa9396 100644
--- a/packages/styling/src/Tooltip/Tooltip-theme.scss
+++ b/packages/styling/src/Tooltip/Tooltip-theme.scss
@@ -35,10 +35,3 @@
     background-color: var(--str-video__tooltip-background-color);
   }
 }
-
-.str-video__copy-to-clipboard-button__popup {
-  color: var(--str-video__text-color1);
-  background-color: var(--str-video__primary-color);
-  font-size: 12px;
-  box-shadow: none;
-}
diff --git a/packages/styling/src/_base.scss b/packages/styling/src/_base.scss
index 7b327cde13..a80cbcbcf4 100644
--- a/packages/styling/src/_base.scss
+++ b/packages/styling/src/_base.scss
@@ -4,25 +4,4 @@
   *::after {
     box-sizing: border-box;
   }
-
-  button {
-    cursor: pointer;
-    border-style: none;
-    box-shadow: none;
-  }
-}
-
-.str-video {
-  .ngxp__container {
-    opacity: 1;
-    z-index: 1;
-    padding: 0;
-    border: none;
-  }
-
-  .ngxp__container > .ngxp__arrow,
-  .ngxp__container > .ngxp__arrow:before {
-    width: 0;
-    height: 0;
-  }
 }
diff --git a/packages/styling/src/_global-theme-variables.scss b/packages/styling/src/_global-theme-variables.scss
index 6db798bea9..0b7126b112 100644
--- a/packages/styling/src/_global-theme-variables.scss
+++ b/packages/styling/src/_global-theme-variables.scss
@@ -1,13 +1,91 @@
 .str-video {
+  // Brand colors
+  --str-video__brand-color1: #005fff;
+  --str-video__brand-color2: #69e5f6;
+  --str-video__brand-color3: #00e2a1;
+  --str-video__brand-color4: #ffd646;
+  --str-video__brand-color5: #dc433b;
+  --str_video__brand-color6: #b38af8;
+
+  //Base colors
+  --str-video__base-color1: #e3e4e5;
+  --str-video__base-color2: #979ca0;
+  --str-video__base-color3: #4c535b;
+  --str-video__base-color4: #000000;
+  --str-video__base-color5: #0c0d0e;
+  --str-video__base-color6: #19232d;
+  --str-video__base-color7: #101213;
+
+  //Backdrops
+  --str-video__backdrop1: rgba(0, 0, 0, 0.5);
+
+  //Button colors:
+  --str-video__button-default-base: #19232d;
+  --str-video__button-default-hover: #4c535b;
+  --str-video__button-default-pressed: #0c0d0e;
+  --str-video__button-default-active: #19232d;
+  --str-video__button-default-disabled: #1e262e;
+
+  --str-video__button-primary-base: #19232d;
+  --str-video__button-primary-hover: #4c8fff;
+  --str-video__button-primary-pressed: #0c48ab;
+  --str-video__button-primary-active: #005fff;
+
+  --str-video__button-secondary-base: #19232d;
+  --str-video__button-secondary-hover: #e96962;
+  --str-video__button-secondary-pressed: #6a3233;
+  --str-video__button-secondary-active: #dc433b;
+
+  --str-video__button-tertiary-base: #dc433b;
+  --str-video__button-tertiary-hover: #e96962;
+  --str-video__button-tertiary-pressed: #6a3233;
+  --str-video__button-tertiary-active: #31292f;
+
+  //Icon colors:
+  --str-video__icon-default: #b0b4b7;
+  --str-video__icon-hover: #e3e4e5;
+  --str-video__icon-pressed: #656b72;
+  --str-video__icon-active: #005fff;
+  --str-video__icon-alert: #dc433b;
+  --str-video__icon-disabled: #323b44;
+
+  //Alerts colors:
+  --str-video__alert-success: #00e2a1;
+  --str-video__alert-caution: #ffd646;
+  --str-video__alert-warning: #dc433b;
+
+  //Alerts backgrounds:
+  --str-video__alert-success-background: rgba(0, 226, 161, 0.5);
+  --str-video__alert-caution-background: rgba(255, 214, 70, 0.5);
+  --str-video__alert-warning-background: rgba(220, 67, 59, 0.5);
+
+  //Font sizes
+  --str-video__font-size-xxs: 0.625rem;
+  --str-video__font-size-xs: 0.75rem;
+  --str-video__font-size-sm: 0.875rem;
+  --str-video__font-size-md: 1rem;
+  --str-video__font-size-lg: 1.125rem;
+  --str-video__font-size-xl: 1.25rem;
+  --str-video__font-size-xxl: 1.5rem;
+
   // Border raduiuses
   --str-video__border-radius-xxs: 4px;
   --str-video__border-radius-xs: 8px;
   --str-video__border-radius-sm: 12px;
   --str-video__border-radius-md: 18px;
-  --str-video__border-radius-lg: 20px;
+  --str-video__border-radius-lg: 24px;
   --str-video__border-radius-xl: 30px;
+  --str-video__border-radius-xxl: 48px;
   --str-video__border-radius-circle: 999px;
 
+  // spacing
+  --str-video__spacing-xxs: 4px;
+  --str-video__spacing-xs: 6px;
+  --str-video__spacing-sm: 8px;
+  --str-video__spacing-md: 12px;
+  --str-video__spacing-lg: 16px;
+  --str-video__spacing-xl: 20px;
+
   // Colors
   // Main colors
   --str-video__primary-color: #005fff;
@@ -31,7 +109,7 @@
   --str-video__background-color2: #272a30;
   --str-video__background-color3: #f4f4f5;
   --str-video__background-color4: #121416;
-  --str-video__background-color5: #4a5059;
+  --str-video__background-color5: #1d2938;
   --str-video__background-color6: #b4b7bb;
   --str-video__background-color7: #72767e;
   --str-video__overlay-color: rgba(39, 42, 48, 0.75);
@@ -39,44 +117,74 @@
   --str-video__livestream-overlay-color-hovered: rgba(39, 42, 48, 0.5);
 
   // Icons - base64 encoded SVGs
+
   --str-video__icon--call-accept: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNy41MSAxMi4zODJDMTYuMjggMTIuMzgyIDE1LjA5IDEyLjE4MiAxMy45OCAxMS44MjJDMTMuNjMgMTEuNzAyIDEzLjI0IDExLjc5MiAxMi45NyAxMi4wNjJMMTEuNCAxNC4wMzJDOC41NyAxMi42ODIgNS45MiAxMC4xMzIgNC41MSA3LjIwMTk1TDYuNDYgNS41NDE5NUM2LjczIDUuMjYxOTUgNi44MSA0Ljg3MTk1IDYuNyA0LjUyMTk1QzYuMzMgMy40MTE5NSA2LjE0IDIuMjIxOTUgNi4xNCAwLjk5MTk1M0M2LjE0IDAuNDUxOTUzIDUuNjkgMC4wMDE5NTMxMyA1LjE1IDAuMDAxOTUzMTNIMS42OUMxLjE1IDAuMDAxOTUzMTIgMC41IDAuMjQxOTUzIDAuNSAwLjk5MTk1M0MwLjUgMTAuMjgyIDguMjMgMTguMDAyIDE3LjUxIDE4LjAwMkMxOC4yMiAxOC4wMDIgMTguNSAxNy4zNzIgMTguNSAxNi44MjJWMTMuMzcyQzE4LjUgMTIuODMyIDE4LjA1IDEyLjM4MiAxNy41MSAxMi4zODJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
-  --str-video__icon--call-end: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAyNiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDIuNDY4NzRDMTEuMzMzMyAyLjQ2ODc0IDkuNzE4NzUgMi43MjkxNiA4LjIwODMzIDMuMjE4NzRWNi40NDc5MUM4LjIwODMzIDYuODU0MTYgNy45Njg3NSA3LjIxODc0IDcuNjI1IDcuMzg1NDFDNi42MDQxNyA3Ljg5NTgzIDUuNjc3MDggOC41NTIwOCA0Ljg1NDE3IDkuMzEyNDlDNC42NjY2NyA5LjQ5OTk5IDQuNDA2MjUgOS42MDQxNiA0LjEyNSA5LjYwNDE2QzMuODMzMzMgOS42MDQxNiAzLjU3MjkyIDkuNDg5NTggMy4zODU0MiA5LjMwMjA4TDAuODAyMDgzIDYuNzE4NzRDMC42MTQ1ODMgNi41NDE2NiAwLjUgNi4yODEyNCAwLjUgNS45ODk1N0MwLjUgNS42OTc5MSAwLjYxNDU4MyA1LjQzNzQ5IDAuODAyMDgzIDUuMjQ5OTlDMy45NzkxNyAyLjIzOTU3IDguMjcwODMgMC4zODU0MDYgMTMgMC4zODU0MDZDMTcuNzI5MiAwLjM4NTQwNiAyMi4wMjA4IDIuMjM5NTcgMjUuMTk3OSA1LjI0OTk5QzI1LjM4NTQgNS40Mzc0OSAyNS41IDUuNjk3OTEgMjUuNSA1Ljk4OTU3QzI1LjUgNi4yODEyNCAyNS4zODU0IDYuNTQxNjYgMjUuMTk3OSA2LjcyOTE2TDIyLjYxNDYgOS4zMTI0OUMyMi40MjcxIDkuNDk5OTkgMjIuMTY2NyA5LjYxNDU4IDIxLjg3NSA5LjYxNDU4QzIxLjU5MzggOS42MTQ1OCAyMS4zMzMzIDkuNDk5OTkgMjEuMTQ1OCA5LjMyMjkxQzIwLjMyMjkgOC41NTIwOCAxOS4zODU0IDcuOTA2MjQgMTguMzY0NiA3LjM5NTgyQzE4LjAyMDggNy4yMjkxNiAxNy43ODEyIDYuODc0OTkgMTcuNzgxMiA2LjQ1ODMyVjMuMjI5MTZDMTYuMjgxMiAyLjcyOTE2IDE0LjY2NjcgMi40Njg3NCAxMyAyLjQ2ODc0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
-  --str-video__icon--camera: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjExMTEgMTBWNS4zMzMzM0MxOC4xMTExIDQuNiAxNy41NjExIDQgMTYuODg4OSA0SDIuMjIyMjJDMS41NSA0IDEgNC42IDEgNS4zMzMzM1YxOC42NjY3QzEgMTkuNCAxLjU1IDIwIDIuMjIyMjIgMjBIMTYuODg4OUMxNy41NjExIDIwIDE4LjExMTEgMTkuNCAxOC4xMTExIDE4LjY2NjdWMTRMMjEuMjYyOCAxNy40MzgzQzIxLjg3OTEgMTguMTEwNSAyMyAxNy42NzQ1IDIzIDE2Ljc2MjVWNy4yMzc0N0MyMyA2LjMyNTQ2IDIxLjg3OTEgNS44ODk0NSAyMS4yNjI4IDYuNTYxNzRMMTguMTExMSAxMFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
-  --str-video__icon--camera-off: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDYuMjEwNTNMMTguMzY4NCAxMC44NDIxVjYuNzg5NDdDMTguMzY4NCA2LjE1MjYzIDE3Ljg0NzQgNS42MzE1OCAxNy4yMTA1IDUuNjMxNThIMTAuMDU0N0wyMyAxOC41NzY4VjYuMjEwNTNaTTIuNDcwNTMgMUwxIDIuNDcwNTNMNC4xNjEwNSA1LjYzMTU4SDMuMzE1NzlDMi42Nzg5NSA1LjYzMTU4IDIuMTU3ODkgNi4xNTI2MyAyLjE1Nzg5IDYuNzg5NDdWMTguMzY4NEMyLjE1Nzg5IDE5LjAwNTMgMi42Nzg5NSAxOS41MjYzIDMuMzE1NzkgMTkuNTI2M0gxNy4yMTA1QzE3LjQ1MzcgMTkuNTI2MyAxNy42NjIxIDE5LjQzMzcgMTcuODM1OCAxOS4zMTc5TDIxLjUyOTUgMjNMMjMgMjEuNTI5NUwyLjQ3MDUzIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
-  --str-video__icon--caret: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgOSA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTQuNTAwMjQgMC43Njc3QzQuMzYzMjggMC43Njc3IDQuMjM4NCAwLjgyMDA2OCA0LjEzNzY5IDAuOTI4ODMzTDEuMDY4MTEgNC4wNjY4OUMwLjk3OTQ5MSA0LjE1NTUyIDAuOTM1MTggNC4yNjQyOCAwLjkzNTE4IDQuMzk3MjJDMC45MzUxOCA0LjY1OTA2IDEuMTQwNjIgNC44NjQ1IDEuMzk4NDQgNC44NjQ1QzEuNTI3MzQgNC44NjQ1IDEuNjQ4MTkgNC44MTIxMyAxLjczNjgyIDQuNzIzNTFMNC41MDAyNCAxLjg5MTZMNy4yNjM2NyA0LjcyMzUxQzcuMzU2MzIgNC44MTIxMyA3LjQ3MzE0IDQuODY0NSA3LjYwMjA1IDQuODY0NUM3Ljg2Mzg5IDQuODY0NSA4LjA2OTM0IDQuNjU5MDYgOC4wNjkzNCA0LjM5NzIyQzguMDY5MzQgNC4yNjgzMSA4LjAyMSA0LjE1NTUyIDcuOTMyMzcgNC4wNjY4OUw0Ljg2Mjc5IDAuOTI4ODMzQzQuNzU4MDYgMC44MjAwNjggNC42MzcyMSAwLjc2NzcgNC41MDAyNCAwLjc2NzdaIiBmaWxsPSIjNzI3NjdFIi8+Cjwvc3ZnPgo=');
-  --str-video__icon--chat: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDMuMTk1MDdWMTcuNzI2M0g0LjQ2MjVMMyAxOS4xNDMxVjMuMTk1MDdIMjNaTTIzIDAuNzczMTkzSDNDMS42MjUgMC43NzMxOTMgMC41IDEuODYzMDQgMC41IDMuMTk1MDdWMjIuMDczNkMwLjUgMjMuMTUxMyAxLjg1IDIzLjY5NjIgMi42Mzc1IDIyLjkzMzNMNS41IDIwLjE0ODJIMjNDMjQuMzc1IDIwLjE0ODIgMjUuNSAxOS4wNTgzIDI1LjUgMTcuNzI2M1YzLjE5NTA3QzI1LjUgMS44NjMwNCAyNC4zNzUgMC43NzMxOTMgMjMgMC43NzMxOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
-  --str-video__icon--close: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEwIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNOS4xOTk0OSAwLjMwNTY3MUM4LjkzOTQ5IDAuMDQ1NjcwNyA4LjUxOTQ5IDAuMDQ1NjcwNyA4LjI1OTQ5IDAuMzA1NjcxTDQuOTk5NDkgMy41NTlMMS43Mzk0OSAwLjI5OTAwNEMxLjQ3OTQ5IDAuMDM5MDAzOSAxLjA1OTQ5IDAuMDM5MDAzOSAwLjc5OTQ5MiAwLjI5OTAwNEMwLjUzOTQ5MiAwLjU1OTAwNCAwLjUzOTQ5MiAwLjk3OTAwNCAwLjc5OTQ5MiAxLjIzOUw0LjA1OTQ5IDQuNDk5TDAuNzk5NDkyIDcuNzU5QzAuNTM5NDkyIDguMDE5IDAuNTM5NDkyIDguNDM5IDAuNzk5NDkyIDguNjk5QzEuMDU5NDkgOC45NTkgMS40Nzk0OSA4Ljk1OSAxLjczOTQ5IDguNjk5TDQuOTk5NDkgNS40MzlMOC4yNTk0OSA4LjY5OUM4LjUxOTQ5IDguOTU5IDguOTM5NDkgOC45NTkgOS4xOTk0OSA4LjY5OUM5LjQ1OTQ5IDguNDM5IDkuNDU5NDkgOC4wMTkgOS4xOTk0OSA3Ljc1OUw1LjkzOTQ5IDQuNDk5TDkuMTk5NDkgMS4yMzlDOS40NTI4MyAwLjk4NTY3MSA5LjQ1MjgzIDAuNTU5MDA0IDkuMTk5NDkgMC4zMDU2NzFaIiBmaWxsPSIjNzI3NjdFIi8+Cjwvc3ZnPgo=');
-  --str-video__icon--connection-quality-poor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC40OTgwNDciIHk9IjAuNTAwOTc3IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI2IiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CjxwYXRoIGQ9Ik0xMi40OTggMTYuNTAxTDEyLjQ5OCAxMS41MDEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik03LjQ5ODA1IDE2LjUwMUw3LjQ5ODA1IDE0LjUwMSIgc3Ryb2tlPSIjRkYzNzQyIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgLz4KPHBhdGggZD0iTTE3LjQ5OCAxNi41MDFMMTcuNDk4IDguNTAwOTgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4K');
-  --str-video__icon--connection-quality-good: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC40OTgwNDciIHk9IjAuNDk5MDIzIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI2IiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CjxwYXRoIGQ9Ik0xMi40OTggMTYuNDk5TDEyLjQ5OCAxMS40OTkiIHN0cm9rZT0iIzAwNkNGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuNDk4MDUgMTYuNDk5TDcuNDk4MDUgMTQuNDk5IiBzdHJva2U9IiMwMDZDRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xNy40OTggMTYuNDk5TDE3LjQ5OCA4LjQ5OTAyIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
-  --str-video__icon--connection-quality-excellent: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC40OTgwNDciIHk9IjAuNDk5MDIzIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI2IiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CjxwYXRoIGQ9Ik0xMi40OTggMTYuNDk5TDEyLjQ5OCAxMS40OTkiIHN0cm9rZT0iIzAwNkNGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuNDk4MDUgMTYuNDk5TDcuNDk4MDUgMTQuNDk5IiBzdHJva2U9IiMwMDZDRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xNy40OTggMTYuNDk5TDE3LjQ5OCA4LjQ5OTAyIiBzdHJva2U9IiMwMDZDRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
-  --str-video__icon--copy: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0zLjUgMCAxOSAxOSI+PHBhdGggZD0iTTExLjQxNSA1LjA2OHY5LjE2YS40NjMuNDYzIDAgMCAxLS40NjIuNDYxSDkuNDc3djEuNDc3YS40NjMuNDYzIDAgMCAxLS40NjIuNDYySDEuMDQ3YS40NjMuNDYzIDAgMCAxLS40NjItLjQ2MlY0Ljk3NmEuNDYzLjQ2MyAwIDAgMSAuNDYyLS40NjJoMS40NzZWMy4wMzdhLjQ2My40NjMgMCAwIDEgLjQ2Mi0uNDYyaDUuOTM3ek04LjM2OSA3Ljg3NEg2LjYyOGEuNTI5LjUyOSAwIDAgMS0uNTI3LS41MjdWNS42MjJIMS42OTN2OS44OTdIOC4zN3ptLTQuNzM3LTQuMTl2LjgzaDMuMzUybDEuMDk1IDEuMDk1YS41MTguNTE4IDAgMCAxLS4wNC0uMlYzLjY4NHptNS44NDUgMy4zMjN2Ni41NzRoLjgzVjUuOTM2aC0xLjc0YS41MTcuNTE3IDAgMCAxLS4yLS4wNHoiLz48L3N2Zz4K');
-  --str-video__icon--dominant-speaker: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAxNCAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMDY4MzU5NCAxMi44NDE5QzAuMDY4MzU5NCAxMy4yMzIzIDAuMzczMDQ3IDEzLjUyNzQgMC43OTE5OTIgMTMuNTI3NEg2LjMxNDQ1TDMuNDEwNCAyMS4zMjU1QzMuMDIwMDIgMjIuMzYzNCA0LjA5NTk1IDIyLjkxNTYgNC43ODE0OSAyMi4wNzc3TDEzLjY3NDYgMTEuMDcwOUMxMy44NDU5IDEwLjg1MTkgMTMuOTMxNiAxMC42NTE5IDEzLjkzMTYgMTAuNDMzQzEzLjkzMTYgMTAuMDMzMSAxMy42MjcgOS43NDc0MSAxMy4yMDggOS43NDc0MUg3LjY4NTU1TDEwLjU4OTYgMS45Mzk3OUMxMC45OCAwLjkwMTk0NyA5LjkwNDA1IDAuMzQ5NzAxIDkuMjE4NTEgMS4xOTcxMUwwLjMzNDk2MSAxMi4yMDM5QzAuMTYzNTc0IDEyLjQxMzQgMC4wNjgzNTk0IDEyLjYxMzQgMC4wNjgzNTk0IDEyLjg0MTlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
-  --str-video__icon--download: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik01MTIgNjY2LjUgMzY3LjIgNTIxLjdsMzYuMi0zNi4yIDgzIDgzVjI1Nmg1MS4ydjMxMi41bDgzLTgzIDM2LjIgMzYuMkw1MTIgNjY2LjV6bS0yMDQuOCA1MC4zVjc2OGg0MDkuNnYtNTEuMkgzMDcuMnoiLz48L3N2Zz4K');
-  --str-video__icon--ellipsis: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4KCTxwYXRoCgkJZD0iTTM1MiAyNTZDMzUyIDIzOC4zIDM2Ni4zIDIyNCAzODQgMjI0QzQwMS43IDIyNCA0MTYgMjM4LjMgNDE2IDI1NkM0MTYgMjczLjcgNDAxLjcgMjg4IDM4NCAyODhDMzY2LjMgMjg4IDM1MiAyNzMuNyAzNTIgMjU2ek0xOTIgMjU2QzE5MiAyMzguMyAyMDYuMyAyMjQgMjI0IDIyNEMyNDEuNyAyMjQgMjU2IDIzOC4zIDI1NiAyNTZDMjU2IDI3My43IDI0MS43IDI4OCAyMjQgMjg4QzIwNi4zIDI4OCAxOTIgMjczLjcgMTkyIDI1NnpNOTYgMjU2Qzk2IDI3My43IDgxLjY3IDI4OCA2NCAyODhDNDYuMzMgMjg4IDMyIDI3My43IDMyIDI1NkMzMiAyMzguMyA0Ni4zMyAyMjQgNjQgMjI0QzgxLjY3IDIyNCA5NiAyMzguMyA5NiAyNTZ6IgoJLz4KPC9zdmc+Cg==');
-  --str-video__icon--film-roll: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzQzLjY1NiA0NTEuMTA5QzQxMCA0MTEuNDM4IDQ1NC40MjIgMzM4LjkwNiA0NTQuNDIyIDI1NmMwLTEyNS40ODQtMTAxLjcxOS0yMjcuMjE5LTIyNy4yMDMtMjI3LjIxOUMxMDEuNzE5IDI4Ljc4MSAwIDEzMC41MTYgMCAyNTZzMTAxLjcxOSAyMjcuMjE5IDIyNy4yMTkgMjI3LjIxOUg1MTJWNDUxLjExSDM0My42NTZ6bS0yNS4xNzItMzA1LjIzNGMyMy41NDctMTMuNTk0IDUzLjY0MS01LjUzMSA2Ny4yMzQgMTguMDE2czUuNTMxIDUzLjY1Ni0xOC4wMTYgNjcuMjVjLTIzLjU0NyAxMy41NzgtNTMuNjQxIDUuNTE2LTY3LjIzNC0xOC4wMTYtMTMuNjA5LTIzLjU2Mi01LjUzLTUzLjY1NiAxOC4wMTYtNjcuMjV6bS0xOC4wMzEgMTUxLjgxM2MxMy42MDktMjMuNTQ3IDQzLjcwMy0zMS42MDkgNjcuMjUtMTguMDE2IDIzLjU0NyAxMy42MDkgMzEuNjA5IDQzLjcwMyAxOC4wMTYgNjcuMjVzLTQzLjY4OCAzMS42MDktNjcuMjUgMTguMDE2Yy0yMy41MzEtMTMuNTk0LTMxLjYxLTQzLjcwNC0xOC4wMTYtNjcuMjV6TTIyNy4yMTkgNzIuMzc1YzI3LjE4OCAwIDQ5LjIxOSAyMi4wMzEgNDkuMjE5IDQ5LjIxOXMtMjIuMDMxIDQ5LjI1LTQ5LjIxOSA0OS4yNS00OS4yNS0yMi4wNjMtNDkuMjUtNDkuMjUgMjIuMDYyLTQ5LjIxOSA0OS4yNS00OS4yMTl6TTI0OS45MzggMjU2YzAgMTIuNTYzLTEwLjE3MiAyMi43MTktMjIuNzE5IDIyLjcxOS0xMi41NjMgMC0yMi43MTktMTAuMTU2LTIyLjcxOS0yMi43MTlzMTAuMTU2LTIyLjcxOSAyMi43MTktMjIuNzE5YzEyLjU0NyAwIDIyLjcxOSAxMC4xNTcgMjIuNzE5IDIyLjcxOXpNNjguNzAzIDE2My44OTFjMTMuNTk0LTIzLjU0NyA0My43MDMtMzEuNjA5IDY3LjI1LTE4LjAxNnMzMS42MDkgNDMuNjg4IDE4LjAxNiA2Ny4yNWMtMTMuNTk0IDIzLjUzMS00My43MDMgMzEuNjA5LTY3LjI1IDE4LjAxNi0yMy41MzEtMTMuNTk0LTMxLjYxLTQzLjcwMy0xOC4wMTYtNjcuMjV6bTY3LjI2NiAyMDEuMDQ3Yy0yMy41NjMgMTMuNTk0LTUzLjY1NiA1LjUzMS02Ny4yNjYtMTguMDE2LTEzLjU3OC0yMy41NDctNS41MTYtNTMuNjU2IDE4LjAxNi02Ny4yNjYgMjMuNTQ3LTEzLjU5NCA1My42NTYtNS41MTYgNjcuMjUgMTguMDMxczUuNTMxIDUzLjY1Ny0xOCA2Ny4yNTF6bTQyIDI0LjI2NWMwLTI3LjE4OCAyMi4wNjMtNDkuMjM0IDQ5LjI1LTQ5LjIzNHM0OS4yMTkgMjIuMDQ3IDQ5LjIxOSA0OS4yMzQtMjIuMDMxIDQ5LjIzNC00OS4yMTkgNDkuMjM0LTQ5LjI1LTIyLjA0Ni00OS4yNS00OS4yMzR6Ii8+PC9zdmc+Cg==');
+  --str-video__icon--call-end: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTQuNTgwMSAxNi4wMzA0TDYuNTgwMSAxNC40NDA0QzcuMDYwMSAxNC4wNjA0IDcuMzQwMSAxMy40ODA0IDcuMzQwMSAxMi44NzA0VjEwLjI3MDRDMTAuMzYwMSA5LjI5MDQgMTMuNjMwMSA5LjI4MDQgMTYuNjYwMSAxMC4yNzA0VjEyLjg4MDRDMTYuNjYwMSAxMy40OTA0IDE2Ljk0MDEgMTQuMDcwNCAxNy40MjAxIDE0LjQ1MDRMMTkuNDEwMSAxNi4wMzA0QzIwLjIxMDEgMTYuNjYwNCAyMS4zNTAxIDE2LjYwMDQgMjIuMDcwMSAxNS44ODA0TDIzLjI5MDEgMTQuNjYwNEMyNC4wOTAxIDEzLjg2MDQgMjQuMDkwMSAxMi41MzA0IDIzLjI0MDEgMTEuNzgwNEMxNi44MzAxIDYuMTIwNCA3LjE3MDEgNi4xMjA0IDAuNzYwMTAzIDExLjc4MDRDLTAuMDg5ODk3IDEyLjUzMDQgLTAuMDg5ODk3IDEzLjg2MDQgMC43MTAxMDMgMTQuNjYwNEwxLjkzMDEgMTUuODgwNEMyLjY0MDEgMTYuNjAwNCAzLjc4MDEgMTYuNjYwNCA0LjU4MDEgMTYuMDMwNFoiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K');
+  --str-video__icon--camera: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3IDEwLjVWN0MxNyA2LjQ1IDE2LjU1IDYgMTYgNkg0QzMuNDUgNiAzIDYuNDUgMyA3VjE3QzMgMTcuNTUgMy40NSAxOCA0IDE4SDE2QzE2LjU1IDE4IDE3IDE3LjU1IDE3IDE3VjEzLjVMMTkuMjkgMTUuNzlDMTkuOTIgMTYuNDIgMjEgMTUuOTcgMjEgMTUuMDhWOC45MUMyMSA4LjAyIDE5LjkyIDcuNTcgMTkuMjkgOC4yTDE3IDEwLjVaIiBmaWxsPSIjQjBCNEI3Ii8+Cjwvc3ZnPgo=');
+  --str-video__icon--camera-off: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjI5MTUgMTQuNzY5OVY5LjQ3OTlDMjEuMjkxNSA4LjU4OTkgMjAuMjExNSA4LjEzOTkgMTkuNTgxNSA4Ljc2OTlMMTcuMjkxNSAxMS4wNjk5VjcuNTY5OUMxNy4yOTE1IDcuMDE5OSAxNi44NDE1IDYuNTY5OSAxNi4yOTE1IDYuNTY5OUgxMC42ODE1TDE5LjU5MTUgMTUuNDc5OUMyMC4yMTE1IDE2LjEwOTkgMjEuMjkxNSAxNS42NTk5IDIxLjI5MTUgMTQuNzY5OVpNMy4wMDE0OCAzLjEyOTlDMi42MTE0OCAzLjUxOTkgMi42MTE0OCA0LjE0OTkgMy4wMDE0OCA0LjUzOTlMNS4wMjE0OCA2LjU2OTlINC4yOTE0OEMzLjc0MTQ4IDYuNTY5OSAzLjI5MTQ4IDcuMDE5OSAzLjI5MTQ4IDcuNTY5OVYxNy41Njk5QzMuMjkxNDggMTguMTE5OSAzLjc0MTQ4IDE4LjU2OTkgNC4yOTE0OCAxOC41Njk5SDE2LjI5MTVDMTYuNTAxNSAxOC41Njk5IDE2LjY4MTUgMTguNDg5OSAxNi44NDE1IDE4LjM4OTlMMTkuMzIxNSAyMC44Njk5QzE5LjcxMTUgMjEuMjU5OSAyMC4zNDE1IDIxLjI1OTkgMjAuNzMxNSAyMC44Njk5QzIxLjEyMTUgMjAuNDc5OSAyMS4xMjE1IDE5Ljg0OTkgMjAuNzMxNSAxOS40NTk5TDQuNDExNDggMy4xMjk5QzQuMDIxNDggMi43Mzk5IDMuMzkxNDggMi43Mzk5IDMuMDAxNDggMy4xMjk5WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K');
+  --str-video__icon--camera-add: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMiAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjU4MzMgOS43MjU1OVY2LjUxNzI1QzE1LjU4MzMgNi4wMTMwOSAxNS4xNzA4IDUuNjAwNTkgMTQuNjY2NyA1LjYwMDU5SDMuNjY2NjdDMy4xNjI1IDUuNjAwNTkgMi43NSA2LjAxMzA5IDIuNzUgNi41MTcyNVYxNS42ODM5QzIuNzUgMTYuMTg4MSAzLjE2MjUgMTYuNjAwNiAzLjY2NjY3IDE2LjYwMDZIMTQuNjY2N0MxNS4xNzA4IDE2LjYwMDYgMTUuNTgzMyAxNi4xODgxIDE1LjU4MzMgMTUuNjgzOVYxMi40NzU2TDE3LjY4MjUgMTQuNTc0OEMxOC4yNiAxNS4xNTIzIDE5LjI1IDE0LjczOTggMTkuMjUgMTMuOTIzOVY4LjI2ODA5QzE5LjI1IDcuNDUyMjUgMTguMjYgNy4wMzk3NSAxNy42ODI1IDcuNjE3MjVMMTUuNTgzMyA5LjcyNTU5Wk0xMS45MTY3IDEyLjAxNzNIMTAuMDgzM1YxMy44NTA2QzEwLjA4MzMgMTQuMzU0OCA5LjY3MDgzIDE0Ljc2NzMgOS4xNjY2NyAxNC43NjczQzguNjYyNSAxNC43NjczIDguMjUgMTQuMzU0OCA4LjI1IDEzLjg1MDZWMTIuMDE3M0g2LjQxNjY3QzUuOTEyNSAxMi4wMTczIDUuNSAxMS42MDQ4IDUuNSAxMS4xMDA2QzUuNSAxMC41OTY0IDUuOTEyNSAxMC4xODM5IDYuNDE2NjcgMTAuMTgzOUg4LjI1VjguMzUwNTlDOC4yNSA3Ljg0NjQyIDguNjYyNSA3LjQzMzkyIDkuMTY2NjcgNy40MzM5MkM5LjY3MDgzIDcuNDMzOTIgMTAuMDgzMyA3Ljg0NjQyIDEwLjA4MzMgOC4zNTA1OVYxMC4xODM5SDExLjkxNjdDMTIuNDIwOCAxMC4xODM5IDEyLjgzMzMgMTAuNTk2NCAxMi44MzMzIDExLjEwMDZDMTIuODMzMyAxMS42MDQ4IDEyLjQyMDggMTIuMDE3MyAxMS45MTY3IDEyLjAxNzNaIiBmaWxsPSIjRkFGQUZBIi8+Cjwvc3ZnPgo=');
+  --str-video__icon--caret: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjU0ODggMTAuNDg4NUw5LjQxMzIxIDguMzMwMThDOS43MzgyMSA4LjAwNTE4IDEwLjI2MzIgOC4wMDUxOCAxMC41ODgyIDguMzMwMThMMTIuNzQ2NSAxMC40ODg1QzEzLjI3MTUgMTEuMDEzNSAxMi44OTY1IDExLjkxMzUgMTIuMTU0OSAxMS45MTM1SDcuODM4MjFDNy4wOTY1NCAxMS45MTM1IDYuNzI5ODggMTEuMDEzNSA3LjI1NDg4IDEwLjQ4ODVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=');
+  --str-video__icon--caret-down: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjU0ODggMTAuNDg4NUw5LjQxMzIxIDguMzMwMThDOS43MzgyMSA4LjAwNTE4IDEwLjI2MzIgOC4wMDUxOCAxMC41ODgyIDguMzMwMThMMTIuNzQ2NSAxMC40ODg1QzEzLjI3MTUgMTEuMDEzNSAxMi44OTY1IDExLjkxMzUgMTIuMTU0OSAxMS45MTM1SDcuODM4MjFDNy4wOTY1NCAxMS45MTM1IDYuNzI5ODggMTEuMDEzNSA3LjI1NDg4IDEwLjQ4ODVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=');
+  --str-video__icon--caret-up: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjU0ODggMTAuNDg4NUw5LjQxMzIxIDguMzMwMThDOS43MzgyMSA4LjAwNTE4IDEwLjI2MzIgOC4wMDUxOCAxMC41ODgyIDguMzMwMThMMTIuNzQ2NSAxMC40ODg1QzEzLjI3MTUgMTEuMDEzNSAxMi44OTY1IDExLjkxMzUgMTIuMTU0OSAxMS45MTM1SDcuODM4MjFDNy4wOTY1NCAxMS45MTM1IDYuNzI5ODggMTEuMDEzNSA3LjI1NDg4IDEwLjQ4ODVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=');
+  --str-video__icon--chat: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIwIDZIMTlWMTRDMTkgMTQuNTUgMTguNTUgMTUgMTggMTVINlYxNkM2IDE3LjEgNi45IDE4IDggMThIMThMMjIgMjJWOEMyMiA2LjkgMjEuMSA2IDIwIDZaTTE3IDExVjRDMTcgMi45IDE2LjEgMiAxNSAySDRDMi45IDIgMiAyLjkgMiA0VjE3TDYgMTNIMTVDMTYuMSAxMyAxNyAxMi4xIDE3IDExWiIgZmlsbD0iI0IwQjRCNyIvPgo8L2c+Cjwvc3ZnPgo=');
+  --str-video__icon--chevron-down: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNDEgOC4yOTUwNEwxMiAxMi44NzVMMTYuNTkgOC4yOTUwNEwxOCA5LjcwNTA0TDEyIDE1LjcwNUw2IDkuNzA1MDRMNy40MSA4LjI5NTA0WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K');
+  --str-video__icon--chevron-up: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNDEgMTUuNzA1TDEyIDExLjEyNUwxNi41OSAxNS43MDVMMTggMTQuMjk1TDEyIDguMjk1MDRMNiAxNC4yOTVMNy40MSAxNS43MDVaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=');
+  --str-video__icon--chevron-right: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTYuOTk3NjcgMjEuMDE0OUM3LjQ4NzY3IDIxLjUwNDkgOC4yNzc2NyAyMS41MDQ5IDguNzY3NjcgMjEuMDE0OUwxNy4wNzc3IDEyLjcwNDlDMTcuNDY3NyAxMi4zMTQ5IDE3LjQ2NzcgMTEuNjg0OSAxNy4wNzc3IDExLjI5NDlMOC43Njc2NyAyLjk4NDkzQzguMjc3NjcgMi40OTQ5MyA3LjQ4NzY3IDIuNDk0OTMgNi45OTc2NyAyLjk4NDkzQzYuNTA3NjcgMy40NzQ5MyA2LjUwNzY3IDQuMjY0OTMgNi45OTc2NyA0Ljc1NDkzTDE0LjIzNzcgMTIuMDA0OUw2Ljk4NzY3IDE5LjI1NDlDNi41MDc2NyAxOS43MzQ5IDYuNTA3NjcgMjAuNTM0OSA2Ljk5NzY3IDIxLjAxNDlaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--call-latency: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjAwMjkgMTcuOTk4OEMxMi41NTUyIDE3Ljk5ODggMTMuMDAyOSAxNy41NTExIDEzLjAwMjkgMTYuOTk4OEMxMy4wMDI5IDE2LjQ0NjUgMTIuNTU1MiAxNS45OTg4IDEyLjAwMjkgMTUuOTk4OEMxMS40NTA2IDE1Ljk5ODggMTEuMDAyOSAxNi40NDY1IDExLjAwMjkgMTYuOTk4OEMxMS4wMDI5IDE3LjU1MTEgMTEuNDUwNiAxNy45OTg4IDEyLjAwMjkgMTcuOTk4OFoiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTcuMDAyOTMgMTIuOTk4OEM3LjU1NTIxIDEyLjk5ODggOC4wMDI5MyAxMi41NTExIDguMDAyOTMgMTEuOTk4OEM4LjAwMjkzIDExLjQ0NjUgNy41NTUyMSAxMC45OTg4IDcuMDAyOTMgMTAuOTk4OEM2LjQ1MDY0IDEwLjk5ODggNi4wMDI5MyAxMS40NDY1IDYuMDAyOTMgMTEuOTk4OEM2LjAwMjkzIDEyLjU1MTEgNi40NTA2NCAxMi45OTg4IDcuMDAyOTMgMTIuOTk4OFoiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTE3LjAwMjkgMTIuOTk4OEMxNy41NTUyIDEyLjk5ODggMTguMDAyOSAxMi41NTExIDE4LjAwMjkgMTEuOTk4OEMxOC4wMDI5IDExLjQ0NjUgMTcuNTU1MiAxMC45OTg4IDE3LjAwMjkgMTAuOTk4OEMxNi40NTA2IDEwLjk5ODggMTYuMDAyOSAxMS40NDY1IDE2LjAwMjkgMTEuOTk4OEMxNi4wMDI5IDEyLjU1MTEgMTYuNDUwNiAxMi45OTg4IDE3LjAwMjkgMTIuOTk4OFoiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTEyLjAwMjkgMi45OTg3OEMxMS40NTI5IDIuOTk4NzggMTEuMDAyOSAzLjQ0ODc4IDExLjAwMjkgMy45OTg3OFY1Ljk5ODc4QzExLjAwMjkgNi41NDg3OCAxMS40NTI5IDYuOTk4NzggMTIuMDAyOSA2Ljk5ODc4QzEyLjU1MjkgNi45OTg3OCAxMy4wMDI5IDYuNTQ4NzggMTMuMDAyOSA1Ljk5ODc4VjUuMDc4NzhDMTYuMzEyOSA1LjU1ODc4IDE4Ljg3MjkgOC4zMjg3OCAxOS4wMDI5IDExLjczODhDMTkuMTQyOSAxNS41ODg4IDE1Ljk3MjkgMTguOTM4OCAxMi4xMjI5IDE4Ljk5ODhDOC4xOTI5MyAxOS4wNTg4IDUuMDAyOTMgMTUuOTA4OCA1LjAwMjkzIDExLjk5ODhDNS4wMDI5MyAxMC4zMTg4IDUuNTkyOTMgOC43Nzg3OCA2LjU4MjkzIDcuNTc4NzhMMTEuMjkyOSAxMi4yOTg4QzExLjY4MjkgMTIuNjg4OCAxMi4zMTI5IDEyLjY4ODggMTIuNzAyOSAxMi4yOTg4QzEzLjA5MjkgMTEuOTA4OCAxMy4wOTI5IDExLjI3ODggMTIuNzAyOSAxMC44ODg4TDcuMjYyOTMgNS40NTg3OEM2Ljg4MjkzIDUuMDc4NzggNi4yNjI5MyA1LjA2ODc4IDUuODYyOTMgNS40Mzg3OEM0LjEwMjkzIDcuMDY4NzggMy4wMDI5MyA5LjM5ODc4IDMuMDAyOTMgMTEuOTk4OEMzLjAwMjkzIDE3LjAzODggNy4xNDI5MyAyMS4xMTg4IDEyLjIxMjkgMjAuOTk4OEMxNi45MTI5IDIwLjg4ODggMjAuODQyOSAxNi45ODg4IDIwLjk5MjkgMTIuMjg4OEMyMS4xNjI5IDcuMTg4NzggMTcuMDcyOSAyLjk5ODc4IDEyLjAwMjkgMi45OTg3OFoiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==');
+  --str-video__icon--close: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE4LjI5OTcgNS43MDk5N0MxNy45MDk3IDUuMzE5OTcgMTcuMjc5NyA1LjMxOTk3IDE2Ljg4OTcgNS43MDk5N0wxMS45OTk3IDEwLjU5TDcuMTA5NzMgNS42OTk5N0M2LjcxOTczIDUuMzA5OTcgNi4wODk3MyA1LjMwOTk3IDUuNjk5NzMgNS42OTk5N0M1LjMwOTczIDYuMDg5OTcgNS4zMDk3MyA2LjcxOTk3IDUuNjk5NzMgNy4xMDk5N0wxMC41ODk3IDEyTDUuNjk5NzMgMTYuODlDNS4zMDk3MyAxNy4yOCA1LjMwOTczIDE3LjkxIDUuNjk5NzMgMTguM0M2LjA4OTczIDE4LjY5IDYuNzE5NzMgMTguNjkgNy4xMDk3MyAxOC4zTDExLjk5OTcgMTMuNDFMMTYuODg5NyAxOC4zQzE3LjI3OTcgMTguNjkgMTcuOTA5NyAxOC42OSAxOC4yOTk3IDE4LjNDMTguNjg5NyAxNy45MSAxOC42ODk3IDE3LjI4IDE4LjI5OTcgMTYuODlMMTMuNDA5NyAxMkwxOC4yOTk3IDcuMTA5OTdDMTguNjc5NyA2LjcyOTk3IDE4LjY3OTcgNi4wODk5NyAxOC4yOTk3IDUuNzA5OTdaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--connection-quality-poor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjU0ODgzIDYuMjVDMC4yNTQ4ODMgMi45MzYyOSAyLjk0MTE3IDAuMjUgNi4yNTQ4OCAwLjI1SDMyLjI1NDlWMjYuMjVDMzIuMjU0OSAyOS41NjM3IDI5LjU2ODYgMzIuMjUgMjYuMjU0OSAzMi4yNUgwLjI1NDg4M1Y2LjI1WiIgZmlsbD0iIzBDMEQwRSIgZmlsbC1vcGFjaXR5PSIwLjY1Ii8+CjxwYXRoIGQ9Ik0xNi4yNTQ5IDIwLjI1TDE2LjI1NDkgMTUuMjUiIHN0cm9rZT0iI0UzRTRFNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjI1NDkgMjAuMjVMMTEuMjU0OSAxOC4yNSIgc3Ryb2tlPSIjREM0MzNCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEuMjU0OSAyMC4yNUwyMS4yNTQ5IDEyLjI1IiBzdHJva2U9IiNFM0U0RTUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
+  --str-video__icon--connection-quality-good: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuOTI0ODA1IDYuMjVDMC45MjQ4MDUgMi45MzYyOSAzLjYxMTEgMC4yNSA2LjkyNDggMC4yNUgzMi45MjQ4VjI2LjI1QzMyLjkyNDggMjkuNTYzNyAzMC4yMzg1IDMyLjI1IDI2LjkyNDggMzIuMjVIMC45MjQ4MDVWNi4yNVoiIGZpbGw9IiMwQzBEMEUiIGZpbGwtb3BhY2l0eT0iMC42NSIvPgo8cGF0aCBkPSJNMTYuOTI0OCAyMC4yNUwxNi45MjQ4IDE1LjI1IiBzdHJva2U9IiMwMEUyQTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMS45MjQ4IDIwLjI1TDExLjkyNDggMTguMjUiIHN0cm9rZT0iIzAwRTJBMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIxLjkyNDggMjAuMjVMMjEuOTI0OCAxMi4yNSIgc3Ryb2tlPSIjRTNFNEU1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
+  --str-video__icon--connection-quality-excellent: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjU0ODgzIDYuMjVDMC4yNTQ4ODMgMi45MzYyOSAyLjk0MTE3IDAuMjUgNi4yNTQ4OCAwLjI1SDMyLjI1NDlWMjYuMjVDMzIuMjU0OSAyOS41NjM3IDI5LjU2ODYgMzIuMjUgMjYuMjU0OSAzMi4yNUgwLjI1NDg4M1Y2LjI1WiIgZmlsbD0iIzBDMEQwRSIgZmlsbC1vcGFjaXR5PSIwLjY1Ii8+CjxwYXRoIGQ9Ik0xNi4yNTQ5IDIwLjI1TDE2LjI1NDkgMTUuMjUiIHN0cm9rZT0iIzAwRTJBMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjI1NDkgMjAuMjVMMTEuMjU0OSAxOC4yNSIgc3Ryb2tlPSIjMDBFMkExIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEuMjU0OSAyMC4yNUwyMS4yNTQ5IDEyLjI1IiBzdHJva2U9IiMwMEUyQTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
+  --str-video__icon--copy: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNvcHlfYWxsIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE4Ljk2NDggMi40OTY1OEg5Ljk2NDg0QzguODY0ODQgMi40OTY1OCA3Ljk2NDg0IDMuMzk2NTggNy45NjQ4NCA0LjQ5NjU4VjE2LjQ5NjZDNy45NjQ4NCAxNy41OTY2IDguODY0ODQgMTguNDk2NiA5Ljk2NDg0IDE4LjQ5NjZIMTguOTY0OEMyMC4wNjQ4IDE4LjQ5NjYgMjAuOTY0OCAxNy41OTY2IDIwLjk2NDggMTYuNDk2NlY0LjQ5NjU4QzIwLjk2NDggMy4zOTY1OCAyMC4wNjQ4IDIuNDk2NTggMTguOTY0OCAyLjQ5NjU4Wk0xOC45NjQ4IDE2LjQ5NjZIOS45NjQ4NFY0LjQ5NjU4SDE4Ljk2NDhWMTYuNDk2NlpNMy45NjQ4NCAxNS40OTY2VjEzLjQ5NjZINS45NjQ4NFYxNS40OTY2SDMuOTY0ODRaTTMuOTY0ODQgOS45OTY1OEg1Ljk2NDg0VjExLjk5NjZIMy45NjQ4NFY5Ljk5NjU4Wk0xMC45NjQ4IDIwLjQ5NjZIMTIuOTY0OFYyMi40OTY2SDEwLjk2NDhWMjAuNDk2NlpNMy45NjQ4NCAxOC45OTY2VjE2Ljk5NjZINS45NjQ4NFYxOC45OTY2SDMuOTY0ODRaTTUuOTY0ODQgMjIuNDk2NkM0Ljg2NDg0IDIyLjQ5NjYgMy45NjQ4NCAyMS41OTY2IDMuOTY0ODQgMjAuNDk2Nkg1Ljk2NDg0VjIyLjQ5NjZaTTkuNDY0ODQgMjIuNDk2Nkg3LjQ2NDg0VjIwLjQ5NjZIOS40NjQ4NFYyMi40OTY2Wk0xNC40NjQ4IDIyLjQ5NjZWMjAuNDk2NkgxNi40NjQ4QzE2LjQ2NDggMjEuNTk2NiAxNS41NjQ4IDIyLjQ5NjYgMTQuNDY0OCAyMi40OTY2Wk01Ljk2NDg0IDYuNDk2NThWOC40OTY1OEgzLjk2NDg0QzMuOTY0ODQgNy4zOTY1OCA0Ljg2NDg0IDYuNDk2NTggNS45NjQ4NCA2LjQ5NjU4WiIgZmlsbD0iI0UzRTRFNSIvPgo8L2c+Cjwvc3ZnPgo=');
+  --str-video__icon--download: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyOCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjA2MDcgNi4zMzM1SDE2LjAwMDdWMy4wMDAxNkMxNi4wMDA3IDIuNjMzNSAxNS43MDA3IDIuMzMzNSAxNS4zMzQgMi4zMzM1SDEyLjY2NzNDMTIuMzAwNyAyLjMzMzUgMTIuMDAwNyAyLjYzMzUgMTIuMDAwNyAzLjAwMDE2VjYuMzMzNUgxMC45NDA3QzEwLjM0NzMgNi4zMzM1IDEwLjA0NzMgNy4wNTM1IDEwLjQ2NzMgNy40NzM1TDEzLjUyNzMgMTAuNTMzNUMxMy43ODczIDEwLjc5MzUgMTQuMjA3MyAxMC43OTM1IDE0LjQ2NzMgMTAuNTMzNUwxNy41MjczIDcuNDczNUMxNy45NDczIDcuMDUzNSAxNy42NTQgNi4zMzM1IDE3LjA2MDcgNi4zMzM1Wk05LjMzMzk4IDEzLjAwMDJDOS4zMzM5OCAxMy4zNjY4IDkuNjMzOTggMTMuNjY2OCAxMC4wMDA3IDEzLjY2NjhIMTguMDAwN0MxOC4zNjczIDEzLjY2NjggMTguNjY3MyAxMy4zNjY4IDE4LjY2NzMgMTMuMDAwMkMxOC42NjczIDEyLjYzMzUgMTguMzY3MyAxMi4zMzM1IDE4LjAwMDcgMTIuMzMzNUgxMC4wMDA3QzkuNjMzOTggMTIuMzMzNSA5LjMzMzk4IDEyLjYzMzUgOS4zMzM5OCAxMy4wMDAyWiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K');
+  --str-video__icon--developer: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNvZGUiPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNNy4yNDkwOSAxMy4yNUwzLjk5OTA5IDEwTDcuMjQ5MDkgNi43NTAwMkM3LjU3NDA5IDYuNDI1MDIgNy41NzQwOSA1LjkwODM1IDcuMjQ5MDkgNS41ODMzNUM2LjkyNDA5IDUuMjU4MzUgNi40MDc0MiA1LjI1ODM1IDYuMDgyNDIgNS41ODMzNUwyLjI1NzQyIDkuNDA4MzVDMS45MzI0MiA5LjczMzM1IDEuOTMyNDIgMTAuMjU4MyAyLjI1NzQyIDEwLjU4MzNMNi4wODI0MiAxNC40MTY3QzYuNDA3NDIgMTQuNzQxNyA2LjkyNDA5IDE0Ljc0MTcgNy4yNDkwOSAxNC40MTY3QzcuNTc0MDkgMTQuMDkxNyA3LjU3NDA5IDEzLjU3NSA3LjI0OTA5IDEzLjI1Wk0xMi43NDkxIDEzLjI1TDE1Ljk5OTEgMTBMMTIuNzQ5MSA2Ljc1MDAyQzEyLjQyNDEgNi40MjUwMiAxMi40MjQxIDUuOTA4MzUgMTIuNzQ5MSA1LjU4MzM1QzEzLjA3NDEgNS4yNTgzNSAxMy41OTA4IDUuMjU4MzUgMTMuOTE1OCA1LjU4MzM1TDE3Ljc0MDggOS40MDgzNUMxOC4wNjU4IDkuNzMzMzUgMTguMDY1OCAxMC4yNTgzIDE3Ljc0MDggMTAuNTgzM0wxMy45MTU4IDE0LjQxNjdDMTMuNTkwOCAxNC43NDE3IDEzLjA3NDEgMTQuNzQxNyAxMi43NDkxIDE0LjQxNjdDMTIuNDI0MSAxNC4wOTE3IDEyLjQyNDEgMTMuNTc1IDEyLjc0OTEgMTMuMjVaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--ellipsis: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTBDNC45IDEwIDQgMTAuOSA0IDEyQzQgMTMuMSA0LjkgMTQgNiAxNEM3LjEgMTQgOCAxMy4xIDggMTJDOCAxMC45IDcuMSAxMCA2IDEwWk0xOCAxMEMxNi45IDEwIDE2IDEwLjkgMTYgMTJDMTYgMTMuMSAxNi45IDE0IDE4IDE0QzE5LjEgMTQgMjAgMTMuMSAyMCAxMkMyMCAxMC45IDE5LjEgMTAgMTggMTBaTTEyIDEwQzEwLjkgMTAgMTAgMTAuOSAxMCAxMkMxMCAxMy4xIDEwLjkgMTQgMTIgMTRDMTMuMSAxNCAxNCAxMy4xIDE0IDEyQzE0IDEwLjkgMTMuMSAxMCAxMiAxMFoiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==');
+  --str-video__icon--feedback: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNyAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjUwMDMgNy4xNjkzNkMxMy41MDAzIDcuNjI3NjkgMTMuODc1MyA4LjAwMjY5IDE0LjMzMzcgOC4wMDI2OUgxNi4wMDAzQzE2LjQ1ODcgOC4wMDI2OSAxNi44MzM3IDcuNjI3NjkgMTYuODMzNyA3LjE2OTM2QzE2LjgzMzcgNi43MTEwMyAxNi40NTg3IDYuMzM2MDMgMTYuMDAwMyA2LjMzNjAzSDE0LjMzMzdDMTMuODc1MyA2LjMzNjAzIDEzLjUwMDMgNi43MTEwMyAxMy41MDAzIDcuMTY5MzZaIiBmaWxsPSIjRTNFNEU1Ii8+CjxwYXRoIGQ9Ik0xMi4zMjUzIDExLjE4NkMxMi4wNTAzIDExLjU1MjcgMTIuMTI1MyAxMi4wNjEgMTIuNDkyIDEyLjMyNzdDMTIuOTMzNyAxMi42NTI3IDEzLjQwMDMgMTMuMDAyNyAxMy44NDIgMTMuMzM2QzE0LjIwODcgMTMuNjExIDE0LjcyNTMgMTMuNTM2IDE0Ljk5MiAxMy4xNjk0QzE0Ljk5MiAxMy4xNjEgMTUuMDAwMyAxMy4xNjEgMTUuMDAwMyAxMy4xNTI3QzE1LjI3NTMgMTIuNzg2IDE1LjIwMDMgMTIuMjY5NCAxNC44MzM3IDEyLjAwMjdDMTQuMzkyIDExLjY2OTQgMTMuOTI1MyAxMS4zMTk0IDEzLjQ5MiAxMC45OTQ0QzEzLjEyNTMgMTAuNzE5NCAxMi42MDg3IDEwLjgwMjcgMTIuMzMzNyAxMS4xNjk0QzEyLjMzMzcgMTEuMTc3NyAxMi4zMjUzIDExLjE4NiAxMi4zMjUzIDExLjE4NloiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTE1LjAwODcgMS4xNzc2OUMxNS4wMDg3IDEuMTY5MzYgMTUuMDAwMyAxLjE2OTM2IDE1LjAwMDMgMS4xNjEwM0MxNC43MjUzIDAuNzk0MzU5IDE0LjIwODcgMC43MTkzNTkgMTMuODUwMyAwLjk5NDM1OUMxMy40MDg3IDEuMzI3NjkgMTIuOTMzNyAxLjY3NzY5IDEyLjUwMDMgMi4wMTEwM0MxMi4xMzM3IDIuMjg2MDMgMTIuMDY3IDIuODAyNjkgMTIuMzQyIDMuMTYxMDNDMTIuMzQyIDMuMTY5MzYgMTIuMzUwMyAzLjE2OTM2IDEyLjM1MDMgMy4xNzc2OUMxMi42MjUzIDMuNTQ0MzYgMTMuMTMzNyAzLjYxOTM2IDEzLjUwMDMgMy4zNDQzNkMxMy45NDIgMy4wMTkzNiAxNC40MDg3IDIuNjYxMDMgMTQuODUwMyAyLjMyNzY5QzE1LjIwODcgMi4wNjEwMyAxNS4yNzUzIDEuNTQ0MzYgMTUuMDA4NyAxLjE3NzY5WiIgZmlsbD0iI0UzRTRFNSIvPgo8cGF0aCBkPSJNNS4xNjY5OSA0LjY2OTM2SDEuODMzNjZDMC45MTY5OTIgNC42NjkzNiAwLjE2Njk5MiA1LjQxOTM2IDAuMTY2OTkyIDYuMzM2MDNWOC4wMDI2OUMwLjE2Njk5MiA4LjkxOTM2IDAuOTE2OTkyIDkuNjY5MzYgMS44MzM2NiA5LjY2OTM2SDIuNjY2OTlWMTIuMTY5NEMyLjY2Njk5IDEyLjYyNzcgMy4wNDE5OSAxMy4wMDI3IDMuNTAwMzMgMTMuMDAyN0MzLjk1ODY2IDEzLjAwMjcgNC4zMzM2NiAxMi42Mjc3IDQuMzMzNjYgMTIuMTY5NFY5LjY2OTM2SDUuMTY2OTlMOS4zMzM2NiAxMi4xNjk0VjIuMTY5MzZMNS4xNjY5OSA0LjY2OTM2WiIgZmlsbD0iI0UzRTRFNSIvPgo8cGF0aCBkPSJNMTEuNDE3IDcuMTY5MzZDMTEuNDE3IDYuMDYxMDMgMTAuOTMzNyA1LjA2MTAzIDEwLjE2NyA0LjM3NzY5VjkuOTUyNjlDMTAuOTMzNyA5LjI3NzY5IDExLjQxNyA4LjI3NzY5IDExLjQxNyA3LjE2OTM2WiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K');
+  --str-video__icon--film-roll: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMgNkMyLjQ1IDYgMiA2LjQ1IDIgN1YyMEMyIDIxLjEgMi45IDIyIDQgMjJIMTdDMTcuNTUgMjIgMTggMjEuNTUgMTggMjFDMTggMjAuNDUgMTcuNTUgMjAgMTcgMjBINUM0LjQ1IDIwIDQgMTkuNTUgNCAxOVY3QzQgNi40NSAzLjU1IDYgMyA2Wk0yMCAySDhDNi45IDIgNiAyLjkgNiA0VjE2QzYgMTcuMSA2LjkgMTggOCAxOEgyMEMyMS4xIDE4IDIyIDE3LjEgMjIgMTZWNEMyMiAyLjkgMjEuMSAyIDIwIDJaTTEyIDE0LjVWNS41TDE3LjQ3IDkuNkMxNy43NCA5LjggMTcuNzQgMTAuMiAxNy40NyAxMC40TDEyIDE0LjVaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
   --str-video__icon--filter: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNMSAzLjc1QS43NS43NSAwIDAgMSAxLjc1IDNoMTIuNWEuNzUuNzUgMCAwIDEgMCAxLjVIMS43NUEuNzUuNzUgMCAwIDEgMSAzLjc1em0yLjUgNEEuNzUuNzUgMCAwIDEgNC4yNSA3aDcuNWEuNzUuNzUgMCAwIDEgMCAxLjVoLTcuNWEuNzUuNzUgMCAwIDEtLjc1LS43NXpNNi43NSAxMWEuNzUuNzUgMCAwIDAgMCAxLjVoMi41YS43NS43NSAwIDAgMCAwLTEuNWgtMi41eiIgZmlsbD0iY3VycmVudENvbG9yIi8+XAo8L3N2Zz4K');
+  --str-video__icon--folder: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMSAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImZvbGRlciI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik05LjMyNjMgMy44MjQ5MkM5LjAwOTY0IDMuNTA4MjUgOC41ODQ2NCAzLjMzMzI1IDguMTQyOTcgMy4zMzMyNUgzLjgzNDY0QzIuOTE3OTcgMy4zMzMyNSAyLjE3NjMgNC4wODMyNSAyLjE3NjMgNC45OTk5MkwyLjE2Nzk3IDE0Ljk5OTlDMi4xNjc5NyAxNS45MTY2IDIuOTE3OTcgMTYuNjY2NiAzLjgzNDY0IDE2LjY2NjZIMTcuMTY4QzE4LjA4NDYgMTYuNjY2NiAxOC44MzQ2IDE1LjkxNjYgMTguODM0NiAxNC45OTk5VjYuNjY2NTlDMTguODM0NiA1Ljc0OTkyIDE4LjA4NDYgNC45OTk5MiAxNy4xNjggNC45OTk5MkgxMC41MDEzTDkuMzI2MyAzLjgyNDkyWiIgZmlsbD0iI0UzRTRFNSIvPgo8L2c+Cjwvc3ZnPgo=');
   --str-video__icon--fullscreen: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzNiAzNiIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSJ3aGl0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0ibSAxMCwxNiAyLDAgMCwtNCA0LDAgMCwtMiBMIDEwLDEwIGwgMCw2IDAsMCB6Ii8+CjxwYXRoIGQ9Im0gMjAsMTAgMCwyIDQsMCAwLDQgMiwwIEwgMjYsMTAgbCAtNiwwIDAsMCB6Ii8+CjxwYXRoIGQ9Im0gMjQsMjQgLTQsMCAwLDIgTCAyNiwyNiBsIDAsLTYgLTIsMCAwLDQgMCwwIHoiLz4KPHBhdGggZD0iTSAxMiwyMCAxMCwyMCAxMCwyNiBsIDYsMCAwLC0yIC00LDAgMCwtNCAwLDAgeiIvPgo8L3N2Zz4=');
-  --str-video__icon--grid: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAzMyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMzAuMzMxMSIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAzMC4zMzExIDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMTYuMTA5NCIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxNi4xMDk0IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMjMuMjIwNyIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAyMy4yMjA3IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOC45OTgwNSIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4Ljk5ODA1IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMzAuMzMxMSIgeT0iOS43NzczNCIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDMwLjMzMTEgOS43NzczNCkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjMwLjMzMTEiIHk9IjMuNTU0NjkiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAzMC4zMzExIDMuNTU0NjkpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIyMy4yMjA3IiB5PSI5Ljc3NzM0IiB3aWR0aD0iNC40NDQ0NCIgaGVpZ2h0PSI1LjMzMzMzIiByeD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMjMuMjIwNyA5Ljc3NzM0KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMjMuMjIwNyIgeT0iMy41NTQ2OSIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDIzLjIyMDcgMy41NTQ2OSkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjE2LjEwOTQiIHk9IjkuNzc3MzQiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxNi4xMDk0IDkuNzc3MzQpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIxNi4xMDk0IiB5PSIzLjU1NDY5IiB3aWR0aD0iNC40NDQ0NCIgaGVpZ2h0PSI1LjMzMzMzIiByeD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTYuMTA5NCAzLjU1NDY5KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOC45OTgwNSIgeT0iOS43NzczNCIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDguOTk4MDUgOS43NzczNCkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjguOTk4MDUiIHk9IjMuNTU0NjkiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4Ljk5ODA1IDMuNTU0NjkpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIxLjQ5ODA1IiB5PSIwLjUiIHdpZHRoPSIzMSIgaGVpZ2h0PSIyMyIgcng9IjIuNSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+  --str-video__icon--grid: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTQgMTNIMTBDMTAuNTUgMTMgMTEgMTIuNTUgMTEgMTJWNEMxMSAzLjQ1IDEwLjU1IDMgMTAgM0g0QzMuNDUgMyAzIDMuNDUgMyA0VjEyQzMgMTIuNTUgMy40NSAxMyA0IDEzWk00IDIxSDEwQzEwLjU1IDIxIDExIDIwLjU1IDExIDIwVjE2QzExIDE1LjQ1IDEwLjU1IDE1IDEwIDE1SDRDMy40NSAxNSAzIDE1LjQ1IDMgMTZWMjBDMyAyMC41NSAzLjQ1IDIxIDQgMjFaTTE0IDIxSDIwQzIwLjU1IDIxIDIxIDIwLjU1IDIxIDIwVjEyQzIxIDExLjQ1IDIwLjU1IDExIDIwIDExSDE0QzEzLjQ1IDExIDEzIDExLjQ1IDEzIDEyVjIwQzEzIDIwLjU1IDEzLjQ1IDIxIDE0IDIxWk0xMyA0VjhDMTMgOC41NSAxMy40NSA5IDE0IDlIMjBDMjAuNTUgOSAyMSA4LjU1IDIxIDhWNEMyMSAzLjQ1IDIwLjU1IDMgMjAgM0gxNEMxMy40NSAzIDEzIDMuNDUgMTMgNFoiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K');
   --str-video__icon--info-document: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMjNINC41QzMuNCAyMyAyLjUgMjIuMSAyLjUgMjFWN0g0LjVWMjFIMTguNVYyM1pNMTUuNSAxSDguNUM3LjQgMSA2LjUxIDEuOSA2LjUxIDNMNi41IDE3QzYuNSAxOC4xIDcuMzkgMTkgOC40OSAxOUgxOS41QzIwLjYgMTkgMjEuNSAxOC4xIDIxLjUgMTdWN0wxNS41IDFaTTE5LjUgMTdIOC41VjNIMTQuNjdMMTkuNSA3LjgzVjE3WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTE0LjgwNjIgMTQuNTY5M0gxMi44MDYyTDEyLjgwNjIgOS41NjkzNEgxNC44MDYyTDE0LjgwNjIgMTQuNTY5M1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNC44OTAxIDYuNTczMjRDMTQuODkwMSA3LjE3MTkxIDE0LjQwNDggNy42NTcyMyAxMy44MDYyIDcuNjU3MjNDMTMuMjA3NSA3LjY1NzIzIDEyLjcyMjIgNy4xNzE5MSAxMi43MjIyIDYuNTczMjRDMTIuNzIyMiA1Ljk3NDU3IDEzLjIwNzUgNS40ODkyNiAxMy44MDYyIDUuNDg5MjZDMTQuNDA0OCA1LjQ4OTI2IDE0Ljg5MDEgNS45NzQ1NyAxNC44OTAxIDYuNTczMjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
   --str-video__icon--info-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTExIDdoMnYyaC0yem0wIDRoMnY2aC0yem0xLTlDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDEgMC04LTMuNTktOC04czMuNTktOCA4LTggOCAzLjU5IDggOC0zLjU5IDgtOCA4eiIvPjwvc3ZnPg==');
+  --str-video__icon--layout: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkxheW91dCI+CjxnIGlkPSJWZWN0b3IiPgo8cGF0aCBkPSJNMTEuNTI2NyAyMC42MTQzTDExLjUyNjcgMTQuNjE0M0MxMS41MjY3IDE0LjA2NDMgMTEuMDc2NyAxMy42MTQzIDEwLjUyNjcgMTMuNjE0M0w0LjUyNjY5IDEzLjYxNDNDMy45NzY2OSAxMy42MTQzIDMuNTI2NjkgMTQuMDY0MyAzLjUyNjY5IDE0LjYxNDNMMy41MjY2OSAyMC42MTQzQzMuNTI2NjkgMjEuMTY0MyAzLjk3NjY5IDIxLjYxNDMgNC41MjY2OSAyMS42MTQzTDEwLjUyNjcgMjEuNjE0M0MxMS4wNzY3IDIxLjYxNDMgMTEuNTI2NyAyMS4xNjQzIDExLjUyNjcgMjAuNjE0M1oiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTIxLjQ3MjYgMTQuNjE0M0wyMS40NzI2IDIwLjYxNDNDMjEuNDcyNiAyMS4xNjQzIDIxLjAyMjYgMjEuNjE0MyAyMC40NzI2IDIxLjYxNDNMMTQuNDcyNiAyMS42MTQzQzEzLjkyMjYgMjEuNjE0MyAxMy40NzI2IDIxLjE2NDMgMTMuNDcyNiAyMC42MTQzTDEzLjQ3MjYgMTQuNjE0M0MxMy40NzI2IDE0LjA2NDMgMTMuOTIyNiAxMy42MTQzIDE0LjQ3MjYgMTMuNjE0M0wyMC40NzI2IDEzLjYxNDNDMjEuMDIyNiAxMy42MTQzIDIxLjQ3MjYgMTQuMDY0MyAyMS40NzI2IDE0LjYxNDNaIiBmaWxsPSIjRTNFNEU1Ii8+CjxwYXRoIGQ9Ik0xMS41MjY3IDIwLjYxNDNMMTEuNTI2NyAxNC42MTQzQzExLjUyNjcgMTQuMDY0MyAxMS4wNzY3IDEzLjYxNDMgMTAuNTI2NyAxMy42MTQzTDQuNTI2NjkgMTMuNjE0M0MzLjk3NjY5IDEzLjYxNDMgMy41MjY2OSAxNC4wNjQzIDMuNTI2NjkgMTQuNjE0M0wzLjUyNjY5IDIwLjYxNDNDMy41MjY2OSAyMS4xNjQzIDMuOTc2NjkgMjEuNjE0MyA0LjUyNjY5IDIxLjYxNDNMMTAuNTI2NyAyMS42MTQzQzExLjA3NjcgMjEuNjE0MyAxMS41MjY3IDIxLjE2NDMgMTEuNTI2NyAyMC42MTQzWiIgZmlsbD0iI0UzRTRFNSIvPgo8cGF0aCBkPSJNMjEuNDcyNiAxNC42MTQzTDIxLjQ3MjYgMjAuNjE0M0MyMS40NzI2IDIxLjE2NDMgMjEuMDIyNiAyMS42MTQzIDIwLjQ3MjYgMjEuNjE0M0wxNC40NzI2IDIxLjYxNDNDMTMuOTIyNiAyMS42MTQzIDEzLjQ3MjYgMjEuMTY0MyAxMy40NzI2IDIwLjYxNDNMMTMuNDcyNiAxNC42MTQzQzEzLjQ3MjYgMTQuMDY0MyAxMy45MjI2IDEzLjYxNDMgMTQuNDcyNiAxMy42MTQzTDIwLjQ3MjYgMTMuNjE0M0MyMS4wMjI2IDEzLjYxNDMgMjEuNDcyNiAxNC4wNjQzIDIxLjQ3MjYgMTQuNjE0M1oiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTExLjUyNjcgMTAuNjU3N0wxMS41MjY3IDQuNjU3NjdDMTEuNTI2NyA0LjEwNzY3IDExLjA3NjcgMy42NTc2NyAxMC41MjY3IDMuNjU3NjdMNC41MjY2OSAzLjY1NzY3QzMuOTc2NjkgMy42NTc2NyAzLjUyNjY5IDQuMTA3NjcgMy41MjY2OSA0LjY1NzY3TDMuNTI2NjkgMTAuNjU3N0MzLjUyNjY5IDExLjIwNzcgMy45NzY2OSAxMS42NTc3IDQuNTI2NjkgMTEuNjU3N0wxMC41MjY3IDExLjY1NzdDMTEuMDc2NyAxMS42NTc3IDExLjUyNjcgMTEuMjA3NyAxMS41MjY3IDEwLjY1NzdaIiBmaWxsPSIjRTNFNEU1Ii8+CjxwYXRoIGQ9Ik0yMS40NzI3IDQuNjU3NjdMMjEuNDcyNyAxMC42NTc3QzIxLjQ3MjcgMTEuMjA3NyAyMS4wMjI3IDExLjY1NzcgMjAuNDcyNyAxMS42NTc3TDE0LjQ3MjcgMTEuNjU3N0MxMy45MjI3IDExLjY1NzcgMTMuNDcyNyAxMS4yMDc3IDEzLjQ3MjcgMTAuNjU3N0wxMy40NzI3IDQuNjU3NjdDMTMuNDcyNyA0LjEwNzY3IDEzLjkyMjcgMy42NTc2NyAxNC40NzI3IDMuNjU3NjdMMjAuNDcyNyAzLjY1NzY3QzIxLjAyMjcgMy42NTc2NyAyMS40NzI3IDQuMTA3NjcgMjEuNDcyNyA0LjY1NzY3WiIgZmlsbD0iI0UzRTRFNSIvPgo8L2c+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--layout-speaker-left: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkxheW91dCI+CjxnIGlkPSJWZWN0b3IiPgo8cGF0aCBkPSJNMyAzLjk2OTMyTDMgMTcuMzAyN0MzIDE3Ljc2MSAzLjM3NSAxOC4xMzYgMy44MzMzMyAxOC4xMzZMMTAuNSAxOC4xMzZDMTAuOTU4MyAxOC4xMzYgMTEuMzMzMyAxNy43NjEgMTEuMzMzMyAxNy4zMDI3TDExLjMzMzMgMy45NjkzMkMxMS4zMzMzIDMuNTEwOTkgMTAuOTU4MyAzLjEzNTk5IDEwLjUgMy4xMzU5OUwzLjgzMzMzIDMuMTM1OTlDMy4zNzUgMy4xMzU5OSAzIDMuNTEwOTkgMyAzLjk2OTMyWk0xNy4xNjY3IDExLjQ2OTNMMTMuODMzMyAxMS40NjkzQzEzLjM3NSAxMS40NjkzIDEzIDExLjg0NDMgMTMgMTIuMzAyN0wxMyAxNy4zMDI3QzEzIDE3Ljc2MSAxMy4zNzUgMTguMTM2IDEzLjgzMzMgMTguMTM2TDE3LjE2NjcgMTguMTM2QzE3LjYyNSAxOC4xMzYgMTggMTcuNzYxIDE4IDE3LjMwMjdMMTggMTIuMzAyN0MxOCAxMS44NDQzIDE3LjYyNSAxMS40NjkzIDE3LjE2NjcgMTEuNDY5M1oiIGZpbGw9IiNCMEI0QjciLz4KPHBhdGggZD0iTTEzLjgzMzMgMy4xODEwMkwxNy4xNjY3IDMuMTgxMDJDMTcuNjI1IDMuMTgxMDIgMTggMy41NTYwMiAxOCA0LjAxNDM1TDE4IDkuMDE0MzVDMTggOS40NzI2OCAxNy42MjUgOS44NDc2OCAxNy4xNjY3IDkuODQ3NjhMMTMuODMzMyA5Ljg0NzY4QzEzLjM3NSA5Ljg0NzY4IDEzIDkuNDcyNjggMTMgOS4wMTQzNUwxMyA0LjAxNDM1QzEzIDMuNTU2MDIgMTMuMzc1IDMuMTgxMDIgMTMuODMzMyAzLjE4MTAyWiIgZmlsbD0iI0IwQjRCNyIvPgo8L2c+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--layout-speaker-top: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkxheW91dCI+CjxnIGlkPSJWZWN0b3IiPgo8cGF0aCBkPSJNMTcuMTY2NyAzLjEzNTk4TDMuODMzMzMgMy4xMzU5OEMzLjM3NSAzLjEzNTk4IDMgMy41MTA5OCAzIDMuOTY5MzJMMyAxMC42MzZDMyAxMS4wOTQzIDMuMzc1IDExLjQ2OTMgMy44MzMzMyAxMS40NjkzTDE3LjE2NjcgMTEuNDY5M0MxNy42MjUgMTEuNDY5MyAxOCAxMS4wOTQzIDE4IDEwLjYzNkwxOCAzLjk2OTMyQzE4IDMuNTEwOTggMTcuNjI1IDMuMTM1OTggMTcuMTY2NyAzLjEzNTk4Wk05LjY2NjY3IDE3LjMwMjdMOS42NjY2NyAxMy45NjkzQzkuNjY2NjcgMTMuNTExIDkuMjkxNjcgMTMuMTM2IDguODMzMzMgMTMuMTM2TDMuODMzMzMgMTMuMTM2QzMuMzc1IDEzLjEzNiAzIDEzLjUxMSAzIDEzLjk2OTNMMyAxNy4zMDI3QzMgMTcuNzYxIDMuMzc1IDE4LjEzNiAzLjgzMzMzIDE4LjEzNkw4LjgzMzMzIDE4LjEzNkM5LjI5MTY3IDE4LjEzNiA5LjY2NjY3IDE3Ljc2MSA5LjY2NjY3IDE3LjMwMjdaIiBmaWxsPSIjMDA1RkZGIi8+CjxwYXRoIGQ9Ik0xNy45NTUgMTMuOTY5M0wxNy45NTUgMTcuMzAyN0MxNy45NTUgMTcuNzYxIDE3LjU4IDE4LjEzNiAxNy4xMjE2IDE4LjEzNkwxMi4xMjE2IDE4LjEzNkMxMS42NjMzIDE4LjEzNiAxMS4yODgzIDE3Ljc2MSAxMS4yODgzIDE3LjMwMjdMMTEuMjg4MyAxMy45NjkzQzExLjI4ODMgMTMuNTExIDExLjY2MzMgMTMuMTM2IDEyLjEyMTYgMTMuMTM2TDE3LjEyMTYgMTMuMTM2QzE3LjU4IDEzLjEzNiAxNy45NTUgMTMuNTExIDE3Ljk1NSAxMy45NjkzWiIgZmlsbD0iIzAwNUZGRiIvPgo8L2c+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--layout-speaker-bottom: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMzMzMzMgMThIMTYuNjY2N0MxNy4xMjUgMTggMTcuNSAxNy42MjUgMTcuNSAxNy4xNjY3VjEwLjVDMTcuNSAxMC4wNDE3IDE3LjEyNSA5LjY2NjY3IDE2LjY2NjcgOS42NjY2N0gzLjMzMzMzQzIuODc1IDkuNjY2NjcgMi41IDEwLjA0MTcgMi41IDEwLjVWMTcuMTY2N0MyLjUgMTcuNjI1IDIuODc1IDE4IDMuMzMzMzMgMThaTTEwLjgzMzMgMy44MzMzNFY3LjE2NjY3QzEwLjgzMzMgNy42MjUgMTEuMjA4MyA4IDExLjY2NjcgOEgxNi42NjY3QzE3LjEyNSA4IDE3LjUgNy42MjUgMTcuNSA3LjE2NjY3VjMuODMzMzRDMTcuNSAzLjM3NSAxNy4xMjUgMyAxNi42NjY3IDNIMTEuNjY2N0MxMS4yMDgzIDMgMTAuODMzMyAzLjM3NSAxMC44MzMzIDMuODMzMzRaIiBmaWxsPSIjQjBCNEI3Ii8+CjxwYXRoIGQ9Ik0yLjU0NTAzIDcuMTY2NjdWMy44MzMzM0MyLjU0NTAzIDMuMzc1IDIuOTIwMDMgMyAzLjM3ODM2IDNIOC4zNzgzNkM4LjgzNjcgMyA5LjIxMTcgMy4zNzUgOS4yMTE3IDMuODMzMzNWNy4xNjY2N0M5LjIxMTcgNy42MjUgOC44MzY3IDggOC4zNzgzNiA4SDMuMzc4MzZDMi45MjAwMyA4IDIuNTQ1MDMgNy42MjUgMi41NDUwMyA3LjE2NjY3WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K');
+  --str-video__icon--layout-speaker-right: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxIDIwTDIxIDRDMjEgMy40NSAyMC41NSAzIDIwIDNMMTIgM0MxMS40NSAzIDExIDMuNDUgMTEgNEwxMSAyMEMxMSAyMC41NSAxMS40NSAyMSAxMiAyMUwyMCAyMUMyMC41NSAyMSAyMSAyMC41NSAyMSAyMFpNNCAxMUw4IDExQzguNTUgMTEgOSAxMC41NSA5IDEwTDkgNEM5IDMuNDUgOC41NSAzIDggM0w0IDNDMy40NSAzIDMgMy40NSAzIDRMMyAxMEMzIDEwLjU1IDMuNDUgMTEgNCAxMVoiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTggMjAuOTQ2TDQgMjAuOTQ2QzMuNDUgMjAuOTQ2IDMgMjAuNDk2IDMgMTkuOTQ2TDMgMTMuOTQ2QzMgMTMuMzk2IDMuNDUgMTIuOTQ2IDQgMTIuOTQ2TDggMTIuOTQ2QzguNTUgMTIuOTQ2IDkgMTMuMzk2IDkgMTMuOTQ2TDkgMTkuOTQ2QzkgMjAuNDk2IDguNTUgMjAuOTQ2IDggMjAuOTQ2WiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K');
+  --str-video__icon--layout-speaker-one-on-one: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjk1NzAzIDIxLjA1ODNWMy4zOTY0OEMyLjk1NzAzIDIuODQ2NDggMy40MDcwMyAyLjM5NjQ4IDMuOTU3MDMgMi4zOTY0OEgyMC4wNDM2QzIwLjU5MzYgMi4zOTY0OCAyMS4wNDM2IDIuODQ2NDggMjEuMDQzNiAzLjM5NjQ4TDIxLjA0MzYgMjEuMDU4M0MyMS4wNDM2IDIxLjYwODMgMjAuNTkzNiAyMi4wNTgzIDIwLjA0MzYgMjIuMDU4M0gzLjk1NzAzQzMuNDA3MDMgMjIuMDU4MyAyLjk1NzAzIDIxLjYwODMgMi45NTcwMyAyMS4wNTgzWk0xOC4zMDA1IDQuMjI3NTRMMTQuMzAwNSA0LjIyNzU0QzEzLjc1MDUgNC4yMjc1NCAxMy4zMDA1IDQuNjc3NTQgMTMuMzAwNSA1LjIyNzU0VjExLjIyNzVDMTMuMzAwNSAxMS43Nzc1IDEzLjc1MDUgMTIuMjI3NSAxNC4zMDA1IDEyLjIyNzVIMTguMzAwNUMxOC44NTA1IDEyLjIyNzUgMTkuMzAwNSAxMS43Nzc1IDE5LjMwMDUgMTEuMjI3NVY1LjIyNzU0QzE5LjMwMDUgNC42Nzc1NCAxOC44NTA1IDQuMjI3NTQgMTguMzAwNSA0LjIyNzU0WiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K');
+  --str-video__icon--layout-speaker-live-stream: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNzYgMTcuMDc1QzYuNjcgMTUuOTk1IDYgMTQuNDk1IDYgMTIuODM1QzYgMTEuMTc1IDYuNjcgOS42NzQ5NSA3Ljc2IDguNTk0OTVMOS4xOCAxMC4wMTVDOC40NSAxMC43MzUgOCAxMS43MzUgOCAxMi44MzVDOCAxMy45MzUgOC40NSAxNC45MzUgOS4xNyAxNS42NjVMNy43NiAxNy4wNzVaTTE2LjI0IDE3LjA3NUMxNy4zMyAxNS45OTUgMTggMTQuNDk1IDE4IDEyLjgzNUMxOCAxMS4xNzUgMTcuMzMgOS42NzQ5NSAxNi4yNCA4LjU5NDk1TDE0LjgyIDEwLjAxNUMxNS41NSAxMC43MzUgMTYgMTEuNzM1IDE2IDEyLjgzNUMxNiAxMy45MzUgMTUuNTUgMTQuOTM1IDE0LjgzIDE1LjY2NUwxNi4yNCAxNy4wNzVaTTEyIDEwLjgzNUMxMC45IDEwLjgzNSAxMCAxMS43MzUgMTAgMTIuODM1QzEwIDEzLjkzNSAxMC45IDE0LjgzNSAxMiAxNC44MzVDMTMuMSAxNC44MzUgMTQgMTMuOTM1IDE0IDEyLjgzNUMxNCAxMS43MzUgMTMuMSAxMC44MzUgMTIgMTAuODM1Wk0yMCAxMi44MzVDMjAgMTUuMDQ1IDE5LjEgMTcuMDQ1IDE3LjY1IDE4LjQ4NUwxOS4wNyAxOS45MDVDMjAuODggMTguMDk1IDIyIDE1LjU5NSAyMiAxMi44MzVDMjIgMTAuMDc1IDIwLjg4IDcuNTc0OTUgMTkuMDcgNS43NjQ5NUwxNy42NSA3LjE4NDk1QzE5LjEgOC42MjQ5NSAyMCAxMC42MjUgMjAgMTIuODM1Wk02LjM1IDcuMTg0OTVMNC45MyA1Ljc2NDk1QzMuMTIgNy41NzQ5NSAyIDEwLjA3NSAyIDEyLjgzNUMyIDE1LjU5NSAzLjEyIDE4LjA5NSA0LjkzIDE5LjkwNUw2LjM1IDE4LjQ4NUM0LjkgMTcuMDQ1IDQgMTUuMDQ1IDQgMTIuODM1QzQgMTAuNjI1IDQuOSA4LjYyNDk1IDYuMzUgNy4xODQ5NVoiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==');
+  --str-video__icon--language: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTExLjk5IDJDNi40NyAyIDIgNi40OCAyIDEyQzIgMTcuNTIgNi40NyAyMiAxMS45OSAyMkMxNy41MiAyMiAyMiAxNy41MiAyMiAxMkMyMiA2LjQ4IDE3LjUyIDIgMTEuOTkgMlpNMTguOTIgOEgxNS45N0MxNS42NSA2Ljc1IDE1LjE5IDUuNTUgMTQuNTkgNC40NEMxNi40MyA1LjA3IDE3Ljk2IDYuMzUgMTguOTIgOFpNMTIgNC4wNEMxMi44MyA1LjI0IDEzLjQ4IDYuNTcgMTMuOTEgOEgxMC4wOUMxMC41MiA2LjU3IDExLjE3IDUuMjQgMTIgNC4wNFpNNC4yNiAxNEM0LjEgMTMuMzYgNCAxMi42OSA0IDEyQzQgMTEuMzEgNC4xIDEwLjY0IDQuMjYgMTBINy42NEM3LjU2IDEwLjY2IDcuNSAxMS4zMiA3LjUgMTJDNy41IDEyLjY4IDcuNTYgMTMuMzQgNy42NCAxNEg0LjI2Wk01LjA4IDE2SDguMDNDOC4zNSAxNy4yNSA4LjgxIDE4LjQ1IDkuNDEgMTkuNTZDNy41NyAxOC45MyA2LjA0IDE3LjY2IDUuMDggMTZaTTguMDMgOEg1LjA4QzYuMDQgNi4zNCA3LjU3IDUuMDcgOS40MSA0LjQ0QzguODEgNS41NSA4LjM1IDYuNzUgOC4wMyA4Wk0xMiAxOS45NkMxMS4xNyAxOC43NiAxMC41MiAxNy40MyAxMC4wOSAxNkgxMy45MUMxMy40OCAxNy40MyAxMi44MyAxOC43NiAxMiAxOS45NlpNMTQuMzQgMTRIOS42NkM5LjU3IDEzLjM0IDkuNSAxMi42OCA5LjUgMTJDOS41IDExLjMyIDkuNTcgMTAuNjUgOS42NiAxMEgxNC4zNEMxNC40MyAxMC42NSAxNC41IDExLjMyIDE0LjUgMTJDMTQuNSAxMi42OCAxNC40MyAxMy4zNCAxNC4zNCAxNFpNMTQuNTkgMTkuNTZDMTUuMTkgMTguNDUgMTUuNjUgMTcuMjUgMTUuOTcgMTZIMTguOTJDMTcuOTYgMTcuNjUgMTYuNDMgMTguOTMgMTQuNTkgMTkuNTZaTTE2LjM2IDE0QzE2LjQ0IDEzLjM0IDE2LjUgMTIuNjggMTYuNSAxMkMxNi41IDExLjMyIDE2LjQ0IDEwLjY2IDE2LjM2IDEwSDE5Ljc0QzE5LjkgMTAuNjQgMjAgMTEuMzEgMjAgMTJDMjAgMTIuNjkgMTkuOSAxMy4zNiAxOS43NCAxNEgxNi4zNloiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K');
   --str-video__icon--livestream-viewers: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzg2OTdfMjU1NykiPgo8cGF0aCBkPSJNOC4zNzc0NCA0LjU2MjVDMTAuNzQ2MiA0LjU2MjUgMTIuODU4NyA1Ljg5Mzc1IDEzLjg4OTkgOEMxMi44NTg3IDEwLjEwNjIgMTAuNzQ2MiAxMS40Mzc1IDguMzc3NDQgMTEuNDM3NUM2LjAwODY5IDExLjQzNzUgMy44OTYxOSAxMC4xMDYyIDIuODY0OTQgOEMzLjg5NjE5IDUuODkzNzUgNi4wMDg2OSA0LjU2MjUgOC4zNzc0NCA0LjU2MjVaTTguMzc3NDQgMy4zMTI1QzUuMjUyNDQgMy4zMTI1IDIuNTgzNjkgNS4yNTYyNSAxLjUwMjQ0IDhDMi41ODM2OSAxMC43NDM4IDUuMjUyNDQgMTIuNjg3NSA4LjM3NzQ0IDEyLjY4NzVDMTEuNTAyNCAxMi42ODc1IDE0LjE3MTIgMTAuNzQzOCAxNS4yNTI0IDhDMTQuMTcxMiA1LjI1NjI1IDExLjUwMjQgMy4zMTI1IDguMzc3NDQgMy4zMTI1Wk04LjM3NzQ0IDYuNDM3NUM5LjIzOTk0IDYuNDM3NSA5LjkzOTk0IDcuMTM3NSA5LjkzOTk0IDhDOS45Mzk5NCA4Ljg2MjUgOS4yMzk5NCA5LjU2MjUgOC4zNzc0NCA5LjU2MjVDNy41MTQ5NCA5LjU2MjUgNi44MTQ5NCA4Ljg2MjUgNi44MTQ5NCA4QzYuODE0OTQgNy4xMzc1IDcuNTE0OTQgNi40Mzc1IDguMzc3NDQgNi40Mzc1Wk04LjM3NzQ0IDUuMTg3NUM2LjgyNzQ0IDUuMTg3NSA1LjU2NDk0IDYuNDUgNS41NjQ5NCA4QzUuNTY0OTQgOS41NSA2LjgyNzQ0IDEwLjgxMjUgOC4zNzc0NCAxMC44MTI1QzkuOTI3NDQgMTAuODEyNSAxMS4xODk5IDkuNTUgMTEuMTg5OSA4QzExLjE4OTkgNi40NSA5LjkyNzQ0IDUuMTg3NSA4LjM3NzQ0IDUuMTg3NVoiIGZpbGw9IiNGQ0ZDRkMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84Njk3XzI1NTciPgo8cmVjdCB4PSIwLjg3NzQ0MSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=');
   --str-video__icon--loading: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzAuOTIxMyAxNUMzMC45MjEzIDIzLjI4NDMgMjQuMjA1NiAzMCAxNS45MjEzIDMwQzEwLjcxNTQgMzAgNi4xMjg5OSAyNy4zNDggMy40MzkyMSAyMy4zMjE0TDUuMTAzNDkgMjIuMjExOUM3LjQzNDYzIDI1LjcwMTYgMTEuNDA5NiAyOCAxNS45MjEzIDI4QzIzLjEwMSAyOCAyOC45MjEzIDIyLjE3OTcgMjguOTIxMyAxNUMyOC45MjEzIDcuODIwMyAyMy4xMDEgMiAxNS45MjEzIDJMMTUuOTIxMyAwQzI0LjIwNTYgMCAzMC45MjEzIDYuNzE1NzMgMzAuOTIxMyAxNVoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMykiLz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMyIgeDE9IjMuNDM5MjEiIHkxPSIwIiB4Mj0iMy40MzkyMSIgeTI9IjMwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLXNlbWl0cmFuc3BhcmVudCIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLW9wYXF1ZSIgb2Zmc2V0PSIxIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+Cjwvc3ZnPg==');
+  --str-video__icon--logout: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMDA2NTEgMi45MTY2N0g2LjUwNjUxQzYuODI3MzQgMi45MTY2NyA3LjA4OTg0IDIuNjU0MTcgNy4wODk4NCAyLjMzMzMzQzcuMDg5ODQgMi4wMTI1IDYuODI3MzQgMS43NSA2LjUwNjUxIDEuNzVIMy4wMDY1MUMyLjM2NDg0IDEuNzUgMS44Mzk4NCAyLjI3NSAxLjgzOTg0IDIuOTE2NjdWMTEuMDgzM0MxLjgzOTg0IDExLjcyNSAyLjM2NDg0IDEyLjI1IDMuMDA2NTEgMTIuMjVINi41MDY1MUM2LjgyNzM0IDEyLjI1IDcuMDg5ODQgMTEuOTg3NSA3LjA4OTg0IDExLjY2NjdDNy4wODk4NCAxMS4zNDU4IDYuODI3MzQgMTEuMDgzMyA2LjUwNjUxIDExLjA4MzNIMy4wMDY1MVYyLjkxNjY3WiIgZmlsbD0iI0UzRTRFNSIvPgo8cGF0aCBkPSJNMTIuMTM1NyA2Ljc5NTgzTDEwLjUwODIgNS4xNjgzM0MxMC4zMjE1IDQuOTgxNjcgMTAuMDA2NSA1LjExIDEwLjAwNjUgNS4zNzI1VjYuNDE2NjdINS45MjMxOEM1LjYwMjM0IDYuNDE2NjcgNS4zMzk4NCA2LjY3OTE3IDUuMzM5ODQgN0M1LjMzOTg0IDcuMzIwODMgNS42MDIzNCA3LjU4MzMzIDUuOTIzMTggNy41ODMzM0gxMC4wMDY1VjguNjI3NUMxMC4wMDY1IDguODkgMTAuMzIxNSA5LjAxODMzIDEwLjUwMjMgOC44MzE2N0wxMi4xMjk4IDcuMjA0MTdDMTIuMjQ2NSA3LjA5MzMzIDEyLjI0NjUgNi45MDY2NyAxMi4xMzU3IDYuNzk1ODNaIiBmaWxsPSIjRTNFNEU1Ii8+Cjwvc3ZnPgo=');
+  --str-video__icon--login: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjMgNy44MDA1OUM5LjkxIDguMTkwNTkgOS45MSA4LjgxMDU5IDEwLjMgOS4yMDA1OUwxMi4yIDExLjEwMDZIM0MyLjQ1IDExLjEwMDYgMiAxMS41NTA2IDIgMTIuMTAwNkMyIDEyLjY1MDYgMi40NSAxMy4xMDA2IDMgMTMuMTAwNkgxMi4yTDEwLjMgMTUuMDAwNkM5LjkxIDE1LjM5MDYgOS45MSAxNi4wMTA2IDEwLjMgMTYuNDAwNkMxMC42OSAxNi43OTA2IDExLjMxIDE2Ljc5MDYgMTEuNyAxNi40MDA2TDE1LjI5IDEyLjgxMDZDMTUuNjggMTIuNDIwNiAxNS42OCAxMS43OTA2IDE1LjI5IDExLjQwMDZMMTEuNyA3LjgwMDU5QzExLjMxIDcuNDEwNTkgMTAuNjkgNy40MTA1OSAxMC4zIDcuODAwNTlaTTIwIDE5LjEwMDZIMTNDMTIuNDUgMTkuMTAwNiAxMiAxOS41NTA2IDEyIDIwLjEwMDZDMTIgMjAuNjUwNiAxMi40NSAyMS4xMDA2IDEzIDIxLjEwMDZIMjBDMjEuMSAyMS4xMDA2IDIyIDIwLjIwMDYgMjIgMTkuMTAwNlY1LjEwMDU5QzIyIDQuMDAwNTkgMjEuMSAzLjEwMDU5IDIwIDMuMTAwNTlIMTNDMTIuNDUgMy4xMDA1OSAxMiAzLjU1MDU5IDEyIDQuMTAwNTlDMTIgNC42NTA1OSAxMi40NSA1LjEwMDU5IDEzIDUuMTAwNTlIMjBWMTkuMTAwNloiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==');
   --str-video__icon--magnifier-glass: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04LjQ4NDkxIDcuODYwM0g3Ljk1NTk3TDcuNzY4NSA3LjY3OTUyQzguNTcxOTUgNi43NDIxNiA4Ljk4NzA2IDUuNDYzMzQgOC43NTk0MiA0LjEwNDE4QzguNDQ0NzMgMi4yNDI4NSA2Ljg5MTQgMC43NTY0NzQgNS4wMTY2OSAwLjUyODgzQzIuMTg0NTMgMC4xODA2NjkgLTAuMTk5MDMxIDIuNTY0MjMgMC4xNDkxMyA1LjM5NjM5QzAuMzc2Nzc0IDcuMjcxMSAxLjg2MzE1IDguODI0NDMgMy43MjQ0OCA5LjEzOTEyQzUuMDgzNjQgOS4zNjY3NiA2LjM2MjQ2IDguOTUxNjUgNy4yOTk4MiA4LjE0ODJMNy40ODA2IDguMzM1NjdWOC44NjQ2MUwxMC4zMjYxIDExLjcxMDJDMTAuNjAwNyAxMS45ODQ3IDExLjA0OTIgMTEuOTg0NyAxMS4zMjM4IDExLjcxMDJDMTEuNTk4MyAxMS40MzU2IDExLjU5ODMgMTAuOTg3IDExLjMyMzggMTAuNzEyNUw4LjQ4NDkxIDcuODYwM1pNNC40Njc2NiA3Ljg2MDNDMi44MDA1MSA3Ljg2MDMgMS40NTQ3MyA2LjUxNDUyIDEuNDU0NzMgNC44NDczNkMxLjQ1NDczIDMuMTgwMjEgMi44MDA1MSAxLjgzNDQzIDQuNDY3NjYgMS44MzQ0M0M2LjEzNDgyIDEuODM0NDMgNy40ODA2IDMuMTgwMjEgNy40ODA2IDQuODQ3MzZDNy40ODA2IDYuNTE0NTIgNi4xMzQ4MiA3Ljg2MDMgNC40Njc2NiA3Ljg2MDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
-  --str-video__icon--mic: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE0Ljg5NDdDMTMuODk3MSAxNC44OTQ3IDE1LjQyODYgMTMuMzQzMiAxNS40Mjg2IDExLjQyMTFWNC40NzM2OEMxNS40Mjg2IDIuNTUxNTggMTMuODk3MSAxIDEyIDFDMTAuMTAyOSAxIDguNTcxNDMgMi41NTE1OCA4LjU3MTQzIDQuNDczNjhWMTEuNDIxMUM4LjU3MTQzIDEzLjM0MzIgMTAuMTAyOSAxNC44OTQ3IDEyIDE0Ljg5NDdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTcuNzE0MyAxMS40MjExQzE3LjcxNDMgMTQuNjE2OCAxNS4xNTQzIDE3LjIxMDUgMTIgMTcuMjEwNUM4Ljg0NTcxIDE3LjIxMDUgNi4yODU3MSAxNC42MTY4IDYuMjg1NzEgMTEuNDIxMUg0QzQgMTUuNTA4NCA2Ljk4Mjg2IDE4Ljg2NjMgMTAuODU3MSAxOS40MzM3VjIzSDEzLjE0MjlWMTkuNDMzN0MxNy4wMTcxIDE4Ljg2NjMgMjAgMTUuNTA4NCAyMCAxMS40MjExSDE3LjcxNDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
-  --str-video__icon--mic-off: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5Ljc3NzggMTEuNDIxMUgxNy44ODg5QzE3Ljg4ODkgMTIuMjc3OSAxNy43MTExIDEzLjA3NjggMTcuNDExMSAxMy43OTQ3TDE4Ljc3NzggMTUuMjE4OUMxOS40IDE0LjA4NDIgMTkuNzc3OCAxMi43OTg5IDE5Ljc3NzggMTEuNDIxMVpNMTUuMzExMSAxMS42MTc5QzE1LjMxMTEgMTEuNTQ4NCAxNS4zMzMzIDExLjQ5MDUgMTUuMzMzMyAxMS40MjExVjQuNDczNjhDMTUuMzMzMyAyLjU1MTU4IDEzLjg0NDQgMSAxMiAxQzEwLjE1NTYgMSA4LjY2NjY3IDIuNTUxNTggOC42NjY2NyA0LjQ3MzY4VjQuNjgyMTFMMTUuMzExMSAxMS42MTc5Wk0zLjQxMTExIDIuMTU3ODlMMiAzLjYyODQyTDguNjc3NzggMTAuNTg3NFYxMS40MjExQzguNjc3NzggMTMuMzQzMiAxMC4xNTU2IDE0Ljg5NDcgMTIgMTQuODk0N0MxMi4yNDQ0IDE0Ljg5NDcgMTIuNDg4OSAxNC44NiAxMi43MjIyIDE0LjgwMjFMMTQuNTY2NyAxNi43MjQyQzEzLjc3NzggMTcuMTA2MyAxMi45IDE3LjMyNjMgMTIgMTcuMzI2M0M4LjkzMzMzIDE3LjMyNjMgNi4xMTExMSAxNC44OTQ3IDYuMTExMTEgMTEuNDIxMUg0LjIyMjIyQzQuMjIyMjIgMTUuMzY5NSA3LjI0NDQ0IDE4LjYzNDcgMTAuODg4OSAxOS4yMDIxVjIzSDEzLjExMTFWMTkuMjAyMUMxNC4xMjIyIDE5LjA1MTYgMTUuMDc3OCAxOC42ODExIDE1LjkzMzMgMTguMTZMMjAuNTg4OSAyM0wyMiAyMS41Mjk1TDMuNDExMTEgMi4xNTc4OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
-  --str-video__icon--network-quality: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMC41IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI2IiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjg1Ii8+CjxwYXRoIGQ9Ik0xMiAxNi41TDEyIDExLjUiIHN0cm9rZT0iIzAwNkNGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcgMTYuNUw3IDE0LjUiIHN0cm9rZT0iIzAwNkNGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3IDE2LjVMMTcgOC41IiBzdHJva2U9IiMwMDZDRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==');
-  --str-video__icon--participants: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0yMS4zMzc1IDE2LjM5OTZDMjMuMDUgMTcuNTI1OCAyNC4yNSAxOS4wNTE2IDI0LjI1IDIxLjA4NTlWMjQuNzE4OEgyOS4yNVYyMS4wODU5QzI5LjI1IDE4LjQ0NjEgMjQuNzg3NSAxNi44ODQgMjEuMzM3NSAxNi4zOTk2WiIgZmlsbD0id2hpdGUiLz4KICAgIDxwYXRoIGQ9Ik0xOS4yNSAxNS4wMzEyQzIyLjAxMjUgMTUuMDMxMiAyNC4yNSAxMi44NjM3IDI0LjI1IDEwLjE4NzVDMjQuMjUgNy41MTEzMyAyMi4wMTI1IDUuMzQzNzUgMTkuMjUgNS4zNDM3NUMxOC42NjI1IDUuMzQzNzUgMTguMTEyNSA1LjQ2NDg0IDE3LjU4NzUgNS42MzQzN0MxOC42MjUgNi44ODE2NCAxOS4yNSA4LjQ2Nzk3IDE5LjI1IDEwLjE4NzVDMTkuMjUgMTEuOTA3IDE4LjYyNSAxMy40OTM0IDE3LjU4NzUgMTQuNzQwNkMxOC4xMTI1IDE0LjkxMDIgMTguNjYyNSAxNS4wMzEyIDE5LjI1IDE1LjAzMTJaIiBmaWxsPSJ3aGl0ZSIvPgogICAgPHBhdGggZD0iTTExLjc1IDE1LjAzMTJDMTQuNTEyNSAxNS4wMzEyIDE2Ljc1IDEyLjg2MzcgMTYuNzUgMTAuMTg3NUMxNi43NSA3LjUxMTMzIDE0LjUxMjUgNS4zNDM3NSAxMS43NSA1LjM0Mzc1QzguOTg3NSA1LjM0Mzc1IDYuNzUgNy41MTEzMyA2Ljc1IDEwLjE4NzVDNi43NSAxMi44NjM3IDguOTg3NSAxNS4wMzEyIDExLjc1IDE1LjAzMTJaTTExLjc1IDcuNzY1NjJDMTMuMTI1IDcuNzY1NjIgMTQuMjUgOC44NTU0NyAxNC4yNSAxMC4xODc1QzE0LjI1IDExLjUxOTUgMTMuMTI1IDEyLjYwOTQgMTEuNzUgMTIuNjA5NEMxMC4zNzUgMTIuNjA5NCA5LjI1IDExLjUxOTUgOS4yNSAxMC4xODc1QzkuMjUgOC44NTU0NyAxMC4zNzUgNy43NjU2MiAxMS43NSA3Ljc2NTYyWiIgZmlsbD0id2hpdGUiLz4KICAgIDxwYXRoIGQ9Ik0xMS43NSAxNi4yNDIyQzguNDEyNSAxNi4yNDIyIDEuNzUgMTcuODY0OCAxLjc1IDIxLjA4NTlWMjQuNzE4OEgyMS43NVYyMS4wODU5QzIxLjc1IDE3Ljg2NDggMTUuMDg3NSAxNi4yNDIyIDExLjc1IDE2LjI0MjJaTTE5LjI1IDIyLjI5NjlINC4yNVYyMS4wOThDNC41IDIwLjIyNjIgOC4zNzUgMTguNjY0MSAxMS43NSAxOC42NjQxQzE1LjEyNSAxOC42NjQxIDE5IDIwLjIyNjIgMTkuMjUgMjEuMDg1OVYyMi4yOTY5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
-  --str-video__icon--reactions: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNiAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjM3NSAxMS4zMjAzQzE4LjQxMDUgMTEuMzIwMyAxOS4yNSAxMC41MDcxIDE5LjI1IDkuNTAzOTFDMTkuMjUgOC41MDA3MyAxOC40MTA1IDcuNjg3NSAxNy4zNzUgNy42ODc1QzE2LjMzOTUgNy42ODc1IDE1LjUgOC41MDA3MyAxNS41IDkuNTAzOTFDMTUuNSAxMC41MDcxIDE2LjMzOTUgMTEuMzIwMyAxNy4zNzUgMTEuMzIwM1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik04LjYyNSAxMS4zMjAzQzkuNjYwNTMgMTEuMzIwMyAxMC41IDEwLjUwNzEgMTAuNSA5LjUwMzkxQzEwLjUgOC41MDA3MyA5LjY2MDUzIDcuNjg3NSA4LjYyNSA3LjY4NzVDNy41ODk0NyA3LjY4NzUgNi43NSA4LjUwMDczIDYuNzUgOS41MDM5MUM2Ljc1IDEwLjUwNzEgNy41ODk0NyAxMS4zMjAzIDguNjI1IDExLjMyMDNaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTMgMTkuNzk2OUMxNS44NSAxOS43OTY5IDE4LjI3NSAxNy43ODY3IDE5LjI1IDE0Ljk1MzFINi43NUM3LjcyNSAxNy43ODY3IDEwLjE1IDE5Ljc5NjkgMTMgMTkuNzk2OVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMi45ODc1IDAuNDIxODc1QzYuMDg3NSAwLjQyMTg3NSAwLjUgNS44NDY4OCAwLjUgMTIuNTMxMkMwLjUgMTkuMjE1NiA2LjA4NzUgMjQuNjQwNiAxMi45ODc1IDI0LjY0MDZDMTkuOSAyNC42NDA2IDI1LjUgMTkuMjE1NiAyNS41IDEyLjUzMTJDMjUuNSA1Ljg0Njg4IDE5LjkgMC40MjE4NzUgMTIuOTg3NSAwLjQyMTg3NVpNMTMgMjIuMjE4OEM3LjQ3NSAyMi4yMTg4IDMgMTcuODgzNiAzIDEyLjUzMTJDMyA3LjE3ODkxIDcuNDc1IDIuODQzNzUgMTMgMi44NDM3NUMxOC41MjUgMi44NDM3NSAyMyA3LjE3ODkxIDIzIDEyLjUzMTJDMjMgMTcuODgzNiAxOC41MjUgMjIuMjE4OCAxMyAyMi4yMTg4WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
-  --str-video__icon--recording-off: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNiAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDAuNDIxODc1QzYuMSAwLjQyMTg3NSAwLjUgNS44NDY4OCAwLjUgMTIuNTMxMkMwLjUgMTkuMjE1NiA2LjEgMjQuNjQwNiAxMyAyNC42NDA2QzE5LjkgMjQuNjQwNiAyNS41IDE5LjIxNTYgMjUuNSAxMi41MzEyQzI1LjUgNS44NDY4OCAxOS45IDAuNDIxODc1IDEzIDAuNDIxODc1Wk0xMyAyMi4yMTg4QzcuNDc1IDIyLjIxODggMyAxNy44ODM2IDMgMTIuNTMxMkMzIDcuMTc4OTEgNy40NzUgMi44NDM3NSAxMyAyLjg0Mzc1QzE4LjUyNSAyLjg0Mzc1IDIzIDcuMTc4OTEgMjMgMTIuNTMxMkMyMyAxNy44ODM2IDE4LjUyNSAyMi4yMTg4IDEzIDIyLjIxODhaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTMgMTguNTg1OUMxNi40NTE4IDE4LjU4NTkgMTkuMjUgMTUuODc1MiAxOS4yNSAxMi41MzEyQzE5LjI1IDkuMTg3MzQgMTYuNDUxOCA2LjQ3NjU2IDEzIDYuNDc2NTZDOS41NDgyMiA2LjQ3NjU2IDYuNzUgOS4xODczNCA2Ljc1IDEyLjUzMTJDNi43NSAxNS44NzUyIDkuNTQ4MjIgMTguNTg1OSAxMyAxOC41ODU5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
-  --str-video__icon--recording-on: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNiAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDAuNDIxODc1QzYuMSAwLjQyMTg3NSAwLjUgNS44NDY4OCAwLjUgMTIuNTMxMkMwLjUgMTkuMjE1NiA2LjEgMjQuNjQwNiAxMyAyNC42NDA2QzE5LjkgMjQuNjQwNiAyNS41IDE5LjIxNTYgMjUuNSAxMi41MzEyQzI1LjUgNS44NDY4OCAxOS45IDAuNDIxODc1IDEzIDAuNDIxODc1Wk0xMyAyMi4yMTg4QzcuNDc1IDIyLjIxODggMyAxNy44ODM2IDMgMTIuNTMxMkMzIDcuMTc4OTEgNy40NzUgMi44NDM3NSAxMyAyLjg0Mzc1QzE4LjUyNSAyLjg0Mzc1IDIzIDcuMTc4OTEgMjMgMTIuNTMxMkMyMyAxNy44ODM2IDE4LjUyNSAyMi4yMTg4IDEzIDIyLjIxODhaIiBmaWxsPSIjZDkzMDI1Ii8+CjxwYXRoIGQ9Ik0xMyAxOC41ODU5QzE2LjQ1MTggMTguNTg1OSAxOS4yNSAxNS44NzUyIDE5LjI1IDEyLjUzMTJDMTkuMjUgOS4xODczNCAxNi40NTE4IDYuNDc2NTYgMTMgNi40NzY1NkM5LjU0ODIyIDYuNDc2NTYgNi43NSA5LjE4NzM0IDYuNzUgMTIuNTMxMkM2Ljc1IDE1Ljg3NTIgOS41NDgyMiAxOC41ODU5IDEzIDE4LjU4NTlaIiBmaWxsPSIjZDkzMDI1Ii8+Cjwvc3ZnPgo=');
+  --str-video__icon--mediation: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Im1lZGlhdGlvbiI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xNS4wOTEyIDEwLjgzNDJIMTAuODc0NUMxMC41OTEyIDEzLjQxNzYgOC45OTEyIDE1LjYwMDkgNi43NTc4NiAxNi43MDkyQzYuNzMyODYgMTguMjE3NiA1LjM3NDUzIDE5LjQwMDkgMy43OTk1MyAxOS4xMjU5QzIuNzk5NTMgMTguOTUwOSAxLjk3NDUzIDE4LjEyNTkgMS43OTk1MyAxNy4xMjU5QzEuNTE2MiAxNS41NDI2IDIuNzI0NTMgMTQuMTY3NiA0LjI1Nzg2IDE0LjE2NzZDNS4wNDk1MyAxNC4xNjc2IDUuNzQxMiAxNC41NDI2IDYuMTk5NTMgMTUuMTE3NkM3Ljc4Mjg2IDE0LjI1OTIgOC45MTYyIDEyLjY5MjYgOS4xODI4NiAxMC44MzQySDYuNTk5NTNDNi4xOTk1MyAxMS45NTA5IDUuMDQ5NTMgMTIuNzAwOSAzLjc0OTUzIDEyLjQ1MDlDMi43NjYyIDEyLjI1OTIgMS45NzQ1MyAxMS40NTA5IDEuNzkxMiAxMC40Njc2QzEuNTA3ODYgOC44ODQyMyAyLjcyNDUzIDcuNTAwOSA0LjI1Nzg2IDcuNTAwOUM1LjM0MTIgNy41MDA5IDYuMjU3ODYgOC4yMDA5IDYuNjA3ODYgOS4xNjc1Nkg5LjE5MTJDOC45MjQ1MyA3LjMwOTIzIDcuNzgyODYgNS43NTA5IDYuMTk5NTMgNC44ODQyM0M1LjY2NjIgNS41NTA5IDQuODA3ODYgNS45NTA5IDMuODU3ODYgNS44MDA5QzIuODMyODYgNS42NDI1NiAxLjk3NDUzIDQuODA5MjMgMS43OTk1MyAzLjc4NDIzQzEuNTI0NTMgMi4yMDkyMyAyLjczMjg2IDAuODM0MjI5IDQuMjU3ODYgMC44MzQyMjlDNS42MjQ1MyAwLjgzNDIyOSA2LjcyNDUzIDEuOTI1OSA2Ljc0OTUzIDMuMjkyNTZDOC45ODI4NiA0LjQwMDkgMTAuNTgyOSA2LjU4NDIzIDEwLjg2NjIgOS4xNjc1NkgxNS4wOTEyVjcuNjc1OUMxNS4wOTEyIDcuMzAwOSAxNS41NDEyIDcuMTE3NTYgMTUuNzk5NSA3LjM4NDIzTDE4LjEyNDUgOS43MDkyM0MxOC4yOTEyIDkuODc1ODkgMTguMjkxMiAxMC4xMzQyIDE4LjEyNDUgMTAuMzAwOUwxNS43OTk1IDEyLjYyNTlDMTUuNTQxMiAxMi44ODQyIDE1LjA5MTIgMTIuNzAwOSAxNS4wOTEyIDEyLjMyNTlWMTAuODM0MloiIGZpbGw9IiNFM0U0RTUiLz4KPC9nPgo8L3N2Zz4K');
+  --str-video__icon--mic: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjk5OSAxNC41QzEzLjY1OSAxNC41IDE0Ljk5OSAxMy4xNiAxNC45OTkgMTEuNVY1LjVDMTQuOTk5IDMuODQgMTMuNjU5IDIuNSAxMS45OTkgMi41QzEwLjMzOSAyLjUgOC45OTkwMSAzLjg0IDguOTk5MDEgNS41VjExLjVDOC45OTkwMSAxMy4xNiAxMC4zMzkgMTQuNSAxMS45OTkgMTQuNVpNMTcuOTA5IDExLjVDMTcuNDE5IDExLjUgMTcuMDA5IDExLjg2IDE2LjkyOSAxMi4zNUMxNi41MTkgMTQuNyAxNC40NjkgMTYuNSAxMS45OTkgMTYuNUM5LjUyOTAxIDE2LjUgNy40NzkwMSAxNC43IDcuMDY5MDEgMTIuMzVDNi45ODkwMSAxMS44NiA2LjU3OTAxIDExLjUgNi4wODkwMSAxMS41QzUuNDc5MDEgMTEuNSA0Ljk5OTAxIDEyLjA0IDUuMDg5MDEgMTIuNjRDNS41NzkwMSAxNS42NCA3Ljk3OTAxIDE3Ljk5IDEwLjk5OSAxOC40MlYyMC41QzEwLjk5OSAyMS4wNSAxMS40NDkgMjEuNSAxMS45OTkgMjEuNUMxMi41NDkgMjEuNSAxMi45OTkgMjEuMDUgMTIuOTk5IDIwLjVWMTguNDJDMTYuMDE5IDE3Ljk5IDE4LjQxOSAxNS42NCAxOC45MDkgMTIuNjRDMTkuMDA5IDEyLjA0IDE4LjUxOSAxMS41IDE3LjkwOSAxMS41WiIgZmlsbD0iI0IwQjRCNyIvPgo8L3N2Zz4K');
+  --str-video__icon--mic-off: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE0LjkyMDQgMTEuMVY1LjVDMTQuOTIwNCAzLjg0IDEzLjU4MDQgMi41IDExLjkyMDQgMi41QzEwLjM4MDQgMi41IDkuMTMwMzkgMy42NiA4Ljk2MDM5IDUuMTVMMTQuOTIwNCAxMS4xWk0xOC4wMDA0IDExLjVDMTcuNTkwNCAxMS41IDE3LjIzMDQgMTEuOCAxNy4xNzA0IDEyLjIxQzE3LjEyMDQgMTIuNTMgMTcuMDUwNCAxMi44NSAxNi45NTA0IDEzLjE0TDE4LjIyMDQgMTQuNDFDMTguNTIwNCAxMy44MSAxOC43NDA0IDEzLjE2IDE4Ljg1MDQgMTIuNDdDMTguOTIwNCAxMS45NiAxOC41MjA0IDExLjUgMTguMDAwNCAxMS41Wk0zLjYzMDM5IDQuMDZDMy4yNDAzOSA0LjQ1IDMuMjQwMzkgNS4wOCAzLjYzMDM5IDUuNDdMOC45MjAzOSAxMC43N1YxMS4yQzguOTIwMzkgMTIuMzkgOS41MjAzOSAxMy41MiAxMC41NTA0IDE0LjExQzExLjMwMDQgMTQuNTQgMTEuOTYwNCAxNC41NSAxMi41NzA0IDE0LjQyTDE0LjIzMDQgMTYuMDhDMTMuNTIwNCAxNi40MSAxMi43MzA0IDE2LjYgMTEuOTIwNCAxNi42QzkuMzgwMzkgMTYuNiA3LjA0MDM5IDE0LjgzIDYuNjcwMzkgMTIuMjFDNi42MTAzOSAxMS44IDYuMjUwMzkgMTEuNSA1Ljg0MDM5IDExLjVDNS4zMjAzOSAxMS41IDQuOTIwMzkgMTEuOTYgNC45OTAzOSAxMi40N0M1LjQ1MDM5IDE1LjQzIDcuOTUwMzkgMTcuNzcgMTAuOTIwNCAxOC4yMlYyMC41QzEwLjkyMDQgMjEuMDUgMTEuMzcwNCAyMS41IDExLjkyMDQgMjEuNUMxMi40NzA0IDIxLjUgMTIuOTIwNCAyMS4wNSAxMi45MjA0IDIwLjVWMTguMjJDMTMuODMwNCAxOC4wOSAxNC42OTA0IDE3Ljc3IDE1LjQ3MDQgMTcuMzJMMTguOTYwNCAyMC44MUMxOS4zNTA0IDIxLjIgMTkuOTgwNCAyMS4yIDIwLjM3MDQgMjAuODFDMjAuNzYwNCAyMC40MiAyMC43NjA0IDE5Ljc5IDIwLjM3MDQgMTkuNEw1LjA0MDM5IDQuMDZDNC42NTAzOSAzLjY3IDQuMDIwMzkgMy42NyAzLjYzMDM5IDQuMDZaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--more: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEyIDhDMTMuMSA4IDE0IDcuMSAxNCA2QzE0IDQuOSAxMy4xIDQgMTIgNEMxMC45IDQgMTAgNC45IDEwIDZDMTAgNy4xIDEwLjkgOCAxMiA4Wk0xMiAxMEMxMC45IDEwIDEwIDEwLjkgMTAgMTJDMTAgMTMuMSAxMC45IDE0IDEyIDE0QzEzLjEgMTQgMTQgMTMuMSAxNCAxMkMxNCAxMC45IDEzLjEgMTAgMTIgMTBaTTEyIDE2QzEwLjkgMTYgMTAgMTYuOSAxMCAxOEMxMCAxOS4xIDEwLjkgMjAgMTIgMjBDMTMuMSAyMCAxNCAxOS4xIDE0IDE4QzE0IDE2LjkgMTMuMSAxNiAxMiAxNloiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K');
+  --str-video__icon--network-quality: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNCA5LjJINi42QzcuMzcgOS4yIDggOS44MyA4IDEwLjZWMTcuNkM4IDE4LjM3IDcuMzcgMTkgNi42IDE5SDYuNEM1LjYzIDE5IDUgMTguMzcgNSAxNy42VjEwLjZDNSA5LjgzIDUuNjMgOS4yIDYuNCA5LjJaTTEyIDVDMTIuNzcgNSAxMy40IDUuNjMgMTMuNCA2LjRWMTcuNkMxMy40IDE4LjM3IDEyLjc3IDE5IDEyIDE5QzExLjIzIDE5IDEwLjYgMTguMzcgMTAuNiAxNy42VjYuNEMxMC42IDUuNjMgMTEuMjMgNSAxMiA1Wk0xNy42IDEzQzE4LjM3IDEzIDE5IDEzLjYzIDE5IDE0LjRWMTcuNkMxOSAxOC4zNyAxOC4zNyAxOSAxNy42IDE5QzE2LjgzIDE5IDE2LjIgMTguMzcgMTYuMiAxNy42VjE0LjRDMTYuMiAxMy42MyAxNi44MyAxMyAxNy42IDEzWiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K');
+  --str-video__icon--participants: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE2IDExQzE3LjY2IDExIDE4Ljk5IDkuNjYgMTguOTkgOEMxOC45OSA2LjM0IDE3LjY2IDUgMTYgNUMxNC4zNCA1IDEzIDYuMzQgMTMgOEMxMyA5LjY2IDE0LjM0IDExIDE2IDExWk04IDExQzkuNjYgMTEgMTAuOTkgOS42NiAxMC45OSA4QzEwLjk5IDYuMzQgOS42NiA1IDggNUM2LjM0IDUgNSA2LjM0IDUgOEM1IDkuNjYgNi4zNCAxMSA4IDExWk04IDEzQzUuNjcgMTMgMSAxNC4xNyAxIDE2LjVWMThDMSAxOC41NSAxLjQ1IDE5IDIgMTlIMTRDMTQuNTUgMTkgMTUgMTguNTUgMTUgMThWMTYuNUMxNSAxNC4xNyAxMC4zMyAxMyA4IDEzWk0xNiAxM0MxNS43MSAxMyAxNS4zOCAxMy4wMiAxNS4wMyAxMy4wNUMxNS4wNSAxMy4wNiAxNS4wNiAxMy4wOCAxNS4wNyAxMy4wOUMxNi4yMSAxMy45MiAxNyAxNS4wMyAxNyAxNi41VjE4QzE3IDE4LjM1IDE2LjkzIDE4LjY5IDE2LjgyIDE5SDIyQzIyLjU1IDE5IDIzIDE4LjU1IDIzIDE4VjE2LjVDMjMgMTQuMTcgMTguMzMgMTMgMTYgMTNaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--person-add: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InBlcnNvbl9hZGRfYWx0Ij4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguOTc3NDIgOC42NDg1QzcuOTk3NDIgOC4xNDY4MyA2LjcyNTc1IDcuNzM4NSA1LjI0OTkyIDcuNzM4NUMzLjc3NDA5IDcuNzM4NSAyLjUwMjQyIDguMTQ2ODMgMS41MjI0MiA4LjY0ODVDMC45MzkwODUgOC45NDYgMC41ODMyNTIgOS41NDY4MyAwLjU4MzI1MiAxMC4yMDAyVjExLjgyMThIOS45MTY1OVYxMC4yMDAyQzkuOTE2NTkgOS41NDY4MyA5LjU2MDc1IDguOTQ2IDguOTc3NDIgOC42NDg1Wk01LjI0OTkyIDcuMTU1MTZDNi41MzkwOSA3LjE1NTE2IDcuNTgzMjUgNi4xMTEgNy41ODMyNSA0LjgyMTgzQzcuNTgzMjUgMy41MzI2NiA2LjUzOTA5IDIuNDg4NDkgNS4yNDk5MiAyLjQ4ODQ5QzMuOTYwNzUgMi40ODg0OSAyLjkxNjU5IDMuNTMyNjYgMi45MTY1OSA0LjgyMTgzQzIuOTE2NTkgNi4xMTEgMy45NjA3NSA3LjE1NTE2IDUuMjQ5OTIgNy4xNTUxNlpNMTEuNjY2NiA1LjQwNTE2VjQuMjM4NDlDMTEuNjY2NiAzLjkxNzY2IDExLjQwNDEgMy42NTUxNiAxMS4wODMzIDMuNjU1MTZDMTAuNzYyNCAzLjY1NTE2IDEwLjQ5OTkgMy45MTc2NiAxMC40OTk5IDQuMjM4NDlWNS40MDUxNkg5LjMzMzI1QzkuMDEyNDIgNS40MDUxNiA4Ljc0OTkyIDUuNjY3NjYgOC43NDk5MiA1Ljk4ODVDOC43NDk5MiA2LjMwOTMzIDkuMDEyNDIgNi41NzE4MyA5LjMzMzI1IDYuNTcxODNIMTAuNDk5OVY3LjczODVDMTAuNDk5OSA4LjA1OTMzIDEwLjc2MjQgOC4zMjE4MyAxMS4wODMzIDguMzIxODNDMTEuNDA0MSA4LjMyMTgzIDExLjY2NjYgOC4wNTkzMyAxMS42NjY2IDcuNzM4NVY2LjU3MTgzSDEyLjgzMzNDMTMuMTU0MSA2LjU3MTgzIDEzLjQxNjYgNi4zMDkzMyAxMy40MTY2IDUuOTg4NUMxMy40MTY2IDUuNjY3NjYgMTMuMTU0MSA1LjQwNTE2IDEyLjgzMzMgNS40MDUxNkgxMS42NjY2WiIgZmlsbD0iI0UzRTRFNSIvPgo8L2c+Cjwvc3ZnPgo=');
+  --str-video__icon--qr-code: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMjA3MDMgNi4wNTg5M1Y4LjgwODkzSDYuNDU3MDNWNi4wNTg5M0g5LjIwNzAzWk0xMC41ODIgNC42ODM5M0g1LjA4MjAzVjEwLjE4MzlIMTAuNTgyVjQuNjgzOTNaTTkuMjA3MDMgMTMuMzkyM1YxNi4xNDIzSDYuNDU3MDNWMTMuMzkyM0g5LjIwNzAzWk0xMC41ODIgMTIuMDE3M0g1LjA4MjAzVjE3LjUxNzNIMTAuNTgyVjEyLjAxNzNaTTE2LjU0MDQgNi4wNTg5M1Y4LjgwODkzSDEzLjc5MDRWNi4wNTg5M0gxNi41NDA0Wk0xNy45MTU0IDQuNjgzOTNIMTIuNDE1NFYxMC4xODM5SDE3LjkxNTRWNC42ODM5M1pNMTIuNDE1NCAxMi4wMTczSDEzLjc5MDRWMTMuMzkyM0gxMi40MTU0VjEyLjAxNzNaTTEzLjc5MDQgMTMuMzkyM0gxNS4xNjU0VjE0Ljc2NzNIMTMuNzkwNFYxMy4zOTIzWk0xNS4xNjU0IDEyLjAxNzNIMTYuNTQwNFYxMy4zOTIzSDE1LjE2NTRWMTIuMDE3M1pNMTIuNDE1NCAxNC43NjczSDEzLjc5MDRWMTYuMTQyM0gxMi40MTU0VjE0Ljc2NzNaTTEzLjc5MDQgMTYuMTQyM0gxNS4xNjU0VjE3LjUxNzNIMTMuNzkwNFYxNi4xNDIzWk0xNS4xNjU0IDE0Ljc2NzNIMTYuNTQwNFYxNi4xNDIzSDE1LjE2NTRWMTQuNzY3M1pNMTYuNTQwNCAxMy4zOTIzSDE3LjkxNTRWMTQuNzY3M0gxNi41NDA0VjEzLjM5MjNaTTE2LjU0MDQgMTYuMTQyM0gxNy45MTU0VjE3LjUxNzNIMTYuNTQwNFYxNi4xNDIzWk0yMC42NjU0IDYuNTE3MjZIMTguODMyVjMuNzY3MjZIMTYuMDgyVjEuOTMzOTNIMjAuNjY1NFY2LjUxNzI2Wk0yMC42NjU0IDIwLjI2NzNWMTUuNjgzOUgxOC44MzJWMTguNDMzOUgxNi4wODJWMjAuMjY3M0gyMC42NjU0Wk0yLjMzMjAzIDIwLjI2NzNINi45MTUzNlYxOC40MzM5SDQuMTY1MzZWMTUuNjgzOUgyLjMzMjAzVjIwLjI2NzNaTTIuMzMyMDMgMS45MzM5M1Y2LjUxNzI2SDQuMTY1MzZWMy43NjcyNkg2LjkxNTM2VjEuOTMzOTNIMi4zMzIwM1oiIGZpbGw9IiNGQUZBRkEiLz4KPC9zdmc+Cg==');
+  --str-video__icon--reactions: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIzIDQuNUMyMyA1LjA1IDIyLjU1IDUuNSAyMiA1LjVIMjFWNi41QzIxIDcuMDUgMjAuNTUgNy41IDIwIDcuNUMxOS40NSA3LjUgMTkgNy4wNSAxOSA2LjVWNS41SDE4QzE3LjQ1IDUuNSAxNyA1LjA1IDE3IDQuNUMxNyAzLjk1IDE3LjQ1IDMuNSAxOCAzLjVIMTlWMi41QzE5IDEuOTUgMTkuNDUgMS41IDIwIDEuNUMyMC41NSAxLjUgMjEgMS45NSAyMSAyLjVWMy41SDIyQzIyLjU1IDMuNSAyMyAzLjk1IDIzIDQuNVpNMjAuNTIgOS40NUMyMC44MyAxMC40MSAyMSAxMS40NCAyMSAxMi41QzIxIDE4LjAyIDE2LjUyIDIyLjUgMTEgMjIuNUM1LjQ4IDIyLjUgMSAxOC4wMiAxIDEyLjVDMSA2Ljk4IDUuNDggMi41IDExIDIuNUMxMi41IDIuNSAxMy45MiAyLjg0IDE1LjIgMy40NEMxNS4wOCAzLjc3IDE1IDQuMTIgMTUgNC41QzE1IDUuODUgMTUuOSA3IDE3LjEzIDcuMzdDMTcuNSA4LjYgMTguNjUgOS41IDIwIDkuNUMyMC4xOCA5LjUgMjAuMzUgOS40OCAyMC41MiA5LjQ1Wk02IDEwQzYgMTAuODMgNi42NyAxMS41IDcuNSAxMS41QzguMzMgMTEuNSA5IDEwLjgzIDkgMTBDOSA5LjE3IDguMzMgOC41IDcuNSA4LjVDNi42NyA4LjUgNiA5LjE3IDYgMTBaTTE1LjMxIDE0LjVINi42OUM2LjMxIDE0LjUgNi4wNiAxNC45MiA2LjI1IDE1LjI1QzcuMiAxNi44OSA4Ljk3IDE4IDExIDE4QzEzLjAzIDE4IDE0LjggMTYuODkgMTUuNzUgMTUuMjVDMTUuOTQgMTQuOTIgMTUuNyAxNC41IDE1LjMxIDE0LjVaTTE2IDEwQzE2IDkuMTcgMTUuMzMgOC41IDE0LjUgOC41QzEzLjY3IDguNSAxMyA5LjE3IDEzIDEwQzEzIDEwLjgzIDEzLjY3IDExLjUgMTQuNSAxMS41QzE1LjMzIDExLjUgMTYgMTAuODMgMTYgMTBaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--recording-off: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPGcgaWQ9IlZlY3RvciI+CjxwYXRoIGQ9Ik0xMiAyQzYuNDggMiAyIDYuNDggMiAxMkMyIDE3LjUyIDYuNDggMjIgMTIgMjJDMTcuNTIgMjIgMjIgMTcuNTIgMjIgMTJDMjIgNi40OCAxNy41MiAyIDEyIDJaTTEyIDIwQzcuNTggMjAgNCAxNi40MiA0IDEyQzQgNy41OCA3LjU4IDQgMTIgNEMxNi40MiA0IDIwIDcuNTggMjAgMTJDMjAgMTYuNDIgMTYuNDIgMjAgMTIgMjBaIiBmaWxsPSIjQjBCNEI3Ii8+CjxwYXRoIGQ9Ik0xMiAxN0MxNC43NjE0IDE3IDE3IDE0Ljc2MTQgMTcgMTJDMTcgOS4yMzg1OCAxNC43NjE0IDcgMTIgN0M5LjIzODU4IDcgNyA5LjIzODU4IDcgMTJDNyAxNC43NjE0IDkuMjM4NTggMTcgMTIgMTdaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9nPgo8L3N2Zz4K');
+  --str-video__icon--recording-on: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDBDNC40OCAwIDAgNC40OCAwIDEwQzAgMTUuNTIgNC40OCAyMCAxMCAyMEMxNS41MiAyMCAyMCAxNS41MiAyMCAxMEMyMCA0LjQ4IDE1LjUyIDAgMTAgMFpNMTMgMTRIN0M2LjQ1IDE0IDYgMTMuNTUgNiAxM1Y3QzYgNi40NSA2LjQ1IDYgNyA2SDEzQzEzLjU1IDYgMTQgNi40NSAxNCA3VjEzQzE0IDEzLjU1IDEzLjU1IDE0IDEzIDE0WiIgZmlsbD0iI0UzRTRFNSIvPgo8L3N2Zz4K');
   --str-video__icon--refresh: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOTIwIDE5MjAiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTk2MCAwdjIxMy4zMzNjNDExLjYyNyAwIDc0Ni42NjcgMzM0LjkzNCA3NDYuNjY3IDc0Ni42NjdTMTM3MS42MjcgMTcwNi42NjcgOTYwIDE3MDYuNjY3IDIxMy4zMzMgMTM3MS43MzMgMjEzLjMzMyA5NjBjMC0xOTcuMDEzIDc4LjQtMzgyLjUwNyAyMTMuMzM0LTUyMC43NDd2MjU0LjA4SDY0MFYxMDYuNjY3SDUzLjMzM1YzMjBoMTkxLjA0Qzg4LjY0IDQ5NC4wOCAwIDcyMC45NiAwIDk2MGMwIDUyOS4yOCA0MzAuNjEzIDk2MCA5NjAgOTYwczk2MC00MzAuNzIgOTYwLTk2MFMxNDg5LjM4NyAwIDk2MCAwIi8+PC9zdmc+Cg==');
-  --str-video__icon--screen-share-off: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAzMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDE3Ljc5NjlDMjYuMzc1IDE3Ljc5NjkgMjcuNDg3NSAxNi43MDcgMjcuNDg3NSAxNS4zNzVMMjcuNSAzLjI2NTYyQzI3LjUgMS45MjE0OCAyNi4zNzUgMC44NDM3NSAyNSAwLjg0Mzc1SDVDMy42MTI1IDAuODQzNzUgMi41IDEuOTIxNDggMi41IDMuMjY1NjJWMTUuMzc1QzIuNSAxNi43MDcgMy42MTI1IDE3Ljc5NjkgNSAxNy43OTY5SDBWMjAuMjE4OEgzMFYxNy43OTY5SDI1Wk01IDE1LjM3NVYzLjI2NTYySDI1VjE1LjM4NzFMNSAxNS4zNzVaTTE2LjI1IDcuMDU1ODZDMTEuMzg3NSA3LjcwOTc3IDkuNDUgMTAuOTMwOSA4Ljc1IDE0LjE2NDFDMTAuNDg3NSAxMS44OTk2IDEyLjc3NSAxMC44NzAzIDE2LjI1IDEwLjg3MDNWMTMuNTIyM0wyMS4yNSA4Ljk5MzM2TDE2LjI1IDQuNDc2NTZWNy4wNTU4NloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
-  --str-video__icon--screen-share-on: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAzMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI1IDE3Ljc5NjlDMjYuMzc1IDE3Ljc5NjkgMjcuNDg3NSAxNi43MDcgMjcuNDg3NSAxNS4zNzVMMjcuNSAzLjI2NTYyQzI3LjUgMS45MjE0OCAyNi4zNzUgMC44NDM3NSAyNSAwLjg0Mzc1SDVDMy42MTI1IDAuODQzNzUgMi41IDEuOTIxNDggMi41IDMuMjY1NjJWMTUuMzc1QzIuNSAxNi43MDcgMy42MTI1IDE3Ljc5NjkgNSAxNy43OTY5SDBWMjAuMjE4OEgzMFYxNy43OTY5SDI1Wk01IDE1LjM3NVYzLjI2NTYySDI1VjE1LjM4NzFMNSAxNS4zNzVaTTE2LjI1IDcuMDU1ODZDMTEuMzg3NSA3LjcwOTc3IDkuNDUgMTAuOTMwOSA4Ljc1IDE0LjE2NDFDMTAuNDg3NSAxMS44OTk2IDEyLjc3NSAxMC44NzAzIDE2LjI1IDEwLjg3MDNWMTMuNTIyM0wyMS4yNSA4Ljk5MzM2TDE2LjI1IDQuNDc2NTZWNy4wNTU4NloiIGZpbGw9IiMwMDVGRkYiLz4KPC9zdmc+Cg==');
-  --str-video__icon--settings: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOS4xMTAzNSAxOS4xOTA0SDEwLjg4NTdDMTEuNjE1MiAxOS4xOTA0IDEyLjE4NjUgMTguNzQyMiAxMi4zNTM1IDE4LjA0NzlMMTIuNzEzOSAxNi40OTIyTDEyLjk0MjQgMTYuNDA0M0wxNC4yOTU5IDE3LjIzOTNDMTQuOTExMSAxNy42MjYgMTUuNjMxOCAxNy41MjkzIDE2LjE0MTYgMTcuMDEwN0wxNy4zNzIxIDE1Ljc4MDNDMTcuODk5NCAxNS4yNjE3IDE3Ljk4NzMgMTQuNTQxIDE3LjYwMDYgMTMuOTM0NkwxNi43NjU2IDEyLjU4OThMMTYuODQ0NyAxMi4zNzAxTDE4LjQwMDQgMTIuMDA5OEMxOS4wODU5IDExLjgzNCAxOS41NDMgMTEuMjYyNyAxOS41NDMgMTAuNTQyVjguODEwNTVDMTkuNTQzIDguMDg5ODQgMTkuMDk0NyA3LjUxODU1IDE4LjQwMDQgNy4zNDI3N0wxNi44NjIzIDYuOTczNjNMMTYuNzc0NCA2Ljc0NTEyTDE3LjYwOTQgNS40MDAzOUMxNy45OTYxIDQuNzkzOTUgMTcuODk5NCA0LjA4MjAzIDE3LjM4MDkgMy41NDU5TDE2LjE1MDQgMi4zMTU0M0MxNS42NDA2IDEuODA1NjYgMTQuOTE5OSAxLjcwODk4IDE0LjMxMzUgMi4wODY5MUwxMi45NiAyLjkxMzA5TDEyLjcxMzkgMi44MTY0MUwxMi4zNTM1IDEuMjYwNzRDMTIuMTg2NSAwLjU2NjQwNiAxMS42MTUyIDAuMTE4MTY0IDEwLjg4NTcgMC4xMTgxNjRIOS4xMTAzNUM4LjM3MjA3IDAuMTE4MTY0IDcuODA5NTcgMC41NjY0MDYgNy42NDI1OCAxLjI2MDc0TDcuMjgyMjMgMi44MTY0MUw3LjAzNjEzIDIuOTEzMDlMNS42ODI2MiAyLjA4NjkxQzUuMDY3MzggMS43MDg5OCA0LjM0NjY4IDEuODA1NjYgMy44MzY5MSAyLjMxNTQzTDIuNjA2NDUgMy41NDU5QzIuMDg3ODkgNC4wODIwMyAxLjk5MTIxIDQuNzkzOTUgMi4zNzc5MyA1LjQwMDM5TDMuMjIxNjggNi43NDUxMkwzLjEyNSA2Ljk3MzYzTDEuNTk1NyA3LjM0Mjc3QzAuODkyNTc4IDcuNTE4NTUgMC40NTMxMjUgOC4wODk4NCAwLjQ1MzEyNSA4LjgxMDU1VjEwLjU0MkMwLjQ1MzEyNSAxMS4yNjI3IDAuOTAxMzY3IDExLjgzNCAxLjU5NTcgMTIuMDA5OEwzLjE0MjU4IDEyLjM3MDFMMy4yMzA0NyAxMi41ODk4TDIuMzg2NzIgMTMuOTM0NkMyIDE0LjU0MSAyLjA5NjY4IDE1LjI2MTcgMi42MTUyMyAxNS43ODAzTDMuODQ1NyAxNy4wMTA3QzQuMzY0MjYgMTcuNTI5MyA1LjA4NDk2IDE3LjYyNiA1LjY5MTQxIDE3LjIzOTNMNy4wNDQ5MiAxNi40MDQzTDcuMjgyMjMgMTYuNDkyMkw3LjY0MjU4IDE4LjA0NzlDNy44MDk1NyAxOC43NDIyIDguMzcyMDcgMTkuMTkwNCA5LjExMDM1IDE5LjE5MDRaTTkuMzIxMjkgMTcuNTk5NkM5LjE3MTg4IDE3LjU5OTYgOS4xMDE1NiAxNy41MjkzIDkuMDc1MiAxNy4zOTc1TDguNTU2NjQgMTUuMjM1NEM3Ljk5NDE0IDE1LjEwMzUgNy40NjY4IDE0Ljg4MzggNy4wMzYxMyAxNC42MTEzTDUuMTM3NyAxNS43ODAzQzUuMDMyMjMgMTUuODUwNiA0LjkyNjc2IDE1Ljg0MTggNC44MTI1IDE1LjczNjNMMy44ODA4NiAxNC44MDQ3QzMuNzg0MTggMTQuNzA4IDMuNzc1MzkgMTQuNjAyNSAzLjg1NDQ5IDE0LjQ4ODNMNS4wMjM0NCAxMi41ODk4QzQuNzc3MzQgMTIuMTc2OCA0LjU0MDA0IDExLjY0OTQgNC40MDgyIDExLjA5NTdMMi4yMzczIDEwLjU3NzFDMi4xMDU0NyAxMC41NTA4IDIuMDQzOTUgMTAuNDgwNSAyLjA0Mzk1IDEwLjMzMTFWOS4wMTI3QzIuMDQzOTUgOC44NTQ0OSAyLjEwNTQ3IDguNzkyOTcgMi4yMzczIDguNzU3ODFMNC40MDgyIDguMjQ4MDVDNC41NDAwNCA3LjY1OTE4IDQuNzk0OTIgNy4xMTQyNiA1LjAwNTg2IDYuNzM2MzNMMy44NDU3IDQuODQ2NjhDMy43NjY2IDQuNzIzNjMgMy43NjY2IDQuNjE4MTYgMy44NzIwNyA0LjUxMjdMNC44MDM3MSAzLjU4OTg0QzQuOTE3OTcgMy40OTMxNiA1LjAwNTg2IDMuNDc1NTkgNS4xMzc3IDMuNTQ1OUw3LjAyNzM0IDQuNjk3MjdDNy40MjI4NSA0LjQ1OTk2IDguMDAyOTMgNC4yMTM4NyA4LjU1NjY0IDQuMDczMjRMOS4wNzUyIDEuOTExMTNDOS4xMDE1NiAxLjc3OTMgOS4xNzE4OCAxLjcwODk4IDkuMzIxMjkgMS43MDg5OEgxMC42NzQ4QzEwLjgyNDIgMS43MDg5OCAxMC44OTQ1IDEuNzcwNTEgMTAuOTEyMSAxLjkxMTEzTDExLjQzOTUgNC4wOTA4MkMxMi4wMTA3IDQuMjIyNjYgMTIuNTI5MyA0LjQ1OTk2IDEyLjk2IDQuNzA2MDVMMTQuODQ5NiAzLjU1NDY5QzE0Ljk4MTQgMy40ODQzOCAxNS4wNjkzIDMuNDkzMTYgMTUuMTc0OCAzLjU5ODYzTDE2LjExNTIgNC41MjE0OEMxNi4yMjA3IDQuNjE4MTYgMTYuMjIwNyA0LjcyMzYzIDE2LjE0MTYgNC44NDY2OEwxNC45ODE0IDYuNzM2MzNDMTUuMTkyNCA3LjExNDI2IDE1LjQ1NjEgNy42NTkxOCAxNS41ODc5IDguMjQ4MDVMMTcuNzUgOC43NTc4MUMxNy44OTA2IDguNzkyOTcgMTcuOTUyMSA4Ljg1NDQ5IDE3Ljk1MjEgOS4wMTI3VjEwLjMzMTFDMTcuOTUyMSAxMC40ODA1IDE3Ljg4MTggMTAuNTUwOCAxNy43NSAxMC41NzcxTDE1LjU3OTEgMTEuMDk1N0MxNS40NDczIDExLjY0OTQgMTUuMjEgMTIuMTc2OCAxNC45NzI3IDEyLjU4OThMMTYuMTMyOCAxNC40ODgzQzE2LjIwMzEgMTQuNjAyNSAxNi4yMDMxIDE0LjcwOCAxNi4xMDY0IDE0Ljc5NTlMMTUuMTc0OCAxNS43MzYzQzE1LjA2MDUgMTUuODQxOCAxNC45NTUxIDE1Ljg1MDYgMTQuODQ5NiAxNS43ODAzTDEyLjk1MTIgMTQuNjExM0MxMi41MjA1IDE0Ljg4MzggMTIuMDE5NSAxNS4xMDM1IDExLjQzOTUgMTUuMjM1NEwxMC45MTIxIDE3LjM5NzVDMTAuODk0NSAxNy41MzgxIDEwLjgyNDIgMTcuNTk5NiAxMC42NzQ4IDE3LjU5OTZIOS4zMjEyOVpNOS45OTgwNSAxMi45OTQxQzExLjgyNjIgMTIuOTk0MSAxMy4zMjkxIDExLjQ5MTIgMTMuMzI5MSA5LjY1NDNDMTMuMzI5MSA3LjgzNDk2IDExLjgyNjIgNi4zMzIwMyA5Ljk5ODA1IDYuMzMyMDNDOC4xNjk5MiA2LjMzMjAzIDYuNjU4MiA3LjgzNDk2IDYuNjU4MiA5LjY1NDNDNi42NTgyIDExLjQ5MTIgOC4xNjExMyAxMi45OTQxIDkuOTk4MDUgMTIuOTk0MVpNOS45OTgwNSAxMS40OTEyQzguOTk2MDkgMTEuNDkxMiA4LjE2OTkyIDEwLjY2NSA4LjE2OTkyIDkuNjU0M0M4LjE2OTkyIDguNjYxMTMgOC45OTYwOSA3Ljg0Mzc1IDkuOTk4MDUgNy44NDM3NUMxMC45ODI0IDcuODQzNzUgMTEuNzk5OCA4LjY2MTEzIDExLjc5OTggOS42NTQzQzExLjc5OTggMTAuNjU2MiAxMC45ODI0IDExLjQ5MTIgOS45OTgwNSAxMS40OTEyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
-  --str-video__icon--speaker: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjUgNy44OTg0OVYxNS4xNjQxSDUuMjVMMTEuNSAyMS4yMTg4VjEuODQzOEw1LjI1IDcuODk4NDlIMC4yNVpNMTcuMTI1IDExLjUzMTNDMTcuMTI1IDkuMzg3OTQgMTUuODUgNy41NDczMSAxNCA2LjY1MTIyVjE2LjM5OTNDMTUuODUgMTUuNTE1MyAxNy4xMjUgMTMuNjc0NyAxNy4xMjUgMTEuNTMxM1pNMTQgMC45MTEzNzdWMy40MDU5MUMxNy42MTI1IDQuNDQ3MzEgMjAuMjUgNy42OTI2MyAyMC4yNSAxMS41MzEzQzIwLjI1IDE1LjM3IDE3LjYxMjUgMTguNjE1MyAxNCAxOS42NTY3VjIyLjE1MTJDMTkuMDEyNSAyMS4wNDkzIDIyLjc1IDE2LjcxNDEgMjIuNzUgMTEuNTMxM0MyMi43NSA2LjM0ODQ5IDE5LjAxMjUgMi4wMTMzMyAxNCAwLjkxMTM3N1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
-  --str-video__icon--stats: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjA3NDIgNi4yMDgyOEwxMi4wNzQyIDEyLjczODNMNy42OTQyMiA4LjM1ODI4TDMuMDc0MjIgMTEuNzM4M1Y5LjI1ODI4TDcuOTA0MjIgNS43MzgyOEwxMi4yODQyIDEwLjExODNMMjEuMDc0MiAzLjczODI4VjYuMjA4MjhaTTIxLjA3NDIgMTUuNzM4M0gxNi4zNzQyTDEyLjIwNDIgMTkuMDc4M0w2LjA3NDIyIDEzLjE0ODNMMy4wNzQyMiAxNS4yNzgzVjE3LjczODNMNS44NzQyMiAxNS43MzgzTDEyLjA3NDIgMjEuNzM4M0wxNy4wNzQyIDE3LjczODNIMjEuMDc0MlYxNS43MzgzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
+  --str-video__icon--screen-share-off: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIwIDE4QzIxLjEgMTggMjIgMTcuMSAyMiAxNlY2QzIyIDQuOSAyMS4xIDQgMjAgNEg0QzIuOSA0IDIgNC45IDIgNlYxNkMyIDE3LjEgMi44OSAxOCA0IDE4SDFDMC40NSAxOCAwIDE4LjQ1IDAgMTlDMCAxOS41NSAwLjQ1IDIwIDEgMjBIMjNDMjMuNTUgMjAgMjQgMTkuNTUgMjQgMTlDMjQgMTguNDUgMjMuNTUgMTggMjMgMThIMjBaTTEzIDE0LjQ3VjEyLjI4QzEwLjIyIDEyLjI4IDguMzkgMTMuMTMgNyAxNUM3LjU2IDEyLjMzIDkuMTEgOS42NyAxMyA5LjEzVjdMMTYuNjEgMTAuMzZDMTYuODIgMTAuNTYgMTYuODIgMTAuODkgMTYuNjEgMTEuMDlMMTMgMTQuNDdaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--screen-share-on: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPU91dGxpbmVkIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTIwIDE4QzIxLjEgMTggMjEuOTkgMTcuMSAyMS45OSAxNkwyMiA2QzIyIDQuODkgMjEuMSA0IDIwIDRINEMyLjg5IDQgMiA0Ljg5IDIgNlYxNkMyIDE3LjEgMi44OSAxOCA0IDE4SDBWMjBIMjRWMThIMjBaTTQgMTZWNkgyMFYxNi4wMUw0IDE2Wk0xMyA5LjEzQzkuMTEgOS42NyA3LjU2IDEyLjMzIDcgMTVDOC4zOSAxMy4xMyAxMC4yMiAxMi4yOCAxMyAxMi4yOFYxNC40N0wxNyAxMC43M0wxMyA3VjkuMTNaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--settings: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE5LjQ5OTcgMTJDMTkuNDk5NyAxMS43NyAxOS40ODk3IDExLjU1IDE5LjQ2OTcgMTEuMzJMMjEuMzI5NyA5LjkxQzIxLjcyOTcgOS42MSAyMS44Mzk3IDkuMDUgMjEuNTg5NyA4LjYxTDE5LjcxOTcgNS4zOEMxOS40Njk3IDQuOTQgMTguOTI5NyA0Ljc2IDE4LjQ2OTcgNC45NkwxNi4zMTk3IDUuODdDMTUuOTQ5NyA1LjYxIDE1LjU1OTcgNS4zOCAxNS4xNDk3IDUuMTlMMTQuODU5NyAyLjg4QzE0Ljc5OTcgMi4zOCAxNC4zNjk3IDIgMTMuODY5NyAySDEwLjEzOTdDOS42Mjk2NyAyIDkuMTk5NjcgMi4zOCA5LjEzOTY3IDIuODhMOC44NDk2NyA1LjE5QzguNDM5NjcgNS4zOCA4LjA0OTY2IDUuNjEgNy42Nzk2NyA1Ljg3TDUuNTI5NjcgNC45NkM1LjA2OTY3IDQuNzYgNC41Mjk2NyA0Ljk0IDQuMjc5NjcgNS4zOEwyLjQwOTY3IDguNjJDMi4xNTk2NyA5LjA2IDIuMjY5NjcgOS42MSAyLjY2OTY3IDkuOTJMNC41Mjk2NyAxMS4zM0M0LjUwOTY3IDExLjU1IDQuNDk5NjcgMTEuNzcgNC40OTk2NyAxMkM0LjQ5OTY3IDEyLjIzIDQuNTA5NjcgMTIuNDUgNC41Mjk2NyAxMi42OEwyLjY2OTY3IDE0LjA5QzIuMjY5NjcgMTQuMzkgMi4xNTk2NyAxNC45NSAyLjQwOTY3IDE1LjM5TDQuMjc5NjcgMTguNjJDNC41Mjk2NyAxOS4wNiA1LjA2OTY3IDE5LjI0IDUuNTI5NjcgMTkuMDRMNy42Nzk2NyAxOC4xM0M4LjA0OTY2IDE4LjM5IDguNDM5NjcgMTguNjIgOC44NDk2NyAxOC44MUw5LjEzOTY3IDIxLjEyQzkuMTk5NjcgMjEuNjIgOS42Mjk2NyAyMiAxMC4xMjk3IDIySDEzLjg1OTdDMTQuMzU5NyAyMiAxNC43ODk3IDIxLjYyIDE0Ljg0OTcgMjEuMTJMMTUuMTM5NyAxOC44MUMxNS41NDk3IDE4LjYyIDE1LjkzOTcgMTguMzkgMTYuMzA5NyAxOC4xM0wxOC40NTk3IDE5LjA0QzE4LjkxOTcgMTkuMjQgMTkuNDU5NyAxOS4wNiAxOS43MDk3IDE4LjYyTDIxLjU3OTcgMTUuMzlDMjEuODI5NyAxNC45NSAyMS43MTk3IDE0LjQgMjEuMzE5NyAxNC4wOUwxOS40NTk3IDEyLjY4QzE5LjQ4OTcgMTIuNDUgMTkuNDk5NyAxMi4yMyAxOS40OTk3IDEyWk0xMi4wMzk3IDE1LjVDMTAuMTA5NyAxNS41IDguNTM5NjcgMTMuOTMgOC41Mzk2NyAxMkM4LjUzOTY3IDEwLjA3IDEwLjEwOTcgOC41IDEyLjAzOTcgOC41QzEzLjk2OTcgOC41IDE1LjUzOTcgMTAuMDcgMTUuNTM5NyAxMkMxNS41Mzk3IDEzLjkzIDEzLjk2OTcgMTUuNSAxMi4wMzk3IDE1LjVaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--speaker: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTMgMTAuMDAxOFYxNC4wMDE4QzMgMTQuNTUxOCAzLjQ1IDE1LjAwMTggNCAxNS4wMDE4SDdMMTAuMjkgMTguMjkxOEMxMC45MiAxOC45MjE4IDEyIDE4LjQ3MTggMTIgMTcuNTgxOFY2LjQxMTc5QzEyIDUuNTIxNzkgMTAuOTIgNS4wNzE3OSAxMC4yOSA1LjcwMTc5TDcgOS4wMDE3OUg0QzMuNDUgOS4wMDE3OSAzIDkuNDUxNzkgMyAxMC4wMDE4Wk0xNi41IDEyLjAwMThDMTYuNSAxMC4yMzE4IDE1LjQ4IDguNzExNzkgMTQgNy45NzE3OVYxNi4wMjE4QzE1LjQ4IDE1LjI5MTggMTYuNSAxMy43NzE4IDE2LjUgMTIuMDAxOFpNMTQgNC40NTE3OVY0LjY1MTc5QzE0IDUuMDMxNzkgMTQuMjUgNS4zNjE3OSAxNC42IDUuNTAxNzlDMTcuMTggNi41MzE3OSAxOSA5LjA2MTc5IDE5IDEyLjAwMThDMTkgMTQuOTQxOCAxNy4xOCAxNy40NzE4IDE0LjYgMTguNTAxOEMxNC4yNCAxOC42NDE4IDE0IDE4Ljk3MTggMTQgMTkuMzUxOFYxOS41NTE4QzE0IDIwLjE4MTggMTQuNjMgMjAuNjIxOCAxNS4yMSAyMC40MDE4QzE4LjYgMTkuMTExOCAyMSAxNS44NDE4IDIxIDEyLjAwMThDMjEgOC4xNjE3OSAxOC42IDQuODkxNzkgMTUuMjEgMy42MDE3OUMxNC42MyAzLjM3MTc5IDE0IDMuODIxNzkgMTQgNC40NTE3OVoiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K');
+  --str-video__icon--stats: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEzLjg5MTEgMTAuNTQ3NUwxMi44MzExIDEwLjA1NzVDMTIuNDQxMSA5Ljg3NzQ2IDEyLjQ0MTEgOS4zMjc0NiAxMi44MzExIDkuMTQ3NDZMMTMuODkxMSA4LjY1NzQ2TDE0LjM4MTEgNy42MDc0NkMxNC41NjExIDcuMjE3NDYgMTUuMTExMSA3LjIxNzQ2IDE1LjI5MTEgNy42MDc0NkwxNS43ODExIDguNjY3NDZMMTYuODMxMSA5LjE1NzQ2QzE3LjIyMTEgOS4zMzc0NiAxNy4yMjExIDkuODg3NDYgMTYuODMxMSAxMC4wNjc1TDE1Ljc3MTEgMTAuNTU3NUwxNS4yODExIDExLjYwNzVDMTUuMTAxMSAxMS45OTc1IDE0LjU1MTEgMTEuOTk3NSAxNC4zNzExIDExLjYwNzVMMTMuODkxMSAxMC41NDc1Wk00LjI4MTA3IDEzLjYwNzVMNC43NzEwNyAxMi41NDc1TDUuODMxMDcgMTIuMDU3NUM2LjIyMTA3IDExLjg3NzUgNi4yMjEwNyAxMS4zMjc1IDUuODMxMDcgMTEuMTQ3NUw0Ljc3MTA3IDEwLjY1NzVMNC4yODEwNyA5LjYwNzQ2QzQuMTExMDcgOS4yMTc0NiAzLjU1MTA3IDkuMjE3NDYgMy4zODEwNyA5LjYwNzQ2TDIuODkxMDcgMTAuNjY3NUwxLjgzMTA3IDExLjE1NzVDMS40NDEwNyAxMS4zMzc1IDEuNDQxMDcgMTEuODg3NSAxLjgzMTA3IDEyLjA2NzVMMi44OTEwNyAxMi41NTc1TDMuMzgxMDcgMTMuNjA3NUMzLjU1MTA3IDEzLjk5NzUgNC4xMTEwNyAxMy45OTc1IDQuMjgxMDcgMTMuNjA3NVpNOC43OTEwNyA4LjU5NzQ2TDkuNDIxMDcgNy4xOTc0NkwxMC44MjExIDYuNTY3NDZDMTEuMjExMSA2LjM4NzQ2IDExLjIxMTEgNS44Mzc0NiAxMC44MjExIDUuNjU3NDZMOS40MjEwNyA1LjAyNzQ2TDguNzkxMDcgMy42Mjc0NkM4LjYxMTA3IDMuMjM3NDYgOC4wNjEwNyAzLjIzNzQ2IDcuODgxMDcgMy42Mjc0Nkw3LjI1MTA3IDUuMDI3NDZMNS44NTEwNyA1LjY1NzQ2QzUuNDYxMDcgNS44Mzc0NiA1LjQ2MTA3IDYuMzg3NDYgNS44NTEwNyA2LjU2NzQ2TDcuMjUxMDcgNy4xOTc0Nkw3Ljg4MTA3IDguNTk3NDZDOC4wNTEwNyA4Ljk4NzQ2IDguNjExMDcgOC45ODc0NiA4Ljc5MTA3IDguNTk3NDZaTTIyLjE3MTEgOC44Nzc0NkMyMS43NzExIDguNDc3NDYgMjEuMTAxMSA4LjQ4NzQ2IDIwLjcyMTEgOC45MTc0NkwxNC4zMzExIDE2LjA5NzVMMTEuMDQxMSAxMi44MDc1QzEwLjY1MTEgMTIuNDE3NSAxMC4wMjExIDEyLjQxNzUgOS42MzEwNyAxMi44MDc1TDMuNTkxMDcgMTguODU3NUMzLjE4MTA3IDE5LjI2NzUgMy4xODEwNyAxOS45NDc1IDMuNTkxMDcgMjAuMzU3NUM0LjAwMTA3IDIwLjc2NzUgNC42ODEwNyAyMC43Njc1IDUuMDkxMDcgMjAuMzU3NUwxMC4zNDExIDE1LjA5NzVMMTMuNTkxMSAxOC4zNDc1QzE0LjAwMTEgMTguNzU3NSAxNC42NjExIDE4LjczNzUgMTUuMDQxMSAxOC4zMDc1TDIyLjIxMTEgMTAuMjM3NUMyMi41NjExIDkuODQ3NDYgMjIuNTQxMSA5LjI0NzQ2IDIyLjE3MTEgOC44Nzc0NloiIGZpbGw9IiNCMEI0QjciLz4KPC9nPgo8L3N2Zz4K');
+  --str-video__icon--star: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjA4NzggOS42MTE1NUwxMy41NTY1IDQuNzcxNTVDMTMuMjU0NSAzLjgyMTU1IDExLjg1ODYgMy44MjE1NSAxMS41NjcgNC43NzE1NUwxMC4wMjUzIDkuNjExNTVINS4zODk4OEM0LjM3OTQ2IDkuNjExNTUgMy45NjI4IDEwLjg2MTYgNC43ODU3MSAxMS40MjE2TDguNTc3MzggMTQuMDIxNkw3LjA4NzggMTguNjMxNkM2Ljc4NTcxIDE5LjU2MTYgNy45MTA3MSAyMC4zMTE2IDguNzEyOCAxOS43MjE2TDEyLjU1NjUgMTYuOTIxNkwxNi40MDAzIDE5LjczMTZDMTcuMjAyNCAyMC4zMjE2IDE4LjMyNzQgMTkuNTcxNiAxOC4wMjUzIDE4LjY0MTZMMTYuNTM1NyAxNC4wMzE2TDIwLjMyNzQgMTEuNDMxNkMyMS4xNTAzIDEwLjg2MTYgMjAuNzMzNiA5LjYyMTU1IDE5LjcyMzIgOS42MjE1NUgxNS4wODc4VjkuNjExNTVaIiBmaWxsPSIjRkZENjQ2Ii8+Cjwvc3ZnPgo=');
+  --str-video__icon--support-agent: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjUwMTMgMTAuMTgzM0MxNy41MDEzIDUuNjA4MzMgMTMuOTUxMyAyLjUgMTAuMDAxMyAyLjVDNi4wOTI5NyAyLjUgMi41MDEzIDUuNTQxNjcgMi41MDEzIDEwLjIzMzNDMi4wMDEzIDEwLjUxNjcgMS42Njc5NyAxMS4wNSAxLjY2Nzk3IDExLjY2NjdWMTMuMzMzM0MxLjY2Nzk3IDE0LjI1IDIuNDE3OTcgMTUgMy4zMzQ2NCAxNUMzLjc5Mjk3IDE1IDQuMTY3OTcgMTQuNjI1IDQuMTY3OTcgMTQuMTY2N1YxMC4xNTgzQzQuMTY3OTcgNi45NjY2NyA2LjYyNjMgNC4xNzUgOS44MTc5NyA0LjA4MzMzQzEzLjExOCAzLjk4MzMzIDE1LjgzNDYgNi42MzMzMyAxNS44MzQ2IDkuOTE2NjdWMTUuODMzM0gxMC4wMDEzQzkuNTQyOTcgMTUuODMzMyA5LjE2Nzk3IDE2LjIwODMgOS4xNjc5NyAxNi42NjY3QzkuMTY3OTcgMTcuMTI1IDkuNTQyOTcgMTcuNSAxMC4wMDEzIDE3LjVIMTUuODM0NkMxNi43NTEzIDE3LjUgMTcuNTAxMyAxNi43NSAxNy41MDEzIDE1LjgzMzNWMTQuODE2N0MxNy45OTMgMTQuNTU4MyAxOC4zMzQ2IDE0LjA1IDE4LjMzNDYgMTMuNDVWMTEuNTMzM0MxOC4zMzQ2IDEwLjk1IDE3Ljk5MyAxMC40NDE3IDE3LjUwMTMgMTAuMTgzM1oiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTcuNTAxMyAxMS42NjY3QzcuOTYxNTQgMTEuNjY2NyA4LjMzNDY0IDExLjI5MzYgOC4zMzQ2NCAxMC44MzMzQzguMzM0NjQgMTAuMzczMSA3Ljk2MTU0IDEwIDcuNTAxMyAxMEM3LjA0MTA3IDEwIDYuNjY3OTcgMTAuMzczMSA2LjY2Nzk3IDEwLjgzMzNDNi42Njc5NyAxMS4yOTM2IDcuMDQxMDcgMTEuNjY2NyA3LjUwMTMgMTEuNjY2N1oiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTEyLjUwMTMgMTEuNjY2N0MxMi45NjE1IDExLjY2NjcgMTMuMzM0NiAxMS4yOTM2IDEzLjMzNDYgMTAuODMzM0MxMy4zMzQ2IDEwLjM3MzEgMTIuOTYxNSAxMCAxMi41MDEzIDEwQzEyLjA0MTEgMTAgMTEuNjY4IDEwLjM3MzEgMTEuNjY4IDEwLjgzMzNDMTEuNjY4IDExLjI5MzYgMTIuMDQxMSAxMS42NjY3IDEyLjUwMTMgMTEuNjY2N1oiIGZpbGw9IiNFM0U0RTUiLz4KPHBhdGggZD0iTTE1LjAwMTMgOS4xOTE2N0MxNC42MDEzIDYuODE2NjcgMTIuNTM0NiA1IDEwLjA0MyA1QzcuNTE3OTcgNSA0LjgwMTMgNy4wOTE2NyA1LjAxNzk3IDEwLjM3NUM3LjA3NjMgOS41MzMzMyA4LjYyNjMgNy43IDkuMDY3OTcgNS40NjY2N0MxMC4xNTk2IDcuNjU4MzMgMTIuNDAxMyA5LjE2NjY3IDE1LjAwMTMgOS4xOTE2N1oiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==');
   --str-video__icon--user-plus: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xMi40OTkgMy42MjQwMlYxLjc0OTAySDExLjI0OVYzLjYyNDAySDkuMzc0MDJWNC44NzQwMkgxMS4yNDlWNi43NDkwMkgxMi40OTlWNC44NzQwMkgxNC4zNzRWMy42MjQwMkgxMi40OTlaTTUuNjI0MDIgNS40OTkwMkM3LjAwNTI3IDUuNDk5MDIgOC4xMjQwMiA0LjM4MDI3IDguMTI0MDIgMi45OTkwMkM4LjEyNDAyIDEuNjE3NzcgNy4wMDUyNyAwLjQ5OTAyMyA1LjYyNDAyIDAuNDk5MDIzQzQuMjQyNzcgMC40OTkwMjMgMy4xMjQwMiAxLjYxNzc3IDMuMTI0MDIgMi45OTkwMkMzLjEyNDAyIDQuMzgwMjcgNC4yNDI3NyA1LjQ5OTAyIDUuNjI0MDIgNS40OTkwMlpNNS42MjQwMiAxLjc0OTAyQzYuMzExNTIgMS43NDkwMiA2Ljg3NDAyIDIuMzExNTIgNi44NzQwMiAyLjk5OTAyQzYuODc0MDIgMy42ODY1MiA2LjMxMTUyIDQuMjQ5MDIgNS42MjQwMiA0LjI0OTAyQzQuOTM2NTIgNC4yNDkwMiA0LjM3NDAyIDMuNjg2NTIgNC4zNzQwMiAyLjk5OTAyQzQuMzc0MDIgMi4zMTE1MiA0LjkzNjUyIDEuNzQ5MDIgNS42MjQwMiAxLjc0OTAyWk05LjYxNzc3IDcuMDk5MDJDOC41Njc3NyA2LjU2MTUyIDcuMjA1MjcgNi4xMjQwMiA1LjYyNDAyIDYuMTI0MDJDNC4wNDI3NyA2LjEyNDAyIDIuNjgwMjcgNi41NjE1MiAxLjYzMDI3IDcuMDk5MDJDMS4wMDUyNyA3LjQxNzc3IDAuNjI0MDIzIDguMDYxNTIgMC42MjQwMjMgOC43NjE1MlYxMC40OTlIMTAuNjI0VjguNzYxNTJDMTAuNjI0IDguMDYxNTIgMTAuMjQyOCA3LjQxNzc3IDkuNjE3NzcgNy4wOTkwMlpNOS4zNzQwMiA5LjI0OTAySDEuODc0MDJWOC43NjE1MkMxLjg3NDAyIDguNTI0MDIgMS45OTkwMiA4LjMxMTUyIDIuMTk5MDIgOC4yMTE1MkMyLjk0Mjc3IDcuODMwMjcgNC4xNDI3NyA3LjM3NDAyIDUuNjI0MDIgNy4zNzQwMkM3LjEwNTI3IDcuMzc0MDIgOC4zMDUyNyA3LjgzMDI3IDkuMDQ5MDIgOC4yMTE1MkM5LjI0OTAyIDguMzExNTIgOS4zNzQwMiA4LjUyNDAyIDkuMzc0MDIgOC43NjE1MlY5LjI0OTAyWiIgZmlsbD0iI0Y3RjdGOCIvPgo8L3N2Zz4K');
-  --str-video__icon--pin: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxMyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguMDY4MTkgMi40NTIyMlY2LjQ2MzYzQzguMDY4MTkgNy4zNjIxOCA4LjM2NTA0IDguMTk2NTYgOC44NzA0NyA4Ljg3MDQ3SDQuMDU2NzhDNC41NzgyNyA4LjE4MDUxIDQuODU5MDYgNy4zNDYxNCA0Ljg1OTA2IDYuNDYzNjNWMi40NTIyMkg4LjA2ODE5Wk0xMC40NzUgMC44NDc2NTZIMi40NTIyMkMyLjAxMDk2IDAuODQ3NjU2IDEuNjQ5OTQgMS4yMDg2OCAxLjY0OTk0IDEuNjQ5OTRDMS42NDk5NCAyLjA5MTE5IDIuMDEwOTYgMi40NTIyMiAyLjQ1MjIyIDIuNDUyMjJIMy4yNTQ1VjYuNDYzNjNDMy4yNTQ1IDcuNzk1NDEgMi4xNzk0NCA4Ljg3MDQ3IDAuODQ3NjU2IDguODcwNDdWMTAuNDc1SDUuNjM3MjhWMTYuMDkxTDYuNDM5NTYgMTYuODkzM0w3LjI0MTg0IDE2LjA5MVYxMC40NzVIMTIuMDc5NlY4Ljg3MDQ3QzEwLjc0NzggOC44NzA0NyA5LjY3Mjc1IDcuNzk1NDEgOS42NzI3NSA2LjQ2MzYzVjIuNDUyMjJIMTAuNDc1QzEwLjkxNjMgMi40NTIyMiAxMS4yNzczIDIuMDkxMTkgMTEuMjc3MyAxLjY0OTk0QzExLjI3NzMgMS4yMDg2OCAxMC45MTYzIDAuODQ3NjU2IDEwLjQ3NSAwLjg0NzY1NloiIGZpbGw9IiM3Mjc2N0UiLz4KPC9zdmc+Cg==');
+  --str-video__icon--verified: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMzI1IDEuMDU1MjVMMy40OTE2NyAzLjY0NjkyQzIuODkxNjcgMy45MTM1OCAyLjUgNC41MTM1OCAyLjUgNS4xNzE5MlY5LjA4ODU4QzIuNSAxMy43MTM2IDUuNyAxOC4wMzg2IDEwIDE5LjA4ODZDMTQuMyAxOC4wMzg2IDE3LjUgMTMuNzEzNiAxNy41IDkuMDg4NThWNS4xNzE5MkMxNy41IDQuNTEzNTggMTcuMTA4MyAzLjkxMzU4IDE2LjUwODMgMy42NDY5MkwxMC42NzUgMS4wNTUyNUMxMC4yNSAwLjg2MzU4MiA5Ljc1IDAuODYzNTgyIDkuMzI1IDEuMDU1MjVaTTcuNzQxNjcgMTMuNDk2OUw1LjU4MzMzIDExLjMzODZDNS4yNTgzMyAxMS4wMTM2IDUuMjU4MzMgMTAuNDg4NiA1LjU4MzMzIDEwLjE2MzZDNS45MDgzMyA5LjgzODU4IDYuNDMzMzMgOS44Mzg1OCA2Ljc1ODMzIDEwLjE2MzZMOC4zMzMzMyAxMS43MzAyTDEzLjIzMzMgNi44MzAyNUMxMy41NTgzIDYuNTA1MjUgMTQuMDgzMyA2LjUwNTI1IDE0LjQwODMgNi44MzAyNUMxNC43MzMzIDcuMTU1MjUgMTQuNzMzMyA3LjY4MDI1IDE0LjQwODMgOC4wMDUyNUw4LjkxNjY3IDEzLjQ5NjlDOC42IDEzLjgyMTkgOC4wNjY2NyAxMy44MjE5IDcuNzQxNjcgMTMuNDk2OVoiIGZpbGw9IiMwMEUyQTEiLz4KPC9zdmc+Cg==');
+  --str-video__icon--paperclip: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlN0eWxlPVJvdW5kIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE2IDYuNzQ3NThWMTcuMzI3NkMxNiAxOS40MTc2IDE0LjQ3IDIxLjI3NzYgMTIuMzkgMjEuNDc3NkMxMCAyMS43MDc2IDggMTkuODM3NiA4IDE3LjQ5NzZWNS4xMzc1OEM4IDMuODI3NTggOC45NCAyLjYzNzU4IDEwLjI0IDIuNTA3NThDMTEuNzQgMi4zNTc1OCAxMyAzLjUyNzU4IDEzIDQuOTk3NThWMTUuNDk3NkMxMyAxNi4wNDc2IDEyLjU1IDE2LjQ5NzYgMTIgMTYuNDk3NkMxMS40NSAxNi40OTc2IDExIDE2LjA0NzYgMTEgMTUuNDk3NlY2Ljc0NzU4QzExIDYuMzM3NTggMTAuNjYgNS45OTc1OCAxMC4yNSA1Ljk5NzU4QzkuODQgNS45OTc1OCA5LjUgNi4zMzc1OCA5LjUgNi43NDc1OFYxNS4zNTc2QzkuNSAxNi42Njc2IDEwLjQ0IDE3Ljg1NzYgMTEuNzQgMTcuOTg3NkMxMy4yNCAxOC4xMzc2IDE0LjUgMTYuOTY3NiAxNC41IDE1LjQ5NzZWNS4xNjc1OEMxNC41IDMuMDc3NTggMTIuOTcgMS4yMTc1OCAxMC44OSAxLjAxNzU4QzguNTEgMC43ODc1ODMgNi41IDIuNjU3NTggNi41IDQuOTk3NThWMTcuMjY3NkM2LjUgMjAuMTM3NiA4LjYgMjIuNzA3NiAxMS40NiAyMi45Nzc2QzE0Ljc1IDIzLjI3NzYgMTcuNSAyMC43MTc2IDE3LjUgMTcuNDk3NlY2Ljc0NzU4QzE3LjUgNi4zMzc1OCAxNy4xNiA1Ljk5NzU4IDE2Ljc1IDUuOTk3NThDMTYuMzQgNS45OTc1OCAxNiA2LjMzNzU4IDE2IDYuNzQ3NThaIiBmaWxsPSIjQjBCNEI3Ii8+CjwvZz4KPC9zdmc+Cg==');
+  --str-video__icon--person-off: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5LjQ4NDkgMTYuMDcwNUwxNi4zOTU4IDEyLjk3MjFDMTYuOTgyNCAxMy4xNzM4IDE3LjUyMzMgMTMuNDEyMSAxOC4wMTgzIDEzLjY2ODhDMTguOTA3NCAxNC4xMzYzIDE5LjQ2NjYgMTUuMDYyMSAxOS40ODQ5IDE2LjA3MDVaTTIwLjU3NTggMTkuNzU1NUwxOS4yODMzIDIxLjA0OEwxNi44OTA4IDE4LjY2NDZINC44MTgyOFYxNi4xMTYzQzQuODE4MjggMTUuMDg5NiA1LjM3NzQ1IDE0LjE0NTUgNi4yOTQxMSAxMy42NzhDNy40NzY2MSAxMy4wNzMgOC45MjQ5NSAxMi41NTk2IDEwLjU3NDkgMTIuMzQ4OEwyLjQyNTc4IDQuMTk5NjNMMy43MTgyOCAyLjkwNzE0TDIwLjU3NTggMTkuNzU1NVpNMTUuMDU3NCAxNi44MzEzTDEyLjMwNzQgMTQuMDgxM0MxMi4yNTI0IDE0LjA4MTMgMTIuMjA2NiAxNC4wODEzIDEyLjE1MTYgMTQuMDgxM0M5Ljk3OTExIDE0LjA4MTMgOC4yMTkxMSAxNC43NTA1IDcuMTI4MjggMTUuMzA5NkM2LjgzNDk1IDE1LjQ1NjMgNi42NTE2MSAxNS43NjggNi42NTE2MSAxNi4xMTYzVjE2LjgzMTNIMTUuMDU3NFpNMTIuMTUxNiA1LjgzMTNDMTMuMTU5OSA1LjgzMTMgMTMuOTg0OSA2LjY1NjMgMTMuOTg0OSA3LjY2NDY0QzEzLjk4NDkgOC40NTI5NyAxMy40ODk5IDkuMTIyMTQgMTIuNzkzMyA5LjM3ODhMMTQuMTQ5OSAxMC43MzU1QzE1LjE1ODMgMTAuMDg0NiAxNS44MTgzIDguOTQ3OTcgMTUuODE4MyA3LjY2NDY0QzE1LjgxODMgNS42Mzg4IDE0LjE3NzQgMy45OTc5NyAxMi4xNTE2IDMuOTk3OTdDMTAuODY4MyAzLjk5Nzk3IDkuNzMxNjEgNC42NTc5NyA5LjA4MDc4IDUuNjY2M0wxMC40Mzc0IDcuMDIyOTdDMTAuNjk0MSA2LjMyNjMgMTEuMzYzMyA1LjgzMTMgMTIuMTUxNiA1LjgzMTNaIiBmaWxsPSIjRkFGQUZBIi8+Cjwvc3ZnPgo=');
+  --str-video__icon--pin: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOSAxMi44N0MxOSAxMi40IDE4LjY2IDEyLjAyIDE4LjIgMTEuODlDMTYuOTMgMTEuNTQgMTYgMTAuMzggMTYgOVY0SDE3QzE3LjU1IDQgMTggMy41NSAxOCAzQzE4IDIuNDUgMTcuNTUgMiAxNyAySDdDNi40NSAyIDYgMi40NSA2IDNDNiAzLjU1IDYuNDUgNCA3IDRIOFY5QzggMTAuMzggNy4wNyAxMS41NCA1LjggMTEuODlDNS4zNCAxMi4wMiA1IDEyLjQgNSAxMi44N1YxM0M1IDEzLjU1IDUuNDUgMTQgNiAxNEgxMC45OEwxMSAyMUMxMSAyMS41NSAxMS40NSAyMiAxMiAyMkMxMi41NSAyMiAxMyAyMS41NSAxMyAyMUwxMi45OCAxNEgxOEMxOC41NSAxNCAxOSAxMy41NSAxOSAxM1YxMi44N1oiIGZpbGw9IiNFM0U0RTUiLz4KPC9zdmc+Cg==');
+  --str-video__icon--provider-google: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzk1MV81NjAwMykiPgo8cGF0aCBkPSJNMTguOCAxMS4xODU5QzE4LjggMTAuNTM1OSAxOC43NDE3IDkuOTEwODggMTguNjMzMyA5LjMxMDg4SDEwVjEyLjg2MDlIMTQuOTMzM0MxNC43MTY3IDE0LjAwMjUgMTQuMDY2NyAxNC45NjkyIDEzLjA5MTcgMTUuNjE5MlYxNy45Mjc1SDE2LjA2NjdDMTcuOCAxNi4zMjc1IDE4LjggMTMuOTc3NSAxOC44IDExLjE4NTlaIiBmaWxsPSIjNDI4NUY0Ii8+CjxwYXRoIGQ9Ik05Ljk5OTc0IDIwLjE0NDJDMTIuNDc0NyAyMC4xNDQyIDE0LjU0OTcgMTkuMzI3NSAxNi4wNjY0IDE3LjkyNzVMMTMuMDkxNCAxNS42MTkyQzEyLjI3NDcgMTYuMTY5MiAxMS4yMzMxIDE2LjUwMjUgOS45OTk3NCAxNi41MDI1QzcuNjE2NDEgMTYuNTAyNSA1LjU5MTQxIDE0Ljg5NDIgNC44NjY0MSAxMi43Mjc1SDEuODE2NDFWMTUuMDk0MkMzLjMyNDc0IDE4LjA4NTkgNi40MTY0MSAyMC4xNDQyIDkuOTk5NzQgMjAuMTQ0MloiIGZpbGw9IiMzNEE4NTMiLz4KPHBhdGggZD0iTTQuODY1MzYgMTIuNzE5MkM0LjY4MjAzIDEyLjE2OTIgNC41NzM3IDExLjU4NTkgNC41NzM3IDEwLjk3NzVDNC41NzM3IDEwLjM2OTIgNC42ODIwMyA5Ljc4NTg3IDQuODY1MzYgOS4yMzU4N1Y2Ljg2OTJIMS44MTUzNkMxLjE5MDM2IDguMTAyNTQgMC44MzIwMzEgOS40OTQyIDAuODMyMDMxIDEwLjk3NzVDMC44MzIwMzEgMTIuNDYwOSAxLjE5MDM2IDEzLjg1MjUgMS44MTUzNiAxNS4wODU5TDQuMTkwMzYgMTMuMjM1OUw0Ljg2NTM2IDEyLjcxOTJaIiBmaWxsPSIjRkJCQzA1Ii8+CjxwYXRoIGQ9Ik05Ljk5OTc0IDUuNDYwODhDMTEuMzQ5NyA1LjQ2MDg4IDEyLjU0OTcgNS45Mjc1NSAxMy41MDgxIDYuODI3NTVMMTYuMTMzMSA0LjIwMjU1QzE0LjU0MTQgMi43MTkyMiAxMi40NzQ3IDEuODEwODggOS45OTk3NCAxLjgxMDg4QzYuNDE2NDEgMS44MTA4OCAzLjMyNDc0IDMuODY5MjIgMS44MTY0MSA2Ljg2OTIyTDQuODY2NDEgOS4yMzU4OEM1LjU5MTQxIDcuMDY5MjIgNy42MTY0MSA1LjQ2MDg4IDkuOTk5NzQgNS40NjA4OFoiIGZpbGw9IiNFQTQzMzUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF85NTFfNTYwMDMiPgo8cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDAuOTc3NTM5KSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=');
   --str-video__icon--no-audio: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAyMCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjMzNjI5IDAuNzcyNzA5TDkuNzQ5MjQgMC40NDI2MTNDOS45MzYxNCAwLjI5MjkyOSAxMC4yMTE5IDAuMzE5NTk2IDEwLjM2NTEgMC41MDIxNzZDMTAuNDI5MyAwLjU3ODY3NyAxMC40NjQ0IDAuNjc0NTYzIDEwLjQ2NDMgMC43NzM0ODdWMS4zMzU0NlYxLjMzNzE1VjEuODY0NDdWMS45MjUyM1YxMy4yMDcyVjEzLjI2ODFWMTMuNzk1NVYxMy43OTcxVjE0LjM1OUMxMC40NjQ0IDE0LjU5NTEgMTAuMjY4NiAxNC43ODY2IDEwLjAyNjkgMTQuNzg2OEM5LjkyNTY4IDE0Ljc4NjggOS44Mjc1MyAxNC43NTI2IDkuNzQ5MjIgMTQuNjg5OUw5LjMzNjI2IDE0LjM1OTdMOS4zMzUzOSAxNC4zNTlMOC45MDg2MSAxNC4wMTc4TDguODU5NzMgMTMuOTc4N0w1LjExNjcyIDEwLjk4NjFMNS4xMTU4NSAxMC45ODYxSDEuNzEyMTNDMS4yMjg3NiAxMC45ODYxIDAuODM2OTE0IDEwLjYwMzMgMC44MzY5MTQgMTAuMTMxMlY1LjAwMTMzQzAuODM2OTE0IDQuNTI5MTQgMS4yMjg3NiA0LjE0NjM1IDEuNzEyMTMgNC4xNDYzNUg1LjExNTg1TDguODU5NzMgMS4xNTM2NUw4LjkwOTY0IDEuMTEzNzVMOS4zMzUzMiAwLjc3MzQ4N0w5LjMzNjI5IDAuNzcyNzA5Wk02LjExNzcyIDUuMzk5N0w4Ljg1OTczIDMuMjA3ODVWMTEuOTI0M0w2LjExODcxIDkuNzMyODhMNS42Nzg2NSA5LjM4MTA1TDUuMTE1ODUgOS4zODE1N0g1LjExNTIzTDUuMTE0MzYgOS4zODE1N0wyLjQ0MTQ4IDkuMzgxNTdWNS43NTA5Mkg1LjExNTg1SDUuNjc4MzRMNi4xMTc3MiA1LjM5OTdaTTE5LjUyNDQgOS44NjQ0NkwxNy4yMjYyIDcuNTY2MjRMMTkuNTI0NCA1LjI2ODAxQzE5LjgzNzcgNC45NTQ3IDE5LjgzMiA0LjQ0MTA4IDE5LjUxODcgNC4xMjc3N0MxOS4yMDU0IDMuODE0NDYgMTguNjkxOCAzLjgwODgyIDE4LjM3ODUgNC4xMjIxM0wxNi4wODAzIDYuNDIwMzVMMTMuNzgyIDQuMTIyMTNDMTMuNDY4NyAzLjgwODgyIDEyLjk1NTEgMy44MTQ0NiAxMi42NDE4IDQuMTI3NzdDMTIuMzI4NSA0LjQ0MTA4IDEyLjMyMjggNC45NTQ3IDEyLjYzNjIgNS4yNjgwMUwxNC45MzQ0IDcuNTY2MjRMMTIuNjM2MiA5Ljg2NDQ2QzEyLjMyMjggMTAuMTc3OCAxMi4zMjg1IDEwLjY5MTQgMTIuNjQxOCAxMS4wMDQ3QzEyLjk1NTEgMTEuMzE4IDEzLjQ2ODcgMTEuMzIzNyAxMy43ODIgMTEuMDEwM0wxNi4wODAzIDguNzEyMTJMMTguMzc4NSAxMS4wMTAzQzE4LjY5MTggMTEuMzIzNyAxOS4yMDU0IDExLjMxOCAxOS41MTg3IDExLjAwNDdDMTkuODMyIDEwLjY5MTQgMTkuODM3NyAxMC4xNzc4IDE5LjUyNDQgOS44NjQ0NloiIGZpbGw9IiM3Mjc2N0UiLz4KPC9zdmc+Cg==');
   --str-video__icon--camera-off-outline: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuODUxMzggNS41MDk5OUw1LjI0NjgyIDMuOTA1NDNMMS45MTczNSAwLjU4Mzk4NEwwLjc4NjEzMyAxLjcxNTJMMi45NzYzNiAzLjkwNTQzSDIuMzkwN0MxLjk0OTQ0IDMuOTA1NDMgMS41ODg0MSA0LjI2NjQ2IDEuNTg4NDEgNC43MDc3MVYxMi43MzA1QzEuNTg4NDEgMTMuMTcxOCAxLjk0OTQ0IDEzLjUzMjggMi4zOTA3IDEzLjUzMjhIMTIuMDE4MUMxMi4xODY2IDEzLjUzMjggMTIuMzMxIDEzLjQ2ODYgMTIuNDU5MyAxMy4zODg0TDE1LjAxMDYgMTUuOTM5N0wxNi4xNDE4IDE0LjgwODRMOS4wMzM1OSA3LjcwMDIyTDYuODUxMzggNS41MDk5OVpNMy4xOTI5OCAxMS45MjgyVjUuNTA5OTlINC41ODA5MkwxMC45OTkyIDExLjkyODJIMy4xOTI5OFpNMTEuMjE1OCA1LjUwOTk5VjcuNjAzOTVMMTYuMDI5NSAxMi40MTc2VjQuMzA2NTdMMTIuODIwNCA3LjUxNTdWNC43MDc3MUMxMi44MjA0IDQuMjY2NDYgMTIuNDU5MyAzLjkwNTQzIDEyLjAxODEgMy45MDU0M0g3LjUxNzI4TDkuMTIxODQgNS41MDk5OUgxMS4yMTU4WiIgZmlsbD0iIzcyNzY3RSIvPgo8L3N2Zz4K');
   --str-video__icon--not-allowed: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNDY0MjIgMC45MzU1NDdDNC4wMzU2MyAwLjkzNTU0NyAwLjQ0MTQwNiA0LjUyOTc3IDAuNDQxNDA2IDguOTU4MzZDMC40NDE0MDYgMTMuMzg3IDQuMDM1NjMgMTYuOTgxMiA4LjQ2NDIyIDE2Ljk4MTJDMTIuODkyOCAxNi45ODEyIDE2LjQ4NyAxMy4zODcgMTYuNDg3IDguOTU4MzZDMTYuNDg3IDQuNTI5NzcgMTIuODkyOCAwLjkzNTU0NyA4LjQ2NDIyIDAuOTM1NTQ3Wk0yLjA0NTk3IDguOTU4MzZDMi4wNDU5NyA1LjQxMjI4IDQuOTE4MTQgMi41NDAxMSA4LjQ2NDIyIDIuNTQwMTFDOS45NDg0NCAyLjU0MDExIDExLjMxMjMgMy4wNDU1NSAxMi4zOTU0IDMuODk1OTdMMy40MDE4MyAxMi44ODk1QzIuNTUxNDEgMTEuODA2NSAyLjA0NTk3IDEwLjQ0MjYgMi4wNDU5NyA4Ljk1ODM2Wk04LjQ2NDIyIDE1LjM3NjZDNi45OCAxNS4zNzY2IDUuNjE2MTIgMTQuODcxMiA0LjUzMzA0IDE0LjAyMDhMMTMuNTI2NiA1LjAyNzE4QzE0LjM3NyA2LjExMDI2IDE0Ljg4MjUgNy40NzQxNCAxNC44ODI1IDguOTU4MzZDMTQuODgyNSAxMi41MDQ0IDEyLjAxMDMgMTUuMzc2NiA4LjQ2NDIyIDE1LjM3NjZaIiBmaWxsPSIjNzI3NjdFIi8+Cjwvc3ZnPgo=');
diff --git a/sample-apps/react/audio-rooms/package.json b/sample-apps/react/audio-rooms/package.json
index f54db55115..004f52f4d3 100644
--- a/sample-apps/react/audio-rooms/package.json
+++ b/sample-apps/react/audio-rooms/package.json
@@ -20,7 +20,6 @@
     "@types/react-dom": "^18.2.13",
     "@vitejs/plugin-react": "^4.1.0",
     "typescript": "^5.2.2",
-    "vercel": "^32.4.1",
     "vite": "^4.4.11"
   }
 }
diff --git a/sample-apps/react/cookbook-participant-list/src/App.tsx b/sample-apps/react/cookbook-participant-list/src/App.tsx
index 9f0f5ddb7a..a8dd57aef5 100644
--- a/sample-apps/react/cookbook-participant-list/src/App.tsx
+++ b/sample-apps/react/cookbook-participant-list/src/App.tsx
@@ -1,5 +1,5 @@
-import './App.scss';
-import { createTheme, ThemeProvider } from '@mui/material';
+import createTheme from '@mui/material/styles/createTheme';
+import ThemeProvider from '@mui/material/styles/ThemeProvider';
 import { CallSetup } from './CallSetup';
 import { useEffect, useState } from 'react';
 import {
@@ -49,7 +49,7 @@ const App = () => {
     <StreamTheme as="main" className="main-container">
       <ThemeProvider theme={theme}>
         {!callId && <CallSetup onJoin={setCallId} />}
-        {callId && (
+        {call && (
           <StreamVideo client={client}>
             {call && (
               <StreamCall call={call}>
diff --git a/sample-apps/react/cookbook-participant-list/src/CallSetup.tsx b/sample-apps/react/cookbook-participant-list/src/CallSetup.tsx
index 1633d8a24f..f27b381bc3 100644
--- a/sample-apps/react/cookbook-participant-list/src/CallSetup.tsx
+++ b/sample-apps/react/cookbook-participant-list/src/CallSetup.tsx
@@ -1,4 +1,7 @@
-import { Button, Input, Stack, Typography } from '@mui/material';
+import Button from '@mui/material/Button';
+import Input from '@mui/material/Input';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 import { useState } from 'react';
 
 export type CallSetupProps = {
diff --git a/sample-apps/react/cookbook-participant-list/src/SpeakerView.scss b/sample-apps/react/cookbook-participant-list/src/SpeakerView.scss
index 4e9bef9a5a..d2130e3e1c 100644
--- a/sample-apps/react/cookbook-participant-list/src/SpeakerView.scss
+++ b/sample-apps/react/cookbook-participant-list/src/SpeakerView.scss
@@ -14,6 +14,7 @@
     .str-video__participant-view {
       height: 100%;
       width: auto;
+      aspect-ratio: auto;
     }
 
     .str-video__participant-view--no-video {
@@ -38,6 +39,10 @@
       width: 240px;
       min-width: 240px;
 
+      .str-video__participant-view {
+        aspect-ratio: auto;
+      }
+
       &:first-child {
         margin-left: auto;
       }
diff --git a/sample-apps/react/cookbook-participant-list/src/main.tsx b/sample-apps/react/cookbook-participant-list/src/main.tsx
index 0dc1bed0ea..09de8ad7e6 100644
--- a/sample-apps/react/cookbook-participant-list/src/main.tsx
+++ b/sample-apps/react/cookbook-participant-list/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import '@stream-io/video-styling/dist/css/styles.css';
 import './index.css';
+import './App.scss';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <App />,
diff --git a/sample-apps/react/egress-composite/README.md b/sample-apps/react/egress-composite/README.md
index ccad81cada..c7a67d8598 100644
--- a/sample-apps/react/egress-composite/README.md
+++ b/sample-apps/react/egress-composite/README.md
@@ -23,3 +23,10 @@ As such, this application accepts certain configuration parameters to be provide
 - run `yarn start`
 - open browser
 - uncomment and tweak the setup script at the bottom of the [`main.tsx`](./src/main.tsx) file to your likings
+
+## To update the Playwright test baseline screenshots
+
+- in the root of the repo, edit `docker-compose.yml` and provide the API Key and User Token
+- run `docker compose up generate-screenshots`
+- check the generated screenshots in `./tests/__screenshots__/`
+- push the changes to the repo
diff --git a/sample-apps/react/egress-composite/package.json b/sample-apps/react/egress-composite/package.json
index 55f6feff91..3ca460341e 100644
--- a/sample-apps/react/egress-composite/package.json
+++ b/sample-apps/react/egress-composite/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.2",
-    "@sentry/react": "^7.70.0",
+    "@sentry/react": "^7.91.0",
     "@sentry/vite-plugin": "^2.7.1",
     "@stream-io/video-react-sdk": "workspace:^",
     "clsx": "^2.0.0",
@@ -25,10 +25,8 @@
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
     "@vitejs/plugin-react": "^4.1.0",
-    "axios": "^1.5.1",
-    "nanoid": "^5.0.2",
+    "nanoid": "^5.0.4",
     "typescript": "^5.2.2",
-    "vercel": "^32.4.1",
     "vite": "^4.4.11"
   }
 }
diff --git a/sample-apps/react/egress-composite/src/hooks/options/useParticipantLabelStyles.ts b/sample-apps/react/egress-composite/src/hooks/options/useParticipantLabelStyles.ts
index 19d02af6a7..b52db0c2ca 100644
--- a/sample-apps/react/egress-composite/src/hooks/options/useParticipantLabelStyles.ts
+++ b/sample-apps/react/egress-composite/src/hooks/options/useParticipantLabelStyles.ts
@@ -12,7 +12,7 @@ export const useParticipantLabelStyles = () => {
       'participant_label.display': participantLabelDisplay = true,
       'participant_label.text_color': participantLabelTextColor,
       'participant_label.background_color': participantLabelBackgroundColor,
-      'participant_label.border_width': participantLabelBorderWidth = '0px',
+      'participant_label.border_width': participantLabelBorderWidth = '0',
       'participant_label.border_radius': participantLabelBorderRadius,
       'participant_label.border_color':
         participantLabelBorderColor = 'rgba(0,0,0,0)',
@@ -20,9 +20,8 @@ export const useParticipantLabelStyles = () => {
         participantLabelHorizontalPosition = 'left',
       'participant_label.vertical_position':
         participantLabelVerticalPosition = 'bottom',
-      'participant_label.margin_inline':
-        participantLabelMarginInline = '.875rem',
-      'participant_label.margin_block': participantLabelMarginBlock = '.875rem',
+      'participant_label.margin_inline': participantLabelMarginInline = '0',
+      'participant_label.margin_block': participantLabelMarginBlock = '0',
     },
   } = useConfigurationContext();
 
@@ -70,10 +69,6 @@ export const useParticipantLabelStyles = () => {
 
           transition: unset;
           opacity: unset;
-          left: unset;
-          bottom: unset;
-          right: unset;
-          top: unset;
         }
       }
     `,
diff --git a/sample-apps/react/egress-composite/tests/__screenshots__/genericLayoutStyles.spec.ts/Generic-Layout-Styles-Should-have-proper-background-with-applied-styling-1.png b/sample-apps/react/egress-composite/tests/__screenshots__/genericLayoutStyles.spec.ts/Generic-Layout-Styles-Should-have-proper-background-with-applied-styling-1.png
index 3d66226264..7c668beef4 100644
Binary files a/sample-apps/react/egress-composite/tests/__screenshots__/genericLayoutStyles.spec.ts/Generic-Layout-Styles-Should-have-proper-background-with-applied-styling-1.png and b/sample-apps/react/egress-composite/tests/__screenshots__/genericLayoutStyles.spec.ts/Generic-Layout-Styles-Should-have-proper-background-with-applied-styling-1.png differ
diff --git a/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---default-undefined---fall-back-to-spotlight-1.png b/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---default-undefined---fall-back-to-spotlight-1.png
index 77bccb1e38..11f1820010 100644
Binary files a/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---default-undefined---fall-back-to-spotlight-1.png and b/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---default-undefined---fall-back-to-spotlight-1.png differ
diff --git a/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---single-participant-1.png b/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---single-participant-1.png
index 298eebc1c8..b9dbec7762 100644
Binary files a/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---single-participant-1.png and b/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---single-participant-1.png differ
diff --git a/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---spotlight-1.png b/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---spotlight-1.png
index 77bccb1e38..11f1820010 100644
Binary files a/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---spotlight-1.png and b/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---spotlight-1.png differ
diff --git a/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---unknown-fall-back-to-spotlight-1.png b/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---unknown-fall-back-to-spotlight-1.png
index 77bccb1e38..11f1820010 100644
Binary files a/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---unknown-fall-back-to-spotlight-1.png and b/sample-apps/react/egress-composite/tests/__screenshots__/layouts.spec.ts/Layouts-Should-render-screenshare-layout---unknown-fall-back-to-spotlight-1.png differ
diff --git a/sample-apps/react/egress-composite/tests/__screenshots__/logoAndTitle.spec.ts/Logo-and-Title-Should-render-logo-and-title-with-custom-options-1.png b/sample-apps/react/egress-composite/tests/__screenshots__/logoAndTitle.spec.ts/Logo-and-Title-Should-render-logo-and-title-with-custom-options-1.png
index d8a2b45090..8a101215b2 100644
Binary files a/sample-apps/react/egress-composite/tests/__screenshots__/logoAndTitle.spec.ts/Logo-and-Title-Should-render-logo-and-title-with-custom-options-1.png and b/sample-apps/react/egress-composite/tests/__screenshots__/logoAndTitle.spec.ts/Logo-and-Title-Should-render-logo-and-title-with-custom-options-1.png differ
diff --git a/sample-apps/react/egress-composite/tests/__screenshots__/logoAndTitle.spec.ts/Logo-and-Title-Should-render-logo-and-title-with-defaults-1.png b/sample-apps/react/egress-composite/tests/__screenshots__/logoAndTitle.spec.ts/Logo-and-Title-Should-render-logo-and-title-with-defaults-1.png
index e929268e4d..c31a04624a 100644
Binary files a/sample-apps/react/egress-composite/tests/__screenshots__/logoAndTitle.spec.ts/Logo-and-Title-Should-render-logo-and-title-with-defaults-1.png and b/sample-apps/react/egress-composite/tests/__screenshots__/logoAndTitle.spec.ts/Logo-and-Title-Should-render-logo-and-title-with-defaults-1.png differ
diff --git a/sample-apps/react/egress-composite/tests/__screenshots__/participantLabelStyles.spec.ts/Participant-Label-Styles-Should-render-participant-labels-with-custom-options-1.png b/sample-apps/react/egress-composite/tests/__screenshots__/participantLabelStyles.spec.ts/Participant-Label-Styles-Should-render-participant-labels-with-custom-options-1.png
index 6998fdc50c..08ee260baf 100644
Binary files a/sample-apps/react/egress-composite/tests/__screenshots__/participantLabelStyles.spec.ts/Participant-Label-Styles-Should-render-participant-labels-with-custom-options-1.png and b/sample-apps/react/egress-composite/tests/__screenshots__/participantLabelStyles.spec.ts/Participant-Label-Styles-Should-render-participant-labels-with-custom-options-1.png differ
diff --git a/sample-apps/react/egress-composite/tests/__screenshots__/participantStyles.spec.ts/Participant-Styles-Should-render-participant-labels-with-custom-options-1.png b/sample-apps/react/egress-composite/tests/__screenshots__/participantStyles.spec.ts/Participant-Styles-Should-render-participant-labels-with-custom-options-1.png
index b620b1710e..d0e717a080 100644
Binary files a/sample-apps/react/egress-composite/tests/__screenshots__/participantStyles.spec.ts/Participant-Styles-Should-render-participant-labels-with-custom-options-1.png and b/sample-apps/react/egress-composite/tests/__screenshots__/participantStyles.spec.ts/Participant-Styles-Should-render-participant-labels-with-custom-options-1.png differ
diff --git a/sample-apps/react/egress-composite/tests/baseTests.ts b/sample-apps/react/egress-composite/tests/baseTests.ts
index e5207db2ca..484e593f24 100644
--- a/sample-apps/react/egress-composite/tests/baseTests.ts
+++ b/sample-apps/react/egress-composite/tests/baseTests.ts
@@ -1,6 +1,5 @@
 import { test as base } from '@playwright/test';
 import { customAlphabet } from 'nanoid';
-import axios from 'axios';
 
 const nanoid = customAlphabet('1234567890abcdefghijklmnop', 10);
 
@@ -14,30 +13,3 @@ export const testWithCallId = base.extend<{ callId: string }>({
     await use(callId);
   },
 });
-
-// TODO: find better name
-export const testWithBuddy = base.extend<{ callId: string }>({
-  callId: async ({ page }, use) => {
-    const callId = nanoid();
-
-    // TODO: have proper abstractions with typing like StreamVideoBuddy.join(...) -> id and StreamVideoBuddy.teardown(id)
-    await axios.post('http://localhost:4567/stream-video-buddy?async=true', {
-      duration: 60,
-      'call-id': callId,
-      'user-count': 4,
-    });
-
-    // TODO: have proper ?asyncJoin=true
-    // which waits only for successfull call creation
-    // but asyncs user joins
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-
-    await page.goto('/', { waitUntil: 'domcontentloaded' });
-
-    // run tests
-    await use(callId);
-
-    // teardown
-    // TODO: await StreamVideoBuddy.teardown()...
-  },
-});
diff --git a/sample-apps/react/livestream-app/package.json b/sample-apps/react/livestream-app/package.json
index b9a57feba4..c429843f38 100644
--- a/sample-apps/react/livestream-app/package.json
+++ b/sample-apps/react/livestream-app/package.json
@@ -26,7 +26,6 @@
     "@types/react-dom": "^18.2.13",
     "@vitejs/plugin-react": "^4.1.0",
     "typescript": "^5.2.2",
-    "vercel": "^32.4.1",
     "vite": "^4.4.11"
   }
 }
diff --git a/sample-apps/react/messenger-clone/package.json b/sample-apps/react/messenger-clone/package.json
index ab4e085c49..4f964f3c0b 100644
--- a/sample-apps/react/messenger-clone/package.json
+++ b/sample-apps/react/messenger-clone/package.json
@@ -17,13 +17,13 @@
     "clsx": "^2.0.0",
     "dayjs": "^1.11.6",
     "immer": "^9.0.16",
-    "nanoid": "^5.0.2",
+    "nanoid": "^5.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
-    "sass": "^1.69.3",
-    "stream-chat": "^8.13.0",
-    "stream-chat-react": "^10.14.0"
+    "sass": "^1.69.5",
+    "stream-chat": "^8.14.4",
+    "stream-chat-react": "^11.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.28",
@@ -31,7 +31,6 @@
     "@vitejs/plugin-react": "^4.1.0",
     "dotenv": "^16.3.1",
     "typescript": "^5.2.2",
-    "vercel": "^32.4.1",
     "vite": "^4.4.11"
   }
 }
diff --git a/sample-apps/react/react-dogfood/.env.example b/sample-apps/react/react-dogfood/.env.example
index 7b3cf80090..bf6d1ca2bb 100644
--- a/sample-apps/react/react-dogfood/.env.example
+++ b/sample-apps/react/react-dogfood/.env.example
@@ -23,6 +23,19 @@ NEXT_PUBLIC_DISABLE_CHAT=false
 ### Lets you override the app environment to use
 NEXT_PUBLIC_APP_ENVIRONMENT=pronto
 
+### Lets you configure the mapbox token - if not set, the map will not be displayed
+NEXT_PUBLIC_MAPBOX_GL_TOKEN=
+
+### Lets you configure the google analytics and tag manager ids
+NEXT_PUBLIC_GA_ID=
+NEXT_PUBLIC_GTM_ID=
+
+### Lets you configure the base path for the app, defaults to /
+NEXT_PUBLIC_BASE_PATH=
+
+### Lets you configure the Sentry DSN
+NEXT_PUBLIC_SENTRY_DSN=
+
 ### Lets you configure the token generator
 SAMPLE_APP_CALL_CONFIG='{
   "pronto": {
diff --git a/sample-apps/react/react-dogfood/components/ActiveCall.tsx b/sample-apps/react/react-dogfood/components/ActiveCall.tsx
new file mode 100644
index 0000000000..c4de160ff5
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ActiveCall.tsx
@@ -0,0 +1,278 @@
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+import {
+  Call,
+  CallingState,
+  CallParticipantsList,
+  CancelCallConfirmButton,
+  CompositeButton,
+  Icon,
+  PermissionRequests,
+  ReactionsButton,
+  RecordCallConfirmationButton,
+  RecordingInProgressNotification,
+  ScreenShareButton,
+  SpeakingWhileMutedNotification,
+  useCallStateHooks,
+} from '@stream-io/video-react-sdk';
+import { StreamChat } from 'stream-chat';
+
+import { ActiveCallHeader } from './ActiveCallHeader';
+import { Stage } from './Stage';
+import { InvitePanel, InvitePopup } from './InvitePanel/InvitePanel';
+import { ChatWrapper } from './ChatWrapper';
+import { ChatUI } from './ChatUI';
+import { CallStatsSidebar, ToggleStatsButton } from './CallStatsWrapper';
+import { ToggleSettingsTabModal } from './Settings/SettingsTabModal';
+import { ToggleFeedbackButton } from './ToggleFeedbackButton';
+import { ToggleDeveloperButton } from './ToggleDeveloperButton';
+import { ToggleMoreOptionsListButton } from './ToggleMoreOptionsListButton';
+import { ToggleLayoutButton } from './ToggleLayoutButton';
+import { ToggleParticipantListButton } from './ToggleParticipantListButton';
+import { ToggleDualCameraButton } from './ToggleDualCameraButton';
+import { ToggleDualMicButton } from './ToggleDualMicButton';
+import { NewMessageNotification } from './NewMessageNotification';
+import { UnreadCountBadge } from './UnreadCountBadge';
+import { TourPanel } from './TourPanel';
+
+import { useBreakpoint, useLayoutSwitcher, useWatchChannel } from '../hooks';
+import {
+  useIsDemoEnvironment,
+  useIsProntoEnvironment,
+} from '../context/AppEnvironmentContext';
+
+import { StepNames, useTourContext } from '../context/TourContext';
+
+export type ActiveCallProps = {
+  chatClient?: StreamChat | null;
+  activeCall: Call;
+  onLeave: () => void;
+  onJoin: ({ fastJoin }: { fastJoin: boolean }) => void;
+};
+
+type SidebarContent = 'participants' | 'chat' | 'stats' | null;
+
+export const ActiveCall = (props: ActiveCallProps) => {
+  const { chatClient, activeCall, onLeave, onJoin } = props;
+  const { useParticipantCount } = useCallStateHooks();
+  const participantCount = useParticipantCount();
+  const {
+    current: currentTourStep,
+    active: isTourActive,
+    next: nextTourStep,
+  } = useTourContext();
+
+  const { layout, setLayout } = useLayoutSwitcher();
+  const breakpoint = useBreakpoint();
+  useEffect(() => {
+    if (
+      (layout === 'SpeakerLeft' || layout === 'SpeakerRight') &&
+      (breakpoint === 'xs' || breakpoint === 'sm')
+    ) {
+      setLayout('SpeakerBottom');
+    }
+  }, [breakpoint, layout, setLayout]);
+
+  const isDemoEnvironment = useIsDemoEnvironment();
+  const isPronto = useIsProntoEnvironment();
+
+  const [showInvitePopup, setShowInvitePopup] = useState(
+    isDemoEnvironment && !isTourActive,
+  );
+  const [sidebarContent, setSidebarContent] = useState<SidebarContent>(null);
+  const showSidebar = sidebarContent != null;
+  const showParticipants = sidebarContent === 'participants';
+  const showChat = sidebarContent === 'chat';
+  const showStats = sidebarContent === 'stats';
+
+  // FIXME: could be replaced with "notification.message_new" but users would have to be at least members
+  // possible fix with "allow to join" permissions in place (expensive?)
+  const channelWatched = useWatchChannel({
+    chatClient,
+    channelId: activeCall?.id,
+  });
+
+  useEffect(() => {
+    // helps with Fast-Refresh
+    if (activeCall?.state.callingState === CallingState.IDLE) {
+      onJoin({ fastJoin: true });
+    }
+  }, [activeCall, onJoin]);
+
+  useEffect(() => {
+    if (currentTourStep === StepNames.Chat) {
+      setSidebarContent('chat');
+    } else {
+      setSidebarContent(null);
+    }
+  }, [currentTourStep]);
+
+  useEffect(() => {
+    if (isDemoEnvironment && !isTourActive) {
+      setShowInvitePopup(true);
+    }
+  }, [isDemoEnvironment, isTourActive]);
+
+  return (
+    <div className="rd__call">
+      {isDemoEnvironment && <TourPanel highlightClass="rd__highlight" />}
+      <div className="rd__main-call-panel">
+        <ActiveCallHeader
+          selectedLayout={layout}
+          onMenuItemClick={setLayout}
+          onLeave={onLeave}
+        />
+
+        <PermissionRequests />
+        <div className="rd__layout">
+          <Stage selectedLayout={layout} />
+          {showInvitePopup && participantCount === 1 && (
+            <InvitePopup
+              callId={activeCall.id}
+              close={() => setShowInvitePopup(false)}
+            />
+          )}
+
+          <div
+            className={clsx('rd__sidebar', showSidebar && 'rd__sidebar--open')}
+          >
+            {showSidebar && (
+              <div className="rd__sidebar__container">
+                {showParticipants && (
+                  <div className="rd__participants">
+                    <CallParticipantsList
+                      onClose={() => setSidebarContent(null)}
+                    />
+                    <InvitePanel />
+                  </div>
+                )}
+
+                {showChat && (
+                  <ChatWrapper chatClient={chatClient}>
+                    <div className="str-video__chat">
+                      <ChatUI
+                        onClose={() => {
+                          if (
+                            isTourActive &&
+                            currentTourStep === StepNames.Chat
+                          ) {
+                            nextTourStep();
+                          }
+                          setSidebarContent(null);
+                        }}
+                        channelId={activeCall.id}
+                      />
+                    </div>
+                  </ChatWrapper>
+                )}
+
+                {showStats && <CallStatsSidebar />}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="rd__notifications">
+          <RecordingInProgressNotification />
+          <SpeakingWhileMutedNotification />
+        </div>
+        <div
+          className="str-video__call-controls"
+          data-testid="str-video__call-controls"
+        >
+          <div className="str-video__call-controls--group str-video__call-controls--options">
+            <div className="str-video__call-controls__desktop" title="Settings">
+              <ToggleSettingsTabModal
+                layoutProps={{
+                  selectedLayout: layout,
+                  onMenuItemClick: setLayout,
+                }}
+                tabModalProps={{
+                  inMeeting: true,
+                }}
+              />
+            </div>
+            <div className="str-video__call-controls__desktop" title="Feedback">
+              <ToggleFeedbackButton />
+            </div>
+            {isPronto && (
+              <div
+                className="str-video__call-controls__desktop"
+                title="Dev Settings"
+              >
+                <ToggleDeveloperButton />
+              </div>
+            )}
+            <div className="str-video__call-controls__mobile">
+              <ToggleMoreOptionsListButton />
+            </div>
+          </div>
+          <div className="str-video__call-controls--group str-video__call-controls--media">
+            <RecordCallConfirmationButton />
+
+            <div className="str-video__call-controls__desktop">
+              <ScreenShareButton />
+            </div>
+            <div className="str-video__call-controls__desktop">
+              <ReactionsButton />
+            </div>
+
+            <ToggleDualMicButton />
+            <ToggleDualCameraButton />
+            <div className="str-video__call-controls__desktop">
+              <CancelCallConfirmButton onLeave={onLeave} />
+            </div>
+          </div>
+          <div className="str-video__call-controls--group str-video__call-controls--sidebar">
+            <div className="str-video__call-controls__desktop">
+              <ToggleLayoutButton
+                selectedLayout={layout}
+                onMenuItemClick={setLayout}
+              />
+            </div>
+            <div className="str-video__call-controls__desktop">
+              <ToggleStatsButton
+                active={showStats}
+                onClick={() => setSidebarContent(showStats ? null : 'stats')}
+              />
+            </div>
+
+            <ToggleParticipantListButton
+              active={showParticipants}
+              onClick={() => {
+                setSidebarContent(showParticipants ? null : 'participants');
+              }}
+            />
+            <NewMessageNotification
+              chatClient={chatClient}
+              channelWatched={channelWatched}
+              disableOnChatOpen={showChat}
+            >
+              <div className="str-chat__chat-button__wrapper">
+                <CompositeButton
+                  active={showChat}
+                  disabled={!chatClient}
+                  title="Chat"
+                  onClick={() => {
+                    if (isTourActive && currentTourStep === StepNames.Chat) {
+                      nextTourStep();
+                    }
+                    setSidebarContent(showChat ? null : 'chat');
+                  }}
+                >
+                  <Icon icon="chat" />
+                </CompositeButton>
+                {!showChat && (
+                  <UnreadCountBadge
+                    channelWatched={channelWatched}
+                    chatClient={chatClient}
+                    channelId={activeCall.id}
+                  />
+                )}
+              </div>
+            </NewMessageNotification>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ActiveCallHeader.tsx b/sample-apps/react/react-dogfood/components/ActiveCallHeader.tsx
index a81c9eb8f7..19443ab985 100644
--- a/sample-apps/react/react-dogfood/components/ActiveCallHeader.tsx
+++ b/sample-apps/react/react-dogfood/components/ActiveCallHeader.tsx
@@ -1,76 +1,127 @@
-import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { useEffect, useMemo, useState } from 'react';
 import {
   CallingState,
-  CopyToClipboardButtonWithPopup,
-  DeviceSettings,
-  IconButton,
+  CancelCallConfirmButton,
+  Icon,
   LoadingIndicator,
   Notification,
   useCallStateHooks,
+  useI18n,
 } from '@stream-io/video-react-sdk';
+import clsx from 'clsx';
+
 import { CallHeaderTitle } from './CallHeaderTitle';
-import { CallRecordings } from './CallRecordings';
-import { USAGE_GUIDE_LINK } from './index';
-import { IconInviteLinkButton } from './InviteLinkButton';
-import { LayoutSelector, LayoutSelectorProps } from './LayoutSelector';
-import { useSettings } from '../context/SettingsContext';
-import { DevMenu } from './DevMenu';
+import { ToggleSettingsTabModal } from './Settings/SettingsTabModal';
+import { ToggleDocumentationButton } from './ToggleDocumentationButton';
+
+import { LayoutSelectorProps } from './LayoutSelector';
+
+import { useIsDemoEnvironment } from '../context/AppEnvironmentContext';
+
+export const LatencyIndicator = () => {
+  const { useCallStatsReport } = useCallStateHooks();
+  const statsReport = useCallStatsReport();
+  const latency = statsReport?.publisherStats?.averageRoundTripTimeInMs ?? 0;
+
+  return (
+    <div className="rd__header__latency">
+      <div
+        className={clsx('rd__header__latency-indicator', {
+          'rd__header__latency-indicator--good': latency && latency <= 100,
+          'rd__header__latency-indicator--ok':
+            latency && latency > 100 && latency < 400,
+          'rd__header__latency-indicator--bad': latency && latency > 400,
+        })}
+      ></div>
+      {latency} ms
+    </div>
+  );
+};
+
+export const Elapsed = ({
+  startedAt,
+}: {
+  className?: string;
+  startedAt: string | undefined;
+}) => {
+  const [elapsed, setElapsed] = useState<string>();
+  const startedAtDate = useMemo(
+    () => (startedAt ? new Date(startedAt).getTime() : Date.now()),
+    [startedAt],
+  );
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const elapsedSeconds = (Date.now() - startedAtDate) / 1000;
+      const date = new Date(0);
+      date.setSeconds(elapsedSeconds);
+      const format = date.toISOString(); // '1970-01-01T00:00:35.000Z'
+      const hours = format.substring(11, 13);
+      const minutes = format.substring(14, 16);
+      const seconds = format.substring(17, 19);
+      const time = `${hours !== '00' ? hours + ':' : ''}${minutes}:${seconds}`;
+      setElapsed(time);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [startedAtDate]);
+
+  return (
+    <div className="rd__header__elapsed">
+      <Icon className="rd__header__elapsed-icon" icon="verified" />
+      <div className="rd__header__elapsed-time">{elapsed}</div>
+    </div>
+  );
+};
 
 export const ActiveCallHeader = ({
+  onLeave,
   selectedLayout,
-  onMenuItemClick: setLayout,
-}: LayoutSelectorProps) => {
-  const { setOpen } = useSettings();
-  const { useCallCallingState } = useCallStateHooks();
+  onMenuItemClick,
+}: { onLeave: () => void } & LayoutSelectorProps) => {
+  const { useCallCallingState, useCallSession } = useCallStateHooks();
   const callingState = useCallCallingState();
+  const session = useCallSession();
   const isOffline = callingState === CallingState.OFFLINE;
   const isMigrating = callingState === CallingState.MIGRATING;
   const isJoining = callingState === CallingState.JOINING;
   const isReconnecting = callingState === CallingState.RECONNECTING;
   const hasFailedToRecover = callingState === CallingState.RECONNECTING_FAILED;
 
+  const { t } = useI18n();
+
+  const isDemo = useIsDemoEnvironment();
+
   return (
     <>
-      <div className="str-video__call-header">
-        <CallHeaderTitle />
-        <div className="str-video__call-header__controls-group">
-          <DevMenu />
-          <LayoutSelector
-            selectedLayout={selectedLayout}
-            onMenuItemClick={setLayout}
+      <div className="rd__call-header rd__call-header--active">
+        <div className="rd__call-header__title">
+          <CallHeaderTitle
+            title={isDemo ? t('Stream Video Calling') : undefined}
           />
-          <IconButton
-            icon="info-document"
-            title="Usage guide and known limitations"
-            onClick={() => {
-              if (typeof window !== 'undefined') {
-                window.open(USAGE_GUIDE_LINK, '_blank', 'noopener,noreferrer');
-              }
+
+          <ToggleDocumentationButton />
+        </div>
+
+        <div className="rd__call-header__settings">
+          <ToggleSettingsTabModal
+            layoutProps={{
+              selectedLayout: selectedLayout,
+              onMenuItemClick: onMenuItemClick,
             }}
-          />
-          <CopyToClipboardButtonWithPopup
-            Button={IconInviteLinkButton}
-            copyValue={
-              typeof window !== 'undefined' ? window.location.href : ''
-            }
-            popupPlacement="bottom"
-          />
-          <CallRecordings />
-          <DeviceSettings />
-          <button
-            style={{
-              padding: 0,
-              background: '#1c1e22',
-              color: 'white',
-              borderRadius: '8px',
+            tabModalProps={{
+              inMeeting: true,
             }}
-            onClick={() => setOpen(true)}
-          >
-            <MoreVertIcon fill="white" />
-          </button>
+          />
+        </div>
+
+        <div className="rd__call-header__controls-group">
+          <Elapsed startedAt={session?.started_at} />
+          <LatencyIndicator />
+        </div>
+        <div className="rd__call-header__leave">
+          <CancelCallConfirmButton onLeave={onLeave} />
         </div>
       </div>
-      <div className="str-video__call-header__notifications">
+      <div className="rd__call-header__notifications">
         {(() => {
           if (isOffline || hasFailedToRecover) {
             return (
diff --git a/sample-apps/react/react-dogfood/components/CallHeaderTitle.tsx b/sample-apps/react/react-dogfood/components/CallHeaderTitle.tsx
index 944af9cb23..f89cabcc60 100644
--- a/sample-apps/react/react-dogfood/components/CallHeaderTitle.tsx
+++ b/sample-apps/react/react-dogfood/components/CallHeaderTitle.tsx
@@ -21,21 +21,18 @@ export const CallHeaderTitle = ({ title }: CallTitleProps) => {
     if (!connectedUser) return 'Connecting...';
 
     if (!participants.length) return connectedUser.name;
-    return (
-      'Call with: ' +
-      participants
-        .slice(0, 3)
-        .map((p) => p.name || p.userId)
-        .join(', ')
-    );
+    return participants
+      .slice(0, 3)
+      .map((p) => p.name || p.userId)
+      .join(', ');
   }, [connectedUser, participants]);
 
   if (!activeCall) return null;
 
   return (
-    <div className="str-video__call-header__title-group">
+    <div className="rd__call-header__title-group">
       <HomeButton />
-      <h4 className="str-video__call-header-title">{title || standInTitle}</h4>
+      <h4 className="rd__call-header-title">{title || standInTitle}</h4>
     </div>
   );
 };
diff --git a/sample-apps/react/react-dogfood/components/CallLayout/CallParticipantsScreenView.tsx b/sample-apps/react/react-dogfood/components/CallLayout/CallParticipantsScreenView.tsx
index 4c4406456b..4d821eb5ae 100644
--- a/sample-apps/react/react-dogfood/components/CallLayout/CallParticipantsScreenView.tsx
+++ b/sample-apps/react/react-dogfood/components/CallLayout/CallParticipantsScreenView.tsx
@@ -1,21 +1,21 @@
 import { ComponentType, useEffect, useState } from 'react';
 
 import {
-  Call,
   DefaultParticipantViewUI,
   IconButton,
   ParticipantView,
   SfuModels,
+  useCall,
   useCallStateHooks,
   useVerticalScrollPosition,
   Video,
 } from '@stream-io/video-react-sdk';
 
 export const CallParticipantsScreenView = (props: {
-  call: Call;
   ParticipantViewUI?: ComponentType;
 }) => {
-  const { call, ParticipantViewUI } = props;
+  const { ParticipantViewUI } = props;
+  const call = useCall();
   const { useLocalParticipant, useParticipants } = useCallStateHooks();
   const localParticipant = useLocalParticipant();
   const allParticipants = useParticipants();
@@ -28,7 +28,7 @@ export const CallParticipantsScreenView = (props: {
   );
 
   useEffect(() => {
-    if (!scrollWrapper) return;
+    if (!scrollWrapper || !call) return;
     const cleanup = call.setViewport(scrollWrapper);
     return () => cleanup();
   }, [scrollWrapper, call]);
diff --git a/sample-apps/react/react-dogfood/components/CallRecordings.tsx b/sample-apps/react/react-dogfood/components/CallRecordings.tsx
index 9d02837fc8..98e9291039 100644
--- a/sample-apps/react/react-dogfood/components/CallRecordings.tsx
+++ b/sample-apps/react/react-dogfood/components/CallRecordings.tsx
@@ -1,14 +1,12 @@
-import clsx from 'clsx';
-import { forwardRef, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   CallRecording,
   CallRecordingList,
-  IconButton,
-  MenuToggle,
-  ToggleMenuButtonProps,
   useCall,
 } from '@stream-io/video-react-sdk';
 
+const TIMEOUT_INTERVAL = 1200000;
+
 export const CallRecordings = () => {
   const call = useCall();
   const [callRecordings, setCallRecordings] = useState<CallRecording[]>([]);
@@ -22,6 +20,14 @@ export const CallRecordings = () => {
     });
   }, [call]);
 
+  useEffect(() => {
+    const timeout = setTimeout(fetchCallRecordings, TIMEOUT_INTERVAL);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [fetchCallRecordings]);
+
   useEffect(() => {
     fetchCallRecordings();
   }, [fetchCallRecordings]);
@@ -46,27 +52,10 @@ export const CallRecordings = () => {
   }, [call]);
 
   return (
-    <MenuToggle placement="bottom-end" ToggleButton={ToggleMenuButton}>
-      <CallRecordingList
-        callRecordings={callRecordings}
-        loading={loadingCallRecordings}
-        onRefresh={fetchCallRecordings}
-      />
-    </MenuToggle>
+    <CallRecordingList
+      CallRecordingListHeader={() => <div></div>}
+      callRecordings={callRecordings}
+      loading={loadingCallRecordings}
+    />
   );
 };
-
-const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  ({ menuShown }, ref) => {
-    return (
-      <IconButton
-        className={clsx('str-video__call-recordings__toggle-button', {
-          'str-video__call-recordings__toggle-button--active': menuShown,
-        })}
-        icon="call-recordings"
-        ref={ref}
-        title={menuShown ? 'Close' : 'Call recordings'}
-      />
-    );
-  },
-);
diff --git a/sample-apps/react/react-dogfood/components/CallRecordingsPage/CallRecordingSearchForm.tsx b/sample-apps/react/react-dogfood/components/CallRecordingsPage/CallRecordingSearchForm.tsx
index f3090aeb0e..25361b5482 100644
--- a/sample-apps/react/react-dogfood/components/CallRecordingsPage/CallRecordingSearchForm.tsx
+++ b/sample-apps/react/react-dogfood/components/CallRecordingsPage/CallRecordingSearchForm.tsx
@@ -6,15 +6,10 @@ import { useRouter } from 'next/router';
 import {
   ChangeEventHandler,
   FormEventHandler,
-  KeyboardEventHandler,
   useCallback,
   useEffect,
   useState,
 } from 'react';
-import { Button, Stack } from '@mui/material';
-import clsx from 'clsx';
-
-const CALL_TYPES = ['default', 'development', 'audio-room', 'livestream'];
 
 type CallRecordingSearchFormProps = {
   setLoading: (loading: boolean) => void;
@@ -30,8 +25,6 @@ export const CallRecordingSearchForm = ({
   const videoClient = useStreamVideoClient();
 
   const [enabled, setEnabled] = useState(false);
-  const [showDropdown, setShowDropdown] = useState(false);
-  const [highlightedOption, setHighlightedOption] = useState(0);
   const [callIdInput, setCallIdInput] = useState<HTMLInputElement | null>(null);
   const [callTypeInput, setCallTypeInput] = useState<HTMLInputElement | null>(
     null,
@@ -86,48 +79,6 @@ export const CallRecordingSearchForm = ({
     setResultError(undefined);
   }, [callTypeInput, callIdInput, setResult, setResultError]);
 
-  const handleDropdownNavigation: KeyboardEventHandler<HTMLInputElement> =
-    useCallback(
-      (e) => {
-        if (!callTypeInput) return;
-        if (e.code === 'ArrowDown') {
-          if (!showDropdown) {
-            setShowDropdown(true);
-            return;
-          }
-          setHighlightedOption((prev) => {
-            return ++prev % CALL_TYPES.length;
-          });
-        }
-
-        if (e.code === 'ArrowUp') {
-          setHighlightedOption((prev) => {
-            return prev === 0
-              ? CALL_TYPES.length - 1
-              : --prev % CALL_TYPES.length;
-          });
-        }
-
-        if (e.code === 'Enter') {
-          callTypeInput.value = CALL_TYPES[highlightedOption];
-          setShowDropdown(false);
-          setEnabled(!!callIdInput?.value);
-          setResultError(undefined);
-        }
-
-        if (e.code === 'Escape' && showDropdown) {
-          setShowDropdown(false);
-        }
-      },
-      [
-        callTypeInput,
-        callIdInput,
-        showDropdown,
-        highlightedOption,
-        setResultError,
-      ],
-    );
-
   useEffect(() => {
     const { callCid } = router.query;
 
@@ -137,15 +88,25 @@ export const CallRecordingSearchForm = ({
 
       callTypeInput.value = callType as string;
       callIdInput.value = callId as string;
-      queryRecordings(callType, callId);
+      queryRecordings(callType, callId).catch((err) => {
+        console.error('Error querying recordings', err);
+        setResultError(err as Error);
+      });
     }
-  }, [callIdInput, callTypeInput, router, router.query, queryRecordings]);
+  }, [
+    callIdInput,
+    callTypeInput,
+    router,
+    router.query,
+    queryRecordings,
+    setResultError,
+  ]);
 
   const formId = 'recording-search-form';
   return (
-    <Stack spacing={2} alignItems="center" padding={2} maxWidth={'300px'}>
+    <div className="rd__call-recordings-page-form">
       <form onSubmit={handleSubmit} id={formId}>
-        <Stack direction="row">
+        <div className="rd__call-recordings-page-form__container">
           <div className="rd__call-type-dropdown-container">
             <input
               form={formId}
@@ -153,33 +114,10 @@ export const CallRecordingSearchForm = ({
               className="rd__input rd__input--underlined rd__call-recording-search-input"
               type="text"
               onChange={handleChange}
-              onFocus={() => setShowDropdown(true)}
-              onBlur={() => setTimeout(() => setShowDropdown(false), 100)}
-              onKeyDown={handleDropdownNavigation}
               placeholder="Call Type"
-              tabIndex={1}
+              defaultValue="default"
             />
-            {showDropdown && (
-              <div className="rd__call-recording-search-input__call-type-dropdown">
-                {CALL_TYPES.map((callType, i) => (
-                  <div
-                    className={clsx('rd__call-recording-search-input__option', {
-                      'rd__call-recording-search-input__option--highlighted':
-                        i === highlightedOption,
-                    })}
-                    key={callType}
-                    onClick={() => {
-                      if (!callTypeInput) return;
-                      callTypeInput.value = callType;
-                    }}
-                  >
-                    {callType}
-                  </div>
-                ))}
-              </div>
-            )}
           </div>
-          <span>:</span>
           <input
             form={formId}
             className="rd__input rd__input--underlined rd__call-recording-search-input"
@@ -187,21 +125,16 @@ export const CallRecordingSearchForm = ({
             onChange={handleChange}
             ref={setCallIdInput}
             placeholder="Call ID"
-            tabIndex={2}
           />
-        </Stack>
-        <Button
-          className="rd__call-recording-search-submit-button"
-          type="submit"
-          variant="contained"
-          sx={{ marginTop: '1rem' }}
+        </div>
+        <button
           disabled={!enabled}
-          fullWidth
-          tabIndex={3}
+          className="rd__button rd__button--primary"
+          type="submit"
         >
-          Go
-        </Button>
+          Search
+        </button>
       </form>
-    </Stack>
+    </div>
   );
 };
diff --git a/sample-apps/react/react-dogfood/components/CallRecordingsPage/CallRecordingsPage.tsx b/sample-apps/react/react-dogfood/components/CallRecordingsPage/CallRecordingsPage.tsx
index 1689aea982..c2a870a5df 100644
--- a/sample-apps/react/react-dogfood/components/CallRecordingsPage/CallRecordingsPage.tsx
+++ b/sample-apps/react/react-dogfood/components/CallRecordingsPage/CallRecordingsPage.tsx
@@ -6,12 +6,11 @@ import {
   StreamVideoClient,
 } from '@stream-io/video-react-sdk';
 import { useEffect, useState } from 'react';
-import { Box } from '@mui/material';
 import { CallRecordingSearchForm } from './CallRecordingSearchForm';
-import { LobbyHeader } from '../LobbyHeader';
 import { ServerSideCredentialsProps } from '../../lib/getServerSideCredentialsProps';
 import { useSettings } from '../../context/SettingsContext';
 import { customSentryLogger } from '../../helpers/logger';
+import { DefaultAppHeader } from '../DefaultAppHeader';
 
 export const CallRecordingsPage = ({
   apiKey,
@@ -19,7 +18,7 @@ export const CallRecordingsPage = ({
   userToken,
 }: ServerSideCredentialsProps) => {
   const {
-    settings: { language },
+    settings: { language, fallbackLanguage },
   } = useSettings();
   const [recordings, setRecordings] = useState<CallRecording[] | undefined>();
   const [error, setError] = useState<Error | undefined>();
@@ -51,28 +50,25 @@ export const CallRecordingsPage = ({
   }
 
   return (
-    <StreamVideo client={videoClient} language={language}>
-      <LobbyHeader />
-      <Box display="flex" justifyContent="center">
-        <Box display="flex" alignItems="center" flexDirection="column">
+    <StreamVideo
+      client={videoClient}
+      language={language}
+      fallbackLanguage={fallbackLanguage}
+    >
+      <DefaultAppHeader />
+      <div className="rd__call-recordings-page">
+        <div className="rd__call-recordings-page__container">
           <CallRecordingSearchForm
             setResult={setRecordings}
             setResultError={setError}
             setLoading={setLoading}
           />
           {loading ? (
-            <LoadingIndicator className="rd__call-recording__loading-indicator" />
+            <LoadingIndicator />
           ) : error?.message ? (
             <div>{error.message}</div>
           ) : (
-            <Box
-              maxHeight="400px"
-              maxWidth="400px"
-              overflow={'hidden auto'}
-              paddingBottom="0.5rem"
-              width="100%"
-              textAlign="center"
-            >
+            <div className="rd__call-recordings-page__recordings-list">
               {!recordings
                 ? null
                 : recordings.length
@@ -83,10 +79,10 @@ export const CallRecordingsPage = ({
                     />
                   ))
                 : 'No recordings found for the call'}
-            </Box>
+            </div>
           )}
-        </Box>
-      </Box>
+        </div>
+      </div>
     </StreamVideo>
   );
 };
diff --git a/sample-apps/react/react-dogfood/components/CallSettingsButton.tsx b/sample-apps/react/react-dogfood/components/CallSettingsButton.tsx
deleted file mode 100644
index 59791a410a..0000000000
--- a/sample-apps/react/react-dogfood/components/CallSettingsButton.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useState } from 'react';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-sdk';
-import { IconButton } from '@mui/material';
-import SettingsSuggestIcon from '@mui/icons-material/SettingsSuggest';
-import Menu from '@mui/material/Menu';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import PanoramaIcon from '@mui/icons-material/Panorama';
-import ListItemText from '@mui/material/ListItemText';
-
-export const CallSettingsButton = () => {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const open = !!anchorEl;
-  return (
-    <div className="df-call-settings">
-      <IconButton
-        id="call-settings-button"
-        sx={{ color: 'white' }}
-        title="Call Settings"
-        aria-controls={open ? 'call-settings-menu' : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? 'true' : undefined}
-        onClick={(e) => {
-          setAnchorEl(e.currentTarget);
-        }}
-      >
-        <SettingsSuggestIcon />
-      </IconButton>
-      <Menu
-        id="call-settings-menu"
-        open={open}
-        anchorEl={anchorEl}
-        onClose={() => setAnchorEl(null)}
-        MenuListProps={{
-          'aria-labelledby': 'call-settings-button',
-        }}
-      >
-        <MenuList>
-          <ToggleCallThumbnails />
-        </MenuList>
-      </Menu>
-    </div>
-  );
-};
-
-const ToggleCallThumbnails = () => {
-  const call = useCall();
-  const { useCallSettings } = useCallStateHooks();
-  const settings = useCallSettings();
-  const thumbnailsEnabled = !!settings?.thumbnails.enabled;
-  return (
-    <MenuItem
-      onClick={() => {
-        if (!call) return;
-        call
-          .update({
-            settings_override: { thumbnails: { enabled: !thumbnailsEnabled } },
-          })
-          .catch((err) => {
-            console.error(`Failed to update call thumbnail settings`, err);
-          });
-      }}
-    >
-      <ListItemIcon>
-        <PanoramaIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>
-        {thumbnailsEnabled ? 'Disable Thumbnails' : 'Enable Thumbnails'}
-      </ListItemText>
-    </MenuItem>
-  );
-};
diff --git a/sample-apps/react/react-dogfood/components/CallStatsWrapper.tsx b/sample-apps/react/react-dogfood/components/CallStatsWrapper.tsx
new file mode 100644
index 0000000000..442f458b4e
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/CallStatsWrapper.tsx
@@ -0,0 +1,26 @@
+import { CallStats, CompositeButton, Icon } from '@stream-io/video-react-sdk';
+
+export const ToggleStatsButton = (props: {
+  active?: boolean;
+  onClick?: () => void;
+}) => {
+  const { active, onClick } = props;
+  return (
+    <CompositeButton
+      active={active}
+      variant="primary"
+      title="Stats"
+      onClick={onClick}
+    >
+      <Icon icon="stats" />
+    </CompositeButton>
+  );
+};
+
+export const CallStatsSidebar = () => {
+  return (
+    <div className="rd__sidebar__call-stats">
+      <CallStats />
+    </div>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ChatUI.tsx b/sample-apps/react/react-dogfood/components/ChatUI.tsx
index 93ae297802..c57754f8b7 100644
--- a/sample-apps/react/react-dogfood/components/ChatUI.tsx
+++ b/sample-apps/react/react-dogfood/components/ChatUI.tsx
@@ -1,16 +1,88 @@
-import { useState, useEffect } from 'react';
+import { useEffect, ComponentProps } from 'react';
 import {
   Channel,
   Window,
   MessageList,
   MessageInput,
   useChatContext,
+  useChannelStateContext,
+  MESSAGE_ACTIONS,
 } from 'stream-chat-react';
 
-import { TextButton } from '@stream-io/video-react-sdk';
+import type { Message } from 'stream-chat';
+
+import { IconButton, Icon } from '@stream-io/video-react-sdk';
 
 import { CHANNEL_TYPE } from '.';
 
+const ALLOWED_MESSAGE_ACTIONS = [
+  MESSAGE_ACTIONS.edit,
+  MESSAGE_ACTIONS.delete,
+  MESSAGE_ACTIONS.flag,
+  MESSAGE_ACTIONS.quote,
+  MESSAGE_ACTIONS.react,
+];
+
+export const NoMessages = () => {
+  const { messages } = useChannelStateContext();
+
+  if (messages?.length === 0) {
+    return (
+      <div className="rd__chat__no-messages">
+        <svg
+          className="rd__chat__no-messages__icon"
+          width="43"
+          height="42"
+          viewBox="0 0 43 42"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g id="try">
+            <path
+              id="Vector"
+              d="M35.5 4.73024H7.5C5.575 4.73024 4 6.30524 4 8.23024V35.5127C4 37.0702 5.89 37.8577 6.9925 36.7552L11 32.7302H35.5C37.425 32.7302 39 31.1552 39 29.2302V8.23024C39 6.30524 37.425 4.73024 35.5 4.73024ZM24.2475 21.4777L22.2875 25.7477C21.9725 26.4302 21.01 26.4302 20.695 25.7477L18.735 21.4777L14.465 19.5177C13.7825 19.2027 13.7825 18.2402 14.465 17.9252L18.735 15.9652L20.695 11.6952C21.01 11.0127 21.9725 11.0127 22.2875 11.6952L24.2475 15.9652L28.5175 17.9252C29.2 18.2402 29.2 19.2027 28.5175 19.5177L24.2475 21.4777Z"
+              fill="#B0B4B7"
+            />
+          </g>
+        </svg>
+
+        <p className="rd__chat__no-messages__title">Start chatting!</p>
+        <p className="rd__chat__no-messages__description">
+          Let’s get this chat started, why not send the first message?
+        </p>
+      </div>
+    );
+  }
+  return null;
+};
+
+export type ChatSendButtonProps = {
+  sendMessage: (
+    event: React.BaseSyntheticEvent,
+    customMessageData?: Partial<Message>,
+  ) => void;
+} & ComponentProps<'button'>;
+
+export const ChatSendButton = ({
+  sendMessage,
+  ...rest
+}: ChatSendButtonProps) => {
+  return (
+    <div className="str-chat__send-button-container">
+      <button
+        aria-label="ArrowRightIcon"
+        className="str-chat__send-button"
+        data-testid="send-button"
+        onClick={sendMessage}
+        type="button"
+        {...rest}
+      >
+        <Icon icon="chevron-right" />
+      </button>
+    </div>
+  );
+};
+
 export const ChatUI = ({
   onClose,
   channelId,
@@ -19,7 +91,6 @@ export const ChatUI = ({
   channelId: string;
 }) => {
   const { client, setActiveChannel } = useChatContext();
-  const [noted, setNoted] = useState(!!sessionStorage.getItem('noted'));
 
   useEffect(() => {
     const channel = client.channel(CHANNEL_TYPE, channelId);
@@ -28,38 +99,27 @@ export const ChatUI = ({
   }, [channelId, client, setActiveChannel]);
 
   return (
-    <Channel>
+    <Channel
+      EmptyStateIndicator={NoMessages}
+      SendButton={ChatSendButton}
+      FileUploadIcon={() => <Icon icon="paperclip" />}
+    >
       <Window>
-        <div className="str-chat__custom-channel-header__wrapper">
-          <div className="str-chat__custom-channel-header">
-            Chat
-            {/* FIXME: reuse participant list close button */}
-            <button
+        <div className="rd__chat-wrapper">
+          <div className="rd__chat-header">
+            <h2 className="rd__chat-header__title">Chat</h2>
+            <IconButton
+              className="rd__chat-header__icon"
               onClick={onClose}
-              className="str-chat__custom-channel-header__close-button"
-            >
-              <span className="str-chat__custom-channel-header__close-button--icon" />
-            </button>
+              icon="close"
+            />
           </div>
-          {!noted && (
-            <div className="str-chat__custom-channel-header__warning">
-              <span>
-                ℹ️ Messages are currently <strong>visible</strong> to anyone
-                with the link and valid session.
-              </span>
-              <TextButton
-                onClick={() => {
-                  sessionStorage.setItem('noted', 'true');
-                  setNoted(true);
-                }}
-              >
-                Noted
-              </TextButton>
-            </div>
-          )}
         </div>
-        <MessageList />
-        <MessageInput grow focus />
+        <MessageList messageActions={ALLOWED_MESSAGE_ACTIONS} />
+        <MessageInput
+          focus
+          additionalTextareaProps={{ placeholder: 'Send a message' }}
+        />
       </Window>
     </Channel>
   );
diff --git a/sample-apps/react/react-dogfood/components/Countdown.tsx b/sample-apps/react/react-dogfood/components/Countdown.tsx
deleted file mode 100644
index c92290d71d..0000000000
--- a/sample-apps/react/react-dogfood/components/Countdown.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Box, Stack } from '@mui/material';
-
-const PUNCHLINES = [
-  'Countdown to Launching Video. Let’s go!  🚀',
-  'Less than 24 hours until launch. Keep Pushing!  💪',
-  'Video has been launched! 🎉🚀 Keep Pushing!  💪',
-];
-
-const formatValue = (value: number) =>
-  value < 10 ? `0${value}` : value.toString();
-
-const divMod = (dividend: number, divisor: number) => [
-  Math.floor(dividend / divisor),
-  dividend % divisor,
-];
-const calculateTimeLeft = (deadline: number) => {
-  const now = new Date().getTime();
-  const totalSecondsLeft = Math.round((deadline - now) / 1000);
-
-  if (totalSecondsLeft <= 0)
-    return { totalSecondsLeft: 0, days: 0, hours: 0, minutes: 0, seconds: 0 };
-  const [days, minusDaysLeft] = divMod(totalSecondsLeft, 24 * 3600);
-  const [hours, minusHoursLeft] = divMod(minusDaysLeft, 3600);
-  const [minutes, seconds] = divMod(minusHoursLeft, 60);
-
-  return {
-    totalSecondsLeft,
-    days,
-    hours,
-    minutes,
-    seconds,
-  };
-};
-
-type CountdownProps = {
-  deadlineTimestamp: number;
-};
-
-export const Countdown = ({ deadlineTimestamp }: CountdownProps) => {
-  const [left, setLeft] = useState(calculateTimeLeft(deadlineTimestamp));
-
-  useEffect(() => {
-    const interval = setInterval(
-      () => setLeft(calculateTimeLeft(deadlineTimestamp)),
-      1000,
-    );
-    return () => {
-      clearInterval(interval);
-    };
-  }, [deadlineTimestamp]);
-
-  return (
-    <Stack
-      sx={{
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: '10%',
-        gap: '1.25rem',
-      }}
-    >
-      <Box
-        sx={{
-          fontSize: '12px',
-          lineHeight: '15px',
-          letterSpacing: '0.2rem',
-          color: '#fff',
-          textTransform: 'uppercase',
-        }}
-      >
-        {left.totalSecondsLeft <= 0
-          ? PUNCHLINES[2]
-          : left.days === 0
-          ? PUNCHLINES[1]
-          : PUNCHLINES[0]}
-      </Box>
-      <Stack
-        direction="row"
-        sx={{
-          borderRadius: '8px',
-          overflow: 'hidden',
-          paddingInline: '0.25rem',
-          background: left.days > 0 ? '#212326' : '#005FFF',
-        }}
-      >
-        <CounterBox amount={left.days} unit="days" />
-        <CounterBox amount={left.hours} unit="hours" />
-        <CounterBox amount={left.minutes} unit="minutes" />
-        <CounterBox amount={left.seconds} unit="seconds" />
-      </Stack>
-    </Stack>
-  );
-};
-
-type CounterBoxProps = {
-  amount: number;
-  unit: 'days' | 'hours' | 'minutes' | 'seconds';
-};
-
-const CounterBox = ({ amount, unit }: CounterBoxProps) => (
-  <Stack
-    sx={{
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: '0.5rem 0.75rem',
-      fontWeight: '300',
-      minWidth: '70px',
-    }}
-  >
-    <Box
-      sx={{
-        fontSize: '32px',
-        lineHeight: '39px',
-        letterSpacing: '0.2rem',
-        color: '#fff',
-      }}
-    >
-      {formatValue(amount)}
-    </Box>
-    <Box
-      sx={{
-        color: 'rgba(255, 255, 255, 0.6)',
-        fontSize: '14px',
-        lineHeight: '17px',
-        textTransform: 'uppercase',
-      }}
-    >
-      {unit}
-    </Box>
-  </Stack>
-);
diff --git a/sample-apps/react/react-dogfood/components/Debug/DebugParticipantViewUI.tsx b/sample-apps/react/react-dogfood/components/Debug/DebugParticipantViewUI.tsx
index 34362e1587..123c02c27b 100644
--- a/sample-apps/react/react-dogfood/components/Debug/DebugParticipantViewUI.tsx
+++ b/sample-apps/react/react-dogfood/components/Debug/DebugParticipantViewUI.tsx
@@ -1,20 +1,45 @@
+import { useEffect, useState } from 'react';
 import {
   DefaultParticipantViewUI,
+  GenericMenu,
+  GenericMenuButtonItem,
+  Icon,
+  OwnCapability,
+  ParticipantActionsContextMenu,
+  Restricted,
+  SfuModels,
   useCall,
+  useI18n,
+  useMenuContext,
   useParticipantViewContext,
 } from '@stream-io/video-react-sdk';
 import { DebugStatsView } from './DebugStatsView';
 import { useIsDebugMode } from './useIsDebugMode';
+import { useIsDemoEnvironment } from '../../context/AppEnvironmentContext';
 
 export const DebugParticipantViewUI = () => {
   const call = useCall();
   const { participant } = useParticipantViewContext();
   const { sessionId, userId, videoStream } = participant;
+
+  const isDemoEnvironment = useIsDemoEnvironment();
+  const participantContextMenuActions = isDemoEnvironment
+    ? CustomParticipantActionsContextMenu
+    : ParticipantActionsContextMenu;
+
   const isDebug = useIsDebugMode();
-  if (!isDebug) return <DefaultParticipantViewUI />;
+  if (!isDebug) {
+    return (
+      <DefaultParticipantViewUI
+        ParticipantActionsContextMenu={participantContextMenuActions}
+      />
+    );
+  }
   return (
     <>
-      <DefaultParticipantViewUI />
+      <DefaultParticipantViewUI
+        ParticipantActionsContextMenu={participantContextMenuActions}
+      />
       <div className="rd__debug__extra">
         <DebugStatsView
           call={call!}
@@ -26,3 +51,195 @@ export const DebugParticipantViewUI = () => {
     </>
   );
 };
+
+const CustomParticipantActionsContextMenu = () => {
+  const call = useCall();
+  const { t } = useI18n();
+
+  const { participant, participantViewElement, videoElement } =
+    useParticipantViewContext();
+  const { pin, publishedTracks, sessionId, userId } = participant;
+
+  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
+  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+  const hasScreenShare = publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE,
+  );
+  const hasScreenShareAudio = publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE_AUDIO,
+  );
+
+  const [fullscreenModeOn, setFullscreenModeOn] = useState(
+    !!document.fullscreenElement,
+  );
+  const [pictureInPictureElement, setPictureInPictureElement] = useState(
+    document.pictureInPictureElement,
+  );
+
+  const blockUser = () => call?.blockUser(userId);
+  const muteAudio = () => call?.muteUser(userId, 'audio');
+  const muteVideo = () => call?.muteUser(userId, 'video');
+  const muteScreenShare = () => call?.muteUser(userId, 'screenshare');
+  const muteScreenShareAudio = () =>
+    call?.muteUser(userId, 'screenshare_audio');
+
+  const toggleParticipantPinnedAt = () => {
+    if (pin) {
+      call?.unpin(sessionId);
+    } else {
+      call?.pin(sessionId);
+    }
+  };
+
+  const pinForEveryone = () => {
+    call
+      ?.pinForEveryone({
+        user_id: userId,
+        session_id: sessionId,
+      })
+      .catch((err) => {
+        console.error(`Failed to pin participant ${userId}`, err);
+      });
+  };
+
+  const unpinForEveryone = () => {
+    call
+      ?.unpinForEveryone({
+        user_id: userId,
+        session_id: sessionId,
+      })
+      .catch((err) => {
+        console.error(`Failed to unpin participant ${userId}`, err);
+      });
+  };
+
+  const toggleFullscreenMode = () => {
+    if (!fullscreenModeOn) {
+      return participantViewElement
+        ?.requestFullscreen()
+        .then(() => setFullscreenModeOn(true))
+        .catch(console.error);
+    }
+
+    document
+      .exitFullscreen()
+      .catch(console.error)
+      .finally(() => setFullscreenModeOn(false));
+  };
+
+  useEffect(() => {
+    if (!videoElement) return;
+
+    const handlePictureInPicture = () => {
+      setPictureInPictureElement(document.pictureInPictureElement);
+    };
+
+    videoElement.addEventListener(
+      'enterpictureinpicture',
+      handlePictureInPicture,
+    );
+    videoElement.addEventListener(
+      'leavepictureinpicture',
+      handlePictureInPicture,
+    );
+
+    return () => {
+      videoElement.removeEventListener(
+        'enterpictureinpicture',
+        handlePictureInPicture,
+      );
+      videoElement.removeEventListener(
+        'leavepictureinpicture',
+        handlePictureInPicture,
+      );
+    };
+  }, [videoElement]);
+
+  const togglePictureInPicture = () => {
+    if (videoElement && pictureInPictureElement !== videoElement) {
+      return videoElement
+        .requestPictureInPicture()
+        .catch(console.error) as Promise<void>;
+    }
+
+    document.exitPictureInPicture().catch(console.error);
+  };
+
+  const { close } = useMenuContext() || {};
+  return (
+    <GenericMenu onItemClick={close}>
+      <GenericMenuButtonItem
+        onClick={toggleParticipantPinnedAt}
+        disabled={pin && !pin.isLocalPin}
+      >
+        <Icon icon="pin" />
+        {pin ? t('Unpin') : t('Pin')}
+      </GenericMenuButtonItem>
+      <Restricted requiredGrants={[OwnCapability.PIN_FOR_EVERYONE]}>
+        <GenericMenuButtonItem
+          onClick={pinForEveryone}
+          disabled={pin && !pin.isLocalPin}
+        >
+          <Icon icon="pin" />
+          {t('Pin for everyone')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={unpinForEveryone}
+          disabled={!pin || pin.isLocalPin}
+        >
+          <Icon icon="pin" />
+          {t('Unpin for everyone')}
+        </GenericMenuButtonItem>
+      </Restricted>
+      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>
+        <GenericMenuButtonItem onClick={blockUser}>
+          <Icon icon="not-allowed" />
+          {t('Block')}
+        </GenericMenuButtonItem>
+      </Restricted>
+      <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
+        {hasVideo && (
+          <GenericMenuButtonItem onClick={muteVideo}>
+            <Icon icon="camera-off-outline" />
+            {t('Turn off video')}
+          </GenericMenuButtonItem>
+        )}
+        {hasScreenShare && (
+          <GenericMenuButtonItem onClick={muteScreenShare}>
+            <Icon icon="screen-share-off" />
+            {t('Turn off screen share')}
+          </GenericMenuButtonItem>
+        )}
+        {hasAudio && (
+          <GenericMenuButtonItem onClick={muteAudio}>
+            <Icon icon="no-audio" />
+            {t('Mute audio')}
+          </GenericMenuButtonItem>
+        )}
+        {hasScreenShareAudio && (
+          <GenericMenuButtonItem onClick={muteScreenShareAudio}>
+            <Icon icon="no-audio" />
+            {t('Mute screen share audio')}
+          </GenericMenuButtonItem>
+        )}
+      </Restricted>
+      {participantViewElement && (
+        <GenericMenuButtonItem onClick={toggleFullscreenMode}>
+          {t('{{ direction }} fullscreen', {
+            direction: fullscreenModeOn ? t('Leave') : t('Enter'),
+          })}
+        </GenericMenuButtonItem>
+      )}
+      {videoElement && document.pictureInPictureEnabled && (
+        <GenericMenuButtonItem onClick={togglePictureInPicture}>
+          {t('{{ direction }} picture-in-picture', {
+            direction:
+              pictureInPictureElement === videoElement
+                ? t('Leave')
+                : t('Enter'),
+          })}
+        </GenericMenuButtonItem>
+      )}
+    </GenericMenu>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/Debug/DebugStatsView.tsx b/sample-apps/react/react-dogfood/components/Debug/DebugStatsView.tsx
index 2a6f89d903..d14e1bbbd8 100644
--- a/sample-apps/react/react-dogfood/components/Debug/DebugStatsView.tsx
+++ b/sample-apps/react/react-dogfood/components/Debug/DebugStatsView.tsx
@@ -1,14 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Call, StatCard, useCallStateHooks } from '@stream-io/video-react-sdk';
-import {
-  autoUpdate,
-  flip,
-  offset,
-  shift,
-  size,
-  useFloating,
-  UseFloatingData,
-} from '@floating-ui/react';
+import { useFloatingUIPreset } from '../../hooks/useFloatingUIPreset';
 
 export const DebugStatsView = (props: {
   call: Call;
@@ -130,42 +122,3 @@ const unwrapStats = (rawStats?: RTCStatsReport) => {
   });
   return decodedStats;
 };
-
-const useFloatingUIPreset = (
-  props: Pick<UseFloatingData, 'placement' | 'strategy'>,
-) => {
-  const {
-    refs,
-    x,
-    y,
-    update,
-    elements: { domReference, floating },
-  } = useFloating({
-    placement: props.placement,
-    strategy: props.strategy,
-    middleware: [
-      offset(10),
-      shift(),
-      flip(),
-      size({
-        padding: 10,
-        apply: ({ availableHeight, elements }) => {
-          Object.assign(elements.floating.style, {
-            maxHeight: `${availableHeight}px`,
-          });
-        },
-      }),
-    ],
-  });
-
-  // handle window resizing
-  useEffect(() => {
-    if (!domReference || !floating) return;
-    const cleanup = autoUpdate(domReference, floating, update);
-    return () => {
-      cleanup();
-    };
-  }, [domReference, floating, update]);
-
-  return { refs, x, y, domReference, floating, strategy: props.strategy };
-};
diff --git a/sample-apps/react/react-dogfood/components/DefaultAppHeader.tsx b/sample-apps/react/react-dogfood/components/DefaultAppHeader.tsx
new file mode 100644
index 0000000000..d7254f1b1d
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/DefaultAppHeader.tsx
@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import { HomeButton, UserInfo } from './LobbyHeader';
+
+import { Icon, useI18n } from '@stream-io/video-react-sdk';
+
+export const DefaultAppHeader = (props: { transparent?: boolean }) => {
+  const { transparent } = props;
+  const { t } = useI18n();
+  return (
+    <div
+      className={clsx(
+        'rd__call-header',
+        transparent && 'rd__call-header--transparent',
+      )}
+    >
+      <div className="rd__call-header__title-group">
+        <HomeButton />
+        <UserInfo />
+      </div>
+      <div className="rd__call-header__documentation">
+        <a
+          className="rd__button rd__button--align-left"
+          href="https://getstream.io/video/sdk/react/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Icon className="rd__button__icon" icon="mediation" />
+          {t('Tutorials')}
+        </a>
+        <a
+          className="rd__button rd__button--align-left"
+          href="https://getstream.io/video/docs/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Icon className="rd__button__icon" icon="folder" />
+          {t('Documentation')}
+        </a>
+      </div>
+    </div>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/DevMenu.tsx b/sample-apps/react/react-dogfood/components/DevMenu.tsx
index c9fea63bad..e86a69a8aa 100644
--- a/sample-apps/react/react-dogfood/components/DevMenu.tsx
+++ b/sample-apps/react/react-dogfood/components/DevMenu.tsx
@@ -1,65 +1,68 @@
-import { useState } from 'react';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-sdk';
-import ConstructionIcon from '@mui/icons-material/Construction';
-import IconButton from '@mui/material/IconButton';
-import DownloadingIcon from '@mui/icons-material/Downloading';
-import QueryStatsIcon from '@mui/icons-material/QueryStats';
-import LiveTvIcon from '@mui/icons-material/LiveTv';
-import CancelPresentationIcon from '@mui/icons-material/CancelPresentation';
-import Menu from '@mui/material/Menu';
-import Divider from '@mui/material/Divider';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-import LanIcon from '@mui/icons-material/Lan';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemIcon from '@mui/material/ListItemIcon';
+import Link from 'next/link';
+import { Icon, useCall, useCallStateHooks } from '@stream-io/video-react-sdk';
 
 export const DevMenu = () => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const open = !!anchorEl;
   return (
-    <div className="df-dev-menu">
-      <IconButton
-        id="dev-debug-menu-button"
-        color="primary"
-        title="Debug"
-        aria-controls={open ? 'dev-debug-menu' : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? 'true' : undefined}
-        onClick={(e) => {
-          setAnchorEl(e.currentTarget);
-        }}
-      >
-        <ConstructionIcon />
-      </IconButton>
-      <Menu
-        id="dev-debug-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={() => setAnchorEl(null)}
-        MenuListProps={{
-          'aria-labelledby': 'dev-debug-menu-button',
-        }}
-      >
-        <MenuList>
-          {/*<MigrateToNewSfu />*/}
-          {/*<FastReconnect />*/}
-          {/*<Divider />*/}
-          <RestartPublisher />
-          <RestartSubscriber />
-          <Divider />
-          <ConnectToLocalSfu sfuId="SFU-1" port={3031} />
-          <ConnectToLocalSfu sfuId="SFU-2" port={3033} />
-          <ConnectToLocalSfu sfuId="SFU-3" port={3036} />
-          <Divider />
-          <LogPublisherStats />
-          <LogSubscriberStats />
-          <Divider />
-          <StartStopBroadcasting />
-          <GoOrStopLive />
-        </MenuList>
-      </Menu>
-    </div>
+    <ul className="rd__dev-menu">
+      <li className="rd__dev-menu__item">
+        <RestartPublisher />
+      </li>
+      <li className="rd__dev-menu__item">
+        <RestartSubscriber />
+      </li>
+
+      <li className="rd__dev-menu__item rd__dev-menu__item--divider" />
+
+      <li className="rd__dev-menu__item">
+        <ConnectToLocalSfu sfuId="SFU-1" port={3031} />
+      </li>
+      <li className="rd__dev-menu__item">
+        <ConnectToLocalSfu sfuId="SFU-2" port={3033} />
+      </li>
+      <li className="rd__dev-menu__item">
+        <ConnectToLocalSfu sfuId="SFU-3" port={3036} />
+      </li>
+
+      <li className="rd__dev-menu__item rd__dev-menu__item--divider" />
+
+      <li className="rd__dev-menu__item">
+        <LogPublisherStats />
+      </li>
+      <li className="rd__dev-menu__item">
+        <LogSubscriberStats />
+      </li>
+      <li className="rd__dev-menu__item rd__dev-menu__item--divider" />
+
+      <li className="rd__dev-menu__item">
+        <StartStopBroadcasting />
+      </li>
+      <li className="rd__dev-menu__item">
+        <GoOrStopLive />
+      </li>
+      <li className="rd__dev-menu__item rd__dev-menu__item--divider" />
+      <li className="rd__dev-menu__item">
+        <a
+          className="rd__link rd__link--faux-button rd__link--align-left"
+          href="https://www.notion.so/stream-wiki/Usage-guide-and-known-limitations-603b12af2dff43d69119be4dae462b19"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Icon className="rd__link__icon" icon="info-document" />
+          Usage guide
+        </a>
+      </li>
+      <li className="rd__dev-menu__item">
+        <Link
+          className="rd__link rd__link--faux-button rd__link--align-left"
+          href={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/call-recordings`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Icon className="rd__link__icon" icon="film-roll" />
+          Recordings
+        </Link>
+      </li>
+    </ul>
   );
 };
 
@@ -68,7 +71,8 @@ const StartStopBroadcasting = () => {
   const { useIsCallHLSBroadcastingInProgress } = useCallStateHooks();
   const isBroadcasting = useIsCallHLSBroadcastingInProgress();
   return (
-    <MenuItem
+    <button
+      className="rd__button rd__button--align-left"
       onClick={() => {
         if (!call) return;
         if (isBroadcasting) {
@@ -87,13 +91,12 @@ const StartStopBroadcasting = () => {
         }
       }}
     >
-      <ListItemIcon>
-        {isBroadcasting ? <EndBroadcastIcon /> : <StartBroadcastIcon />}
-      </ListItemIcon>
-      <ListItemText>
-        {isBroadcasting ? 'Stop broadcasting' : 'Start broadcasting'}
-      </ListItemText>
-    </MenuItem>
+      <Icon
+        className="rd__button__icon"
+        icon={isBroadcasting ? 'recording-off' : 'recording-on'}
+      />
+      {isBroadcasting ? 'Stop broadcasting' : 'Start broadcasting'}
+    </button>
   );
 };
 
@@ -102,7 +105,8 @@ const GoOrStopLive = () => {
   const { useIsCallLive } = useCallStateHooks();
   const isLive = useIsCallLive();
   return (
-    <MenuItem
+    <button
+      className="rd__button rd__button--align-left"
       onClick={() => {
         if (!call) return;
         if (isLive) {
@@ -121,18 +125,19 @@ const GoOrStopLive = () => {
         }
       }}
     >
-      <ListItemIcon>
-        {isLive ? <CancelPresentationIcon /> : <LiveTvIcon />}
-      </ListItemIcon>
-      <ListItemText>{isLive ? 'Stop Live' : 'Go Live'}</ListItemText>
-    </MenuItem>
+      <Icon
+        className="rd__button__icon"
+        icon={isLive ? 'recording-off' : 'recording-on'}
+      />
+      {isLive ? 'Stop Live' : 'Go Live'}
+    </button>
   );
 };
 
 // const MigrateToNewSfu = () => {
 //   const call = useCall();
 //   return (
-//     <MenuItem
+//     <button className="rd__button rd__button--align-left"
 //       hidden
 //       onClick={() => {
 //         if (!call) return;
@@ -155,7 +160,7 @@ const GoOrStopLive = () => {
 //         />
 //       </ListItemIcon>
 //       <ListItemText>Migrate to a new SFU</ListItemText>
-//     </MenuItem>
+//     </button>
 //   );
 // };
 //
@@ -163,7 +168,7 @@ const GoOrStopLive = () => {
 // const EmulateSFUShuttingDown = () => {
 //   const call = useCall();
 //   return (
-//     <MenuItem
+//     <button className="rd__button rd__button--align-left"
 //       onClick={() => {
 //         if (!call) return;
 //         call['dispatcher'].dispatch({
@@ -180,7 +185,7 @@ const GoOrStopLive = () => {
 //         <PowerSettingsNewIcon fontSize="small" />
 //       </ListItemIcon>
 //       <ListItemText>Emulate SFU shutdown</ListItemText>
-//     </MenuItem>
+//     </button>
 //   );
 // };
 
@@ -188,64 +193,59 @@ const ConnectToLocalSfu = (props: { port?: number; sfuId?: string }) => {
   const { port = 3031, sfuId = 'SFU-1' } = props;
   const params = new URLSearchParams(window.location.search);
   return (
-    <MenuItem
+    <button
+      className="rd__button rd__button--align-left"
       onClick={() => {
         params.set('sfuUrl', `http://127.0.0.1:${port}/twirp`);
         params.set('sfuWsUrl', `ws://127.0.0.1:${port}/ws`);
         window.location.search = params.toString();
       }}
     >
-      <ListItemIcon>
-        <LanIcon />
-      </ListItemIcon>
-      <ListItemText>Connect to local {sfuId}</ListItemText>
-    </MenuItem>
+      <Icon className="rd__button__icon" icon="mediation" />
+      Connect to local {sfuId}
+    </button>
   );
 };
 
 const RestartPublisher = () => {
   const call = useCall();
   return (
-    <MenuItem
+    <button
+      className="rd__button rd__button--align-left"
+      hidden={!call}
       onClick={() => {
         if (!call) return;
         call.publisher?.restartIce();
       }}
     >
-      <ListItemIcon>
-        <DownloadingIcon
-          fontSize="small"
-          sx={{
-            transform: 'rotate(180deg)',
-          }}
-        />
-      </ListItemIcon>
-      <ListItemText>ICERestart Publisher</ListItemText>
-    </MenuItem>
+      <Icon className="rd__button__icon" icon="recording-off" />
+      ICERestart Publisher
+    </button>
   );
 };
 
 const RestartSubscriber = () => {
   const call = useCall();
   return (
-    <MenuItem
+    <button
+      className="rd__button rd__button--align-left"
+      hidden={!call}
       onClick={() => {
         if (!call) return;
         call.subscriber?.restartIce();
       }}
     >
-      <ListItemIcon>
-        <DownloadingIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>ICERestart Subscriber</ListItemText>
-    </MenuItem>
+      <Icon className="rd__button__icon" icon="recording-on" />
+      ICERestart Subscriber
+    </button>
   );
 };
 
 const LogPublisherStats = () => {
   const call = useCall();
   return (
-    <MenuItem
+    <button
+      className="rd__button rd__button--align-left"
       onClick={() => {
         if (!call) return;
         call.publisher?.getStats().then((stats: RTCStatsReport) => {
@@ -257,52 +257,17 @@ const LogPublisherStats = () => {
         });
       }}
     >
-      <ListItemIcon>
-        <QueryStatsIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>Log Publisher stats</ListItemText>
-    </MenuItem>
-  );
-};
-
-const StartBroadcastIcon = () => {
-  return (
-    <svg
-      width="25"
-      height="18"
-      viewBox="0 0 25 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M7.2 14.2996C5.8375 12.9496 5 11.0746 5 8.99961C5 6.92461 5.8375 5.04961 7.2 3.69961L8.975 5.47461C8.0625 6.37461 7.5 7.62461 7.5 8.99961C7.5 10.3746 8.0625 11.6246 8.9625 12.5371L7.2 14.2996ZM17.8 14.2996C19.1625 12.9496 20 11.0746 20 8.99961C20 6.92461 19.1625 5.04961 17.8 3.69961L16.025 5.47461C16.9375 6.37461 17.5 7.62461 17.5 8.99961C17.5 10.3746 16.9375 11.6246 16.0375 12.5371L17.8 14.2996ZM12.5 6.49961C11.125 6.49961 10 7.62461 10 8.99961C10 10.3746 11.125 11.4996 12.5 11.4996C13.875 11.4996 15 10.3746 15 8.99961C15 7.62461 13.875 6.49961 12.5 6.49961ZM22.5 8.99961C22.5 11.7621 21.375 14.2621 19.5625 16.0621L21.3375 17.8371C23.6 15.5746 25 12.4496 25 8.99961C25 5.54961 23.6 2.42461 21.3375 0.162109L19.5625 1.93711C21.375 3.73711 22.5 6.23711 22.5 8.99961ZM5.4375 1.93711L3.6625 0.162109C1.4 2.42461 0 5.54961 0 8.99961C0 12.4496 1.4 15.5746 3.6625 17.8371L5.4375 16.0621C3.625 14.2621 2.5 11.7621 2.5 8.99961C2.5 6.23711 3.625 3.73711 5.4375 1.93711Z"
-        fill="#0000008a"
-      />
-    </svg>
-  );
-};
-
-const EndBroadcastIcon = () => {
-  return (
-    <svg
-      width="26"
-      height="26"
-      viewBox="0 0 26 26"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M8.55615 10.8184C8.44365 11.2309 8.38115 11.6684 8.38115 12.1184C8.38115 13.4934 8.94365 14.7434 9.84365 15.6559L8.06865 17.4309C6.71865 16.0684 5.88115 14.1934 5.88115 12.1184C5.88115 10.9559 6.14365 9.86836 6.60615 8.88086L4.76865 7.04336C3.88115 8.53086 3.38115 10.2684 3.38115 12.1184C3.38115 14.8809 4.50615 17.3809 6.31865 19.1809L4.54365 20.9559C2.28115 18.6934 0.881152 15.5684 0.881152 12.1184C0.881152 9.56836 1.64365 7.20586 2.95615 5.23086L0.118652 2.39336L1.88115 0.630859L24.8562 23.6059L23.0937 25.3684L8.55615 10.8184ZM20.1562 15.3559C20.6187 14.3684 20.8812 13.2809 20.8812 12.1184C20.8812 10.0434 20.0437 8.16836 18.6812 6.81836L16.9062 8.59336C17.8187 9.49336 18.3812 10.7434 18.3812 12.1184C18.3812 12.5684 18.3187 13.0059 18.2062 13.4184L20.1562 15.3559ZM23.3812 12.1184C23.3812 13.9684 22.8812 15.7059 21.9937 17.1934L23.8062 19.0059C25.1187 17.0309 25.8812 14.6684 25.8812 12.1184C25.8812 8.66836 24.4812 5.54336 22.2187 3.28086L20.4437 5.05586C22.2562 6.85586 23.3812 9.35586 23.3812 12.1184Z"
-        fill="#0000008a"
-      />
-    </svg>
+      <Icon className="rd__button__icon" icon="folder" />
+      Log Publisher stats
+    </button>
   );
 };
 
 const LogSubscriberStats = () => {
   const call = useCall();
   return (
-    <MenuItem
+    <button
+      className="rd__button rd__button--align-left"
       onClick={() => {
         if (!call) return;
         call.subscriber?.getStats().then((stats: RTCStatsReport) => {
@@ -314,10 +279,8 @@ const LogSubscriberStats = () => {
         });
       }}
     >
-      <ListItemIcon>
-        <QueryStatsIcon fontSize="small" />
-      </ListItemIcon>
-      <ListItemText>Log Subscriber stats</ListItemText>
-    </MenuItem>
+      <Icon className="rd__button__icon" icon="folder" />
+      Log Subscriber stats
+    </button>
   );
 };
diff --git a/sample-apps/react/react-dogfood/components/Feedback/Feedback.tsx b/sample-apps/react/react-dogfood/components/Feedback/Feedback.tsx
new file mode 100644
index 0000000000..3b525a10ed
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/Feedback/Feedback.tsx
@@ -0,0 +1,261 @@
+import { HTMLInputTypeAttribute, useCallback, useMemo, useState } from 'react';
+import clsx from 'clsx';
+
+import { useField, useForm } from 'react-form';
+
+import { Icon, useI18n, useMenuContext } from '@stream-io/video-react-sdk';
+
+import { getCookie } from '../../helpers/getCookie';
+
+export type Props = {
+  className?: string;
+  callId?: string;
+  inMeeting?: boolean;
+};
+
+function required(value: string | number, name: string) {
+  if (!value) {
+    return `Please enter a ${name}`;
+  }
+  return false;
+}
+
+const Input = (props: {
+  className?: string;
+  type: HTMLInputTypeAttribute;
+  placeholder: string;
+  name: string;
+  required?: boolean;
+}) => {
+  const { name, className, ...rest } = props;
+  const {
+    meta: { error, isTouched },
+    getInputProps,
+  } = useField(name, {
+    validate: props.required
+      ? (value: string) => required(value, name)
+      : undefined,
+  });
+
+  const rootClassName = clsx(className, {
+    'rd__feedback-error': isTouched && error,
+  });
+
+  return <input className={rootClassName} {...getInputProps()} {...rest} />;
+};
+
+const TextArea = (props: {
+  className?: string;
+  placeholder: string;
+  name: string;
+  required?: boolean;
+}) => {
+  const { name, className, ...rest } = props;
+  const {
+    meta: { error, isTouched },
+    getInputProps,
+  } = useField(name, {
+    validate: props.required
+      ? (value: string) => required(value, name)
+      : undefined,
+  });
+
+  const rootClassName = clsx('rd__feedback-textarea', {
+    'rd__feedback-error': isTouched && error,
+  });
+
+  return <textarea className={rootClassName} {...getInputProps()} {...rest} />;
+};
+
+export const Feedback = ({ callId, inMeeting = true }: Props) => {
+  const [rating, setRating] = useState<{ current: number; maxAmount: number }>({
+    current: 0,
+    maxAmount: 5,
+  });
+  const [feedbackSent, setFeedbackSent] = useState<boolean>(false);
+  const [errorMessage, setError] = useState<string | null>(null);
+
+  const { t } = useI18n();
+
+  const endpointUrl =
+    process.env.MODE === 'staging' || process.env.MODE === 'development'
+      ? 'https://staging.getstream.io'
+      : 'https://getstream.io';
+  const {
+    Form,
+    meta: { isSubmitting },
+  } = useForm({
+    defaultValues: useMemo(
+      () => ({
+        email: '',
+        message: '',
+      }),
+      [],
+    ),
+    onSubmit: async (values: object) => {
+      const response = await fetch(`${endpointUrl}/api/crm/video_feedback/`, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          'X-CSRFToken': getCookie('csrftoken') || '',
+        },
+        body: JSON.stringify({
+          ...values,
+          page_url: `${endpointUrl}?meeting=${inMeeting ? 'true' : 'false'}${
+            callId ? `&id=${callId}` : ''
+          }`,
+        }),
+      });
+
+      if (response.status >= 400) {
+        setError('Something went wrong, please try again.');
+      } else {
+        setFeedbackSent(true);
+      }
+    },
+    debugForm: false,
+  });
+
+  const handleSetRating = useCallback(
+    (value: number) => {
+      setRating({
+        ...rating,
+        current: value,
+      });
+    },
+    [rating],
+  );
+
+  const descriptionClassName = clsx('rd__feedback-description', {
+    'rd__feedback-error': errorMessage,
+  });
+
+  const { close } = useMenuContext();
+
+  if (feedbackSent) {
+    return (
+      <div className="rd__feedback rd__feedback--sent">
+        <img
+          className="rd__feedback-image"
+          src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/feedback.png`}
+          alt="Feedback"
+        />
+
+        <h2 className="rd__feedback-heading">
+          {t('Thanks for your feedback!')}
+        </h2>
+        <p className="rd__feedback-description">
+          {t('We’ll use it to help better your call experience 😀')}
+        </p>
+
+        <button
+          className="rd__button rd__button--primaryrd__feedback-button rd__feedback-button--close"
+          disabled={isSubmitting}
+          onClick={
+            close ||
+            (() => {
+              window.location.href = '/';
+            })
+          }
+        >
+          {' '}
+          {t('Close')}
+        </button>
+      </div>
+    );
+  }
+
+  if (!feedbackSent) {
+    return (
+      <div className="rd__feedback">
+        <img
+          className="rd__feedback-image"
+          src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/feedback.png`}
+          alt="Feedback"
+        />
+        <h4 className="rd__feedback-heading">
+          {inMeeting ? t('How was your call?') : t('You left the call.')}
+        </h4>
+        <p className={descriptionClassName}>
+          {errorMessage && errorMessage}
+          {inMeeting && !errorMessage && 'How is your calling experience?'}
+          {!inMeeting && !errorMessage && 'How was your calling experience?'}
+        </p>
+        <Form className="rd__feedback-form">
+          <Input
+            className="rd__feedback-input"
+            name="email"
+            type="email"
+            placeholder={t('Email')}
+            required
+          />
+          <TextArea
+            className="rd__feedback-textarea"
+            name="message"
+            placeholder={t('Message')}
+          />
+          <div className="rd__feedback-footer">
+            <div className="rd__feedback-rating">
+              <p className="rd__feedback-rating-description">Rate quality:</p>
+              <div className="rd__feedback-rating-stars">
+                {[...new Array(rating.maxAmount)].map((_, index: number) => {
+                  const active = index + 1 <= rating.current;
+                  const starClassName = clsx('rd__feedback-star', {
+                    'rd__feedback-star--active': active,
+                  });
+
+                  return (
+                    <div
+                      key={`star-${index}`}
+                      onClick={() => handleSetRating(index + 1)}
+                    >
+                      <Icon icon="star" className={starClassName} />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="rd__feedback-actions">
+              {inMeeting ? (
+                <button
+                  className="rd__button rd__button--secondary rd__feedback-button--cancel"
+                  disabled={isSubmitting}
+                  onClick={close}
+                >
+                  {' '}
+                  {t('Cancel')}
+                </button>
+              ) : (
+                <button
+                  className="rd__button rd__button--secondary rd__feedback-button--cancel"
+                  disabled={isSubmitting}
+                  onClick={() =>
+                    window.location.assign(
+                      'https://getstream.io/video/#contact',
+                    )
+                  }
+                >
+                  {t('Contact an expert')}
+                </button>
+              )}
+
+              <button
+                className="rd__button rd__button--primary rd__feedback-button--submit"
+                type="submit"
+                disabled={isSubmitting}
+                onClick={() => {}}
+              >
+                {' '}
+                {t('Submit')}
+              </button>
+            </div>
+          </div>
+        </Form>
+      </div>
+    );
+  }
+
+  return null;
+};
diff --git a/sample-apps/react/react-dogfood/components/InviteLinkButton.tsx b/sample-apps/react/react-dogfood/components/InviteLinkButton.tsx
index 5132aac185..f09905ed0c 100644
--- a/sample-apps/react/react-dogfood/components/InviteLinkButton.tsx
+++ b/sample-apps/react/react-dogfood/components/InviteLinkButton.tsx
@@ -2,11 +2,11 @@ import { ComponentProps, ForwardedRef, forwardRef } from 'react';
 import { IconButton } from '@stream-io/video-react-sdk';
 import clsx from 'clsx';
 
-export const InviteLinkButton = forwardRef(
-  (
-    { className, ...props }: ComponentProps<'button'>,
-    ref: ForwardedRef<HTMLButtonElement>,
-  ) => (
+export const InviteLinkButton = forwardRef(function InviteLinkButton(
+  { className, ...props }: ComponentProps<'button'>,
+  ref: ForwardedRef<HTMLButtonElement>,
+) {
+  return (
     <button
       {...props}
       className={clsx('str-video__invite-link-button', className)}
@@ -15,19 +15,19 @@ export const InviteLinkButton = forwardRef(
       <div className="str-video__invite-participant-icon" />
       <div className="str-video__invite-link-button__text">Invite Link</div>
     </button>
-  ),
-);
+  );
+});
 
-export const IconInviteLinkButton = forwardRef(
-  (
-    { className, ...props }: ComponentProps<'button'>,
-    ref: ForwardedRef<HTMLButtonElement>,
-  ) => (
+export const IconInviteLinkButton = forwardRef(function IconInviteLinkButton(
+  { className, ...props }: ComponentProps<'button'>,
+  ref: ForwardedRef<HTMLButtonElement>,
+) {
+  return (
     <IconButton
       {...props}
       icon={'user-plus'}
       className={clsx('str-video__invite-link-button', className)}
       ref={ref}
     />
-  ),
-);
+  );
+});
diff --git a/sample-apps/react/react-dogfood/components/InvitePanel/InvitePanel.tsx b/sample-apps/react/react-dogfood/components/InvitePanel/InvitePanel.tsx
new file mode 100644
index 0000000000..f2b8c1d232
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/InvitePanel/InvitePanel.tsx
@@ -0,0 +1,129 @@
+import { useCallback, useEffect, useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { Icon, IconButton, useI18n } from '@stream-io/video-react-sdk';
+
+export const InvitePopup = ({
+  callId,
+  close,
+}: {
+  callId: string;
+  close: () => void;
+}) => {
+  const { t } = useI18n();
+  const { isCopied, copyInviteLink } = useCopyInviteLink();
+
+  const qrCodeContent = new URL(window.location.toString());
+  qrCodeContent.searchParams.set('from_qr', 'true');
+
+  return (
+    <div className="rd__invite-popup">
+      <div className="rd__invite-popup__header">
+        <h2 className="rd__invite-popup__heading">
+          {t('Your meeting is live!')}
+        </h2>
+        <IconButton
+          className="rd__invite-popup__close"
+          icon="close"
+          onClick={close}
+        />
+      </div>
+
+      <button
+        className="rd__button rd__button--primary rd__invite-popup__button"
+        onClick={copyInviteLink}
+      >
+        <Icon className="rd__button__icon" icon="person-add" />
+        {isCopied ? 'Copied invite link' : 'Copy invite link'}
+      </button>
+
+      <p className="rd__invite-popup__description">
+        {t('Or share this call ID with the others you want in the meeting:')}
+      </p>
+      <div className="rd__invite-popup__id" onClick={copyInviteLink}>
+        <div>
+          {t('Call ID:')}
+          <span className="rd__invite-popup__id-text">{callId}</span>
+        </div>
+        <Icon className="rd__invite-popup__id-button" icon="copy" />
+      </div>
+      <div
+        className="rd__invite-popup__qr-container"
+        title={qrCodeContent.toString()}
+      >
+        <p className="rd__invite-popup__qr-description">
+          To test on a mobile device, scan the QR Code below:
+        </p>
+        <QRCodeSVG
+          className="rd__invite-popup__qr-code"
+          value={qrCodeContent.toString()}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Invite = () => {
+  const { isCopied, copyInviteLink } = useCopyInviteLink();
+  return (
+    <div className="rd__invite__copy">
+      <h2 className="rd__invite__copy-header">Share the link</h2>
+      <p className="rd__invite__copy-description">
+        Click the button below to copy the call link:
+      </p>
+      <button
+        className="rd__button rd__button--primary rd__invite__copy-button"
+        onClick={copyInviteLink}
+      >
+        <Icon className="rd__button__icon" icon="person-add" />
+        {isCopied ? 'Copied invite link' : 'Copy invite link'}
+      </button>
+    </div>
+  );
+};
+
+export const InvitePanel = () => {
+  const qrCodeContent = new URL(window.location.toString());
+  qrCodeContent.searchParams.set('from_qr', 'true');
+  return (
+    <div className="rd__invite">
+      <Invite />
+      <div className="rd__invite__qr">
+        <h2 className="rd__invite__qr-header">Test on mobile</h2>
+        <p className="rd__invite__qr-description">
+          To test on a mobile device, can the QR Code below:
+        </p>
+        <div
+          className="rd__invite__qr-container"
+          title={qrCodeContent.toString()}
+        >
+          <QRCodeSVG
+            className="rd__invite__qr-code"
+            value={qrCodeContent.toString()}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const useCopyInviteLink = () => {
+  const [isCopied, setIsCopied] = useState(false);
+  const copyInviteLink = useCallback(() => {
+    setIsCopied(false);
+    const url = window.location.href;
+    navigator.clipboard
+      .writeText(url)
+      .catch((err) => console.error('could not copy invite link', err))
+      .finally(() => setIsCopied(true));
+  }, []);
+
+  useEffect(() => {
+    if (!isCopied) return;
+    const id = setTimeout(() => {
+      setIsCopied(false);
+    }, 3000);
+    return () => clearTimeout(id);
+  }, [isCopied]);
+
+  return { isCopied, copyInviteLink };
+};
diff --git a/sample-apps/react/react-dogfood/components/InvitePanel/index.ts b/sample-apps/react/react-dogfood/components/InvitePanel/index.ts
new file mode 100644
index 0000000000..42ad561e9d
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/InvitePanel/index.ts
@@ -0,0 +1 @@
+export { InvitePanel as default, Invite } from './InvitePanel';
diff --git a/sample-apps/react/react-dogfood/components/LatencyMap/LatencyMap.tsx b/sample-apps/react/react-dogfood/components/LatencyMap/LatencyMap.tsx
new file mode 100644
index 0000000000..f90d0676e7
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/LatencyMap/LatencyMap.tsx
@@ -0,0 +1,207 @@
+import { useEffect, useRef, useState } from 'react';
+import mapboxgl from 'mapbox-gl';
+import { FeatureCollection } from 'geojson';
+
+export type Props = {
+  sourceData?: FeatureCollection;
+  zoomLevel?: number;
+};
+
+export const LatencyMap = ({ sourceData, zoomLevel = 2 }: Props) => {
+  const [loading, setLoading] = useState(true);
+  const [source, setSource] = useState(sourceData);
+
+  const popUpRef = useRef(
+    new mapboxgl.Popup({ offset: 15, closeButton: false, closeOnClick: false }),
+  );
+
+  const mapContainer = useRef<any>(undefined);
+  const map = useRef<mapboxgl.Map | null>(null);
+
+  const [lng] = useState(-38.632571);
+  const [lat] = useState(25);
+  const [zoom] = useState(zoomLevel);
+
+  const [hoverId, setHoverId] = useState(undefined);
+
+  useEffect(() => {
+    setSource(sourceData);
+  }, [sourceData]);
+
+  useEffect(() => {
+    if (map.current && !loading) {
+      map.current.on('mouseenter', 'servers-visualise', (e: any) => {
+        if (map.current) {
+          if (e.features?.length > 0) {
+            const [point] = e.features;
+
+            map.current.getCanvas().style.cursor = 'pointer';
+
+            if (hoverId === undefined) {
+              map.current.setFeatureState(
+                {
+                  source: 'servers',
+                  id: point.id,
+                },
+                { hover: true },
+              );
+
+              setHoverId(point.id);
+            }
+          }
+        }
+      });
+    }
+  }, [loading, map, popUpRef, hoverId]);
+
+  useEffect(() => {
+    if (map.current && !loading) {
+      map.current.on('mouseleave', 'servers-visualise', () => {
+        if (map.current) {
+          map.current.getCanvas().style.cursor = '';
+
+          if (hoverId) {
+            map.current.setFeatureState(
+              {
+                source: 'servers',
+                id: hoverId,
+              },
+              { hover: false },
+            );
+            setHoverId(undefined);
+          }
+        }
+      });
+    }
+  }, [loading, map, hoverId, popUpRef]);
+
+  useEffect(() => {
+    let appendMarkerTimer: ReturnType<typeof setTimeout>;
+
+    if (map.current && !loading) {
+      const serverSource = map.current.getSource('servers');
+
+      if (serverSource) {
+        return;
+      }
+
+      if (source) {
+        map.current.addSource('servers', {
+          type: 'geojson',
+          data: {
+            ...source,
+            features: [],
+          },
+        });
+
+        let lazyloadFeatures = source.features.sort(() => Math.random() - 0.5);
+
+        if (map.current.getSource('servers')) {
+          const mapSource: any = map.current.getSource('servers');
+
+          function appendMarker() {
+            if (lazyloadFeatures.length > 0) {
+              const [feature, ...rest] = lazyloadFeatures;
+              lazyloadFeatures = rest;
+              mapSource.setData({
+                type: 'FeatureCollection',
+                features: [...mapSource._data.features, feature],
+              });
+              appendMarkerTimer = setTimeout(appendMarker, Math.random() * 150);
+            }
+          }
+
+          appendMarker();
+        }
+      }
+
+      return () => {
+        clearTimeout(appendMarkerTimer);
+      };
+    }
+  }, [map, loading, source]);
+
+  useEffect(() => {
+    if (map.current && !loading) {
+      const serverSource = map.current.getSource('servers');
+      const layerSource = map.current.getLayer('servers-visualise');
+
+      if (layerSource) {
+        return;
+      }
+
+      if (source && serverSource) {
+        map.current.addLayer({
+          id: 'servers-visualise',
+          type: 'circle',
+          source: 'servers',
+          paint: {
+            'circle-color': [
+              'case',
+              ['boolean', ['feature-state', 'hover'], false],
+              '#20E070',
+              '#2F7DEB',
+            ],
+            'circle-radius': 4,
+            'circle-stroke-width': [
+              'case',
+              ['boolean', ['feature-state', 'hover'], false],
+              8,
+              0,
+            ],
+            'circle-stroke-color': [
+              'case',
+              ['boolean', ['feature-state', 'hover'], false],
+              'rgba(30, 177, 20, 0.2)',
+              'transparent',
+            ],
+          },
+        });
+      }
+    }
+  }, [map, loading, source]);
+
+  useEffect(() => {
+    const accessToken = process.env.NEXT_PUBLIC_MAPBOX_GL_TOKEN || '';
+    if (map.current || !accessToken || !isWebGLSupported()) return;
+
+    setLoading(true);
+
+    mapboxgl.accessToken = accessToken;
+    map.current = new mapboxgl.Map({
+      projection: {
+        name: 'mercator',
+      },
+      dragPan: false,
+      dragRotate: false,
+      container: mapContainer.current,
+      // TODO read it from an ENV variable
+      style: 'mapbox://styles/zwaardje/clhf9caar013j01qt07ib4bea',
+      center: [lng, lat],
+      zoom: zoom,
+    });
+
+    map.current.on('load', () => {
+      setLoading(false);
+    });
+  }, [lat, lng, zoom]);
+
+  return (
+    <div className="rd__latencymap">
+      <div ref={mapContainer} className="rd__latencymap-container" />
+    </div>
+  );
+};
+
+// https://stackoverflow.com/a/22953053/1270325
+const isWebGLSupported = () => {
+  try {
+    const canvas = document.createElement('canvas');
+    return (
+      !!window.WebGLRenderingContext &&
+      (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
+    );
+  } catch (e) {
+    return false;
+  }
+};
diff --git a/sample-apps/react/react-dogfood/components/LatencyMap/index.ts b/sample-apps/react/react-dogfood/components/LatencyMap/index.ts
new file mode 100644
index 0000000000..ef626ac37d
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/LatencyMap/index.ts
@@ -0,0 +1 @@
+export { LatencyMap as default } from './LatencyMap';
diff --git a/sample-apps/react/react-dogfood/components/LayoutSelector.tsx b/sample-apps/react/react-dogfood/components/LayoutSelector.tsx
index c2453654d9..5b1cba22fb 100644
--- a/sample-apps/react/react-dogfood/components/LayoutSelector.tsx
+++ b/sample-apps/react/react-dogfood/components/LayoutSelector.tsx
@@ -1,186 +1,142 @@
-import { Dispatch, forwardRef, SetStateAction, useEffect } from 'react';
+import { useCallback } from 'react';
+import clsx from 'clsx';
 import {
-  GenericMenu,
-  GenericMenuButtonItem,
-  IconButton,
-  LivestreamLayout,
-  MenuToggle,
-  PaginatedGridLayout,
-  SpeakerLayout,
-  ToggleMenuButtonProps,
+  DropDownSelect,
+  DropDownSelectOption,
+  Icon,
   useCallStateHooks,
 } from '@stream-io/video-react-sdk';
+import { LayoutMap } from '../hooks';
 
-import {
-  CallParticipantsScreenView,
-  CallParticipantsView,
-  SpeakerOneOnOne,
-} from './CallLayout';
-import { DebugParticipantViewUI } from './Debug/DebugParticipantViewUI';
-
-export const LayoutMap = {
-  LegacyGrid: {
-    Component: CallParticipantsView,
-    title: 'Grid (legacy)',
-    props: {
-      ParticipantViewUI: DebugParticipantViewUI,
-    },
-  },
-  PaginatedGrid: {
-    Component: PaginatedGridLayout,
-    title: 'Paginated grid',
-    props: {
-      groupSize: 16,
-      ParticipantViewUI: DebugParticipantViewUI,
-    },
-  },
-  SpeakerBottom: {
-    Component: SpeakerLayout,
-    title: 'Spotlight (default)',
-    props: {
-      participantsBarPosition: 'bottom',
-      ParticipantViewUIBar: DebugParticipantViewUI,
-      ParticipantViewUISpotlight: DebugParticipantViewUI,
-    },
-  },
-  SpeakerRight: {
-    Component: SpeakerLayout,
-    title: 'Spotlight (bar right)',
-    props: {
-      participantsBarPosition: 'right',
-      ParticipantViewUIBar: DebugParticipantViewUI,
-      ParticipantViewUISpotlight: DebugParticipantViewUI,
-    },
-  },
-  SpeakerTop: {
-    Component: SpeakerLayout,
-    title: 'Spotlight (bar top)',
-    props: {
-      participantsBarPosition: 'top',
-      ParticipantViewUIBar: DebugParticipantViewUI,
-      ParticipantViewUISpotlight: DebugParticipantViewUI,
-    },
-  },
-  SpeakerLeft: {
-    Component: SpeakerLayout,
-    title: 'Spotlight (bar left)',
-    props: {
-      participantsBarPosition: 'left',
-      ParticipantViewUIBar: DebugParticipantViewUI,
-      ParticipantViewUISpotlight: DebugParticipantViewUI,
-    },
-  },
-  LegacySpeaker: {
-    Component: CallParticipantsScreenView,
-    title: 'Sidebar',
-    props: {
-      ParticipantViewUI: DebugParticipantViewUI,
-    },
-  },
-  SpeakerOneOnOne: {
-    Component: SpeakerOneOnOne,
-    title: 'Speaker 1:1',
-    props: {
-      ParticipantViewUI: DebugParticipantViewUI,
-    },
-  },
-  LivestreamLayout: {
-    Component: LivestreamLayout,
-    title: 'Livestream',
-    props: {},
-  },
-};
+export enum LayoutSelectorType {
+  LIST = 'list',
+  DROPDOWN = 'menu',
+}
 
 export type LayoutSelectorProps = {
-  onMenuItemClick: Dispatch<SetStateAction<keyof typeof LayoutMap>>;
+  onMenuItemClick: (newLayout: keyof typeof LayoutMap) => void;
   selectedLayout: keyof typeof LayoutMap;
-};
-
-const SETTINGS_KEY = '@pronto/layout-settings';
-export const DEFAULT_LAYOUT: keyof typeof LayoutMap = 'SpeakerBottom';
-
-export const getLayoutSettings = () => {
-  if (typeof window === 'undefined') return;
-  const settings = window.localStorage.getItem(SETTINGS_KEY);
-  if (settings) {
-    try {
-      return JSON.parse(settings) as { selectedLayout: keyof typeof LayoutMap };
-    } catch (e) {
-      console.log('Error parsing layout settings', e);
-    }
-  }
+  visualType?: LayoutSelectorType;
 };
 
 export const LayoutSelector = ({
   onMenuItemClick: setLayout,
   selectedLayout,
+  visualType,
 }: LayoutSelectorProps) => {
-  const { useHasOngoingScreenShare } = useCallStateHooks();
-  const hasScreenShare = useHasOngoingScreenShare();
-
-  useEffect(() => {
-    const storedLayout = getLayoutSettings()?.selectedLayout ?? DEFAULT_LAYOUT;
-
-    const isStoredLayoutInMap = Object.hasOwn(LayoutMap, storedLayout);
-
-    // always switch to screen-share compatible layout
-    if (hasScreenShare)
-      return setLayout((currentLayout) => {
-        if (currentLayout.startsWith('Speaker')) return currentLayout;
-        return 'SpeakerBottom';
-      });
-
-    setLayout(
-      // reset to "stored" layout, use default if incompatible layout is used
-      storedLayout === 'LegacySpeaker' || !isStoredLayoutInMap
-        ? DEFAULT_LAYOUT
-        : storedLayout,
-    );
-  }, [hasScreenShare, setLayout]);
+  return (
+    <Menu
+      onMenuItemClick={setLayout}
+      selectedLayout={selectedLayout}
+      visualType={visualType}
+    />
+  );
+};
 
+const ListMenu = ({
+  selectedLayout,
+  handleSelect,
+  canScreenshare,
+}: LayoutSelectorProps & {
+  handleSelect: (index: number) => void;
+  canScreenshare: (key: string) => boolean;
+}) => {
   return (
-    <MenuToggle placement="bottom-end" ToggleButton={LayoutSelectorButton}>
-      <Menu onMenuItemClick={setLayout} selectedLayout={selectedLayout} />
-    </MenuToggle>
+    <ul className="rd__layout-selector__list">
+      {(Object.keys(LayoutMap) as Array<keyof typeof LayoutMap>)
+        .filter((key) => !canScreenshare(key))
+        .map((key) => (
+          <li key={key} className="rd__layout-selector__item">
+            <button
+              className={clsx('rd__button rd__button--align-left', {
+                'rd__button--primary': key === selectedLayout,
+              })}
+              onClick={() =>
+                handleSelect(Object.keys(LayoutMap).findIndex((k) => k === key))
+              }
+            >
+              <Icon className="rd__button__icon" icon={LayoutMap[key].icon} />
+              {LayoutMap[key].title}
+            </button>
+          </li>
+        ))}
+    </ul>
   );
 };
 
-const LayoutSelectorButton = forwardRef<
-  HTMLButtonElement,
-  ToggleMenuButtonProps
->((props, ref) => (
-  <IconButton enabled={props.menuShown} icon="grid" ref={ref} />
-));
+const DropdownMenu = ({
+  selectedLayout,
+  handleSelect,
+  canScreenshare,
+}: LayoutSelectorProps & {
+  handleSelect: (index: number) => void;
+  canScreenshare: (key: string) => boolean;
+}) => {
+  return (
+    <DropDownSelect
+      icon={LayoutMap[selectedLayout].icon || 'grid'}
+      defaultSelectedIndex={Object.keys(LayoutMap).findIndex(
+        (k) => k === selectedLayout,
+      )}
+      defaultSelectedLabel={LayoutMap[selectedLayout].title}
+      handleSelect={handleSelect}
+    >
+      {(Object.keys(LayoutMap) as Array<keyof typeof LayoutMap>)
+        .filter((key) => !canScreenshare(key))
+        .map((key) => (
+          <DropDownSelectOption
+            key={key}
+            selected={key === selectedLayout}
+            label={LayoutMap[key].title}
+            icon={LayoutMap[key].icon}
+          />
+        ))}
+    </DropDownSelect>
+  );
+};
 
 const Menu = ({
   onMenuItemClick: setLayout,
   selectedLayout,
+  visualType = LayoutSelectorType.DROPDOWN,
 }: LayoutSelectorProps) => {
   const { useHasOngoingScreenShare } = useCallStateHooks();
   const hasScreenShare = useHasOngoingScreenShare();
 
+  const canScreenshare = (key: string) =>
+    (hasScreenShare && (key === 'LegacyGrid' || key === 'PaginatedGrid')) ||
+    (!hasScreenShare && key === 'LegacySpeaker');
+
+  const handleSelect = useCallback(
+    (index: number) => {
+      const layout: keyof typeof LayoutMap | undefined = (
+        Object.keys(LayoutMap) as Array<keyof typeof LayoutMap>
+      ).find((_, k) => k === index);
+
+      if (layout) {
+        setLayout(layout);
+      }
+    },
+    [setLayout],
+  );
+
+  if (visualType === LayoutSelectorType.LIST) {
+    return (
+      <ListMenu
+        onMenuItemClick={setLayout}
+        selectedLayout={selectedLayout}
+        canScreenshare={canScreenshare}
+        handleSelect={handleSelect}
+      />
+    );
+  }
+
   return (
-    <GenericMenu>
-      {(Object.keys(LayoutMap) as Array<keyof typeof LayoutMap>).map((key) => (
-        <GenericMenuButtonItem
-          aria-selected={key === selectedLayout}
-          disabled={
-            (hasScreenShare &&
-              (key === 'LegacyGrid' || key === 'PaginatedGrid')) ||
-            (!hasScreenShare && key === 'LegacySpeaker')
-          }
-          onClick={() => {
-            setLayout(key);
-            localStorage.setItem(
-              SETTINGS_KEY,
-              JSON.stringify({ selectedLayout: key }),
-            );
-          }}
-          key={key}
-        >
-          {LayoutMap[key].title}
-        </GenericMenuButtonItem>
-      ))}
-    </GenericMenu>
+    <DropdownMenu
+      onMenuItemClick={setLayout}
+      selectedLayout={selectedLayout}
+      canScreenshare={canScreenshare}
+      handleSelect={handleSelect}
+    />
   );
 };
diff --git a/sample-apps/react/react-dogfood/components/Lobby.tsx b/sample-apps/react/react-dogfood/components/Lobby.tsx
index 6fbc68c972..aeeda504ab 100644
--- a/sample-apps/react/react-dogfood/components/Lobby.tsx
+++ b/sample-apps/react/react-dogfood/components/Lobby.tsx
@@ -1,58 +1,69 @@
-import { Box, Button, Stack, Typography } from '@mui/material';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useState } from 'react';
 import { signIn, useSession } from 'next-auth/react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import {
-  DeviceSelectorAudioInput,
-  ToggleAudioOutputButton,
+  Icon,
   ToggleAudioPreviewButton,
   ToggleVideoPreviewButton,
+  useCall,
   useCallStateHooks,
+  useConnectedUser,
   useI18n,
   VideoPreview,
 } from '@stream-io/video-react-sdk';
-import { AudioVolumeIndicator } from './AudioVolumeIndicator';
+import clsx from 'clsx';
+import Link from 'next/link';
+import Image from 'next/image';
+
+import { isAndroid, isIOS, isSafari } from 'mobile-device-detect';
+
 import { DisabledVideoPreview } from './DisabledVideoPreview';
-import { LobbyHeader } from './LobbyHeader';
-import { ParticipantsPreview } from './ParticipantsPreview';
-import { CallSettingsButton } from './CallSettingsButton';
-
-const subtitles = [
-  'Because we love seeing each other.',
-  'You look amazing today!',
-  'Everyone appreciates your work!',
-  'Thank you for being with us!',
-  'Your new haircut suits you well!',
-  'Did you tidy up your background?',
-];
-
-type LobbyProps = {
+import { LatencyMap } from './LatencyMap/LatencyMap';
+import { MobileAppBanner } from './MobileAppBanner';
+import { ToggleSettingsTabModal } from './Settings/SettingsTabModal';
+import { ToggleMicButton } from './ToggleMicButton';
+import { ToggleCameraButton } from './ToggleCameraButton';
+import { ToggleParticipantsPreviewButton } from './ToggleParticipantsPreview';
+
+import { useEdges } from '../hooks/useEdges';
+import { DefaultAppHeader } from './DefaultAppHeader';
+import { useLayoutSwitcher } from '../hooks';
+import {
+  useIsDemoEnvironment,
+  useIsProntoEnvironment,
+} from '../context/AppEnvironmentContext';
+
+export type UserMode = 'regular' | 'guest' | 'anon';
+
+export type LobbyProps = {
   onJoin: () => void;
-  callId?: string;
-  enablePreview?: boolean;
+  mode?: UserMode;
 };
-export const Lobby = ({ onJoin, callId, enablePreview = true }: LobbyProps) => {
+
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
+export const Lobby = ({ onJoin, mode = 'regular' }: LobbyProps) => {
+  const call = useCall();
   const { data: session, status } = useSession();
-  const { useSpeakerState, useMicrophoneState, useCameraState } =
+  const { useMicrophoneState, useCameraState, useCallSession, useCallMembers } =
     useCallStateHooks();
   const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
-  const { hasBrowserPermission: hasCameraPermission } = useCameraState();
-  const { isDeviceSelectionSupported } = useSpeakerState();
+  const { hasBrowserPermission: hasCameraPermission, isMute: isCameraMute } =
+    useCameraState();
+  const callSession = useCallSession();
+  const members = useCallMembers();
+  const currentUser = useConnectedUser();
+
   const { t } = useI18n();
+  const { edges } = useEdges();
+
+  const { layout, setLayout } = useLayoutSwitcher();
 
-  const router = useRouter();
   useEffect(() => {
     if (status === 'unauthenticated') {
       void signIn();
     }
   }, [status]);
 
-  const subtitle = useMemo(
-    () => subtitles[Math.round(Math.random() * (subtitles.length - 1))],
-    [],
-  );
-
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_SKIP_LOBBY !== 'true') return;
     const id = setTimeout(() => {
@@ -63,98 +74,169 @@ export const Lobby = ({ onJoin, callId, enablePreview = true }: LobbyProps) => {
     };
   }, [onJoin]);
 
+  const isProntoEnvironment = useIsProntoEnvironment();
+  const isDemoEnvironment = useIsDemoEnvironment();
+  const [shouldRenderMobileAppBanner, setShouldRenderMobileAppBanner] =
+    useState(isDemoEnvironment && (isAndroid || (isIOS && !isSafari)));
+
+  const [isRequestToJoinCallSent, setIsRequestToJoinCallSent] = useState(false);
+  const isCurrentUserCallMember = members.some(
+    (m) => m.user_id === currentUser?.id,
+  );
+
   if (!session) {
     return null;
   }
 
   const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
+  const hasOtherParticipants = callSession?.participants.length;
   return (
-    <Stack height={1}>
-      <LobbyHeader />
-      <Stack
-        direction="column"
-        justifyContent="center"
-        alignItems="center"
-        spacing={2}
-        flexGrow={1}
-        paddingBottom="45px"
-      >
-        <ParticipantsPreview />
-        <Stack spacing={2} alignItems="center">
-          <Box padding={2}>
-            <Typography variant="h2" textAlign="center">
-              Stream Meetings
-            </Typography>
-
-            <Typography textAlign="center" variant="subtitle1">
-              {subtitle}
-            </Typography>
-            {enablePreview && (
-              <VideoPreview
-                DisabledVideoPreview={
-                  hasBrowserMediaPermission
-                    ? DisabledVideoPreview
-                    : AllowBrowserPermissions
-                }
-              />
+    <>
+      <DefaultAppHeader transparent />
+      <div className="rd__lobby">
+        <LatencyMap sourceData={edges} />
+        <div className="rd__lobby-container">
+          <div className="rd__lobby-content">
+            {mode !== 'anon' && (
+              <>
+                <h1 className="rd__lobby-heading">
+                  {t('Set up your call before joining')}
+                </h1>
+                <p className="rd__lobby-heading__description">
+                  {t(
+                    'while our Edge Network is selecting the best server for your call...',
+                  )}
+                </p>
+                <div
+                  className={clsx(
+                    'rd__lobby-camera',
+                    isCameraMute && 'rd__lobby-camera--off',
+                  )}
+                >
+                  <div className="rd__lobby-video-preview">
+                    <VideoPreview
+                      DisabledVideoPreview={
+                        hasBrowserMediaPermission
+                          ? DisabledVideoPreview
+                          : AllowBrowserPermissions
+                      }
+                    />
+                    <div className="rd__lobby-media-toggle">
+                      <ToggleAudioPreviewButton />
+                      <ToggleVideoPreviewButton />
+                    </div>
+                  </div>
+                  <div className="rd__lobby-controls">
+                    <div className="rd__lobby-media">
+                      <ToggleMicButton />
+                      <ToggleCameraButton />
+                    </div>
+
+                    <div className="rd__lobby-settings">
+                      <ToggleParticipantsPreviewButton onJoin={onJoin} />
+
+                      <ToggleSettingsTabModal
+                        layoutProps={{
+                          selectedLayout: layout,
+                          onMenuItemClick: setLayout,
+                        }}
+                        tabModalProps={{
+                          inMeeting: false,
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </>
             )}
-            {enablePreview && (
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  gap: '0.5rem',
-                  marginTop: '0.75rem',
+
+            <div className="rd__lobby-edge-network">
+              <Image
+                src={`${
+                  process.env.NEXT_PUBLIC_BASE_PATH || ''
+                }/lock-person.svg`}
+                alt="Stream logo"
+                priority={false}
+                width={36}
+                height={24}
+              />
+              <p className="rd__lobby-edge-network__description">
+                You are about to {hasOtherParticipants ? 'join' : 'start '} a
+                private test call via Stream. Once you{' '}
+                {hasOtherParticipants ? 'join' : 'start '} the call, you can
+                invite other participants.
+              </p>
+            </div>
+
+            {call && call.type === 'restricted' && !isCurrentUserCallMember ? (
+              <button
+                className={clsx(
+                  'rd__button rd__button--primary rd__button--large rd__lobby-join',
+                  isRequestToJoinCallSent && 'rd__button--disabled',
+                )}
+                type="button"
+                data-testid="request-join-call-button"
+                disabled={isRequestToJoinCallSent}
+                onClick={async () => {
+                  // TODO OL: replace with a call action
+                  await call?.sendCustomEvent({
+                    type: 'pronto.request-to-join-call',
+                  });
+                  setIsRequestToJoinCallSent(true);
                 }}
               >
-                <ToggleAudioPreviewButton Menu={LobbyToggleAudioMenu} />
-                <ToggleVideoPreviewButton />
-                {isDeviceSelectionSupported && <ToggleAudioOutputButton />}
+                <Icon className="rd__button__icon" icon="login" />
+                Request to join
+              </button>
+            ) : (
+              <button
+                className="rd__button rd__button--primary rd__button--large rd__lobby-join"
+                type="button"
+                data-testid="join-call-button"
+                onClick={onJoin}
+              >
+                <Icon className="rd__button__icon" icon="login" />
+                {hasOtherParticipants ? t('Join') : t('Start call')}
+              </button>
+            )}
+
+            {isProntoEnvironment && (
+              <div className="rd__lobby__user-modes">
+                {mode === 'regular' && (
+                  <Link
+                    href={`${basePath}/guest/?callId=${call?.id}`}
+                    className="rd__link  rd__link--faux-button"
+                    children="Continue as Guest or Anonymous"
+                  />
+                )}
+                {(mode === 'guest' || mode === 'anon') && (
+                  <Link
+                    href={`${basePath}/join/${call?.id}`}
+                    className="rd__link  rd__link--faux-button"
+                    children="Continue with Regular User"
+                  />
+                )}
               </div>
             )}
-          </Box>
-          <Box display="flex" flexDirection="row" gap="8px">
-            <Button
-              style={{ width: '200px' }}
-              data-testid="join-call-button"
-              variant="contained"
-              onClick={onJoin}
-            >
-              {t('Join')}
-            </Button>
-            <CallSettingsButton />
-          </Box>
-          {!router.pathname.includes('/guest') ? (
-            <Link href={`/guest?callId=${callId}`}>
-              <Button>Join as guest or anonymously</Button>
-            </Link>
-          ) : (
-            <Link href={`/join/${callId}`}>
-              <Button>Join with your Stream Account</Button>
-            </Link>
+          </div>
+          {shouldRenderMobileAppBanner && call && (
+            <MobileAppBanner
+              callId={call.id}
+              platform={isAndroid ? 'android' : 'ios'}
+              onDismiss={() => setShouldRenderMobileAppBanner(false)}
+            />
           )}
-        </Stack>
-      </Stack>
-    </Stack>
+        </div>
+      </div>
+    </>
   );
 };
 
-const LobbyToggleAudioMenu = () => (
-  <>
-    <DeviceSelectorAudioInput />
-    <AudioVolumeIndicator />
-  </>
-);
-
 const AllowBrowserPermissions = () => {
   return (
-    <Box display="flex" flexDirection="column" gap={2} padding="0 15px">
-      <Typography variant="h5">
-        Allow your browser to access your camera and microphone.
-      </Typography>
-      <Typography variant="body2">
-        Pronto needs access to your camera and microphone for the call.
-      </Typography>
-    </Box>
+    <p className="rd__lobby__no-permission">
+      Please grant your browser a permission to access your camera and
+      microphone.
+    </p>
   );
 };
diff --git a/sample-apps/react/react-dogfood/components/LobbyHeader.tsx b/sample-apps/react/react-dogfood/components/LobbyHeader.tsx
index cbf860b835..015a87ad76 100644
--- a/sample-apps/react/react-dogfood/components/LobbyHeader.tsx
+++ b/sample-apps/react/react-dogfood/components/LobbyHeader.tsx
@@ -1,155 +1,86 @@
-import { MouseEvent, useState } from 'react';
+import { forwardRef } from 'react';
 import { signOut, useSession } from 'next-auth/react';
 import Image from 'next/image';
 import Link from 'next/link';
-import Avatar from '@mui/material/Avatar';
-import { Box, Button, Link as MuiLink, Stack, Tooltip } from '@mui/material';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Logout from '@mui/icons-material/Logout';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import SearchIcon from '@mui/icons-material/Search';
-import SubjectIcon from '@mui/icons-material/Subject';
-import SettingsIcon from '@mui/icons-material/Settings';
-import { USAGE_GUIDE_LINK } from './index';
-import { useSettings } from '../context/SettingsContext';
-import { useI18n } from '@stream-io/video-react-sdk';
 
-export const LobbyHeader = () => {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        p: '.75rem',
-      }}
-    >
-      <HomeButton />
-      <Navbar />
-      <UserInfo />
-    </Box>
-  );
-};
+import { LanguageMenu } from './Settings/LanguageMenu';
+import { useLanguage } from '../hooks/useLanguage';
+import { useIsProntoEnvironment } from '../context/AppEnvironmentContext';
+
+import { Icon, MenuToggle } from '@stream-io/video-react-sdk';
 
 export const HomeButton = () => (
   <Link href="/" data-testid="home-button">
-    <Image src="/stream-logo.svg" alt="Stream logo" width={42} height={42} />
+    <Image
+      src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/stream-logo.png`}
+      alt="Stream logo"
+      priority={false}
+      width={36}
+      height={24}
+    />
   </Link>
 );
 
-const Navbar = () => {
-  const { t } = useI18n();
-  const navbarLinkStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.25rem',
-    color: '#fff',
-    fontWeight: '500',
-    fontSize: '1rem',
-    textTransform: 'uppercase',
-  };
-
+export const UserMenu = () => {
+  const { setLanguage } = useLanguage();
+  const isProntoEnvironment = useIsProntoEnvironment();
   return (
-    <Box
-      sx={{
-        flex: 1,
-        display: 'flex',
-        alignItems: 'center',
-        gap: '1.75rem',
-        paddingInline: '3rem;',
-      }}
-    >
-      <Tooltip title={t("Learn about the app's capabilities and shortcomings")}>
-        <MuiLink href={USAGE_GUIDE_LINK} target="_blank" sx={navbarLinkStyle}>
-          <SubjectIcon /> {t('Guide')}
-        </MuiLink>
-      </Tooltip>
-      <Tooltip title={t('Search, share & download call recordings')}>
-        <MuiLink href="/call-recordings" sx={navbarLinkStyle}>
-          <SearchIcon /> {t('Recordings')}
-        </MuiLink>
-      </Tooltip>
-    </Box>
+    <div className="rd__user-session__menu">
+      <ul className="rd__user-session__menu-list">
+        {isProntoEnvironment && (
+          <li className="rd__user-session__menu-item">
+            <LanguageMenu setLanguage={setLanguage} />
+          </li>
+        )}
+        <li className="rd__user-session__menu-item">
+          <button
+            className="rd__button rd__user-session__menu-button"
+            onClick={() => {
+              const url = new URL(window.location.href);
+              url.pathname = process.env.NEXT_PUBLIC_BASE_PATH || '';
+              signOut({ callbackUrl: url.toString() }).catch((err) => {
+                console.error('Sign out error', err);
+              });
+            }}
+          >
+            <Icon
+              className="rd__button__icon rd__user-session__menu-icon"
+              icon="logout"
+            />
+            Logout
+          </button>
+        </li>
+      </ul>
+    </div>
   );
 };
 
-const UserInfo = () => {
-  const { data: theSession } = useSession();
-  const { setOpen } = useSettings();
-  const { t } = useI18n();
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
+export const UserInfo = () => {
+  return <ToggleLogoutButton />;
+};
 
-  if (!theSession || !theSession.user) {
-    return null;
-  }
+const ToggleMenuButton = forwardRef<HTMLDivElement>(function ToggleMenuButton(
+  props,
+  ref,
+) {
+  const { data: theSession } = useSession();
+  if (!theSession || !theSession.user) return null;
+  return (
+    <div className="rd__user-session" ref={ref}>
+      <div className="rd__user-session__container">
+        <div className="rd__user-session__user">
+          <p className="rd__user-session__name">{theSession.user.name}</p>
+          <p className="rd__user-session__email">{theSession.user.email}</p>
+        </div>
+      </div>
+    </div>
+  );
+});
 
+const ToggleLogoutButton = () => {
   return (
-    <Stack
-      direction="row"
-      gap={2}
-      display={'flex'}
-      alignItems={'center'}
-      sx={{ alignItems: 'center' }}
-    >
-      <Stack sx={{ textAlign: 'end' }}>
-        <Box sx={{ fontSize: '.875rem' }} data-testid="username">
-          {theSession.user.name}
-        </Box>
-        <Box sx={{ fontSize: '0.75rem' }} data-testid="username">
-          {theSession.user.email}
-        </Box>
-      </Stack>
-      <Button
-        onClick={handleClick}
-        sx={{ padding: 0, margin: 0, width: 'fit-content', minWidth: 'unset' }}
-      >
-        <Avatar src={theSession.user.image || undefined} />
-      </Button>
-      <Menu
-        anchorEl={anchorEl}
-        id="account-menu"
-        open={open}
-        onClose={handleClose}
-        onClick={handleClose}
-        PaperProps={{
-          elevation: 0,
-          sx: {
-            overflow: 'visible',
-            filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-            mt: 1.5,
-            // color: '#fff',
-            // background: '#45484d',
-          },
-        }}
-        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-      >
-        <MenuItem onClick={() => setOpen(true)}>
-          <ListItemIcon>
-            <SettingsIcon sx={{ fill: '#9e9e9e' }} fontSize="small" />
-          </ListItemIcon>
-          {t('Settings')}
-        </MenuItem>
-        <MenuItem
-          // sx={{ '&:hover': { background: '#2f2f2f' } }}
-          onClick={() => {
-            signOut();
-            handleClose();
-          }}
-        >
-          <ListItemIcon>
-            <Logout sx={{ fill: '#9e9e9e' }} fontSize="small" />
-          </ListItemIcon>
-          {t('Logout')}
-        </MenuItem>
-      </Menu>
-    </Stack>
+    <MenuToggle placement="bottom-end" ToggleButton={ToggleMenuButton}>
+      <UserMenu />
+    </MenuToggle>
   );
 };
diff --git a/sample-apps/react/react-dogfood/components/MeetingUI.tsx b/sample-apps/react/react-dogfood/components/MeetingUI.tsx
index 8f12d14ba2..577bbd0e0a 100644
--- a/sample-apps/react/react-dogfood/components/MeetingUI.tsx
+++ b/sample-apps/react/react-dogfood/components/MeetingUI.tsx
@@ -3,41 +3,18 @@ import { JSX, useCallback, useEffect, useState } from 'react';
 import Gleap from 'gleap';
 import {
   CallingState,
-  CallParticipantsList,
-  CallStatsButton,
-  CancelCallButton,
-  CompositeButton,
   defaultSortPreset,
-  IconButton,
   LoadingIndicator,
   noopComparator,
-  PermissionRequests,
-  ReactionsButton,
-  RecordCallButton,
-  ScreenShareButton,
-  SpeakingWhileMutedNotification,
-  ToggleAudioPublishingButton,
-  ToggleVideoPublishingButton,
   useCall,
   useCallStateHooks,
   usePersistedDevicePreferences,
 } from '@stream-io/video-react-sdk';
 
-import { Lobby } from './Lobby';
-import { Box, Button, Stack, Typography } from '@mui/material';
+import { Lobby, UserMode } from './Lobby';
 import { StreamChat } from 'stream-chat';
-
-import {
-  ChatUI,
-  ChatWrapper,
-  NewMessageNotification,
-  UnreadCountBadge,
-} from '.';
-import { ActiveCallHeader } from './ActiveCallHeader';
-import { useKeyboardShortcuts, useWakeLock, useWatchChannel } from '../hooks';
-import { DEFAULT_LAYOUT, getLayoutSettings, LayoutMap } from './LayoutSelector';
-import { Stage } from './Stage';
-import { ToggleParticipantListButton } from './ToggleParticipantListButton';
+import { useKeyboardShortcuts, useWakeLock } from '../hooks';
+import { ActiveCall } from './ActiveCall';
 
 const contents = {
   'error-join': {
@@ -50,9 +27,9 @@ const contents = {
 
 type MeetingUIProps = {
   chatClient?: StreamChat | null;
-  enablePreview?: boolean;
+  mode?: UserMode;
 };
-export const MeetingUI = ({ chatClient, enablePreview }: MeetingUIProps) => {
+export const MeetingUI = ({ chatClient, mode }: MeetingUIProps) => {
   const [show, setShow] = useState<
     'lobby' | 'error-join' | 'error-leave' | 'loading' | 'active-call'
   >('lobby');
@@ -61,60 +38,60 @@ export const MeetingUI = ({ chatClient, enablePreview }: MeetingUIProps) => {
   const activeCall = useCall();
   const { useCallCallingState } = useCallStateHooks();
   const callState = useCallCallingState();
-  const [showParticipants, setShowParticipants] = useState(false);
-  const [showChat, setShowChat] = useState(false);
-  const [layout, setLayout] = useState<keyof typeof LayoutMap>(() => {
-    const storedLayout = getLayoutSettings()?.selectedLayout;
-
-    if (!storedLayout) return DEFAULT_LAYOUT;
-
-    return Object.hasOwn(LayoutMap, storedLayout)
-      ? storedLayout
-      : DEFAULT_LAYOUT;
-  });
-
-  const showSidebar = showParticipants || showChat;
 
-  // FIXME: could be replaced with "notification.message_new" but users would have to be at least members
-  // possible fix with "allow to join" permissions in place (expensive?)
-  const channelWatched = useWatchChannel({
-    chatClient,
-    channelId: activeCall?.id,
-  });
-
-  const onJoin = useCallback(async () => {
-    setShow('loading');
-    try {
-      const preferredCodec = router.query['video_codec'];
-      if (typeof preferredCodec === 'string') {
-        activeCall?.camera.setPreferredCodec(preferredCodec);
+  const onJoin = useCallback(
+    async ({ fastJoin = false } = {}) => {
+      if (!fastJoin) setShow('loading');
+      try {
+        const preferredCodec = router.query['video_codec'];
+        if (typeof preferredCodec === 'string') {
+          activeCall?.camera.setPreferredCodec(preferredCodec);
+        }
+        await activeCall?.join({ create: true });
+        setShow('active-call');
+      } catch (e) {
+        console.error(e);
+        setLastError(e as Error);
+        setShow('error-join');
       }
-      await activeCall?.join({ create: true });
-      setShow('active-call');
-    } catch (e) {
-      console.error(e);
-      setLastError(e as Error);
-      setShow('error-join');
-    }
-  }, [activeCall, router]);
+    },
+    [activeCall, router],
+  );
 
-  const onLeave = useCallback(async () => {
-    setShow('loading');
-    try {
-      await router.push('/');
-    } catch (e) {
-      console.error(e);
-      setLastError(e as Error);
-      setShow('error-leave');
-    }
-  }, [router]);
+  const onLeave = useCallback(
+    async ({ withFeedback = true }: { withFeedback?: boolean } = {}) => {
+      if (!withFeedback) return;
+      setShow('loading');
+      try {
+        await router.push(`/leave/${activeCall?.id}`);
+      } catch (e) {
+        console.error(e);
+        setLastError(e as Error);
+        setShow('error-leave');
+      }
+    },
+    [router, activeCall?.id],
+  );
 
   useEffect(() => {
     if (callState === CallingState.LEFT) {
-      void onLeave();
+      onLeave({ withFeedback: false }).catch(console.error);
     }
   }, [callState, onLeave]);
 
+  useEffect(() => {
+    if (!activeCall) return;
+    return activeCall.on('call.ended', async (e) => {
+      if (e.type !== 'call.ended' || !e.user) return;
+      if (e.user.id === activeCall.currentUserId) return;
+      alert(`Call ended for everyone by: ${e.user.name || e.user.id}`);
+      if (activeCall.state.callingState !== CallingState.LEFT) {
+        await activeCall.leave();
+      }
+      setShow('lobby');
+    });
+  }, [activeCall, router]);
+
   useEffect(() => {
     const handlePageLeave = async () => {
       if (
@@ -156,13 +133,7 @@ export const MeetingUI = ({ chatClient, enablePreview }: MeetingUIProps) => {
       />
     );
   } else if (show === 'lobby') {
-    ComponentToRender = (
-      <Lobby
-        onJoin={onJoin}
-        callId={activeCall?.id}
-        enablePreview={enablePreview}
-      />
-    );
+    ComponentToRender = <Lobby onJoin={onJoin} mode={mode} />;
   } else if (show === 'loading') {
     ComponentToRender = <LoadingScreen />;
   } else if (!activeCall) {
@@ -175,83 +146,12 @@ export const MeetingUI = ({ chatClient, enablePreview }: MeetingUIProps) => {
     );
   } else {
     ComponentToRender = (
-      <div className="str-video__call">
-        <div className="str-video__main-call-panel">
-          <ActiveCallHeader
-            selectedLayout={layout}
-            onMenuItemClick={setLayout}
-          />
-          <PermissionRequests />
-          <Stage selectedLayout={layout} />
-          <div
-            className="str-video__call-controls"
-            data-testid="str-video__call-controls"
-          >
-            <div className="str-video__call-controls--group">
-              <RecordCallButton />
-              <ScreenShareButton />
-              <ReactionsButton />
-            </div>
-            <div className="str-video__call-controls--group">
-              <SpeakingWhileMutedNotification>
-                <ToggleAudioPublishingButton />
-              </SpeakingWhileMutedNotification>
-              <ToggleVideoPublishingButton />
-              <CancelCallButton onLeave={onLeave} />
-            </div>
-            <div className="str-video__call-controls--group">
-              <CallStatsButton />
-              <ToggleParticipantListButton
-                enabled={showParticipants}
-                onClick={() => setShowParticipants((prev) => !prev)}
-              />
-              <NewMessageNotification
-                chatClient={chatClient}
-                channelWatched={channelWatched}
-                disableOnChatOpen={showChat}
-              >
-                <div className="str-chat__chat-button__wrapper">
-                  <CompositeButton caption="Chat" active={showChat}>
-                    <IconButton
-                      enabled={showChat}
-                      disabled={!chatClient}
-                      onClick={() => setShowChat((prev) => !prev)}
-                      icon="chat"
-                    />
-                  </CompositeButton>
-                  {!showChat && (
-                    <UnreadCountBadge
-                      channelWatched={channelWatched}
-                      chatClient={chatClient}
-                      channelId={activeCall.id}
-                    />
-                  )}
-                </div>
-              </NewMessageNotification>
-            </div>
-          </div>
-        </div>
-        {showSidebar && (
-          <div className="str-video__sidebar">
-            {showParticipants && (
-              <CallParticipantsList
-                onClose={() => setShowParticipants(false)}
-              />
-            )}
-
-            <ChatWrapper chatClient={chatClient}>
-              {showChat && (
-                <div className="str-video__chat">
-                  <ChatUI
-                    onClose={() => setShowChat(false)}
-                    channelId={activeCall.id}
-                  />
-                </div>
-              )}
-            </ChatWrapper>
-          </div>
-        )}
-      </div>
+      <ActiveCall
+        activeCall={activeCall}
+        chatClient={chatClient}
+        onLeave={onLeave}
+        onJoin={onJoin}
+      />
     );
   }
 
@@ -271,54 +171,47 @@ const ErrorPage = ({
   onClickLobby,
   error,
 }: ErrorPageProps) => (
-  <Stack height={1} justifyContent="center" alignItems="center" gap={5}>
-    <div>
-      <Typography variant="h2" textAlign="center">
-        {heading}
-      </Typography>
-      <Typography variant="subtitle1" textAlign="center">
+  <div className="rd__error">
+    <div className="rd__error__container">
+      <h1 className="rd__error__header">{heading}</h1>
+      <div className="rd__error__content">
         {error?.stack && (
-          <Box
-            textAlign="left"
-            fontFamily="Monospace"
-            color="#d32f2f"
-            fontSize="0.75rem"
-          >
+          <div className="rd__error__message">
             <pre>{error.stack}</pre>
-          </Box>
+          </div>
         )}
-        (see the console for more info)
-      </Typography>
-    </div>
-    <Stack direction="row" gap={2}>
-      <Button
-        data-testid="return-home-button"
-        variant="contained"
-        onClick={onClickHome}
-      >
-        Return home
-      </Button>
-
-      <Button
-        data-testid="return-home-button"
-        variant="contained"
-        onClick={onClickLobby}
-      >
-        Back to lobby
-      </Button>
+        <p>(see the console for more info)</p>
+      </div>
 
-      <Button
-        data-testid="report-issue-button"
-        variant="contained"
-        color="error"
-        onClick={() => {
-          Gleap.startFeedbackFlow('bugreporting');
-        }}
-      >
-        Report an issue
-      </Button>
-    </Stack>
-  </Stack>
+      <div className="rd__error__actions">
+        <button
+          data-testid="return-home-button"
+          className="rd__button rd__button--primary"
+          onClick={onClickHome}
+        >
+          Return home
+        </button>
+
+        <button
+          data-testid="return-home-button"
+          className="rd__button rd__button--secondary"
+          onClick={onClickLobby}
+        >
+          Back to lobby
+        </button>
+
+        <button
+          data-testid="report-issue-button"
+          className="rd__button"
+          onClick={() => {
+            Gleap.startFeedbackFlow('bugreporting');
+          }}
+        >
+          Report an issue
+        </button>
+      </div>
+    </div>
+  </div>
 );
 
 export const LoadingScreen = () => {
diff --git a/sample-apps/react/react-dogfood/components/MobileAppBanner.tsx b/sample-apps/react/react-dogfood/components/MobileAppBanner.tsx
new file mode 100644
index 0000000000..b36ab222bd
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/MobileAppBanner.tsx
@@ -0,0 +1,69 @@
+import { Icon } from '@stream-io/video-react-sdk';
+
+export const MobileAppBanner = (props: {
+  callId: string;
+  platform: 'ios' | 'android';
+  onDismiss?: () => void;
+}) => {
+  const { callId, platform, onDismiss } = props;
+  const platformLinks: Record<
+    'android' | 'ios',
+    { label: string; url: string; active: boolean }[]
+  > = {
+    android: [
+      {
+        label: 'Try Android',
+        url: `https://play.google.com/store/apps/details?id=io.getstream.video.android&referrer=${encodeURIComponent(
+          `call_id=${callId}`,
+        )}`,
+        active: true,
+      },
+      { label: 'React Native', url: '#', active: false },
+      { label: 'Flutter', url: '#', active: false },
+    ],
+    ios: [
+      {
+        label: 'Try iOS',
+        url: 'https://apps.apple.com/us/app/stream-video-calls/id1644313060',
+        active: true,
+      },
+      // { label: 'React Native', url: '#', active: false },
+      // { label: 'Flutter', url: '#', active: false },
+    ],
+  };
+
+  return (
+    <div className="rd__try-native">
+      <img
+        className="rd__try-native__logo"
+        alt="logo"
+        src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/home.png`}
+      />
+      <h2 className="rd__try-native__title">Try Native Demo!</h2>
+      <p className="rd__try-native__info-text">
+        We see you are using a mobile device. Why don’t you give it a try on one
+        of our native mobile apps:
+      </p>
+      {(platformLinks[platform] || [])
+        .filter((app) => app.active)
+        .map((link) => (
+          <a
+            key={link.label}
+            className="rd__button rd__button--primary"
+            href={link.url}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Icon className="rd__button__icon" icon="login" />
+            {link.label}
+          </a>
+        ))}
+      <button
+        className="rd__try-native__use-browser rd__button rd__button--secondary"
+        onClick={onDismiss}
+      >
+        Continue With Browser
+      </button>
+    </div>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ParticipantsPreview.tsx b/sample-apps/react/react-dogfood/components/ParticipantsPreview.tsx
deleted file mode 100644
index a659969dfa..0000000000
--- a/sample-apps/react/react-dogfood/components/ParticipantsPreview.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
-  Avatar,
-  CallPreview,
-  useCallStateHooks,
-} from '@stream-io/video-react-sdk';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  Stack,
-  Typography,
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-export const ParticipantsPreview = () => {
-  const { useCallSession, useCallThumbnail } = useCallStateHooks();
-  const session = useCallSession();
-  const thumbnail = useCallThumbnail();
-
-  if (!session?.participants || session?.participants.length === 0) return null;
-  return (
-    <Stack direction="row">
-      <Box>
-        <Accordion defaultExpanded sx={{ boxShadow: 'none' }}>
-          <AccordionSummary
-            expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
-          >
-            <Typography variant="body1">
-              Already in this call ({session.participants.length}):
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Stack
-              direction="row"
-              gap="0.5rem"
-              flexWrap="wrap"
-              sx={{
-                overflowY: 'auto',
-              }}
-            >
-              {session.participants.map((participant) => {
-                const displayName =
-                  participant.user.name ??
-                  participant.user.id ??
-                  'Unknown user';
-                return (
-                  <Stack
-                    alignItems="center"
-                    gap="8px"
-                    key={participant.user_session_id}
-                  >
-                    <Avatar
-                      name={displayName}
-                      imageSrc={participant.user.image}
-                    />
-                    <Typography variant="caption">{displayName}</Typography>
-                  </Stack>
-                );
-              })}
-            </Stack>
-          </AccordionDetails>
-        </Accordion>
-      </Box>
-      {thumbnail && (
-        <Box>
-          <Accordion defaultExpanded sx={{ boxShadow: 'none' }}>
-            <AccordionSummary
-              expandIcon={<ExpandMoreIcon style={{ color: 'white' }} />}
-            >
-              <Typography variant="body1">
-                Sneak-peek inside the call:
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-              <CallPreview style={{ width: '240px', height: '135px' }} />
-            </AccordionDetails>
-          </Accordion>
-        </Box>
-      )}
-    </Stack>
-  );
-};
diff --git a/sample-apps/react/react-dogfood/components/Settings/LanguageMenu.tsx b/sample-apps/react/react-dogfood/components/Settings/LanguageMenu.tsx
index a288e9de3d..6479b268f6 100644
--- a/sample-apps/react/react-dogfood/components/Settings/LanguageMenu.tsx
+++ b/sample-apps/react/react-dogfood/components/Settings/LanguageMenu.tsx
@@ -1,13 +1,10 @@
-import { SettingsController } from './SettingsDialog';
-import { TranslationLanguage } from '@stream-io/video-react-sdk';
-import { Settings } from '../../context/SettingsContext';
+import { useCallback } from 'react';
+
 import {
-  FormControl,
-  MenuItem,
-  Select,
-  Stack,
-  Typography,
-} from '@mui/material';
+  DropDownSelect,
+  DropDownSelectOption,
+  TranslationLanguage,
+} from '@stream-io/video-react-sdk';
 
 const LANGUAGES: Record<TranslationLanguage, string> = {
   de: 'German',
@@ -15,31 +12,33 @@ const LANGUAGES: Record<TranslationLanguage, string> = {
   es: 'Spanish',
 };
 
-export type LanguageMenuProps = Pick<SettingsController, 'setLanguage'> &
-  Pick<Settings, 'language'>;
+export type LanguageMenuProps = {
+  setLanguage: (lng: string) => void;
+};
+
+export const LanguageMenu = ({ setLanguage }: LanguageMenuProps) => {
+  const handleSelect = useCallback(
+    (index: number) => {
+      const selected = Object.keys(LANGUAGES)[index];
+      setLanguage(selected);
+    },
+    [setLanguage],
+  );
 
-export const LanguageMenu = ({ language, setLanguage }: LanguageMenuProps) => {
   return (
-    <Stack>
-      <Typography variant="caption" color="#72767e">
-        Language of the Meeting
-      </Typography>
-      <FormControl fullWidth>
-        <Select
-          value={language?.split('-')[0]}
-          label="Language"
-          onChange={(e) => {
-            setLanguage(e.target.value);
-          }}
-          sx={{ fontSize: '0.875rem' }}
-        >
-          {Object.entries(LANGUAGES).map(([lngCode, languageName]) => (
-            <MenuItem key={`settings-language-${lngCode}`} value={lngCode}>
-              {languageName}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    </Stack>
+    <DropDownSelect
+      icon="language"
+      defaultSelectedIndex={0}
+      defaultSelectedLabel="English"
+      handleSelect={handleSelect}
+    >
+      {Object.entries(LANGUAGES).map(([lngCode, languageName]) => (
+        <DropDownSelectOption
+          key={lngCode}
+          label={languageName}
+          icon="language"
+        />
+      ))}
+    </DropDownSelect>
   );
 };
diff --git a/sample-apps/react/react-dogfood/components/Settings/SettingsDialog.tsx b/sample-apps/react/react-dogfood/components/Settings/SettingsDialog.tsx
deleted file mode 100644
index 093ad908e2..0000000000
--- a/sample-apps/react/react-dogfood/components/Settings/SettingsDialog.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useState } from 'react';
-import Dialog from '@mui/material/Dialog';
-import { Box, Stack } from '@mui/material';
-import TranslateIcon from '@mui/icons-material/Translate';
-import clsx from 'clsx';
-import { LanguageMenu } from './LanguageMenu';
-import { Settings } from '../../context/SettingsContext';
-
-const CATEGORIES = [{ name: 'language', Icon: TranslateIcon }] as const;
-export type SettingsCategory = (typeof CATEGORIES)[number]['name'];
-
-export type SettingsController = {
-  setLanguage: (lng: string) => void;
-};
-
-export interface SettingsDialogProps {
-  open: boolean;
-  onClose: () => void;
-  controller: SettingsController;
-  settings: Settings;
-}
-
-export const SettingsDialog = (props: SettingsDialogProps) => {
-  const { onClose, open, controller, settings } = props;
-  const { setLanguage } = controller;
-  const { language } = settings;
-  const [activeTab, setTab] = useState<SettingsCategory>(CATEGORIES[0].name);
-
-  return (
-    <Dialog onClose={onClose} open={open}>
-      <Stack sx={{ width: '500px', height: '300px' }}>
-        <Stack direction="row" sx={{ height: '100%' }}>
-          <Stack
-            sx={{
-              borderRight: '1px solid #eee',
-              overflowY: 'auto',
-              paddingRight: '0.5rem',
-            }}
-          >
-            <Box
-              sx={{
-                padding: '1rem',
-                fontSize: '1.5rem',
-                fontWeight: '300',
-              }}
-            >
-              Settings
-            </Box>
-            {CATEGORIES.map(({ name, Icon }) => (
-              <Box
-                sx={{
-                  padding: '1rem 1.75rem 1rem 1rem',
-                  cursor: 'pointer',
-                  fontSize: '0.875rem',
-                  textTransform: 'capitalize',
-                  borderRadius: '0 999px 999px 0',
-                  '&.rd_settings-tab-label--active': {
-                    background: '#337eff40',
-                    color: '#005fff',
-                  },
-                }}
-                className={clsx('rd_settings-tab-label', {
-                  'rd_settings-tab-label--active': name === activeTab,
-                })}
-                key={name}
-                onClick={() => {
-                  if (name !== activeTab) setTab(name);
-                }}
-              >
-                <Stack direction="row" gap={1}>
-                  <Icon sx={{ height: '1.25rem' }} />
-                  {name}
-                </Stack>
-              </Box>
-            ))}
-          </Stack>
-          <Stack
-            sx={{ padding: '2rem 1.5rem', overflowY: 'auto', flexGrow: 1 }}
-          >
-            {activeTab === 'language' && (
-              <LanguageMenu setLanguage={setLanguage} language={language} />
-            )}
-          </Stack>
-        </Stack>
-      </Stack>
-    </Dialog>
-  );
-};
diff --git a/sample-apps/react/react-dogfood/components/Settings/SettingsTabModal.tsx b/sample-apps/react/react-dogfood/components/Settings/SettingsTabModal.tsx
new file mode 100644
index 0000000000..b351b6d9c1
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/Settings/SettingsTabModal.tsx
@@ -0,0 +1,199 @@
+import {
+  Children,
+  forwardRef,
+  PropsWithChildren,
+  ReactElement,
+  useState,
+} from 'react';
+import clsx from 'clsx';
+
+import {
+  CallStats,
+  CompositeButton,
+  DeviceSelectorAudioInput,
+  DeviceSelectorAudioOutput,
+  DeviceSelectorVideo,
+  Icon,
+  IconButton,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+  useI18n,
+  useMenuContext,
+} from '@stream-io/video-react-sdk';
+
+import { LayoutSelector, LayoutSelectorProps } from '../LayoutSelector';
+import { LanguageMenu } from './LanguageMenu';
+import { CallRecordings } from '../CallRecordings';
+
+import { useLanguage } from '../../hooks/useLanguage';
+
+type ToggleSettingsTabModalProps = {
+  inMeeting: boolean;
+  activeTab?: number;
+};
+
+type SettingsTabModalProps = {
+  activeTab?: number;
+  children: ReactElement<TabWrapperProps> | ReactElement<TabWrapperProps>[];
+};
+
+type TabProps = {
+  active: boolean;
+  setActive: () => void;
+};
+
+type TabWrapperProps = {
+  icon: string;
+  label: string;
+  inMeeting?: boolean;
+};
+
+const Tab = ({ children, active, setActive }: PropsWithChildren<TabProps>) => {
+  return (
+    <div
+      className={clsx('rd__tab', {
+        'rd__tab--active': active,
+      })}
+      onClick={setActive}
+    >
+      {children}
+    </div>
+  );
+};
+
+const TabPanel = ({ children }: PropsWithChildren) => {
+  const { close } = useMenuContext();
+  return (
+    <div className="rd__tab-panel">
+      <div className="rd__tab-panel__header">
+        <h2 className="rd__tab-panel__heading">Settings</h2>
+        <IconButton
+          className="rd__tab-panel__close"
+          icon="close"
+          onClick={close}
+        />
+      </div>
+      <div className="rd__tab-panel__content">{children}</div>
+    </div>
+  );
+};
+
+const SettingsTabModal = ({
+  children,
+  activeTab = 0,
+}: SettingsTabModalProps) => {
+  const [active, setActive] = useState(activeTab);
+  return (
+    <div className="rd__tabmodal-container">
+      <div className="rd__tabmodal-sidebar">
+        <h2 className="rd__tabmodal-header">Settings</h2>
+        {Children.map(children, (child, index) => {
+          if (!child.props.inMeeting) return null;
+          return (
+            <Tab
+              key={index}
+              active={index === active}
+              setActive={() => setActive(index)}
+            >
+              <Icon className="rd__tab-icon" icon={child.props.icon} />
+              <span className="rd__tab-label">{child.props.label}</span>
+            </Tab>
+          );
+        })}
+      </div>
+      <div className="rd__tabmodal-content">
+        {Children.map(children, (child, index) => {
+          if (index !== active) return null;
+          return <TabPanel key={index}>{child}</TabPanel>;
+        })}
+      </div>
+    </div>
+  );
+};
+
+const TabWrapper = ({ children }: PropsWithChildren<TabWrapperProps>) => {
+  return children;
+};
+
+export const SettingsTabModalMenu = (props: {
+  tabModalProps: ToggleSettingsTabModalProps;
+  layoutProps: LayoutSelectorProps;
+}) => {
+  const { setLanguage } = useLanguage();
+  const { t } = useI18n();
+
+  const { tabModalProps, layoutProps } = props;
+
+  return (
+    <SettingsTabModal {...tabModalProps}>
+      <TabWrapper icon="device-settings" label={t('Device settings')} inMeeting>
+        <>
+          <DeviceSelectorVideo
+            visualType="dropdown"
+            title={t('Select a Camera')}
+          />
+          <DeviceSelectorAudioInput
+            visualType="dropdown"
+            title={t('Select a Mic')}
+          />
+          <DeviceSelectorAudioOutput
+            visualType="dropdown"
+            title={t('Select a Speaker')}
+          />
+        </>
+      </TabWrapper>
+      <TabWrapper icon="grid" label={t('Layout')} inMeeting>
+        <LayoutSelector
+          onMenuItemClick={layoutProps.onMenuItemClick}
+          selectedLayout={layoutProps.selectedLayout}
+        />
+      </TabWrapper>
+      <TabWrapper
+        icon="stats"
+        label={t('Statistics')}
+        inMeeting={tabModalProps.inMeeting}
+      >
+        <CallStats />
+      </TabWrapper>
+
+      <TabWrapper icon="language" label={t('Language')} inMeeting>
+        <LanguageMenu setLanguage={setLanguage} />
+      </TabWrapper>
+
+      <TabWrapper
+        icon="film-roll"
+        label={t('Recording library')}
+        inMeeting={tabModalProps.inMeeting}
+      >
+        <CallRecordings />
+      </TabWrapper>
+    </SettingsTabModal>
+  );
+};
+
+const ToggleSettingsMenuButton = forwardRef<
+  HTMLDivElement,
+  ToggleMenuButtonProps
+>(function ToggleSettingsMenuButton(props, ref) {
+  return (
+    <CompositeButton ref={ref} active={props.menuShown} variant="primary">
+      <Icon icon="device-settings" />
+    </CompositeButton>
+  );
+});
+
+export const ToggleSettingsTabModal = (props: {
+  tabModalProps: ToggleSettingsTabModalProps;
+  layoutProps: LayoutSelectorProps;
+}) => {
+  return (
+    <MenuToggle
+      placement="top-start"
+      ToggleButton={ToggleSettingsMenuButton}
+      visualType={MenuVisualType.PORTAL}
+    >
+      <SettingsTabModalMenu {...props} />
+    </MenuToggle>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/Settings/index.ts b/sample-apps/react/react-dogfood/components/Settings/index.ts
deleted file mode 100644
index 2c246e187d..0000000000
--- a/sample-apps/react/react-dogfood/components/Settings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SettingsDialog';
diff --git a/sample-apps/react/react-dogfood/components/Stage.tsx b/sample-apps/react/react-dogfood/components/Stage.tsx
index 74e347cd01..c4fc082df9 100644
--- a/sample-apps/react/react-dogfood/components/Stage.tsx
+++ b/sample-apps/react/react-dogfood/components/Stage.tsx
@@ -1,13 +1,11 @@
-import { useCall } from '@stream-io/video-react-sdk';
 import { useSearchParams } from 'next/navigation';
-import { LayoutMap } from './LayoutSelector';
+import { LayoutMap } from '../hooks';
 
 export const Stage = ({
   selectedLayout,
 }: {
   selectedLayout: keyof typeof LayoutMap;
 }) => {
-  const call = useCall();
   const searchParams = useSearchParams();
   const groupSize = +(searchParams.get('group_size') ?? '0');
 
@@ -16,8 +14,8 @@ export const Stage = ({
 
   if (selectedLayout === 'LegacyGrid' || selectedLayout === 'LegacySpeaker') {
     return (
-      <div className="str-video__stage">
-        <SelectedComponent call={call!} {...LayoutMap[selectedLayout].props} />
+      <div className="rd__stage">
+        <SelectedComponent {...LayoutMap[selectedLayout].props} />
       </div>
     );
   }
diff --git a/sample-apps/react/react-dogfood/components/ToggleCameraButton.tsx b/sample-apps/react/react-dogfood/components/ToggleCameraButton.tsx
new file mode 100644
index 0000000000..5f52018aa0
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ToggleCameraButton.tsx
@@ -0,0 +1,46 @@
+import { forwardRef } from 'react';
+
+import {
+  DeviceSelectorVideo,
+  Icon,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-sdk';
+
+export const ToggleMenuButton = forwardRef<
+  HTMLButtonElement,
+  ToggleMenuButtonProps
+>(function ToggleMenuButton(props, ref) {
+  const { t } = useI18n();
+  const { useCameraState } = useCallStateHooks();
+  const { selectedDevice: selectedCamera, devices: cameras } = useCameraState();
+
+  return (
+    <button
+      ref={ref}
+      className="rd__button rd__button--align-left rd__lobby__camera-button"
+    >
+      <Icon className="rd__button__icon" icon="camera" />
+      <p className="rd__lobby__camera-button__device">
+        {cameras?.find((camera) => camera.deviceId === selectedCamera)?.label ||
+          t('Default')}
+      </p>
+      <Icon icon={props.menuShown ? 'chevron-down' : 'chevron-up'} />
+    </button>
+  );
+});
+
+export const ToggleCameraButton = () => {
+  return (
+    <MenuToggle
+      placement="top-start"
+      ToggleButton={ToggleMenuButton}
+      visualType={MenuVisualType.MENU}
+    >
+      <DeviceSelectorVideo visualType="list" />
+    </MenuToggle>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ToggleDeveloperButton.tsx b/sample-apps/react/react-dogfood/components/ToggleDeveloperButton.tsx
new file mode 100644
index 0000000000..9ca4a53dae
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ToggleDeveloperButton.tsx
@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+
+import {
+  CompositeButton,
+  Icon,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+} from '@stream-io/video-react-sdk';
+
+import { DevMenu } from './DevMenu';
+
+export const ToggleMenuButton = forwardRef<
+  HTMLDivElement,
+  ToggleMenuButtonProps
+>(function ToggleMenuButton(props, ref) {
+  return (
+    <CompositeButton ref={ref} active={props.menuShown} variant="primary">
+      <Icon icon="developer" />
+    </CompositeButton>
+  );
+});
+
+export const ToggleDeveloperButton = () => {
+  return (
+    <MenuToggle
+      placement="top-end"
+      ToggleButton={ToggleMenuButton}
+      visualType={MenuVisualType.MENU}
+    >
+      <DevMenu />
+    </MenuToggle>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ToggleDocumentationButton.tsx b/sample-apps/react/react-dogfood/components/ToggleDocumentationButton.tsx
new file mode 100644
index 0000000000..1dcdd83a11
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ToggleDocumentationButton.tsx
@@ -0,0 +1,71 @@
+import { forwardRef } from 'react';
+
+import {
+  Icon,
+  CompositeButton,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+  useI18n,
+} from '@stream-io/video-react-sdk';
+
+export const ToggleMenuButton = forwardRef<
+  HTMLDivElement,
+  ToggleMenuButtonProps
+>(function ToggleMenuButton(props, ref) {
+  return (
+    <CompositeButton
+      className="rd__documentation-button"
+      ref={ref}
+      active={props.menuShown}
+      variant="primary"
+    >
+      <Icon icon="caret-down" />
+    </CompositeButton>
+  );
+});
+
+export const ToggleDocumentationButton = () => {
+  const { t } = useI18n();
+  return (
+    <MenuToggle
+      placement="bottom-start"
+      ToggleButton={ToggleMenuButton}
+      visualType={MenuVisualType.MENU}
+    >
+      <div className="rd__documentation-button__menu">
+        <h2 className="rd__documentation-button__heading">
+          {t(
+            'Faster and more reliable video calls, livestreams and audio rooms.',
+          )}
+        </h2>
+        <p className="rd__documentation-button__description">
+          {t(
+            'Excellent developer experience and docs enable you to build in-app video calling in days. Scale to millions of users and thousands of call participants.',
+          )}
+        </p>
+        <div className="rd__documentation-button__actions">
+          <a
+            className="rd__button rd__button--secondary rd__button--align-left"
+            href="https://getstream.io/video/docs/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Icon className="rd__button__icon" icon="folder" />
+            {t('Documentation')}
+          </a>
+
+          <a
+            className="rd__button rd__button--primary rd__button--align-left"
+            href="https://getstream.io/video/#contact"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Icon className="rd__button__icon" icon="support-agent" />
+            {t('Contact an expert')}
+          </a>
+        </div>
+      </div>
+    </MenuToggle>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ToggleDualCameraButton.tsx b/sample-apps/react/react-dogfood/components/ToggleDualCameraButton.tsx
new file mode 100644
index 0000000000..f46fad9b87
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ToggleDualCameraButton.tsx
@@ -0,0 +1,17 @@
+import clsx from 'clsx';
+
+import {
+  DeviceSelectorVideo,
+  ToggleVideoPublishingButton,
+} from '@stream-io/video-react-sdk';
+
+export const ToggleDualCameraButton = () => {
+  return (
+    <div className={clsx('rd__dual-toggle')}>
+      <ToggleVideoPublishingButton
+        Menu={<DeviceSelectorVideo visualType="list" />}
+        menuPlacement="top"
+      />
+    </div>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ToggleDualMicButton.tsx b/sample-apps/react/react-dogfood/components/ToggleDualMicButton.tsx
new file mode 100644
index 0000000000..4a07c7e4af
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ToggleDualMicButton.tsx
@@ -0,0 +1,15 @@
+import {
+  DeviceSelectorAudioInput,
+  ToggleAudioPublishingButton,
+} from '@stream-io/video-react-sdk';
+
+export const ToggleDualMicButton = () => {
+  return (
+    <div className="rd__dual-toggle">
+      <ToggleAudioPublishingButton
+        Menu={<DeviceSelectorAudioInput visualType="list" title={undefined} />}
+        menuPlacement="top"
+      />
+    </div>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ToggleFeedbackButton.tsx b/sample-apps/react/react-dogfood/components/ToggleFeedbackButton.tsx
new file mode 100644
index 0000000000..7cdacd7910
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ToggleFeedbackButton.tsx
@@ -0,0 +1,33 @@
+import { forwardRef } from 'react';
+
+import {
+  CompositeButton,
+  Icon,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+} from '@stream-io/video-react-sdk';
+
+import { Feedback } from './Feedback/Feedback';
+
+const ToggleMenuButton = forwardRef<HTMLDivElement, ToggleMenuButtonProps>(
+  function ToggleMenuButton(props, ref) {
+    return (
+      <CompositeButton ref={ref} active={props.menuShown} variant="primary">
+        <Icon icon="feedback" />
+      </CompositeButton>
+    );
+  },
+);
+
+export const ToggleFeedbackButton = () => {
+  return (
+    <MenuToggle
+      placement="top-start"
+      ToggleButton={ToggleMenuButton}
+      visualType={MenuVisualType.PORTAL}
+    >
+      <Feedback />
+    </MenuToggle>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ToggleLayoutButton.tsx b/sample-apps/react/react-dogfood/components/ToggleLayoutButton.tsx
new file mode 100644
index 0000000000..c789ade90b
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ToggleLayoutButton.tsx
@@ -0,0 +1,52 @@
+import { forwardRef, useMemo } from 'react';
+
+import {
+  CompositeButton,
+  Icon,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+} from '@stream-io/video-react-sdk';
+
+import {
+  LayoutSelector,
+  LayoutSelectorProps,
+  LayoutSelectorType,
+} from './LayoutSelector';
+import { LayoutMap } from '../hooks';
+
+export const ToggleLayoutButton = (props: LayoutSelectorProps) => {
+  const { onMenuItemClick, selectedLayout } = props;
+  const ToggleMenuButtonComponent = useMemo(
+    () =>
+      forwardRef<HTMLDivElement, ToggleMenuButtonProps>(
+        function ToggleMenuButton(buttonProps, ref) {
+          return (
+            <CompositeButton
+              ref={ref}
+              active={buttonProps.menuShown}
+              variant="primary"
+              title="Layout"
+            >
+              <Icon icon={LayoutMap[selectedLayout]?.icon || 'grid'} />
+            </CompositeButton>
+          );
+        },
+      ),
+    [selectedLayout],
+  );
+
+  return (
+    <MenuToggle
+      placement="top-end"
+      ToggleButton={ToggleMenuButtonComponent}
+      visualType={MenuVisualType.MENU}
+    >
+      <LayoutSelector
+        visualType={LayoutSelectorType.LIST}
+        selectedLayout={selectedLayout}
+        onMenuItemClick={onMenuItemClick}
+      />
+    </MenuToggle>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ToggleMicButton.tsx b/sample-apps/react/react-dogfood/components/ToggleMicButton.tsx
new file mode 100644
index 0000000000..bbd9929183
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ToggleMicButton.tsx
@@ -0,0 +1,47 @@
+import { forwardRef } from 'react';
+
+import {
+  DeviceSelectorAudioInput,
+  Icon,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-sdk';
+
+export const ToggleMenuButton = forwardRef<
+  HTMLButtonElement,
+  ToggleMenuButtonProps
+>(function ToggleMenuButton(props, ref) {
+  const { t } = useI18n();
+  const { useMicrophoneState } = useCallStateHooks();
+  const { selectedDevice: selectedMic, devices: microphones } =
+    useMicrophoneState();
+
+  return (
+    <button
+      ref={ref}
+      className="rd__button rd__button--align-left rd__lobby__mic-button"
+    >
+      <Icon className="rd__button__icon" icon="mic" />
+      <p className="rd__lobby__mic-button__device">
+        {microphones?.find((mic) => mic.deviceId === selectedMic)?.label ||
+          t('Default')}
+      </p>
+      <Icon icon={props.menuShown ? 'chevron-down' : 'chevron-up'} />
+    </button>
+  );
+});
+
+export const ToggleMicButton = () => {
+  return (
+    <MenuToggle
+      placement="top-start"
+      ToggleButton={ToggleMenuButton}
+      visualType={MenuVisualType.MENU}
+    >
+      <DeviceSelectorAudioInput visualType="list" />
+    </MenuToggle>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ToggleMoreOptionsListButton.tsx b/sample-apps/react/react-dogfood/components/ToggleMoreOptionsListButton.tsx
new file mode 100644
index 0000000000..5dfd469e4d
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ToggleMoreOptionsListButton.tsx
@@ -0,0 +1,85 @@
+import { forwardRef } from 'react';
+
+import {
+  CompositeButton,
+  defaultReactions,
+  DefaultReactionsMenu,
+  Icon,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+  useI18n,
+} from '@stream-io/video-react-sdk';
+
+import { Feedback } from './Feedback/Feedback';
+import { DevMenu } from './DevMenu';
+
+const ToggleFeedbackButton = forwardRef<HTMLButtonElement>(
+  function ToggleFeedbackButton(_, ref) {
+    const { t } = useI18n();
+    return (
+      <button ref={ref} className="rd__button rd__more-button">
+        <Icon className="rd__button__icon" icon={'feedback'} />
+        <span> {t('Feedback')}</span>
+      </button>
+    );
+  },
+);
+
+const ToggleDevMenuButton = forwardRef<HTMLButtonElement>(
+  function ToggleDevMenuButton(_, ref) {
+    const { t } = useI18n();
+    return (
+      <button ref={ref} className="rd__button rd__more-button">
+        <Icon className="rd__button__icon" icon={'developer'} />
+        <span> {t('Developer menu')}</span>
+      </button>
+    );
+  },
+);
+
+const Menu = () => {
+  return (
+    <ul className="rd__more-menu">
+      <li className="rd__more-menu__item">
+        <DefaultReactionsMenu reactions={defaultReactions} />
+      </li>
+      <li className="rd__more-menu__item">
+        <MenuToggle
+          ToggleButton={ToggleDevMenuButton}
+          visualType={MenuVisualType.PORTAL}
+        >
+          <DevMenu />
+        </MenuToggle>
+      </li>
+
+      <li className="rd__more-menu__item">
+        <MenuToggle
+          ToggleButton={ToggleFeedbackButton}
+          visualType={MenuVisualType.PORTAL}
+        >
+          <Feedback />
+        </MenuToggle>
+      </li>
+    </ul>
+  );
+};
+
+export const ToggleMenuButton = forwardRef<
+  HTMLDivElement,
+  ToggleMenuButtonProps
+>(function ToggleMenuButton(props, ref) {
+  return (
+    <CompositeButton ref={ref} active={props.menuShown} variant="primary">
+      <Icon icon="more" />
+    </CompositeButton>
+  );
+});
+
+export const ToggleMoreOptionsListButton = () => {
+  return (
+    <MenuToggle placement="top-start" ToggleButton={ToggleMenuButton}>
+      <Menu />
+    </MenuToggle>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/ToggleParticipantListButton.tsx b/sample-apps/react/react-dogfood/components/ToggleParticipantListButton.tsx
index 716c4e5447..91a9faece0 100644
--- a/sample-apps/react/react-dogfood/components/ToggleParticipantListButton.tsx
+++ b/sample-apps/react/react-dogfood/components/ToggleParticipantListButton.tsx
@@ -1,21 +1,103 @@
+import { useEffect, useState } from 'react';
 import {
-  ButtonWithIconProps,
+  Avatar,
   CompositeButton,
-  IconButton,
+  Icon,
+  IconButtonWithMenuProps,
+  useCall,
+  useCallStateHooks,
+  UserResponse,
 } from '@stream-io/video-react-sdk';
+import { useFloatingUIPreset } from '../hooks/useFloatingUIPreset';
 
 export type ToggleParticipantListButtonProps = { caption?: string } & Omit<
-  ButtonWithIconProps,
+  IconButtonWithMenuProps,
   'icon' | 'ref'
 >;
 
 export const ToggleParticipantListButton = (
   props: ToggleParticipantListButtonProps,
 ) => {
-  const { enabled, caption = 'Participants' } = props;
+  const call = useCall();
+  const { useParticipants } = useCallStateHooks();
+  const participantCount = useParticipants().length;
+
+  const { refs, x, y } = useFloatingUIPreset({
+    placement: 'top-start',
+    strategy: 'absolute',
+  });
+
+  const [waitingRoom, setWaitingRoom] = useState<UserResponse[]>([]);
+  useEffect(() => {
+    if (!call) return;
+    return call.on('custom', (event) => {
+      if (event.type !== 'custom') return;
+      if (event.custom['type'] !== 'pronto.request-to-join-call') return;
+      setWaitingRoom((queue) => [...queue, event.user]);
+      setIsDismissed(false);
+    });
+  }, [call]);
+
+  const [isDismissed, setIsDismissed] = useState(false);
+  const admitUser = (user: UserResponse) => async () => {
+    if (!call) return;
+    await call.updateCallMembers({
+      update_members: [{ user_id: user.id, role: 'call_member' }],
+    });
+    setWaitingRoom((queue) => queue.filter((u) => u.id !== user.id));
+  };
+
   return (
-    <CompositeButton active={enabled} caption={caption}>
-      <IconButton icon="participants" {...props} />
-    </CompositeButton>
+    <div className="rd__toggle-participants" ref={refs.setReference}>
+      {!isDismissed && waitingRoom.length > 0 && (
+        <div
+          className="str-video__menu-container rd__waiting-room-list"
+          ref={refs.setFloating}
+          style={{
+            position: 'absolute',
+            top: y ?? 0,
+            left: x ?? 0,
+            overflowY: 'auto',
+          }}
+        >
+          <p className="rd__waiting-room-list__title">
+            <Icon className="rd__waiting-room-list__title-icon" icon="info" />
+            Someone wants to join the call
+          </p>
+          <ul className="rd__waiting-room-list__users">
+            {waitingRoom.map((user) => (
+              <li className="rd__waiting-room-list__user" key={user.id}>
+                <Avatar name={user.name || user.id} imageSrc={user.image} />
+                <span className="rd__waiting-room-list__user-name">
+                  {user.name || user.id}
+                </span>
+                <button
+                  className="rd__button rd__waiting-room-list__admit"
+                  type="button"
+                  onClick={admitUser(user)}
+                >
+                  Admit
+                </button>
+              </li>
+            ))}
+          </ul>
+          <div className="rd__waiting-room-list__footer">
+            <button
+              className="rd__button rd__waiting-room-list__dismiss"
+              type="button"
+              onClick={() => setIsDismissed(true)}
+            >
+              Dismiss
+            </button>
+          </div>
+        </div>
+      )}
+      <CompositeButton title="Participants" {...props}>
+        <Icon icon="participants" />
+        {participantCount > 1 && (
+          <span className="rd__participant-count">{participantCount}</span>
+        )}
+      </CompositeButton>
+    </div>
   );
 };
diff --git a/sample-apps/react/react-dogfood/components/ToggleParticipantsPreview.tsx b/sample-apps/react/react-dogfood/components/ToggleParticipantsPreview.tsx
new file mode 100644
index 0000000000..a6ca8fd91d
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/ToggleParticipantsPreview.tsx
@@ -0,0 +1,89 @@
+import { forwardRef } from 'react';
+
+import {
+  CallPreview,
+  CompositeButton,
+  Icon,
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-sdk';
+
+export type Props = {
+  onJoin: () => void;
+};
+
+const ParticipantsPreview = ({ onJoin }: Props) => {
+  const { useCallSession, useCallThumbnail } = useCallStateHooks();
+  const session = useCallSession();
+  const { t } = useI18n();
+
+  const thumbnail = useCallThumbnail();
+
+  if (!session?.participants || session?.participants.length === 0) return null;
+
+  const [first] = session.participants;
+  return (
+    <div className="rd__participants-preview">
+      <h2 className="rd__participants-preview__heading">Ready to join?</h2>
+
+      {thumbnail && <CallPreview style={{ width: '100%', height: '150px' }} />}
+
+      <p className="rd__participants-preview__description">
+        {`${first.user.name} and ${session.participants.length - 1} other${
+          session.participants.length - 1 > 1 ? 's' : ''
+        } are in this call.`}
+      </p>
+
+      <button
+        className="rd__button rd__button--primary rd__button--large rd__lobby-join"
+        data-testid="join-call-button"
+        onClick={onJoin}
+      >
+        <Icon className="rd__button__icon" icon="login" />
+        {t('Join the others')}
+      </button>
+    </div>
+  );
+};
+
+const ToggleMenuButton = forwardRef<HTMLDivElement, ToggleMenuButtonProps>(
+  function ToggleMenuButton(props, ref) {
+    const { useCallSession } = useCallStateHooks();
+    const session = useCallSession();
+    const total = session?.participants?.length || 0;
+    return (
+      <CompositeButton
+        ref={ref}
+        active={props.menuShown}
+        variant="primary"
+        className="rd__participants-preview__button"
+        title="Participants already in the call"
+      >
+        <Icon icon="participants" />
+        {total > 0 && (
+          <span className="rd__participants-preview__count">{total}</span>
+        )}
+      </CompositeButton>
+    );
+  },
+);
+
+export const ToggleParticipantsPreviewButton = ({ onJoin }: Props) => {
+  const { useCallSession } = useCallStateHooks();
+  const session = useCallSession();
+
+  if (!session?.participants || session?.participants.length === 0) return null;
+
+  return (
+    <MenuToggle
+      placement="top-start"
+      ToggleButton={ToggleMenuButton}
+      visualType={MenuVisualType.PORTAL}
+    >
+      <ParticipantsPreview onJoin={onJoin} />
+    </MenuToggle>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/TourPanel/TourPanel.tsx b/sample-apps/react/react-dogfood/components/TourPanel/TourPanel.tsx
new file mode 100644
index 0000000000..7d30ffa08e
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/TourPanel/TourPanel.tsx
@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { offset, OffsetOptions, Placement } from '@floating-ui/react';
+import { computePosition } from '@floating-ui/dom';
+
+import { useI18n } from '@stream-io/video-react-sdk';
+
+import { useTourContext } from '../../context/TourContext';
+
+export type Props = {
+  highlightClass: string;
+};
+
+export const TourPanel = ({ highlightClass }: Props) => {
+  const { t } = useI18n();
+
+  const tourPanel = useRef<HTMLDivElement>(null);
+  const [previousElement, setPreviousElement] = useState<Element>();
+
+  const { next, current, step, closeTour, total, active, setShowTourNextTime } =
+    useTourContext();
+
+  const attachToElement = useCallback(
+    (anchor?: string, placement?: Placement, offsetOptions?: OffsetOptions) => {
+      const tourPanelElement = tourPanel.current;
+      if (!anchor || !tourPanelElement) return;
+      const anchorElement = document.querySelector(anchor);
+      if (!anchorElement) return;
+
+      setPreviousElement(anchorElement);
+      anchorElement.classList.add(highlightClass);
+      computePosition(anchorElement, tourPanelElement, {
+        placement,
+        middleware: [offset(offsetOptions)],
+      }).then(({ x, y }) => {
+        Object.assign(tourPanelElement.style, {
+          transform: `translate3d(${x}px, ${y}px, 0)`,
+        });
+      });
+    },
+    [highlightClass],
+  );
+
+  const [enableOverlay, setEnableOverlay] = useState(true);
+  const [showOverlay, setShowOverlay] = useState(false);
+  useEffect(() => {
+    const panel = tourPanel.current;
+    if (!panel) return;
+    const onStart = () => {
+      if (!enableOverlay) return;
+      setShowOverlay(true);
+    };
+    const onEnd = () => {
+      setEnableOverlay(true);
+      setShowOverlay(false);
+    };
+    panel.addEventListener('transitionstart', onStart);
+    panel.addEventListener('transitionend', onEnd);
+    return () => {
+      panel.removeEventListener('transitionstart', onStart);
+      panel.removeEventListener('transitionend', onEnd);
+    };
+  }, [enableOverlay]);
+
+  useEffect(() => {
+    if (previousElement) previousElement.classList.remove(highlightClass);
+    if (!step) return;
+
+    const onResize = throttle(() => {
+      setEnableOverlay(false);
+      attachToElement(step.anchor, step.placement, step.offset);
+    }, 50);
+    window.addEventListener('resize', onResize);
+
+    const id = setTimeout(() => {
+      attachToElement(step.anchor, step.placement, step.offset);
+    }, step.delay ?? 0);
+    return () => {
+      clearTimeout(id);
+      window.removeEventListener('resize', onResize);
+    };
+  }, [step, attachToElement, previousElement, highlightClass]);
+
+  if (!active) return null;
+
+  return (
+    <div
+      ref={tourPanel}
+      className={clsx('rd__tour', current <= 1 && 'rd__tour--first-step')}
+    >
+      <div
+        className={`rd__tour__indicator rd__tour__indicator--${step?.placement}`}
+      />
+
+      {step && (
+        <div className="rd__tour__content-container">
+          <h2 className="rd__tour__header">{step?.header}</h2>
+          {step.image && (
+            <div className="rd__tour__image-container">
+              <img
+                className="rd__tour__image"
+                src={step.image.src}
+                alt={step.header}
+              />
+            </div>
+          )}
+          {step.component && step?.component()}
+          {step.explanation &&
+            step.explanation.split('\n').map((text, index) => (
+              <p key={index} className="rd__tour__explanation">
+                {text}
+              </p>
+            ))}
+          {showOverlay && <div className="rd__tour__step-overlay" />}
+        </div>
+      )}
+      <div
+        className={clsx('rd__tour__footer', {
+          'rd__tour__footer--last-step': current === total,
+        })}
+      >
+        <button
+          className={clsx('rd__button', {
+            'rd__button--secondary': current !== total,
+            'rd__button--primary': current === total,
+          })}
+          onClick={closeTour}
+        >
+          {current === total ? t('Finish intro') : t('Skip intro')}
+        </button>
+
+        {current === total && (
+          <label className="rd__tour__dont-show">
+            <input
+              type="checkbox"
+              onChange={(e) => setShowTourNextTime(!e.target.checked)}
+            />
+            Do not show this tour again
+          </label>
+        )}
+        {current !== total && (
+          <button className="rd__button rd__button--primary" onClick={next}>
+            {t('Next')}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const throttle = (fn: () => void, delay: number) => {
+  let timeout: NodeJS.Timeout | null = null;
+  return () => {
+    if (timeout) return;
+    timeout = setTimeout(() => {
+      fn();
+      timeout = null;
+    }, delay);
+  };
+};
diff --git a/sample-apps/react/react-dogfood/components/TourPanel/TourSDKOptions.tsx b/sample-apps/react/react-dogfood/components/TourPanel/TourSDKOptions.tsx
new file mode 100644
index 0000000000..7f0eb2d482
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/TourPanel/TourSDKOptions.tsx
@@ -0,0 +1,18 @@
+import { Icon } from '@stream-io/video-react-sdk';
+
+export const TourSDKOptions = () => {
+  return (
+    <>
+      <div className="rd__sdk-options">
+        <div className="rd__sdk-options__option">
+          <Icon icon="layout-speaker-live-stream" />
+          Livestreaming
+        </div>
+        <div className="rd__sdk-options__option">
+          <Icon icon="mic" />
+          Audio Rooms
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/components/TourPanel/index.ts b/sample-apps/react/react-dogfood/components/TourPanel/index.ts
new file mode 100644
index 0000000000..3ea7df91ab
--- /dev/null
+++ b/sample-apps/react/react-dogfood/components/TourPanel/index.ts
@@ -0,0 +1 @@
+export { TourPanel } from './TourPanel';
diff --git a/sample-apps/react/react-dogfood/components/index.ts b/sample-apps/react/react-dogfood/components/index.ts
index 8fca2f2b89..13888b771f 100644
--- a/sample-apps/react/react-dogfood/components/index.ts
+++ b/sample-apps/react/react-dogfood/components/index.ts
@@ -2,9 +2,6 @@ export * from './ChatWrapper';
 export * from './ChatUI';
 export * from './MeetingUI';
 export * from './NewMessageNotification';
-export * from './Settings';
 export * from './UnreadCountBadge';
 
 export const CHANNEL_TYPE = 'videocall';
-export const USAGE_GUIDE_LINK =
-  'https://www.notion.so/stream-wiki/Usage-guide-and-known-limitations-603b12af2dff43d69119be4dae462b19';
diff --git a/sample-apps/react/react-dogfood/context/AppEnvironmentContext.tsx b/sample-apps/react/react-dogfood/context/AppEnvironmentContext.tsx
new file mode 100644
index 0000000000..c0cf3e726e
--- /dev/null
+++ b/sample-apps/react/react-dogfood/context/AppEnvironmentContext.tsx
@@ -0,0 +1,43 @@
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+export type AppEnvironment = 'pronto' | 'demo' | string;
+
+const environmentOverride =
+  typeof window !== 'undefined' &&
+  new URLSearchParams(window.location.search).get('environment');
+
+const environment: AppEnvironment =
+  environmentOverride || process.env.NEXT_PUBLIC_APP_ENVIRONMENT || 'demo';
+
+const AppEnvironmentContext = createContext(environment);
+
+export const AppEnvironmentProvider = ({ children }: PropsWithChildren) => {
+  return (
+    <AppEnvironmentContext.Provider value={environment}>
+      {children}
+    </AppEnvironmentContext.Provider>
+  );
+};
+
+/**
+ * Returns the current app environment.
+ */
+export const useAppEnvironment = (): AppEnvironment => {
+  const appEnvironment = useContext(AppEnvironmentContext);
+  if (!appEnvironment) {
+    throw new Error(
+      'useAppEnvironment must be used within an AppEnvironmentContext',
+    );
+  }
+  return appEnvironment;
+};
+
+/**
+ * Returns true if the current app environment is 'pronto'.
+ */
+export const useIsProntoEnvironment = () => useAppEnvironment() === 'pronto';
+
+/**
+ * Returns true if the current app environment is 'demo'.
+ */
+export const useIsDemoEnvironment = () => useAppEnvironment() === 'demo';
diff --git a/sample-apps/react/react-dogfood/context/SettingsContext.tsx b/sample-apps/react/react-dogfood/context/SettingsContext.tsx
index a05bf6b797..3c25a3b0e6 100644
--- a/sample-apps/react/react-dogfood/context/SettingsContext.tsx
+++ b/sample-apps/react/react-dogfood/context/SettingsContext.tsx
@@ -1,47 +1,35 @@
-import { createContext, PropsWithChildren, useContext, useState } from 'react';
-import { SettingsDialog } from '../components';
+import { createContext, PropsWithChildren, useContext } from 'react';
 import { useLanguage } from '../hooks/useLanguage';
 
-const noop = () => null;
 const defaultState: Settings = {};
 
 export type Settings = {
   language?: string;
+  fallbackLanguage?: string;
 };
 
 export type SettingsContextValue = {
-  setOpen: (open: boolean) => void;
   settings: Settings;
 };
 
 const SettingsContext = createContext<SettingsContextValue>({
-  setOpen: noop,
   settings: defaultState,
 });
 
 export const SettingsProvider = ({ children }: PropsWithChildren) => {
-  const [isOpen, setOpen] = useState(false);
-  const { language, setLanguage } = useLanguage();
+  const { language, fallbackLanguage } = useLanguage();
 
   const settings: Settings = {
     language,
+    fallbackLanguage,
   };
 
   return (
     <SettingsContext.Provider
       value={{
-        setOpen,
         settings,
       }}
     >
-      <SettingsDialog
-        open={isOpen}
-        onClose={() => setOpen(false)}
-        controller={{
-          setLanguage,
-        }}
-        settings={settings}
-      />
       {children}
     </SettingsContext.Provider>
   );
diff --git a/sample-apps/react/react-dogfood/context/TourContext.tsx b/sample-apps/react/react-dogfood/context/TourContext.tsx
new file mode 100644
index 0000000000..d0a0e0c4b1
--- /dev/null
+++ b/sample-apps/react/react-dogfood/context/TourContext.tsx
@@ -0,0 +1,173 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import { OffsetOptions, Placement } from '@floating-ui/react';
+import { useBreakpoint } from '../hooks';
+import { useIsDemoEnvironment } from './AppEnvironmentContext';
+import { TourSDKOptions } from '../components/TourPanel/TourSDKOptions';
+
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
+/**
+ * Defines the list of steps.
+ * Please keep this list sorted.
+ */
+export enum StepNames {
+  Start = 1,
+  Network = 2,
+  Chat = 3,
+}
+
+const tourData: Step[] = Array.from({
+  length: Math.floor(Object.keys(StepNames).length / 2),
+});
+tourData[StepNames.Start] = {
+  header: 'Modern SDKs',
+  placement: 'bottom-start',
+  anchor:
+    '.rd__documentation-button .str-video__composite-button__button-group',
+  component: TourSDKOptions,
+  explanation: `
+    Modern SDKs to build video calling, audio rooms and livestreaming in days.
+    This video calling experience is just one example of what you can build with Stream’s SDKs.`,
+  offset: {
+    mainAxis: 10,
+    crossAxis: 0,
+    alignmentAxis: -12,
+  },
+};
+tourData[StepNames.Network] = {
+  header: 'Edge Network',
+  explanation:
+    'Our global edge network ensures an optimal call latency. This improves call quality, user experience and reliability.',
+  placement: 'left-start',
+  anchor: '.rd__header__latency',
+  image: {
+    src: `${basePath}/server-status.png`,
+  },
+  offset: {
+    mainAxis: 10,
+    crossAxis: -5,
+    alignmentAxis: -15,
+  },
+};
+tourData[StepNames.Chat] = {
+  header: 'Chat',
+  explanation: `A full chat SDK/API with reactions, typing, unread counts, quoted replies, URL previews, image uploads, and basically anything you’d expect from a WhatsApp or Slack style app.`,
+  placement: 'left-end',
+  anchor: '.rd__sidebar--open',
+  delay: 100,
+  image: {
+    src: `${basePath}/chat.png`,
+  },
+  offset: {
+    mainAxis: 10,
+    crossAxis: 0,
+    alignmentAxis: -12,
+  },
+};
+
+type Step = {
+  header: string;
+  explanation?: string;
+  anchor: string;
+  placement: Placement;
+  delay?: number;
+  image?: {
+    src: string;
+  };
+  component?: any;
+  offset: OffsetOptions;
+};
+
+type TourContextValue = {
+  next: () => void;
+  current: number;
+  total: number;
+  step: Step | undefined;
+  active: boolean;
+  closeTour: () => void;
+  setShowTourNextTime: (show: boolean) => void;
+};
+
+const TourContext = createContext<TourContextValue>({
+  next: () => {},
+  current: 0,
+  total: 0,
+  step: undefined,
+  active: false,
+  closeTour: () => {},
+  setShowTourNextTime: () => {},
+});
+
+const ENABLE_TOUR_KEY = '@pronto/tour-enabled';
+const isTourEnabled = () => {
+  try {
+    return localStorage.getItem(ENABLE_TOUR_KEY) !== 'false';
+  } catch {
+    return true;
+  }
+};
+
+const setTourEnabled = (show: boolean) => {
+  try {
+    localStorage.setItem(ENABLE_TOUR_KEY, String(show));
+  } catch (e) {
+    console.warn('Could not set tour enabled state', e);
+  }
+};
+
+export const TourProvider = ({ children }: { children: ReactNode }) => {
+  const isDemo = useIsDemoEnvironment();
+
+  const steps = tourData;
+  const [active, setActive] = useState(() => isDemo && isTourEnabled());
+  const [current, setCurrent] = useState(0);
+
+  const breakpoint = useBreakpoint();
+  useEffect(() => {
+    breakpoint === 'xs' || (breakpoint === 'sm' && setActive(false));
+  }, [breakpoint]);
+
+  const closeTour = useCallback(() => {
+    setCurrent(-1);
+    setActive(false);
+  }, []);
+
+  const next = useCallback(() => {
+    setCurrent((currentStep) => {
+      const nextStep = currentStep + 1;
+      if (nextStep === steps.length - 1) {
+        closeTour();
+      }
+      return nextStep;
+    });
+  }, [closeTour, steps.length]);
+
+  useEffect(() => {
+    localStorage.getItem(ENABLE_TOUR_KEY) === 'false' && setActive(false);
+  }, []);
+
+  return (
+    <TourContext.Provider
+      value={{
+        total: steps.length - 1,
+        current: current + 1,
+        next,
+        step: steps[current + 1],
+        active,
+        closeTour,
+        setShowTourNextTime: setTourEnabled,
+      }}
+    >
+      {children}
+    </TourContext.Provider>
+  );
+};
+
+export const useTourContext = () => useContext(TourContext);
diff --git a/sample-apps/react/react-dogfood/helpers/axiosApiTransformers.ts b/sample-apps/react/react-dogfood/helpers/axiosApiTransformers.ts
index 10775cbc16..070d63afcb 100644
--- a/sample-apps/react/react-dogfood/helpers/axiosApiTransformers.ts
+++ b/sample-apps/react/react-dogfood/helpers/axiosApiTransformers.ts
@@ -3,7 +3,7 @@ import {
   AxiosResponseTransformer,
   default as axios,
 } from 'axios';
-import { JoinCallResponse } from '@stream-io/video-react-sdk';
+import { JoinCallRequest, JoinCallResponse } from '@stream-io/video-react-sdk';
 
 const cascadingTransformer: AxiosRequestTransformer =
   /**
@@ -39,6 +39,55 @@ const cascadingTransformer: AxiosRequestTransformer =
     return data;
   };
 
+const generalLocationOverrideTransformer: AxiosRequestTransformer =
+  /**
+   * This transformer is used to override the general location returned determined
+   * by the SDK with a random location from the list of IATA codes.
+   *
+   * Note: it needs to be declared as a `function` instead of an arrow function
+   * as it executes in the context of the current axios instance.
+   */
+  function generalLocationOverrideTransformer(data) {
+    if (
+      typeof window === 'undefined' ||
+      !this.url?.endsWith('/join') ||
+      process.env.NEXT_PUBLIC_ENABLE_LOCATION_RANDOMIZATION !== 'true'
+    ) {
+      return data;
+    }
+
+    // prettier-ignore
+    const iataCodes = [
+      // North America
+      'ATL', 'BOS', 'BWI', 'CLT', 'DEN', 'DFW', 'DTW', 'EWR', 'IAH', 'IAD',
+      'JFK', 'LAS', 'LAX', 'LGA', 'MCO', 'MEX', 'MIA', 'MSP', 'ORD', 'PDX',
+      'PHL', 'PHX', 'PIT', 'SAN', 'SEA', 'SFO', 'SLC', 'TPA', 'YUL', 'YVR',
+      // South America
+      'AEP', 'AFA', 'ASU', 'BEL', 'BGI', 'BRC', 'BSB', 'CCS', 'CLO', 'CNF',
+      'CPT', 'CUN', 'DAC', 'EZE', 'FOR', 'GYE', 'GIG', 'GRU', 'LIM', 'LPB',
+      'MVD', 'RIO', 'RUH', 'SAL', 'SCL', 'SJO', 'SSA', 'UIO', 'VCP', 'VVI',
+      // Europe
+      'AMS', 'ATH', 'BCN', 'BGO', 'BLL', 'BRU', 'BUD', 'CDG', 'CPH', 'DUB',
+      'FRA', 'HEL', 'IST', 'LED', 'LHR', 'LIS', 'LUX', 'MAD', 'MUC', 'MXP',
+      'OSL', 'PRG', 'RUH', 'SKP', 'SOF', 'VIE', 'WAW', 'ZAG', 'ZRH',
+      // Asia
+      'AMM', 'BKK', 'CAN', 'CCU', 'CGK', 'DEL', 'DOH', 'DXB', 'HKG', 'HND',
+      'ICN', 'KIX', 'KUL', 'PEK', 'PVG', 'SGN', 'SIN', 'TPE',
+      // Africa
+      'ACC', 'CAI', 'JNB', 'LOS', 'NBO', 'CMN', 'ADD', 'DKR', 'CPT', 'TUN',
+      // Australia
+      'ADL', 'AKL', 'BNE', 'CHC', 'DUD', 'MEL', 'PER', 'SYD', 'WLG', 'ZQN'
+    ];
+
+    const randomLocation =
+      iataCodes[Math.floor(Math.random() * iataCodes.length)];
+
+    console.log(`Overriding location: ${data.location} with ${randomLocation}`);
+
+    (data as JoinCallRequest).location = randomLocation;
+    return data;
+  };
+
 const sfuOverrideTransformer: AxiosResponseTransformer =
   /**
    * This transformer is used to override the SFU URL and WS URL returned by the
@@ -71,6 +120,7 @@ const sfuOverrideTransformer: AxiosResponseTransformer =
  */
 export const defaultRequestTransformers: AxiosRequestTransformer[] = [
   cascadingTransformer,
+  generalLocationOverrideTransformer,
   ...(axios.defaults.transformRequest as AxiosRequestTransformer[]),
 ];
 
diff --git a/sample-apps/react/react-dogfood/helpers/getCookie.ts b/sample-apps/react/react-dogfood/helpers/getCookie.ts
new file mode 100644
index 0000000000..97eb7419ac
--- /dev/null
+++ b/sample-apps/react/react-dogfood/helpers/getCookie.ts
@@ -0,0 +1,18 @@
+export const getCookie = (name: string) => {
+  let cookieValue: string | null = null;
+  if (typeof document === 'undefined') {
+    return null;
+  }
+  if (document.cookie && document.cookie !== '') {
+    const cookies = document.cookie.split(';');
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i].trim();
+      // Does this cookie string begin with the name we want?
+      if (cookie.substring(0, name.length + 1) === `${name}=`) {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;
+      }
+    }
+  }
+  return cookieValue;
+};
diff --git a/sample-apps/react/react-dogfood/helpers/jwt.ts b/sample-apps/react/react-dogfood/helpers/jwt.ts
index 0a68b64841..ee79c3db30 100644
--- a/sample-apps/react/react-dogfood/helpers/jwt.ts
+++ b/sample-apps/react/react-dogfood/helpers/jwt.ts
@@ -1,4 +1,4 @@
-import { JWTUserToken } from 'stream-chat';
+import { decodeBase64, JWTUserToken } from 'stream-chat';
 
 /**
  * The maximum validity of a token, in seconds.
@@ -38,3 +38,14 @@ export const createToken = (
 
   return JWTUserToken(jwtSecret, userId, payload);
 };
+
+export const decodeToken = (token: string): Record<string, any> => {
+  const [, payload] = token.split('.');
+  if (!payload) throw new Error('Malformed token, missing payload');
+  try {
+    return JSON.parse(decodeBase64(payload)) ?? {};
+  } catch (e) {
+    console.log('Error parsing token payload', e);
+    return {};
+  }
+};
diff --git a/sample-apps/react/react-dogfood/hooks/index.ts b/sample-apps/react/react-dogfood/hooks/index.ts
index dce6cd574c..0097f29bdd 100644
--- a/sample-apps/react/react-dogfood/hooks/index.ts
+++ b/sample-apps/react/react-dogfood/hooks/index.ts
@@ -2,3 +2,5 @@ export * from './useChatClient';
 export * from './useWatchChannel';
 export * from './useKeyboardShortcuts';
 export * from './useWakeLock';
+export * from './useBreakpoints';
+export * from './useLayoutSwitcher';
diff --git a/sample-apps/react/react-dogfood/hooks/useBreakpoints.ts b/sample-apps/react/react-dogfood/hooks/useBreakpoints.ts
new file mode 100644
index 0000000000..e899a99aca
--- /dev/null
+++ b/sample-apps/react/react-dogfood/hooks/useBreakpoints.ts
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+const getDeviceConfig = (width: number) => {
+  if (width < 320) {
+    return 'xs';
+  } else if (width >= 320 && width < 768) {
+    return 'sm';
+  } else if (width >= 768 && width < 1024) {
+    return 'md';
+  } else if (width >= 1024) {
+    return 'lg';
+  }
+};
+
+export const useBreakpoint = () => {
+  const [breakpoint, setBreakpoint] = useState(() =>
+    getDeviceConfig(window.innerWidth),
+  );
+
+  useEffect(() => {
+    const calcInnerWidth = () =>
+      setBreakpoint(getDeviceConfig(window.innerWidth));
+
+    window.addEventListener('resize', calcInnerWidth);
+    return () => window.removeEventListener('resize', calcInnerWidth);
+  }, []);
+
+  return breakpoint;
+};
diff --git a/sample-apps/react/react-dogfood/hooks/useCreateGeoJsonFeatures.ts b/sample-apps/react/react-dogfood/hooks/useCreateGeoJsonFeatures.ts
new file mode 100644
index 0000000000..0bbc123840
--- /dev/null
+++ b/sample-apps/react/react-dogfood/hooks/useCreateGeoJsonFeatures.ts
@@ -0,0 +1,44 @@
+import { EdgeResponse } from '@stream-io/video-react-sdk';
+import { Feature, FeatureCollection, Geometry } from 'geojson';
+
+const continents: any = {
+  AF: 'Africa',
+  NA: 'North America',
+  OC: 'Oceania',
+  AN: 'Antarctica',
+  AS: 'Asia',
+  EU: 'Europe',
+  SA: 'South America',
+};
+
+export interface EdgeResponseExtended extends EdgeResponse {
+  country_iso_code: string;
+  continent_code: string;
+}
+
+export const createGeoJsonFeatures = (
+  edges: EdgeResponseExtended[],
+): FeatureCollection<Geometry> => {
+  const features = edges.map((edge, index): Feature => {
+    return {
+      id: index + 1,
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [edge.longitude, edge.latitude],
+      },
+      properties: {
+        abbriviation: edge.id,
+        city: undefined,
+        countryCode: edge.country_iso_code,
+        continent: continents[edge.continent_code],
+        ...edge,
+      },
+    };
+  });
+
+  return {
+    type: 'FeatureCollection',
+    features: features,
+  };
+};
diff --git a/sample-apps/react/react-dogfood/hooks/useEdges.ts b/sample-apps/react/react-dogfood/hooks/useEdges.ts
new file mode 100644
index 0000000000..ffde568157
--- /dev/null
+++ b/sample-apps/react/react-dogfood/hooks/useEdges.ts
@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { useStreamVideoClient } from '@stream-io/video-react-sdk';
+import { FeatureCollection } from 'geojson';
+import { createGeoJsonFeatures } from './useCreateGeoJsonFeatures';
+
+const EDGES_KEY = '@pronto/edges';
+const oneDay = 24 * 3600 * 1000;
+
+type CachedEdges = {
+  edges: FeatureCollection;
+  expires_at: number;
+};
+
+const cacheEdges = (edges: FeatureCollection) => {
+  const payload: CachedEdges = {
+    edges,
+    expires_at: new Date().getTime() + oneDay,
+  };
+  try {
+    localStorage.setItem(EDGES_KEY, JSON.stringify(payload));
+  } catch (e) {
+    console.warn(`Failed to store edges in the cache`);
+  }
+
+  return payload;
+};
+
+const getCachedEdges = (): CachedEdges | undefined => {
+  try {
+    const edgeJSON = localStorage.getItem(EDGES_KEY);
+    if (!edgeJSON) return;
+    return JSON.parse(edgeJSON);
+  } catch {
+    return undefined;
+  }
+};
+
+export const useEdges = () => {
+  const [edges, setEdges] = useState<CachedEdges | undefined>(getCachedEdges);
+  const [fastestEdge] = useState<{
+    id: string;
+    latency: number;
+  }>();
+
+  const client = useStreamVideoClient();
+  useEffect(() => {
+    if (!client || (edges?.expires_at ?? 0 > new Date().getTime())) return;
+    client.edges().then((response) => {
+      setEdges(cacheEdges(createGeoJsonFeatures(response.edges)));
+    });
+  }, [client, edges?.expires_at]);
+
+  return {
+    edges: edges?.edges,
+    fastestEdge,
+  };
+};
diff --git a/sample-apps/react/react-dogfood/hooks/useFloatingUIPreset.ts b/sample-apps/react/react-dogfood/hooks/useFloatingUIPreset.ts
new file mode 100644
index 0000000000..705d15a505
--- /dev/null
+++ b/sample-apps/react/react-dogfood/hooks/useFloatingUIPreset.ts
@@ -0,0 +1,50 @@
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  size,
+  useFloating,
+  UseFloatingData,
+} from '@floating-ui/react';
+import { useEffect } from 'react';
+
+// FIXME OL: duplicated from useFloatingUIPreset.ts in "React SDK"
+export const useFloatingUIPreset = (
+  props: Pick<UseFloatingData, 'placement' | 'strategy'>,
+) => {
+  const {
+    refs,
+    x,
+    y,
+    update,
+    elements: { domReference, floating },
+  } = useFloating({
+    placement: props.placement,
+    strategy: props.strategy,
+    middleware: [
+      offset(10),
+      shift(),
+      flip(),
+      size({
+        padding: 10,
+        apply: ({ availableHeight, elements }) => {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${availableHeight}px`,
+          });
+        },
+      }),
+    ],
+  });
+
+  // handle window resizing
+  useEffect(() => {
+    if (!domReference || !floating) return;
+    const cleanup = autoUpdate(domReference, floating, update);
+    return () => {
+      cleanup();
+    };
+  }, [domReference, floating, update]);
+
+  return { refs, x, y, domReference, floating, strategy: props.strategy };
+};
diff --git a/sample-apps/react/react-dogfood/hooks/useGleap.ts b/sample-apps/react/react-dogfood/hooks/useGleap.ts
index b6e2192d06..954ab85026 100644
--- a/sample-apps/react/react-dogfood/hooks/useGleap.ts
+++ b/sample-apps/react/react-dogfood/hooks/useGleap.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Gleap from 'gleap';
 import {
   Call,
@@ -6,23 +6,148 @@ import {
   StreamVideoClient,
   User,
 } from '@stream-io/video-react-sdk';
+import { getLayoutSettings } from './useLayoutSwitcher';
+
+type GleapReportPayload = {
+  type: 'gleap.report';
+  userId: string | undefined;
+  toUserId: string;
+  totalChunks: number;
+  chunkIndex: number;
+  data: string;
+};
+
+const MAX_LOGS_QUEUE_SIZE = 350;
 
 export const useGleap = (
-  gleapApiKey: string | undefined,
+  gleapApiKey: string | null | undefined,
   client: StreamVideoClient | undefined,
+  call: Call | undefined,
   user: User,
 ) => {
+  const [isInitialized, setIsInitialized] = useState(false);
   useEffect(() => {
-    if (gleapApiKey) {
+    if (gleapApiKey && !isInitialized) {
       Gleap.initialize(gleapApiKey);
       Gleap.identify(user.name || user.id || '!anon', {
         name: user.name,
       });
+      setIsInitialized(true);
     }
-  }, [gleapApiKey, user.name, user.id]);
+  }, [gleapApiKey, user.name, user.id, isInitialized]);
+
+  const logsQueue = useRef<string[]>([]);
+  const pushToLogQueue = (log: string) => {
+    if (logsQueue.current.length >= MAX_LOGS_QUEUE_SIZE) {
+      logsQueue.current.shift();
+    }
+    logsQueue.current.push(log);
+  };
 
   useEffect(() => {
-    if (!gleapApiKey || !client) return;
+    if (!gleapApiKey || !call) return;
+
+    const originalLog = console.log;
+    const originalWarn = console.warn;
+    const originalError = console.error;
+    const stringify = (o: any) => {
+      if (typeof o !== 'object') return o;
+      try {
+        return JSON.stringify(o);
+      } catch (e) {
+        return o;
+      }
+    };
+    const timestamp = () => {
+      const d = new Date();
+      return `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}.${d.getMilliseconds()}`;
+    };
+    console.log = (...args: any[]) => {
+      originalLog(...args);
+      pushToLogQueue(`[LOG: ${timestamp()}] ${args.map(stringify).join(' ')}`);
+    };
+    console.warn = (...args: any[]) => {
+      originalWarn(...args);
+      pushToLogQueue(`[WARN: ${timestamp()}] ${args.map(stringify).join(' ')}`);
+    };
+    console.error = (...args: any[]) => {
+      originalError(...args);
+      pushToLogQueue(`[ERR: ${timestamp()}] ${args.map(stringify).join(' ')}`);
+    };
+
+    const off = call.on('custom', async (event) => {
+      if (event.type !== 'custom') return;
+      const { type } = event.custom;
+      if (
+        type === 'gleap.collect-report' &&
+        event.user.id !== call.currentUserId
+      ) {
+        const report = serializeCallState(call);
+        report.logs = logsQueue.current;
+        const serializedReport = JSON.stringify(report);
+        // split in 4.6k chunks - custom events have a 5k limit
+        const chunkSize = 4600;
+        const chunks = serializedReport.match(
+          new RegExp(`.{1,${chunkSize}}`, 'g'),
+        );
+        // send each chunk as a separate event
+        if (!chunks) return;
+        for (let i = 0; i < chunks.length; i++) {
+          const chunk = chunks[i];
+          await call.sendCustomEvent({
+            type: 'gleap.report',
+            userId: call.currentUserId,
+            toUserId: event.user.id,
+            totalChunks: chunks.length,
+            chunkIndex: i,
+            data: chunk,
+          } satisfies GleapReportPayload);
+        }
+      }
+    });
+    return () => {
+      off();
+      console.log = originalLog;
+      console.warn = originalWarn;
+      console.error = originalError;
+    };
+  }, [call, gleapApiKey]);
+
+  useEffect(() => {
+    if (!gleapApiKey || !call) return;
+    const cache = new Map<string, string[]>();
+    return call.on('custom', (event) => {
+      if (event.type !== 'custom') return;
+      const { custom } = event;
+      const { type, userId, toUserId, totalChunks, chunkIndex, data } =
+        custom as GleapReportPayload;
+      if (
+        type === 'gleap.report' &&
+        userId &&
+        toUserId === call.currentUserId
+      ) {
+        if (!cache.has(userId)) {
+          cache.set(userId, Array.from({ length: totalChunks }));
+        }
+        const existingData = cache.get(userId)!;
+        existingData[chunkIndex] = data;
+        // wait until we have all chunks
+        if (existingData.every((d) => !!d)) {
+          const report = JSON.parse(existingData.join(''));
+          Gleap.attachCustomData({
+            [userId]: report,
+          });
+        }
+      }
+    });
+  }, [call, gleapApiKey]);
+
+  useEffect(() => {
+    if (!gleapApiKey || !client || !call) return;
+
+    Gleap.on('open', async () => {
+      await call.sendCustomEvent({ type: 'gleap.collect-report' });
+    });
 
     Gleap.on('flow-started', () => {
       try {
@@ -53,7 +178,9 @@ export const useGleap = (
           // We want to detect this early and include the serialization error
           // as part of the Gleap feedback item.
           JSON.stringify(data);
-          Gleap.attachCustomData(data);
+          Gleap.attachCustomData({
+            [call.currentUserId || 'me']: data,
+          });
         } catch (e) {
           console.warn(e);
         }
@@ -61,7 +188,7 @@ export const useGleap = (
         console.error(e);
       }
     });
-  }, [client, client?.readOnlyStateStore, gleapApiKey]);
+  }, [call, client, gleapApiKey]);
 };
 
 export const serializeCallState = (call: Call) => {
@@ -72,6 +199,7 @@ export const serializeCallState = (call: Call) => {
       edgeName: call['sfuClient']?.edgeName,
       sessionId: call['sfuClient']?.sessionId,
     },
+    layout: getLayoutSettings()?.selectedLayout ?? 'N/A',
     devices: {
       microphone: {
         enabled: microphone.state.status,
diff --git a/sample-apps/react/react-dogfood/hooks/useKeyboardShortcuts.ts b/sample-apps/react/react-dogfood/hooks/useKeyboardShortcuts.ts
index 2cfa942c1f..2247ff238e 100644
--- a/sample-apps/react/react-dogfood/hooks/useKeyboardShortcuts.ts
+++ b/sample-apps/react/react-dogfood/hooks/useKeyboardShortcuts.ts
@@ -24,36 +24,41 @@ const isMacOS = () => {
 const [, raiseHandReaction] = defaultReactions;
 
 export const usePushToTalk = (key: string) => {
-  const [isTalking, setIsTalking] = useState(false);
-  const interactedRef = useRef(false);
-
   const { useMicrophoneState } = useCallStateHooks();
-  const { microphone } = useMicrophoneState();
+  const { microphone, isMute } = useMicrophoneState();
+  const hotkeyHandlerRef = useRef<(e: KeyboardEvent) => void>();
+  const enableMicWithPushToTalkPromiseRef = useRef<Promise<void> | null>(null);
+
+  hotkeyHandlerRef.current = (e) => {
+    if (e.metaKey || e.ctrlKey) {
+      return;
+    }
+
+    e.preventDefault();
+
+    if (e.type === 'keydown' && isMute) {
+      enableMicWithPushToTalkPromiseRef.current = microphone
+        .enable()
+        .catch(console.error);
+    }
+
+    if (e.type === 'keyup' && enableMicWithPushToTalkPromiseRef.current) {
+      enableMicWithPushToTalkPromiseRef.current
+        .then(() => microphone.disable())
+        .catch(console.error);
+      enableMicWithPushToTalkPromiseRef.current = null;
+    }
+  };
 
   useEffect(() => {
     hotkeys(key, { keyup: true }, (e) => {
-      if (e.metaKey || e.ctrlKey) return;
-
-      if (e.type === 'keydown') {
-        interactedRef.current = true;
-        setIsTalking(true);
-      }
-
-      if (e.type === 'keyup') setIsTalking(false);
+      hotkeyHandlerRef.current?.(e);
     });
 
     return () => {
       hotkeys.unbind(key);
     };
   }, [key]);
-
-  useEffect(() => {
-    if (isTalking) microphone.enable().catch(console.error);
-
-    return () => {
-      if (interactedRef.current) microphone.disable().catch(console.error);
-    };
-  }, [isTalking, microphone]);
 };
 
 export const useKeyboardShortcuts = () => {
diff --git a/sample-apps/react/react-dogfood/hooks/useLanguage.ts b/sample-apps/react/react-dogfood/hooks/useLanguage.ts
index bfc38f04d3..f660e74534 100644
--- a/sample-apps/react/react-dogfood/hooks/useLanguage.ts
+++ b/sample-apps/react/react-dogfood/hooks/useLanguage.ts
@@ -7,21 +7,35 @@ export const useLanguage = () => {
   const [language, _setLanguage] = useState<string | undefined>();
 
   const setLanguage = useCallback((lng: TranslationLanguage) => {
-    if (typeof window === 'undefined') return;
     _setLanguage(lng);
-    window.localStorage.setItem(LANGUAGE_SETTINGS_KEY, lng);
+    storeLanguage(lng);
   }, []);
 
   useEffect(() => {
-    if (typeof window === 'undefined') return;
-    setLanguage(
-      window.localStorage.getItem(LANGUAGE_SETTINGS_KEY) ||
-        window.navigator.language,
-    );
+    setLanguage(getStoredLanguage() || window.navigator.language);
   }, [setLanguage]);
 
   return {
     language,
+    fallbackLanguage: 'en',
     setLanguage,
   };
 };
+
+const storeLanguage = (lng: TranslationLanguage) => {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(LANGUAGE_SETTINGS_KEY, lng);
+  } catch (e) {
+    console.warn(`Language couldn't be stored`, e);
+  }
+};
+
+const getStoredLanguage = () => {
+  if (typeof window === 'undefined') return;
+  try {
+    return window.localStorage.getItem(LANGUAGE_SETTINGS_KEY);
+  } catch (e) {
+    console.warn(`Language couldn't be retrieved`, e);
+  }
+};
diff --git a/sample-apps/react/react-dogfood/hooks/useLayoutSwitcher.ts b/sample-apps/react/react-dogfood/hooks/useLayoutSwitcher.ts
new file mode 100644
index 0000000000..f0dd90adf4
--- /dev/null
+++ b/sample-apps/react/react-dogfood/hooks/useLayoutSwitcher.ts
@@ -0,0 +1,154 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  LivestreamLayout,
+  PaginatedGridLayout,
+  SpeakerLayout,
+  useCallStateHooks,
+} from '@stream-io/video-react-sdk';
+import {
+  CallParticipantsScreenView,
+  CallParticipantsView,
+  SpeakerOneOnOne,
+} from '../components/CallLayout';
+import { DebugParticipantViewUI } from '../components/Debug/DebugParticipantViewUI';
+
+export const LayoutMap = {
+  LegacyGrid: {
+    Component: CallParticipantsView,
+    props: {
+      ParticipantViewUI: DebugParticipantViewUI,
+    },
+    title: 'Default',
+    icon: 'grid',
+  },
+  PaginatedGrid: {
+    Component: PaginatedGridLayout,
+    title: 'Grid',
+    icon: 'layout',
+    props: {
+      groupSize: 16,
+      ParticipantViewUI: DebugParticipantViewUI,
+    },
+  },
+  SpeakerBottom: {
+    Component: SpeakerLayout,
+    title: 'Speaker [top]',
+    icon: 'layout-speaker-top',
+    props: {
+      participantsBarPosition: 'bottom',
+      ParticipantViewUIBar: DebugParticipantViewUI,
+      ParticipantViewUISpotlight: DebugParticipantViewUI,
+    },
+  },
+  SpeakerTop: {
+    Component: SpeakerLayout,
+    title: 'Speaker [bottom]',
+    icon: 'layout-speaker-bottom',
+    props: {
+      ParticipantViewUIBar: DebugParticipantViewUI,
+      ParticipantViewUISpotlight: DebugParticipantViewUI,
+      participantsBarPosition: 'top',
+    },
+  },
+  SpeakerRight: {
+    Component: SpeakerLayout,
+    title: 'Speaker [left]',
+    icon: 'layout-speaker-left',
+    props: {
+      ParticipantViewUIBar: DebugParticipantViewUI,
+      ParticipantViewUISpotlight: DebugParticipantViewUI,
+      participantsBarPosition: 'right',
+    },
+  },
+  SpeakerLeft: {
+    Component: SpeakerLayout,
+    title: 'Speaker [right]',
+    icon: 'layout-speaker-right',
+    props: {
+      participantsBarPosition: 'left',
+      ParticipantViewUIBar: DebugParticipantViewUI,
+      ParticipantViewUISpotlight: DebugParticipantViewUI,
+    },
+  },
+  LegacySpeaker: {
+    Component: CallParticipantsScreenView,
+    icon: 'layout',
+    title: 'Sidebar',
+    props: {
+      ParticipantViewUI: DebugParticipantViewUI,
+    },
+  },
+  SpeakerOneOnOne: {
+    Component: SpeakerOneOnOne,
+    icon: 'layout-speaker-one-on-one',
+    title: 'Speaker 1:1',
+    props: {
+      ParticipantViewUI: DebugParticipantViewUI,
+    },
+  },
+  LivestreamLayout: {
+    Component: LivestreamLayout,
+    title: 'Livestream',
+    icon: 'layout-speaker-live-stream',
+    props: {},
+  },
+};
+
+const SETTINGS_KEY = '@pronto/layout-settings';
+const DEFAULT_LAYOUT: keyof typeof LayoutMap = 'SpeakerBottom';
+
+export const getLayoutSettings = () => {
+  if (typeof window === 'undefined') return;
+  const settings = window.localStorage.getItem(SETTINGS_KEY);
+  if (settings) {
+    try {
+      return JSON.parse(settings) as { selectedLayout: keyof typeof LayoutMap };
+    } catch (e) {
+      console.log('Error parsing layout settings', e);
+    }
+  }
+};
+
+export const useLayoutSwitcher = () => {
+  const [layout, setLayout] = useState<keyof typeof LayoutMap>(() => {
+    const storedLayout = getLayoutSettings()?.selectedLayout;
+    if (!storedLayout) return DEFAULT_LAYOUT;
+    return LayoutMap.hasOwnProperty(storedLayout)
+      ? storedLayout
+      : DEFAULT_LAYOUT;
+  });
+
+  const { useHasOngoingScreenShare } = useCallStateHooks();
+  const hasScreenShare = useHasOngoingScreenShare();
+  useEffect(() => {
+    // always switch to screen-share compatible layout
+    if (hasScreenShare) {
+      return setLayout((currentLayout) => {
+        if (currentLayout.startsWith('Speaker')) return currentLayout;
+        return 'SpeakerBottom';
+      });
+    }
+
+    const storedLayout = getLayoutSettings()?.selectedLayout ?? DEFAULT_LAYOUT;
+    const isStoredLayoutInMap = LayoutMap.hasOwnProperty(storedLayout);
+    setLayout(
+      // reset to "stored" layout, use default if incompatible layout is used
+      storedLayout === 'LegacySpeaker' || !isStoredLayoutInMap
+        ? DEFAULT_LAYOUT
+        : storedLayout,
+    );
+  }, [hasScreenShare]);
+
+  const switchLayout = useCallback((newLayout: keyof typeof LayoutMap) => {
+    setLayout(newLayout);
+    localStorage.setItem(
+      SETTINGS_KEY,
+      JSON.stringify({ selectedLayout: newLayout }),
+    );
+  }, []);
+
+  return {
+    layout,
+    setLayout: switchLayout,
+  };
+};
diff --git a/sample-apps/react/react-dogfood/lib/getServerSideCredentialsProps.ts b/sample-apps/react/react-dogfood/lib/getServerSideCredentialsProps.ts
index c1ccf2f140..6ea29e4fb9 100644
--- a/sample-apps/react/react-dogfood/lib/getServerSideCredentialsProps.ts
+++ b/sample-apps/react/react-dogfood/lib/getServerSideCredentialsProps.ts
@@ -1,14 +1,20 @@
 import { GetServerSidePropsContext } from 'next';
 import { getServerSession } from 'next-auth';
 import { authOptions } from '../pages/api/auth/[...nextauth]';
-import { createToken } from '../helpers/jwt';
+import { createToken, decodeToken } from '../helpers/jwt';
 import type { User } from '@stream-io/video-react-sdk';
 
 export type ServerSideCredentialsProps = {
   user: User;
   userToken: string;
   apiKey: string;
-  gleapApiKey?: string;
+  gleapApiKey: string | null;
+};
+
+type QueryParams = {
+  api_key?: string;
+  token?: string;
+  user_id?: string;
 };
 
 export const getServerSideCredentialsProps = async (
@@ -24,32 +30,37 @@ export const getServerSideCredentialsProps = async (
     };
   }
 
-  const apiKey = process.env.STREAM_API_KEY as string;
+  const query = context.query as QueryParams;
+
+  const apiKey = query.api_key || (process.env.STREAM_API_KEY as string);
   const secretKey = process.env.STREAM_SECRET_KEY as string;
   const gleapApiKey = (process.env.GLEAP_API_KEY as string) || null;
 
-  const userIdOverride = context.query['user_id'] as string | undefined;
+  const userIdOverride = query.token
+    ? (decodeToken(query.token)['user_id'] as string | undefined)
+    : query.user_id;
   const userId = (
     userIdOverride ||
-    session.user?.email ||
+    session?.user?.name ||
     'unknown-user'
   ).replaceAll(' ', '_'); // Otherwise, SDP parse errors with MSID
 
   // Chat does not allow for Id's to include special characters
-  const streamUserId = userId
-    .replace(/[^_\-0-9a-zA-Z@]/g, '_')
-    .replace('@getstream_io', '');
+  const streamUserId = userId.replace(/[^_\-0-9a-zA-Z@]/g, '_');
   const userName = session.user?.name || userId;
+
+  const token = query.token || createToken(streamUserId, secretKey);
   return {
     props: {
       apiKey,
-      userToken: createToken(streamUserId, secretKey),
+      userToken: token,
       user: {
         id: streamUserId,
         name: userIdOverride || userName,
-        image: session.user?.image,
+        // @ts-expect-error - undefined is not serializable
+        image: session.user?.image || null,
       },
       gleapApiKey,
-    } as ServerSideCredentialsProps,
+    } satisfies ServerSideCredentialsProps,
   };
 };
diff --git a/sample-apps/react/react-dogfood/next.config.mjs b/sample-apps/react/react-dogfood/next.config.mjs
index fb82c95d6c..2775d492b0 100644
--- a/sample-apps/react/react-dogfood/next.config.mjs
+++ b/sample-apps/react/react-dogfood/next.config.mjs
@@ -9,6 +9,7 @@ const env = dotenv.config({ path: '.env.local' });
 const nextConfig = {
   env: env.parsed,
   productionBrowserSourceMaps: true,
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
   reactStrictMode: true,
   async headers() {
     return [
diff --git a/sample-apps/react/react-dogfood/package.json b/sample-apps/react/react-dogfood/package.json
index 0e0cbed01e..46e85cf210 100644
--- a/sample-apps/react/react-dogfood/package.json
+++ b/sample-apps/react/react-dogfood/package.json
@@ -3,40 +3,47 @@
   "packageManager": "yarn@3.2.4",
   "private": true,
   "scripts": {
+    "clean": "rimraf .next",
     "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@floating-ui/react": "^0.26.1",
-    "@mui/icons-material": "^5.14.14",
-    "@mui/material": "^5.14.14",
-    "@sentry/nextjs": "^7.54.0",
+    "@floating-ui/dom": "^1.5.4",
+    "@floating-ui/react": "^0.26.5",
+    "@next/third-parties": "^14.1.0",
+    "@sentry/nextjs": "^7.91.0",
     "@stream-io/video-react-sdk": "workspace:^",
     "@stream-io/video-styling": "workspace:^",
     "axios": "^1.6.0",
     "clsx": "^2.0.0",
     "dotenv": "^16.3.1",
-    "framer-motion": "^10.12.16",
-    "gleap": "^12.1.2",
+    "framer-motion": "^10.16.16",
+    "geojson": "^0.5.0",
+    "gleap": "^13.1.1",
     "hotkeys-js": "^3.12.0",
-    "nanoid": "^5.0.2",
-    "next": "^14.0.2",
+    "mapbox-gl": "^2.15.0",
+    "mobile-device-detect": "^0.4.3",
+    "nanoid": "^5.0.4",
+    "next": "^14.1.0",
     "next-auth": "^4.24.5",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-form": "^4.0.1",
     "starwars-names": "^1.6.0",
-    "stream-chat": "^8.13.0",
-    "stream-chat-react": "^10.14.0",
+    "stream-chat": "^8.14.4",
+    "stream-chat-react": "^11.2.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@types/starwars-names": "^1.6.0",
-    "@types/yargs": "^17.0.28",
-    "sass": "^1.69.3",
-    "source-map-loader": "^4.0.1",
-    "vercel": "^32.4.1"
+    "@types/geojson": "^7946.0.13",
+    "@types/mapbox-gl": "^2.7.19",
+    "@types/react-form": "^4.0.5",
+    "@types/starwars-names": "^1.6.2",
+    "@types/yargs": "^17.0.32",
+    "rimraf": "^5.0.5",
+    "sass": "^1.69.5",
+    "source-map-loader": "^4.0.1"
   }
 }
diff --git a/sample-apps/react/react-dogfood/pages/_app.tsx b/sample-apps/react/react-dogfood/pages/_app.tsx
index 0d5cc63df6..1334d46a5b 100644
--- a/sample-apps/react/react-dogfood/pages/_app.tsx
+++ b/sample-apps/react/react-dogfood/pages/_app.tsx
@@ -3,39 +3,13 @@ import '@stream-io/video-styling/dist/css/styles.css';
 import 'stream-chat-react/dist/css/v2/index.css';
 import '../style/index.scss';
 import { ComponentType } from 'react';
-import Head from 'next/head';
 import { Session } from 'next-auth';
+import Head from 'next/head';
+import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
 import { SessionProvider } from 'next-auth/react';
 import { StreamTheme } from '@stream-io/video-react-sdk';
-import { createTheme, CssBaseline, ThemeProvider } from '@mui/material';
 import { SettingsProvider } from '../context/SettingsContext';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      light: '#757ce8',
-      main: '#0361FC',
-      dark: '#002884',
-      contrastText: '#fff',
-    },
-    secondary: {
-      light: '#ff7961',
-      main: '#f44336',
-      dark: '#ba000d',
-      contrastText: '#000',
-    },
-  },
-  components: {
-    MuiAccordion: {
-      styleOverrides: {
-        root: {
-          backgroundColor: 'initial',
-          color: '#fff',
-        },
-      },
-    },
-  },
-});
+import { AppEnvironmentProvider } from '../context/AppEnvironmentContext';
 
 type AppProps = {
   Component: ComponentType;
@@ -44,55 +18,31 @@ type AppProps = {
   };
 };
 
+const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
+const GA_ID = process.env.NEXT_PUBLIC_GA_ID;
+
 export default function App({
   Component,
   pageProps: { session, ...pageProps },
 }: AppProps) {
   return (
-    <SessionProvider session={session}>
+    <SessionProvider
+      session={session}
+      basePath={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/api/auth`}
+    >
       <Head>
         <title>Stream Calls</title>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-        <link rel="shortcut icon" href="/favicon.ico" />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/favicon-16x16.png"
-        />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/apple-touch-icon.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="192x192"
-          href="/android-chrome-192x192.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="512x512"
-          href="/android-chrome-512x512.png"
-        />
       </Head>
-
-      <CssBaseline />
-      <ThemeProvider theme={theme}>
+      <AppEnvironmentProvider>
         <SettingsProvider>
           <StreamTheme>
             <Component {...pageProps} />
           </StreamTheme>
         </SettingsProvider>
-      </ThemeProvider>
+      </AppEnvironmentProvider>
+      {GTM_ID && <GoogleTagManager gtmId={GTM_ID} />}
+      {GA_ID && <GoogleAnalytics gaId={GA_ID} />}
     </SessionProvider>
   );
 }
diff --git a/sample-apps/react/react-dogfood/pages/_document.tsx b/sample-apps/react/react-dogfood/pages/_document.tsx
new file mode 100644
index 0000000000..0d60df77dc
--- /dev/null
+++ b/sample-apps/react/react-dogfood/pages/_document.tsx
@@ -0,0 +1,51 @@
+import { Head, Html, Main, NextScript } from 'next/document';
+
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <meta name="apple-itunes-app" content="app-id=1644313060" />
+        <link rel="shortcut icon" href={`${basePath}/favicon.ico`} />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href={`${basePath}/favicon-32x32.png`}
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href={`${basePath}/favicon-16x16.png`}
+        />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href={`${basePath}/apple-touch-icon.png`}
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="192x192"
+          href={`${basePath}/android-chrome-192x192.png`}
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="512x512"
+          href={`${basePath}/android-chrome-512x512.png`}
+        />
+        <link
+          href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css"
+          rel="stylesheet"
+        />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
diff --git a/sample-apps/react/react-dogfood/pages/account/delete.tsx b/sample-apps/react/react-dogfood/pages/account/delete.tsx
new file mode 100644
index 0000000000..ecc7cb3d3b
--- /dev/null
+++ b/sample-apps/react/react-dogfood/pages/account/delete.tsx
@@ -0,0 +1,34 @@
+/**
+ * Provides information to our users on how to delete their account.
+ */
+export default function DeleteAccountPage() {
+  return (
+    <main className="rt__delete-account">
+      <h1>Account Deletion Request</h1>
+      <p>
+        We're sorry to see you go. If you would like to delete your account,
+        please send an email to the following address:{' '}
+        <a href="mailto:privacy@getstream.io">privacy@getstream.io</a>.
+      </p>
+      <p>In your email, please include the following information:</p>
+      <ul>
+        <li>Subject Line: Account Deletion Request</li>
+        <li>The email address associated with your account</li>
+        <li>Any additional details you think are relevant to your request</li>
+      </ul>
+      <p>
+        Once we receive your email, our team will process your request as soon
+        as possible. Please note that account deletion is irreversible and will
+        result in the permanent loss of your account data.
+      </p>
+      <p>
+        If you have any questions or need further assistance, please don't
+        hesitate to contact our support team at{' '}
+        <a href="mailto:privacy@getstream.io">privacy@getstream.io</a>.
+      </p>
+      <br />
+      <p>Thank you for using our services,</p>
+      <p>Stream team.</p>
+    </main>
+  );
+}
diff --git a/sample-apps/react/react-dogfood/pages/api/auth/[...nextauth].ts b/sample-apps/react/react-dogfood/pages/api/auth/[...nextauth].ts
index 9a9a38f997..9dbb019d85 100644
--- a/sample-apps/react/react-dogfood/pages/api/auth/[...nextauth].ts
+++ b/sample-apps/react/react-dogfood/pages/api/auth/[...nextauth].ts
@@ -1,28 +1,84 @@
-import NextAuth, { CallbacksOptions, Profile } from 'next-auth';
-import GoogleProvider from 'next-auth/providers/google';
 import type { NextAuthOptions } from 'next-auth';
+import NextAuth from 'next-auth';
+import GoogleProvider, { GoogleProfile } from 'next-auth/providers/google';
+import {
+  CredentialInput,
+  CredentialsConfig,
+  Provider,
+} from 'next-auth/providers';
+import names from 'starwars-names';
 
-type Options = CallbacksOptions<Profile & { email_verified: boolean }>;
+type StreamDemoAccountCredentials = {
+  name: CredentialInput;
+};
+
+/**
+ * A custom provider that allows users to sign in with Stream Demo Account.
+ */
+const StreamDemoAccountProvider: CredentialsConfig<StreamDemoAccountCredentials> =
+  {
+    id: 'stream-demo-login',
+    name: 'Stream Demo account',
+    type: 'credentials',
+    credentials: {
+      name: {},
+    },
+    authorize: async (credentials) => {
+      const name = credentials?.name || names.random();
+      const id = name.replace(/[^_\-0-9a-zA-Z@]/g, '_');
+      return {
+        id,
+        name,
+      };
+    },
+  };
+
+const environment = (process.env.NEXT_PUBLIC_APP_ENVIRONMENT as string) || null;
+const isProntoEnvironment =
+  environment === 'pronto' || environment === 'pronto-next';
+
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
 
 export const authOptions: NextAuthOptions = {
   providers: [
-    GoogleProvider({
-      clientId: process.env.GOOGLE_CLIENT_ID!,
-      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
-    }),
-  ],
-  // @ts-ignore
+    !isProntoEnvironment && StreamDemoAccountProvider,
+    isProntoEnvironment &&
+      GoogleProvider({
+        clientId: process.env.GOOGLE_CLIENT_ID!,
+        clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+      }),
+  ].filter(Boolean) as Provider[],
   callbacks: {
     async signIn({ account, profile }) {
-      if (account?.provider === 'google') {
-        return (profile?.email_verified &&
-          profile?.email?.endsWith('@getstream.io')) as boolean;
+      if (isProntoEnvironment && account?.provider === 'google' && profile) {
+        const googleProfile = profile as GoogleProfile;
+        const { email_verified, email } = googleProfile;
+        // Only allow Stream employees to sign in "pronto" environment
+        const isStreamEmployee = email.endsWith('@getstream.io');
+        return email_verified && isStreamEmployee;
       }
-      return false;
+      return (
+        !isProntoEnvironment &&
+        account?.provider === StreamDemoAccountProvider.id
+      );
     },
-  } as Partial<Options>,
+    async redirect({ baseUrl, url }) {
+      // when running the demo on Vercel, we need to patch the baseUrl
+      if (process.env.VERCEL && environment === 'demo') {
+        baseUrl =
+          process.env.NEXT_PUBLIC_DEMO_ENVIRONMENT !== 'staging'
+            ? `https://getstream.io/${basePath}`
+            : `https://staging.getstream.io/${basePath}`;
+      }
+
+      // original implementation
+      if (url.startsWith('/')) return `${baseUrl}${url}`;
+      else if (new URL(url).origin === baseUrl) return url;
+      return baseUrl;
+    },
+  },
   pages: {
-    signIn: '/auth/signin',
+    signIn: `${basePath}/auth/signin`,
   },
 };
 
diff --git a/sample-apps/react/react-dogfood/pages/api/auth/create-token.ts b/sample-apps/react/react-dogfood/pages/api/auth/create-token.ts
index bb8614c032..857262f20e 100644
--- a/sample-apps/react/react-dogfood/pages/api/auth/create-token.ts
+++ b/sample-apps/react/react-dogfood/pages/api/auth/create-token.ts
@@ -1,6 +1,7 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { createToken, maxTokenValidityInSeconds } from '../../../helpers/jwt';
 import { SampleAppCallConfig } from '../call/sample';
+import type { AppEnvironment } from '../../../context/AppEnvironmentContext';
 
 const config: SampleAppCallConfig = JSON.parse(
   process.env.SAMPLE_APP_CALL_CONFIG || '{}',
@@ -14,8 +15,6 @@ if (!config['pronto']) {
   };
 }
 
-export type EnvironmentName = 'pronto' | 'demo' | string;
-
 export type CreateJwtTokenErrorResponse = {
   error: string;
 };
@@ -29,7 +28,7 @@ export type CreateJwtTokenResponse = {
 
 export type CreateJwtTokenRequest = {
   user_id: string;
-  environment?: EnvironmentName;
+  environment?: AppEnvironment;
   /** @deprecated */
   api_key?: string;
   [key: string]: string | string[] | undefined;
@@ -48,13 +47,13 @@ const createJwtToken = async (
 
   // support for the deprecated `api_key` param during the transition phase
   if (apiKeyFromRequest && !environment) {
-    if (apiKeyFromRequest === 'hd8szvscpxvd') environment = 'pronto';
+    if (apiKeyFromRequest === 'hd8szvscpxvd') environment = 'pronto-legacy';
     else if (apiKeyFromRequest === 'mmhfdzb5evj2') environment = 'demo';
     // https://getstream.slack.com/archives/C022N8JNQGZ/p1691402858403159
     else if (apiKeyFromRequest === '2g3htdemzwhg') environment = 'demo-flutter';
   }
 
-  const appConfig = config[(environment || 'demo') as EnvironmentName];
+  const appConfig = config[(environment || 'demo') as AppEnvironment];
   if (!appConfig) {
     return error(res, `'environment' parameter is invalid.`);
   }
diff --git a/sample-apps/react/react-dogfood/pages/api/call/create-server.ts b/sample-apps/react/react-dogfood/pages/api/call/create-server.ts
deleted file mode 100644
index e737462969..0000000000
--- a/sample-apps/react/react-dogfood/pages/api/call/create-server.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { StreamVideoServerClient } from '@stream-io/video-react-sdk';
-import yargs from 'yargs';
-import { meetingId } from '../../../lib/meetingId';
-
-const apiKey = process.env.STREAM_API_KEY as string;
-const secretKey = process.env.STREAM_SECRET_KEY as string;
-
-const createCallSlackHookAPI = async (
-  req: NextApiRequest,
-  res: NextApiResponse,
-) => {
-  const client = new StreamVideoServerClient(apiKey, {
-    browser: false,
-    secret: secretKey,
-    logLevel: 'info',
-  });
-
-  console.log(`Received input`, req.body);
-  const initiator = req.body.user_name || 'Stream Pronto Bot';
-  const { _, $0, ...args } = await yargs().parse(req.body.text || '');
-  const queryParams = new URLSearchParams(args as Record<string, string>);
-
-  // handle the special case /pronto --edges
-  if (queryParams.get('edges')) {
-    const message = await listAvailableEdges(client);
-    return res.status(200).json(message);
-  }
-
-  try {
-    let [type, id] = queryParams.get('cid')?.split(':') || [];
-    if (!id && type) {
-      id = type;
-      type = 'default';
-    }
-    const call = client.call(type || 'default', id || meetingId());
-    await call.getOrCreate({
-      ring: false,
-      data: {
-        created_by: {
-          id: 'pronto-hook',
-          name: 'Pronto Slack Hook',
-          role: 'bot',
-          teams: ['@stream-io/pronto'],
-        },
-      },
-    });
-    if (call) {
-      const protocol = req.headers['x-forwarded-proto']
-        ? 'https://'
-        : 'http://';
-
-      const joinUrl = [
-        protocol,
-        req.headers.host,
-        '/join/',
-        call.id,
-        queryParams.toString() && `?${queryParams.toString()}`,
-      ]
-        .filter(Boolean)
-        .join('');
-      return res.status(200).json({
-        response_type: 'in_channel',
-        blocks: [
-          {
-            type: 'section',
-            text: {
-              type: 'mrkdwn',
-              text: `${initiator} has invited you for a new Stream Call \n ${joinUrl}`,
-            },
-            accessory: {
-              type: 'button',
-              text: {
-                type: 'plain_text',
-                text: 'Join Now',
-                emoji: true,
-              },
-              url: joinUrl,
-              action_id: 'button-action',
-            },
-          },
-        ],
-      });
-    }
-    return res.status(200).json(notifyError('Failed to getOrCreateCall'));
-  } catch (e) {
-    console.error(e);
-    // @ts-ignore
-    return res.status(200).json(notifyError(e.message));
-  } finally {
-    await client.disconnectUser();
-  }
-};
-
-const notifyError = (message: string) => {
-  return {
-    response_type: 'ephemeral', // notify just the initiator
-    blocks: [
-      {
-        type: 'section',
-        text: {
-          type: 'mrkdwn',
-          text: `An error occurred: [\`${message}\`]`,
-        },
-      },
-    ],
-  };
-};
-
-const listAvailableEdges = async (client: StreamVideoServerClient) => {
-  const { edges } = await client.edges();
-  const message = edges
-    .map((edge) => {
-      const url = new URL(edge.latency_test_url);
-      url.pathname = '';
-      return `- ${edge.id}: ${url.toString()}`;
-    })
-    .join('\n');
-
-  // Slack limits the message size to 3000 characters
-  const limit = 2900;
-  const chunks = Math.ceil(message.length / limit);
-  const chunkedMessages = [
-    `
-    Static edges:
-    sfu-000c954.fdc-ams1.stream-io-video.com
-    sfu-039364a.lsw-ams1.stream-io-video.com
-    sfu-9c050b4.ovh-lon1.stream-io-video.com
-    sfu-9c0dc03.ovh-lim1.stream-io-video.com
-    sfu-9f0306f.eqx-nyc1.stream-io-video.com
-    sfu-a69b58a.blu-tal1.stream-io-video.com
-    sfu-e74550c.aws-sin1.stream-io-video.com
-    sfu-f079b1a.dpk-den1.stream-io-video.com
-    sfu-dd73d37.aws-mum1.stream-io-video.com
-    `,
-  ];
-  for (let i = 0; i < chunks; i++) {
-    chunkedMessages.push(message.substring(i * limit, (i + 1) * limit));
-  }
-
-  // https://app.slack.com/block-kit-builder/
-  // useful too for testing the formatting of the Slack messages
-  return {
-    response_type: 'ephemeral', // notify just the initiator
-    blocks: chunkedMessages.map((msg) => {
-      return {
-        type: 'section',
-        text: {
-          type: 'mrkdwn',
-          text: `Available edges: \`\`\`${msg.trim()}\`\`\``,
-        },
-      };
-    }),
-  };
-};
-
-export default createCallSlackHookAPI;
diff --git a/sample-apps/react/react-dogfood/pages/auth/signin.tsx b/sample-apps/react/react-dogfood/pages/auth/signin.tsx
index efb56934ad..29bc62bc99 100644
--- a/sample-apps/react/react-dogfood/pages/auth/signin.tsx
+++ b/sample-apps/react/react-dogfood/pages/auth/signin.tsx
@@ -1,57 +1,151 @@
-import { getProviders, signIn, useSession } from 'next-auth/react';
-import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-import { Button, Divider, Stack, Typography } from '@mui/material';
+import { type GetServerSidePropsContext } from 'next';
+import { getServerSession } from 'next-auth';
+import { signIn } from 'next-auth/react';
+import { useCallback, useEffect, useState } from 'react';
+import { Icon, useI18n } from '@stream-io/video-react-sdk';
+import names from 'starwars-names';
+import { useIsDemoEnvironment } from '../../context/AppEnvironmentContext';
+import { useSearchParams } from 'next/navigation';
 
-type Providers = ReturnType<typeof getProviders> extends Promise<infer R>
-  ? R
-  : never;
+import { authOptions } from '../api/auth/[...nextauth]';
 
-export default function SignIn({ providers }: { providers: Providers }) {
-  const { status } = useSession();
+type ProntoProvider = {
+  id: string;
+  name: string;
+  type: string;
+};
+type ProntoProviders = Record<string, ProntoProvider>;
 
-  const router = useRouter();
+export default function SignIn({
+  providers,
+  randomName,
+}: {
+  providers: ProntoProviders;
+  randomName: string;
+}) {
+  const { t } = useI18n();
+  const params = useSearchParams();
+  const callbackUrl =
+    params.get('callbackUrl') || process.env.NEXT_PUBLIC_BASE_PATH || '/';
 
+  const isDemoEnvironment = useIsDemoEnvironment();
+  return (
+    <div className="rd__auth">
+      <div className="rd__auth-content">
+        <img
+          className="rd__auth-image"
+          src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/auth.png`}
+          alt="Sign in"
+        />
+        <h1 className="rd__auth-heading">
+          {t('Stream')}
+          <span>{t('[Video Calling]')}</span>
+          {isDemoEnvironment && t('Demo')}
+        </h1>
+        <ul className="rd__auth-list">
+          {Object.values(providers || {}).map((provider) => {
+            if (provider.id === 'stream-demo-login') {
+              return (
+                <GuestLoginItem
+                  key={provider.id}
+                  provider={provider}
+                  randomName={randomName}
+                  callbackUrl={callbackUrl}
+                />
+              );
+            }
+            return (
+              <li key={provider.id} className="rd__auth-item">
+                <button
+                  className="rd__button rd__auth-provider"
+                  onClick={() => signIn(provider.id, { callbackUrl })}
+                  data-testid="sign-in-button"
+                >
+                  <Icon
+                    className="rd__button__icon rd__auth-provider__icon"
+                    icon="provider-google"
+                  />
+                  <span>{t(`Continue with ${provider.name}`)}</span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+const GuestLoginItem = (props: {
+  provider: ProntoProvider;
+  randomName: string;
+  callbackUrl: string;
+}) => {
+  const { provider, randomName, callbackUrl } = props;
+  const [name, setName] = useState(randomName);
+  const logIn = useCallback(
+    () => signIn(provider.id, { name, callbackUrl }),
+    [callbackUrl, name, provider.id],
+  );
+  const params = useSearchParams();
+  const fromQR = params.get('from_qr');
   useEffect(() => {
-    if (status === 'authenticated') {
-      const returnUrl = (router.query['callbackUrl'] as string) || '/';
-      router.push(returnUrl);
+    if (fromQR) {
+      // log in immediately if from QR code - no need to enter name
+      // as it anyway doesn't have any effect inside the mobile app
+      // https://getstream.slack.com/archives/C01CG3P80LV/p1704390875184309
+      logIn().catch((err) => {
+        console.error('Error logging in:', err);
+      });
     }
-  }, [router, status]);
-
+  }, [fromQR, logIn]);
   return (
-    <>
-      <Stack
-        direction="row"
-        justifyContent="center"
-        alignItems="center"
-        spacing={2}
-        flexGrow={1}
+    <li className="rd__auth-item rd__auth-item--guest-login">
+      <div className="rd__auth-item--guest_name_wrapper">
+        <span>Your name:</span>
+        <input
+          className="rd__input"
+          type="text"
+          value={name}
+          maxLength={25}
+          onChange={(e) => setName(e.target.value)}
+          onKeyUp={(e) => e.key === 'Enter' && logIn()}
+        />
+      </div>
+      <button
+        className="rd__button rd__button--primary rd__auth-provider"
+        onClick={logIn}
+        data-testid="guest-sign-in-button"
       >
-        <Stack spacing={2}>
-          <Typography variant="h2">Stream Meetings</Typography>
-          <Divider />
-          {Object.values(providers!).map((provider) => (
-            <div key={provider.name}>
-              <Button
-                data-testid="sign-in-button"
-                variant="contained"
-                fullWidth
-                onClick={() => signIn(provider.id)}
-              >
-                Sign in with your Google Stream account
-              </Button>
-            </div>
-          ))}
-        </Stack>
-      </Stack>
-    </>
+        Continue
+      </button>
+    </li>
+  );
+};
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const session = await getServerSession(context.req, context.res, authOptions);
+  if (session) {
+    // redirect to "base path" if already signed in
+    return {
+      redirect: {
+        destination: '/',
+      },
+    };
+  }
+
+  const providers = authOptions.providers.reduce<ProntoProviders>(
+    (acc, { id, name, type }) => {
+      acc[id] = { id, name, type };
+      return acc;
+    },
+    {},
   );
-}
 
-export async function getServerSideProps() {
-  const providers = await getProviders();
   return {
-    props: { providers },
+    props: {
+      providers,
+      randomName: names.random(),
+    },
   };
 }
diff --git a/sample-apps/react/react-dogfood/pages/guest/index.tsx b/sample-apps/react/react-dogfood/pages/guest/index.tsx
index 0dfaf31746..3b747e50f1 100644
--- a/sample-apps/react/react-dogfood/pages/guest/index.tsx
+++ b/sample-apps/react/react-dogfood/pages/guest/index.tsx
@@ -1,13 +1,11 @@
-import { Box, Button, Input, Stack, Typography } from '@mui/material';
 import { useSearchParams } from 'next/navigation';
-import { useRouter } from 'next/router';
+import Link from 'next/link';
 import { useEffect, useState } from 'react';
-import { LobbyHeader } from '../../components/LobbyHeader';
 import { meetingId } from '../../lib/meetingId';
+import { DefaultAppHeader } from '../../components/DefaultAppHeader';
 
 export default function Guest() {
   const params = useSearchParams();
-  const router = useRouter();
 
   const callIdFromQuery = params.get('callId');
   const nameFromQuery = params.get('name') || 'Guest';
@@ -26,71 +24,55 @@ export default function Guest() {
 
   return (
     <>
-      <LobbyHeader />
-      <Stack
-        direction="row"
-        justifyContent="center"
-        alignItems="center"
-        spacing={2}
-        flexGrow={1}
-      >
-        <Stack spacing={2} alignItems="center" flexGrow={1}>
-          <Box padding={2}>
-            <Typography variant="h2" textAlign="center">
-              Stream Meetings
-            </Typography>
-            <Typography variant="h5" textAlign="center">
-              Guest Mode
-            </Typography>
-          </Box>
-          <Stack direction="row" gap="10px">
-            <Input
-              classes={{
-                input: `rd__input rd__input--underlined rd__join-call-input`,
-              }}
-              placeholder="Meeting ID"
-              value={callId}
-              onChange={(e) => {
-                setCallId(e.target.value);
-              }}
+      <DefaultAppHeader />
+      <div className="rd__guest-page rd__home">
+        <div className="rd__guest-page__content">
+          <div className="rd__guest-page__header">
+            <img
+              className="rd__home-image"
+              src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/home.png`}
+              alt="Home"
             />
-            <Input
-              classes={{
-                input: `rd__input rd__input--underlined rd__join-call-input`,
-              }}
-              placeholder="Your name"
-              value={name}
-              onChange={(e) => {
-                setName(e.target.value);
-              }}
-            />
-          </Stack>
-          <Stack gap="10px">
-            <Button
-              disabled={!callId || !name}
-              data-testid="join-call-as-guest-button"
-              variant="contained"
-              onClick={() => {
-                router.push(
-                  `/guest/join/${callId}?mode=guest&guest_user_id=${name}`,
-                );
-              }}
-            >
-              Join as Guest
-            </Button>
-            <Button
-              disabled={!callId || !name}
-              data-testid="join-call-as-anon-button"
-              variant="outlined"
-              onClick={() => {
-                router.push(`/guest/join/${callId}?mode=anon`);
-              }}
-            >
-              Continue Anonymously
-            </Button>
-          </Stack>
-        </Stack>
-      </Stack>
+            <h1 className="rd__home-heading">
+              Stream
+              <span>[Video Calling]</span>
+            </h1>
+            <p className="rd__home-description">
+              Start a new call or join an existing one by providing its Call ID
+            </p>
+            <div className="rd__guest-page__config">
+              <input
+                type="text"
+                className="rd__input rd__input--underlined rd__join-call-input"
+                placeholder="Meeting ID"
+                value={callId}
+                onChange={(e) => setCallId(e.target.value)}
+              />
+              <input
+                type="text"
+                className="rd__input rd__input--underlined rd__join-call-input"
+                placeholder="Your name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+            <div className="rd__guest-page__buttons">
+              <Link
+                className="rd__link rd__link--faux-button rd__link--primary"
+                data-testid="join-call-as-guest-button"
+                href={`/guest/join/${callId}?mode=guest&guest_user_id=${name}`}
+                children="Join as Guest"
+              />
+              <Link
+                className="rd__link rd__link--faux-button"
+                data-testid="join-call-as-anon-button"
+                href={`/guest/join/${callId}?mode=anon`}
+                children="Join Anonimously"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/sample-apps/react/react-dogfood/pages/guest/join/[guestCallId].tsx b/sample-apps/react/react-dogfood/pages/guest/join/[guestCallId].tsx
index 2d40da8e91..49cc540007 100644
--- a/sample-apps/react/react-dogfood/pages/guest/join/[guestCallId].tsx
+++ b/sample-apps/react/react-dogfood/pages/guest/join/[guestCallId].tsx
@@ -11,6 +11,7 @@ import {
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { MeetingUI } from '../../../components';
+import { type UserMode } from '../../../components/Lobby';
 import { createToken } from '../../../helpers/jwt';
 import { useEffect, useState } from 'react';
 import { useGleap } from '../../../hooks/useGleap';
@@ -33,7 +34,7 @@ export default function GuestCallRoom(props: GuestCallRoomProps) {
   const router = useRouter();
   const callId = router.query['guestCallId'] as string;
   const callType = (router.query['type'] as string) || 'default';
-  const mode = (router.query['mode'] as 'anon' | 'guest') || 'anon';
+  const mode = (router.query['mode'] as UserMode) || 'anon';
   const guestUserId = (router.query['guest_user_id'] as string) || 'Guest';
 
   const [client, setClient] = useState<StreamVideoClient>();
@@ -41,7 +42,7 @@ export default function GuestCallRoom(props: GuestCallRoomProps) {
     const userToConnect: User =
       mode === 'anon'
         ? { type: 'anonymous' }
-        : { id: guestUserId, type: 'guest' };
+        : { id: guestUserId, name: guestUserId, type: 'guest' };
     const tokenToUse = mode === 'anon' ? token : undefined;
     const _client = new StreamVideoClient({
       apiKey,
@@ -89,7 +90,7 @@ export default function GuestCallRoom(props: GuestCallRoomProps) {
     });
   }, [call]);
 
-  useGleap(gleapApiKey, client, user);
+  useGleap(gleapApiKey, client, call, user);
 
   if (!client || !call) {
     return null;
@@ -102,7 +103,7 @@ export default function GuestCallRoom(props: GuestCallRoomProps) {
       </Head>
       <StreamVideo client={client}>
         <StreamCall call={call}>
-          <MeetingUI enablePreview={mode !== 'anon'} />
+          <MeetingUI mode={mode} />
         </StreamCall>
       </StreamVideo>
     </>
diff --git a/sample-apps/react/react-dogfood/pages/index.tsx b/sample-apps/react/react-dogfood/pages/index.tsx
index 9cb1b1c8da..9523b0846e 100644
--- a/sample-apps/react/react-dogfood/pages/index.tsx
+++ b/sample-apps/react/react-dogfood/pages/index.tsx
@@ -7,32 +7,30 @@ import {
   useRef,
   useState,
 } from 'react';
+import { GetServerSideProps } from 'next/types';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
-import PhotoCameraFrontIcon from '@mui/icons-material/PhotoCameraFront';
-import { Box, Button, Stack, Typography } from '@mui/material';
-import { StreamI18nProvider, useI18n } from '@stream-io/video-react-sdk';
+import clsx from 'clsx';
 
-import { LobbyHeader } from '../components/LobbyHeader';
+import { Icon, StreamI18nProvider, useI18n } from '@stream-io/video-react-sdk';
 
 import { meetingId } from '../lib/meetingId';
 import translations from '../translations';
 import { useSettings } from '../context/SettingsContext';
-import { Countdown } from '../components/Countdown';
+import { DefaultAppHeader } from '../components/DefaultAppHeader';
+import { useIsDemoEnvironment } from '../context/AppEnvironmentContext';
 
-type HomeProps = {
-  launchDeadlineTimestamp: number;
-};
-
-export default function Home({ launchDeadlineTimestamp }: HomeProps) {
+export default function Home() {
   const { data: session, status } = useSession();
   const {
-    settings: { language },
+    settings: { language, fallbackLanguage },
   } = useSettings();
 
   useEffect(() => {
     if (status === 'unauthenticated') {
-      void signIn();
+      signIn().catch((err) => {
+        console.error('Sign in error', err);
+      });
     }
   }, [status]);
 
@@ -44,53 +42,26 @@ export default function Home({ launchDeadlineTimestamp }: HomeProps) {
     <StreamI18nProvider
       translationsOverrides={translations}
       language={language}
+      fallbackLanguage={fallbackLanguage}
     >
-      <HomeContent launchDeadlineTimestamp={launchDeadlineTimestamp} />
+      <HomeContent />
     </StreamI18nProvider>
   );
 }
 
-const HomeContent = ({ launchDeadlineTimestamp }: HomeProps) => {
-  const { t } = useI18n();
-
-  return (
-    <>
-      <LobbyHeader />
-      <Stack
-        direction="row"
-        justifyContent="center"
-        alignItems="center"
-        spacing={2}
-        flexGrow={1}
-      >
-        <Stack spacing={2} alignItems="center" flexGrow={1}>
-          <Box padding={2}>
-            <Typography variant="h2" textAlign="center">
-              {t('Stream Meetings')}
-            </Typography>
-          </Box>
-          <JoinCallForm />
-        </Stack>
-      </Stack>
-      <Countdown deadlineTimestamp={launchDeadlineTimestamp} />
-    </>
-  );
-};
-
-const JoinCallForm = () => {
+const HomeContent = () => {
   const { t } = useI18n();
   const router = useRouter();
   const ref = useRef<HTMLInputElement | null>(null);
+
   const [disabled, setDisabled] = useState(true);
+
   const onJoin = useCallback(() => {
     router.push(`join/${ref.current!.value}`);
   }, [ref, router]);
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
-    (e) =>
-      setDisabled(() => {
-        return e.target.value.length < 3;
-      }),
+    (e) => setDisabled(() => e.target.value.length < 3),
     [],
   );
 
@@ -103,56 +74,89 @@ const JoinCallForm = () => {
     },
     [onJoin, disabled],
   );
+  const isDemoEnvironment = useIsDemoEnvironment();
   return (
-    <div
-      style={{
-        maxWidth: '300px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '1rem',
-      }}
-    >
-      {disabled ? (
-        <Link href={`/join/${meetingId()}`} legacyBehavior>
-          <Button
+    <>
+      <DefaultAppHeader />
+      <div className="rd__home">
+        <div className="rd__home-content">
+          <img
+            className="rd__home-image"
+            src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/home.png`}
+            alt="Home"
+          />
+          <h1 className="rd__home-heading">
+            {t('Stream')}
+            <span>{t('[Video Calling]')}</span>
+            {isDemoEnvironment && t('Demo')}
+          </h1>
+          <p className="rd__home-description">
+            Start a new call or join an existing one by providing its Call ID
+          </p>
+          <div className="rd__home-join">
+            <input
+              className="rd__input rd__home-input"
+              data-testid="join-call-input"
+              ref={ref}
+              onChange={handleChange}
+              onKeyUp={handleKeyUp}
+              placeholder={t('Call ID')}
+            />
+            <button
+              className={clsx(
+                'rd__home-new rd__button rd__button__join',
+                !disabled && 'rd__button--primary',
+              )}
+              data-testid="join-call-button"
+              disabled={disabled}
+              onClick={onJoin}
+            >
+              <Icon className="rd__button__icon" icon="login" />
+              {t('Join call')}
+            </button>
+          </div>
+          <Link
+            href={`/join/${meetingId()}`}
+            className={clsx(
+              'rd__home-new rd__link rd__link--faux-button',
+              disabled && 'rd__link--primary',
+            )}
             data-testid="create-and-join-meeting-button"
-            variant="contained"
-            fullWidth
           >
-            <PhotoCameraFrontIcon sx={{ mr: 1 }} />
-            {t('New meeting')}
-          </Button>
-        </Link>
-      ) : (
-        <Button
-          data-testid="join-call-button"
-          variant="contained"
-          onClick={onJoin}
-        >
-          {t('Join')}
-        </Button>
-      )}
-      <input
-        className="rd__input rd__input--underlined rd__join-call-input"
-        data-testid="join-call-input"
-        ref={ref}
-        onChange={handleChange}
-        onKeyUp={handleKeyUp}
-        placeholder={t('Or join a call with code')}
-      />
-    </div>
+            <Icon className="rd__link__icon" icon="camera-add" />
+            {t('Start new call')}
+          </Link>
+          <Link
+            href={`/join/${meetingId()}?type=restricted`}
+            className="rd__home-new rd__link rd__link--faux-button"
+            data-testid="create-and-join-restricted-meeting-button"
+          >
+            <Icon className="rd__link__icon" icon="camera-add" />
+            {t('Start new restricted call')}
+          </Link>
+        </div>
+      </div>
+    </>
   );
 };
 
-export const getServerSideProps = async () => {
-  const launchDeadlineTimestamp = new Date(
-    new Date(process.env.LAUNCH_DEADLINE || '2023-06-01T00:00:00Z').getTime() +
-      12 * 3600 * 1000,
-  ).getTime();
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  if (process.env.NEXT_PUBLIC_APP_ENVIRONMENT === 'demo') {
+    const { query } = ctx;
+    const params = new URLSearchParams(query as Record<string, string>);
+    const callId = params.get('id') || meetingId();
+    params.set('id', callId);
+
+    // support the legacy https://getstream.io/video/demos?id=<call-id>
+    return {
+      redirect: {
+        destination: `/join/${callId}?${params.toString()}`,
+        permanent: false,
+      },
+    };
+  }
 
   return {
-    props: {
-      launchDeadlineTimestamp,
-    } as HomeProps,
+    props: {},
   };
 };
diff --git a/sample-apps/react/react-dogfood/pages/join/[callId].tsx b/sample-apps/react/react-dogfood/pages/join/[callId].tsx
index 5ec3d8afd3..74baaf5883 100644
--- a/sample-apps/react/react-dogfood/pages/join/[callId].tsx
+++ b/sample-apps/react/react-dogfood/pages/join/[callId].tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import {
   Call,
   CallingState,
+  CallRequest,
   StreamCall,
   StreamVideo,
   StreamVideoClient,
@@ -17,44 +18,76 @@ import {
 } from '../../lib/getServerSideCredentialsProps';
 import { useGleap } from '../../hooks/useGleap';
 import { useSettings } from '../../context/SettingsContext';
+import {
+  useAppEnvironment,
+  useIsDemoEnvironment,
+} from '../../context/AppEnvironmentContext';
+import { TourProvider } from '../../context/TourContext';
 import appTranslations from '../../translations';
 import { customSentryLogger } from '../../helpers/logger';
 import {
   defaultRequestTransformers,
   defaultResponseTransformers,
 } from '../../helpers/axiosApiTransformers';
-import {
+import type {
   CreateJwtTokenRequest,
   CreateJwtTokenResponse,
-  EnvironmentName,
 } from '../api/auth/create-token';
 
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
 const CallRoom = (props: ServerSideCredentialsProps) => {
   const router = useRouter();
   const {
-    settings: { language },
+    settings: { language, fallbackLanguage },
   } = useSettings();
   const callId = router.query['callId'] as string;
   const callType = (router.query['type'] as string) || 'default';
 
-  const { user, gleapApiKey } = props;
+  // support for connecting to any application using an API key and user token
+  const apiKeyOverride = !!router.query['api_key'];
 
+  const isDemoEnvironment = useIsDemoEnvironment();
+  useEffect(() => {
+    if (!isDemoEnvironment) return;
+    // For backwards compatibility, we need to append `?id=${callId}` to the URL
+    // if it's not already there.
+    // Otherwise, deep links in the mobile apps won't work.
+    const id = router.query['id'] as string | undefined;
+    if (id !== callId) {
+      router
+        .replace({
+          pathname: router.pathname,
+          query: { ...router.query, id: callId },
+        })
+        .catch((err) => console.error('Failed to replace router', err));
+    }
+  }, [callId, isDemoEnvironment, router]);
+
+  const { apiKey, userToken, user, gleapApiKey } = props;
+
+  const environment = useAppEnvironment();
   const fetchAuthDetails = useCallback(
     async (init?: RequestInit) => {
-      const environment = process.env.NEXT_PUBLIC_APP_ENVIRONMENT as
-        | EnvironmentName
-        | undefined;
+      if (apiKeyOverride) {
+        return {
+          apiKey,
+          token: userToken,
+          userId: user.id || '!anon',
+        } satisfies CreateJwtTokenResponse;
+      }
+
       const params = {
         user_id: user.id || '!anon',
-        environment: environment || 'pronto',
+        environment,
         exp: String(4 * 60 * 60), // 4 hours
       } satisfies CreateJwtTokenRequest;
       return fetch(
-        `/api/auth/create-token?${new URLSearchParams(params)}`,
+        `${basePath}/api/auth/create-token?${new URLSearchParams(params)}`,
         init,
       ).then((res) => res.json() as Promise<CreateJwtTokenResponse>);
     },
-    [user.id],
+    [apiKey, apiKeyOverride, environment, user.id, userToken],
   );
 
   const tokenProvider = useCallback(
@@ -127,12 +160,37 @@ const CallRoom = (props: ServerSideCredentialsProps) => {
   }, [callId, callType, client]);
 
   useEffect(() => {
-    call?.getOrCreate().catch((err) => {
+    if (!call) return;
+    // "restricted" is a special call type that only allows
+    // `call_member` role to join the call
+    const data: CallRequest =
+      callType === 'restricted'
+        ? { members: [{ user_id: user.id || '!anon', role: 'call_member' }] }
+        : {};
+
+    call.getOrCreate({ data }).catch((err) => {
       console.error(`Failed to get or create call`, err);
     });
-  }, [call]);
+  }, [call, callType, user.id]);
 
-  useGleap(gleapApiKey, client, user);
+  // apple-itunes-app meta-tag is used to open the app from the browser
+  // we need to update the app-argument to the current URL so that the app
+  // can open the correct call
+  useEffect(() => {
+    const appleItunesAppMeta = document
+      .getElementsByTagName('meta')
+      .namedItem('apple-itunes-app');
+    if (appleItunesAppMeta) {
+      appleItunesAppMeta.setAttribute(
+        'content',
+        `app-id=1644313060, app-argument=${window.location.href
+          .replace('http://', 'streamvideo://')
+          .replace('https://', 'streamvideo://')}`,
+      );
+    }
+  }, []);
+
+  useGleap(gleapApiKey, client, call, user);
 
   if (!client || !call) return null;
 
@@ -142,13 +200,17 @@ const CallRoom = (props: ServerSideCredentialsProps) => {
         <title>Stream Calls: {callId}</title>
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
+
       <StreamVideo
         client={client}
         language={language}
+        fallbackLanguage={fallbackLanguage}
         translationsOverrides={appTranslations}
       >
         <StreamCall call={call}>
-          <MeetingUI chatClient={chatClient} />
+          <TourProvider>
+            <MeetingUI chatClient={chatClient} />
+          </TourProvider>
         </StreamCall>
       </StreamVideo>
     </>
diff --git a/sample-apps/react/react-dogfood/pages/leave/[callId].tsx b/sample-apps/react/react-dogfood/pages/leave/[callId].tsx
new file mode 100644
index 0000000000..b4ec2b0092
--- /dev/null
+++ b/sample-apps/react/react-dogfood/pages/leave/[callId].tsx
@@ -0,0 +1,42 @@
+import { useRouter } from 'next/router';
+
+import { StreamI18nProvider } from '@stream-io/video-react-sdk';
+
+import { Feedback } from '../../components/Feedback/Feedback';
+import { DefaultAppHeader } from '../../components/DefaultAppHeader';
+
+import translations from '../../translations';
+import { useSettings } from '../../context/SettingsContext';
+
+export default function Leave() {
+  const {
+    settings: { language, fallbackLanguage },
+  } = useSettings();
+
+  return (
+    <StreamI18nProvider
+      translationsOverrides={translations}
+      language={language}
+      fallbackLanguage={fallbackLanguage}
+    >
+      <LeaveContent />
+    </StreamI18nProvider>
+  );
+}
+
+const LeaveContent = () => {
+  const router = useRouter();
+
+  const callId = router.query['callId'] as string;
+
+  return (
+    <>
+      <DefaultAppHeader />
+      <div className="rd__leave">
+        <div className="rd__leave-content">
+          <Feedback inMeeting={false} callId={callId} />
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/sample-apps/react/react-dogfood/pages/sentry_sample_error.tsx b/sample-apps/react/react-dogfood/pages/sentry_sample_error.tsx
deleted file mode 100644
index b2b4d54023..0000000000
--- a/sample-apps/react/react-dogfood/pages/sentry_sample_error.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Head from 'next/head';
-
-const boxStyles = {
-  padding: '12px',
-  border: '1px solid #eaeaea',
-  borderRadius: '10px',
-};
-export default function Home() {
-  return (
-    <div>
-      <Head>
-        <title>Sentry Onboarding</title>
-        <meta name="description" content="Make your Next.js ready for Sentry" />
-      </Head>
-
-      <main
-        style={{
-          minHeight: '100vh',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <h1 style={{ fontSize: '4rem' }}>
-          <svg
-            style={{
-              height: '1em',
-            }}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 200 44"
-          >
-            <path
-              fill="currentColor"
-              d="M124.32,28.28,109.56,9.22h-3.68V34.77h3.73V15.19l15.18,19.58h3.26V9.22h-3.73ZM87.15,23.54h13.23V20.22H87.14V12.53h14.93V9.21H83.34V34.77h18.92V31.45H87.14ZM71.59,20.3h0C66.44,19.06,65,18.08,65,15.7c0-2.14,1.89-3.59,4.71-3.59a12.06,12.06,0,0,1,7.07,2.55l2-2.83a14.1,14.1,0,0,0-9-3c-5.06,0-8.59,3-8.59,7.27,0,4.6,3,6.19,8.46,7.52C74.51,24.74,76,25.78,76,28.11s-2,3.77-5.09,3.77a12.34,12.34,0,0,1-8.3-3.26l-2.25,2.69a15.94,15.94,0,0,0,10.42,3.85c5.48,0,9-2.95,9-7.51C79.75,23.79,77.47,21.72,71.59,20.3ZM195.7,9.22l-7.69,12-7.64-12h-4.46L186,24.67V34.78h3.84V24.55L200,9.22Zm-64.63,3.46h8.37v22.1h3.84V12.68h8.37V9.22H131.08ZM169.41,24.8c3.86-1.07,6-3.77,6-7.63,0-4.91-3.59-8-9.38-8H154.67V34.76h3.8V25.58h6.45l6.48,9.2h4.44l-7-9.82Zm-10.95-2.5V12.6h7.17c3.74,0,5.88,1.77,5.88,4.84s-2.29,4.86-5.84,4.86Z M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z"
-            ></path>
-          </svg>
-        </h1>
-
-        <p>Get started by sending us a sample error</p>
-        <button
-          type="button"
-          style={{
-            ...boxStyles,
-            backgroundColor: '#c73852',
-            borderRadius: '12px',
-            border: 'none',
-          }}
-          onClick={() => {
-            throw new Error('Sentry Frontend Error');
-          }}
-        >
-          Throw error
-        </button>
-
-        <p>
-          For more information, see{' '}
-          <a href="https://docs.sentry.io/platforms/javascript/guides/nextjs/">
-            https://docs.sentry.io/platforms/javascript/guides/nextjs/
-          </a>
-        </p>
-      </main>
-    </div>
-  );
-}
diff --git a/sample-apps/react/react-dogfood/public/.well-known/apple-app-site-association b/sample-apps/react/react-dogfood/public/.well-known/apple-app-site-association
index 1ece1da99a..239e31e614 100644
--- a/sample-apps/react/react-dogfood/public/.well-known/apple-app-site-association
+++ b/sample-apps/react/react-dogfood/public/.well-known/apple-app-site-association
@@ -4,6 +4,7 @@
     "details": [
       {
         "appIDs": [
+          "EHV7XZLAHA.io.getstream.iOS.VideoDemoApp",
           "EHV7XZLAHA.io.getstream.iOS.stream-calls-dogfood",
           "EHV7XZLAHA.io.getstream.rnvideosample",
           "EHV7XZLAHA.io.getstream.video.flutter.dogfooding"
diff --git a/sample-apps/react/react-dogfood/public/.well-known/assetlinks.json b/sample-apps/react/react-dogfood/public/.well-known/assetlinks.json
index 79918d22cc..cbb67eb0b8 100644
--- a/sample-apps/react/react-dogfood/public/.well-known/assetlinks.json
+++ b/sample-apps/react/react-dogfood/public/.well-known/assetlinks.json
@@ -19,6 +19,26 @@
       ]
     }
   },
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "io.getstream.video.android",
+      "sha256_cert_fingerprints": [
+        "FF:22:58:F1:13:99:AA:E4:57:FD:E9:86:34:A8:60:BB:17:F0:9D:A4:31:DA:AD:E3:7B:1C:9A:27:99:2F:5F:22"
+      ]
+    }
+  },
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "io.getstream.video.android.debug",
+      "sha256_cert_fingerprints": [
+        "1B:28:0D:4F:73:47:7F:59:8D:EE:7F:C8:3D:44:61:D3:51:12:AC:A1:3E:98:E1:16:55:70:AB:B6:AB:55:99:93"
+      ]
+    }
+  },
   {
     "relation": ["delegate_permission/common.handle_all_urls"],
     "target": {
diff --git a/sample-apps/react/react-dogfood/public/auth.png b/sample-apps/react/react-dogfood/public/auth.png
new file mode 100644
index 0000000000..dd0f25333b
Binary files /dev/null and b/sample-apps/react/react-dogfood/public/auth.png differ
diff --git a/sample-apps/react/react-dogfood/public/chat.png b/sample-apps/react/react-dogfood/public/chat.png
new file mode 100644
index 0000000000..13d122c34a
Binary files /dev/null and b/sample-apps/react/react-dogfood/public/chat.png differ
diff --git a/sample-apps/react/react-dogfood/public/feedback.png b/sample-apps/react/react-dogfood/public/feedback.png
new file mode 100644
index 0000000000..ea1b812880
Binary files /dev/null and b/sample-apps/react/react-dogfood/public/feedback.png differ
diff --git a/sample-apps/react/react-dogfood/public/home.png b/sample-apps/react/react-dogfood/public/home.png
new file mode 100644
index 0000000000..e2d37f699c
Binary files /dev/null and b/sample-apps/react/react-dogfood/public/home.png differ
diff --git a/sample-apps/react/react-dogfood/public/lock-person.svg b/sample-apps/react/react-dogfood/public/lock-person.svg
new file mode 100644
index 0000000000..fa5db86225
--- /dev/null
+++ b/sample-apps/react/react-dogfood/public/lock-person.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2852 11.6035C17.9852 11.6035 18.6552 11.7035 19.2852 11.8935V10.6035C19.2852 9.50352 18.3852 8.60352 17.2852 8.60352H16.2852V6.60352C16.2852 3.84352 14.0452 1.60352 11.2852 1.60352C8.52516 1.60352 6.28516 3.84352 6.28516 6.60352V8.60352H5.28516C4.18516 8.60352 3.28516 9.50352 3.28516 10.6035V20.6035C3.28516 21.7035 4.18516 22.6035 5.28516 22.6035H11.5452C10.7552 21.4735 10.2852 20.0935 10.2852 18.6035C10.2852 14.7335 13.4152 11.6035 17.2852 11.6035ZM8.18516 6.60352C8.18516 4.89352 9.57516 3.50352 11.2852 3.50352C12.9952 3.50352 14.3852 4.89352 14.3852 6.60352V8.60352H8.18516V6.60352Z" fill="#E3E4E5"/>
+<path d="M17.2852 13.6035C14.5252 13.6035 12.2852 15.8435 12.2852 18.6035C12.2852 21.3635 14.5252 23.6035 17.2852 23.6035C20.0452 23.6035 22.2852 21.3635 22.2852 18.6035C22.2852 15.8435 20.0452 13.6035 17.2852 13.6035ZM17.2852 15.6035C18.1152 15.6035 18.7852 16.2735 18.7852 17.1035C18.7852 17.9335 18.1152 18.6035 17.2852 18.6035C16.4552 18.6035 15.7852 17.9335 15.7852 17.1035C15.7852 16.2735 16.4552 15.6035 17.2852 15.6035ZM17.2852 21.6035C16.2552 21.6035 15.3452 21.0835 14.8052 20.2835C15.5352 19.8635 16.3752 19.6035 17.2852 19.6035C18.1952 19.6035 19.0352 19.8635 19.7652 20.2835C19.2252 21.0835 18.3152 21.6035 17.2852 21.6035Z" fill="#E3E4E5"/>
+</svg>
diff --git a/sample-apps/react/react-dogfood/public/server-status.png b/sample-apps/react/react-dogfood/public/server-status.png
new file mode 100644
index 0000000000..88523b3252
Binary files /dev/null and b/sample-apps/react/react-dogfood/public/server-status.png differ
diff --git a/sample-apps/react/react-dogfood/public/stream-logo.svg b/sample-apps/react/react-dogfood/public/stream-logo.svg
deleted file mode 100644
index 4e2e185f8f..0000000000
--- a/sample-apps/react/react-dogfood/public/stream-logo.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_4974_51952)">
-        <rect width="32" height="32" transform="translate(0.00390625)" fill="url(#paint0_linear_4974_51952)"/>
-    </g>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.4687 13.7422L25.8662 13.2701C26.2885 13.2389 26.5544 13.7343 26.3075 14.0923L21.8321 20.5816C21.7383 20.7177 21.5872 20.7984 21.4262 20.7984H11.3903C11.2296 20.7984 11.0787 20.718 10.9848 20.5821L6.49758 14.0928C6.25009 13.7349 6.51597 13.2388 6.9386 13.2701L13.3166 13.7422L16.0407 10.5718C16.2404 10.3395 16.5902 10.3408 16.7881 10.5748L19.4687 13.7422ZM20.8084 19.7696L16.6565 18.1543V19.7696H20.8084ZM16.1568 19.7696V18.1543L12.0049 19.7696H16.1568ZM15.6777 17.7684L11.4357 19.4168L8.31483 14.9009L15.6777 17.7684ZM17.127 17.7684L21.369 19.4168L24.4899 14.9009L17.127 17.7684ZM16.1608 17.3915V11.9562L12.6923 16.0323L16.1608 17.3915ZM16.6565 17.3915V11.9569L20.1251 16.0323L16.6565 17.3915ZM11.6752 15.6565L12.4732 14.723L8.57432 14.4321L11.6752 15.6565ZM21.1005 15.6565L20.3025 14.723L24.2014 14.4321L21.1005 15.6565Z" fill="white"/>
-    <defs>
-        <linearGradient id="paint0_linear_4974_51952" x1="16" y1="0" x2="16" y2="32" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#006CFF"/>
-            <stop offset="0.27473" stop-color="#006CFF" stop-opacity="0.903844"/>
-            <stop offset="1" stop-color="#006CFF" stop-opacity="0.65"/>
-        </linearGradient>
-        <clipPath id="clip0_4974_51952">
-            <rect x="0.00390625" width="32" height="32" rx="16" fill="white"/>
-        </clipPath>
-    </defs>
-</svg>
diff --git a/sample-apps/react/react-dogfood/style/Button/Button-theme.scss b/sample-apps/react/react-dogfood/style/Button/Button-theme.scss
deleted file mode 100644
index b1080442d9..0000000000
--- a/sample-apps/react/react-dogfood/style/Button/Button-theme.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.rd__call-recording-search-submit-button {
-
-  &:disabled {
-    background-color: transparent;
-    color: transparent;
-  }
-}
diff --git a/sample-apps/react/react-dogfood/style/Button/Button.scss b/sample-apps/react/react-dogfood/style/Button/Button.scss
new file mode 100644
index 0000000000..5998fef8d2
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/Button/Button.scss
@@ -0,0 +1,79 @@
+button.rd__button,
+.rd__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--str-video__border-radius-md);
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-md);
+  text-align: center;
+  width: 100%;
+  font-size: var(--str-video__font-size-sm);
+  font-weight: 500;
+  border: 1px solid transparent;
+  color: var(--str-video__text-color1);
+
+  background-color: var(--str-video__button-default-base);
+  &:hover {
+    background-color: var(--str-video__button-default-hover);
+    cursor: pointer;
+  }
+
+  &__icon {
+    margin-right: var(--str-video__spacing-xs);
+    height: 16px;
+    background-color: var(--str-video__text-color1);
+  }
+
+  &:disabled {
+    background-color: var(--str-video__button-default-disabled);
+    cursor: not-allowed;
+  }
+
+  &--align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+
+  &--primary {
+    background-color: var(--str-video__button-primary-active);
+
+    &:hover {
+      background-color: var(--str-video__button-primary-hover);
+      cursor: pointer;
+    }
+
+    &:disabled {
+      background-color: var(--str-video__button-default-disabled);
+      cursor: not-allowed;
+    }
+
+    .rd__button__icon {
+      background-color: white;
+    }
+  }
+
+  &--large {
+    font-size: var(--str-video__font-size-md);
+    padding: var(--str-video__spacing-sm) var(--str-video__spacing-md);
+    border-radius: var(--str-video__border-radius-md);
+  }
+
+  &--secondary {
+    background-color: transparent;
+    border: 1px solid var(--str-video__base-color3);
+
+    &:disabled {
+      background-color: transparent;
+      border: 1px solid var(--str-video__base-color3);
+      cursor: not-allowed;
+    }
+  }
+}
+
+a.rd__button {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/Button/index.scss b/sample-apps/react/react-dogfood/style/Button/index.scss
index 001a64850a..aa260f5b10 100644
--- a/sample-apps/react/react-dogfood/style/Button/index.scss
+++ b/sample-apps/react/react-dogfood/style/Button/index.scss
@@ -1 +1 @@
-@import "Button-theme";
+@import 'Button';
diff --git a/sample-apps/react/react-dogfood/style/CallControls/CallControls-layout.scss b/sample-apps/react/react-dogfood/style/CallControls/CallControls-layout.scss
index d7c0eee48c..057a90b4c9 100644
--- a/sample-apps/react/react-dogfood/style/CallControls/CallControls-layout.scss
+++ b/sample-apps/react/react-dogfood/style/CallControls/CallControls-layout.scss
@@ -1,11 +1,149 @@
 .str-video__call-controls {
-  justify-content: space-between;
-  padding: unset;
-  padding-top: 1rem;
+  justify-content: flex-start;
+  padding: var(--str-video__spacing-sm) var(--str-video__spacing-md);
+  gap: 0.25rem;
 
   .str-video__call-controls--group {
     display: flex;
-    align-items: flex-start;
-    gap: 0.75rem;
+    gap: 0.25rem;
+    align-items: center;
+
+    &.str-video__call-controls--options {
+      .str-video__call-controls__mobile {
+        display: flex;
+      }
+      .str-video__call-controls__desktop {
+        display: none;
+      }
+    }
+
+    &.str-video__call-controls--media {
+      margin-left: 0px;
+      .str-video__call-controls__mobile {
+        display: flex;
+      }
+      .str-video__call-controls__desktop {
+        display: none;
+      }
+    }
+
+    &.str-video__call-controls--sidebar {
+      width: 100%;
+      justify-content: flex-end;
+
+      .str-video__call-controls__desktop {
+        display: none;
+      }
+    }
+  }
+}
+
+@include respond-above(sm) {
+  .str-video__call-controls {
+    justify-content: space-between;
+    background-color: var(--str-video__base-color7);
+
+    gap: 0.5rem;
+
+    background-color: var(--str-video__base-color7);
+    border-radius: var(--str-video__border-radius-xxl);
+
+    .str-video__call-controls--group {
+      gap: 0.5rem;
+
+      &.str-video__call-controls--options {
+        .str-video__call-controls__desktop {
+          display: flex;
+        }
+        .str-video__call-controls__mobile {
+          display: none;
+        }
+      }
+      &.str-video__call-controls--media {
+        .str-video__call-controls__desktop {
+          display: flex;
+        }
+        .str-video__call-controls__mobile {
+          display: none;
+        }
+      }
+
+      &.str-video__call-controls--media {
+        margin-left: -100px;
+      }
+
+      &.str-video__call-controls--sidebar {
+        width: unset;
+        justify-content: flex-start;
+
+        .str-video__call-controls__desktop {
+          display: flex;
+        }
+      }
+    }
+  }
+}
+
+.rd__toggle-participants {
+  .rd__waiting-room-list {
+    background-color: var(--str-video__base-color6);
+    padding: var(--str-video__spacing-lg);
+    min-width: 350px;
+  }
+
+  .rd__waiting-room-list__title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .rd__waiting-room-list__title-icon {
+    display: inline-block;
+  }
+
+  .rd__waiting-room-list__users {
+    list-style: none;
+    padding-inline: 0;
+  }
+
+  .rd__waiting-room-list__user {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: var(--str-video__spacing-xs);
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .rd__button.rd__waiting-room-list__admit {
+      color: var(--str-video__alert-success);
+      width: auto;
+    }
+  }
+
+  .rd__waiting-room-list__user-name {
+    flex: 1;
+  }
+
+  .rd__waiting-room-list__footer {
+    padding: 0, var(--str-video__spacing-xs);
+  }
+
+  .rd__participant-count {
+    font-size: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--str-video__border-radius-circle);
+
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    background: var(--str-video__brand-color3);
+    color: var(--str-video__base-color4);
+    padding: 5px;
+    height: 16px;
+    width: 16px;
   }
 }
diff --git a/sample-apps/react/react-dogfood/style/CallHeader/CallHeader-layout.scss b/sample-apps/react/react-dogfood/style/CallHeader/CallHeader-layout.scss
index 785d67f1ec..5b8dde575c 100644
--- a/sample-apps/react/react-dogfood/style/CallHeader/CallHeader-layout.scss
+++ b/sample-apps/react/react-dogfood/style/CallHeader/CallHeader-layout.scss
@@ -1,10 +1,23 @@
-
-.str-video__call-header {
+.rd__call-header {
   display: flex;
   align-items: center;
-  padding-bottom: 1rem;
 
-  .str-video__call-header__title-group {
+  justify-content: space-between;
+
+  background-color: var(--str-video__base-color7);
+  border-radius: var(--str-video__border-radius-xxl);
+  margin: var(--str-video__spacing-sm) var(--str-video__spacing-sm) 0
+    var(--str-video__spacing-sm);
+
+  padding: var(--str-video__spacing-md);
+
+  z-index: 2;
+
+  &--transparent {
+    background-color: transparent;
+  }
+
+  .rd__call-header__title-group {
     flex: 1;
     display: flex;
     align-items: center;
@@ -14,41 +27,209 @@
       display: flex;
     }
 
-    .str-video__call-header-title {
+    .rd__call-header-title {
       white-space: nowrap;
       overflow-y: visible;
       // Not every browser support clip overflow, so hidden is defined as a fallback
       overflow-x: hidden;
       overflow-x: clip;
       text-overflow: ellipsis;
-      font-size: 24px;
+      font-size: var(---str-video__font-size-md);
       font-weight: 400;
       margin: 0;
       max-width: 400px;
     }
   }
+  &--active {
+    .rd__call-header__title-group {
+      display: none;
+    }
+  }
+}
+
+.rd__call-header__title {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-md);
+}
+
+.rd__call-header__documentation {
+  display: flex;
+  gap: var(--str-video__spacing-md);
+  align-items: center;
+
+  .rd__button {
+    font-size: var(--str-video__font-size-xs);
+    padding: var(--str-video__spacing-xs) var(--str-video__spacing-md);
+  }
 }
 
-.str-video__call-header__controls-group {
+.rd__call-header__controls-group {
   display: flex;
   gap: 0.5rem;
 }
 
-.str-video__call-header__notifications {
+.rd__header__elapsed {
   display: flex;
   justify-content: center;
+  align-items: center;
+  font-variant: tabular-nums;
+  background-color: var(--str-video__base-color6);
+  padding: var(--str-video__spacing-xxs) var(--str-video__spacing-md);
+  border-radius: var(--str-video__border-radius-md);
+  font-size: var(--str-video__font-size-xs);
+  &-icon {
+    margin-right: var(--str-video__spacing-xxs);
+    background-color: var(--str-video__alert-success);
+    height: 16px;
+  }
 
-  .str-video__loading-indicator {
+  &-time {
+    font-weight: 600;
+  }
+}
+
+.rd__header__latency {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  font-variant: tabular-nums;
+  background-color: var(--str-video__base-color6);
+  padding: var(--str-video__spacing-xxs) var(--str-video__spacing-md);
+  border-radius: var(--str-video__border-radius-md);
+  font-size: var(--str-video__font-size-xs);
+
+  font-weight: 600;
+
+  &-indicator {
+    height: 6px;
+    width: 6px;
+    margin-right: var(--str-video__spacing-xxs);
+    background-color: var(--str-video__alert-success);
+
+    border-radius: var(--str-video__border-radius-circle);
+    &--good {
+      background-color: var(--str-video__alert-success);
+    }
+    &--ok {
+      background-color: var(--str-video__alert-caution);
+    }
+
+    &--bad {
+      background-color: var(--str-video__alert-warning);
+    }
+  }
+}
+
+.rd__call-header__notifications {
+  display: flex;
+  justify-content: center;
+
+  .rd__loading-indicator {
     display: flex;
     flex-direction: row;
     gap: 8px;
   }
 
-  .str-video__loading-indicator__icon {
+  .rd__loading-indicator__icon {
     width: 1rem;
     height: 1rem;
   }
-  .str-video__loading-indicator-text {
+  .rd__loading-indicator-text {
     font-size: 0.875rem;
   }
 }
+
+.rd__user-session {
+  display: flex;
+  align-items: center;
+  gap: var(--str-video__spacing-md);
+
+  &__container {
+    display: flex;
+    align-items: center;
+    gap: var(--str-video__spacing-md);
+  }
+
+  &__user {
+    display: none;
+    flex-direction: column;
+    font-size: var(--str-video__font-size-xs);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &__name {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  &__email {
+    margin: 0;
+  }
+
+  &__menu {
+    border-radius: var(--str-video__border-radius-lg);
+    background-color: var(--str-video__base-color7);
+
+    &-list {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--str-video__spacing-md);
+      font-size: var(--str-video__font-size-xs);
+    }
+
+    &-item {
+      display: flex;
+
+      .str-video__dropdown-selected__label {
+        padding: var(--str-video__spacing-sm) var(--str-video__spacing-md);
+      }
+    }
+
+    .rd__button.rd__user-session__menu-button {
+      font-size: var(--str-video__font-size-xs);
+    }
+  }
+
+  &__toggle {
+    background-color: transparent;
+  }
+}
+
+@include respond-above(sm) {
+  .rd__call-header--active {
+    .rd__call-header__settings {
+      display: none;
+    }
+    .rd__call-header__leave {
+      display: none;
+    }
+    .rd__call-header__title-group {
+      display: flex;
+    }
+  }
+
+  .rd__call-header__controls-group {
+    > * {
+      &:nth-child(3) {
+        display: none;
+      }
+    }
+  }
+
+  .rd__header__latency {
+    display: flex;
+  }
+
+  .rd__user-session {
+    &__user {
+      display: flex;
+    }
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/CallLayout/SpeakerOneOnOne-layout.scss b/sample-apps/react/react-dogfood/style/CallLayout/SpeakerOneOnOne-layout.scss
index 677e26fd49..2dbcd6f734 100644
--- a/sample-apps/react/react-dogfood/style/CallLayout/SpeakerOneOnOne-layout.scss
+++ b/sample-apps/react/react-dogfood/style/CallLayout/SpeakerOneOnOne-layout.scss
@@ -1,8 +1,25 @@
 .str-video__speaker-layout {
   .rd__framer-participant-view-wrapper {
     position: absolute;
-    width: 320px;
+    width: 200px;
     top: 0.875rem;
-    left: 0.875rem;
+    right: 0.875rem;
+    z-index: 1;
+
+    .str-video__video-placeholder {
+      background-color: var(--str-video__base-color6);
+    }
+
+    &:hover {
+      cursor: move;
+    }
+  }
+}
+
+@include respond-above(sm) {
+  .str-video__speaker-layout {
+    .rd__framer-participant-view-wrapper {
+      width: 320px;
+    }
   }
 }
diff --git a/sample-apps/react/react-dogfood/style/DevMenu/DevMenu.scss b/sample-apps/react/react-dogfood/style/DevMenu/DevMenu.scss
new file mode 100644
index 0000000000..9bb6664129
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/DevMenu/DevMenu.scss
@@ -0,0 +1,40 @@
+.rd__dev-menu {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+
+  width: 100vw;
+
+  background-color: var(--str-video__base-color7);
+  padding: var(--str-video__spacing-md);
+
+  margin: 0;
+  margin-bottom: var(--str-video__spacing-md);
+  list-style: none;
+
+  border-radius: var(--str-video__border-radius-lg);
+
+  box-shadow: 0px 0px 5px var(--str-video__background-color1);
+  background-color: var(--str-video__base-color7);
+
+  gap: var(--str-video__spacing-md);
+
+  &__item {
+    &--divider {
+      border-bottom: 1px solid var(--str-video__base-color3);
+      margin: var(--str-video__spacing-sm) 0;
+    }
+  }
+}
+
+@include respond-above(sm) {
+  .rd__dev-menu {
+    width: 40vw;
+  }
+}
+
+@include respond-above(md) {
+  .rd__dev-menu {
+    width: 20vw;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/DevMenu/index.scss b/sample-apps/react/react-dogfood/style/DevMenu/index.scss
new file mode 100644
index 0000000000..823007569a
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/DevMenu/index.scss
@@ -0,0 +1 @@
+@import 'DevMenu.scss';
diff --git a/sample-apps/react/react-dogfood/style/Feedback/Feedback.scss b/sample-apps/react/react-dogfood/style/Feedback/Feedback.scss
new file mode 100644
index 0000000000..2db17a1c00
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/Feedback/Feedback.scss
@@ -0,0 +1,102 @@
+.rd__feedback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  background-color: var(--str-video__base-color7);
+  border-radius: var(--str-video__border-radius-lg);
+  padding: 32px;
+
+  width: 100%;
+  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.75);
+}
+
+.rd__feedback-image {
+  width: 300px;
+}
+
+.rd__feedback-heading {
+  font-weight: 600;
+  font-size: 24px;
+  margin: 0;
+}
+
+.rd__feedback-description {
+  color: var(--str-video__base-color2);
+  font-size: var(--str-video__font-size-sm);
+  margin: var(--str-video__spacing-lg) 0 var(--str-video__spacing-md) 0;
+}
+
+.rd__feedback-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: var(--str-video__spacing-lg);
+  width: 100%;
+}
+
+.rd__feedback-input,
+.rd__feedback-textarea {
+  background-color: var(--str-video__base-color4);
+  border-radius: var(--str-video__border-radius-md);
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-md);
+  margin-bottom: var(--str-video__spacing-md);
+  border: 1px solid var(--str-video__base-color3);
+  width: 100%;
+  color: var(--str-video__text-color1);
+
+  &:focus,
+  &:focus-visible {
+    border: 1px solid var(--str-video__base-color1);
+  }
+}
+
+.rd__feedback-textarea {
+  height: 100px;
+}
+
+.rd__feedback-footer {
+  width: 100%;
+  margin-bottom: var(--str-video__spacing-lg);
+}
+
+.rd__feedback-rating {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--str-video__spacing-lg);
+}
+
+.rd__feedback-rating-description {
+  font-size: var(--str-video__font-size-sm);
+}
+
+.rd__feedback-rating-stars {
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    .rd__feedback-star:hover ~ .rd__feedback-star {
+      background-color: var(--str-video__alert-caution);
+    }
+  }
+}
+
+.rd__feedback-star:hover {
+  background-color: var(--str-video__alert-caution);
+  cursor: pointer;
+}
+.rd__feedback-star--active {
+  background-color: var(--str-video__alert-caution);
+}
+
+.rd__feedback-sent {
+}
+
+.rd__feedback-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--str-video__spacing-md);
+}
diff --git a/sample-apps/react/react-dogfood/style/Feedback/index.scss b/sample-apps/react/react-dogfood/style/Feedback/index.scss
new file mode 100644
index 0000000000..799b9e974b
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/Feedback/index.scss
@@ -0,0 +1 @@
+@import 'Feedback.scss';
diff --git a/sample-apps/react/react-dogfood/style/Input/Input-layout.scss b/sample-apps/react/react-dogfood/style/Input/Input-layout.scss
deleted file mode 100644
index 8753449d9c..0000000000
--- a/sample-apps/react/react-dogfood/style/Input/Input-layout.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.rd__join-call-input {
-  height: 100%;
-  padding: 0.5rem 0.75rem;
-  flex: 1;
-}
-
-.rd__call-recording-search-input {
-  width: 150px;
-}
-
-.rd__call-type-dropdown-container {
-  position: relative;
-
-  .rd__call-recording-search-input__call-type-dropdown {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    position: absolute;
-    margin-top: 0.25rem;
-    z-index: 1;
-
-    background-color: var(--str-video__background-color5);
-    border-radius: 0 0 8px 8px;
-    overflow: hidden;
-
-    .rd__call-recording-search-input__option {
-      padding: 0.125rem 0.5rem;
-      cursor: pointer;
-
-      &.rd__call-recording-search-input__option--highlighted,
-      &:hover {
-        background-color: #72767e;
-      }
-    }
-  }
-}
-
diff --git a/sample-apps/react/react-dogfood/style/Input/Input-theme.scss b/sample-apps/react/react-dogfood/style/Input/Input-theme.scss
deleted file mode 100644
index cbfb825d62..0000000000
--- a/sample-apps/react/react-dogfood/style/Input/Input-theme.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.rd__input--underlined {
-  background: transparent;
-  outline: none;
-  border: none;
-  border-bottom: 1px solid #fff;
-  color: #fff !important;
-}
-
-.rd__call-recording-search-input {
-  font-size: 1.125rem;
-  text-align: center;
-}
-
-.rd__input::placeholder {
-  color: currentColor;
-}
diff --git a/sample-apps/react/react-dogfood/style/Input/Input.scss b/sample-apps/react/react-dogfood/style/Input/Input.scss
new file mode 100644
index 0000000000..763f9a8671
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/Input/Input.scss
@@ -0,0 +1,14 @@
+.rd__input,
+.rd__textarea {
+  background-color: var(--str-video__base-color4);
+  border-radius: var(--str-video__border-radius-md);
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-md);
+  border: 1px solid var(--str-video__base-color3);
+  color: var(--str-video__base-color1);
+  width: 100%;
+
+  &:focus,
+  &:focus-visible {
+    border: 1px solid var(--str-video__base-color1);
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/Input/index.scss b/sample-apps/react/react-dogfood/style/Input/index.scss
index 4b26599369..6cf6950dab 100644
--- a/sample-apps/react/react-dogfood/style/Input/index.scss
+++ b/sample-apps/react/react-dogfood/style/Input/index.scss
@@ -1,2 +1 @@
-@import "Input-layout";
-@import "Input-theme";
+@import 'Input';
diff --git a/sample-apps/react/react-dogfood/style/InvitePanel/InvitePanel.scss b/sample-apps/react/react-dogfood/style/InvitePanel/InvitePanel.scss
new file mode 100644
index 0000000000..d0d1badcf1
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/InvitePanel/InvitePanel.scss
@@ -0,0 +1,124 @@
+.rd__invite {
+  display: flex;
+  flex-direction: column;
+
+  &__qr {
+    margin-top: var(--str-video__spacing-lg);
+    &-header {
+      font-size: var(--str-video__font-size-md);
+      font-weight: 500;
+    }
+
+    &-description {
+      font-size: var(--str-video__font-size-xs);
+      color: var(--str-video__text-color2);
+    }
+
+    &-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: var(--str-video__spacing-lg);
+      border-radius: var(--str-video__border-radius-md);
+      background-color: var(--str-video__base-color4);
+      width: 100%;
+    }
+
+    &-code {
+      margin: var(--str-video__spacing-md) 0;
+      padding: 0 var(--str-video__spacing-md);
+      border-radius: var(--str-video__border-radius-md);
+      background-color: white;
+      width: 100px;
+      height: 100px;
+    }
+  }
+
+  &__copy {
+    margin-top: var(--str-video__spacing-lg);
+    &-header {
+      font-size: var(--str-video__font-size-md);
+      font-weight: 500;
+    }
+
+    &-description {
+      font-size: var(--str-video__font-size-xs);
+      color: var(--str-video__text-color2);
+    }
+
+    &-button {
+      margin-top: var(--str-video__spacing-lg);
+    }
+  }
+}
+
+.rd__invite-popup {
+  display: flex;
+  flex-direction: column;
+  padding: var(--str-video__spacing-md);
+  border-radius: var(--str-video__border-radius-md);
+  position: absolute;
+  bottom: var(--str-video__spacing-lg);
+  right: var(--str-video__spacing-lg);
+  background-color: var(--str-video__base-color6);
+  max-width: 250px;
+  gap: var(--str-video__spacing-md);
+
+  &__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__heading {
+    font-size: var(--str-video__font-size-md);
+    margin: 0;
+  }
+
+  &__close {
+  }
+
+  &__button {
+  }
+
+  &__description {
+    font-size: var(--str-video__font-size-xs);
+    margin: 0;
+  }
+
+  &__id {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--str-video__font-size-xs);
+    align-items: center;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &-text {
+      color: var(--str-video__brand-color3);
+      margin-left: var(--str-video__spacing-md);
+    }
+  }
+  &__qr-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__qr-description {
+    font-size: var(--str-video__font-size-xs);
+    margin: 0;
+  }
+
+  &__qr-code {
+    margin: var(--str-video__spacing-md) 0;
+    padding: 0 var(--str-video__spacing-md);
+    border-radius: var(--str-video__border-radius-md);
+    background-color: white;
+    width: 100px;
+    height: 100px;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/InvitePanel/index.scss b/sample-apps/react/react-dogfood/style/InvitePanel/index.scss
new file mode 100644
index 0000000000..ac5ea9075c
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/InvitePanel/index.scss
@@ -0,0 +1 @@
+@import 'InvitePanel.scss';
diff --git a/sample-apps/react/react-dogfood/style/LayoutSelector/LayoutSelector.scss b/sample-apps/react/react-dogfood/style/LayoutSelector/LayoutSelector.scss
new file mode 100644
index 0000000000..38cb8fa9d5
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/LayoutSelector/LayoutSelector.scss
@@ -0,0 +1,61 @@
+.rd {
+  &__layout-selector {
+    &__option {
+      display: flex;
+      align-items: center;
+      border-radius: var(--str-video__border-radius-lg);
+      background-color: var(--str-video__button-primary-base);
+      padding: 8px 16px;
+      margin-top: 8px;
+      gap: 8px;
+
+      font-weight: 600;
+      font-size: var(--str-video__font-size-md);
+
+      &:hover {
+        background-color: var(--str-video__button-primary-hover);
+        cursor: pointer;
+      }
+
+      &--selected {
+        background-color: var(--str-video__button-primary-active);
+      }
+    }
+
+    &__icon {
+      background-color: var(--str-video__icon-default);
+
+      .rd__layout-selector__option:hover & {
+        background-color: var(--str-video__icon-hover);
+      }
+
+      .rd__layout-selector__option--selected & {
+        background-color: var(--str-video__icon-active);
+      }
+    }
+    &__label {
+      color: var(--str-video__base-color2);
+      .rd__layout-selector__option:hover & {
+        color: var(--str-video__base-color1);
+      }
+
+      .rd__layout-selector__option--selected & {
+        color: var(--str-video__base-color1);
+      }
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      gap: var(--str-video__spacing-md);
+
+      background-color: var(--str-video__base-color7);
+      padding: var(--str-video__spacing-md);
+      margin-bottom: var(--str-video__spacing-lg);
+      border-radius: var(--str-video__border-radius-lg);
+    }
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/LayoutSelector/index.scss b/sample-apps/react/react-dogfood/style/LayoutSelector/index.scss
new file mode 100644
index 0000000000..d1de64421f
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/LayoutSelector/index.scss
@@ -0,0 +1 @@
+@import 'LayoutSelector';
diff --git a/sample-apps/react/react-dogfood/style/Link/Link.scss b/sample-apps/react/react-dogfood/style/Link/Link.scss
new file mode 100644
index 0000000000..c70ea3f1d9
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/Link/Link.scss
@@ -0,0 +1,57 @@
+.rd__link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  text-align: center;
+  width: 100%;
+  font-size: var(--str-video__font-size-md);
+  font-weight: 500;
+
+  &--align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+
+  &--faux-button {
+    border-radius: var(--str-video__border-radius-md);
+    padding: var(--str-video__spacing-xs) var(--str-video__spacing-lg);
+
+    color: var(--str-video__text-color1);
+
+    background-color: var(--str-video__button-default-base);
+
+    text-decoration: none;
+
+    &:hover {
+      background-color: var(--str-video__button-default-hover);
+      cursor: pointer;
+      text-decoration: none;
+    }
+  }
+
+  &--primary {
+    background-color: var(--str-video__brand-color1);
+
+    &:hover {
+      background-color: var(--str-video__button-primary-hover);
+    }
+  }
+
+  &--large {
+    font-size: var(--str-video__font-size-md);
+    padding: var(--str-video__spacing-sm) var(--str-video__spacing-md);
+    border-radius: var(--str-video__border-radius-md);
+  }
+
+  &__icon {
+    margin-right: var(--str-video__spacing-xs);
+    height: 16px;
+    color: var(--str-video__text-color1);
+  }
+
+  &:disabled {
+    background-color: var(--str-video__button-default-disabled);
+    cursor: not-allowed;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/Link/index.scss b/sample-apps/react/react-dogfood/style/Link/index.scss
new file mode 100644
index 0000000000..53a476f85f
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/Link/index.scss
@@ -0,0 +1 @@
+@import 'Link';
diff --git a/sample-apps/react/react-dogfood/style/SettingsTabModal.scss b/sample-apps/react/react-dogfood/style/SettingsTabModal.scss
new file mode 100644
index 0000000000..fdca8162e3
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/SettingsTabModal.scss
@@ -0,0 +1,154 @@
+.rd {
+  &__tabmodal-container {
+    display: flex;
+    border-radius: calc(
+      // +2px to fix border radius issue
+      var(--str-video__border-radius-lg) + 2px
+    );
+    width: 90vw;
+    min-height: 65vh;
+    border: 2px solid var(--str-video__base-color6);
+
+    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.75);
+  }
+
+  &__tabmodal-header {
+    font-size: 20px;
+    font-weight: 500;
+    padding-left: var(--str-video__spacing-md);
+    display: none;
+  }
+
+  &__tabmodal-sidebar {
+    display: flex;
+    flex-direction: column;
+    overflow-x: scroll;
+    min-width: 100px;
+
+    background-color: var(--str-video__base-color5);
+    border-radius: var(--str-video__border-radius-lg) 0 0
+      var(--str-video__border-radius-lg);
+    padding: var(--str-video__spacing-md) var(--str-video__spacing-md)
+      var(--str-video__spacing-md) 0;
+  }
+
+  &__tabmodal-content {
+    background-color: var(--str-video__base-color7);
+    border-radius: 0 var(--str-video__border-radius-lg)
+      var(--str-video__border-radius-lg) 0;
+    padding: var(--str-video__spacing-md);
+    width: 100%;
+    max-height: 65vh;
+    overflow: hidden;
+  }
+
+  &__tab-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--str-video__spacing-md);
+  }
+
+  &__tab-panel__heading {
+    font-size: 20px;
+    font-weight: 500;
+    margin-right: auto;
+  }
+
+  &__tab-panel__close {
+    background-color: unset;
+  }
+
+  &__tab-panel__content {
+    height: 65vh;
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  &__tab {
+    display: flex;
+    align-items: center;
+    padding: var(--str-video__spacing-sm) var(--str-video__spacing-md);
+
+    font-size: 16px;
+    margin-bottom: var(--str-video__spacing-sm);
+    font-weight: 500;
+    border-radius: 0 var(--str-video__border-radius-md)
+      var(--str-video__border-radius-md) 0;
+
+    &-icon {
+      margin-right: var(--str-video__spacing-sm);
+      height: 18px;
+      width: 18px;
+    }
+
+    &-label {
+      display: none;
+    }
+
+    &:first-of-type {
+      margin-top: 40px;
+    }
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--str-video__button-default-hover);
+    }
+
+    &--active {
+      background-color: var(--str-video__button-default-active);
+      font-weight: 600;
+    }
+  }
+}
+
+@include respond-above(sm) {
+  .rd {
+    &__tabmodal-container {
+      width: 65vw;
+    }
+
+    &__tabmodal-header {
+      display: flex;
+    }
+
+    &__tabmodal-sidebar {
+      width: 100vw;
+    }
+
+    &__tab {
+      padding: var(--str-video__spacing-md);
+      &-label {
+        display: block;
+      }
+    }
+
+    &__tabmodal-sidebar {
+      width: 300px;
+      flex-direction: column;
+    }
+
+    &__tab-panel {
+      &__header {
+        justify-content: flex-end;
+      }
+      &__heading {
+        display: none;
+      }
+    }
+  }
+}
+
+@include respond-above(lg) {
+  .rd {
+    &__tabmodal-container {
+      width: 55vw;
+    }
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/ToggleDocumentationButton.scss b/sample-apps/react/react-dogfood/style/ToggleDocumentationButton.scss
new file mode 100644
index 0000000000..6421e7c355
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/ToggleDocumentationButton.scss
@@ -0,0 +1,50 @@
+.rd__documentation-button__menu {
+  display: flex;
+  padding: var(--str-video__spacing-lg);
+  flex-direction: column;
+  margin: 0;
+  gap: var(--str-video__spacing-md);
+  border-radius: var(--str-video__border-radius-lg);
+  max-width: 400px;
+
+  background-color: var(--str-video__base-color6);
+}
+
+.rd__call-header__title {
+  display: none;
+  .str-video__call-controls__button .str-video__icon--caret-down {
+    width: 18px;
+    height: 18px;
+  }
+
+  .str-video__composite-button__button-group {
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+@include respond-above(sm) {
+  .rd__call-header__title {
+    display: flex;
+  }
+}
+
+.rd__documentation-button__heading {
+  font-size: var(--str-video__font-size-md);
+  margin: 0;
+}
+
+.rd__documentation-button__description {
+  color: var(--str-video__text-color3);
+  font-size: var(--str-video__font-size-sm);
+  margin: 0;
+}
+
+.rd__documentation-button__actions {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--str-video__spacing-md);
+}
diff --git a/sample-apps/react/react-dogfood/style/ToggleMoreOptionsListButton/ToggleMoreOptionsListButton-layout.scss b/sample-apps/react/react-dogfood/style/ToggleMoreOptionsListButton/ToggleMoreOptionsListButton-layout.scss
new file mode 100644
index 0000000000..7eba155b6b
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/ToggleMoreOptionsListButton/ToggleMoreOptionsListButton-layout.scss
@@ -0,0 +1,30 @@
+.rd__more-menu {
+  display: flex;
+  list-style: none;
+  padding: var(--str-video__spacing-lg);
+  flex-direction: column;
+  margin: 0;
+
+  max-width: calc(100vw - var(--str-video__spacing-lg) * 2);
+
+  &--developer-setttings {
+    margin-top: 24px;
+  }
+}
+
+.rd__more-menu__item {
+  margin-top: var(--str-video__spacing-md);
+}
+
+.rd__more-menu__button {
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  color: var(--str-video__text-color1);
+}
+
+@include respond-above(sm) {
+  .str-video__more-option--screen-share {
+    display: none;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/ToggleMoreOptionsListButton/index.scss b/sample-apps/react/react-dogfood/style/ToggleMoreOptionsListButton/index.scss
new file mode 100644
index 0000000000..b756b18fb0
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/ToggleMoreOptionsListButton/index.scss
@@ -0,0 +1 @@
+@import 'ToggleMoreOptionsListButton-layout';
diff --git a/sample-apps/react/react-dogfood/style/ToggleParticipantsPreview/ToggleParticipantsPreview.scss b/sample-apps/react/react-dogfood/style/ToggleParticipantsPreview/ToggleParticipantsPreview.scss
new file mode 100644
index 0000000000..cc42bc46d0
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/ToggleParticipantsPreview/ToggleParticipantsPreview.scss
@@ -0,0 +1,59 @@
+.rd {
+  &__participants-preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: var(--str-video__border-radius-lg);
+    width: 25vw;
+    background-color: var(--str-video__base-color5);
+    padding: var(--str-video__spacing-lg);
+
+    box-shadow: 0px 14px 34px rgba(0, 0, 0, 0.75);
+  }
+
+  &__participants-preview__button {
+    position: relative;
+  }
+
+  &__participants-preview__count {
+    font-size: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--str-video__border-radius-circle);
+    position: absolute;
+
+    top: -3px;
+    right: -3px;
+    background: var(--str-video__brand-color3);
+    color: var(--str-video__base-color4);
+    padding: 5px;
+    height: 16px;
+    width: 16px;
+  }
+
+  &__participants-preview__heading {
+    font-size: 20px;
+    font-weight: 500;
+    width: 100%;
+    text-align: center;
+  }
+
+  &__participants-preview__description {
+    font-size: var(--str-video__font-size-sm);
+    font-weight: 400;
+    margin-bottom: var(--str-video__spacing-md);
+    width: 70%;
+    text-align: center;
+  }
+
+  &__participants-preview__call-preview {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--str-video__base-color7);
+    border-radius: 0 var(--str-video__border-radius-lg)
+      var(--str-video__border-radius-lg) 0;
+    padding: var(--str-video__spacing-md);
+    width: 100%;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/ToggleParticipantsPreview/index.scss b/sample-apps/react/react-dogfood/style/ToggleParticipantsPreview/index.scss
new file mode 100644
index 0000000000..dbff163905
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/ToggleParticipantsPreview/index.scss
@@ -0,0 +1 @@
+@import 'ToggleParticipantsPreview.scss';
diff --git a/sample-apps/react/react-dogfood/style/TourPanel.scss b/sample-apps/react/react-dogfood/style/TourPanel.scss
new file mode 100644
index 0000000000..b24e106f2d
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/TourPanel.scss
@@ -0,0 +1,172 @@
+.rd__tour {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: fixed;
+  border-radius: var(--str-video__border-radius-lg);
+  background-color: var(--str-video__base-color6);
+  padding: var(--str-video__spacing-lg);
+  gap: var(--str-video__spacing-lg);
+
+  z-index: 10;
+  width: max-content;
+  max-width: 300px;
+  top: 0;
+  left: 0;
+
+  transition-property: transform;
+  transition-timing-function: ease-in;
+  transition-duration: 0.2s;
+
+  &.rd__tour--first-step {
+    transition-duration: 0s;
+  }
+}
+
+.rd__tour__content-container {
+  position: relative;
+  padding: 5px;
+}
+
+.rd__tour__step-overlay {
+  backdrop-filter: blur(6px);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 8px;
+}
+
+.rd__tour__image-container {
+  width: 100%;
+  height: auto;
+}
+
+.rd__tour__image {
+  object-fit: cover;
+  width: 100%;
+  border-radius: var(--str-video__border-radius-lg);
+  background-color: var(--str-video__base-color7);
+}
+
+.rd__tour__header {
+  font-size: var(--str-video__font-size-md);
+  font-weight: 600;
+  margin: 0;
+  padding-bottom: 15px;
+}
+
+.rd__tour__explanation {
+  font-size: var(--str-video__font-size-sm);
+  margin-bottom: 0;
+  color: var(--str-video__text-color2);
+}
+
+.rd__tour__link {
+  font-size: var(--str-video__font-size-sm);
+  color: var(--str-video__text-color1);
+}
+
+.rd__tour__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: var(--str-video__spacing-sm);
+
+  &--last-step {
+    flex-direction: column;
+  }
+}
+
+.rd__tour__dont-show {
+  display: flex;
+  width: 100%;
+  gap: var(--str-video__spacing-md);
+  margin-top: var(--str-video__spacing-sm);
+  font-size: var(--str-video__font-size-xs);
+  align-items: center;
+}
+
+.rd__tour__indicator {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  transform: rotate(0deg);
+  position: absolute;
+
+  &--bottom-start,
+  &--bottom-end,
+  &--bottom {
+    top: 0;
+    margin-top: -9px;
+    border-width: 0 7px 10px 7px;
+    border-color: transparent transparent var(--str-video__base-color6)
+      transparent;
+  }
+
+  &--left-start {
+    right: 0;
+    top: 25px;
+    margin-right: -10px;
+    border-width: 7px 0 7px 10px;
+    border-color: transparent transparent transparent
+      var(--str-video__base-color6);
+  }
+
+  &--left-end {
+    right: 0;
+    bottom: 35px;
+    margin-right: -10px;
+    border-width: 7px 0 7px 10px;
+    border-color: transparent transparent transparent
+      var(--str-video__base-color6);
+  }
+
+  &--right-start {
+    left: 0;
+    top: 25px;
+    margin-left: -10px;
+    border-width: 7px 10px 7px 0;
+    border-color: transparent var(--str-video__base-color6) transparent
+      transparent;
+  }
+
+  &--top {
+    margin-bottom: -9px;
+    bottom: 0;
+    border-width: 10px 7px 0 7px;
+
+    border-color: var(--str-video__base-color6) transparent transparent
+      transparent;
+  }
+}
+
+.rd__sdk-options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--str-video__spacing-md);
+  margin-top: var(--str-video__spacing-md);
+}
+
+.rd__sdk-options__option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #1d2f34;
+  color: #00e2a1;
+  padding: var(--str-video__spacing-xs);
+  border-radius: var(--str-video__border-radius-xs);
+  gap: var(--str-video__spacing-sm);
+  width: 100%;
+  max-width: 130px;
+  font-size: var(--str-video__font-size-xs);
+  font-weight: 600;
+
+  .str-video__icon {
+    width: 20px;
+    height: 20px;
+    background-color: #00e2a1;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/app.scss b/sample-apps/react/react-dogfood/style/app.scss
index 6fc7655b66..77103acb1d 100644
--- a/sample-apps/react/react-dogfood/style/app.scss
+++ b/sample-apps/react/react-dogfood/style/app.scss
@@ -1,7 +1,25 @@
-body {
+body,
+body > * {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+button,
+p,
+textarea,
+input {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -12,32 +30,34 @@ body {
 }
 
 body {
-  background-color: #272a30;
+  background-color: var(--str-video__base-color4);
   color: var(--str-video__text-color1);
 }
 
 .str-video {
-  background-color: #272a30;
+  background-color: var(--str-video__base-color4);
   color: var(--str-video__text-color1);
+  height: 100vh;
   height: 100dvh;
   display: flex;
   flex-direction: column;
 }
 
-.str-video__call {
+.rd__call {
   display: flex;
   flex-direction: row;
   gap: 1rem;
-  padding: 1rem;
+  padding: 0.5rem;
   overflow-x: hidden;
+  background-color: var(--str-video__base-color4);
 
-  .str-video__stage {
+  .rd__stage {
     flex: 1;
     min-height: 0;
     padding-inline: 0.375rem;
   }
 
-  .str-video__main-call-panel {
+  .rd__main-call-panel {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -50,22 +70,4 @@ body {
       margin-right: auto;
     }
   }
-
-  .str-video__sidebar {
-    max-width: 400px;
-    min-width: 400px;
-    display: flex;
-    gap: 1rem;
-    flex-direction: column;
-
-    .str-video__participant-list {
-      height: 0;
-      flex-grow: 1;
-    }
-
-    .str-video__chat {
-      height: 0;
-      flex-grow: 1.5;
-    }
-  }
 }
diff --git a/sample-apps/react/react-dogfood/style/authentication.scss b/sample-apps/react/react-dogfood/style/authentication.scss
new file mode 100644
index 0000000000..51ae781458
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/authentication.scss
@@ -0,0 +1,70 @@
+.rd__auth {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--str-video__spacing-lg);
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+  }
+
+  &-image {
+    width: 250px;
+  }
+
+  &-heading {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    font-size: var(--str-video__font-size-xxl);
+    > span {
+      color: var(--str-video__alert-success);
+    }
+  }
+
+  &-list {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: var(--str-video__spacing-xl) 0;
+    margin: 0;
+    width: 100%;
+  }
+
+  &-item {
+    margin-bottom: var(--str-video__spacing-md);
+  }
+
+  .rd__auth-item--guest-login {
+    .rd__auth-item--guest_name_wrapper {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      padding: 8px 0;
+
+      .rd__input {
+        flex: 1;
+      }
+    }
+  }
+}
+
+@include respond-above(sm) {
+  .rd__auth-content {
+    max-width: 50vw;
+  }
+}
+
+@include respond-above(md) {
+  .rd__auth-content {
+    max-width: 25vw;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/breakpoints.scss b/sample-apps/react/react-dogfood/style/breakpoints.scss
new file mode 100644
index 0000000000..f007a1b2d2
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/breakpoints.scss
@@ -0,0 +1,18 @@
+$breakpoints: (
+  xs: 336px,
+  sm: 600px,
+  md: 1024px,
+  lg: 1200px,
+);
+
+@mixin respond-above($breakpoint) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    $breakpoint-value: map-get($breakpoints, $breakpoint);
+
+    @media (min-width: $breakpoint-value) {
+      @content;
+    }
+  } @else {
+    @warn 'Invalid breakpoint: #{$breakpoint}.';
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/call-recordings.scss b/sample-apps/react/react-dogfood/style/call-recordings.scss
new file mode 100644
index 0000000000..3ae95b2b8a
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/call-recordings.scss
@@ -0,0 +1,33 @@
+.rd__call-recordings-page {
+  display: flex;
+  justify-content: center;
+
+  .rd__call-recordings-page__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .rd__call-recordings-page__recordings-list {
+    overflow: hidden auto;
+    padding-bottom: 0.5rem;
+    width: 100%;
+    text-align: center;
+    max-height: 400px;
+    max-width: 400px;
+  }
+}
+
+.rd__call-recordings-page-form {
+  display: flex;
+  align-items: center;
+  max-width: 350px;
+  padding: 20px;
+
+  .rd__call-recordings-page-form__container {
+    display: flex;
+    flex-direction: row;
+    gap: 6px;
+    padding-bottom: 10px;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/chat.scss b/sample-apps/react/react-dogfood/style/chat.scss
index cc2d89c06f..2e893665c9 100644
--- a/sample-apps/react/react-dogfood/style/chat.scss
+++ b/sample-apps/react/react-dogfood/style/chat.scss
@@ -1,53 +1,63 @@
-.str-chat__channel {
-  border-radius: 8px;
-}
+.rd__chat__no-messages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--str-video__spacing-lg);
+  text-align: center;
 
-.str-chat__message-input {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
+  &__icon {
+    height: 100px;
+    width: 100px;
+  }
+
+  &__title {
+    font-size: var(--str-video__font-size-md);
+    font-weight: 600;
+    margin-bottom: 0;
+  }
 
-.str-chat__channel-header {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  &__description {
+    font-size: var(--str-video__font-size-sm);
+    font-weight: 400;
+    color: var(--str-video__text-color3);
+  }
 }
 
-.str-chat__custom-channel-header {
-  font-size: 1rem;
-  line-height: 1.25rem;
-  color: var(--str-video__text-color1);
-  padding: 0.75rem;
+.rd__chat-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  padding: var(--str-video__spacing-md) var(--str-video__spacing-lg);
+
+  .rd__chat-header__title {
+    flex: 1;
+    font-size: var(--str-video__font-size-sm);
+    font-weight: 500;
+  }
+
+  .rd__chat-header__close-button--icon {
+    display: block;
+    height: 1rem;
+    width: 1rem;
+    > span {
+      height: 15px;
+      width: 15px;
+    }
+  }
 }
 
-.str-chat__custom-channel-header__close-button {
-  width: 1.75rem;
-  height: 1.75rem;
-  background: var(
-    --str-video__participant-list-header__close-button--background-color
-  );
-  border-radius: var(
-    --str-video__participant-list-header__close-button--border-radius
-  );
+.str-chat__channel {
+  border-radius: 8px;
 }
 
-.str-chat__custom-channel-header__close-button--icon {
-  display: block;
-  height: 1rem;
-  width: 1rem;
-  mask-image: var(--str-video__icon--close);
-  -webkit-mask-image: var(--str-video__icon--close);
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-position: center;
-  mask-size: 0.75rem 0.75rem;
-  -webkit-mask-size: 0.75rem 0.75rem;
-  background-color: var(
-    --str-video__participant-list-header__close-button-icon--background-color
-  );
+.str-chat__message-input {
+  border-bottom-left-radius: var(--str-video__border-radius-md);
+  border-bottom-right-radius: var(--str-video__border-radius-md);
+  background-color: var(--str-video__base-color7);
+  margin-bottom: var(--str-video__spacing-xs);
 }
 
 .str-chat__message-reaction-count {
@@ -71,17 +81,19 @@
 
 .str-chat__chat-button__unread-count-bubble {
   font-size: 10px;
-  background-color: var(--str-video__danger-color);
-  width: 17px;
-  height: 17px;
-  position: absolute;
-  border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
-  top: -7px;
-  left: -7px;
-  font-weight: bold;
+  border-radius: var(--str-video__border-radius-circle);
+
+  position: absolute;
+  bottom: 23px;
+  background: var(--str-video__brand-color3);
+  color: var(--str-video__base-color4);
+  padding: 5px;
+  height: 16px;
+  width: 16px;
+  margin-left: 20px;
 }
 
 .str-chat__new-message-notification {
@@ -95,19 +107,47 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.str-chat__message .str-chat__message-inner {
-  grid-template-areas:
-    'options message-bubble'
-    'reactions reactions' !important;
-}
 
 .str-chat {
   --str-chat__primary-color: var(--str-video__primary-color);
   --str-chat__active-primary-color: var(--str-video__secondary-color);
-  --str-chat__background-color: var(--str-video__background-color1);
+  --str-chat__background-color: var(--str-video__base-color7);
   --str-chat__primary-surface-color: var(--str-video__background-color2);
   --str-chat__primary-surface-color-low-emphasis: var(
     --str-video__background-color2
   );
   --str-chat__secondary-background-color: var(--str-video__background-color4);
+  --str-chat__subtitle-text: 'Inter';
+}
+
+/* custom overwrites */
+
+.str-chat__message-input .str-chat__message-input-inner {
+  align-items: center;
+}
+.str-chat__message-textarea-emoji-picker {
+  display: none !important;
+}
+
+.str-chat__message-textarea-with-emoji-picker {
+  background-color: var(--str-video__base-color4);
+  border-radius: var(--str-video__border-radius-md);
+}
+
+.str-chat {
+  .str-video__icon {
+    height: 18px;
+    width: 18px;
+  }
+}
+
+.str-chat__message-input
+  .str-chat__message-textarea-container
+  .str-chat__message-textarea {
+  font-size: var(--str-video__font-size-sm);
+}
+
+.button.str-chat__send-button {
+  display: flex;
+  justify-content: flex-end;
 }
diff --git a/sample-apps/react/react-dogfood/style/delete-account.scss b/sample-apps/react/react-dogfood/style/delete-account.scss
new file mode 100644
index 0000000000..08351a1a33
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/delete-account.scss
@@ -0,0 +1,11 @@
+.rt__delete-account {
+  margin-top: 2rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 50%;
+
+  a {
+    color: var(--str-video__brand-color1);
+    text-decoration: none;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/error.scss b/sample-apps/react/react-dogfood/style/error.scss
new file mode 100644
index 0000000000..de6b809c4f
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/error.scss
@@ -0,0 +1,36 @@
+.rd__error {
+  display: flex;
+  height: 100%;
+  &__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+    padding: var(--str-video__spacing-lg);
+  }
+
+  &__message {
+    pre {
+      padding: var(--str-video__spacing-md);
+      background: var(--str-video__base-color-6);
+      border: 1px solid var(--str-video__base-color1);
+      border-radius: var(--str-video__border-radius-sm);
+      color: var(--str-video__text-color1);
+    }
+
+    p {
+      margin: 0;
+      font-size: var(-str-video__font-size-xs);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    width: 100%;
+    max-width: 60%;
+    gap: var(--str-video__spacing-md);
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/guest.scss b/sample-apps/react/react-dogfood/style/guest.scss
new file mode 100644
index 0000000000..6724749dd5
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/guest.scss
@@ -0,0 +1,31 @@
+.rd__guest-page {
+  display: flex;
+
+  .rd__guest-page__content {
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .rd__guest-page__header {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .rd__guest-page__config {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+  }
+
+  .rd__guest-page__buttons {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/home.scss b/sample-apps/react/react-dogfood/style/home.scss
new file mode 100644
index 0000000000..ed9d0b3fe1
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/home.scss
@@ -0,0 +1,75 @@
+.rd__home {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--str-video__spacing-lg);
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+  }
+
+  &-description {
+    font-weight: 500;
+  }
+
+  &-image {
+    width: 100px;
+  }
+
+  &-heading {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    font-size: var(--str-video__font-size-xxl);
+    > span {
+      color: var(--str-video__alert-success);
+    }
+  }
+
+  &-join {
+    display: flex;
+    align-items: center;
+    margin-top: var(--str-video__spacing-lg);
+    width: 100%;
+  }
+
+  &-input {
+    margin-right: var(--str-video__spacing-sm);
+  }
+
+  &-qr {
+    margin-top: var(--str-video__spacing-lg);
+  }
+
+  .rd__button__join {
+    min-width: 150px;
+  }
+
+  .rd__link,
+  .rd_button {
+    width: 100%;
+    margin-top: var(--str-video__spacing-md);
+  }
+}
+
+@include respond-above(sm) {
+  .rd__home-content,
+  .rd__guest-page__content {
+    max-width: 50vw;
+  }
+}
+
+@include respond-above(md) {
+  .rd__home-content,
+  .rd__guest-page__content {
+    max-width: 25vw;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/index.scss b/sample-apps/react/react-dogfood/style/index.scss
index 81fc013e38..0ee4c2ec80 100644
--- a/sample-apps/react/react-dogfood/style/index.scss
+++ b/sample-apps/react/react-dogfood/style/index.scss
@@ -1,14 +1,39 @@
 @import 'app';
 @import 'chat';
 
+@import 'breakpoints';
+
+@import 'authentication';
+@import 'home';
+@import 'lobby';
+@import 'leave';
+@import 'error';
+@import 'guest';
+@import 'call-recordings';
+
+@import 'layout';
+
 @import 'Button';
 @import 'CallControls';
 @import 'CallHeader';
 @import 'Input';
 @import 'LoadingScreen';
+@import 'Link';
 
 @import 'CallParticipantsView';
 @import 'CallParticipantsScreenView';
 @import 'CallLayout';
 
+@import 'SettingsTabModal';
+@import 'ToggleMoreOptionsListButton';
+@import 'ToggleParticipantsPreview';
+@import 'ToggleDocumentationButton';
+@import 'Feedback';
+@import 'InvitePanel';
+@import 'TourPanel';
+
 @import 'Debug/Debug.scss';
+@import 'LayoutSelector';
+@import 'DevMenu';
+
+@import 'delete-account';
diff --git a/sample-apps/react/react-dogfood/style/layout.scss b/sample-apps/react/react-dogfood/style/layout.scss
new file mode 100644
index 0000000000..0c61377c3d
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/layout.scss
@@ -0,0 +1,124 @@
+.rd__layout {
+  display: flex;
+  height: calc(100vh - 140px);
+  height: calc(100dvh - 140px);
+  gap: var(--str-video__spacing-md);
+  padding: var(--str-video__spacing-md);
+  position: relative;
+
+  .str-video__speaker-layout__wrapper,
+  .str-video__paginated-grid-layout__wrapper {
+    flex: 1;
+  }
+}
+
+.rd__notifications {
+  position: absolute;
+  bottom: 60px;
+  left: var(--str-video__spacing-lg);
+  right: 0;
+  z-index: 3;
+}
+
+.rd__sidebar {
+  position: absolute;
+  border-radius: var(--str-video__border-radius-md);
+  height: calc(100vh - 60px);
+  height: calc(100dvh - 60px);
+
+  &.rd__sidebar--open {
+    z-index: 2;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .rd__sidebar__container {
+    flex-grow: 1;
+    padding: var(--str-video__spacing-lg) 0;
+  }
+
+  .str-video__participant-list {
+    flex-grow: 1;
+    height: calc(100vh - 550px);
+    height: calc(100dvh - 550px);
+  }
+
+  .str-video__chat {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--str-video__base-color7);
+    border-radius: var(--str-video__border-radius-md);
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.rd__sidebar__call-stats {
+  display: flex;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.rd__participants {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--str-video__base-color7);
+  border-radius: var(--str-video__border-radius-md);
+  padding: var(--str-video__spacing-lg);
+  height: 100%;
+  width: 100%;
+}
+
+@include respond-above(sm) {
+  .rd__sidebar {
+    position: relative;
+    width: 0;
+    height: auto;
+    overflow: hidden;
+    transition-property: width;
+    transition-duration: 0.3s;
+
+    &.rd__sidebar--open {
+      width: 350px;
+    }
+
+    .rd__sidebar__container {
+      max-width: 350px;
+      min-width: 350px;
+      display: flex;
+      gap: var(--str-video__spacing-md);
+      height: 100%;
+      padding: 0;
+    }
+
+    .str-video__chat {
+      margin: 0;
+    }
+  }
+
+  .rd__participants {
+    margin: 0;
+
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+.rd__highlight {
+  box-shadow: 0px 0px 48px 0px #005fff;
+}
+
+@include respond-above(sm) {
+  .rd__sidebar {
+    z-index: 1;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/leave.scss b/sample-apps/react/react-dogfood/style/leave.scss
new file mode 100644
index 0000000000..3c059e831f
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/leave.scss
@@ -0,0 +1,28 @@
+.rd__leave {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--str-video__spacing-lg);
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+
+    .rd__feedback {
+      box-shadow: 0px 14px 34px rgba(0, 0, 0, 0.75);
+    }
+  }
+}
+
+@include respond-above(sm) {
+  .rd__leave-content {
+    max-width: 35vw;
+  }
+}
diff --git a/sample-apps/react/react-dogfood/style/lobby.scss b/sample-apps/react/react-dogfood/style/lobby.scss
new file mode 100644
index 0000000000..7517343489
--- /dev/null
+++ b/sample-apps/react/react-dogfood/style/lobby.scss
@@ -0,0 +1,242 @@
+.rd__lobby {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+
+  &-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+    padding: var(--str-video__spacing-lg);
+
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+
+    .rd__lobby-video-preview {
+      position: relative;
+    }
+
+    .rd__lobby-media-toggle {
+      display: flex;
+      position: absolute;
+      bottom: 0px;
+      gap: var(--str-video__spacing-sm);
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .rd__lobby-video-preview,
+    .str-video__video-preview-container {
+      height: 320px;
+      width: 100%;
+      border-radius: var(--str-video__border-radius-md);
+      border-color: transparent;
+    }
+  }
+
+  &-edge-network {
+    display: flex;
+    align-items: center;
+    padding: var(--str-video__spacing-md);
+    border-radius: var(--str-video__border-radius-md);
+    background-color: var(--str-video__base-color6);
+    gap: var(--str-video__spacing-md);
+    font-size: var(--str-video__font-size-xs);
+  }
+
+  &-heading {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--str-video__font-size-xl);
+    font-weight: 500;
+    margin-bottom: var(--str-video__spacing-xs);
+    text-align: center;
+  }
+
+  &-heading__description {
+    font-size: var(--str-video__font-size-sm);
+    font-weight: 400;
+    margin-top: 0;
+    margin-bottom: var(--str-video__spacing-md);
+    text-align: center;
+  }
+
+  &-camera {
+    width: calc(100vw - var(--str-video__spacing-lg));
+    height: auto;
+
+    &--off {
+      .str-video__video-preview-container {
+        opacity: 0.75;
+      }
+    }
+  }
+
+  &-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-top: var(--str-video__spacing-md);
+    margin-bottom: var(--str-video__spacing-sm);
+  }
+
+  .rd__lobby-media {
+    gap: var(--str-video__spacing-sm);
+  }
+
+  .rd__lobby-settings {
+    display: flex;
+    gap: var(--str-video__spacing-sm);
+  }
+
+  &-join {
+    margin-top: var(--str-video__spacing-lg);
+  }
+
+  &-media {
+    display: flex;
+    align-items: center;
+
+    .str-video__composite-button {
+      flex-direction: row;
+    }
+
+    .str-video__composite-button__caption {
+      width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: left;
+    }
+  }
+
+  .rd__lobby__user-modes {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+    padding-top: 25px;
+  }
+}
+
+.rd__try-native {
+  padding: 10px 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  gap: 10px;
+
+  position: absolute;
+  z-index: 10;
+  background-color: var(--str-video__background-color1);
+
+  .rd__try-native__logo {
+    width: 96px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .rd__try-native__title {
+    margin: 0;
+  }
+
+  .rd__try-native__info-text {
+    padding: 10px 0;
+    color: var(--str-video__base-color2);
+  }
+}
+
+.rd__latencymap {
+  height: 100vh;
+  width: 100vw;
+  z-index: 1;
+
+  &-container {
+    position: absolute;
+    height: 100vh;
+    width: 100vw;
+
+    > canvas {
+      height: 100vh;
+      width: 100vw;
+    }
+  }
+}
+
+.rd__lobby__no-permission {
+  text-align: center;
+}
+@include respond-above(sm) {
+  .rd__lobby-content {
+    max-width: 40vw;
+
+    .rd__lobby-camera {
+      width: 600px;
+      .rd__lobby-video-preview,
+      .str-video__video-preview-container {
+        height: 320px;
+        width: 100%;
+      }
+    }
+
+    .rd__lobby-media {
+      .str-video__composite-button__caption {
+        width: 150px;
+      }
+    }
+  }
+}
+
+.rd__lobby__camera-button.rd__button,
+.rd__lobby__mic-button.rd__button {
+  display: none;
+  padding: var(--str-video__spacing-xs) var(--str-video__spacing-sm);
+  font-size: var(--str-video__font-size-xs);
+}
+.rd__lobby__camera-button__device,
+.rd__lobby__mic-button__device {
+  width: 120px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  margin: 0;
+}
+
+@include respond-above(sm) {
+  .rd__lobby__camera-button.rd__button,
+  .rd__lobby__mic-button.rd__button {
+    display: flex;
+  }
+}
+
+@include respond-above(md) {
+  .rd__lobby-content {
+    max-width: 25vw;
+  }
+}
+
+.mapboxgl-ctrl-bottom-right,
+.mapboxgl-ctrl-attrib a,
+a.mapboxgl-ctrl-logo {
+  display: none;
+}
diff --git a/sample-apps/react/react-video-demo/package.json b/sample-apps/react/react-video-demo/package.json
index 2d30386020..e1698007b8 100644
--- a/sample-apps/react/react-video-demo/package.json
+++ b/sample-apps/react/react-video-demo/package.json
@@ -18,8 +18,7 @@
     "watch:storybook": "start-storybook dev -p 6006"
   },
   "dependencies": {
-    "@nivo/line": "^0.80.0",
-    "@sentry/react": "^7.54.0",
+    "@sentry/react": "^7.91.0",
     "@stream-io/stream-chat-css": "^3.14.1",
     "@stream-io/video-react-sdk": "workspace:^",
     "@stream-io/video-styling": "workspace:^",
@@ -27,11 +26,11 @@
     "classnames": "^2.3.2",
     "date-fns": "^2.29.3",
     "geojson": "^0.5.0",
-    "gleap": "^12.1.2",
+    "gleap": "^13.1.1",
     "hotkeys-js": "^3.12.0",
     "mapbox-gl": "^2.15.0",
     "mobile-device-detect": "^0.4.3",
-    "nanoid": "^5.0.2",
+    "nanoid": "^5.0.4",
     "postcss": "^8.4.31",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
@@ -43,9 +42,9 @@
     "react-tooltip": "^5.8.3",
     "react-transition-group": "^4.4.5",
     "screenfull": "^6.0.2",
-    "stream-chat": "^8.13.0",
+    "stream-chat": "^8.14.4",
     "stream-chat-css": "^1.0.23",
-    "stream-chat-react": "^10.14.0",
+    "stream-chat-react": "^11.2.1",
     "swiper": "^9.1.1",
     "tailwindcss": "^3.2.4",
     "tailwindcss-plugins": "^0.3.0",
@@ -66,7 +65,7 @@
     "@storybook/testing-library": "^0.0.13",
     "@types/babel__core": "^7",
     "@types/geojson": "^7946.0.10",
-    "@types/mapbox-gl": "^2.7.16",
+    "@types/mapbox-gl": "^2.7.19",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
     "@types/react-form": "^4",
@@ -77,7 +76,7 @@
     "@vitejs/plugin-react": "^4.1.0",
     "concurrently": "^7.6.0",
     "rimraf": "^5.0.5",
-    "sass": "^1.69.3",
+    "sass": "^1.69.5",
     "typescript": "^5.2.2"
   },
   "installConfig": {
diff --git a/sample-apps/react/react-video-demo/src/components/CallStats/CallStats.tsx b/sample-apps/react/react-video-demo/src/components/CallStats/CallStats.tsx
index ba71431ffd..4767936e8f 100644
--- a/sample-apps/react/react-video-demo/src/components/CallStats/CallStats.tsx
+++ b/sample-apps/react/react-video-demo/src/components/CallStats/CallStats.tsx
@@ -1,12 +1,15 @@
 import { FC, useEffect, useRef, useState } from 'react';
-import { CallStatsReport, useCallStateHooks } from '@stream-io/video-react-sdk';
+import {
+  CallStatsLatencyChart,
+  CallStatsReport,
+  useCallStateHooks,
+} from '@stream-io/video-react-sdk';
 import classnames from 'classnames';
 
 import StatCard from '../StatCard';
 import { BarGraph, Close, Cog, Info, Latency } from '../Icons';
 import Button from '../Button';
 import Tooltip from '../Tooltip';
-import CallStatsLatencyChart from '../CallStatsLatencyChart';
 
 import { useModalContext } from '../../contexts/ModalContext';
 
@@ -126,10 +129,7 @@ export const CallStats: FC<Props> = ({ className, callId }) => {
               </p>
 
               <div className={styles.chartContainer}>
-                <CallStatsLatencyChart
-                  className={styles.chart}
-                  values={latencyBuffer}
-                />
+                <CallStatsLatencyChart values={latencyBuffer} />
               </div>
 
               <div className={styles.containerHeader}>
@@ -144,7 +144,7 @@ export const CallStats: FC<Props> = ({ className, callId }) => {
                 />
               </div>
               <p className={styles.description}>
-                Your call is recieving data and the connection speed is healthy.
+                Your call is receiving data and the connection speed is healthy.
               </p>
               <div className={styles.statCards}>
                 <StatCard
diff --git a/sample-apps/react/react-video-demo/src/components/CallStatsLatencyChart/CallStatsLatencyChart.module.css b/sample-apps/react/react-video-demo/src/components/CallStatsLatencyChart/CallStatsLatencyChart.module.css
deleted file mode 100644
index c7551b7aeb..0000000000
--- a/sample-apps/react/react-video-demo/src/components/CallStatsLatencyChart/CallStatsLatencyChart.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.root {
-  min-height: 350px;
-}
-.heading {
-  @apply mb-4;
-}
-
-.root > div {
-  @apply text-video-black flex flex-col min-h-[200px] sm:min-h-[250px] w-full;
-}
diff --git a/sample-apps/react/react-video-demo/src/components/CallStatsLatencyChart/CallStatsLatencyChart.tsx b/sample-apps/react/react-video-demo/src/components/CallStatsLatencyChart/CallStatsLatencyChart.tsx
deleted file mode 100644
index 2189a0099a..0000000000
--- a/sample-apps/react/react-video-demo/src/components/CallStatsLatencyChart/CallStatsLatencyChart.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { FC } from 'react';
-import { ResponsiveLine } from '@nivo/line';
-import classnames from 'classnames';
-
-import styles from './CallStatsLatencyChart.module.css';
-
-export type Props = {
-  className: string;
-  values: Array<{ x: number; y: number }>;
-};
-
-export const CallStatsLatencyChart: FC<Props> = ({ className, values }) => {
-  const rootClassName = classnames(styles.root, className);
-
-  let max = 0;
-
-  const data = values.map((point) => {
-    const { y } = point;
-    max = Math.max(max, y);
-    return point;
-  });
-
-  return (
-    <div className={rootClassName}>
-      <h2 className={styles.heading}>Call Timeline</h2>
-
-      <ResponsiveLine
-        data={[
-          {
-            id: 'latency',
-            color: '#005FFF',
-            data: data,
-          },
-        ]}
-        enablePoints
-        enableGridX={false}
-        enableGridY
-        enableSlices="x"
-        isInteractive
-        enableCrosshair={false}
-        useMesh={false}
-        tooltip={({ point }) => {
-          return (
-            <div>
-              lalalala
-              <h6>{point.data.yFormatted}</h6>
-            </div>
-          );
-        }}
-        xScale={{ type: 'point' }}
-        yScale={{
-          type: 'linear',
-          min: 0,
-          max: max < 150 ? 150 : max + 30,
-          nice: true,
-        }}
-        margin={{ top: 10, right: 5, bottom: 5, left: 30 }}
-        axisTop={null}
-        axisBottom={null}
-        axisRight={null}
-        axisLeft={{
-          tickSize: 5,
-          tickPadding: 5,
-          tickRotation: 0,
-          legend: '',
-          legendOffset: 0,
-        }}
-        pointSize={4}
-        pointColor="#005FFF"
-        colors={['#005FFF']}
-        lineWidth={4}
-        legends={[
-          {
-            anchor: 'bottom-right',
-            direction: 'column',
-            justify: false,
-            translateX: 100,
-            translateY: 0,
-            itemsSpacing: 0,
-            itemDirection: 'left-to-right',
-            itemWidth: 80,
-            itemHeight: 20,
-            itemOpacity: 0.75,
-            effects: [
-              {
-                on: 'hover',
-                style: {
-                  itemBackground: 'rgba(255, 255, 255, .03)',
-                  itemOpacity: 1,
-                },
-              },
-            ],
-          },
-        ]}
-        theme={{
-          axis: {
-            ticks: {
-              text: {
-                fill: '#FCFCFD',
-              },
-              line: {
-                stroke: '#FCFCFD',
-              },
-            },
-          },
-          grid: {
-            line: {
-              strokeWidth: 0.1,
-              stroke: '#B4B7BB',
-            },
-          },
-        }}
-      />
-    </div>
-  );
-};
diff --git a/sample-apps/react/react-video-demo/src/components/CallStatsLatencyChart/index.ts b/sample-apps/react/react-video-demo/src/components/CallStatsLatencyChart/index.ts
deleted file mode 100644
index d03be9514e..0000000000
--- a/sample-apps/react/react-video-demo/src/components/CallStatsLatencyChart/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CallStatsLatencyChart as default } from './CallStatsLatencyChart';
diff --git a/sample-apps/react/react-video-demo/src/components/Chat/Chat.tsx b/sample-apps/react/react-video-demo/src/components/Chat/Chat.tsx
index cd1608d618..f3cc9d176d 100644
--- a/sample-apps/react/react-video-demo/src/components/Chat/Chat.tsx
+++ b/sample-apps/react/react-video-demo/src/components/Chat/Chat.tsx
@@ -83,9 +83,7 @@ export const ActiveChat = ({ channelId, channelType }: ActiveChatProps) => {
     >
       <Window>
         <MessageList messageActions={ALLOWED_MESSAGE_ACTIONS} />
-        <MessageInput
-          additionalTextareaProps={{ placeholder: 'Send a message' }}
-        />
+        <MessageInput additionalTextareaProps={{ placeholder: 'Message' }} />
       </Window>
     </Channel>
   );
diff --git a/sample-apps/react/react-video-demo/src/components/LobbyPanel/LobbyPanel.tsx b/sample-apps/react/react-video-demo/src/components/LobbyPanel/LobbyPanel.tsx
index 515e2330d3..725bf2fb65 100644
--- a/sample-apps/react/react-video-demo/src/components/LobbyPanel/LobbyPanel.tsx
+++ b/sample-apps/react/react-video-demo/src/components/LobbyPanel/LobbyPanel.tsx
@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import classnames from 'classnames';
+
 import {
   useCallStateHooks,
   User,
diff --git a/sample-apps/react/zoom-clone/package.json b/sample-apps/react/zoom-clone/package.json
index c4788c5a86..cd2fc5ce53 100644
--- a/sample-apps/react/zoom-clone/package.json
+++ b/sample-apps/react/zoom-clone/package.json
@@ -13,12 +13,12 @@
   "dependencies": {
     "@stream-io/video-react-sdk": "workspace:^",
     "clsx": "^2.0.0",
-    "nanoid": "^5.0.2",
+    "nanoid": "^5.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
-    "stream-chat": "^8.13.0",
-    "stream-chat-react": "^10.14.0"
+    "stream-chat": "^8.14.4",
+    "stream-chat-react": "^11.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.28",
diff --git a/yarn.lock b/yarn.lock
index 31509f721e..87c6d27208 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1916,12 +1916,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.1, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
-  version: 7.23.2
-  resolution: "@babel/runtime@npm:7.23.2"
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.1, @babel/runtime@npm:^7.23.6, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
+  version: 7.23.6
+  resolution: "@babel/runtime@npm:7.23.6"
   dependencies:
     regenerator-runtime: ^0.14.0
-  checksum: 6c4df4839ec75ca10175f636d6362f91df8a3137f86b38f6cd3a4c90668a0fe8e9281d320958f4fbd43b394988958585a17c3aab2a4ea6bf7316b22916a371fb
+  checksum: 1a8eaf3d3a103ef5227b60ca7ab5c589118c36ca65ef2d64e65380b32a98a3f3b5b3ef96660fa0471b079a18b619a8317f3e7f03ab2b930c45282a8b69ed9a16
   languageName: node
   linkType: hard
 
@@ -1975,13 +1975,13 @@ __metadata:
   linkType: hard
 
 "@babel/types@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/types@npm:7.23.6"
+  version: 7.23.9
+  resolution: "@babel/types@npm:7.23.9"
   dependencies:
     "@babel/helper-string-parser": ^7.23.4
     "@babel/helper-validator-identifier": ^7.22.20
     to-fast-properties: ^2.0.0
-  checksum: 68187dbec0d637f79bc96263ac95ec8b06d424396678e7e225492be866414ce28ebc918a75354d4c28659be6efe30020b4f0f6df81cc418a2d30645b690a8de0
+  checksum: 0a9b008e9bfc89beb8c185e620fa0f8ed6c771f1e1b2e01e1596870969096fec7793898a1d64a035176abf1dd13e2668ee30bf699f2d92c210a8128f4b151e65
   languageName: node
   linkType: hard
 
@@ -2354,19 +2354,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@edge-runtime/primitives@npm:3.1.1":
-  version: 3.1.1
-  resolution: "@edge-runtime/primitives@npm:3.1.1"
-  checksum: 8390c10c7c484735704444571293a5221c5574c6c83db8e0e98cf189969564ee62d44055badf50640b899908e4f79f6b29333ceae6634c0c12fec665414791f7
+"@edge-runtime/ponyfill@npm:2.4.1":
+  version: 2.4.1
+  resolution: "@edge-runtime/ponyfill@npm:2.4.1"
+  checksum: ef0363c7f3446ad6069df1fab4110352bd36265f0ddbc3cea9f9523918744f8d0aaaf0e3947aa9f56f78734a339714b89cec36195fe619e4dd64460a3ccbad66
   languageName: node
   linkType: hard
 
-"@edge-runtime/vm@npm:3.1.1":
-  version: 3.1.1
-  resolution: "@edge-runtime/vm@npm:3.1.1"
+"@edge-runtime/primitives@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@edge-runtime/primitives@npm:4.0.5"
+  checksum: c4b8f724526d4b3b3ddfccccbf725ca2163d4dfca311e7ea1d7e7b2d6a3cbb58b0bc4dcd69065ec8a1b13c5bb1cc2e28a3a5643185e036c4734a19d0ed7e96ae
+  languageName: node
+  linkType: hard
+
+"@edge-runtime/vm@npm:3.1.7":
+  version: 3.1.7
+  resolution: "@edge-runtime/vm@npm:3.1.7"
   dependencies:
-    "@edge-runtime/primitives": 3.1.1
-  checksum: 6b9b2a558163e166aa7e234903fabcf49e7552b8b6b915c7a34535e2bce6146791d7ab62c572105796cde3dc08007d37eb20a1f43ee1f60848b0add2e1d1eedc
+    "@edge-runtime/primitives": 4.0.5
+  checksum: e22e62cf40ce9367bce7300fa9f4e2f81a7049d2babba794281d84cd681741c7f5c6bc496e356b460d3fc4e9d28460006758979e3c5a05c9f2b2c4d4e40f2d75
   languageName: node
   linkType: hard
 
@@ -2790,16 +2797,16 @@ __metadata:
     "@babel/runtime": ^7.20.0
     "@expo/code-signing-certificates": 0.0.5
     "@expo/config": ~8.1.0
-    "@expo/config-plugins": ~7.8.0
+    "@expo/config-plugins": ~7.2.0
     "@expo/dev-server": 0.5.5
     "@expo/devcert": ^1.0.0
     "@expo/env": 0.0.5
     "@expo/json-file": ^8.2.37
-    "@expo/metro-config": ~0.17.1
+    "@expo/metro-config": ~0.10.0
     "@expo/osascript": ^2.0.31
     "@expo/package-manager": ~1.1.0
     "@expo/plist": ^0.0.20
-    "@expo/prebuild-config": ~6.7.0
+    "@expo/prebuild-config": 6.2.6
     "@expo/rudder-sdk-node": 1.1.1
     "@expo/spawn-async": 1.5.0
     "@expo/xcpretty": ^4.2.1
@@ -2855,9 +2862,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/cli@npm:0.17.2":
-  version: 0.17.2
-  resolution: "@expo/cli@npm:0.17.2"
+"@expo/cli@npm:0.17.3":
+  version: 0.17.3
+  resolution: "@expo/cli@npm:0.17.3"
   dependencies:
     "@babel/runtime": ^7.20.0
     "@expo/code-signing-certificates": 0.0.5
@@ -2936,7 +2943,7 @@ __metadata:
     ws: ^8.12.1
   bin:
     expo-internal: build/bin/cli
-  checksum: f1c427b0838f0d8a123d2d323e2c16f9e761fb2787c3d7cf90987b992e4d1544ed667455b7bb3cdc71782d30490e3c40ff18d0b4a9f710116b10458cb2f11f8f
+  checksum: bfd78538f26e8571bb5fc8c1f1d0c7c9786489b6e6eba8eab034e82e35311f48bbad9520dd7b73cc456b9cf21963679c0044bfdd40bda024e0e348285237a4d2
   languageName: node
   linkType: hard
 
@@ -2950,6 +2957,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@expo/config-plugins@npm:7.2.5, @expo/config-plugins@npm:~7.2.0":
+  version: 7.2.5
+  resolution: "@expo/config-plugins@npm:7.2.5"
+  dependencies:
+    "@expo/config-types": ^49.0.0-alpha.1
+    "@expo/json-file": ~8.2.37
+    "@expo/plist": ^0.0.20
+    "@expo/sdk-runtime-versions": ^1.0.0
+    "@react-native/normalize-color": ^2.0.0
+    chalk: ^4.1.2
+    debug: ^4.3.1
+    find-up: ~5.0.0
+    getenv: ^1.0.0
+    glob: 7.1.6
+    resolve-from: ^5.0.0
+    semver: ^7.5.3
+    slash: ^3.0.0
+    xcode: ^3.0.1
+    xml2js: 0.6.0
+  checksum: 7ebed343d2109cdb43d03c909845bae5e5a329ee6408acbb4ff09e3dd2a65ed7b80d7b9e09101d20e4c9609f154de8b13c21791e1fa9a30a1875acb5e4be048f
+  languageName: node
+  linkType: hard
+
 "@expo/config-plugins@npm:7.8.4, @expo/config-plugins@npm:~7.8.0, @expo/config-plugins@npm:~7.8.2":
   version: 7.8.4
   resolution: "@expo/config-plugins@npm:7.8.4"
@@ -3001,7 +3031,7 @@ __metadata:
   resolution: "@expo/config@npm:8.1.2"
   dependencies:
     "@babel/code-frame": ~7.10.4
-    "@expo/config-plugins": ~7.8.0
+    "@expo/config-plugins": ~7.2.0
     "@expo/config-types": ^49.0.0-alpha.1
     "@expo/json-file": ^8.2.37
     getenv: ^1.0.0
@@ -3039,7 +3069,7 @@ __metadata:
   resolution: "@expo/dev-server@npm:0.5.5"
   dependencies:
     "@expo/bunyan": 4.0.0
-    "@expo/metro-config": ~0.17.1
+    "@expo/metro-config": ~0.10.0
     "@expo/osascript": 2.0.33
     "@expo/spawn-async": ^1.5.0
     body-parser: ^1.20.1
@@ -3121,6 +3151,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@expo/image-utils@npm:0.3.22":
+  version: 0.3.22
+  resolution: "@expo/image-utils@npm:0.3.22"
+  dependencies:
+    "@expo/spawn-async": 1.5.0
+    chalk: ^4.0.0
+    fs-extra: 9.0.0
+    getenv: ^1.0.0
+    jimp-compact: 0.16.1
+    mime: ^2.4.4
+    node-fetch: ^2.6.0
+    parse-png: ^2.1.0
+    resolve-from: ^5.0.0
+    semver: 7.3.2
+    tempy: 0.3.0
+  checksum: 09b2db29f4b34994bb0fea480475a9947876eede1a8dcaf3cac21edf4e537179d1673bedaf47404e0634eec4b5a17be471e8c8c3c2c0ce2b84df793107d496c2
+  languageName: node
+  linkType: hard
+
 "@expo/image-utils@npm:^0.3.18":
   version: 0.3.23
   resolution: "@expo/image-utils@npm:0.3.23"
@@ -3158,7 +3207,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/json-file@npm:^8.2.37":
+"@expo/json-file@npm:^8.2.37, @expo/json-file@npm:~8.2.37":
   version: 8.2.37
   resolution: "@expo/json-file@npm:8.2.37"
   dependencies:
@@ -3180,7 +3229,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/metro-config@npm:0.17.3, @expo/metro-config@npm:~0.17.0, @expo/metro-config@npm:~0.17.1":
+"@expo/metro-config@npm:0.17.3, @expo/metro-config@npm:~0.17.0":
   version: 0.17.3
   resolution: "@expo/metro-config@npm:0.17.3"
   dependencies:
@@ -3210,6 +3259,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@expo/metro-config@npm:~0.10.0":
+  version: 0.10.7
+  resolution: "@expo/metro-config@npm:0.10.7"
+  dependencies:
+    "@expo/config": ~8.1.0
+    "@expo/env": 0.0.5
+    "@expo/json-file": ~8.2.37
+    chalk: ^4.1.0
+    debug: ^4.3.2
+    find-yarn-workspace-root: ~2.0.0
+    getenv: ^1.0.0
+    jsc-safe-url: ^0.2.4
+    lightningcss: ~1.19.0
+    postcss: ~8.4.21
+    resolve-from: ^5.0.0
+    sucrase: ^3.20.0
+  checksum: 7b54e08598e2673320a1647ce0f2ab8735cf15f3ea406b2d37b2fed96c7d66f6be9ca10aa622b7a1a7530168627c568f92d2060b8d22a639aaf758a21fb6f03b
+  languageName: node
+  linkType: hard
+
 "@expo/metro-runtime@npm:3.1.0":
   version: 3.1.0
   resolution: "@expo/metro-runtime@npm:3.1.0"
@@ -3290,6 +3359,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@expo/prebuild-config@npm:6.2.6":
+  version: 6.2.6
+  resolution: "@expo/prebuild-config@npm:6.2.6"
+  dependencies:
+    "@expo/config": ~8.1.0
+    "@expo/config-plugins": ~7.2.0
+    "@expo/config-types": ^49.0.0-alpha.1
+    "@expo/image-utils": 0.3.22
+    "@expo/json-file": ^8.2.37
+    debug: ^4.3.1
+    fs-extra: ^9.0.0
+    resolve-from: ^5.0.0
+    semver: 7.5.3
+    xml2js: 0.6.0
+  peerDependencies:
+    expo-modules-autolinking: ">=0.8.1"
+  checksum: ebb83bfba2c7bf6f386f64448213415ce893af69b6a56311dc88400bee24183d934a3c515e6156aad71877def942b6ef608211fdede6a8503eadddc8022e5921
+  languageName: node
+  linkType: hard
+
 "@expo/prebuild-config@npm:6.7.0":
   version: 6.7.0
   resolution: "@expo/prebuild-config@npm:6.7.0"
@@ -3311,7 +3400,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@expo/prebuild-config@npm:6.7.4, @expo/prebuild-config@npm:~6.7.0":
+"@expo/prebuild-config@npm:6.7.4":
   version: 6.7.4
   resolution: "@expo/prebuild-config@npm:6.7.4"
   dependencies:
@@ -3425,55 +3514,62 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.4.2":
-  version: 1.5.0
-  resolution: "@floating-ui/core@npm:1.5.0"
-  dependencies:
-    "@floating-ui/utils": ^0.1.3
-  checksum: 54b4fe26b3c228746ac5589f97303abf158b80aa5f8b99027259decd68d1c2030c4c637648ebd33dfe78a4212699453bc2bd7537fd5a594d3bd3e63d362f666f
+"@fastify/busboy@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "@fastify/busboy@npm:2.1.0"
+  checksum: 3233abd10f73e50668cb4bb278a79b7b3fadd30215ac6458299b0e5a09a29c3586ec07597aae6bd93f5cbedfcef43a8aeea51829cd28fc13850cdbcd324c28d5
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.0.0, @floating-ui/dom@npm:^1.5.1":
+"@floating-ui/core@npm:^1.5.3":
   version: 1.5.3
-  resolution: "@floating-ui/dom@npm:1.5.3"
+  resolution: "@floating-ui/core@npm:1.5.3"
   dependencies:
-    "@floating-ui/core": ^1.4.2
-    "@floating-ui/utils": ^0.1.3
-  checksum: 00053742064aac70957f0bd5c1542caafb3bfe9716588bfe1d409fef72a67ed5e60450d08eb492a77f78c22ed1ce4f7955873cc72bf9f9caf2b0f43ae3561c21
+    "@floating-ui/utils": ^0.2.0
+  checksum: 72af8563e1742791acee82e86f82a0fbca7445809988d31eea3fd5771909463aa7655a6cb001cc244f8fe3a9de600420257e4dfb887ca33e2a31ac47b52e39a2
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "@floating-ui/react-dom@npm:2.0.2"
+"@floating-ui/dom@npm:^1.0.0, @floating-ui/dom@npm:^1.5.4":
+  version: 1.5.4
+  resolution: "@floating-ui/dom@npm:1.5.4"
   dependencies:
-    "@floating-ui/dom": ^1.5.1
+    "@floating-ui/core": ^1.5.3
+    "@floating-ui/utils": ^0.2.0
+  checksum: 5e6f05532ff4e6daf9f2d91534184d8f942ddb8fd260c2543a49bdf0c0ff69fd0867937ce1d023126008724ac238f8fc89b5e48f82cdf9f8355a1d04edd085bd
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^2.0.2, @floating-ui/react-dom@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "@floating-ui/react-dom@npm:2.0.5"
+  dependencies:
+    "@floating-ui/dom": ^1.5.4
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 4797e1f7a19c1e531ed0d578ccdcbe58970743e5a480ba30424857fc953063f36d481f8c5d69248a8f1d521b739e94bf5e1ffb35506400dea3d914f166ed2f7f
+  checksum: 24cadf4626ae860b59cd3b86e0d8e9a51f1120f52aaa89cbed9425d78d0e0034e097a16bb022628996eb2386783c44b10aeb3c2988083fc046e0480e573d575d
   languageName: node
   linkType: hard
 
-"@floating-ui/react@npm:^0.26.1":
-  version: 0.26.1
-  resolution: "@floating-ui/react@npm:0.26.1"
+"@floating-ui/react@npm:^0.26.5":
+  version: 0.26.5
+  resolution: "@floating-ui/react@npm:0.26.5"
   dependencies:
-    "@floating-ui/react-dom": ^2.0.2
-    "@floating-ui/utils": ^0.1.5
+    "@floating-ui/react-dom": ^2.0.5
+    "@floating-ui/utils": ^0.2.0
     tabbable: ^6.0.1
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: e89fda56735027dd635ca46baaec31c2c7abfbd772855db2f22dad9a320b67bb01cea8f75e1bdab8d82f8cb4a5dd3c60c608e1e242a23cdc781c8c5856634e4c
+  checksum: 6e148e3721cd8f146b7f216bd40a59ff84add9161dcfddfa6422451d6204485804d11781550da07e2ea22eefd821036f444ab067a7091b9663ea369ce563ce59
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.1.3, @floating-ui/utils@npm:^0.1.5":
-  version: 0.1.6
-  resolution: "@floating-ui/utils@npm:0.1.6"
-  checksum: b34d4b5470869727f52e312e08272edef985ba5a450a76de0917ba0a9c6f5df2bdbeb99448e2c60f39b177fb8981c772ff1831424e75123471a27ebd5b52c1eb
+"@floating-ui/utils@npm:^0.2.0":
+  version: 0.2.1
+  resolution: "@floating-ui/utils@npm:0.2.1"
+  checksum: 9ed4380653c7c217cd6f66ae51f20fdce433730dbc77f95b5abfb5a808f5fdb029c6ae249b4e0490a816f2453aa6e586d9a873cd157fdba4690f65628efc6e06
   languageName: node
   linkType: hard
 
@@ -4240,6 +4336,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@kurkle/color@npm:^0.3.0":
+  version: 0.3.2
+  resolution: "@kurkle/color@npm:0.3.2"
+  checksum: 79e97b31f8f6efb28c69d373f94b0c7480226fe8ec95221f518ac998e156444a496727ce47de6d728eb5c3369288e794cba82cae34253deb0d472d3bfe080e49
+  languageName: node
+  linkType: hard
+
 "@lukeed/csprng@npm:^1.0.0":
   version: 1.1.0
   resolution: "@lukeed/csprng@npm:1.1.0"
@@ -4621,229 +4724,94 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:14.0.2":
-  version: 14.0.2
-  resolution: "@next/env@npm:14.0.2"
-  checksum: 5a43177f3cb19ad61b60d0b30d0c0cc2b8d0f6089c8b820f51536280ee00a20c3d38969e3c309cf9dfa35acafe0bb4bc452167a7fea25baaa7036156191e2f1e
+"@next/env@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@next/env@npm:14.1.0"
+  checksum: ecec03a3e9745996ed1c7fc218fc9a1a4345a0cf368afb50f38a3b6fbf6f966a36dba174c90b5f90b568188dbd0eba48a2c5448b6742298417df4ff3351c6d40
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:14.0.2":
-  version: 14.0.2
-  resolution: "@next/swc-darwin-arm64@npm:14.0.2"
+"@next/swc-darwin-arm64@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@next/swc-darwin-arm64@npm:14.1.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:14.0.2":
-  version: 14.0.2
-  resolution: "@next/swc-darwin-x64@npm:14.0.2"
+"@next/swc-darwin-x64@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@next/swc-darwin-x64@npm:14.1.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:14.0.2":
-  version: 14.0.2
-  resolution: "@next/swc-linux-arm64-gnu@npm:14.0.2"
+"@next/swc-linux-arm64-gnu@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@next/swc-linux-arm64-gnu@npm:14.1.0"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:14.0.2":
-  version: 14.0.2
-  resolution: "@next/swc-linux-arm64-musl@npm:14.0.2"
+"@next/swc-linux-arm64-musl@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@next/swc-linux-arm64-musl@npm:14.1.0"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:14.0.2":
-  version: 14.0.2
-  resolution: "@next/swc-linux-x64-gnu@npm:14.0.2"
+"@next/swc-linux-x64-gnu@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@next/swc-linux-x64-gnu@npm:14.1.0"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:14.0.2":
-  version: 14.0.2
-  resolution: "@next/swc-linux-x64-musl@npm:14.0.2"
+"@next/swc-linux-x64-musl@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@next/swc-linux-x64-musl@npm:14.1.0"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:14.0.2":
-  version: 14.0.2
-  resolution: "@next/swc-win32-arm64-msvc@npm:14.0.2"
+"@next/swc-win32-arm64-msvc@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@next/swc-win32-arm64-msvc@npm:14.1.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:14.0.2":
-  version: 14.0.2
-  resolution: "@next/swc-win32-ia32-msvc@npm:14.0.2"
+"@next/swc-win32-ia32-msvc@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@next/swc-win32-ia32-msvc@npm:14.1.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:14.0.2":
-  version: 14.0.2
-  resolution: "@next/swc-win32-x64-msvc@npm:14.0.2"
+"@next/swc-win32-x64-msvc@npm:14.1.0":
+  version: 14.1.0
+  resolution: "@next/swc-win32-x64-msvc@npm:14.1.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
-  version: 5.1.1-v1
-  resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
-  dependencies:
-    eslint-scope: 5.1.1
-  checksum: f2e3b2d6a6e2d9f163ca22105910c9f850dc4897af0aea3ef0a5886b63d8e1ba6505b71c99cb78a3bba24a09557d601eb21c8dede3f3213753fcfef364eb0e57
-  languageName: node
-  linkType: hard
-
-"@nivo/annotations@npm:0.80.0":
-  version: 0.80.0
-  resolution: "@nivo/annotations@npm:0.80.0"
-  dependencies:
-    "@nivo/colors": 0.80.0
-    "@react-spring/web": 9.4.5
-    lodash: ^4.17.21
-  peerDependencies:
-    "@nivo/core": 0.80.0
-    react: ">= 16.14.0 < 19.0.0"
-  checksum: 6b2dcc3cc443a660b10feab378b816e84f8aff4390345f8316852d88dcd893af0c8de63aad6bb6296ae13c55e4cce4a57f3f3898f5fdac03bb756df24a81d3fd
-  languageName: node
-  linkType: hard
-
-"@nivo/axes@npm:0.80.0":
-  version: 0.80.0
-  resolution: "@nivo/axes@npm:0.80.0"
-  dependencies:
-    "@nivo/scales": 0.80.0
-    "@react-spring/web": 9.4.5
-    d3-format: ^1.4.4
-    d3-time-format: ^3.0.0
-  peerDependencies:
-    "@nivo/core": 0.80.0
-    prop-types: ">= 15.5.10 < 16.0.0"
-    react: ">= 16.14.0 < 19.0.0"
-  checksum: 59cea2b3f2dc547f3ebbe920b4c789ac8c5dd4b3e5ba3c323d84f63d052faf813655cca8bb861a035ee064a8d71931bb35e956fc581051c0e86c4a80a1e581df
-  languageName: node
-  linkType: hard
-
-"@nivo/colors@npm:0.80.0":
-  version: 0.80.0
-  resolution: "@nivo/colors@npm:0.80.0"
-  dependencies:
-    d3-color: ^2.0.0
-    d3-scale: ^3.2.3
-    d3-scale-chromatic: ^2.0.0
-    lodash: ^4.17.21
-  peerDependencies:
-    "@nivo/core": 0.80.0
-    prop-types: ">= 15.5.10 < 16.0.0"
-    react: ">= 16.14.0 < 19.0.0"
-  checksum: 0dc2044c984d8180d2f0a13fba6b6cdda0a18eec6ef71e9e523794f7ba70ed896231840f22c93f7e30b8730fde26ec07fff8e3d08fef120e91c8a9d552aa1fca
-  languageName: node
-  linkType: hard
-
-"@nivo/core@npm:^0.80.0":
-  version: 0.80.0
-  resolution: "@nivo/core@npm:0.80.0"
-  dependencies:
-    "@nivo/recompose": 0.80.0
-    "@react-spring/web": 9.4.5
-    d3-color: ^2.0.0
-    d3-format: ^1.4.4
-    d3-interpolate: ^2.0.1
-    d3-scale: ^3.2.3
-    d3-scale-chromatic: ^2.0.0
-    d3-shape: ^1.3.5
-    d3-time-format: ^3.0.0
-    lodash: ^4.17.21
-  peerDependencies:
-    "@nivo/tooltip": 0.80.0
-    prop-types: ">= 15.5.10 < 16.0.0"
-    react: ">= 16.14.0 < 19.0.0"
-  checksum: 05fd9ccc9d9876affea17498a2007f5974641c7a2bb1c12c4d8f97bdae48519dd5882c65653074b6756d14eef47dbaeaf8b8243d3e5389efd3d1e180ecbfde75
-  languageName: node
-  linkType: hard
-
-"@nivo/legends@npm:0.80.0":
-  version: 0.80.0
-  resolution: "@nivo/legends@npm:0.80.0"
-  peerDependencies:
-    "@nivo/core": 0.80.0
-    prop-types: ">= 15.5.10 < 16.0.0"
-    react: ">= 16.14.0 < 19.0.0"
-  checksum: 659aba35105143ac7da663a51bc6a69f815e23efd278b8b1314bd48b9c853f4c3b7e9cf61de1439390eff3983b754eaea5dd3923fa2caad97b0fca6133a05ae9
-  languageName: node
-  linkType: hard
-
-"@nivo/line@npm:^0.80.0":
-  version: 0.80.0
-  resolution: "@nivo/line@npm:0.80.0"
-  dependencies:
-    "@nivo/annotations": 0.80.0
-    "@nivo/axes": 0.80.0
-    "@nivo/colors": 0.80.0
-    "@nivo/legends": 0.80.0
-    "@nivo/scales": 0.80.0
-    "@nivo/tooltip": 0.80.0
-    "@nivo/voronoi": 0.80.0
-    "@react-spring/web": 9.4.5
-    d3-shape: ^1.3.5
-  peerDependencies:
-    "@nivo/core": 0.80.0
-    prop-types: ">= 15.5.10 < 16.0.0"
-    react: ">= 16.14.0 < 19.0.0"
-  checksum: e2d83971e5d530b4465e628f926d2b311a39ce0fa137b0c942532ca58959d78ced21166e83ce9644c91bf2a2929ac539fdd4307fc7ceda986050346b662de1a3
-  languageName: node
-  linkType: hard
-
-"@nivo/recompose@npm:0.80.0":
-  version: 0.80.0
-  resolution: "@nivo/recompose@npm:0.80.0"
-  dependencies:
-    react-lifecycles-compat: ^3.0.4
-  peerDependencies:
-    react: ">= 16.14.0 < 19.0.0"
-  checksum: 5495eeba137f4d3a46d1ada99948c5b097ccf00c532f10a627bb0525c6fbab14d93c9297a25d90c0041f72432efbd4e9a2ef5d408063e2c4cf25d05f33b1fcc5
-  languageName: node
-  linkType: hard
-
-"@nivo/scales@npm:0.80.0":
-  version: 0.80.0
-  resolution: "@nivo/scales@npm:0.80.0"
-  dependencies:
-    d3-scale: ^3.2.3
-    d3-time: ^1.0.11
-    d3-time-format: ^3.0.0
-    lodash: ^4.17.21
-  checksum: 75bdc838ab593306268cda2c098430cb5ff1f20ab73dd5d61845fa013e30fd85020c910c9dd0a7641d90ee04f86031af71a250f5f5992fe74a23bcf4fb954f95
-  languageName: node
-  linkType: hard
-
-"@nivo/tooltip@npm:0.80.0":
-  version: 0.80.0
-  resolution: "@nivo/tooltip@npm:0.80.0"
+"@next/third-parties@npm:^14.1.0":
+  version: 14.1.0
+  resolution: "@next/third-parties@npm:14.1.0"
   dependencies:
-    "@react-spring/web": 9.4.5
+    third-party-capital: 1.0.20
   peerDependencies:
-    "@nivo/core": 0.80.0
-  checksum: bc0eec5d0d05f653186b040105d7451c823d8ee0844b7767f3d827424346d6379966452055be168994132ca8610f1956798274701a1bb948d3e8d961f23a07b7
+    next: ^13.0.0 || ^14.0.0
+    react: ^18.2.0
+  checksum: 1b33596b14a08143fbb1d6b808a8eaee6adf24e9c7b54984774b06b30036625224a5d3cbd5577e3436ab8f047585b3fcfb01456bfa1c6493c1e2b624b7407230
   languageName: node
   linkType: hard
 
-"@nivo/voronoi@npm:0.80.0":
-  version: 0.80.0
-  resolution: "@nivo/voronoi@npm:0.80.0"
+"@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
+  version: 5.1.1-v1
+  resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
   dependencies:
-    d3-delaunay: ^5.3.0
-    d3-scale: ^3.2.3
-  peerDependencies:
-    "@nivo/core": 0.80.0
-    react: ">= 16.14.0 < 19.0.0"
-  checksum: 7b4f844611f64742c5ed14e94fa7a3f813d0b6cde04c40c3d597e0d4180977db8fe957ff4f4b1c5a131e4c43e20a01e684c8b934e0b9583d726b2b13986e9efb
+    eslint-scope: 5.1.1
+  checksum: f2e3b2d6a6e2d9f163ca22105910c9f850dc4897af0aea3ef0a5886b63d8e1ba6505b71c99cb78a3bba24a09557d601eb21c8dede3f3213753fcfef364eb0e57
   languageName: node
   linkType: hard
 
@@ -5155,29 +5123,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@protobuf-ts/runtime-rpc@npm:^2.9.1":
-  version: 2.9.1
-  resolution: "@protobuf-ts/runtime-rpc@npm:2.9.1"
+"@protobuf-ts/runtime-rpc@npm:^2.9.3":
+  version: 2.9.3
+  resolution: "@protobuf-ts/runtime-rpc@npm:2.9.3"
   dependencies:
-    "@protobuf-ts/runtime": ^2.9.1
-  checksum: 16f28b95f9e6418d44ba9f51c6d30ffb8bacd7902ccf4a8833bb1ffe498342ec2f1cfe6090bda547449c64995fbb7cc8b13a7ac01ceb6500f7d2f2087143dde6
+    "@protobuf-ts/runtime": ^2.9.3
+  checksum: 3aa17911d1d9ce4021d57e9a45e4351adaa92ed66f6ae34258f416d2f79802d647cb1fb6aee13b187d7b26573199ae8ab09abbca1d23cb279d2c42b530f48ff3
   languageName: node
   linkType: hard
 
-"@protobuf-ts/runtime@npm:^2.9.1":
-  version: 2.9.1
-  resolution: "@protobuf-ts/runtime@npm:2.9.1"
-  checksum: 8507103d7bf790c57c383bfc711e1c2766fab34c4a4d0ec30395f6da8f06e86a9e8b7af0f00cf19a8a0ecaf2feaf75cf3787ee1fd1d1d8ecedba5fc290113e15
+"@protobuf-ts/runtime@npm:^2.9.3":
+  version: 2.9.3
+  resolution: "@protobuf-ts/runtime@npm:2.9.3"
+  checksum: 32d2f446794ad293e120bf7a3a55a874810bdb474eee0493411a2d6173ec862fce9d0cd15db9579fe4c8b253ee5383b9473a8bd0d726c41847b87116c11ae7cd
   languageName: node
   linkType: hard
 
-"@protobuf-ts/twirp-transport@npm:^2.9.1":
-  version: 2.9.1
-  resolution: "@protobuf-ts/twirp-transport@npm:2.9.1"
+"@protobuf-ts/twirp-transport@npm:^2.9.3":
+  version: 2.9.3
+  resolution: "@protobuf-ts/twirp-transport@npm:2.9.3"
   dependencies:
-    "@protobuf-ts/runtime": ^2.9.1
-    "@protobuf-ts/runtime-rpc": ^2.9.1
-  checksum: 738ce44bd8b75ac2313a96cd7b99c12af30f7c8a92c6d04aa2d913a64e1af7b73e8cea61f98a29c07e5b17ecf91b7ba469c494e6e66d0a5c9cba4177ec6c318a
+    "@protobuf-ts/runtime": ^2.9.3
+    "@protobuf-ts/runtime-rpc": ^2.9.3
+  checksum: 8175abf39ec2a3f5fa38b349be63862e6d99abbfff9bcae7b1883a0fdf50ad3ee7bb0d33e2c9491881b7fbfcbf88f8d52de316f654fd31e868213fbc9b26eb3c
   languageName: node
   linkType: hard
 
@@ -5966,7 +5934,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/babel-preset@npm:0.73.19, @react-native/babel-preset@npm:^0.73.18":
+"@react-native/babel-preset@npm:0.73.19":
   version: 0.73.19
   resolution: "@react-native/babel-preset@npm:0.73.19"
   dependencies:
@@ -6018,7 +5986,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native/babel-preset@npm:0.73.21":
+"@react-native/babel-preset@npm:0.73.21, @react-native/babel-preset@npm:^0.73.18":
   version: 0.73.21
   resolution: "@react-native/babel-preset@npm:0.73.21"
   dependencies:
@@ -6448,73 +6416,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-spring/animated@npm:~9.4.5":
-  version: 9.4.5
-  resolution: "@react-spring/animated@npm:9.4.5"
-  dependencies:
-    "@react-spring/shared": ~9.4.5
-    "@react-spring/types": ~9.4.5
-  peerDependencies:
-    react: ^16.8.0  || >=17.0.0 || >=18.0.0
-  checksum: e85c0bd65bd76e1c8ca830b22e31956401e29593cbc1df7560f5b77bd7b31acded61e1732717803cdfd993f30c2559ffbd6fb5f0d48b1c749323bee3597d7834
-  languageName: node
-  linkType: hard
-
-"@react-spring/core@npm:~9.4.5":
-  version: 9.4.5
-  resolution: "@react-spring/core@npm:9.4.5"
-  dependencies:
-    "@react-spring/animated": ~9.4.5
-    "@react-spring/rafz": ~9.4.5
-    "@react-spring/shared": ~9.4.5
-    "@react-spring/types": ~9.4.5
-  peerDependencies:
-    react: ^16.8.0  || >=17.0.0 || >=18.0.0
-  checksum: e5aee7f68f15c9d5d6f230703d22cb34edb8aae3ba0d70c01847f7c78e47f9f8177f87c095aff5ed1b98c2a218238d5ec28f9bf451f3e13bfdad6e3170a60226
-  languageName: node
-  linkType: hard
-
-"@react-spring/rafz@npm:~9.4.5":
-  version: 9.4.5
-  resolution: "@react-spring/rafz@npm:9.4.5"
-  checksum: 0ac722881b107baf55338a0123bc889d88faca53f034eb6d26ebab3ae6e4dc1717654b09d0e6e5e9bf587c2ba182d6aae90ca22c833dc55024ee52d88f8579a2
-  languageName: node
-  linkType: hard
-
-"@react-spring/shared@npm:~9.4.5":
-  version: 9.4.5
-  resolution: "@react-spring/shared@npm:9.4.5"
-  dependencies:
-    "@react-spring/rafz": ~9.4.5
-    "@react-spring/types": ~9.4.5
-  peerDependencies:
-    react: ^16.8.0  || >=17.0.0 || >=18.0.0
-  checksum: 2f20e410c03166de19b2d668d6841d24778c37da3083d37fe70acfcf2cf0cb3bd4a5cf92d42f1590b9de5d0a6603dc75cf8c319c0089df4e713226364a204b51
-  languageName: node
-  linkType: hard
-
-"@react-spring/types@npm:~9.4.5":
-  version: 9.4.5
-  resolution: "@react-spring/types@npm:9.4.5"
-  checksum: f8fecb54015de23899cc595d949e3676835e612d4dda05af470cab9ee20dd98c86ebca1c4ba75d2a9f63a4acba4b75febf6bab71da0b2e9556e6ff684b22f139
-  languageName: node
-  linkType: hard
-
-"@react-spring/web@npm:9.4.5":
-  version: 9.4.5
-  resolution: "@react-spring/web@npm:9.4.5"
-  dependencies:
-    "@react-spring/animated": ~9.4.5
-    "@react-spring/core": ~9.4.5
-    "@react-spring/shared": ~9.4.5
-    "@react-spring/types": ~9.4.5
-  peerDependencies:
-    react: ^16.8.0  || >=17.0.0 || >=18.0.0
-    react-dom: ^16.8.0  || >=17.0.0 || >=18.0.0
-  checksum: 9d7eea4b8b0399c205743acade141679f3f729a64631f8480d44d14bb59781ea807977a4671cbe1d56e31389b69ef325ec975275446f08997f555f2981d220c8
-  languageName: node
-  linkType: hard
-
 "@remix-run/node@npm:^1.19.3":
   version: 1.19.3
   resolution: "@remix-run/node@npm:1.19.3"
@@ -6878,55 +6779,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry-internal/tracing@npm:7.54.0":
-  version: 7.54.0
-  resolution: "@sentry-internal/tracing@npm:7.54.0"
+"@sentry-internal/feedback@npm:7.91.0":
+  version: 7.91.0
+  resolution: "@sentry-internal/feedback@npm:7.91.0"
   dependencies:
-    "@sentry/core": 7.54.0
-    "@sentry/types": 7.54.0
-    "@sentry/utils": 7.54.0
-    tslib: ^1.9.3
-  checksum: 4adc923c7ab33465b5fdf3413699954d6091c6aa053e9bf2d3e799fa5ded753c1798d0d328fd65d1d49fadd1840ed4a7797b77f5714636dee3ee8526aafb90cc
+    "@sentry/core": 7.91.0
+    "@sentry/types": 7.91.0
+    "@sentry/utils": 7.91.0
+  checksum: 91ae9095e6c8193f9fef7bcec902c53a9ba14e1dd755a22ec3e129264b4155a36aef4acd7b71d7de54441929099c0d8de941d5489c9e1c32263f3421fc1c9ef3
   languageName: node
   linkType: hard
 
-"@sentry-internal/tracing@npm:7.70.0":
-  version: 7.70.0
-  resolution: "@sentry-internal/tracing@npm:7.70.0"
+"@sentry-internal/tracing@npm:7.91.0":
+  version: 7.91.0
+  resolution: "@sentry-internal/tracing@npm:7.91.0"
   dependencies:
-    "@sentry/core": 7.70.0
-    "@sentry/types": 7.70.0
-    "@sentry/utils": 7.70.0
-    tslib: ^2.4.1 || ^1.9.3
-  checksum: 51fe662ae5b4e26a9698515dbd47427714966c4e3f5df6f19d3d26c21150e17260e4b8c53e814a7e9274e8ca7b7994a4fac2838a71233cadcd4a30f394f9227e
+    "@sentry/core": 7.91.0
+    "@sentry/types": 7.91.0
+    "@sentry/utils": 7.91.0
+  checksum: 2097dedbaa7a138fe7125b60545fcc115d9de0adaa97f35a1fd9ea28a30b915c6a0d9d1a69c6d7f7616708241004152676752178efa15e39eb971732457acae5
   languageName: node
   linkType: hard
 
-"@sentry/browser@npm:7.54.0":
-  version: 7.54.0
-  resolution: "@sentry/browser@npm:7.54.0"
+"@sentry/browser@npm:7.91.0":
+  version: 7.91.0
+  resolution: "@sentry/browser@npm:7.91.0"
   dependencies:
-    "@sentry-internal/tracing": 7.54.0
-    "@sentry/core": 7.54.0
-    "@sentry/replay": 7.54.0
-    "@sentry/types": 7.54.0
-    "@sentry/utils": 7.54.0
-    tslib: ^1.9.3
-  checksum: b466c069954b61aefd6b165937c0fc2055ac4dcb80e739b4f600224b008139232948dd1e1a67f4f660fa04b8c0fe29b33574709302ef825945721286b81da52a
-  languageName: node
-  linkType: hard
-
-"@sentry/browser@npm:7.70.0":
-  version: 7.70.0
-  resolution: "@sentry/browser@npm:7.70.0"
-  dependencies:
-    "@sentry-internal/tracing": 7.70.0
-    "@sentry/core": 7.70.0
-    "@sentry/replay": 7.70.0
-    "@sentry/types": 7.70.0
-    "@sentry/utils": 7.70.0
-    tslib: ^2.4.1 || ^1.9.3
-  checksum: 805f3fa8517c2d072aef94e9b4487929dd275aac5332a46a641a7c394de130d50401671a2b0d043ef67e716ba35a364dacac95e67d845d657ca9cad6f947abe2
+    "@sentry-internal/feedback": 7.91.0
+    "@sentry-internal/tracing": 7.91.0
+    "@sentry/core": 7.91.0
+    "@sentry/replay": 7.91.0
+    "@sentry/types": 7.91.0
+    "@sentry/utils": 7.91.0
+  checksum: 5b8134374575bcefc73910e99471f4bde442ba800b7fa2d02b0633d795707d0fa74a918212aa7d093bc81e0cc3865aac2fe3e6be5e721001036f588c8ad30695
   languageName: node
   linkType: hard
 
@@ -6946,9 +6831,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/cli@npm:^1.74.6":
-  version: 1.75.0
-  resolution: "@sentry/cli@npm:1.75.0"
+"@sentry/cli@npm:^1.77.1":
+  version: 1.77.1
+  resolution: "@sentry/cli@npm:1.77.1"
   dependencies:
     https-proxy-agent: ^5.0.0
     mkdirp: ^0.5.5
@@ -6958,7 +6843,7 @@ __metadata:
     which: ^2.0.2
   bin:
     sentry-cli: bin/sentry-cli
-  checksum: d5b130bb45bc96d0f738801343455e6a113d1cc9e16166f0d6bfa022809b557159f010677d2dc05adcdfa7f8ad23c401182b6daef720fa2a0bad82fa6e3b2148
+  checksum: 8b2604ece002ad5124af4a607bd5c208cde582164315b7028cdf82864eb67de3dfdab99ecee93d36d698e85f05d3a8c8082368659c499f9a3f711b8f55dffc79
   languageName: node
   linkType: hard
 
@@ -6977,182 +6862,120 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/core@npm:7.54.0":
-  version: 7.54.0
-  resolution: "@sentry/core@npm:7.54.0"
-  dependencies:
-    "@sentry/types": 7.54.0
-    "@sentry/utils": 7.54.0
-    tslib: ^1.9.3
-  checksum: c80839ff98c1dce97d793531475d8223d4dc10f0eab34a76cef815467c73773162d5bb52ad043d5bcc19200206dbd41f87bc4e46cde7693884651c4c4cde3ad6
-  languageName: node
-  linkType: hard
-
-"@sentry/core@npm:7.70.0":
-  version: 7.70.0
-  resolution: "@sentry/core@npm:7.70.0"
+"@sentry/core@npm:7.91.0":
+  version: 7.91.0
+  resolution: "@sentry/core@npm:7.91.0"
   dependencies:
-    "@sentry/types": 7.70.0
-    "@sentry/utils": 7.70.0
-    tslib: ^2.4.1 || ^1.9.3
-  checksum: 550ff55f8232fbbe8263b05deca997b6fe98ae19fe445f39d90915cc515bdcc8d6c2ec09df6976fcf750547adc39aefb5714ebfd5f039b32e94c5c5320f4cfab
+    "@sentry/types": 7.91.0
+    "@sentry/utils": 7.91.0
+  checksum: 5a284c1b1f88ed8d642578cce293c91a0979f533db156fcccb8cae68d1d426a14730e6b06d993a69a1d640b988481c6451dcffe8812c6bc3e23fc8bce5c04dc0
   languageName: node
   linkType: hard
 
-"@sentry/integrations@npm:7.54.0":
-  version: 7.54.0
-  resolution: "@sentry/integrations@npm:7.54.0"
+"@sentry/integrations@npm:7.91.0":
+  version: 7.91.0
+  resolution: "@sentry/integrations@npm:7.91.0"
   dependencies:
-    "@sentry/types": 7.54.0
-    "@sentry/utils": 7.54.0
+    "@sentry/core": 7.91.0
+    "@sentry/types": 7.91.0
+    "@sentry/utils": 7.91.0
     localforage: ^1.8.1
-    tslib: ^1.9.3
-  checksum: 4a6c9de543dbee324cf1c7908e481b024943c6a66eafec4fe569aea3fc9be183fe1b4147076e90e704fc12f1ef8b975b0a6e00e3bd782988551d2ed8064eadc9
+  checksum: ab7b6f129892d9146215660c76d0260eb2d48872329611860cdb1051a4d12e9ba393b216183473f9ca1be1cb89fcfe7a337ac6fe80b0aeca09faae297d909fc6
   languageName: node
   linkType: hard
 
-"@sentry/nextjs@npm:^7.54.0":
-  version: 7.54.0
-  resolution: "@sentry/nextjs@npm:7.54.0"
+"@sentry/nextjs@npm:^7.91.0":
+  version: 7.91.0
+  resolution: "@sentry/nextjs@npm:7.91.0"
   dependencies:
     "@rollup/plugin-commonjs": 24.0.0
-    "@sentry/core": 7.54.0
-    "@sentry/integrations": 7.54.0
-    "@sentry/node": 7.54.0
-    "@sentry/react": 7.54.0
-    "@sentry/types": 7.54.0
-    "@sentry/utils": 7.54.0
-    "@sentry/webpack-plugin": 1.20.0
+    "@sentry/core": 7.91.0
+    "@sentry/integrations": 7.91.0
+    "@sentry/node": 7.91.0
+    "@sentry/react": 7.91.0
+    "@sentry/types": 7.91.0
+    "@sentry/utils": 7.91.0
+    "@sentry/vercel-edge": 7.91.0
+    "@sentry/webpack-plugin": 1.21.0
     chalk: 3.0.0
+    resolve: 1.22.8
     rollup: 2.78.0
     stacktrace-parser: ^0.1.10
-    tslib: ^1.9.3
   peerDependencies:
-    next: ^10.0.8 || ^11.0 || ^12.0 || ^13.0
+    next: ^10.0.8 || ^11.0 || ^12.0 || ^13.0 || ^14.0
     react: 16.x || 17.x || 18.x
     webpack: ">= 4.0.0"
   peerDependenciesMeta:
     webpack:
       optional: true
-  checksum: cb3fca90c438d23c7dc4641261f497329e724269f4966370a1bb98685f83b9a486a50661a606462dd0494da993f76e8284028b92f379de5a7d379f5f13d650e2
+  checksum: e7aba85615d74375dca2aa8709862b6f37e2a6a1fe6f9e2b7d9461b26a002825b377d41da3b5450c7ee7ee54e15b19072b4bb7d5b36441a89c419fd854cacf2d
   languageName: node
   linkType: hard
 
-"@sentry/node@npm:7.54.0":
-  version: 7.54.0
-  resolution: "@sentry/node@npm:7.54.0"
+"@sentry/node@npm:7.91.0, @sentry/node@npm:^7.60.0":
+  version: 7.91.0
+  resolution: "@sentry/node@npm:7.91.0"
   dependencies:
-    "@sentry-internal/tracing": 7.54.0
-    "@sentry/core": 7.54.0
-    "@sentry/types": 7.54.0
-    "@sentry/utils": 7.54.0
-    cookie: ^0.4.1
+    "@sentry-internal/tracing": 7.91.0
+    "@sentry/core": 7.91.0
+    "@sentry/types": 7.91.0
+    "@sentry/utils": 7.91.0
     https-proxy-agent: ^5.0.0
-    lru_map: ^0.3.3
-    tslib: ^1.9.3
-  checksum: 23b2e95e1cadc8be67c88f8ed3ff4fc3d67f77cee00fa90f36c7e64e1145ca3443200c6edb6f98d896fdc488f861ae4080c57d839fcd59fdd111ee009f7c67f8
+  checksum: 49971e47aa29b8232f5c13d613dbe9a651da11146813b88b4a8038f7f3b8ae44d98603e784f47c616d303e77d3f22257cfd1ac86f0a8d960f89ba0d51a69d42a
   languageName: node
   linkType: hard
 
-"@sentry/node@npm:^7.60.0":
-  version: 7.70.0
-  resolution: "@sentry/node@npm:7.70.0"
+"@sentry/react@npm:7.91.0, @sentry/react@npm:^7.91.0":
+  version: 7.91.0
+  resolution: "@sentry/react@npm:7.91.0"
   dependencies:
-    "@sentry-internal/tracing": 7.70.0
-    "@sentry/core": 7.70.0
-    "@sentry/types": 7.70.0
-    "@sentry/utils": 7.70.0
-    cookie: ^0.5.0
-    https-proxy-agent: ^5.0.0
-    lru_map: ^0.3.3
-    tslib: ^2.4.1 || ^1.9.3
-  checksum: 4d60023f0ddfca92ee15e42b5a207d998d683570103655282ce6e1a07a3bccbb86675810778f5500229cf21daef34e1f0fd48e0dbe3665d3df19d7b97c2788e5
-  languageName: node
-  linkType: hard
-
-"@sentry/react@npm:7.54.0":
-  version: 7.54.0
-  resolution: "@sentry/react@npm:7.54.0"
-  dependencies:
-    "@sentry/browser": 7.54.0
-    "@sentry/types": 7.54.0
-    "@sentry/utils": 7.54.0
+    "@sentry/browser": 7.91.0
+    "@sentry/types": 7.91.0
+    "@sentry/utils": 7.91.0
     hoist-non-react-statics: ^3.3.2
-    tslib: ^1.9.3
   peerDependencies:
     react: 15.x || 16.x || 17.x || 18.x
-  checksum: fa5ed9ec4e583f060ea099759ee5f4cdaa676ab1578d897e91a19a39cd1706a800fdd7db6169c182e51b711c798311ac104e35f324f9f8ed265693f25d0f327e
+  checksum: 75d2a9d05e07abf4c0da839677221a24954ae9883cea5521319de5f4e6067e2ff84b8ef82ee6d20707989f970329856f3918bfba55fc486bc9457f5c50e0d4e1
   languageName: node
   linkType: hard
 
-"@sentry/react@npm:^7.54.0, @sentry/react@npm:^7.70.0":
-  version: 7.70.0
-  resolution: "@sentry/react@npm:7.70.0"
+"@sentry/replay@npm:7.91.0":
+  version: 7.91.0
+  resolution: "@sentry/replay@npm:7.91.0"
   dependencies:
-    "@sentry/browser": 7.70.0
-    "@sentry/types": 7.70.0
-    "@sentry/utils": 7.70.0
-    hoist-non-react-statics: ^3.3.2
-    tslib: ^2.4.1 || ^1.9.3
-  peerDependencies:
-    react: 15.x || 16.x || 17.x || 18.x
-  checksum: 2290a9b0b9349b5cc7782580ce4361b38ceeabe8fa2eefaf8ab5c1cb2fda64ec186cc97908850d4729febfdd9f5ad968a8f98dc593db26e5e7a6950d0312cb6c
+    "@sentry-internal/tracing": 7.91.0
+    "@sentry/core": 7.91.0
+    "@sentry/types": 7.91.0
+    "@sentry/utils": 7.91.0
+  checksum: 66cd1217b1a179f413b4ff40f55683628ffc02a638b176d97d6bf081466519eff4e823fa35741ec608f34066c2cf7a3663b681752f161389a951950ac5b8c5d2
   languageName: node
   linkType: hard
 
-"@sentry/replay@npm:7.54.0":
-  version: 7.54.0
-  resolution: "@sentry/replay@npm:7.54.0"
-  dependencies:
-    "@sentry/core": 7.54.0
-    "@sentry/types": 7.54.0
-    "@sentry/utils": 7.54.0
-  checksum: ae6537fbe3a47993d247a92291ea0b70e53ee2289c648fef9ca1aca0c7cd841d2308240b9eb7df6f8e411eb602693e90b4f945f8e985c5f1e8047471cf2c3dfe
+"@sentry/types@npm:7.91.0":
+  version: 7.91.0
+  resolution: "@sentry/types@npm:7.91.0"
+  checksum: a0b8853b1257e860e823d4907fbe53914083891fe82699bccf9669342575b01ff663350d300784a0987e56adeb6c9902b1c3012cb957015b56570676c55bf291
   languageName: node
   linkType: hard
 
-"@sentry/replay@npm:7.70.0":
-  version: 7.70.0
-  resolution: "@sentry/replay@npm:7.70.0"
+"@sentry/utils@npm:7.91.0, @sentry/utils@npm:^7.60.0":
+  version: 7.91.0
+  resolution: "@sentry/utils@npm:7.91.0"
   dependencies:
-    "@sentry/core": 7.70.0
-    "@sentry/types": 7.70.0
-    "@sentry/utils": 7.70.0
-  checksum: 5e02e535cf41f4d2c6b7bd2a4f936005f25c853783f7bd2a16a40a7e526fddcb64b480f2c541315d6055f77acbb8f10b83a66bcd05411fbe44ca726b9bd0a8c4
-  languageName: node
-  linkType: hard
-
-"@sentry/types@npm:7.54.0":
-  version: 7.54.0
-  resolution: "@sentry/types@npm:7.54.0"
-  checksum: a2f37a9fcc283e6b9c27ec12163bbeded0e6c34d9e55ca6d3d96f5ce270cb287fa308c19358dda6ab8fa6f8bba3dabdbf58cc6ed31219d712a3306e5005e8a14
-  languageName: node
-  linkType: hard
-
-"@sentry/types@npm:7.70.0":
-  version: 7.70.0
-  resolution: "@sentry/types@npm:7.70.0"
-  checksum: 0a38f47ccf0d995d8d5ab0353c332bd2573f044d993d746ec9ecee5e185da773ffdc13db3f29d525b4377ed3ce9235eaa0dc728c039739eb23050d0411667222
-  languageName: node
-  linkType: hard
-
-"@sentry/utils@npm:7.54.0":
-  version: 7.54.0
-  resolution: "@sentry/utils@npm:7.54.0"
-  dependencies:
-    "@sentry/types": 7.54.0
-    tslib: ^1.9.3
-  checksum: 8daadba6b0cbe3dc4c42284dbc14ada730f3dd75a050cb3827ef7e173a9f7e06cdbe52ab1e20941841320c6c4cc3d8c969f0da78650e8426e161707450087717
+    "@sentry/types": 7.91.0
+  checksum: 79a9ae4193fc42c2fff8b7808958170164966410149101526da923233cef5f741ab8953842544e7481155e0f3a828ebf2a6b040f30d03945b603377036eece58
   languageName: node
   linkType: hard
 
-"@sentry/utils@npm:7.70.0, @sentry/utils@npm:^7.60.0":
-  version: 7.70.0
-  resolution: "@sentry/utils@npm:7.70.0"
+"@sentry/vercel-edge@npm:7.91.0":
+  version: 7.91.0
+  resolution: "@sentry/vercel-edge@npm:7.91.0"
   dependencies:
-    "@sentry/types": 7.70.0
-    tslib: ^2.4.1 || ^1.9.3
-  checksum: a1590f5e752667910638262bb8e85f2e2c26e722df4087e79c39b11d1d81dbefaea8f426826a50b0832c079e77092ff7c2335d48e63a2d11c32b1c0b59b10eee
+    "@sentry-internal/tracing": 7.91.0
+    "@sentry/core": 7.91.0
+    "@sentry/types": 7.91.0
+    "@sentry/utils": 7.91.0
+  checksum: 8a130f3d11f26a10c54c622554289543681f40d8ff76cefd9043a73ead3d68078e1eebdd05423831742ec874ab7cc39e2e66e022afc48e9c40942e42da3bb544
   languageName: node
   linkType: hard
 
@@ -7166,13 +6989,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/webpack-plugin@npm:1.20.0":
-  version: 1.20.0
-  resolution: "@sentry/webpack-plugin@npm:1.20.0"
+"@sentry/webpack-plugin@npm:1.21.0":
+  version: 1.21.0
+  resolution: "@sentry/webpack-plugin@npm:1.21.0"
   dependencies:
-    "@sentry/cli": ^1.74.6
+    "@sentry/cli": ^1.77.1
     webpack-sources: ^2.0.0 || ^3.0.0
-  checksum: d582026c3686f287ddc23de4e64c6f03afc2a73a84ec5a8fd3eded56a45683094bf132f4c624a35386fff872eb518771109d5c0b91a2cf79da0aff035c5bb05b
+  checksum: 218cdf40df735fc8c358833dbeb16121cf4b0cf61f10adc233561877d4149b5ed0ac3f8b0efcdf3bc66e94d506820e641b2327487e435caecad93e9465b3522a
   languageName: node
   linkType: hard
 
@@ -8473,7 +8296,6 @@ __metadata:
     react-dom: ^18.2.0
     react-router-dom: ^6.17.0
     typescript: ^5.2.2
-    vercel: ^32.4.1
     vite: ^4.4.11
   languageName: unknown
   linkType: soft
@@ -8503,20 +8325,18 @@ __metadata:
   dependencies:
     "@emotion/css": ^11.11.2
     "@playwright/test": ^1.37.1
-    "@sentry/react": ^7.70.0
+    "@sentry/react": ^7.91.0
     "@sentry/vite-plugin": ^2.7.1
     "@stream-io/video-react-sdk": "workspace:^"
     "@types/react": ^18.2.28
     "@types/react-dom": ^18.2.13
     "@vitejs/plugin-react": ^4.1.0
-    axios: ^1.5.1
     clsx: ^2.0.0
     js-base64: ^3.7.5
-    nanoid: ^5.0.2
+    nanoid: ^5.0.4
     react: ^18.2.0
     react-dom: ^18.2.0
     typescript: ^5.2.2
-    vercel: ^32.4.1
     vite: ^4.4.11
   languageName: unknown
   linkType: soft
@@ -8593,7 +8413,6 @@ __metadata:
     react-dom: ^18.2.0
     react-router-dom: ^6.17.0
     typescript: ^5.2.2
-    vercel: ^32.4.1
     vite: ^4.4.11
   languageName: unknown
   linkType: soft
@@ -8611,15 +8430,14 @@ __metadata:
     dayjs: ^1.11.6
     dotenv: ^16.3.1
     immer: ^9.0.16
-    nanoid: ^5.0.2
+    nanoid: ^5.0.4
     react: ^18.2.0
     react-dom: ^18.2.0
     react-router-dom: ^6.17.0
-    sass: ^1.69.3
-    stream-chat: ^8.13.0
-    stream-chat-react: ^10.14.0
+    sass: ^1.69.5
+    stream-chat: ^8.14.4
+    stream-chat-react: ^11.2.1
     typescript: ^5.2.2
-    vercel: ^32.4.1
     vite: ^4.4.11
   languageName: unknown
   linkType: soft
@@ -8643,8 +8461,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.20.12
     "@mdx-js/react": ^1.6.22
-    "@nivo/line": ^0.80.0
-    "@sentry/react": ^7.54.0
+    "@sentry/react": ^7.91.0
     "@storybook/addon-actions": ^6.5.15
     "@storybook/addon-docs": ^6.5.15
     "@storybook/addon-essentials": ^6.5.15
@@ -8658,7 +8475,7 @@ __metadata:
     "@stream-io/video-styling": "workspace:^"
     "@types/babel__core": ^7
     "@types/geojson": ^7946.0.10
-    "@types/mapbox-gl": ^2.7.16
+    "@types/mapbox-gl": ^2.7.19
     "@types/react": ^18.2.28
     "@types/react-dom": ^18.2.13
     "@types/react-form": ^4
@@ -8672,11 +8489,11 @@ __metadata:
     concurrently: ^7.6.0
     date-fns: ^2.29.3
     geojson: ^0.5.0
-    gleap: ^12.1.2
+    gleap: ^13.1.1
     hotkeys-js: ^3.12.0
     mapbox-gl: ^2.15.0
     mobile-device-detect: ^0.4.3
-    nanoid: ^5.0.2
+    nanoid: ^5.0.4
     postcss: ^8.4.31
     qrcode.react: ^3.1.0
     react: ^18.2.0
@@ -8688,11 +8505,11 @@ __metadata:
     react-tooltip: ^5.8.3
     react-transition-group: ^4.4.5
     rimraf: ^5.0.5
-    sass: ^1.69.3
+    sass: ^1.69.5
     screenfull: ^6.0.2
-    stream-chat: ^8.13.0
+    stream-chat: ^8.14.4
     stream-chat-css: ^1.0.23
-    stream-chat-react: ^10.14.0
+    stream-chat-react: ^11.2.1
     swiper: ^9.1.1
     tailwindcss: ^3.2.4
     tailwindcss-plugins: ^0.3.0
@@ -8703,7 +8520,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@stream-io/stream-chat-css@npm:^3.13.0, @stream-io/stream-chat-css@npm:^3.14.1":
+"@stream-io/stream-chat-css@npm:^3.14.1":
   version: 3.14.1
   resolution: "@stream-io/stream-chat-css@npm:3.14.1"
   checksum: b9e35362248bfe36f0ec9883d212d97dff91e3d61b2b05298844986d58438eee5ca4f7afc359de96bc11a39992fc4a18e1c122667b46fe3f7a5c1b00933e86c6
@@ -8752,9 +8569,9 @@ __metadata:
   resolution: "@stream-io/video-client@workspace:packages/client"
   dependencies:
     "@openapitools/openapi-generator-cli": ^2.7.0
-    "@protobuf-ts/runtime": ^2.9.1
-    "@protobuf-ts/runtime-rpc": ^2.9.1
-    "@protobuf-ts/twirp-transport": ^2.9.1
+    "@protobuf-ts/runtime": ^2.9.3
+    "@protobuf-ts/runtime-rpc": ^2.9.3
+    "@protobuf-ts/twirp-transport": ^2.9.3
     "@rollup/plugin-replace": ^5.0.4
     "@rollup/plugin-typescript": ^11.1.5
     "@types/jsonwebtoken": ^9.0.3
@@ -8804,7 +8621,7 @@ __metadata:
     nx: 16.0.1
     prettier: ^2.8.8
     typescript: ^5.2.2
-    vercel: ^32.4.1
+    vercel: ^33.2.0
     vite: ^4.4.11
   languageName: unknown
   linkType: soft
@@ -8832,33 +8649,39 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@stream-io/video-react-dogfood@workspace:sample-apps/react/react-dogfood"
   dependencies:
-    "@emotion/react": ^11.11.1
-    "@emotion/styled": ^11.11.0
-    "@floating-ui/react": ^0.26.1
-    "@mui/icons-material": ^5.14.14
-    "@mui/material": ^5.14.14
-    "@sentry/nextjs": ^7.54.0
+    "@floating-ui/dom": ^1.5.4
+    "@floating-ui/react": ^0.26.5
+    "@next/third-parties": ^14.1.0
+    "@sentry/nextjs": ^7.91.0
     "@stream-io/video-react-sdk": "workspace:^"
     "@stream-io/video-styling": "workspace:^"
-    "@types/starwars-names": ^1.6.0
-    "@types/yargs": ^17.0.28
+    "@types/geojson": ^7946.0.13
+    "@types/mapbox-gl": ^2.7.19
+    "@types/react-form": ^4.0.5
+    "@types/starwars-names": ^1.6.2
+    "@types/yargs": ^17.0.32
     axios: ^1.6.0
     clsx: ^2.0.0
     dotenv: ^16.3.1
-    framer-motion: ^10.12.16
-    gleap: ^12.1.2
+    framer-motion: ^10.16.16
+    geojson: ^0.5.0
+    gleap: ^13.1.1
     hotkeys-js: ^3.12.0
-    nanoid: ^5.0.2
-    next: ^14.0.2
+    mapbox-gl: ^2.15.0
+    mobile-device-detect: ^0.4.3
+    nanoid: ^5.0.4
+    next: ^14.1.0
     next-auth: ^4.24.5
+    qrcode.react: ^3.1.0
     react: ^18.2.0
     react-dom: ^18.2.0
-    sass: ^1.69.3
+    react-form: ^4.0.1
+    rimraf: ^5.0.5
+    sass: ^1.69.5
     source-map-loader: ^4.0.1
     starwars-names: ^1.6.0
-    stream-chat: ^8.13.0
-    stream-chat-react: ^10.14.0
-    vercel: ^32.4.1
+    stream-chat: ^8.14.4
+    stream-chat-react: ^11.2.1
     yargs: ^17.7.2
   languageName: unknown
   linkType: soft
@@ -9021,19 +8844,17 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@stream-io/video-react-sdk@workspace:packages/react-sdk"
   dependencies:
-    "@floating-ui/react": ^0.26.1
-    "@nivo/core": ^0.80.0
-    "@nivo/line": ^0.80.0
+    "@floating-ui/react": ^0.26.5
     "@rollup/plugin-json": ^6.0.1
     "@rollup/plugin-replace": ^5.0.4
     "@rollup/plugin-typescript": ^11.1.5
     "@stream-io/video-client": "workspace:^"
     "@stream-io/video-react-bindings": "workspace:^"
     "@stream-io/video-styling": "workspace:^"
-    "@types/prop-types": ^15.7.8
+    chart.js: ^4.4.1
     clsx: ^2.0.0
-    prop-types: ^15.8.1
     react: ^18.2.0
+    react-chartjs-2: ^5.2.0
     react-dom: ^18.2.0
     rimraf: ^5.0.5
     rollup: ^3.29.4
@@ -9049,7 +8870,7 @@ __metadata:
   resolution: "@stream-io/video-styling@workspace:packages/styling"
   dependencies:
     rimraf: ^5.0.5
-    sass: ^1.69.3
+    sass: ^1.69.5
   languageName: unknown
   linkType: soft
 
@@ -9064,13 +8885,13 @@ __metadata:
     autoprefixer: ^10.4.13
     clsx: ^2.0.0
     dotenv: ^16.3.1
-    nanoid: ^5.0.2
+    nanoid: ^5.0.4
     postcss: ^8.4.31
     react: ^18.2.0
     react-dom: ^18.2.0
     react-router-dom: ^6.17.0
-    stream-chat: ^8.13.0
-    stream-chat-react: ^10.14.0
+    stream-chat: ^8.14.4
+    stream-chat-react: ^11.2.1
     tailwindcss: ^3.2.4
     typescript: ^5.2.2
     vite: ^4.4.11
@@ -9320,6 +9141,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/estree-jsx@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "@types/estree-jsx@npm:1.0.3"
+  dependencies:
+    "@types/estree": "*"
+  checksum: 6887a134308b6db4a33a147b56c9d0a47c17ea7e810bdd7c498c306a0fd00bcf2619cb0f57f74009d03dda974b3cd7e414767f85332b1d1b2be30a3ef9e1cca9
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:*, @types/estree@npm:^1.0.0":
   version: 1.0.0
   resolution: "@types/estree@npm:1.0.0"
@@ -9358,10 +9188,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/geojson@npm:*, @types/geojson@npm:^7946.0.10":
-  version: 7946.0.10
-  resolution: "@types/geojson@npm:7946.0.10"
-  checksum: 12c407c2dc93ecb26c08af533ee732f1506a9b29456616ba7ba1d525df96206c28ddf44a528f6a5415d7d22893e9d967420940a9c095ee5e539c1eba5fefc1f4
+"@types/geojson@npm:*, @types/geojson@npm:^7946.0.10, @types/geojson@npm:^7946.0.13":
+  version: 7946.0.13
+  resolution: "@types/geojson@npm:7946.0.13"
+  checksum: b3b68457c89bc3f0445dc9eb54d07e6f89658672867c54989bc7f71f87d54e562195b291d43e1b84476493351271d7ccb9f5c6ab2012b29fbafbb0e8e43c4bca
   languageName: node
   linkType: hard
 
@@ -9410,6 +9240,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hast@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "@types/hast@npm:3.0.3"
+  dependencies:
+    "@types/unist": "*"
+  checksum: ca204207550fd6848ee20b5ba2018fd54f515d59a8b80375cdbe392ba2b4b130dac25fdfbaf9f2a70d2aec9d074a34dc14d4d59d31fa3ede80ef9850afad5d3c
+  languageName: node
+  linkType: hard
+
 "@types/html-minifier-terser@npm:^5.0.0":
   version: 5.1.2
   resolution: "@types/html-minifier-terser@npm:5.1.2"
@@ -9521,12 +9360,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mapbox-gl@npm:^2.7.16":
-  version: 2.7.16
-  resolution: "@types/mapbox-gl@npm:2.7.16"
+"@types/mapbox-gl@npm:^2.7.19":
+  version: 2.7.19
+  resolution: "@types/mapbox-gl@npm:2.7.19"
   dependencies:
     "@types/geojson": "*"
-  checksum: 91c102fa934055b0dec4fcf34dd8ee38ad0829cab25a6e91afb8181be688c3d416130bfd05e521e2965c6c9f2a42210de5223c8145262dcf575fe8dcb7fcba32
+  checksum: 0f13b4c283584a8fd2a45062fde7b9a7e780e254e328a67f0d87801bef0bc58eadf49141f5f246f7e2627042056b6621785ac3ea550ef0808197a96124f8215b
   languageName: node
   linkType: hard
 
@@ -9539,6 +9378,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mdast@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "@types/mdast@npm:4.0.3"
+  dependencies:
+    "@types/unist": "*"
+  checksum: 345c5a22fccf05f35239ea6313ee4aaf6ebed5927c03ac79744abccb69b9ba5e692f9b771e36a012b79e17429082cada30f579e9c43b8a54e0ffb365431498b6
+  languageName: node
+  linkType: hard
+
 "@types/mime@npm:*":
   version: 3.0.1
   resolution: "@types/mime@npm:3.0.1"
@@ -9647,7 +9495,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*, @types/prop-types@npm:^15.0.0, @types/prop-types@npm:^15.7.7, @types/prop-types@npm:^15.7.8":
+"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.7":
   version: 15.7.8
   resolution: "@types/prop-types@npm:15.7.8"
   checksum: 61dfad79da8b1081c450bab83b77935df487ae1cdd4660ec7df6be8e74725c15fa45cf486ce057addc956ca4ae78300b97091e2a25061133d1b9a1440bc896ae
@@ -9677,12 +9525,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-form@npm:^4":
-  version: 4.0.2
-  resolution: "@types/react-form@npm:4.0.2"
+"@types/react-form@npm:^4, @types/react-form@npm:^4.0.5":
+  version: 4.0.5
+  resolution: "@types/react-form@npm:4.0.5"
   dependencies:
     "@types/react": "*"
-  checksum: 26a1d6909437f8b6524fcaa0586ff52afcd2d74bfe669a8c377bd02357d144ab996414262b26bea1e791d9a9529bd051a8ac0943b3a8ef82609d8d428ae0771e
+  checksum: e2d12e3edd5852a69a30035bfc96e6699f4c706cbe2b228881b6807c29f5334fa8f5776895cc756033dfeea5344d9c7565e8912b24f2290c41aa911a400ea161
   languageName: node
   linkType: hard
 
@@ -9852,10 +9700,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/starwars-names@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "@types/starwars-names@npm:1.6.0"
-  checksum: 2b6291603f728b8d3b4382f1e27c96e95144b693378214222888dbcce088539b83c1a4a1e6d5dc410eb2097c0e6f8c5ddbba97c5e773a01ab5150716baea0208
+"@types/starwars-names@npm:^1.6.2":
+  version: 1.6.2
+  resolution: "@types/starwars-names@npm:1.6.2"
+  checksum: 7499fd4e7c5035825d29721c5536cf77b068ca2431062186129167dfa28ac9d4999a39108b44d135513ca422a86d42bc8abf0d31dbdcdc27eb95bfb4aadf4721
   languageName: node
   linkType: hard
 
@@ -9882,7 +9730,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/unist@npm:*, @types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2, @types/unist@npm:^2.0.3":
+"@types/unist@npm:*, @types/unist@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "@types/unist@npm:3.0.2"
+  checksum: 3d04d0be69316e5f14599a0d993a208606c12818cf631fd399243d1dc7a9bd8a3917d6066baa6abc290814afbd744621484756803c80cba892c39cd4b4a85616
+  languageName: node
+  linkType: hard
+
+"@types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2, @types/unist@npm:^2.0.3":
   version: 2.0.6
   resolution: "@types/unist@npm:2.0.6"
   checksum: 25cb860ff10dde48b54622d58b23e66214211a61c84c0f15f88d38b61aa1b53d4d46e42b557924a93178c501c166aa37e28d7f6d994aba13d24685326272d5db
@@ -9971,12 +9826,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^17.0.28, @types/yargs@npm:^17.0.8":
-  version: 17.0.28
-  resolution: "@types/yargs@npm:17.0.28"
+"@types/yargs@npm:^17.0.32, @types/yargs@npm:^17.0.8":
+  version: 17.0.32
+  resolution: "@types/yargs@npm:17.0.32"
   dependencies:
     "@types/yargs-parser": "*"
-  checksum: f78c5e5c29903933c0557b4ffcd1d0b8564d66859c8ca4aa51da3714e49109ed7c2644334a1918d033df19028f4cecc91fd2e502651bb8e8451f246c371da847
+  checksum: 4505bdebe8716ff383640c6e928f855b5d337cb3c68c81f7249fc6b983d0aa48de3eee26062b84f37e0d75a5797bc745e0c6e76f42f81771252a758c638f36ba
   languageName: node
   linkType: hard
 
@@ -10297,6 +10152,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ungap/structured-clone@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "@ungap/structured-clone@npm:1.2.0"
+  checksum: 4f656b7b4672f2ce6e272f2427d8b0824ed11546a601d8d5412b9d7704e83db38a8d9f402ecdf2b9063fc164af842ad0ec4a55819f621ed7e7ea4d1efcc74524
+  languageName: node
+  linkType: hard
+
 "@urql/core@npm:2.3.6":
   version: 2.3.6
   resolution: "@urql/core@npm:2.3.6"
@@ -10331,17 +10193,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vercel/build-utils@npm:7.2.2":
-  version: 7.2.2
-  resolution: "@vercel/build-utils@npm:7.2.2"
-  checksum: a229573ce56ef81e24af81e30c4abcc460a8d18d27200ee4c4d513d5e017c03708b02c4ee0841d3e8e630fad934f5db893fe4f4c27d43a64292db223cabc575e
+"@vercel/build-utils@npm:7.5.1":
+  version: 7.5.1
+  resolution: "@vercel/build-utils@npm:7.5.1"
+  checksum: 663268e5e2a892a8feeafa57d5bf82852d8636689e0fe8b2cdafb2fd1ca33d9f7181f0a18c43d8e3a0eb889e6377cfd218dca6f1e5bdec30ec43472e8f3dfee2
   languageName: node
   linkType: hard
 
-"@vercel/error-utils@npm:2.0.1":
-  version: 2.0.1
-  resolution: "@vercel/error-utils@npm:2.0.1"
-  checksum: 267c21a5d84fec8905f04e4da458e444508541351b094b6450353fba9b264807e72aab6761493cf5000e9257192f91a43d06ab0737756111ccb30339c478b34c
+"@vercel/error-utils@npm:2.0.2":
+  version: 2.0.2
+  resolution: "@vercel/error-utils@npm:2.0.2"
+  checksum: 80e45ba15606cf3984cc8929657111d63e42af1e3405665af1cbfe073b8565c0dc4a2752f4c4a6f32b69220c67e4fdb8b35f31fcb47dca36f0bbc7c4f9006a3f
   languageName: node
   linkType: hard
 
@@ -10382,53 +10244,54 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vercel/gatsby-plugin-vercel-builder@npm:2.0.7":
-  version: 2.0.7
-  resolution: "@vercel/gatsby-plugin-vercel-builder@npm:2.0.7"
+"@vercel/gatsby-plugin-vercel-builder@npm:2.0.16":
+  version: 2.0.16
+  resolution: "@vercel/gatsby-plugin-vercel-builder@npm:2.0.16"
   dependencies:
     "@sinclair/typebox": 0.25.24
-    "@vercel/build-utils": 7.2.2
-    "@vercel/routing-utils": 3.0.0
+    "@vercel/build-utils": 7.5.1
+    "@vercel/routing-utils": 3.1.0
     esbuild: 0.14.47
     etag: 1.8.1
     fs-extra: 11.1.0
-  checksum: cb26d365711cbf7eb8443d4c5aad2dcd27f52f0b66be9c7e4ba2d132c2064908d0f8eddb31c195b5700bd26401c2b1662a90d4a58b09dc17d283b7b1e2e2f297
+  checksum: cdc506cef07c89beb5f173618bca47570541a1a5f4c98b6153f736d3f3415445e0e59f002b6f640bc5f5fb5c3f2915c8971d1094207eb7eafb08cc41468e148a
   languageName: node
   linkType: hard
 
-"@vercel/go@npm:3.0.3":
-  version: 3.0.3
-  resolution: "@vercel/go@npm:3.0.3"
-  checksum: cf9fa10e00f8bba70c520c9371d4ba7e2d4e6e1970ae74c44b0db86f626c2a294eff7cc36e0f76112084a8bffc35569eca38abc8b3912b59e1081bcfdc2134a3
+"@vercel/go@npm:3.0.5":
+  version: 3.0.5
+  resolution: "@vercel/go@npm:3.0.5"
+  checksum: 7d71bde2c328068299ff98d028fc1618fc7242d20233b44566569c90fc8dea6c20a9a2fc7534358332371f758dc02bb780848829e213b8fd3ee6a62c86b1ca16
   languageName: node
   linkType: hard
 
-"@vercel/hydrogen@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@vercel/hydrogen@npm:1.0.1"
+"@vercel/hydrogen@npm:1.0.2":
+  version: 1.0.2
+  resolution: "@vercel/hydrogen@npm:1.0.2"
   dependencies:
     "@vercel/static-config": 3.0.0
     ts-morph: 12.0.0
-  checksum: a13cdacfba84ff10ca2036815ea9d0e36fa5d8fe7e5af2083a8cf93a3b47d5e9c102be491d1882c08b555764804f4092cf10ba5e7d4b2495fb434bda1610f4de
+  checksum: 637fa7738edfb8310806b381b2106ffacaeeb12efd2c0549df476f82114b96132279c6f2c0589516bc5bfcea25445897b3bf07ffd6306e7133e83bee679ae11a
   languageName: node
   linkType: hard
 
-"@vercel/next@npm:4.0.10":
-  version: 4.0.10
-  resolution: "@vercel/next@npm:4.0.10"
+"@vercel/next@npm:4.1.0":
+  version: 4.1.0
+  resolution: "@vercel/next@npm:4.1.0"
   dependencies:
-    "@vercel/nft": 0.24.2
-  checksum: 6e1ac873d514a73cda9fc4b54778f8579d03019ec923751c31ed2f27a33ada94d076ecbe243a8c6338fcf6665d4f42bf835a7be302f4883e2d409bc9e36a47d2
+    "@vercel/nft": 0.26.2
+  checksum: 30334534855cdd4def06aa1af78e4a38fc8ac385d6df001df5dcf7926943a6d27ee878be1698a4f26a4f1d0e62ce2a25777bb5e8df99e18fe584baaf16888505
   languageName: node
   linkType: hard
 
-"@vercel/nft@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@vercel/nft@npm:0.24.2"
+"@vercel/nft@npm:0.26.2":
+  version: 0.26.2
+  resolution: "@vercel/nft@npm:0.26.2"
   dependencies:
     "@mapbox/node-pre-gyp": ^1.0.5
     "@rollup/pluginutils": ^4.0.0
     acorn: ^8.6.0
+    acorn-import-attributes: ^1.9.2
     async-sema: ^3.1.1
     bindings: ^1.4.0
     estree-walker: 2.0.2
@@ -10439,95 +10302,94 @@ __metadata:
     resolve-from: ^5.0.0
   bin:
     nft: out/cli.js
-  checksum: 1be8ed9860a5e091181aff8eb9031463c7b35b7712d06ab399d6d35b5356d9d309b8e9991ae365b677fa7ba9be63377b51d3fc14559c66ee39c4f879fcc216f8
+  checksum: 31e9cacc9fde873c3e2dfa3948f12298cb66e9609ddc9afd5a89bef7679268b8d1e6ffa5967f56d8cd363c7984dd6415c4c0e9452f330545fac7827a5b3bec35
   languageName: node
   linkType: hard
 
-"@vercel/node@npm:3.0.7":
-  version: 3.0.7
-  resolution: "@vercel/node@npm:3.0.7"
+"@vercel/node@npm:3.0.17":
+  version: 3.0.17
+  resolution: "@vercel/node@npm:3.0.17"
   dependencies:
     "@edge-runtime/node-utils": 2.2.1
-    "@edge-runtime/primitives": 3.1.1
-    "@edge-runtime/vm": 3.1.1
+    "@edge-runtime/primitives": 4.0.5
+    "@edge-runtime/vm": 3.1.7
     "@types/node": 14.18.33
-    "@vercel/build-utils": 7.2.2
-    "@vercel/error-utils": 2.0.1
-    "@vercel/nft": 0.24.2
+    "@vercel/build-utils": 7.5.1
+    "@vercel/error-utils": 2.0.2
+    "@vercel/nft": 0.26.2
     "@vercel/static-config": 3.0.0
     async-listen: 3.0.0
-    edge-runtime: 2.5.1
+    edge-runtime: 2.5.7
     esbuild: 0.14.47
     etag: 1.8.1
-    exit-hook: 2.2.1
     node-fetch: 2.6.9
     path-to-regexp: 6.2.1
     ts-morph: 12.0.0
     ts-node: 10.9.1
     typescript: 4.9.5
-    undici: 5.23.0
-  checksum: 11dd113b3ecb94fee02730384ca4bc35ab6b274a6fd79fc7ff7d9703e8f94e040d0d95d73c3ad6dc7eafbed6a4ef79a6490e7def1f7b1027dbe343b50635e381
+    undici: 5.26.5
+  checksum: 283153a0066692fb37b6fdca791659b062653a1b2bf3c151f257cdb57f3d1576b5b3ac11e677c5152ced46d8fda5c499041cd3450a30fb4b0bd5d64e26792465
   languageName: node
   linkType: hard
 
-"@vercel/python@npm:4.0.2":
-  version: 4.0.2
-  resolution: "@vercel/python@npm:4.0.2"
-  checksum: 268510d8cb11c18f8676dfcaf0c49d0500e3847ba3a8917b98affa0871c6f9156db729986379e222ee1283a69b4a79aff736b35905ced7a7f0126958bdc6d09f
+"@vercel/python@npm:4.1.0":
+  version: 4.1.0
+  resolution: "@vercel/python@npm:4.1.0"
+  checksum: b0a777b3ce84f26525785406e3a251faba67dd2bdf49044acd72ffa12203a6c6eb99cb93add851c8921a714cfc1174dd75d1704c38e39e7ec42f80c588f2df5b
   languageName: node
   linkType: hard
 
-"@vercel/redwood@npm:2.0.4":
-  version: 2.0.4
-  resolution: "@vercel/redwood@npm:2.0.4"
+"@vercel/redwood@npm:2.0.6":
+  version: 2.0.6
+  resolution: "@vercel/redwood@npm:2.0.6"
   dependencies:
-    "@vercel/nft": 0.24.2
-    "@vercel/routing-utils": 3.0.0
+    "@vercel/nft": 0.26.2
+    "@vercel/routing-utils": 3.1.0
     semver: 6.3.1
-  checksum: a7909fe2f8ef1e2ed8118d36baeb6766a2a18b395230379462922548d9e79ade03080c518f59b3b526465c9935922aa03701915d22dfe8a554085aa7361c8f39
+  checksum: 8f71020db7fd9deccc9b959af4c7771bb12b758f095b3d98c22fc19d6de82ccdb2500d71a4e23fb6f222e0ae9dd74d8dd2a88180703afc618d467cb90cf45124
   languageName: node
   linkType: hard
 
-"@vercel/remix-builder@npm:2.0.9":
-  version: 2.0.9
-  resolution: "@vercel/remix-builder@npm:2.0.9"
+"@vercel/remix-builder@npm:2.0.18":
+  version: 2.0.18
+  resolution: "@vercel/remix-builder@npm:2.0.18"
   dependencies:
-    "@vercel/nft": 0.24.2
+    "@vercel/nft": 0.26.2
     "@vercel/static-config": 3.0.0
     ts-morph: 12.0.0
-  checksum: 62759fcb405d629ff28b9ab2b4b24280805a3d66d1113e6ab73d2f084b1f23733ba6bc601249400efc59c0ae8147de2741e1b7849d036fbbf920246265d9184a
+  checksum: 088637dc19e390856ad08e808dcce1e20148fed8c1cb3a59edb2b5c96a8287a6d98279280ed3ba191e508fb3338bb27986315879cfe0e3bdef32a0109085707c
   languageName: node
   linkType: hard
 
-"@vercel/routing-utils@npm:3.0.0":
-  version: 3.0.0
-  resolution: "@vercel/routing-utils@npm:3.0.0"
+"@vercel/routing-utils@npm:3.1.0":
+  version: 3.1.0
+  resolution: "@vercel/routing-utils@npm:3.1.0"
   dependencies:
     ajv: ^6.0.0
     path-to-regexp: 6.1.0
   dependenciesMeta:
     ajv:
       optional: true
-  checksum: 8d043eae38c2a8581bcab0fe5c8a7c5416c0cc1ef804a23f7aa6edc056787ec1964be0f6bfb1a9376503304d36dc37759b588c611d6065b05d3e61229126da1f
+  checksum: ef9c06154cab6fcfc15700208c596a36ec7d8b2df722e42c7737b725118c075ec020900d399c0989e6cf49b67595f8624d24e872d073ad426dcac03dcaf2ffa4
   languageName: node
   linkType: hard
 
-"@vercel/ruby@npm:2.0.2":
-  version: 2.0.2
-  resolution: "@vercel/ruby@npm:2.0.2"
-  checksum: 7e15e8302a09ad3b2db12d958c2501701afccec8b845451096e5a89b6f442cfd55290b98ab027ba606f875a16a4fd724b6356b650aaa0cd4e0c07a4088a1bcde
+"@vercel/ruby@npm:2.0.4":
+  version: 2.0.4
+  resolution: "@vercel/ruby@npm:2.0.4"
+  checksum: c549aaa07a2ec7a9d9a2f5730a7fe14309a8109abf4b3d5be1200e3085cf3392c274e30b75c7a1b35f24d447b60aec9c58274093011f1f5db024217bfc256683
   languageName: node
   linkType: hard
 
-"@vercel/static-build@npm:2.0.8":
-  version: 2.0.8
-  resolution: "@vercel/static-build@npm:2.0.8"
+"@vercel/static-build@npm:2.1.0":
+  version: 2.1.0
+  resolution: "@vercel/static-build@npm:2.1.0"
   dependencies:
     "@vercel/gatsby-plugin-vercel-analytics": 1.0.11
-    "@vercel/gatsby-plugin-vercel-builder": 2.0.7
+    "@vercel/gatsby-plugin-vercel-builder": 2.0.16
     "@vercel/static-config": 3.0.0
     ts-morph: 12.0.0
-  checksum: 8691a573613e137c567f9e467275b100eccbc347f8c6712f89b72aee46887df9c93eb900919493d97693a7eb3dc3ef6c9e0dbe43463ca273de021a45b329a51a
+  checksum: d4cd3656c4e34e50bd2f05bfd2d871ee9f6fa00dca9ec4b9239e0a2d530a1ef341501b3128cf20099b72860ae7444c2f44c5e455406e36bdd22e2b69ec716d0b
   languageName: node
   linkType: hard
 
@@ -11138,6 +11000,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn-import-attributes@npm:^1.9.2":
+  version: 1.9.2
+  resolution: "acorn-import-attributes@npm:1.9.2"
+  peerDependencies:
+    acorn: ^8
+  checksum: d4baad00ce9e09b0b924e695c0621bb8e9b221797cd9ed7e2f79fb5e763dae04aacb8cf082ebde54e1244cbaf473b04a0211ae2486358fa7232414d2013159e0
+  languageName: node
+  linkType: hard
+
 "acorn-jsx@npm:^5.3.1, acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
@@ -12036,7 +11907,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^1.0.0, axios@npm:^1.5.1, axios@npm:^1.6.0":
+"axios@npm:^1.0.0, axios@npm:^1.6.0":
   version: 1.6.0
   resolution: "axios@npm:1.6.0"
   dependencies:
@@ -12967,7 +12838,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"busboy@npm:1.6.0, busboy@npm:^1.6.0":
+"busboy@npm:1.6.0":
   version: 1.6.0
   resolution: "busboy@npm:1.6.0"
   dependencies:
@@ -13226,10 +13097,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001464, caniuse-lite@npm:^1.0.30001517":
-  version: 1.0.30001533
-  resolution: "caniuse-lite@npm:1.0.30001533"
-  checksum: 1ffb2d69f817ee5f13351cb01c26a98ac61515809a6ce355305df3fbc6de6391a58466c1dcad1f322231b1ddc59bdda9bc52b9480cac100c3ff2f5782e859eb1
+"caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001464, caniuse-lite@npm:^1.0.30001517, caniuse-lite@npm:^1.0.30001579":
+  version: 1.0.30001579
+  resolution: "caniuse-lite@npm:1.0.30001579"
+  checksum: 7539dcff74d2243a30c428393dc690c87fa34d7da36434731853e9bcfe783757763b2971f5cc878e25242a93e184e53f167d11bd74955af956579f7af71cc764
   languageName: node
   linkType: hard
 
@@ -13316,6 +13187,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-html4@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "character-entities-html4@npm:2.1.0"
+  checksum: 7034aa7c7fa90309667f6dd50499c8a760c3d3a6fb159adb4e0bada0107d194551cdbad0714302f62d06ce4ed68565c8c2e15fdef2e8f8764eb63fa92b34b11d
+  languageName: node
+  linkType: hard
+
 "character-entities-legacy@npm:^1.0.0":
   version: 1.1.4
   resolution: "character-entities-legacy@npm:1.1.4"
@@ -13323,6 +13201,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-legacy@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "character-entities-legacy@npm:3.0.0"
+  checksum: 7582af055cb488b626d364b7d7a4e46b06abd526fb63c0e4eb35bcb9c9799cc4f76b39f34fdccef2d1174ac95e53e9ab355aae83227c1a2505877893fce77731
+  languageName: node
+  linkType: hard
+
 "character-entities@npm:^1.0.0":
   version: 1.2.4
   resolution: "character-entities@npm:1.2.4"
@@ -13344,6 +13229,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-reference-invalid@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "character-reference-invalid@npm:2.0.1"
+  checksum: 98d3b1a52ae510b7329e6ee7f6210df14f1e318c5415975d4c9e7ee0ef4c07875d47c6e74230c64551f12f556b4a8ccc24d9f3691a2aa197019e72a95e9297ee
+  languageName: node
+  linkType: hard
+
 "chardet@npm:^0.7.0":
   version: 0.7.0
   resolution: "chardet@npm:0.7.0"
@@ -13358,6 +13250,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chart.js@npm:^4.4.1":
+  version: 4.4.1
+  resolution: "chart.js@npm:4.4.1"
+  dependencies:
+    "@kurkle/color": ^0.3.0
+  checksum: 8c108f137824ea0e3d79914708b409298c12ed7d16da99a40ca3cab51466ef7b0068ad82ac0addeb288b938fe0621d3e5a6a913b60e72a729aa42aa96705fcad
+  languageName: node
+  linkType: hard
+
 "check-error@npm:^1.0.2":
   version: 1.0.2
   resolution: "check-error@npm:1.0.2"
@@ -14740,118 +14641,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-array@npm:2, d3-array@npm:^2.3.0":
-  version: 2.12.1
-  resolution: "d3-array@npm:2.12.1"
-  dependencies:
-    internmap: ^1.0.0
-  checksum: 97853b7b523aded17078f37c67742f45d81e88dda2107ae9994c31b9e36c5fa5556c4c4cf39650436f247813602dfe31bf7ad067ff80f127a16903827f10c6eb
-  languageName: node
-  linkType: hard
-
-"d3-color@npm:1 - 2, d3-color@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "d3-color@npm:2.0.0"
-  checksum: b887354aa383937abd04fbffed3e26e5d6a788472cd3737fb10735930e427763e69fe93398663bccf88c0b53ee3e638ac6fcf0c02226b00ed9e4327c2dfbf3dc
-  languageName: node
-  linkType: hard
-
-"d3-delaunay@npm:^5.3.0":
-  version: 5.3.0
-  resolution: "d3-delaunay@npm:5.3.0"
-  dependencies:
-    delaunator: 4
-  checksum: 3fa5ae167eb86e62ca0f9c3e8d05470b23572b4b480f05201705c0db976d403834cee1cdf264a41c97e45238e3999d48cc593f97d0da37229a42673a6bb10e95
-  languageName: node
-  linkType: hard
-
-"d3-format@npm:1 - 2":
-  version: 2.0.0
-  resolution: "d3-format@npm:2.0.0"
-  checksum: c4d3c8f9941d097d514d3986f54f21434e08e5876dc08d1d65226447e8e167600d5b9210235bb03fd45327225f04f32d6e365f08f76d2f4b8bff81594851aaf7
-  languageName: node
-  linkType: hard
-
-"d3-format@npm:^1.4.4":
-  version: 1.4.5
-  resolution: "d3-format@npm:1.4.5"
-  checksum: 1b8b2c0bca182173bccd290a43e8b635a83fc8cfe52ec878c7bdabb997d47daac11f2b175cebbe73f807f782ad655f542bdfe18180ca5eb3498a3a82da1e06ab
-  languageName: node
-  linkType: hard
-
-"d3-interpolate@npm:1 - 2, d3-interpolate@npm:1.2.0 - 2, d3-interpolate@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "d3-interpolate@npm:2.0.1"
-  dependencies:
-    d3-color: 1 - 2
-  checksum: 4a2018ac34fbcc3e0e7241e117087ca1b2274b8b33673913658623efacc5db013b8d876586d167b23e3145bdb34ec8e441d301299b082e1a90985b2f18d4299c
-  languageName: node
-  linkType: hard
-
-"d3-path@npm:1":
-  version: 1.0.9
-  resolution: "d3-path@npm:1.0.9"
-  checksum: d4382573baf9509a143f40944baeff9fead136926aed6872f7ead5b3555d68925f8a37935841dd51f1d70b65a294fe35c065b0906fb6e42109295f6598fc16d0
-  languageName: node
-  linkType: hard
-
-"d3-scale-chromatic@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "d3-scale-chromatic@npm:2.0.0"
-  dependencies:
-    d3-color: 1 - 2
-    d3-interpolate: 1 - 2
-  checksum: 9fe5b4c1d9907abbda76e414856d9089182a0641f3bbf43d8d3008dbcccb52781e21793682e2b53663d3c6cd63e76965f961894e53ed3b01a345797412fe5b1f
-  languageName: node
-  linkType: hard
-
-"d3-scale@npm:^3.2.3":
-  version: 3.3.0
-  resolution: "d3-scale@npm:3.3.0"
-  dependencies:
-    d3-array: ^2.3.0
-    d3-format: 1 - 2
-    d3-interpolate: 1.2.0 - 2
-    d3-time: ^2.1.1
-    d3-time-format: 2 - 3
-  checksum: f77e73f0fb422292211d0687914c30d26e29011a936ad2a535a868ae92f306c3545af1fe7ea5db1b3e67dbce7a6c6cd952e53d02d1d557543e7e5d30e30e52f2
-  languageName: node
-  linkType: hard
-
-"d3-shape@npm:^1.3.5":
-  version: 1.3.7
-  resolution: "d3-shape@npm:1.3.7"
-  dependencies:
-    d3-path: 1
-  checksum: 46566a3ab64a25023653bf59d64e81e9e6c987e95be985d81c5cedabae5838bd55f4a201a6b69069ca862eb63594cd263cac9034afc2b0e5664dfe286c866129
-  languageName: node
-  linkType: hard
-
-"d3-time-format@npm:2 - 3, d3-time-format@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "d3-time-format@npm:3.0.0"
-  dependencies:
-    d3-time: 1 - 2
-  checksum: c20c1667dbea653f81d923e741f84c23e4b966002ba0d6ed94cbc70692105566e55e89d18d175404534a879383fd1123300bd12885a3c924fe924032bb0060db
-  languageName: node
-  linkType: hard
-
-"d3-time@npm:1 - 2, d3-time@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "d3-time@npm:2.1.1"
-  dependencies:
-    d3-array: 2
-  checksum: d1c7b9658c20646e46c3dd19e11c38e02dec098e8baa7d2cd868af8eb01953668f5da499fa33dc63541cf74a26e788786f8828c4381dbbf475a76b95972979a6
-  languageName: node
-  linkType: hard
-
-"d3-time@npm:^1.0.11":
-  version: 1.1.0
-  resolution: "d3-time@npm:1.1.0"
-  checksum: 33fcfff94ff093dde2048c190ecca8b39fe0ec8b3c61e9fc39c5f6072ce5b86dd2b91823f086366995422bbbac7f74fd9abdb7efe4f292a73b1c6197c699cc78
-  languageName: node
-  linkType: hard
-
 "d@npm:1, d@npm:^1.0.1":
   version: 1.0.1
   resolution: "d@npm:1.0.1"
@@ -14891,9 +14680,11 @@ __metadata:
   linkType: hard
 
 "date-fns@npm:^2.16.1, date-fns@npm:^2.29.1, date-fns@npm:^2.29.3":
-  version: 2.29.3
-  resolution: "date-fns@npm:2.29.3"
-  checksum: e01cf5b62af04e05dfff921bb9c9933310ed0e1ae9a81eb8653452e64dc841acf7f6e01e1a5ae5644d0337e9a7f936175fd2cb6819dc122fdd9c5e86c56be484
+  version: 2.30.0
+  resolution: "date-fns@npm:2.30.0"
+  dependencies:
+    "@babel/runtime": ^7.21.0
+  checksum: f7be01523282e9bb06c0cd2693d34f245247a29098527d4420628966a2d9aad154bd0e90a6b1cf66d37adcb769cd108cf8a7bd49d76db0fb119af5cdd13644f4
   languageName: node
   linkType: hard
 
@@ -15176,13 +14967,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"delaunator@npm:4":
-  version: 4.0.1
-  resolution: "delaunator@npm:4.0.1"
-  checksum: a49f1c23edbcb79079a13577d32fcd46d0db30879c8484f742a0d840923085f2f3de35a9bfbb96eadd12201ffb7c3adf45b0f528d08b71cb547c5f8068b5d61b
-  languageName: node
-  linkType: hard
-
 "delayed-stream@npm:~1.0.0":
   version: 1.0.0
   resolution: "delayed-stream@npm:1.0.0"
@@ -15325,6 +15109,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"devlop@npm:^1.0.0, devlop@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "devlop@npm:1.1.0"
+  dependencies:
+    dequal: ^2.0.0
+  checksum: d2ff650bac0bb6ef08c48f3ba98640bb5fec5cce81e9957eb620408d1bab1204d382a45b785c6b3314dc867bb0684936b84c6867820da6db97cbb5d3c15dd185
+  languageName: node
+  linkType: hard
+
 "didyoumean@npm:^1.2.2":
   version: 1.2.2
   resolution: "didyoumean@npm:1.2.2"
@@ -15353,13 +15146,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"diff@npm:^5.0.0":
-  version: 5.1.0
-  resolution: "diff@npm:5.1.0"
-  checksum: c7bf0df7c9bfbe1cf8a678fd1b2137c4fb11be117a67bc18a0e03ae75105e8533dbfb1cda6b46beb3586ef5aed22143ef9d70713977d5fb1f9114e21455fba90
-  languageName: node
-  linkType: hard
-
 "diffie-hellman@npm:^5.0.0":
   version: 5.0.3
   resolution: "diffie-hellman@npm:5.0.3"
@@ -15647,22 +15433,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"edge-runtime@npm:2.5.1":
-  version: 2.5.1
-  resolution: "edge-runtime@npm:2.5.1"
+"edge-runtime@npm:2.5.7":
+  version: 2.5.7
+  resolution: "edge-runtime@npm:2.5.7"
   dependencies:
     "@edge-runtime/format": 2.2.0
-    "@edge-runtime/vm": 3.1.1
+    "@edge-runtime/ponyfill": 2.4.1
+    "@edge-runtime/vm": 3.1.7
     async-listen: 3.0.1
     mri: 1.2.0
     picocolors: 1.0.0
-    pretty-bytes: 5.6.0
     pretty-ms: 7.0.1
     signal-exit: 4.0.2
     time-span: 4.0.0
   bin:
     edge-runtime: dist/cli/index.js
-  checksum: 30f5960b3eb3b6036ed5b8acf604834c13995c72c4035b288e8e0eb056dfcbf16f91888e5308d422a30c6271edae6640278340cf40d1941e3e90f41c7988e471
+  checksum: 0633677fd28b0aa60d11e8df67f561d65ff53473aa88d62dc8e057b3a8d44054478d3668a4577d745f2231e12c11ab32126f396e0809f753509ad35f5a882cb7
   languageName: node
   linkType: hard
 
@@ -15713,18 +15499,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emoji-mart@npm:3.0.1":
-  version: 3.0.1
-  resolution: "emoji-mart@npm:3.0.1"
-  dependencies:
-    "@babel/runtime": ^7.0.0
-    prop-types: ^15.6.0
-  peerDependencies:
-    react: ^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0
-  checksum: 6282c6bfea0b183941c63bf20aee53a317503465266cf634819fd5aab84c42c867ee8b412dca8628dd8a74acdf5bd2006dbac6ac024f8f6a07596471f7bbd35d
-  languageName: node
-  linkType: hard
-
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -16930,6 +16704,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-util-is-identifier-name@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "estree-util-is-identifier-name@npm:3.0.0"
+  checksum: ea3909f0188ea164af0aadeca87c087e3e5da78d76da5ae9c7954ff1340ea3e4679c4653bbf4299ffb70caa9b322218cc1128db2541f3d2976eb9704f9857787
+  languageName: node
+  linkType: hard
+
 "estree-walker@npm:2.0.2, estree-walker@npm:^2.0.1, estree-walker@npm:^2.0.2":
   version: 2.0.2
   resolution: "estree-walker@npm:2.0.2"
@@ -17071,13 +16852,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"exit-hook@npm:2.2.1":
-  version: 2.2.1
-  resolution: "exit-hook@npm:2.2.1"
-  checksum: 1aa8359b6c5590a012d6cadf9cd337d227291bfcaa8970dc585d73dffef0582af34ed8ac56f6164f8979979fb417cff1eb49f03cdfd782f9332a30c773f0ada0
-  languageName: node
-  linkType: hard
-
 "exit@npm:^0.1.2":
   version: 0.1.2
   resolution: "exit@npm:0.1.2"
@@ -17290,7 +17064,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expo-modules-autolinking@npm:1.10.2, expo-modules-autolinking@npm:~1.10.0":
+"expo-modules-autolinking@npm:1.10.2":
   version: 1.10.2
   resolution: "expo-modules-autolinking@npm:1.10.2"
   dependencies:
@@ -17306,6 +17080,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-modules-autolinking@npm:1.5.1":
+  version: 1.5.1
+  resolution: "expo-modules-autolinking@npm:1.5.1"
+  dependencies:
+    "@expo/config": ~8.1.0
+    chalk: ^4.1.0
+    commander: ^7.2.0
+    fast-glob: ^3.2.5
+    find-up: ^5.0.0
+    fs-extra: ^9.1.0
+  bin:
+    expo-modules-autolinking: bin/expo-modules-autolinking.js
+  checksum: 4fb6e5d8be5c107bf4b9d8b23a9a783536d14f05779df25764f1de0868030da0353ec13060f4b0ba671d4e107004a87199766830f743a6cf2d1be79f807c093a
+  languageName: node
+  linkType: hard
+
 "expo-modules-core@npm:1.11.8":
   version: 1.11.8
   resolution: "expo-modules-core@npm:1.11.8"
@@ -17345,8 +17135,8 @@ __metadata:
   linkType: hard
 
 "expo-notifications@npm:~0.27.5":
-  version: 0.27.5
-  resolution: "expo-notifications@npm:0.27.5"
+  version: 0.27.6
+  resolution: "expo-notifications@npm:0.27.6"
   dependencies:
     "@expo/image-utils": ^0.4.0
     "@ide/backoff": ^1.0.0
@@ -17358,7 +17148,7 @@ __metadata:
     fs-extra: ^9.1.0
   peerDependencies:
     expo: "*"
-  checksum: d286ee17a1cde74dbaebed7d4665f1eaa6788ae614ce834d54647683d78701c2f792bc4e883324e580735c9b56de9b035bc78269ce35f8293d89ef00edfc4e59
+  checksum: b491d15495a3f2f9fdee6c63e0dadc9b4a5a45875c4b093e69d9f65a26974b7a0bf2d6402f6b1d4635031a33f3f41757f09a5572cc028c4423ca1dc2be86f466
   languageName: node
   linkType: hard
 
@@ -17436,13 +17226,13 @@ __metadata:
   linkType: hard
 
 "expo-task-manager@npm:~11.7.1":
-  version: 11.7.1
-  resolution: "expo-task-manager@npm:11.7.1"
+  version: 11.7.2
+  resolution: "expo-task-manager@npm:11.7.2"
   dependencies:
     unimodules-app-loader: ~4.5.0
   peerDependencies:
     expo: "*"
-  checksum: 6cc0adece9d0364b936138bcbad8e5b857c47b76c0672e54e34f85dfc464af8080113d1b6e1127744a7dc7b9e5536fc613c5b7df42064fecce38df6defccd4c5
+  checksum: 251504c1f01d7d7da5b1adad6bba5f381ac086d32e4c6a82a3b54365312728e84d13d7911427f77c467e75b9d8a347fe595eeb05b97b223d97dba038bb128538
   languageName: node
   linkType: hard
 
@@ -17453,7 +17243,7 @@ __metadata:
     "@babel/runtime": ^7.20.0
     "@expo/cli": 0.10.13
     "@expo/config": 8.1.2
-    "@expo/config-plugins": ~7.8.0
+    "@expo/config-plugins": 7.2.5
     "@expo/vector-icons": ^13.0.0
     babel-preset-expo: ~9.5.2
     expo-application: ~5.3.0
@@ -17462,7 +17252,7 @@ __metadata:
     expo-file-system: ~15.4.4
     expo-font: ~11.4.0
     expo-keep-awake: ~12.3.0
-    expo-modules-autolinking: ~1.10.0
+    expo-modules-autolinking: 1.5.1
     expo-modules-core: 1.5.11
     fbemitter: ^3.0.0
     invariant: ^2.2.4
@@ -17477,11 +17267,11 @@ __metadata:
   linkType: hard
 
 "expo@npm:~50.0.3":
-  version: 50.0.3
-  resolution: "expo@npm:50.0.3"
+  version: 50.0.4
+  resolution: "expo@npm:50.0.4"
   dependencies:
     "@babel/runtime": ^7.20.0
-    "@expo/cli": 0.17.2
+    "@expo/cli": 0.17.3
     "@expo/config": 8.5.4
     "@expo/config-plugins": 7.8.4
     "@expo/metro-config": 0.17.3
@@ -17497,7 +17287,7 @@ __metadata:
     whatwg-url-without-unicode: 8.0.0-3
   bin:
     expo: bin/cli
-  checksum: 484ff903e12e569375a198801aa05a65c856bc629c6dc07cbd288fc28a0c5dee5d1901637460d2fd55c4a605a1245c3b888d2528b7c963f3b5692c0b5f5671f1
+  checksum: 076c714fee843922baa66b976307baabc135604b39170ee7ce2cc48bdf12fb02a1223e84daedcfd7a1a83c334d12de5b260655572f16975a405a256069dc94dd
   languageName: node
   linkType: hard
 
@@ -17696,13 +17486,13 @@ __metadata:
   linkType: hard
 
 "fast-xml-parser@npm:^4.2.4":
-  version: 4.3.3
-  resolution: "fast-xml-parser@npm:4.3.3"
+  version: 4.3.4
+  resolution: "fast-xml-parser@npm:4.3.4"
   dependencies:
     strnum: ^1.0.5
   bin:
     fxparser: src/cli/cli.js
-  checksum: 5e272a0dbb73c4341487935cd6f37df360999f680c0638efec0974dfc58071fb803919f7a030941a7f5bb894794a2f3356d4b863ba2fb9438191795004cdf36e
+  checksum: ab88177343f6d3d971d53462db3011003a83eb8a8db704840127ddaaf27105ea90cdf7903a0f9b2e1279ccc4adfca8dfc0277b33bae6262406f10c16bd60ccf9
   languageName: node
   linkType: hard
 
@@ -18239,9 +18029,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:^10.12.16":
-  version: 10.12.16
-  resolution: "framer-motion@npm:10.12.16"
+"framer-motion@npm:^10.16.16":
+  version: 10.16.16
+  resolution: "framer-motion@npm:10.16.16"
   dependencies:
     "@emotion/is-prop-valid": ^0.8.2
     tslib: ^2.4.0
@@ -18256,7 +18046,7 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 0ba346fd6e64688ea5e64f9e353af6202b42d59e309ac32daca7fc07dc1dad9136dd2c18017a85ac76d01becb7f4683fc92dedbfce3e44831ea0c47bdc73e812
+  checksum: 992d755faab7171aecd4b548ea4c3baf6a9172b9348a98033e594a46a9f3f90c6f5854898d48884c3ecf7db4fc2ae3f05e27e125b4c5b397e836d765265577c1
   languageName: node
   linkType: hard
 
@@ -18733,10 +18523,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gleap@npm:^12.1.2":
-  version: 12.1.2
-  resolution: "gleap@npm:12.1.2"
-  checksum: cf2d811057daaec78c5a7c3d9896a5984bb44bb8b6428495ddac0ee84b81028efa7af831ab723834bef5035442e68e740f1b58614b5df8415e96200b3e003fee
+"gleap@npm:^13.1.1":
+  version: 13.1.1
+  resolution: "gleap@npm:13.1.1"
+  checksum: 5b6e8974c7c25f3f5d6428fc2035019b39c50393cca90c8f6698d5c27d2dd4937b5d75f8c443c5c24aef3803d16af39d306a4f9029fcdb9284d07a1570d0b39c
   languageName: node
   linkType: hard
 
@@ -18982,7 +18772,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: ac85f94da92d8eb6b7f5a8b20ce65e43d66761c55ce85ac96df6865308390da45a8d3f0296dd3a663de65d30ba497bd46c696cc1e248c72b13d6d567138a4fc7
@@ -19213,14 +19003,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-find-and-replace@npm:^4.1.2":
-  version: 4.1.3
-  resolution: "hast-util-find-and-replace@npm:4.1.3"
+"hast-util-find-and-replace@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "hast-util-find-and-replace@npm:5.0.1"
   dependencies:
+    "@types/hast": ^3.0.0
     escape-string-regexp: ^5.0.0
-    hast-util-is-element: ^2.0.0
-    unist-util-visit-parents: ^5.0.0
-  checksum: 479b8d51754fc2a15c70246f545df4cb7822f71876ba6f74c0cf48264e452c0577aa5e6ad0e67e1ff11b15504dac473015a0c637b8c409efe56ead709ca424e7
+    hast-util-is-element: ^3.0.0
+    unist-util-visit-parents: ^6.0.0
+  checksum: 91915e795dbd330dc3c0ea961b489bd8b0c0a17ee2805dbdc42ab9f460949b7e5234fddc41a91f44388eced45d44adad2bc089c9741b8c6cf42d7b56a55c69b6
   languageName: node
   linkType: hard
 
@@ -19238,13 +19029,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-is-element@npm:^2.0.0":
-  version: 2.1.3
-  resolution: "hast-util-is-element@npm:2.1.3"
+"hast-util-is-element@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-is-element@npm:3.0.0"
   dependencies:
-    "@types/hast": ^2.0.0
-    "@types/unist": ^2.0.0
-  checksum: 9d988f6839a50566a895a3dd19222e6ab1591243f6a3c36bba835b7e9339a2845f1ff1c583425afd602de1a57a76c5bae8a6dc0ab1d6e5d1e252b422cdeadbb7
+    "@types/hast": ^3.0.0
+  checksum: 82569a420eda5877c52fdbbdbe26675f012c02d70813dfd19acffdee328e42e4bd0b7ae34454cfcbcb932b2bedbd7ddc119f943a0cfb234120f9456d6c0c4331
   languageName: node
   linkType: hard
 
@@ -19273,6 +19063,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-to-jsx-runtime@npm:^2.0.0":
+  version: 2.3.0
+  resolution: "hast-util-to-jsx-runtime@npm:2.3.0"
+  dependencies:
+    "@types/estree": ^1.0.0
+    "@types/hast": ^3.0.0
+    "@types/unist": ^3.0.0
+    comma-separated-tokens: ^2.0.0
+    devlop: ^1.0.0
+    estree-util-is-identifier-name: ^3.0.0
+    hast-util-whitespace: ^3.0.0
+    mdast-util-mdx-expression: ^2.0.0
+    mdast-util-mdx-jsx: ^3.0.0
+    mdast-util-mdxjs-esm: ^2.0.0
+    property-information: ^6.0.0
+    space-separated-tokens: ^2.0.0
+    style-to-object: ^1.0.0
+    unist-util-position: ^5.0.0
+    vfile-message: ^4.0.0
+  checksum: 599a97c6ec61c1430776813d7fb42e6f96032bf4a04dfcbb8eceef3bc8d1845ecf242387a4426b9d3f52320dbbfa26450643b81124b3d6a0b9bbb0fff4d0ba83
+  languageName: node
+  linkType: hard
+
 "hast-util-to-parse5@npm:^6.0.0":
   version: 6.0.0
   resolution: "hast-util-to-parse5@npm:6.0.0"
@@ -19286,10 +19099,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-whitespace@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "hast-util-whitespace@npm:2.0.1"
-  checksum: 431be6b2f35472f951615540d7a53f69f39461e5e080c0190268bdeb2be9ab9b1dddfd1f467dd26c1de7e7952df67beb1307b6ee940baf78b24a71b5e0663868
+"hast-util-whitespace@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-whitespace@npm:3.0.0"
+  dependencies:
+    "@types/hast": ^3.0.0
+  checksum: 41d93ccce218ba935dc3c12acdf586193c35069489c8c8f50c2aa824c00dec94a3c78b03d1db40fa75381942a189161922e4b7bca700b3a2cc779634c351a1e4
   languageName: node
   linkType: hard
 
@@ -19480,6 +19295,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-url-attributes@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "html-url-attributes@npm:3.0.0"
+  checksum: 9f499d33e6ddff6c2d2766fd73d2f22f3c370b4e485a92b0b2938303665b306dc7f36b2724c9466764e8f702351c01f342f5ec933be41a31c1fa40b72087b91d
+  languageName: node
+  linkType: hard
+
 "html-void-elements@npm:^1.0.0":
   version: 1.0.5
   resolution: "html-void-elements@npm:1.0.5"
@@ -19882,6 +19704,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inline-style-parser@npm:0.2.2":
+  version: 0.2.2
+  resolution: "inline-style-parser@npm:0.2.2"
+  checksum: 698893d6542d4e7c0377936a1c7daec34a197765bd77c5599384756a95ce8804e6b79347b783aa591d5e9c6f3d33dae74c6d4cad3a94647eb05f3a785e927a3f
+  languageName: node
+  linkType: hard
+
 "inquirer@npm:8.2.5":
   version: 8.2.5
   resolution: "inquirer@npm:8.2.5"
@@ -19926,13 +19755,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internmap@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "internmap@npm:1.0.1"
-  checksum: 9d00f8c0cf873a24a53a5a937120dab634c41f383105e066bb318a61864e6292d24eb9516e8e7dccfb4420ec42ca474a0f28ac9a6cc82536898fa09bbbe53813
-  languageName: node
-  linkType: hard
-
 "interpret@npm:^2.2.0":
   version: 2.2.0
   resolution: "interpret@npm:2.2.0"
@@ -20026,6 +19848,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-alphabetical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphabetical@npm:2.0.1"
+  checksum: 56207db8d9de0850f0cd30f4966bf731eb82cedfe496cbc2e97e7c3bacaf66fc54a972d2d08c0d93bb679cb84976a05d24c5ad63de56fabbfc60aadae312edaa
+  languageName: node
+  linkType: hard
+
 "is-alphanumerical@npm:^1.0.0":
   version: 1.0.4
   resolution: "is-alphanumerical@npm:1.0.4"
@@ -20036,6 +19865,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-alphanumerical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphanumerical@npm:2.0.1"
+  dependencies:
+    is-alphabetical: ^2.0.0
+    is-decimal: ^2.0.0
+  checksum: 87acc068008d4c9c4e9f5bd5e251041d42e7a50995c77b1499cf6ed248f971aadeddb11f239cabf09f7975ee58cac7a48ffc170b7890076d8d227b24a68663c9
+  languageName: node
+  linkType: hard
+
 "is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
@@ -20183,6 +20022,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-decimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-decimal@npm:2.0.1"
+  checksum: 97132de7acdce77caa7b797632970a2ecd649a88e715db0e4dbc00ab0708b5e7574ba5903962c860cd4894a14fd12b100c0c4ac8aed445cf6f55c6cf747a4158
+  languageName: node
+  linkType: hard
+
 "is-descriptor@npm:^0.1.0":
   version: 0.1.6
   resolution: "is-descriptor@npm:0.1.6"
@@ -20359,6 +20205,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-hexadecimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-hexadecimal@npm:2.0.1"
+  checksum: 66a2ea85994c622858f063f23eda506db29d92b52580709eb6f4c19550552d4dcf3fb81952e52f7cf972097237959e00adc7bb8c9400cd12886e15bf06145321
+  languageName: node
+  linkType: hard
+
 "is-interactive@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-interactive@npm:1.0.0"
@@ -22281,7 +22134,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kleur@npm:^4.0.3, kleur@npm:^4.1.4":
+"kleur@npm:^4.1.4":
   version: 4.1.5
   resolution: "kleur@npm:4.1.5"
   checksum: 1dc476e32741acf0b1b5b0627ffd0d722e342c1b0da14de3e8ae97821327ca08f9fb944542fb3c126d90ac5f27f9d804edbe7c585bf7d12ef495d115e0f22c12
@@ -22915,13 +22768,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru_map@npm:^0.3.3":
-  version: 0.3.3
-  resolution: "lru_map@npm:0.3.3"
-  checksum: ca9dd43c65ed7a4f117c548028101c5b6855e10923ea9d1f635af53ad20c5868ff428c364d454a7b57fe391b89c704982275410c3c5099cca5aeee00d76e169a
-  languageName: node
-  linkType: hard
-
 "lz-string@npm:^1.4.4":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -23192,26 +23038,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdast-util-definitions@npm:^5.0.0":
-  version: 5.1.2
-  resolution: "mdast-util-definitions@npm:5.1.2"
-  dependencies:
-    "@types/mdast": ^3.0.0
-    "@types/unist": ^2.0.0
-    unist-util-visit: ^4.0.0
-  checksum: 2544daccab744ea1ede76045c2577ae4f1cc1b9eb1ea51ab273fe1dca8db5a8d6f50f87759c0ce6484975914b144b7f40316f805cb9c86223a78db8de0b77bae
-  languageName: node
-  linkType: hard
-
-"mdast-util-find-and-replace@npm:^2.0.0":
-  version: 2.2.2
-  resolution: "mdast-util-find-and-replace@npm:2.2.2"
+"mdast-util-find-and-replace@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "mdast-util-find-and-replace@npm:3.0.1"
   dependencies:
-    "@types/mdast": ^3.0.0
+    "@types/mdast": ^4.0.0
     escape-string-regexp: ^5.0.0
-    unist-util-is: ^5.0.0
-    unist-util-visit-parents: ^5.0.0
-  checksum: b4ce463c43fe6e1c38a53a89703f755c84ab5437f49bff9a0ac751279733332ca11c85ed0262aa6c17481f77b555d26ca6d64e70d6814f5b8d12d34a3e53a60b
+    unist-util-is: ^6.0.0
+    unist-util-visit-parents: ^6.0.0
+  checksum: 05d5c4ff02e31db2f8a685a13bcb6c3f44e040bd9dfa54c19a232af8de5268334c8755d79cb456ed4cced1300c4fb83e88444c7ae8ee9ff16869a580f29d08cd
   languageName: node
   linkType: hard
 
@@ -23228,103 +23063,159 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdast-util-from-markdown@npm:^1.0.0":
-  version: 1.3.0
-  resolution: "mdast-util-from-markdown@npm:1.3.0"
+"mdast-util-from-markdown@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-from-markdown@npm:2.0.0"
   dependencies:
-    "@types/mdast": ^3.0.0
-    "@types/unist": ^2.0.0
+    "@types/mdast": ^4.0.0
+    "@types/unist": ^3.0.0
     decode-named-character-reference: ^1.0.0
-    mdast-util-to-string: ^3.1.0
-    micromark: ^3.0.0
-    micromark-util-decode-numeric-character-reference: ^1.0.0
-    micromark-util-decode-string: ^1.0.0
-    micromark-util-normalize-identifier: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-    unist-util-stringify-position: ^3.0.0
-    uvu: ^0.5.0
-  checksum: cc971d1ad381150f6504fd753fbcffcc64c0abb527540ce343625c2bba76104505262122ef63d14ab66eb47203f323267017c6d09abfa8535ee6a8e14069595f
+    devlop: ^1.0.0
+    mdast-util-to-string: ^4.0.0
+    micromark: ^4.0.0
+    micromark-util-decode-numeric-character-reference: ^2.0.0
+    micromark-util-decode-string: ^2.0.0
+    micromark-util-normalize-identifier: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+    unist-util-stringify-position: ^4.0.0
+  checksum: 4e8d8a46b4b588486c41b80c39da333a91593bc8d60cd7421c6cd3c22003b8e5a62478292fb7bc97b9255b6301a2250cca32340ef43c309156e215453c5b92be
   languageName: node
   linkType: hard
 
-"mdast-util-gfm-autolink-literal@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "mdast-util-gfm-autolink-literal@npm:1.0.3"
+"mdast-util-gfm-autolink-literal@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-gfm-autolink-literal@npm:2.0.0"
   dependencies:
-    "@types/mdast": ^3.0.0
+    "@types/mdast": ^4.0.0
     ccount: ^2.0.0
-    mdast-util-find-and-replace: ^2.0.0
-    micromark-util-character: ^1.0.0
-  checksum: 1748a8727cfc533bac0c287d6e72d571d165bfa77ae0418be4828177a3ec73c02c3f2ee534d87eb75cbaffa00c0866853bbcc60ae2255babb8210f7636ec2ce2
+    devlop: ^1.0.0
+    mdast-util-find-and-replace: ^3.0.0
+    micromark-util-character: ^2.0.0
+  checksum: 10322662e5302964bed7c9829c5fd3b0c9899d4f03e63fb8620ab141cf4f3de9e61fcb4b44d46aacc8a23f82bcd5d900980a211825dfe026b1dab5fdbc3e8742
   languageName: node
   linkType: hard
 
-"mdast-util-gfm-footnote@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "mdast-util-gfm-footnote@npm:1.0.2"
+"mdast-util-gfm-footnote@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-gfm-footnote@npm:2.0.0"
   dependencies:
-    "@types/mdast": ^3.0.0
-    mdast-util-to-markdown: ^1.3.0
-    micromark-util-normalize-identifier: ^1.0.0
-  checksum: 2d77505f9377ed7e14472ef5e6b8366c3fec2cf5f936bb36f9fbe5b97ccb7cce0464d9313c236fa86fb844206fd585db05707e4fcfb755e4fc1864194845f1f6
+    "@types/mdast": ^4.0.0
+    devlop: ^1.1.0
+    mdast-util-from-markdown: ^2.0.0
+    mdast-util-to-markdown: ^2.0.0
+    micromark-util-normalize-identifier: ^2.0.0
+  checksum: 45d26b40e7a093712e023105791129d76e164e2168d5268e113298a22de30c018162683fb7893cdc04ab246dac0087eed708b2a136d1d18ed2b32b3e0cae4a79
   languageName: node
   linkType: hard
 
-"mdast-util-gfm-strikethrough@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "mdast-util-gfm-strikethrough@npm:1.0.3"
+"mdast-util-gfm-strikethrough@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-gfm-strikethrough@npm:2.0.0"
   dependencies:
-    "@types/mdast": ^3.0.0
-    mdast-util-to-markdown: ^1.3.0
-  checksum: 17003340ff1bba643ec4a59fd4370fc6a32885cab2d9750a508afa7225ea71449fb05acaef60faa89c6378b8bcfbd86a9d94b05f3c6651ff27a60e3ddefc2549
+    "@types/mdast": ^4.0.0
+    mdast-util-from-markdown: ^2.0.0
+    mdast-util-to-markdown: ^2.0.0
+  checksum: fe9b1d0eba9b791ff9001c008744eafe3dd7a81b085f2bf521595ce4a8e8b1b44764ad9361761ad4533af3e5d913d8ad053abec38172031d9ee32a8ebd1c7dbd
   languageName: node
   linkType: hard
 
-"mdast-util-gfm-table@npm:^1.0.0":
-  version: 1.0.7
-  resolution: "mdast-util-gfm-table@npm:1.0.7"
+"mdast-util-gfm-table@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-gfm-table@npm:2.0.0"
   dependencies:
-    "@types/mdast": ^3.0.0
+    "@types/mdast": ^4.0.0
+    devlop: ^1.0.0
     markdown-table: ^3.0.0
-    mdast-util-from-markdown: ^1.0.0
-    mdast-util-to-markdown: ^1.3.0
-  checksum: 8b8c401bb4162e53f072a2dff8efbca880fd78d55af30601c791315ab6722cb2918176e8585792469a0c530cebb9df9b4e7fede75fdc4d83df2839e238836692
+    mdast-util-from-markdown: ^2.0.0
+    mdast-util-to-markdown: ^2.0.0
+  checksum: 063a627fd0993548fd63ca0c24c437baf91ba7d51d0a38820bd459bc20bf3d13d7365ef8d28dca99176dd5eb26058f7dde51190479c186dfe6af2e11202957c9
   languageName: node
   linkType: hard
 
-"mdast-util-gfm-task-list-item@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "mdast-util-gfm-task-list-item@npm:1.0.2"
+"mdast-util-gfm-task-list-item@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-gfm-task-list-item@npm:2.0.0"
   dependencies:
-    "@types/mdast": ^3.0.0
-    mdast-util-to-markdown: ^1.3.0
-  checksum: c9b86037d6953b84f11fb2fc3aa23d5b8e14ca0dfcb0eb2fb289200e172bb9d5647bfceb4f86606dc6d935e8d58f6a458c04d3e55e87ff8513c7d4ade976200b
+    "@types/mdast": ^4.0.0
+    devlop: ^1.0.0
+    mdast-util-from-markdown: ^2.0.0
+    mdast-util-to-markdown: ^2.0.0
+  checksum: 37db90c59b15330fc54d790404abf5ef9f2f83e8961c53666fe7de4aab8dd5e6b3c296b6be19797456711a89a27840291d8871ff0438e9b4e15c89d170efe072
   languageName: node
   linkType: hard
 
-"mdast-util-gfm@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "mdast-util-gfm@npm:2.0.2"
+"mdast-util-gfm@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mdast-util-gfm@npm:3.0.0"
   dependencies:
-    mdast-util-from-markdown: ^1.0.0
-    mdast-util-gfm-autolink-literal: ^1.0.0
-    mdast-util-gfm-footnote: ^1.0.0
-    mdast-util-gfm-strikethrough: ^1.0.0
-    mdast-util-gfm-table: ^1.0.0
-    mdast-util-gfm-task-list-item: ^1.0.0
-    mdast-util-to-markdown: ^1.0.0
-  checksum: 7078cb985255208bcbce94a121906417d38353c6b1a9acbe56ee8888010d3500608b5d51c16b0999ac63ca58848fb13012d55f26930ff6c6f3450f053d56514e
+    mdast-util-from-markdown: ^2.0.0
+    mdast-util-gfm-autolink-literal: ^2.0.0
+    mdast-util-gfm-footnote: ^2.0.0
+    mdast-util-gfm-strikethrough: ^2.0.0
+    mdast-util-gfm-table: ^2.0.0
+    mdast-util-gfm-task-list-item: ^2.0.0
+    mdast-util-to-markdown: ^2.0.0
+  checksum: 62039d2f682ae3821ea1c999454863d31faf94d67eb9b746589c7e136076d7fb35fabc67e02f025c7c26fd7919331a0ee1aabfae24f565d9a6a9ebab3371c626
   languageName: node
   linkType: hard
 
-"mdast-util-phrasing@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "mdast-util-phrasing@npm:3.0.1"
+"mdast-util-mdx-expression@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-mdx-expression@npm:2.0.0"
   dependencies:
-    "@types/mdast": ^3.0.0
-    unist-util-is: ^5.0.0
-  checksum: c5b616d9b1eb76a6b351d195d94318494722525a12a89d9c8a3b091af7db3dd1fc55d294f9d29266d8159a8267b0df4a7a133bda8a3909d5331c383e1e1ff328
+    "@types/estree-jsx": ^1.0.0
+    "@types/hast": ^3.0.0
+    "@types/mdast": ^4.0.0
+    devlop: ^1.0.0
+    mdast-util-from-markdown: ^2.0.0
+    mdast-util-to-markdown: ^2.0.0
+  checksum: 4e1183000e183e07a7264e192889b4fd57372806103031c71b9318967f85fd50a5dd0f92ef14f42c331e77410808f5de3341d7bc8ad4ee91b7fa8f0a30043a8a
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx-jsx@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mdast-util-mdx-jsx@npm:3.0.0"
+  dependencies:
+    "@types/estree-jsx": ^1.0.0
+    "@types/hast": ^3.0.0
+    "@types/mdast": ^4.0.0
+    "@types/unist": ^3.0.0
+    ccount: ^2.0.0
+    devlop: ^1.1.0
+    mdast-util-from-markdown: ^2.0.0
+    mdast-util-to-markdown: ^2.0.0
+    parse-entities: ^4.0.0
+    stringify-entities: ^4.0.0
+    unist-util-remove-position: ^5.0.0
+    unist-util-stringify-position: ^4.0.0
+    vfile-message: ^4.0.0
+  checksum: 48fe1ba617205f3776ca2030d195adbdb42bb6c53326534db3f5bdd28abe7895103af8c4dfda7cbe2911e8cd71921bc8a82fe40856565e57af8b4f8a79c8c126
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdxjs-esm@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mdast-util-mdxjs-esm@npm:2.0.1"
+  dependencies:
+    "@types/estree-jsx": ^1.0.0
+    "@types/hast": ^3.0.0
+    "@types/mdast": ^4.0.0
+    devlop: ^1.0.0
+    mdast-util-from-markdown: ^2.0.0
+    mdast-util-to-markdown: ^2.0.0
+  checksum: 1f9dad04d31d59005332e9157ea9510dc1d03092aadbc607a10475c7eec1c158b475aa0601a3a4f74e13097ca735deb8c2d9d37928ddef25d3029fd7c9e14dc3
+  languageName: node
+  linkType: hard
+
+"mdast-util-phrasing@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "mdast-util-phrasing@npm:4.0.0"
+  dependencies:
+    "@types/mdast": ^4.0.0
+    unist-util-is: ^6.0.0
+  checksum: 95d5d8e18d5ea6dbfe2ee4ed1045961372efae9077e5c98e10bfef7025ee3fd9449f9a82840068ff50aa98fa43af0a0a14898ae10b5e46e96edde01e2797df34
   languageName: node
   linkType: hard
 
@@ -23344,35 +23235,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdast-util-to-hast@npm:^12.1.0":
-  version: 12.3.0
-  resolution: "mdast-util-to-hast@npm:12.3.0"
+"mdast-util-to-hast@npm:^13.0.0":
+  version: 13.0.2
+  resolution: "mdast-util-to-hast@npm:13.0.2"
   dependencies:
-    "@types/hast": ^2.0.0
-    "@types/mdast": ^3.0.0
-    mdast-util-definitions: ^5.0.0
-    micromark-util-sanitize-uri: ^1.1.0
+    "@types/hast": ^3.0.0
+    "@types/mdast": ^4.0.0
+    "@ungap/structured-clone": ^1.0.0
+    devlop: ^1.0.0
+    micromark-util-sanitize-uri: ^2.0.0
     trim-lines: ^3.0.0
-    unist-util-generated: ^2.0.0
-    unist-util-position: ^4.0.0
-    unist-util-visit: ^4.0.0
-  checksum: ea40c9f07dd0b731754434e81c913590c611b1fd753fa02550a1492aadfc30fb3adecaf62345ebb03cea2ddd250c15ab6e578fffde69c19955c9b87b10f2a9bb
+    unist-util-position: ^5.0.0
+    unist-util-visit: ^5.0.0
+  checksum: 8fef6c3752476461d9c00b1dea4f141bc7d980e1b3bac7bd965bc68f532b6d30fb1c9e810433327c167176e68e071b8f4ab5a45355954857dc095c878421f35e
   languageName: node
   linkType: hard
 
-"mdast-util-to-markdown@npm:^1.0.0, mdast-util-to-markdown@npm:^1.3.0":
-  version: 1.5.0
-  resolution: "mdast-util-to-markdown@npm:1.5.0"
+"mdast-util-to-markdown@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "mdast-util-to-markdown@npm:2.1.0"
   dependencies:
-    "@types/mdast": ^3.0.0
-    "@types/unist": ^2.0.0
+    "@types/mdast": ^4.0.0
+    "@types/unist": ^3.0.0
     longest-streak: ^3.0.0
-    mdast-util-phrasing: ^3.0.0
-    mdast-util-to-string: ^3.0.0
-    micromark-util-decode-string: ^1.0.0
-    unist-util-visit: ^4.0.0
+    mdast-util-phrasing: ^4.0.0
+    mdast-util-to-string: ^4.0.0
+    micromark-util-decode-string: ^2.0.0
+    unist-util-visit: ^5.0.0
     zwitch: ^2.0.0
-  checksum: 64338eb33e49bb0aea417591fd986f72fdd39205052563bb7ce9eb9ecc160824509bfacd740086a05af355c6d5c36353aafe95cab9e6927d674478757cee6259
+  checksum: 3a2cf3957e23b34e2e092e6e76ae72ee0b8745955bd811baba6814cf3a3d916c3fd52264b4b58f3bb3d512a428f84a1e998b6fc7e28434e388a9ae8fb6a9c173
   languageName: node
   linkType: hard
 
@@ -23390,12 +23281,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdast-util-to-string@npm:^3.0.0, mdast-util-to-string@npm:^3.1.0":
-  version: 3.1.1
-  resolution: "mdast-util-to-string@npm:3.1.1"
+"mdast-util-to-string@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "mdast-util-to-string@npm:4.0.0"
   dependencies:
-    "@types/mdast": ^3.0.0
-  checksum: 5e9375e1757ebf2950e122ef3538e4257ed2b6f43ab1d3e9c45db5dd5d5b5d14fd041490afcde00934f1cdb4b99877597ae04eb810d313ec7b38c6009058dddd
+    "@types/mdast": ^4.0.0
+  checksum: 35489fb5710d58cbc2d6c8b6547df161a3f81e0f28f320dfb3548a9393555daf07c310c0c497708e67ed4dfea4a06e5655799e7d631ca91420c288b4525d6c29
   languageName: node
   linkType: hard
 
@@ -23570,14 +23461,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-babel-transformer@npm:0.80.4":
-  version: 0.80.4
-  resolution: "metro-babel-transformer@npm:0.80.4"
+"metro-babel-transformer@npm:0.80.5":
+  version: 0.80.5
+  resolution: "metro-babel-transformer@npm:0.80.5"
   dependencies:
     "@babel/core": ^7.20.0
     hermes-parser: 0.18.2
     nullthrows: ^1.1.1
-  checksum: eee402bfc85b7fe1a9362bf5908bef3388ff62643102de5a36e02e0d07c6841c6250a43edc4068ce8b97fb6ce6b11eca91ab46fbf566265ba75bfc2a2d1c5804
+  checksum: 0da49aceb62d20e54db0b5b60c8b93fdbef927c089e406fdde889252925ba117a1dc2e97a737181ad765352401dee34164fbdd4a55d152c888a0fdf6f717eff8
   languageName: node
   linkType: hard
 
@@ -23588,10 +23479,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-cache-key@npm:0.80.4":
-  version: 0.80.4
-  resolution: "metro-cache-key@npm:0.80.4"
-  checksum: 674b0a1e570c35d05602eeef16dcbb6e7b80ae5d67d414db347a3214c0436afe142afaf1393f39651cbef9a54a095ac100ecf0a96a6e59f59536b06911bb78af
+"metro-cache-key@npm:0.80.5":
+  version: 0.80.5
+  resolution: "metro-cache-key@npm:0.80.5"
+  checksum: 13437f7860874ee1647e49a216896e2e03db13b1810b17b1e2b25427a2dfc03bed279f9b8f0e1b0aeda2994c3035f48437dd841e989cf425dc6d7ecfb87622eb
   languageName: node
   linkType: hard
 
@@ -23605,13 +23496,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-cache@npm:0.80.4":
-  version: 0.80.4
-  resolution: "metro-cache@npm:0.80.4"
+"metro-cache@npm:0.80.5":
+  version: 0.80.5
+  resolution: "metro-cache@npm:0.80.5"
   dependencies:
-    metro-core: 0.80.4
+    metro-core: 0.80.5
     rimraf: ^3.0.2
-  checksum: 52be5695e4f043bbb0316121db020afa4a12ea2a65c7a090417daeda3dbed1e1ddcfa6f66d2526f6b6f0ee1bc22b7c7400eca1cb512af244dd85a16fdc082366
+  checksum: fa6f06a48e3de01c5d37881a50f9c426c5d065adb91c517fd8c666357087bdedf9e9154ff461d954d57f4a3a7c24b4a40087d0197cade1d7fe3d60671b6be451
   languageName: node
   linkType: hard
 
@@ -23629,18 +23520,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-config@npm:0.80.4, metro-config@npm:^0.80.3":
-  version: 0.80.4
-  resolution: "metro-config@npm:0.80.4"
+"metro-config@npm:0.80.5, metro-config@npm:^0.80.3":
+  version: 0.80.5
+  resolution: "metro-config@npm:0.80.5"
   dependencies:
     connect: ^3.6.5
     cosmiconfig: ^5.0.5
     jest-validate: ^29.6.3
-    metro: 0.80.4
-    metro-cache: 0.80.4
-    metro-core: 0.80.4
-    metro-runtime: 0.80.4
-  checksum: 38c34da0ceeb0e9f6a3793f06ac4ea9bcc06bb4e48f1eff59befb469760f433e6f1fd8a35824eb547ae4413f8746ea1c4ef84d807e15148eba09de252c018459
+    metro: 0.80.5
+    metro-cache: 0.80.5
+    metro-core: 0.80.5
+    metro-runtime: 0.80.5
+  checksum: e0ed2d8e1e60001fced78ca6255b23001c911eafabd0df1c7d8d52f1b08b3acc4ff1597922a5c45631b023e17970ea3fe02f40ce5b9a3a11dbf90ab856999a7b
   languageName: node
   linkType: hard
 
@@ -23654,13 +23545,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-core@npm:0.80.4, metro-core@npm:^0.80.3":
-  version: 0.80.4
-  resolution: "metro-core@npm:0.80.4"
+"metro-core@npm:0.80.5, metro-core@npm:^0.80.3":
+  version: 0.80.5
+  resolution: "metro-core@npm:0.80.5"
   dependencies:
     lodash.throttle: ^4.1.1
-    metro-resolver: 0.80.4
-  checksum: e8789d047a55e9e2e5777d9aacdeaaf385153012d1eb7a832e68d3f69dfafc1757d24ee5747a39072f48c31e1b92fa126a57669adc74427f667ff1af6e24577e
+    metro-resolver: 0.80.5
+  checksum: 37c66e89d145ee41e0bb76c8b5e98958c73889487297a1359b12671eccad4825a355e1e1d8abee35b4c7048acf095b243cb5ff526d71a79aa6e1d0d8e66f057e
   languageName: node
   linkType: hard
 
@@ -23689,9 +23580,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-file-map@npm:0.80.4":
-  version: 0.80.4
-  resolution: "metro-file-map@npm:0.80.4"
+"metro-file-map@npm:0.80.5":
+  version: 0.80.5
+  resolution: "metro-file-map@npm:0.80.5"
   dependencies:
     anymatch: ^3.0.3
     debug: ^2.2.0
@@ -23707,7 +23598,7 @@ __metadata:
   dependenciesMeta:
     fsevents:
       optional: true
-  checksum: 624832cf02c41fe55b8977cf52b7bbd0c47b00953f9b2e8be6b6f0df7eac67e563795d3b1c39e2ee7265a30be141ffa0320f5dcc7d72db805857bfad71d44c95
+  checksum: 1d10a002cc1fc55c29ea0519752a6cf788e72c332cabc2c5f69cfce38149c1bcc7e9e3b38f6858585dba5d2c62e8f2f62a415bb7abdc60e4e6c71b19e43e88d0
   languageName: node
   linkType: hard
 
@@ -23741,12 +23632,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-minify-terser@npm:0.80.4":
-  version: 0.80.4
-  resolution: "metro-minify-terser@npm:0.80.4"
+"metro-minify-terser@npm:0.80.5":
+  version: 0.80.5
+  resolution: "metro-minify-terser@npm:0.80.5"
   dependencies:
     terser: ^5.15.0
-  checksum: 1a8e3dcefce1c4a599e948641fee58cc03f4121371d50adb32af5f8fc3e62958c1a0d9d16a9179a9bab62b9e82c82f8cb5dfb8b517d37552f7de78dc7e0524bf
+  checksum: f9173e874484d0d948c928bb0b6b79c84d1208f655411927dd26cc6678ffae4d60deb7c4c7a0648287143348f75825597cd1fc6edeeb882d6dcd839cd50c96d6
   languageName: node
   linkType: hard
 
@@ -23997,10 +23888,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-resolver@npm:0.80.4":
-  version: 0.80.4
-  resolution: "metro-resolver@npm:0.80.4"
-  checksum: d56009e4ca9e8b0ce1bcb84891fbe98e5ca80a2f43e20a9bcdff565916503546646ed6eb9cb39c072cbb14de2e85acb978ccc9d19ada6a176fc95a7cfd84ee6b
+"metro-resolver@npm:0.80.5":
+  version: 0.80.5
+  resolution: "metro-resolver@npm:0.80.5"
+  checksum: 78c7d58a1944fcbe553df934aea335b1ea720b770ca6bc7b7391e9038698582cb7ca4418bbb8aa73e70ebb802bba7df83c3765d386ee282f26e4a315ac476807
   languageName: node
   linkType: hard
 
@@ -24024,12 +23915,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-runtime@npm:0.80.4, metro-runtime@npm:^0.80.3":
-  version: 0.80.4
-  resolution: "metro-runtime@npm:0.80.4"
+"metro-runtime@npm:0.80.5, metro-runtime@npm:^0.80.3":
+  version: 0.80.5
+  resolution: "metro-runtime@npm:0.80.5"
   dependencies:
     "@babel/runtime": ^7.0.0
-  checksum: 9c6f56c809d60914123eb60b0be4e14428acb94ade70c2e2bf66cedb7d7bf455d2667ca96f9fdbf2fea34229f194dbee6bae3b2020fd4bfc06b8c796f36d4520
+  checksum: ec92d3b56be1d8daaaa85a2f3204005d4872dcce055b1dc75a5a8e661ebadbc090ec20ab0481d7b1550a0bc3534e8f385bc79c2aec85aabc68bfd4153635183a
   languageName: node
   linkType: hard
 
@@ -24065,19 +23956,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-source-map@npm:0.80.4, metro-source-map@npm:^0.80.3":
-  version: 0.80.4
-  resolution: "metro-source-map@npm:0.80.4"
+"metro-source-map@npm:0.80.5, metro-source-map@npm:^0.80.3":
+  version: 0.80.5
+  resolution: "metro-source-map@npm:0.80.5"
   dependencies:
     "@babel/traverse": ^7.20.0
     "@babel/types": ^7.20.0
     invariant: ^2.2.4
-    metro-symbolicate: 0.80.4
+    metro-symbolicate: 0.80.5
     nullthrows: ^1.1.1
-    ob1: 0.80.4
+    ob1: 0.80.5
     source-map: ^0.5.6
     vlq: ^1.0.0
-  checksum: 881cf9c15c4bedb0cf784ffbdb6e83a73b9c83171f6990f6a2955a8c4382e33bb4175f5989dcd81846636a476517a4db97cee4e1a3b9c8199c0e426926cc8f0f
+  checksum: db85158bbbcc2034f116b881a794a7b673548fc513642cf888e95616a42aedd1350e747ae20287beefb548fbe769fda8a7718a756ec92a7ea1104df732744b60
   languageName: node
   linkType: hard
 
@@ -24113,19 +24004,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-symbolicate@npm:0.80.4":
-  version: 0.80.4
-  resolution: "metro-symbolicate@npm:0.80.4"
+"metro-symbolicate@npm:0.80.5":
+  version: 0.80.5
+  resolution: "metro-symbolicate@npm:0.80.5"
   dependencies:
     invariant: ^2.2.4
-    metro-source-map: 0.80.4
+    metro-source-map: 0.80.5
     nullthrows: ^1.1.1
     source-map: ^0.5.6
     through2: ^2.0.1
     vlq: ^1.0.0
   bin:
     metro-symbolicate: src/index.js
-  checksum: 112c77c75b521e45c3e8c3e71e7b352293f892b7a3e2151df43ebf2d7c01165570031468ba40a9d6e0e632af35e3cc764caf5a054a5a4b28f8d24f9407ab7be6
+  checksum: 0ff39bf4ed71a783b4883ca71abf634e6c5d0ba58c1a93b4f0be77550733646edce8326da744b3253bea9b6ff55b096355f00e2b951e5d0d8e9917420387e917
   languageName: node
   linkType: hard
 
@@ -24142,16 +24033,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-transform-plugins@npm:0.80.4":
-  version: 0.80.4
-  resolution: "metro-transform-plugins@npm:0.80.4"
+"metro-transform-plugins@npm:0.80.5":
+  version: 0.80.5
+  resolution: "metro-transform-plugins@npm:0.80.5"
   dependencies:
     "@babel/core": ^7.20.0
     "@babel/generator": ^7.20.0
     "@babel/template": ^7.0.0
     "@babel/traverse": ^7.20.0
     nullthrows: ^1.1.1
-  checksum: bcd3c6e08db2b8b0b3310dbe7f6163d79fc0408b42dfe85b1a2e97c8bd1a99e59d793cf97e9c0c959766dd3b0ccae12bd6adb73cc82e4fd66ebfdcc07957623c
+  checksum: 60d6970209705692dae9332cd3c4d24126fcd10802669acc8f4d8c50ae0bc156936cc21012615e5fb17f3a348a120c1965b3ae330abaf885e117f7200a85cbc0
   languageName: node
   linkType: hard
 
@@ -24176,22 +24067,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-transform-worker@npm:0.80.4":
-  version: 0.80.4
-  resolution: "metro-transform-worker@npm:0.80.4"
+"metro-transform-worker@npm:0.80.5":
+  version: 0.80.5
+  resolution: "metro-transform-worker@npm:0.80.5"
   dependencies:
     "@babel/core": ^7.20.0
     "@babel/generator": ^7.20.0
     "@babel/parser": ^7.20.0
     "@babel/types": ^7.20.0
-    metro: 0.80.4
-    metro-babel-transformer: 0.80.4
-    metro-cache: 0.80.4
-    metro-cache-key: 0.80.4
-    metro-source-map: 0.80.4
-    metro-transform-plugins: 0.80.4
+    metro: 0.80.5
+    metro-babel-transformer: 0.80.5
+    metro-cache: 0.80.5
+    metro-cache-key: 0.80.5
+    metro-minify-terser: 0.80.5
+    metro-source-map: 0.80.5
+    metro-transform-plugins: 0.80.5
     nullthrows: ^1.1.1
-  checksum: 8a6ec8d4b94edce5cda1f2a1e054f77372bc12db72d158c8c796abdd1bbc10409068a7100fa96d96c1566e208b86353b19c1ba657cefe467fc340881e5612747
+  checksum: 6388b8610b63d90ff41f2b2befb9fb4906a80487169924278ccfe9ddf67cc0f24763c78fd0592543b3212d984aeb3e4ab3459699404f070a258afbf8e636708b
   languageName: node
   linkType: hard
 
@@ -24256,9 +24148,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro@npm:0.80.4, metro@npm:^0.80.3":
-  version: 0.80.4
-  resolution: "metro@npm:0.80.4"
+"metro@npm:0.80.5, metro@npm:^0.80.3":
+  version: 0.80.5
+  resolution: "metro@npm:0.80.5"
   dependencies:
     "@babel/code-frame": ^7.0.0
     "@babel/core": ^7.20.0
@@ -24281,19 +24173,18 @@ __metadata:
     jest-worker: ^29.6.3
     jsc-safe-url: ^0.2.2
     lodash.throttle: ^4.1.1
-    metro-babel-transformer: 0.80.4
-    metro-cache: 0.80.4
-    metro-cache-key: 0.80.4
-    metro-config: 0.80.4
-    metro-core: 0.80.4
-    metro-file-map: 0.80.4
-    metro-minify-terser: 0.80.4
-    metro-resolver: 0.80.4
-    metro-runtime: 0.80.4
-    metro-source-map: 0.80.4
-    metro-symbolicate: 0.80.4
-    metro-transform-plugins: 0.80.4
-    metro-transform-worker: 0.80.4
+    metro-babel-transformer: 0.80.5
+    metro-cache: 0.80.5
+    metro-cache-key: 0.80.5
+    metro-config: 0.80.5
+    metro-core: 0.80.5
+    metro-file-map: 0.80.5
+    metro-resolver: 0.80.5
+    metro-runtime: 0.80.5
+    metro-source-map: 0.80.5
+    metro-symbolicate: 0.80.5
+    metro-transform-plugins: 0.80.5
+    metro-transform-worker: 0.80.5
     mime-types: ^2.1.27
     node-fetch: ^2.2.0
     nullthrows: ^1.1.1
@@ -24306,7 +24197,7 @@ __metadata:
     yargs: ^17.6.2
   bin:
     metro: src/cli.js
-  checksum: cb73294f3fc315e81e6b050e679d2ac8f28a245d16634eb43ef6ff9eb71b52526ce93b1bd372a4e489eee9ba6568422bddbb9e97f2559bbfd30b11c8f5b96471
+  checksum: 6b10750ae3749c3fce6d4b7a00153d295e31a5038c990e5f01eec4443600f525d9d3baf2762614cb64bebd0fd269fbd8f58f268709927a4700a421415dc16339
   languageName: node
   linkType: hard
 
@@ -24330,334 +24221,332 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromark-core-commonmark@npm:^1.0.0, micromark-core-commonmark@npm:^1.0.1":
-  version: 1.0.6
-  resolution: "micromark-core-commonmark@npm:1.0.6"
+"micromark-core-commonmark@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-core-commonmark@npm:2.0.0"
   dependencies:
     decode-named-character-reference: ^1.0.0
-    micromark-factory-destination: ^1.0.0
-    micromark-factory-label: ^1.0.0
-    micromark-factory-space: ^1.0.0
-    micromark-factory-title: ^1.0.0
-    micromark-factory-whitespace: ^1.0.0
-    micromark-util-character: ^1.0.0
-    micromark-util-chunked: ^1.0.0
-    micromark-util-classify-character: ^1.0.0
-    micromark-util-html-tag-name: ^1.0.0
-    micromark-util-normalize-identifier: ^1.0.0
-    micromark-util-resolve-all: ^1.0.0
-    micromark-util-subtokenize: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.1
-    uvu: ^0.5.0
-  checksum: 4b483c46077f696ed310f6d709bb9547434c218ceb5c1220fde1707175f6f68b44da15ab8668f9c801e1a123210071e3af883a7d1215122c913fd626f122bfc2
-  languageName: node
-  linkType: hard
-
-"micromark-extension-gfm-autolink-literal@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "micromark-extension-gfm-autolink-literal@npm:1.0.3"
+    devlop: ^1.0.0
+    micromark-factory-destination: ^2.0.0
+    micromark-factory-label: ^2.0.0
+    micromark-factory-space: ^2.0.0
+    micromark-factory-title: ^2.0.0
+    micromark-factory-whitespace: ^2.0.0
+    micromark-util-character: ^2.0.0
+    micromark-util-chunked: ^2.0.0
+    micromark-util-classify-character: ^2.0.0
+    micromark-util-html-tag-name: ^2.0.0
+    micromark-util-normalize-identifier: ^2.0.0
+    micromark-util-resolve-all: ^2.0.0
+    micromark-util-subtokenize: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 9c12fb580cf4ce71f60872043bd2794efe129f44d7b2b73afa155bbc0a66b7bc35655ba8cef438a6bd068441837ed3b6dc6ad7e5a18f815462c1750793e03a42
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-autolink-literal@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-extension-gfm-autolink-literal@npm:2.0.0"
   dependencies:
-    micromark-util-character: ^1.0.0
-    micromark-util-sanitize-uri: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-    uvu: ^0.5.0
-  checksum: bb181972ac346ca73ca1ab0b80b80c9d6509ed149799d2217d5442670f499c38a94edff73d32fa52b390d89640974cfbd7f29e4ad7d599581d5e1cabcae636a2
+    micromark-util-character: ^2.0.0
+    micromark-util-sanitize-uri: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: fa16d59528239262d6d04d539a052baf1f81275954ec8bfadea40d81bfc25667d5c8e68b225a5358626df5e30a3933173a67fdad2fed011d37810a10b770b0b2
   languageName: node
   linkType: hard
 
-"micromark-extension-gfm-footnote@npm:^1.0.0":
-  version: 1.0.4
-  resolution: "micromark-extension-gfm-footnote@npm:1.0.4"
+"micromark-extension-gfm-footnote@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-extension-gfm-footnote@npm:2.0.0"
   dependencies:
-    micromark-core-commonmark: ^1.0.0
-    micromark-factory-space: ^1.0.0
-    micromark-util-character: ^1.0.0
-    micromark-util-normalize-identifier: ^1.0.0
-    micromark-util-sanitize-uri: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-    uvu: ^0.5.0
-  checksum: 8daa203f5cf753338d5ecdbaae6b3ab6319d34b6013b90ea6860bed299418cecf86e69e48dabe42562e334760c738c77c5acdb47e75ae26f5f01f02f3bf0952d
+    devlop: ^1.0.0
+    micromark-core-commonmark: ^2.0.0
+    micromark-factory-space: ^2.0.0
+    micromark-util-character: ^2.0.0
+    micromark-util-normalize-identifier: ^2.0.0
+    micromark-util-sanitize-uri: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: a426fddecfac6144fc622b845cd2dc09d46faa75be5b76ff022cb76a03301b1d4929a5e5e41e071491787936be65e03d0b03c7aebc0e0136b3cdbfadadd6632c
   languageName: node
   linkType: hard
 
-"micromark-extension-gfm-strikethrough@npm:^1.0.0":
-  version: 1.0.4
-  resolution: "micromark-extension-gfm-strikethrough@npm:1.0.4"
+"micromark-extension-gfm-strikethrough@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-extension-gfm-strikethrough@npm:2.0.0"
   dependencies:
-    micromark-util-chunked: ^1.0.0
-    micromark-util-classify-character: ^1.0.0
-    micromark-util-resolve-all: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-    uvu: ^0.5.0
-  checksum: f43d316b85fe93df1711cdcdc99a5320b941239349234bd262fc708cb67ad47bdfb41d1a7ebe2a5829816b0e9d3107380a5c1e558cb536a75354cbe4857823ba
+    devlop: ^1.0.0
+    micromark-util-chunked: ^2.0.0
+    micromark-util-classify-character: ^2.0.0
+    micromark-util-resolve-all: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 4e35fbbf364bfce08066b70acd94b9d393a8fd09a5afbe0bae70d0c8a174640b1ba86ab6b78ee38f411a813e2a718b07959216cf0063d823ba1c569a7694e5ad
   languageName: node
   linkType: hard
 
-"micromark-extension-gfm-table@npm:^1.0.0":
-  version: 1.0.5
-  resolution: "micromark-extension-gfm-table@npm:1.0.5"
+"micromark-extension-gfm-table@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-extension-gfm-table@npm:2.0.0"
   dependencies:
-    micromark-factory-space: ^1.0.0
-    micromark-util-character: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-    uvu: ^0.5.0
-  checksum: f0aab3b4333cc24b1534b08dc4cce986dd606df8b7ed913e5a1de9fe2d3ae67b2435663c0bc271b528874af4928e580e1ad540ea9117d7f2d74edb28859c97ef
+    devlop: ^1.0.0
+    micromark-factory-space: ^2.0.0
+    micromark-util-character: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 71484dcf8db7b189da0528f472cc81e4d6d1a64ae43bbe7fcb7e2e1dba758a0a4f785f9f1afb9459fe5b4a02bbe023d78c95c05204414a14083052eb8219e5eb
   languageName: node
   linkType: hard
 
-"micromark-extension-gfm-tagfilter@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "micromark-extension-gfm-tagfilter@npm:1.0.1"
+"micromark-extension-gfm-tagfilter@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-extension-gfm-tagfilter@npm:2.0.0"
   dependencies:
-    micromark-util-types: ^1.0.0
-  checksum: 63e8d68f25871722900a67a8001d5da21f19ea707f3566fc7d0b2eb1f6d52476848bb6a41576cf22470565124af9497c5aae842355faa4c14ec19cb1847e71ec
+    micromark-util-types: ^2.0.0
+  checksum: cf21552f4a63592bfd6c96ae5d64a5f22bda4e77814e3f0501bfe80e7a49378ad140f827007f36044666f176b3a0d5fea7c2e8e7973ce4b4579b77789f01ae95
   languageName: node
   linkType: hard
 
-"micromark-extension-gfm-task-list-item@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "micromark-extension-gfm-task-list-item@npm:1.0.3"
+"micromark-extension-gfm-task-list-item@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-extension-gfm-task-list-item@npm:2.0.1"
   dependencies:
-    micromark-factory-space: ^1.0.0
-    micromark-util-character: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-    uvu: ^0.5.0
-  checksum: d320b0c5301f87e211c06a2330d1ee0fee6da14f0d6d44d5211055b465dadff34390cd6b258a5e0ca376fcda3364fef9a12fe6e26a0c858231fa3b98ddbf7785
+    devlop: ^1.0.0
+    micromark-factory-space: ^2.0.0
+    micromark-util-character: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 80e569ab1a1d1f89d86af91482e9629e24b7e3f019c9d7989190f36a9367c6de723b2af48e908c1b73479f35b2215d3d38c1fdbf02ab01eb2fc90a59d1cf4465
   languageName: node
   linkType: hard
 
-"micromark-extension-gfm@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "micromark-extension-gfm@npm:2.0.1"
+"micromark-extension-gfm@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "micromark-extension-gfm@npm:3.0.0"
   dependencies:
-    micromark-extension-gfm-autolink-literal: ^1.0.0
-    micromark-extension-gfm-footnote: ^1.0.0
-    micromark-extension-gfm-strikethrough: ^1.0.0
-    micromark-extension-gfm-table: ^1.0.0
-    micromark-extension-gfm-tagfilter: ^1.0.0
-    micromark-extension-gfm-task-list-item: ^1.0.0
-    micromark-util-combine-extensions: ^1.0.0
-    micromark-util-types: ^1.0.0
-  checksum: b181479c87be38d5ae8d28e6dc52fab73c894fd2706876746f27a91fb186644ce03532a9c35dca2186327a0e2285cd5242ad0361dc89adedd4a50376ffd94e22
+    micromark-extension-gfm-autolink-literal: ^2.0.0
+    micromark-extension-gfm-footnote: ^2.0.0
+    micromark-extension-gfm-strikethrough: ^2.0.0
+    micromark-extension-gfm-table: ^2.0.0
+    micromark-extension-gfm-tagfilter: ^2.0.0
+    micromark-extension-gfm-task-list-item: ^2.0.0
+    micromark-util-combine-extensions: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 2060fa62666a09532d6b3a272d413bc1b25bbb262f921d7402795ac021e1362c8913727e33d7528d5b4ccaf26922ec51208c43f795a702964817bc986de886c9
   languageName: node
   linkType: hard
 
-"micromark-factory-destination@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "micromark-factory-destination@npm:1.0.0"
+"micromark-factory-destination@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-factory-destination@npm:2.0.0"
   dependencies:
-    micromark-util-character: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-  checksum: 8e733ae9c1c2342f14ff290bf09946e20f6f540117d80342377a765cac48df2ea5e748f33c8b07501ad7a43414b1a6597c8510ede2052b6bf1251fab89748e20
+    micromark-util-character: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: d36e65ed1c072ff4148b016783148ba7c68a078991154625723e24bda3945160268fb91079fb28618e1613c2b6e70390a8ddc544c45410288aa27b413593071a
   languageName: node
   linkType: hard
 
-"micromark-factory-label@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "micromark-factory-label@npm:1.0.2"
+"micromark-factory-label@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-factory-label@npm:2.0.0"
   dependencies:
-    micromark-util-character: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-    uvu: ^0.5.0
-  checksum: 957e9366bdc8dbc1437c0706ff96972fa985ab4b1274abcae12f6094f527cbf5c69e7f2304c23c7f4b96e311ff7911d226563b8b43dcfcd4091e8c985fb97ce6
+    devlop: ^1.0.0
+    micromark-util-character: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: c021dbd0ed367610d35f2bae21209bc804d1a6d1286ffce458fd6a717f4d7fe581a7cba7d5c2d7a63757c44eb927c80d6a571d6ea7969fae1b48ab6461d109c4
   languageName: node
   linkType: hard
 
-"micromark-factory-space@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "micromark-factory-space@npm:1.0.0"
+"micromark-factory-space@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-factory-space@npm:2.0.0"
   dependencies:
-    micromark-util-character: ^1.0.0
-    micromark-util-types: ^1.0.0
-  checksum: 70d3aafde4e68ef4e509a3b644e9a29e4aada00801279e346577b008cbca06d78051bcd62aa7ea7425856ed73f09abd2b36607803055f726f52607ee7cb706b0
+    micromark-util-character: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 4ffdcdc2f759887bbb356500cb460b3915ecddcb5d85c3618d7df68ad05d13ed02b1153ee1845677b7d8126df8f388288b84fcf0d943bd9c92bcc71cd7222e37
   languageName: node
   linkType: hard
 
-"micromark-factory-title@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "micromark-factory-title@npm:1.0.2"
+"micromark-factory-title@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-factory-title@npm:2.0.0"
   dependencies:
-    micromark-factory-space: ^1.0.0
-    micromark-util-character: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-    uvu: ^0.5.0
-  checksum: 9a9cf66babde0bad1e25d6c1087082bfde6dfc319a36cab67c89651cc1a53d0e21cdec83262b5a4c33bff49f0e3c8dc2a7bd464e991d40dbea166a8f9b37e5b2
+    micromark-factory-space: ^2.0.0
+    micromark-util-character: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 39e1ac23af3554e6e652e56065579bc7faf21ade7b8704b29c175871b4152b7109b790bb3cae0f7e088381139c6bac9553b8400772c3d322e4fa635f813a3578
   languageName: node
   linkType: hard
 
-"micromark-factory-whitespace@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "micromark-factory-whitespace@npm:1.0.0"
+"micromark-factory-whitespace@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-factory-whitespace@npm:2.0.0"
   dependencies:
-    micromark-factory-space: ^1.0.0
-    micromark-util-character: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-  checksum: 0888386e6ea2dd665a5182c570d9b3d0a172d3f11694ca5a2a84e552149c9f1429f5b975ec26e1f0fa4388c55a656c9f359ce5e0603aff6175ba3e255076f20b
+    micromark-factory-space: ^2.0.0
+    micromark-util-character: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 9587c2546d1a58b4d5472b42adf05463f6212d0449455285662d63cd8eaed89c6b159ac82713fcee5f9dd88628c24307d9533cccd8971a2f3f4d48702f8f850a
   languageName: node
   linkType: hard
 
-"micromark-util-character@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "micromark-util-character@npm:1.1.0"
+"micromark-util-character@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-character@npm:2.0.1"
   dependencies:
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-  checksum: 504a4e3321f69bddf3fec9f0c1058239fc23336bda5be31d532b150491eda47965a251b37f8a7a9db0c65933b3aaa49cf88044fb1028be3af7c5ee6212bf8d5f
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 318d6e16fdcbe9d89e18b8e7796568d986abbb10a9f3037b7ac9b92a236bcc962f3cd380e26a7c49df40fd1d9ca33eb546268956345b662f4c4ca4962c7695f2
   languageName: node
   linkType: hard
 
-"micromark-util-chunked@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "micromark-util-chunked@npm:1.0.0"
+"micromark-util-chunked@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-chunked@npm:2.0.0"
   dependencies:
-    micromark-util-symbol: ^1.0.0
-  checksum: c1efd56e8c4217bcf1c6f1a9fb9912b4a2a5503b00d031da902be922fb3fee60409ac53f11739991291357b2784fb0647ddfc74c94753a068646c0cb0fd71421
+    micromark-util-symbol: ^2.0.0
+  checksum: 324f95cccdae061332a8241936eaba6ef0782a1e355bac5c607ad2564fd3744929be7dc81651315a2921535747a33243e6a5606bcb64b7a56d49b6d74ea1a3d4
   languageName: node
   linkType: hard
 
-"micromark-util-classify-character@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "micromark-util-classify-character@npm:1.0.0"
+"micromark-util-classify-character@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-classify-character@npm:2.0.0"
   dependencies:
-    micromark-util-character: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-  checksum: 180446e6a1dec653f625ded028f244784e1db8d10ad05c5d70f08af9de393b4a03dc6cf6fa5ed8ccc9c24bbece7837abf3bf66681c0b4adf159364b7d5236dfd
+    micromark-util-character: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 086e52904deffebb793fb1c08c94aabb8901f76958142dfc3a6282890ebaa983b285e69bd602b9d507f1b758ed38e75a994d2ad9fbbefa7de2584f67a16af405
   languageName: node
   linkType: hard
 
-"micromark-util-combine-extensions@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "micromark-util-combine-extensions@npm:1.0.0"
+"micromark-util-combine-extensions@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-combine-extensions@npm:2.0.0"
   dependencies:
-    micromark-util-chunked: ^1.0.0
-    micromark-util-types: ^1.0.0
-  checksum: 5304a820ef75340e1be69d6ad167055b6ba9a3bafe8171e5945a935752f462415a9dd61eb3490220c055a8a11167209a45bfa73f278338b7d3d61fa1464d3f35
+    micromark-util-chunked: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 107c47700343f365b4ed81551e18bc3458b573c500e56ac052b2490bd548adc475216e41d2271633a8867fac66fc22ba3e0a2d74a31ed79b9870ca947eb4e3ba
   languageName: node
   linkType: hard
 
-"micromark-util-decode-numeric-character-reference@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "micromark-util-decode-numeric-character-reference@npm:1.0.0"
+"micromark-util-decode-numeric-character-reference@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-decode-numeric-character-reference@npm:2.0.1"
   dependencies:
-    micromark-util-symbol: ^1.0.0
-  checksum: f3ae2bb582a80f1e9d3face026f585c0c472335c064bd850bde152376f0394cb2831746749b6be6e0160f7d73626f67d10716026c04c87f402c0dd45a1a28633
+    micromark-util-symbol: ^2.0.0
+  checksum: 9512507722efd2033a9f08715eeef787fbfe27e23edf55db21423d46d82ab46f76c89b4f960be3f5e50a2d388d89658afc0647989cf256d051e9ea01277a1adb
   languageName: node
   linkType: hard
 
-"micromark-util-decode-string@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "micromark-util-decode-string@npm:1.0.2"
+"micromark-util-decode-string@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-decode-string@npm:2.0.0"
   dependencies:
     decode-named-character-reference: ^1.0.0
-    micromark-util-character: ^1.0.0
-    micromark-util-decode-numeric-character-reference: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-  checksum: 2dbb41c9691cc71505d39706405139fb7d6699429d577a524c7c248ac0cfd09d3dd212ad8e91c143a00b2896f26f81136edc67c5bda32d20446f0834d261b17a
+    micromark-util-character: ^2.0.0
+    micromark-util-decode-numeric-character-reference: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+  checksum: a75daf32a4a6b549e9f19b4d833ebfeb09a32a9a1f9ce50f35dec6b6a3e4f9f121f49024ba7f9c91c55ebe792f7c7a332fc9604795181b6a612637df0df5b959
   languageName: node
   linkType: hard
 
-"micromark-util-encode@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "micromark-util-encode@npm:1.0.1"
-  checksum: 9290583abfdc79ea3e7eb92c012c47a0e14327888f8aaa6f57ff79b3058d8e7743716b9d91abca3646f15ab3d78fdad9779fdb4ccf13349cd53309dfc845253a
+"micromark-util-encode@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-encode@npm:2.0.0"
+  checksum: 853a3f33fce72aaf4ffa60b7f2b6fcfca40b270b3466e1b96561b02185d2bd8c01dd7948bc31a24ac014f4cc854e545ca9a8e9cf7ea46262f9d24c9e88551c66
   languageName: node
   linkType: hard
 
-"micromark-util-html-tag-name@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "micromark-util-html-tag-name@npm:1.1.0"
-  checksum: a9b783cec89ec813648d59799464c1950fe281ae797b2a965f98ad0167d7fa1a247718eff023b4c015f47211a172f9446b8e6b98aad50e3cd44a3337317dad2c
+"micromark-util-html-tag-name@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-html-tag-name@npm:2.0.0"
+  checksum: d786d4486f93eb0ac5b628779809ca97c5dc60f3c9fc03eb565809831db181cf8cb7f05f9ac76852f3eb35461af0f89fa407b46f3a03f4f97a96754d8dc540d8
   languageName: node
   linkType: hard
 
-"micromark-util-normalize-identifier@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "micromark-util-normalize-identifier@npm:1.0.0"
+"micromark-util-normalize-identifier@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-normalize-identifier@npm:2.0.0"
   dependencies:
-    micromark-util-symbol: ^1.0.0
-  checksum: d7c09d5e8318fb72f194af72664bd84a48a2928e3550b2b21c8fbc0ec22524f2a72e0f6663d2b95dc189a6957d3d7759b60716e888909710767cd557be821f8b
+    micromark-util-symbol: ^2.0.0
+  checksum: b36da2d3fd102053dadd953ce5c558328df12a63a8ac0e5aad13d4dda8e43b6a5d4a661baafe0a1cd8a260bead4b4a8e6e0e74193dd651e8484225bd4f4e68aa
   languageName: node
   linkType: hard
 
-"micromark-util-resolve-all@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "micromark-util-resolve-all@npm:1.0.0"
+"micromark-util-resolve-all@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-resolve-all@npm:2.0.0"
   dependencies:
-    micromark-util-types: ^1.0.0
-  checksum: 409667f2bd126ef8acce009270d2aecaaa5584c5807672bc657b09e50aa91bd2e552cf41e5be1e6469244a83349cbb71daf6059b746b1c44e3f35446fef63e50
+    micromark-util-types: ^2.0.0
+  checksum: 31fe703b85572cb3f598ebe32750e59516925c7ff1f66cfe6afaebe0771a395a9eaa770787f2523d3c46082ea80e6c14f83643303740b3d650af7c96ebd30ccc
   languageName: node
   linkType: hard
 
-"micromark-util-sanitize-uri@npm:^1.0.0, micromark-util-sanitize-uri@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "micromark-util-sanitize-uri@npm:1.1.0"
+"micromark-util-sanitize-uri@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-sanitize-uri@npm:2.0.0"
   dependencies:
-    micromark-util-character: ^1.0.0
-    micromark-util-encode: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-  checksum: fe6093faa0adeb8fad606184d927ce37f207dcc2ec7256438e7f273c8829686245dd6161b597913ef25a3c4fb61863d3612a40cb04cf15f83ba1b4087099996b
+    micromark-util-character: ^2.0.0
+    micromark-util-encode: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+  checksum: ea4c28bbffcf2430e9aff2d18554296789a8b0a1f54ac24020d1dde76624a7f93e8f2a83e88cd5a846b6d2c4287b71b1142d1b89fa7f1b0363a9b33711a141fe
   languageName: node
   linkType: hard
 
-"micromark-util-subtokenize@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "micromark-util-subtokenize@npm:1.0.2"
+"micromark-util-subtokenize@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-subtokenize@npm:2.0.0"
   dependencies:
-    micromark-util-chunked: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.0
-    uvu: ^0.5.0
-  checksum: c32ee58a7e1384ab1161a9ee02fbb04ad7b6e96d0b8c93dba9803c329a53d07f22ab394c7a96b2e30d6b8fbe3585b85817dba07277b1317111fc234e166bd2d1
+    devlop: ^1.0.0
+    micromark-util-chunked: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: 77d9c7d59c05a20468d49ce2a3640e9cb268c083ccad02322f26c84e1094c25b44f4b8139ef0a247ca11a4fef7620c5bf82fbffd98acdb2989e79cbe7bd8f1db
   languageName: node
   linkType: hard
 
-"micromark-util-symbol@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "micromark-util-symbol@npm:1.0.1"
-  checksum: c6a3023b3a7432c15864b5e33a1bcb5042ac7aa097f2f452e587bef45433d42d39e0a5cce12fbea91e0671098ba0c3f62a2b30ce1cde66ecbb5e8336acf4391d
+"micromark-util-symbol@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-symbol@npm:2.0.0"
+  checksum: fa4a05bff575d9fbf0ad96a1013003e3bb6087ed6b34b609a141b6c0d2137b57df594aca409a95f4c5fda199f227b56a7d8b1f82cea0768df161d8a3a3660764
   languageName: node
   linkType: hard
 
-"micromark-util-types@npm:^1.0.0, micromark-util-types@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "micromark-util-types@npm:1.0.2"
-  checksum: 08dc901b7c06ee3dfeb54befca05cbdab9525c1cf1c1080967c3878c9e72cb9856c7e8ff6112816e18ead36ce6f99d55aaa91560768f2f6417b415dcba1244df
+"micromark-util-types@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-types@npm:2.0.0"
+  checksum: 819fef3ab5770c37893d2a60381fb2694396c8d22803b6e103c830c3a1bc1490363c2b0470bb2acaaddad776dfbc2fc1fcfde39cb63c4f54d95121611672e3d0
   languageName: node
   linkType: hard
 
-"micromark@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "micromark@npm:3.1.0"
+"micromark@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "micromark@npm:4.0.0"
   dependencies:
     "@types/debug": ^4.0.0
     debug: ^4.0.0
     decode-named-character-reference: ^1.0.0
-    micromark-core-commonmark: ^1.0.1
-    micromark-factory-space: ^1.0.0
-    micromark-util-character: ^1.0.0
-    micromark-util-chunked: ^1.0.0
-    micromark-util-combine-extensions: ^1.0.0
-    micromark-util-decode-numeric-character-reference: ^1.0.0
-    micromark-util-encode: ^1.0.0
-    micromark-util-normalize-identifier: ^1.0.0
-    micromark-util-resolve-all: ^1.0.0
-    micromark-util-sanitize-uri: ^1.0.0
-    micromark-util-subtokenize: ^1.0.0
-    micromark-util-symbol: ^1.0.0
-    micromark-util-types: ^1.0.1
-    uvu: ^0.5.0
-  checksum: 5fe5bc3bf92e2ddd37b5f0034080fc3a4d4b3c1130dd5e435bb96ec75e9453091272852e71a4d74906a8fcf992d6f79d794607657c534bda49941e9950a92e28
+    devlop: ^1.0.0
+    micromark-core-commonmark: ^2.0.0
+    micromark-factory-space: ^2.0.0
+    micromark-util-character: ^2.0.0
+    micromark-util-chunked: ^2.0.0
+    micromark-util-combine-extensions: ^2.0.0
+    micromark-util-decode-numeric-character-reference: ^2.0.0
+    micromark-util-encode: ^2.0.0
+    micromark-util-normalize-identifier: ^2.0.0
+    micromark-util-resolve-all: ^2.0.0
+    micromark-util-sanitize-uri: ^2.0.0
+    micromark-util-subtokenize: ^2.0.0
+    micromark-util-symbol: ^2.0.0
+    micromark-util-types: ^2.0.0
+  checksum: b84ab5ab1a0b28c063c52e9c2c9d7d44b954507235c10c9492d66e0b38f7de24bf298f914a1fbdf109f2a57a88cf0412de217c84cfac5fd60e3e42a74dbac085
   languageName: node
   linkType: hard
 
@@ -25091,7 +24980,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mri@npm:1.2.0, mri@npm:^1.1.0":
+"mri@npm:1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
   checksum: 83f515abbcff60150873e424894a2f65d68037e5a7fcde8a9e2b285ee9c13ac581b63cfc1e6826c4732de3aeb84902f7c1e16b7aff46cd3f897a0f757a894e85
@@ -25196,12 +25085,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "nanoid@npm:5.0.2"
+"nanoid@npm:^5.0.4":
+  version: 5.0.4
+  resolution: "nanoid@npm:5.0.4"
   bin:
     nanoid: bin/nanoid.js
-  checksum: fa6908c2c6a7a9e91e02b98cb0b9b829454d390a63f83c1798f0c504d07b536d99cad3e975e5014b176534e67e234ff66bccd4610bf3ffb2cf0d6d932a73f3a8
+  checksum: cf09cca3774f3147100948f7478f75f4c9ee97a4af65c328dd9abbd83b12f8bb35cf9f89a21c330f3b759d667a4cd0140ed84aa5fdd522c61e0d341aeaa7fb6f
   languageName: node
   linkType: hard
 
@@ -25307,26 +25196,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:^14.0.2":
-  version: 14.0.2
-  resolution: "next@npm:14.0.2"
-  dependencies:
-    "@next/env": 14.0.2
-    "@next/swc-darwin-arm64": 14.0.2
-    "@next/swc-darwin-x64": 14.0.2
-    "@next/swc-linux-arm64-gnu": 14.0.2
-    "@next/swc-linux-arm64-musl": 14.0.2
-    "@next/swc-linux-x64-gnu": 14.0.2
-    "@next/swc-linux-x64-musl": 14.0.2
-    "@next/swc-win32-arm64-msvc": 14.0.2
-    "@next/swc-win32-ia32-msvc": 14.0.2
-    "@next/swc-win32-x64-msvc": 14.0.2
+"next@npm:^14.1.0":
+  version: 14.1.0
+  resolution: "next@npm:14.1.0"
+  dependencies:
+    "@next/env": 14.1.0
+    "@next/swc-darwin-arm64": 14.1.0
+    "@next/swc-darwin-x64": 14.1.0
+    "@next/swc-linux-arm64-gnu": 14.1.0
+    "@next/swc-linux-arm64-musl": 14.1.0
+    "@next/swc-linux-x64-gnu": 14.1.0
+    "@next/swc-linux-x64-musl": 14.1.0
+    "@next/swc-win32-arm64-msvc": 14.1.0
+    "@next/swc-win32-ia32-msvc": 14.1.0
+    "@next/swc-win32-x64-msvc": 14.1.0
     "@swc/helpers": 0.5.2
     busboy: 1.6.0
-    caniuse-lite: ^1.0.30001406
+    caniuse-lite: ^1.0.30001579
+    graceful-fs: ^4.2.11
     postcss: 8.4.31
     styled-jsx: 5.1.1
-    watchpack: 2.4.0
   peerDependencies:
     "@opentelemetry/api": ^1.1.0
     react: ^18.2.0
@@ -25358,7 +25247,7 @@ __metadata:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: b133fcd8035191dd7469bcb8c0b0c6325dac890020298d2ac4dce1dfb388ede0824532a5aaff778c6871c015de89adca25108ffb35634f3f38397279bad43175
+  checksum: 077fd76a6fe7127a8be3d11035dcefb2c829f304aaa85144e0d1b531a1549b6c9bb99459af1ef0782c1f1110ca08f6f33efd293a2dc51672dd9dc45ede608ecf
   languageName: node
   linkType: hard
 
@@ -25801,10 +25690,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ob1@npm:0.80.4":
-  version: 0.80.4
-  resolution: "ob1@npm:0.80.4"
-  checksum: 2b089440537f1babae86edf51f0990fa91e0410ab1a27f1baea9b0a362d14216935ad6f66afb2e532b57fd4972870d86473d38c0576b52d98adc893e456b872f
+"ob1@npm:0.80.5":
+  version: 0.80.5
+  resolution: "ob1@npm:0.80.5"
+  checksum: 3c4232b6d92d0ee92e2278f79c8adde8572405d644674c4280ad37dcc765eca57d8a57b5c9bb5c58dad7508de1eb406cdad58e6e04205a413d4dd4f092a152e0
   languageName: node
   linkType: hard
 
@@ -26409,6 +26298,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-entities@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "parse-entities@npm:4.0.1"
+  dependencies:
+    "@types/unist": ^2.0.0
+    character-entities: ^2.0.0
+    character-entities-legacy: ^3.0.0
+    character-reference-invalid: ^2.0.0
+    decode-named-character-reference: ^1.0.0
+    is-alphanumerical: ^2.0.0
+    is-decimal: ^2.0.0
+    is-hexadecimal: ^2.0.0
+  checksum: 32a6ff5b9acb9d2c4d71537308521fd265e685b9215691df73feedd9edfe041bb6da9f89bd0c35c4a2bc7d58e3e76e399bb6078c2fd7d2a343ff1dd46edbf1bd
+  languageName: node
+  linkType: hard
+
 "parse-json@npm:^2.2.0":
   version: 2.2.0
   resolution: "parse-json@npm:2.2.0"
@@ -27040,7 +26945,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:8.4.31, postcss@npm:^8.0.9, postcss@npm:^8.4.27, postcss@npm:^8.4.31":
+"postcss@npm:8.4.31, postcss@npm:^8.0.9, postcss@npm:^8.4.27, postcss@npm:^8.4.31, postcss@npm:~8.4.21":
   version: 8.4.31
   resolution: "postcss@npm:8.4.31"
   dependencies:
@@ -27310,7 +27215,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -27649,6 +27554,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-chartjs-2@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "react-chartjs-2@npm:5.2.0"
+  peerDependencies:
+    chart.js: ^4.1.1
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: ace702185be1450e5888a8bcd8b5fc1995067e3b11d236764a67f5567a3d7c32ff16923b8d48d3d39bda6e45135da6c044c9b43fbe8e1978f95aca9d2c0ce348
+  languageName: node
+  linkType: hard
+
 "react-devtools-core@npm:^4.26.1, react-devtools-core@npm:^4.27.7":
   version: 4.28.5
   resolution: "react-devtools-core@npm:4.28.5"
@@ -27864,13 +27779,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-lifecycles-compat@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "react-lifecycles-compat@npm:3.0.4"
-  checksum: a904b0fc0a8eeb15a148c9feb7bc17cec7ef96e71188280061fc340043fd6d8ee3ff233381f0e8f95c1cf926210b2c4a31f38182c8f35ac55057e453d6df204f
-  languageName: node
-  linkType: hard
-
 "react-markdown@npm:^5.0.3":
   version: 5.0.3
   resolution: "react-markdown@npm:5.0.3"
@@ -27892,29 +27800,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-markdown@npm:^8.0.7":
-  version: 8.0.7
-  resolution: "react-markdown@npm:8.0.7"
+"react-markdown@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "react-markdown@npm:9.0.1"
   dependencies:
-    "@types/hast": ^2.0.0
-    "@types/prop-types": ^15.0.0
-    "@types/unist": ^2.0.0
-    comma-separated-tokens: ^2.0.0
-    hast-util-whitespace: ^2.0.0
-    prop-types: ^15.0.0
-    property-information: ^6.0.0
-    react-is: ^18.0.0
-    remark-parse: ^10.0.0
-    remark-rehype: ^10.0.0
-    space-separated-tokens: ^2.0.0
-    style-to-object: ^0.4.0
-    unified: ^10.0.0
-    unist-util-visit: ^4.0.0
-    vfile: ^5.0.0
+    "@types/hast": ^3.0.0
+    devlop: ^1.0.0
+    hast-util-to-jsx-runtime: ^2.0.0
+    html-url-attributes: ^3.0.0
+    mdast-util-to-hast: ^13.0.0
+    remark-parse: ^11.0.0
+    remark-rehype: ^11.0.0
+    unified: ^11.0.0
+    unist-util-visit: ^5.0.0
+    vfile: ^6.0.0
   peerDependencies:
-    "@types/react": ">=16"
-    react: ">=16"
-  checksum: 0f3e570975134a3382c3fe5189e04e742ae154941463bdfaab2293319da1f1585cb9b75b6f07d99f514c4d728d69cc1af3c96ab37df90003b3bcc210dd0001ba
+    "@types/react": ">=18"
+    react: ">=18"
+  checksum: ca1daa650d48b84a5a9771683cdb3f3d2d418247ce0faf73ede3207c65f2a21cdebb9df37afda67f6fc8f0f0a7b9ce00eb239781954a4d6c7ad88ea4df068add
   languageName: node
   linkType: hard
 
@@ -28180,8 +28083,8 @@ __metadata:
   linkType: hard
 
 "react-native-reanimated@npm:~3.6.0":
-  version: 3.6.1
-  resolution: "react-native-reanimated@npm:3.6.1"
+  version: 3.6.2
+  resolution: "react-native-reanimated@npm:3.6.2"
   dependencies:
     "@babel/plugin-transform-object-assign": ^7.16.7
     "@babel/preset-typescript": ^7.16.7
@@ -28196,7 +28099,7 @@ __metadata:
     "@babel/plugin-transform-template-literals": ^7.0.0-0
     react: "*"
     react-native: "*"
-  checksum: 245e542de7496081c4c64fe219a6d33a4d7195502fd6e9c12374c04acb1318bdeb0c50889def5e213e3fe3cd0f6316b113a6b1c382715f1b6cf8a6a29f0cf4ab
+  checksum: 0a5030ec7d66603bdb1777fb9a37f6621c7c329b47101596d882d0dd526fe1ed34f4088635aacb9d44988bdbc6fe5b792145fc44eafaceb080b7a8c7ddd69eff
   languageName: node
   linkType: hard
 
@@ -28909,15 +28812,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-gfm@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "remark-gfm@npm:3.0.1"
+"remark-gfm@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "remark-gfm@npm:4.0.0"
   dependencies:
-    "@types/mdast": ^3.0.0
-    mdast-util-gfm: ^2.0.0
-    micromark-extension-gfm: ^2.0.0
-    unified: ^10.0.0
-  checksum: 02254f74d67b3419c2c9cf62d799ec35f6c6cd74db25c001361751991552a7ce86049a972107bff8122d85d15ae4a8d1a0618f3bc01a7df837af021ae9b2a04e
+    "@types/mdast": ^4.0.0
+    mdast-util-gfm: ^3.0.0
+    micromark-extension-gfm: ^3.0.0
+    remark-parse: ^11.0.0
+    remark-stringify: ^11.0.0
+    unified: ^11.0.0
+  checksum: 84bea84e388061fbbb697b4b666089f5c328aa04d19dc544c229b607446bc10902e46b67b9594415a1017bbbd7c811c1f0c30d36682c6d1a6718b66a1558261b
   languageName: node
   linkType: hard
 
@@ -28961,14 +28866,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-parse@npm:^10.0.0":
-  version: 10.0.1
-  resolution: "remark-parse@npm:10.0.1"
+"remark-parse@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "remark-parse@npm:11.0.0"
   dependencies:
-    "@types/mdast": ^3.0.0
-    mdast-util-from-markdown: ^1.0.0
-    unified: ^10.0.0
-  checksum: 505088e564ab53ff054433368adbb7b551f69240c7d9768975529837a86f1d0f085e72d6211929c5c42db315273df4afc94f3d3a8662ffdb69468534c6643d29
+    "@types/mdast": ^4.0.0
+    mdast-util-from-markdown: ^2.0.0
+    micromark-util-types: ^2.0.0
+    unified: ^11.0.0
+  checksum: d83d245290fa84bb04fb3e78111f09c74f7417e7c012a64dd8dc04fccc3699036d828fbd8eeec8944f774b6c30cc1d925c98f8c46495ebcee7c595496342ab7f
   languageName: node
   linkType: hard
 
@@ -28981,15 +28887,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-rehype@npm:^10.0.0":
-  version: 10.1.0
-  resolution: "remark-rehype@npm:10.1.0"
+"remark-rehype@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "remark-rehype@npm:11.0.0"
   dependencies:
-    "@types/hast": ^2.0.0
-    "@types/mdast": ^3.0.0
-    mdast-util-to-hast: ^12.1.0
-    unified: ^10.0.0
-  checksum: b9ac8acff3383b204dfdc2599d0bdf86e6ca7e837033209584af2e6aaa6a9013e519a379afa3201299798cab7298c8f4b388de118c312c67234c133318aec084
+    "@types/hast": ^3.0.0
+    "@types/mdast": ^4.0.0
+    mdast-util-to-hast: ^13.0.0
+    unified: ^11.0.0
+    vfile: ^6.0.0
+  checksum: 0ff0fd948759cbde9d507ca1581028d0b89da0b5f610b35a6cb0a511f8d11621449b6eca573b11ddaea77afd37edd4755f3f1eb086ad49a6f7b970b4a4634e13
   languageName: node
   linkType: hard
 
@@ -29013,6 +28920,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-stringify@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "remark-stringify@npm:11.0.0"
+  dependencies:
+    "@types/mdast": ^4.0.0
+    mdast-util-to-markdown: ^2.0.0
+    unified: ^11.0.0
+  checksum: 59e07460eb629d6c3b3c0f438b0b236e7e6858fd5ab770303078f5a556ec00354d9c7fb9ef6d5f745a4617ac7da1ab618b170fbb4dac120e183fecd9cc86bce6
+  languageName: node
+  linkType: hard
+
 "remove-trailing-separator@npm:^1.0.1":
   version: 1.1.0
   resolution: "remove-trailing-separator@npm:1.1.0"
@@ -29171,20 +29089,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.3.2":
-  version: 1.22.4
-  resolution: "resolve@npm:1.22.4"
-  dependencies:
-    is-core-module: ^2.13.0
-    path-parse: ^1.0.7
-    supports-preserve-symlinks-flag: ^1.0.0
-  bin:
-    resolve: bin/resolve
-  checksum: 23f25174c2736ce24c6d918910e0d1f89b6b38fefa07a995dff864acd7863d59a7f049e691f93b4b2ee29696303390d921552b6d1b841ed4a8101f517e1d0124
-  languageName: node
-  linkType: hard
-
-"resolve@npm:^1.22.2":
+"resolve@npm:1.22.8, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.22.2, resolve@npm:^1.3.2":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -29219,20 +29124,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>":
-  version: 1.22.4
-  resolution: "resolve@patch:resolve@npm%3A1.22.4#~builtin<compat/resolve>::version=1.22.4&hash=c3c19d"
-  dependencies:
-    is-core-module: ^2.13.0
-    path-parse: ^1.0.7
-    supports-preserve-symlinks-flag: ^1.0.0
-  bin:
-    resolve: bin/resolve
-  checksum: c45f2545fdc4d21883861b032789e20aa67a2f2692f68da320cc84d5724cd02f2923766c5354b3210897e88f1a7b3d6d2c7c22faeead8eed7078e4c783a444bc
-  languageName: node
-  linkType: hard
-
-"resolve@patch:resolve@^1.22.2#~builtin<compat/resolve>":
+"resolve@patch:resolve@1.22.8#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#~builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -29476,15 +29368,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sade@npm:^1.7.3":
-  version: 1.8.1
-  resolution: "sade@npm:1.8.1"
-  dependencies:
-    mri: ^1.1.0
-  checksum: 0756e5b04c51ccdc8221ebffd1548d0ce5a783a44a0fa9017a026659b97d632913e78f7dca59f2496aa996a0be0b0c322afd87ca72ccd909406f49dbffa0f45d
-  languageName: node
-  linkType: hard
-
 "safe-array-concat@npm:^1.0.1":
   version: 1.0.1
   resolution: "safe-array-concat@npm:1.0.1"
@@ -29571,16 +29454,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.69.3":
-  version: 1.69.3
-  resolution: "sass@npm:1.69.3"
+"sass@npm:^1.69.5":
+  version: 1.69.5
+  resolution: "sass@npm:1.69.5"
   dependencies:
     chokidar: ">=3.0.0 <4.0.0"
     immutable: ^4.0.0
     source-map-js: ">=0.6.2 <2.0.0"
   bin:
     sass: sass.js
-  checksum: b89a3370c7ede462b344e2136bf1407bf375855c1ec54f73b6257b18fe59dae5377eb9f7b25f21ae4a25d8f0bc41a165d8d7e5f693d8285b1aa51ac6056c4d19
+  checksum: c66f4f02882e7aa7aa49703824dadbb5a174dcd05e3cd96f17f73687889aab6027d078b518e2c04b594dfd89b2f574824bf935c7aee46c770aa6be9aafcc49f2
   languageName: node
   linkType: hard
 
@@ -30578,19 +30461,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stream-chat-react@npm:^10.14.0":
-  version: 10.14.0
-  resolution: "stream-chat-react@npm:10.14.0"
+"stream-chat-react@npm:^11.2.1":
+  version: 11.2.1
+  resolution: "stream-chat-react@npm:11.2.1"
   dependencies:
+    "@babel/runtime": ^7.23.6
     "@braintree/sanitize-url": ^6.0.4
     "@popperjs/core": ^2.11.5
-    "@stream-io/stream-chat-css": ^3.13.0
     "@stream-io/transliterate": ^1.5.5
     clsx: ^2.0.0
     dayjs: ^1.10.4
-    emoji-mart: 3.0.1
     emoji-regex: ^9.2.0
-    hast-util-find-and-replace: ^4.1.2
+    hast-util-find-and-replace: ^5.0.1
     i18next: ^21.6.14
     isomorphic-ws: ^4.0.1
     linkifyjs: ^4.1.0
@@ -30605,17 +30487,20 @@ __metadata:
     react-fast-compare: ^3.2.2
     react-image-gallery: 1.2.12
     react-is: ^18.1.0
-    react-markdown: ^8.0.7
+    react-markdown: ^9.0.0
     react-player: 2.10.1
     react-popper: ^2.3.0
     react-textarea-autosize: ^8.3.0
     react-virtuoso: ^2.16.5
-    remark-gfm: ^3.0.1
+    remark-gfm: ^4.0.0
     textarea-caret: ^3.1.0
     tslib: ^2.6.2
     unist-builder: ^3.0.0
-    unist-util-visit: ^4.1.1
+    unist-util-visit: ^5.0.0
   peerDependencies:
+    "@emoji-mart/data": ^1.1.0
+    "@emoji-mart/react": ^1.1.0
+    emoji-mart: ^5.4.0
     react: ^18.0.0 || ^17.0.0 || ^16.8.0
     react-dom: ^18.0.0 || ^17.0.0 || ^16.8.0
     stream-chat: ^8.0.0
@@ -30624,7 +30509,14 @@ __metadata:
       optional: true
     mml-react:
       optional: true
-  checksum: 028f879cec3c98c535e6f8a4507f3cbc98511bb5862e53f9c6033281c96b0a108458382422be55610a5749f369fea83e90e2de7cb999e481542cfd548f6422dd
+  peerDependenciesMeta:
+    "@emoji-mart/data":
+      optional: true
+    "@emoji-mart/react":
+      optional: true
+    emoji-mart:
+      optional: true
+  checksum: 724fd803f9a1d2c9ee9dea86bc30ce519027009bf8fd09be5ed823408172d563b499a39ea250a60dcee24d92573b4b52d3d37b28357bd230d259b3afaf6ceeb1
   languageName: node
   linkType: hard
 
@@ -30645,20 +30537,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stream-chat@npm:^8.13.0":
-  version: 8.13.0
-  resolution: "stream-chat@npm:8.13.0"
+"stream-chat@npm:^8.14.4":
+  version: 8.14.4
+  resolution: "stream-chat@npm:8.14.4"
   dependencies:
     "@babel/runtime": ^7.16.3
     "@types/jsonwebtoken": ~9.0.0
     "@types/ws": ^7.4.0
-    axios: ^0.22.0
+    axios: ^1.6.0
     base64-js: ^1.5.1
     form-data: ^4.0.0
     isomorphic-ws: ^4.0.1
     jsonwebtoken: ~9.0.0
     ws: ^7.4.4
-  checksum: ad6fbba0f085c16c6dd8ff684df780d9a3f8e2f5c72dfce2e3296731339ea850a689d36be3a149fd3c544b0a5c439cfee78749a4e8c8a33d469246b1686a8d7b
+  checksum: b2c2cc23a26adeeb4c51e836ff029b2ffc63a540baee8a3fddee2aeb68190ff976649ac7c5341bf2a7b04b5984789920f2f35acfb81110ac3a3ee977b5837a1d
   languageName: node
   linkType: hard
 
@@ -30868,6 +30760,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stringify-entities@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "stringify-entities@npm:4.0.3"
+  dependencies:
+    character-entities-html4: ^2.0.0
+    character-entities-legacy: ^3.0.0
+  checksum: 59e8f523b403bf7d415690e72ae52982decd6ea5426bd8b3f5c66225ddde73e766c0c0d91627df082d0794e30b19dd907ffb5864cef3602e4098d6777d7ca3c2
+  languageName: node
+  linkType: hard
+
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
@@ -31032,12 +30934,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-to-object@npm:^0.4.0":
-  version: 0.4.1
-  resolution: "style-to-object@npm:0.4.1"
+"style-to-object@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "style-to-object@npm:1.0.5"
   dependencies:
-    inline-style-parser: 0.1.1
-  checksum: 2ea213e98eed21764ae1d1dc9359231a9f2d480d6ba55344c4c15eb275f0809f1845786e66d4caf62414a5cc8f112ce9425a58d251c77224060373e0db48f8c2
+    inline-style-parser: 0.2.2
+  checksum: 6201063204b6a94645f81b189452b2ca3e63d61867ec48523f4d52609c81e96176739fa12020d97fbbf023efb57a6f7ec3a15fb3a7fb7eb3ffea0b52b9dd6b8c
   languageName: node
   linkType: hard
 
@@ -31543,6 +31445,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"third-party-capital@npm:1.0.20":
+  version: 1.0.20
+  resolution: "third-party-capital@npm:1.0.20"
+  checksum: ef5eae00bdb82b538b9f628a011fc294cd6f4bafdbb46d88f3d1a72e8c3b9e2cc2a547fdb62bc16bdd847e9da3dac2df676b154c64914f6c90ea15aac6ce0a6a
+  languageName: node
+  linkType: hard
+
 "throat@npm:^5.0.0":
   version: 5.0.0
   resolution: "throat@npm:5.0.0"
@@ -31961,7 +31870,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1 || ^1.9.3, tslib@npm:^2.6.2":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
@@ -32298,12 +32207,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici@npm:5.23.0":
-  version: 5.23.0
-  resolution: "undici@npm:5.23.0"
+"undici@npm:5.26.5":
+  version: 5.26.5
+  resolution: "undici@npm:5.26.5"
   dependencies:
-    busboy: ^1.6.0
-  checksum: 906ca4fb1d47163d2cee2ecbbc664a1d92508a2cdf1558146621109f525c983a83597910b36e6ba468240e95259be5939cea6babc99fc0c36360b16630f66784
+    "@fastify/busboy": ^2.0.0
+  checksum: 79c95df5f22959ed578e90d853b31a741ac748fc3bf9a4af6af52de1d671a057eaaf7dcad6e1d261597a114bd56c7351cff7ce848befd9deb62ccec55cf92ac1
   languageName: node
   linkType: hard
 
@@ -32369,18 +32278,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unified@npm:^10.0.0":
-  version: 10.1.2
-  resolution: "unified@npm:10.1.2"
+"unified@npm:^11.0.0":
+  version: 11.0.4
+  resolution: "unified@npm:11.0.4"
   dependencies:
-    "@types/unist": ^2.0.0
+    "@types/unist": ^3.0.0
     bail: ^2.0.0
+    devlop: ^1.0.0
     extend: ^3.0.0
-    is-buffer: ^2.0.0
     is-plain-obj: ^4.0.0
     trough: ^2.0.0
-    vfile: ^5.0.0
-  checksum: 053e7c65ede644607f87bd625a299e4b709869d2f76ec8138569e6e886903b6988b21cd9699e471eda42bee189527be0a9dac05936f1d069a5e65d0125d5d756
+    vfile: ^6.0.0
+  checksum: cfb023913480ac2bd5e787ffb8c27782c43e6be4a55f8f1c288233fce46a7ebe7718ccc5adb80bf8d56b7ef85f5fc32239c7bfccda006f9f2382e0cc2e2a77e4
   languageName: node
   linkType: hard
 
@@ -32524,13 +32433,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-generated@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "unist-util-generated@npm:2.0.1"
-  checksum: 6221ad0571dcc9c8964d6b054f39ef6571ed59cc0ce3e88ae97ea1c70afe76b46412a5ffaa91f96814644ac8477e23fb1b477d71f8d70e625728c5258f5c0d99
-  languageName: node
-  linkType: hard
-
 "unist-util-is@npm:^4.0.0":
   version: 4.1.0
   resolution: "unist-util-is@npm:4.1.0"
@@ -32538,12 +32440,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-is@npm:^5.0.0":
-  version: 5.2.1
-  resolution: "unist-util-is@npm:5.2.1"
+"unist-util-is@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "unist-util-is@npm:6.0.0"
   dependencies:
-    "@types/unist": ^2.0.0
-  checksum: ae76fdc3d35352cd92f1bedc3a0d407c3b9c42599a52ab9141fe89bdd786b51f0ec5a2ab68b93fb532e239457cae62f7e39eaa80229e1cb94875da2eafcbe5c4
+    "@types/unist": ^3.0.0
+  checksum: f630a925126594af9993b091cf807b86811371e465b5049a6283e08537d3e6ba0f7e248e1e7dab52cfe33f9002606acef093441137181b327f6fe504884b20e2
   languageName: node
   linkType: hard
 
@@ -32554,12 +32456,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-position@npm:^4.0.0":
-  version: 4.0.4
-  resolution: "unist-util-position@npm:4.0.4"
+"unist-util-position@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-position@npm:5.0.0"
   dependencies:
-    "@types/unist": ^2.0.0
-  checksum: e7487b6cec9365299695e3379ded270a1717074fa11fd2407c9b934fb08db6fe1d9077ddeaf877ecf1813665f8ccded5171693d3d9a7a01a125ec5cdd5e88691
+    "@types/unist": ^3.0.0
+  checksum: f89b27989b19f07878de9579cd8db2aa0194c8360db69e2c99bd2124a480d79c08f04b73a64daf01a8fb3af7cba65ff4b45a0b978ca243226084ad5f5d441dde
   languageName: node
   linkType: hard
 
@@ -32572,6 +32474,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-remove-position@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-remove-position@npm:5.0.0"
+  dependencies:
+    "@types/unist": ^3.0.0
+    unist-util-visit: ^5.0.0
+  checksum: 8aabdb9d0e3e744141bc123d8f87b90835d521209ad3c6c4619d403b324537152f0b8f20dda839b40c3aa0abfbf1828b3635a7a8bb159c3ed469e743023510ee
+  languageName: node
+  linkType: hard
+
 "unist-util-remove@npm:^2.0.0":
   version: 2.1.0
   resolution: "unist-util-remove@npm:2.1.0"
@@ -32590,12 +32502,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-stringify-position@npm:^3.0.0":
-  version: 3.0.3
-  resolution: "unist-util-stringify-position@npm:3.0.3"
+"unist-util-stringify-position@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "unist-util-stringify-position@npm:4.0.0"
   dependencies:
-    "@types/unist": ^2.0.0
-  checksum: dbd66c15183607ca942a2b1b7a9f6a5996f91c0d30cf8966fb88955a02349d9eefd3974e9010ee67e71175d784c5a9fea915b0aa0b0df99dcb921b95c4c9e124
+    "@types/unist": ^3.0.0
+  checksum: e2e7aee4b92ddb64d314b4ac89eef7a46e4c829cbd3ee4aee516d100772b490eb6b4974f653ba0717a0071ca6ea0770bf22b0a2ea62c65fcba1d071285e96324
   languageName: node
   linkType: hard
 
@@ -32616,13 +32528,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-visit-parents@npm:^5.0.0, unist-util-visit-parents@npm:^5.1.1":
-  version: 5.1.3
-  resolution: "unist-util-visit-parents@npm:5.1.3"
+"unist-util-visit-parents@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "unist-util-visit-parents@npm:6.0.1"
   dependencies:
-    "@types/unist": ^2.0.0
-    unist-util-is: ^5.0.0
-  checksum: 8ecada5978994f846b64658cf13b4092cd78dea39e1ba2f5090a5de842ba4852712c02351a8ae95250c64f864635e7b02aedf3b4a093552bb30cf1bd160efbaa
+    "@types/unist": ^3.0.0
+    unist-util-is: ^6.0.0
+  checksum: 08927647c579f63b91aafcbec9966dc4a7d0af1e5e26fc69f4e3e6a01215084835a2321b06f3cbe7bf7914a852830fc1439f0fc3d7153d8804ac3ef851ddfa20
   languageName: node
   linkType: hard
 
@@ -32637,14 +32549,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-visit@npm:^4.0.0, unist-util-visit@npm:^4.1.1":
-  version: 4.1.2
-  resolution: "unist-util-visit@npm:4.1.2"
+"unist-util-visit@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-visit@npm:5.0.0"
   dependencies:
-    "@types/unist": ^2.0.0
-    unist-util-is: ^5.0.0
-    unist-util-visit-parents: ^5.1.1
-  checksum: 95a34e3f7b5b2d4b68fd722b6229972099eb97b6df18913eda44a5c11df8b1e27efe7206dd7b88c4ed244a48c474a5b2e2629ab79558ff9eb936840295549cee
+    "@types/unist": ^3.0.0
+    unist-util-is: ^6.0.0
+    unist-util-visit-parents: ^6.0.0
+  checksum: 9ec42e618e7e5d0202f3c191cd30791b51641285732767ee2e6bcd035931032e3c1b29093f4d7fd0c79175bbc1f26f24f26ee49770d32be76f8730a652a857e6
   languageName: node
   linkType: hard
 
@@ -32985,20 +32897,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uvu@npm:^0.5.0":
-  version: 0.5.6
-  resolution: "uvu@npm:0.5.6"
-  dependencies:
-    dequal: ^2.0.0
-    diff: ^5.0.0
-    kleur: ^4.0.3
-    sade: ^1.7.3
-  bin:
-    uvu: bin.js
-  checksum: 09460a37975627de9fcad396e5078fb844d01aaf64a6399ebfcfd9e55f1c2037539b47611e8631f89be07656962af0cf48c334993db82b9ae9c3d25ce3862168
-  languageName: node
-  linkType: hard
-
 "v8-compile-cache-lib@npm:^3.0.1":
   version: 3.0.1
   resolution: "v8-compile-cache-lib@npm:3.0.1"
@@ -33057,26 +32955,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vercel@npm:^32.4.1":
-  version: 32.4.1
-  resolution: "vercel@npm:32.4.1"
+"vercel@npm:^33.2.0":
+  version: 33.2.0
+  resolution: "vercel@npm:33.2.0"
   dependencies:
-    "@vercel/build-utils": 7.2.2
+    "@vercel/build-utils": 7.5.1
     "@vercel/fun": 1.1.0
-    "@vercel/go": 3.0.3
-    "@vercel/hydrogen": 1.0.1
-    "@vercel/next": 4.0.10
-    "@vercel/node": 3.0.7
-    "@vercel/python": 4.0.2
-    "@vercel/redwood": 2.0.4
-    "@vercel/remix-builder": 2.0.9
-    "@vercel/ruby": 2.0.2
-    "@vercel/static-build": 2.0.8
+    "@vercel/go": 3.0.5
+    "@vercel/hydrogen": 1.0.2
+    "@vercel/next": 4.1.0
+    "@vercel/node": 3.0.17
+    "@vercel/python": 4.1.0
+    "@vercel/redwood": 2.0.6
+    "@vercel/remix-builder": 2.0.18
+    "@vercel/ruby": 2.0.4
+    "@vercel/static-build": 2.1.0
     chokidar: 3.3.1
   bin:
     vc: dist/index.js
     vercel: dist/index.js
-  checksum: cbee9a1633e0a62c92e602d358439a48c31ea81ac2232ced25ae4166bc5f4f9a257ab5d085600401310daac3b45e93698431be8cc6cb10a8fc4db560dc28c542
+  checksum: 7b39f369f6c79693b773809f416c8a94d6bd5fd44a68540de7c7f96c9d01fa58bc01bf789d17f31ab03d7d096b5b49123f5390cd5222410ac5e9cc5e56e314cd
   languageName: node
   linkType: hard
 
@@ -33097,13 +32995,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vfile-message@npm:^3.0.0":
-  version: 3.1.4
-  resolution: "vfile-message@npm:3.1.4"
+"vfile-message@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "vfile-message@npm:4.0.2"
   dependencies:
-    "@types/unist": ^2.0.0
-    unist-util-stringify-position: ^3.0.0
-  checksum: d0ee7da1973ad76513c274e7912adbed4d08d180eaa34e6bd40bc82459f4b7bc50fcaff41556135e3339995575eac5f6f709aba9332b80f775618ea4880a1367
+    "@types/unist": ^3.0.0
+    unist-util-stringify-position: ^4.0.0
+  checksum: 964e7e119f4c0e0270fc269119c41c96da20afa01acb7c9809a88365c8e0c64aa692fafbd952669382b978002ecd7ad31ef4446d85e8a22cdb62f6df20186c2d
   languageName: node
   linkType: hard
 
@@ -33119,15 +33017,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vfile@npm:^5.0.0":
-  version: 5.3.7
-  resolution: "vfile@npm:5.3.7"
+"vfile@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "vfile@npm:6.0.1"
   dependencies:
-    "@types/unist": ^2.0.0
-    is-buffer: ^2.0.0
-    unist-util-stringify-position: ^3.0.0
-    vfile-message: ^3.0.0
-  checksum: 642cce703afc186dbe7cabf698dc954c70146e853491086f5da39e1ce850676fc96b169fcf7898aa3ff245e9313aeec40da93acd1e1fcc0c146dc4f6308b4ef9
+    "@types/unist": ^3.0.0
+    unist-util-stringify-position: ^4.0.0
+    vfile-message: ^4.0.0
+  checksum: 05ccee73aeb00402bc8a5d0708af299e9f4a33f5132805449099295085e3ca3b0d018328bad9ff44cf2e6f4cd364f1d558d3fb9b394243a25b2739207edcb0ed
   languageName: node
   linkType: hard
 
@@ -33358,16 +33255,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"watchpack@npm:2.4.0, watchpack@npm:^2.2.0, watchpack@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "watchpack@npm:2.4.0"
-  dependencies:
-    glob-to-regexp: ^0.4.1
-    graceful-fs: ^4.1.2
-  checksum: 23d4bc58634dbe13b86093e01c6a68d8096028b664ab7139d58f0c37d962d549a940e98f2f201cecdabd6f9c340338dc73ef8bf094a2249ef582f35183d1a131
-  languageName: node
-  linkType: hard
-
 "watchpack@npm:^1.7.4":
   version: 1.7.5
   resolution: "watchpack@npm:1.7.5"
@@ -33385,6 +33272,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"watchpack@npm:^2.2.0, watchpack@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "watchpack@npm:2.4.0"
+  dependencies:
+    glob-to-regexp: ^0.4.1
+    graceful-fs: ^4.1.2
+  checksum: 23d4bc58634dbe13b86093e01c6a68d8096028b664ab7139d58f0c37d962d549a940e98f2f201cecdabd6f9c340338dc73ef8bf094a2249ef582f35183d1a131
+  languageName: node
+  linkType: hard
+
 "wcwidth@npm:>=1.0.1, wcwidth@npm:^1.0.1":
   version: 1.0.1
   resolution: "wcwidth@npm:1.0.1"