@azure/communication-react 1.5.1-alpha-202303300013 → 1.5.1-alpha-202303310013

package/dist/dist-cjs/communication-react/index.js

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202303300013';
+var telemetryVersion = '1.5.1-alpha-202303310013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -378,7 +378,7 @@ const getEnvironmentInfo = (state) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$G = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -416,7 +416,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$F(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$G(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -549,7 +549,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$E = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -570,7 +570,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @private
  */
 const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callClient, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$F(void 0, void 0, void 0, function* () {
         // Before the call object creates a stream, dispose of any local preview streams.
         // @TODO: is there any way to parent the unparented view to the call object instead
         // of disposing and creating a new stream?
@@ -590,7 +590,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$F(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -599,7 +599,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.stopVideo(stream);
         }
     });
-    const onToggleCamera = (options) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$F(void 0, void 0, void 0, function* () {
         const previewOn = _isPreviewOn(callClient.getState().deviceManager);
         if (previewOn && call && call.state === 'Connecting') {
             // This is to workaround: https://skype.visualstudio.com/SPOOL/_workitems/edit/3030558.
@@ -647,19 +647,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }
         }
     });
-    const onSelectMicrophone = (device) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$F(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$F(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$F(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -682,19 +682,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$F(void 0, void 0, void 0, function* () {
         if (!call || !_isInCall(call.state)) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
         }
         return call.isMuted ? yield call.unmute() : yield call.mute();
     });
-    const onStartScreenShare = () => __awaiter$E(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$E(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$E(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = (forEveryone) => __awaiter$E(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
+    const onStartScreenShare = () => __awaiter$F(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$F(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$F(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = (forEveryone) => __awaiter$F(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onToggleHold = () => __awaiter$E(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
-    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$F(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
+    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$F(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -710,7 +710,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         const { view } = (_a = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _a !== void 0 ? _a : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$F(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -741,7 +741,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
         return (createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view) ? { view: createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view } : undefined;
     });
-    const onDisposeRemoteStreamView = (userId) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$F(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -762,7 +762,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$F(void 0, void 0, void 0, function* () {
         // If the user is currently in a call, dispose of the local stream view attached to that call.
         const callState = call && callClient.getState().calls[call.id];
         const localStream = callState === null || callState === void 0 ? void 0 : callState.localVideoStreams.find((item) => item.mediaStreamType === 'Video');
@@ -775,18 +775,18 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         yield disposeAllLocalPreviewViews(callClient);
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$E(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$F(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     const notImplemented = () => {
         throw new Error('Not implemented, cannot call a method from an abstract object');
     };
     /* @conditional-compile-remove(call-readiness) */
-    const askDevicePermission = (constrain) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const askDevicePermission = (constrain) => __awaiter$F(void 0, void 0, void 0, function* () {
         if (deviceManager) {
             yield (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.askDevicePermission(constrain));
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onRemoveVideoBackgroundEffects = () => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onRemoveVideoBackgroundEffects = () => __awaiter$F(void 0, void 0, void 0, function* () {
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -794,7 +794,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onBlurVideoBackground = (bgBlurConfig) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onBlurVideoBackground = (bgBlurConfig) => __awaiter$F(void 0, void 0, void 0, function* () {
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -802,7 +802,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onReplaceVideoBackground = (bgReplacementConfig) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onReplaceVideoBackground = (bgReplacementConfig) => __awaiter$F(void 0, void 0, void 0, function* () {
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -844,7 +844,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$E = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -871,7 +871,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             return callAgent ? callAgent.startCall(participants, options) : undefined;
         }, 
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$D(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$E(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             if (communicationCommon.isPhoneNumberIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant, options);
@@ -879,7 +879,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             else if (communicationCommon.isCommunicationUserIdentifier(participant) || communicationCommon.isMicrosoftTeamsUserIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant);
             }
-        }), onRemoveParticipant: (userId) => __awaiter$D(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$E(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             yield (call === null || call === void 0 ? void 0 : call.removeParticipant(participant));
         }) });
@@ -887,7 +887,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -919,7 +919,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
         }, 
         /* @conditional-compile-remove(teams-identity-support) */
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$C(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$D(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             /* @conditional-compile-remove(teams-identity-support) */
             const threadId = options === null || options === void 0 ? void 0 : options.threadId;
@@ -932,7 +932,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
             }
             /* @conditional-compile-remove(teams-identity-support) */
             call === null || call === void 0 ? void 0 : call.addParticipant(participant);
-        }), onRemoveParticipant: (userId) => __awaiter$C(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$D(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             if (communicationCommon.isCommunicationUserIdentifier(participant)) {
                 throw new Error('CommunicationIdentifier in Teams call is not supported!');
@@ -944,7 +944,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -993,13 +993,13 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$B(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$C(this, void 0, void 0, function* () {
             // Device Manager always has a camera with '' name if there are no real camera devices available.
             // We don't want to show that in the UI.
             const realCameras = (yield this._deviceManager.getCameras()).filter((c) => !!c.name);
             this._context.setDeviceManagerCameras(dedupeById(realCameras));
         });
-        this.audioDevicesUpdated = () => __awaiter$B(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$C(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -1202,7 +1202,7 @@ class CallIdHistory {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$A = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1786,7 +1786,7 @@ class CallContext$2 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$A(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$B(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -2313,7 +2313,7 @@ function _logStreamEvent(eventName, streamLogInfo, error) {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$A = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2323,7 +2323,7 @@ var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewVideo(context, internalContext, callId, stream, participantId, options) {
-    return __awaiter$z(this, void 0, void 0, function* () {
+    return __awaiter$A(this, void 0, void 0, function* () {
         // we can only have 3 types of createView
         let streamEventType;
         // we will reuse these for local as well but we need to make sure the remote stream is passed in like before.
@@ -2445,7 +2445,7 @@ function createViewVideo(context, internalContext, callId, stream, participantId
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$z(this, void 0, void 0, function* () {
+    return __awaiter$A(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -2613,7 +2613,7 @@ function createView(context, internalContext, callId, participantId, stream, opt
         // Render LocalVideoStream that is not part of a Call
         // Because it is not part of the call we don't tee errors to state naturally (e.g. via a Call Client function such as startVideo).
         // We do not have a startLocalPreviewVideo function, so as a workaround we ensure any errors are propagated here.
-        return context.withAsyncErrorTeedToState(() => __awaiter$z(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
+        return context.withAsyncErrorTeedToState(() => __awaiter$A(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
     }
     else {
         _logStreamEvent(EventNames.CREATE_STREAM_INVALID_PARAMS, { streamType });
@@ -3047,7 +3047,7 @@ class CallSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3067,14 +3067,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$y(this, void 0, void 0, function* () {
+                    return __awaiter$z(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$y(this, void 0, void 0, function* () {
+                    return __awaiter$z(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -3311,7 +3311,7 @@ const clearCallRelatedState = (context, internalContext) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3337,56 +3337,56 @@ class ProxyCallCommon {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$y(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$y(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$y(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$y(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$y(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$y(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$y(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$y(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
@@ -3399,7 +3399,7 @@ class ProxyCallCommon {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3413,7 +3413,7 @@ class ProxyCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$w(this, void 0, void 0, function* () {
+                    return __awaiter$x(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -3634,7 +3634,7 @@ class InternalCallContext {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3649,7 +3649,7 @@ class ProxyTeamsCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$v(this, void 0, void 0, function* () {
+                    return __awaiter$w(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'TeamsCall.addParticipant');
@@ -3764,7 +3764,7 @@ const teamsCallAgentDeclaratify = (callAgent, context, internalContext) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3786,7 +3786,7 @@ class ProxyVideoStreamRendererView {
     get(target, prop) {
         switch (prop) {
             case 'updateScalingMode': {
-                return (...args) => __awaiter$u(this, void 0, void 0, function* () {
+                return (...args) => __awaiter$v(this, void 0, void 0, function* () {
                     yield target.updateScalingMode(...args);
                     this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);
                 });
@@ -3807,7 +3807,7 @@ const videoStreamRendererViewDeclaratify = (view, context, callId, participantId
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3829,7 +3829,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$t(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$u(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -3842,7 +3842,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'createTeamsCallAgent': {
-                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$t(this, void 0, void 0, function* () {
+                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$u(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -3855,7 +3855,7 @@ class ProxyCallClient {
                 }), 'CallClient.createTeamsCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$t(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$u(this, void 0, void 0, function* () {
                     // As of writing, the SDK always returns the same instance of DeviceManager so we keep a reference of
                     // DeviceManager and if it does not change we return the cached DeclarativeDeviceManager. If it does not we'll
                     // throw an error that indicate we need to fix this issue as our implementation has diverged from the SDK.
@@ -3884,7 +3884,7 @@ class ProxyCallClient {
                         /**
                          * add to this object if we want to proxy anything else off the DebugInfo feature object.
                          */
-                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$t(this, void 0, void 0, function* () {
+                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$u(this, void 0, void 0, function* () {
                                 const environmentInfo = yield feature.getEnvironmentInfo();
                                 this._context.setEnvironmentInfo(environmentInfo);
                                 return environmentInfo;
@@ -3937,7 +3937,7 @@ const createStatefulCallClientWithDeps = (callClient, context, internalContext)
     });
     Object.defineProperty(callClient, 'createView', {
         configurable: false,
-        value: (callId, participantId, stream, options) => __awaiter$t(void 0, void 0, void 0, function* () {
+        value: (callId, participantId, stream, options) => __awaiter$u(void 0, void 0, void 0, function* () {
             const participantIdKind = participantId ? communicationCommon.getIdentifierKind(participantId) : undefined;
             const result = yield createView(context, internalContext, callId, participantIdKind, stream, options);
             // We only need to declaratify the VideoStreamRendererView object for remote participants. Because the updateScalingMode only needs to be called on remote participant stream views.
@@ -4676,6 +4676,25 @@ const customIconName = {
 const isValidString = (string) => {
     return !!string && string.length > 0;
 };
+/**
+ * Chunk an array into rows of a given size.
+ * @private
+ */
+function chunk(options, itemsPerRow) {
+    const rows = [];
+    let currentRow = [];
+    for (const option of options) {
+        currentRow.push(option);
+        if (currentRow.length === itemsPerRow) {
+            rows.push(currentRow);
+            currentRow = [];
+        }
+    }
+    if (currentRow.length > 0) {
+        rows.push(currentRow);
+    }
+    return rows;
+}
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6868,7 +6887,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
 
-var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -6893,7 +6912,7 @@ const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$s(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$t(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -7054,7 +7073,7 @@ const ChatMessageComponentAsMessageBubble = React__default['default'].memo(Messa
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7086,7 +7105,7 @@ const ChatMessageComponent = (props) => {
         onSendMessage && onSendMessage(content !== undefined ? content : '');
     }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
     if (isEditing && message.messageType === 'chat') {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$r(void 0, void 0, void 0, function* () {
+        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$s(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     message.messageId &&
                     (yield props.onUpdateMessage(message.messageId, text, metadata, options));
@@ -7192,7 +7211,7 @@ var getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7441,7 +7460,7 @@ const MessageThread = (props) => {
         setChatMessagesInitialized(chatMessagesInitialized);
     };
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -7492,7 +7511,7 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
         if (!isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -11818,7 +11837,7 @@ const DevicesButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11856,7 +11875,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -12021,7 +12040,7 @@ const lightThemeCallButtonStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -12062,7 +12081,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -12950,7 +12969,7 @@ const formatPhoneNumber = (phoneNumber) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -12992,10 +13011,10 @@ const DialpadButton = (props) => {
     const theme = react.useTheme();
     const { digit, index, onClick, onLongPress, isMobile = false } = props;
     const useLongPressProps = React__default['default'].useMemo(() => ({
-        onClick: () => __awaiter$n(void 0, void 0, void 0, function* () {
+        onClick: () => __awaiter$o(void 0, void 0, void 0, function* () {
             onClick(digit, index);
         }),
-        onLongPress: () => __awaiter$n(void 0, void 0, void 0, function* () {
+        onLongPress: () => __awaiter$o(void 0, void 0, void 0, function* () {
             onLongPress(digit, index);
         }),
         touchEventsOnly: isMobile
@@ -13380,6 +13399,121 @@ const _DevicePermissionDropdown = (props) => {
         }, options: options !== null && options !== void 0 ? options : [], styles: styles }));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * A component for displaying a Video Background Effect Option.
+ *
+ * @internal
+ */
+const _VideoEffectsItem = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const theme = react.useTheme();
+    const isSelected = (_a = props.isSelected) !== null && _a !== void 0 ? _a : false;
+    const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
+    const backgroundImage = (_c = props.backgroundProps) === null || _c === void 0 ? void 0 : _c.url;
+    const containerStyles = React.useCallback(() => videoEffectsItemContainerStyles({
+        theme,
+        isSelected,
+        disabled,
+        backgroundImage,
+        backgroundPosition,
+        backgroundSize
+    }), [backgroundImage, disabled, isSelected, theme]);
+    return (React__default['default'].createElement(react.TooltipHost, Object.assign({}, props.tooltipProps),
+        React__default['default'].createElement(react.Stack, { key: props.key, className: react.mergeStyles((_d = props.styles) === null || _d === void 0 ? void 0 : _d.root), verticalAlign: "center", horizontalAlign: "center", styles: containerStyles, onClick: disabled ? undefined : () => { var _a; return (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.key); }, onKeyDown: disabled
+                ? undefined
+                : (e) => {
+                    var _a;
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, props.key);
+                    }
+                }, tabIndex: props.disabled ? -1 : 0, "aria-label": props.ariaLabel, "aria-disabled": props.disabled, role: "button" },
+            props.iconProps && (React__default['default'].createElement(react.Stack.Item, { styles: { root: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.iconContainer } },
+                React__default['default'].createElement(react.Icon, Object.assign({}, props.iconProps)))),
+            props.title && (React__default['default'].createElement(react.Stack.Item, { styles: { root: (_f = props.styles) === null || _f === void 0 ? void 0 : _f.textContainer } },
+                React__default['default'].createElement(react.Text, { variant: "small" }, props.title))))));
+};
+const backgroundPosition = 'center';
+const backgroundSize = 'cover';
+const videoEffectsItemContainerStyles = (args) => {
+    const borderDefaultThickness = '1px';
+    const borderActiveThickness = '2px';
+    return {
+        root: {
+            background: args.disabled ? args.theme.palette.neutralQuaternaryAlt : undefined,
+            backgroundImage: args.backgroundImage ? `url(${args.backgroundImage})` : undefined,
+            backgroundPosition: args.backgroundPosition,
+            backgroundSize: args.backgroundSize,
+            borderRadius: '0.25rem',
+            color: args.theme.palette.neutralPrimary,
+            cursor: args.disabled ? 'default' : 'pointer',
+            height: '3.375rem',
+            position: 'relative',
+            width: '4.83rem',
+            // Use :after to display a border element. This is used to prevent the background image
+            // resizing when the border thichkness is changed. We also want the border to be inside
+            // the frame of the container, i.e. we want it to expand inwards and not outwards when
+            // border thickness changes from hover/selection.
+            ':after': {
+                content: '""',
+                position: 'absolute',
+                boxSizing: 'border-box',
+                border: args.isSelected
+                    ? `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+                    : `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`,
+                height: '100%',
+                width: '100%',
+                borderRadius: '0.25rem'
+            },
+            ':hover': {
+                ':after': {
+                    border: args.disabled && !args.isSelected
+                        ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`
+                        : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
+                }
+            }
+        }
+    };
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Picker for choosing a Video Background Effect.
+ *
+ * @remarks
+ * This functions similar to a radio group of buttons, where the user can select one of the options.
+ *
+ * @internal
+ */
+const _VideoBackgroundEffectsPicker = (props) => {
+    var _a, _b, _c;
+    const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React__default['default'].useState(props.defaultSelectedEffectKey);
+    // Warn the developer if they use the component in an incorrect controlled way.
+    reactHooks.useWarnings({
+        name: 'VideoBackgroundEffectsPicker',
+        props,
+        controlledUsage: {
+            onChangeProp: 'onChange',
+            valueProp: 'selectedEffectKey',
+            defaultValueProp: 'defaultSelectedEffectKey'
+        }
+    });
+    const selectedEffect = (_a = props.selectedEffectKey) !== null && _a !== void 0 ? _a : componentControlledSelectedEffectKey;
+    const setSelectedEffect = (selectedEffectKey) => {
+        var _a;
+        setComponentControlledSelectedEffectKey(selectedEffectKey);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, selectedEffectKey);
+    };
+    const convertedOptions = props.options.map((option) => (Object.assign({ isSelected: option.key === selectedEffect, onSelect: () => setSelectedEffect(option.key) }, option)));
+    const optionsByRow = props.itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, (_b = props.itemsPerRow) !== null && _b !== void 0 ? _b : 3);
+    return (React__default['default'].createElement(react.Stack, { tokens: { childrenGap: '0.5rem' } },
+        React__default['default'].createElement(react.Label, { className: react.mergeStyles((_c = props.styles) === null || _c === void 0 ? void 0 : _c.label) }, props.label),
+        optionsByRow.map((options, rowIndex) => {
+            var _a;
+            return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' } }, options.map((option) => (React__default['default'].createElement(_VideoEffectsItem, Object.assign({}, option, { key: option.key }))))));
+        })));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -13952,7 +14086,7 @@ const findConditionalCompiledSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -13975,35 +14109,35 @@ const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, ch
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$n(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$n(void 0, void 0, void 0, function* () {
             const updatedMetadata = metadata ? Object.assign({}, metadata) : {};
             updatedMetadata['fileSharingMetadata'] = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachedFilesMetadata) || []);
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
-        onDeleteMessage: (messageId) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$n(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$n(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$m(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$n(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$n(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$m(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$n(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$n(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
@@ -14775,7 +14909,7 @@ const chatStatefulLogger = logger.createClientLogger('communication-react:chat-s
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15050,7 +15184,7 @@ class ChatContext$1 {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$l(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$m(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -15162,7 +15296,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15247,7 +15381,7 @@ class EventSubscriber {
         };
         // This is a temporary fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK.
         // Without the temporary fix, there are missing 'participant joined' and 'participant left' system messages in the chat thread.
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$k(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$l(this, void 0, void 0, function* () {
             var e_1, _a;
             try {
                 for (var _b = __asyncValues$1(this.chatClient
@@ -15339,7 +15473,7 @@ class EventSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15361,7 +15495,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$j(this, void 0, void 0, function* () {
+                return __awaiter$k(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -15376,7 +15510,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$j(this, void 0, void 0, function* () {
+                        return __awaiter$k(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -15460,7 +15594,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15479,14 +15613,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
                     const message = yield chatThreadClient.getMessage(...args);
                     this._context.setChatMessage(chatThreadClient.threadId, convertChatMessage(message));
                     return message;
                 }), 'ChatThreadClient.getMessage');
             }
             case 'sendMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
                     // Retry logic?
                     const [request, options] = args;
                     const { content } = request;
@@ -15526,7 +15660,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -15535,7 +15669,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
                     // DeleteMessage is able to either delete local one(for failed message) or synced message
                     const [messageId] = args;
                     if (this._context.deleteLocalMessage(chatThreadClient.threadId, messageId)) {
@@ -15553,12 +15687,12 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'sendTypingNotification': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
                     return yield chatThreadClient.sendTypingNotification(...args);
                 }), 'ChatThreadClient.sendTypingNotification');
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -15566,7 +15700,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateMessage(...args);
                     const [messageId, updateOption] = args;
                     this._context.updateChatMessageContent(chatThreadClient.threadId, messageId, updateOption === null || updateOption === void 0 ? void 0 : updateOption.content);
@@ -15574,7 +15708,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -15582,7 +15716,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -15619,7 +15753,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15638,7 +15772,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -15651,7 +15785,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -15671,7 +15805,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -15682,7 +15816,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -15838,7 +15972,11 @@ const COMPOSITE_ONLY_ICONS = {
     /* @conditional-compile-remove(PSTN-calls) */
     DialpadStartCall: React__default['default'].createElement(reactIcons.Call20Regular, null),
     /* @conditional-compile-remove(rooms) */
-    NoticePageInvalidRoom: React__default['default'].createElement(reactIcons.Info20Filled, null)
+    NoticePageInvalidRoom: React__default['default'].createElement(reactIcons.Info20Filled, null),
+    /* @conditional-compile-remove(video-background-effects) */
+    BlurVideoBackground: React__default['default'].createElement(reactIcons.VideoBackgroundEffect20Regular, null),
+    /* @conditional-compile-remove(video-background-effects) */
+    RemoveVideoBackgroundEffect: React__default['default'].createElement(reactIcons.VideoPerson20Filled, null)
 };
 /**
  * The default set of icons that are available to used in the Composites.
@@ -15871,7 +16009,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",effects:"Effects",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number",outboundCallingNoticeString:"Calling..."};var chat$c={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$c={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -16121,7 +16259,7 @@ const uploadFileButtonStringTrampoline = () => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16240,7 +16378,7 @@ class AzureCommunicationFileUploadAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images) */
     downloadAuthenticatedAttachment(attachmentUrl) {
-        return __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
             function fetchWithAuthentication(url, token) {
                 const headers = new Headers();
                 headers.append('Authorization', `Bearer ${token}`);
@@ -16318,7 +16456,7 @@ const END_CALL_PAGES = [
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16541,7 +16679,7 @@ const isDisabled$2 = (option) => {
 /**
  * @returns Permissions state for the camera.
  */
-const queryCameraPermissionFromPermissionsAPI = () => __awaiter$f(void 0, void 0, void 0, function* () {
+const queryCameraPermissionFromPermissionsAPI = () => __awaiter$g(void 0, void 0, void 0, function* () {
     try {
         return (yield navigator.permissions.query({ name: 'camera' })).state;
     }
@@ -16554,7 +16692,7 @@ const queryCameraPermissionFromPermissionsAPI = () => __awaiter$f(void 0, void 0
 /**
  * @returns Permissions state for the microphone.
  */
-const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$f(void 0, void 0, void 0, function* () {
+const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$g(void 0, void 0, void 0, function* () {
     try {
         return (yield navigator.permissions.query({ name: 'microphone' })).state;
     }
@@ -16571,7 +16709,7 @@ const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$f(void 0, vo
  * If permission API is not supported on this browser, permission state is set to unsupported.
  * @private
  */
-const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$f(void 0, void 0, void 0, function* () {
+const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$g(void 0, void 0, void 0, function* () {
     const [cameraResult, microphoneResult] = yield Promise.all([
         queryCameraPermissionFromPermissionsAPI(),
         queryMicrophonePermissionFromPermissionsAPI()
@@ -16648,7 +16786,7 @@ const createParticipantModifier = (createModifiedParticipant) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16776,9 +16914,9 @@ class AzureCommunicationChatAdapter {
         this.unsubscribeAllEvents();
     }
     fetchInitialData() {
-        return __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
                 var e_1, _a;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -16812,8 +16950,8 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options = {}) {
-        return __awaiter$e(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertFileUploadsUiStateToMessageMetadata(this.context.getState().fileUploads));
                 /* @conditional-compile-remove(file-sharing) */
@@ -16830,51 +16968,51 @@ class AzureCommunicationChatAdapter {
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$e(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$e(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
                 yield this.handlers.onTyping();
             }));
         });
     }
     removeParticipant(userId) {
-        return __awaiter$e(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$e(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$e(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, metadata, options) {
-        return __awaiter$e(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, metadata, options);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$e(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -16909,7 +17047,7 @@ class AzureCommunicationChatAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images) */
     downloadAuthenticatedAttachment(attachmentUrl) {
-        return __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
             if (!this.fileUploadAdapter.downloadAuthenticatedAttachment) {
                 return '';
             }
@@ -16964,7 +17102,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$e(this, void 0, void 0, function* () {
+        return __awaiter$f(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -17006,7 +17144,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$e(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$f(void 0, void 0, void 0, function* () {
     if (!isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
@@ -17072,7 +17210,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$e(void 0, void 0, void 0, function* () {
+        (() => __awaiter$f(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -17104,7 +17242,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$e(void 0, void 0, void 0, function* () {
+            (() => __awaiter$f(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -17125,7 +17263,7 @@ beforeDispose) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$e(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$f(void 0, void 0, void 0, function* () {
     return new AzureCommunicationChatAdapter(chatClient, chatThreadClient);
 });
 const isChatError = (e) => {
@@ -17336,7 +17474,7 @@ const sendboxContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -17357,7 +17495,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$d(void 0, void 0, void 0, function* () {
+        (() => __awaiter$e(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -17721,7 +17859,7 @@ const FileDownloadErrorBar = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -17742,7 +17880,7 @@ const ChatScreen = (props) => {
     const theme = useTheme();
     React.useEffect(() => {
         // Initial data should be always fetched by the composite(or external caller) instead of the adapter
-        const fetchData = () => __awaiter$c(void 0, void 0, void 0, function* () {
+        const fetchData = () => __awaiter$d(void 0, void 0, void 0, function* () {
             // Fetch initial data for adapter
             yield adapter.fetchInitialData();
             // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
@@ -17947,7 +18085,7 @@ const adaptCompositeState = (compositeState) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$b = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -17966,88 +18104,88 @@ _component) => {
     return createCompositeHandlers(useAdapter());
 };
 const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onCreateLocalStreamView: (options) => __awaiter$c(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(undefined, options);
     }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onCreateRemoteStreamView: (userId, options) => __awaiter$c(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(userId, options);
     }),
-    onHangUp: (forEveryone) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onHangUp: (forEveryone) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.leaveCall(forEveryone);
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onToggleHold: () => __awaiter$b(void 0, void 0, void 0, function* () {
+    onToggleHold: () => __awaiter$c(void 0, void 0, void 0, function* () {
         var _a;
         return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold' ? yield adapter.resumeCall() : yield adapter.holdCall();
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onAddParticipant: (participant, options) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onAddParticipant: (participant, options) => __awaiter$c(void 0, void 0, void 0, function* () {
         return yield adapter.addParticipant(participant, options);
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onSendDtmfTone: (dtmfTone) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onSendDtmfTone: (dtmfTone) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.sendDtmfTone(dtmfTone);
     }),
-    onRemoveParticipant: (userId) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onRemoveParticipant: (userId) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onSelectCamera: (deviceInfo, options) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onSelectMicrophone: (deviceInfo) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.setMicrophone(deviceInfo);
     }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onSelectSpeaker: (deviceInfo) => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.setSpeaker(deviceInfo);
     }),
     onStartCall: (participants, options) => {
         const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
         return adapter.startCall(rawIds, options);
     },
-    onStartScreenShare: () => __awaiter$b(void 0, void 0, void 0, function* () {
+    onStartScreenShare: () => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.startScreenShare();
     }),
-    onStopScreenShare: () => __awaiter$b(void 0, void 0, void 0, function* () {
+    onStopScreenShare: () => __awaiter$c(void 0, void 0, void 0, function* () {
         yield adapter.stopScreenShare();
     }),
-    onToggleCamera: (options) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onToggleCamera: (options) => __awaiter$c(void 0, void 0, void 0, function* () {
         isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
     }),
-    onToggleMicrophone: () => __awaiter$b(void 0, void 0, void 0, function* () {
+    onToggleMicrophone: () => __awaiter$c(void 0, void 0, void 0, function* () {
         var _b;
         return ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.isMuted) ? yield adapter.unmute() : yield adapter.mute();
     }),
-    onToggleScreenShare: () => __awaiter$b(void 0, void 0, void 0, function* () {
+    onToggleScreenShare: () => __awaiter$c(void 0, void 0, void 0, function* () {
         var _c;
         return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isScreenSharingOn)
             ? yield adapter.stopScreenShare()
             : yield adapter.startScreenShare();
     }),
-    onStartLocalVideo: () => __awaiter$b(void 0, void 0, void 0, function* () {
+    onStartLocalVideo: () => __awaiter$c(void 0, void 0, void 0, function* () {
         if (adapter.getState().call) {
             return adapter.startCamera();
         }
     }),
-    onDisposeLocalStreamView: () => __awaiter$b(void 0, void 0, void 0, function* () {
+    onDisposeLocalStreamView: () => __awaiter$c(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView();
     }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onDisposeRemoteStreamView: (userId) => __awaiter$c(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView(userId);
     }),
     /* @conditional-compile-remove(call-readiness) */
-    askDevicePermission: (constrain) => __awaiter$b(void 0, void 0, void 0, function* () {
+    askDevicePermission: (constrain) => __awaiter$c(void 0, void 0, void 0, function* () {
         return adapter.askDevicePermission(constrain);
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onRemoveVideoBackgroundEffects: () => __awaiter$b(void 0, void 0, void 0, function* () {
+    onRemoveVideoBackgroundEffects: () => __awaiter$c(void 0, void 0, void 0, function* () {
         return yield adapter.stopVideoBackgroundEffect();
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onBlurVideoBackground: (bgBlurConfig) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onBlurVideoBackground: (bgBlurConfig) => __awaiter$c(void 0, void 0, void 0, function* () {
         return yield adapter.blurVideoBackground(bgBlurConfig);
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onReplaceVideoBackground: (bgReplacementConfig) => __awaiter$b(void 0, void 0, void 0, function* () {
+    onReplaceVideoBackground: (bgReplacementConfig) => __awaiter$c(void 0, void 0, void 0, function* () {
         return yield adapter.replaceVideoBackground(bgReplacementConfig);
     })
 }));
@@ -19399,7 +19537,7 @@ const AddPeopleButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$a = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$b = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -19435,7 +19573,7 @@ const PeoplePaneContent = (props) => {
         setDrawerMenuItems
     ]);
     const participantListProps = React.useMemo(() => {
-        const onRemoveAParticipant = (participantId) => __awaiter$a(void 0, void 0, void 0, function* () { return onRemoveParticipant(participantId); });
+        const onRemoveAParticipant = (participantId) => __awaiter$b(void 0, void 0, void 0, function* () { return onRemoveParticipant(participantId); });
         return Object.assign(Object.assign({}, participantListDefaultProps), { 
             // Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked
             onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant, 
@@ -19634,7 +19772,7 @@ const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
     return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
 };
 
-var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$a = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -19664,11 +19802,11 @@ const CallPane = (props) => {
     /**
      * In a Call Composite when a participant is removed, we must remove them from the call.
      */
-    const removeParticipantFromCall = (participantId) => __awaiter$9(void 0, void 0, void 0, function* () {
+    const removeParticipantFromCall = (participantId) => __awaiter$a(void 0, void 0, void 0, function* () {
         yield props.callAdapter.removeParticipant(participantId);
     });
     /* @conditional-compile-remove(PSTN-calls) */
-    const addParticipantToCall = (participant, options) => __awaiter$9(void 0, void 0, void 0, function* () {
+    const addParticipantToCall = (participant, options) => __awaiter$a(void 0, void 0, void 0, function* () {
         yield props.callAdapter.addParticipant(participant, options);
     });
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);
@@ -19794,12 +19932,6 @@ const CallArrangement = (props) => {
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React__default['default'].createElement(react.Stack, { grow: true, styles: callArrangementContainerStyles },
-                React__default['default'].createElement(react.Stack.Item, { styles: notificationsContainerStyles },
-                    React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
-                        React__default['default'].createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
-                    errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
-                        React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)))),
-                    canUnmute && !!props.mutedNotificationProps && React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps))),
                 ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
                     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                     !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
@@ -19810,7 +19942,15 @@ const CallArrangement = (props) => {
                         onPeopleButtonClicked: togglePeoplePane })))),
                 React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
                     React__default['default'].createElement(react.Stack.Item, { grow: true, style: callCompositeContainerFlex() },
-                        React__default['default'].createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles$1 }, props.onRenderGalleryContent())))),
+                        React__default['default'].createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true },
+                            React__default['default'].createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles$1 },
+                                React__default['default'].createElement(react.Stack.Item, { styles: notificationsContainerStyles },
+                                    React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
+                                        React__default['default'].createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
+                                    errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
+                                        React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)))),
+                                    canUnmute && !!props.mutedNotificationProps && (React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
+                                props.onRenderGalleryContent && props.onRenderGalleryContent()))),
                     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                     callPaneContent())))));
 };
@@ -20556,103 +20696,6 @@ const devicePermissionSelector = reselect__namespace.createSelector([getDeviceMa
     };
 });
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const localPreviewSelector = reselect__namespace.createSelector([getDeviceManager], (deviceManager) => {
-    // TODO: we should take in a LocalVideoStream that developer wants to use as their 'Preview' view. We should also
-    // handle cases where 'Preview' view is in progress and not necessary completed.
-    const view = deviceManager.cameras.length > 0 && // This ensures that the video stream is reset if camera devices are removed.
-        deviceManager.unparentedViews.length > 0 &&
-        deviceManager.unparentedViews[0].view;
-    return {
-        videoStreamElement: view ? view.target : null
-    };
-});
-
-// Copyright (c) Microsoft Corporation.
-const localPreviewContainerStyle = {
-    borderRadius: '.25rem'
-};
-/**
- * @private
- */
-const localPreviewContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '50%', minWidth: '11rem', maxWidth: '25rem', height: '18.75rem', padding: '0.5rem' }));
-/**
- * @private
- */
-const localPreviewContainerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '100%', height: '100%' }));
-/**
- * @private
- */
-const cameraOffLabelStyle = react.mergeStyles({
-    fontSize: '0.75rem' // 12px
-});
-/**
- * @private
- */
-const localPreviewTileStyle = {
-    root: {
-        borderRadius: '.25rem'
-    }
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/**
- * @private
- */
-const LocalPreview = (props) => {
-    const locale = useLocale();
-    const cameraButtonProps = usePropsFor$1(CameraButton);
-    const localPreviewProps = useSelector$1(localPreviewSelector);
-    const devicesButtonProps = usePropsFor$1(DevicesButton);
-    const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector$1(devicePermissionSelector);
-    const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
-    const adapter = useAdapter();
-    const onToggleMic = React.useCallback(() => __awaiter$8(void 0, void 0, void 0, function* () {
-        isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
-    }), [adapter, isLocalMicrophoneEnabled]);
-    const hasNoDevices = devicesButtonProps.cameras.length === 0 &&
-        devicesButtonProps.microphones.length === 0 &&
-        devicesButtonProps.speakers.length === 0;
-    const hasCameras = devicesButtonProps.cameras.length > 0;
-    const hasMicrophones = devicesButtonProps.microphones.length > 0;
-    const theme = useTheme();
-    const onRenderPlaceholder = React.useCallback(() => {
-        return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ width: '100%', height: '100%' }), verticalAlign: "center", tokens: { childrenGap: '0.25rem' } },
-            React__default['default'].createElement(react.Stack.Item, { align: "center" },
-                React__default['default'].createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: react.mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary }) })),
-            React__default['default'].createElement(react.Stack.Item, { align: "center" },
-                React__default['default'].createElement(react.Text, { className: react.mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary }) }, locale.strings.call.cameraTurnedOff))));
-    }, [theme, locale.strings.call.cameraTurnedOff]);
-    const devicesButtonStyles = props.mobileView
-        ? {
-            menuStyles: {
-                menuItemStyles: buttonFlyoutIncreasedSizeStyles
-            }
-        }
-        : undefined;
-    return (React__default['default'].createElement(react.Stack, { "data-ui-id": "call-composite-local-preview", className: props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop },
-        React__default['default'].createElement(VideoTile, { styles: localPreviewTileStyle, renderElement: (localPreviewProps === null || localPreviewProps === void 0 ? void 0 : localPreviewProps.videoStreamElement) ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: localPreviewProps.videoStreamElement })) : undefined, onRenderPlaceholder: onRenderPlaceholder },
-            React__default['default'].createElement(ControlBar, { layout: "floatingBottom" },
-                React__default['default'].createElement(MicrophoneButton, { "data-ui-id": "call-composite-local-device-settings-microphone-button", checked: isLocalMicrophoneEnabled, onToggleMicrophone: onToggleMic, disabled: !microphonePermissionGranted || !hasMicrophones, showLabel: true }),
-                React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-camera-button" }, cameraButtonProps, { showLabel: true, disabled: !cameraPermissionGranted || !hasCameras })),
-                props.showDevicesButton && (React__default['default'].createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, { 
-                    // disable button whilst all other buttons are disabled
-                    disabled: !microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices, showLabel: true, styles: devicesButtonStyles })))))));
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -20750,6 +20793,123 @@ const startCallButtonStyleMobile = react.mergeStyles({
     width: '100%',
     maxWidth: 'unset'
 });
+/**
+ * @private
+ */
+const effectsButtonStyles = (theme) => {
+    return {
+        root: {
+            background: 'transparent',
+            border: 'none',
+            color: theme.palette.blue,
+            width: '40%',
+            alignSelf: 'end',
+            ':hover, :focus': {
+                color: theme.palette.blue
+            }
+        },
+        rootChecked: {
+            color: theme.palette.blue
+        }
+    };
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const localPreviewSelector = reselect__namespace.createSelector([getDeviceManager], (deviceManager) => {
+    // TODO: we should take in a LocalVideoStream that developer wants to use as their 'Preview' view. We should also
+    // handle cases where 'Preview' view is in progress and not necessary completed.
+    const view = deviceManager.cameras.length > 0 && // This ensures that the video stream is reset if camera devices are removed.
+        deviceManager.unparentedViews.length > 0 &&
+        deviceManager.unparentedViews[0].view;
+    return {
+        videoStreamElement: view ? view.target : null
+    };
+});
+
+// Copyright (c) Microsoft Corporation.
+const localPreviewContainerStyle = {
+    borderRadius: '.25rem'
+};
+/**
+ * @private
+ */
+const localPreviewContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '50%', minWidth: '11rem', maxWidth: '25rem', height: '18.75rem', padding: '0.5rem' }));
+/**
+ * @private
+ */
+const localPreviewContainerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '100%', height: '100%' }));
+/**
+ * @private
+ */
+const cameraOffLabelStyle = react.mergeStyles({
+    fontSize: '0.75rem' // 12px
+});
+/**
+ * @private
+ */
+const localPreviewTileStyle = {
+    root: {
+        borderRadius: '.25rem'
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * @private
+ */
+const LocalPreview = (props) => {
+    const locale = useLocale();
+    const cameraButtonProps = usePropsFor$1(CameraButton);
+    const localPreviewProps = useSelector$1(localPreviewSelector);
+    const devicesButtonProps = usePropsFor$1(DevicesButton);
+    const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector$1(devicePermissionSelector);
+    const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
+    const adapter = useAdapter();
+    const onToggleMic = React.useCallback(() => __awaiter$9(void 0, void 0, void 0, function* () {
+        isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
+    }), [adapter, isLocalMicrophoneEnabled]);
+    const hasNoDevices = devicesButtonProps.cameras.length === 0 &&
+        devicesButtonProps.microphones.length === 0 &&
+        devicesButtonProps.speakers.length === 0;
+    const hasCameras = devicesButtonProps.cameras.length > 0;
+    const hasMicrophones = devicesButtonProps.microphones.length > 0;
+    const theme = useTheme();
+    const onRenderPlaceholder = React.useCallback(() => {
+        return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ width: '100%', height: '100%' }), verticalAlign: "center", tokens: { childrenGap: '0.25rem' } },
+            React__default['default'].createElement(react.Stack.Item, { align: "center" },
+                React__default['default'].createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: react.mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary }) })),
+            React__default['default'].createElement(react.Stack.Item, { align: "center" },
+                React__default['default'].createElement(react.Text, { className: react.mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary }) }, locale.strings.call.cameraTurnedOff))));
+    }, [theme, locale.strings.call.cameraTurnedOff]);
+    const devicesButtonStyles = props.mobileView
+        ? {
+            menuStyles: {
+                menuItemStyles: buttonFlyoutIncreasedSizeStyles
+            }
+        }
+        : undefined;
+    return (React__default['default'].createElement(react.Stack, { "data-ui-id": "call-composite-local-preview", className: props.mobileView ? localPreviewContainerStyleMobile : localPreviewContainerStyleDesktop },
+        React__default['default'].createElement(VideoTile, { styles: localPreviewTileStyle, renderElement: (localPreviewProps === null || localPreviewProps === void 0 ? void 0 : localPreviewProps.videoStreamElement) ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: localPreviewProps.videoStreamElement })) : undefined, onRenderPlaceholder: onRenderPlaceholder },
+            React__default['default'].createElement(ControlBar, { layout: "floatingBottom" },
+                React__default['default'].createElement(MicrophoneButton, { "data-ui-id": "call-composite-local-device-settings-microphone-button", checked: isLocalMicrophoneEnabled, onToggleMicrophone: onToggleMic, disabled: !microphonePermissionGranted || !hasMicrophones, showLabel: true }),
+                React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-camera-button" }, cameraButtonProps, { showLabel: true, disabled: !cameraPermissionGranted || !hasCameras })),
+                props.showDevicesButton && (React__default['default'].createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, { 
+                    // disable button whilst all other buttons are disabled
+                    disabled: !microphonePermissionGranted || !cameraPermissionGranted || hasNoDevices, showLabel: true, styles: devicesButtonStyles })))))));
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -20971,6 +21131,71 @@ const CallReadinessModalFallBack = (props) => {
     }
 };
 
+var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * Pane that is used to show video effects button
+ * @private
+ */
+/** @beta */
+const VideoEffectsPane = (props) => {
+    const { showVideoEffectsOptions, setshowVideoEffectsOptions } = props;
+    /* @conditional-compile-remove(video-background-effects) */
+    const locale = useLocale();
+    /* @conditional-compile-remove(video-background-effects) */
+    const strings = locale.strings.call;
+    /* @conditional-compile-remove(video-background-effects) */
+    const selectableVideoEffects = [
+        {
+            key: 'none',
+            iconProps: {
+                iconName: 'RemoveVideoBackgroundEffect'
+            },
+            title: strings.removeBackgroundEffectButtonLabel,
+            tooltipProps: {
+                content: strings.removeBackgroundTooltip
+            }
+        },
+        {
+            key: 'blur',
+            iconProps: {
+                iconName: 'BlurVideoBackground'
+            },
+            title: strings.blurBackgroundEffectButtonLabel,
+            tooltipProps: {
+                content: strings.blurBackgroundTooltip
+            }
+        }
+    ];
+    /* @conditional-compile-remove(video-background-effects) */
+    const onEffectChange = React.useCallback((effectKey) => __awaiter$8(void 0, void 0, void 0, function* () {
+        if (effectKey === 'blur') {
+            props.adapter.blurVideoBackground();
+        }
+        else if (effectKey === 'none') {
+            props.adapter.stopVideoBackgroundEffect();
+        }
+    }), [props.adapter]);
+    return VideoEffectsPaneTrampoline(showVideoEffectsOptions, setshowVideoEffectsOptions, 
+    /* @conditional-compile-remove(video-background-effects) */
+    selectableVideoEffects, 
+    /* @conditional-compile-remove(video-background-effects) */
+    onEffectChange);
+};
+const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffectsOptions, selectableVideoEffects, onEffectChange) => {
+    /* @conditional-compile-remove(video-background-effects) */
+    const locale = useLocale();
+    /* @conditional-compile-remove(video-background-effects) */
+    return (React__default['default'].createElement(react.Panel, { headerText: locale.strings.call.effects, isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }, selectableVideoEffects && (React__default['default'].createElement(_VideoBackgroundEffectsPicker, { options: selectableVideoEffects, onChange: onEffectChange }))));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -20982,6 +21207,8 @@ const ConfigurationPage = (props) => {
     /* @conditional-compile-remove(call-readiness) */ deviceChecks, 
     /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick, 
     /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
+    /* @conditional-compile-remove(video-background-effects) */
+    const [showVideoEffectsPane, setVideoEffectsPane] = React.useState(false);
     const options = useAdaptedSelector(getSelector$1(DevicesButton));
     const localDeviceSettingsHandlers = useHandlers();
     const { video: cameraPermissionGranted, audio: microphonePermissionGranted } = useSelector$1(devicePermissionSelector);
@@ -20994,6 +21221,8 @@ const ConfigurationPage = (props) => {
     getDevicePermissionState(setVideoState, setAudioState);
     let errorBarProps = usePropsFor$1(ErrorBar);
     const adapter = useAdapter();
+    /* @conditional-compile-remove(video-background-effects) */
+    const theme = react.useTheme();
     const deviceState = adapter.getState().devices;
     /* @conditional-compile-remove(unsupported-browser) */
     const environmentInfo = adapter.getState().environmentInfo;
@@ -21108,6 +21337,10 @@ const ConfigurationPage = (props) => {
                     React__default['default'].createElement(react.Stack.Item, { styles: callDetailsContainerStylesDesktop },
                         title,
                         callDescription),
+                    /* @conditional-compile-remove(video-background-effects) */
+                    React__default['default'].createElement(react.DefaultButton, { iconProps: { iconName: 'OptionsVideoBackgroundEffect' }, styles: effectsButtonStyles(theme), onClick: () => {
+                            setVideoEffectsPane(!showVideoEffectsPane);
+                        } }, locale.strings.call.effects),
                     React__default['default'].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
                         /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
                         /* @conditional-compile-remove(call-readiness) */ audioState), 
@@ -21116,7 +21349,9 @@ const ConfigurationPage = (props) => {
                             setIsPermissionsModalDismissed(true);
                         } })))),
                 React__default['default'].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                    React__default['default'].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton }))))));
+                    React__default['default'].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton })))),
+        /* @conditional-compile-remove(video-background-effects) */
+        React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setVideoEffectsPane, adapter: adapter })));
 };
 const localPreviewTrampoline = (mobileView, doNotShow) => {
     /* @conditional-compile-remove(rooms) */
@@ -23242,7 +23477,8 @@ const callCompositeContainerStyles = {
         // Start a new stacking context so that any `position:absolute` elements
         // inside the call composite do not compete with its siblings.
         position: 'relative',
-        width: '100%'
+        width: '100%',
+        minWidth: 0
     }
 };
 /** @private */
@@ -23766,20 +24002,6 @@ const CallWithChatPane = (props) => {
             React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * Pane that is used to show video effects button
- * @private
- */
-/** @beta */
-const VideoEffectsPane = (props) => {
-    return VideoEffectsPaneTrampoline(props.showVideoEffectsOptions, props.setshowVideoEffectsOptions);
-};
-const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffectsOptions) => {
-    /* @conditional-compile-remove(video-background-effects) */
-    return (React__default['default'].createElement(react.Panel, { headerText: "Effects", isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true }));
-};
-
 // Copyright (c) Microsoft Corporation.
 const CallWithChatScreen = (props) => {
     const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;
@@ -23935,7 +24157,7 @@ const CallWithChatScreen = (props) => {
                     style: callCompositeContainerCSS },
                     React__default['default'].createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme }))),
                 /* @conditional-compile-remove(video-background-effects) */
-                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane }),
+                React__default['default'].createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane, adapter: callAdapter }),
                 chatProps.adapter && callAdapter && hasJoinedCall && (React__default['default'].createElement(CallWithChatPane, { chatCompositeProps: chatProps, inviteLink: props.joinInvitationURL, onClose: closePane, chatAdapter: chatProps.adapter, callAdapter: callAdapter, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, onChatButtonClicked: showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined, modalLayerHostId: modalLayerHostId, mobileView: mobileView, activePane: activePane, 
                     /* @conditional-compile-remove(file-sharing) */
                     fileSharing: props.fileSharing, rtl: props.rtl, callControls: typeof props.callControls !== 'boolean' ? props.callControls : undefined }))),