@azure/communication-react 1.0.0-alpha-20211126.11.0 → 1.0.0-alpha

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

@@ -187,7 +187,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.0.0-alpha-20211126.0011.0';
+var telemetryVersion = '1.0.0-alpha+20211203.0008.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -291,7 +291,7 @@ const getDiagnostics = (state, props) => { var _a; return (_a = state.calls[prop
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$l = (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); } }
@@ -329,7 +329,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$l(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$p(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -391,7 +391,7 @@ const devicesButtonSelector = reselect__namespace.createSelector([getDeviceManag
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$k = (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); } }
@@ -415,7 +415,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @public
  */
 const createDefaultCallingHandlers = memoizeOne__default['default']((callClient, callAgent, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$o(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?
@@ -435,7 +435,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$o(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -448,7 +448,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             });
         }
     });
-    const onToggleCamera = (options) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (call && _isInCall(call.state)) {
             const stream = call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
             if (stream) {
@@ -478,19 +478,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
     const onStartCall = (participants, options) => {
         return callAgent ? callAgent.startCall(participants, options) : undefined;
     };
-    const onSelectMicrophone = (device) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -513,17 +513,17 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$o(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$k(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$k(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$k(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = () => __awaiter$k(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
-    const onCreateLocalStreamView = (options) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onStartScreenShare = () => __awaiter$o(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$o(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$o(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = () => __awaiter$o(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
+    const onCreateLocalStreamView = (options) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!call || call.localVideoStreams.length === 0) {
             return;
         }
@@ -537,7 +537,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
         return callClient.createView(call.id, undefined, localStream, options);
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -561,7 +561,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             callClient.createView(call.id, participant.identifier, screenShareStream, { scalingMode: 'Fit' });
         }
     });
-    const onDisposeRemoteStreamView = (userId) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$o(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -582,13 +582,13 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$o(void 0, void 0, void 0, function* () {
         // TODO: we need to remember which LocalVideoStream was used for LocalPreview and dispose that one. For now
         // assume any unparented view is a LocalPreview and stop all since those are only used for LocalPreview
         // currently.
         yield disposeAllLocalPreviewViews(callClient);
     });
-    const onRemoveParticipant = (userId) => __awaiter$k(void 0, void 0, void 0, function* () {
+    const onRemoveParticipant = (userId) => __awaiter$o(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.removeParticipant(fromFlatCommunicationIdentifier(userId)));
     });
     return {
@@ -780,7 +780,7 @@ const typingIndicatorStringStyle = react.mergeStyles({
     wordBreak: 'break-word'
 });
 
-var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit."};var messageStatusIndicator$d={deliveredTooltipText:"Sent",seenTooltipText:"Seen",sendingTooltipText:"Sending",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave Call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker"};var participantsButton$d={label:"People",tooltipContent:"Show Participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$d={onLabel:"Stop sharing",offLabel:"Share",tooltipOnContent:"Stop sharing your screen",tooltipOffContent:"Share your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Remove",editedTag:"Edited",liveAuthorIntro:"{author} says",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d};
+var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit."};var messageStatusIndicator$d={deliveredTooltipText:"Sent",seenTooltipText:"Seen",sendingTooltipText:"Sending",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave Call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker"};var participantsButton$d={label:"People",tooltipContent:"Show Participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$d={onLabel:"Stop sharing",offLabel:"Share",tooltipDisabledContent:"Screen sharing is disabled",tooltipOnContent:"Stop sharing your screen",tooltipOffContent:"Share your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Remove",editedTag:"Edited",liveAuthorIntro:"{author} says",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d};
 
 var participantItem$c={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted"};var typingIndicator$c={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$c={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit."};var messageStatusIndicator$c={deliveredTooltipText:"Sent",seenTooltipText:"Seen",sendingTooltipText:"Sending",failedToSendTooltipText:"Failed to send"};var endCallButton$c={label:"Leave"};var cameraButton$c={onLabel:"Turn off",offLabel:"Turn on"};var microphoneButton$c={onLabel:"Mute",offLabel:"Unmute"};var devicesButton$c={label:"Options",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker"};var participantsButton$c={label:"People",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$c={onLabel:"Stop",offLabel:"Share"};var messageThread$c={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Remove",editedTag:"Edited",liveAuthorIntro:"{author} says",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit"};var errorBar$c={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen."};var videoGallery$c={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You"};var en_GB$1 = {participantItem:participantItem$c,typingIndicator:typingIndicator$c,sendBox:sendBox$c,messageStatusIndicator:messageStatusIndicator$c,endCallButton:endCallButton$c,cameraButton:cameraButton$c,microphoneButton:microphoneButton$c,devicesButton:devicesButton$c,participantsButton:participantsButton$c,screenShareButton:screenShareButton$c,messageThread:messageThread$c,errorBar:errorBar$c,videoGallery:videoGallery$c};
 
@@ -2526,7 +2526,7 @@ const ChatMessageComponentAsMessageBubble = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$j = (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); } }
@@ -2552,7 +2552,7 @@ const ChatMessageComponent = (props) => {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     else if (isEditing) {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { initialValue: (_a = props.message.content) !== null && _a !== void 0 ? _a : '', inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text) => __awaiter$j(void 0, void 0, void 0, function* () {
+        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { initialValue: (_a = props.message.content) !== null && _a !== void 0 ? _a : '', inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text) => __awaiter$n(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     props.message.messageId &&
                     (yield props.onUpdateMessage(props.message.messageId, text));
@@ -2610,7 +2610,7 @@ const isNarrowWidth = (containerWidthRem) => containerWidthRem <= convertRemToPx
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$i = (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); } }
@@ -2787,7 +2787,7 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
  */
 const MessageThread = (props) => {
     var _a;
-    const { messages: newMessages, userId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 0, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage } = props;
+    const { messages: newMessages, userId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage } = props;
     const [messages, setMessages] = React.useState([]);
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
     // Otherwise chatScrollDivRef.current.clientHeight is wrong if we scroll to bottom before messages are initialized.
@@ -2829,7 +2829,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$i(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$m(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -2880,7 +2880,7 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$i(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$m(void 0, void 0, void 0, function* () {
         if (chatScrollDivRef.current && !isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -3225,7 +3225,7 @@ const ParticipantItem = (props) => {
 /**
  * @private
  */
-const participantListStyle = react.mergeStyles({
+const participantListStyle$1 = react.mergeStyles({
     height: '100%',
     padding: '0.125rem'
 });
@@ -3318,7 +3318,7 @@ const ParticipantList = (props) => {
         return menuItems;
     };
     const participantItemStyles = react.merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles);
-    return (React__default['default'].createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root) }, displayedParticipants.map((participant) => onRenderParticipant
+    return (React__default['default'].createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle$1, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.root) }, displayedParticipants.map((participant) => onRenderParticipant
         ? onRenderParticipant(participant)
         : onRenderParticipantDefault(participant, strings, myUserId, onRemoveParticipant, onRenderAvatar, createParticipantMenuItems, participantItemStyles))));
 };
@@ -3550,10 +3550,10 @@ const VideoTile = (props) => {
  * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
  */
 const RemoteVideoTile = React__default['default'].memo((props) => {
-    const { isAvailable, isMuted, isSpeaking, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOption, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
+    const { isAvailable, isMuted, isSpeaking, isScreenSharing, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
     React.useEffect(() => {
         if (isAvailable && !renderElement) {
-            onCreateRemoteStreamView && onCreateRemoteStreamView(userId, remoteVideoViewOption);
+            onCreateRemoteStreamView && onCreateRemoteStreamView(userId, remoteVideoViewOptions);
         }
         if (!isAvailable) {
             onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
@@ -3562,15 +3562,17 @@ const RemoteVideoTile = React__default['default'].memo((props) => {
         isAvailable,
         onCreateRemoteStreamView,
         onDisposeRemoteStreamView,
-        remoteVideoViewOption,
+        remoteVideoViewOptions,
         renderElement,
         userId
     ]);
     React.useEffect(() => {
         return () => {
-            onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
+            if (isScreenSharing) {
+                onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
+            }
         };
-    }, [onDisposeRemoteStreamView, userId]);
+    }, [onDisposeRemoteStreamView, userId, isScreenSharing]);
     const renderVideoStreamElement = React.useMemo(() => {
         // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
         // implies that, after their threshold, all streams have no child (blank video)
@@ -3739,7 +3741,13 @@ const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', widt
  * @private
  */
 const videoGalleryContainerStyle = {
-    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem', gap: '0.5rem' }
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+};
+/**
+ * @private
+ */
+const videoGalleryContainerTokens = {
+    childrenGap: '0.5rem'
 };
 /**
  * Small floating modal width and height in rem for small screen
@@ -3754,22 +3762,14 @@ const LARGE_FLOATING_MODAL_SIZE_REM = { width: 10, height: 7.5 };
  */
 const floatingLocalVideoModalStyle = (theme, isNarrow) => {
     return react.concatStyleSets({
-        root: {
-            width: '100%',
-            height: '100%'
-        },
-        main: {
-            minWidth: isNarrow ? `${SMALL_FLOATING_MODAL_SIZE_REM.width}rem` : `${LARGE_FLOATING_MODAL_SIZE_REM.width}rem`,
-            minHeight: isNarrow
-                ? `${SMALL_FLOATING_MODAL_SIZE_REM.height}rem`
-                : `${LARGE_FLOATING_MODAL_SIZE_REM.height}rem`,
-            position: 'absolute',
-            bottom: '0.5rem',
-            boxShadow: theme.effects.elevation8,
-            borderRadius: theme.effects.roundedCorner4,
-            overflow: 'hidden'
-        }
-    }, { main: theme.rtl ? { left: '0.5rem' } : { right: '0.5rem' } });
+        main: localVideoTileContainerStyle(theme, isNarrow)
+    }, { main: { boxShadow: theme.effects.elevation8 } });
+};
+/**
+ * @private
+ */
+const localVideoTileContainerStyle = (theme, isNarrow) => {
+    return Object.assign({ minWidth: isNarrow ? `${SMALL_FLOATING_MODAL_SIZE_REM.width}rem` : `${LARGE_FLOATING_MODAL_SIZE_REM.width}rem`, minHeight: isNarrow ? `${SMALL_FLOATING_MODAL_SIZE_REM.height}rem` : `${LARGE_FLOATING_MODAL_SIZE_REM.height}rem`, position: 'absolute', bottom: '0.5rem', borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl ? { left: '0.5rem' } : { right: '0.5rem' }));
 };
 /**
  * @private
@@ -3917,18 +3917,24 @@ const loadingStyle = react.mergeStyles({
  * https://reactjs.org/docs/react-api.html#reactmemo
  */
 const RemoteScreenShare = React__default['default'].memo((props) => {
-    const { onCreateRemoteStreamView, screenShareParticipant } = props;
+    const { userId, displayName, isMuted, renderElement, isVideoStreamOn, onCreateRemoteStreamView, onDisposeRemoteStreamView } = props;
     const locale = useLocale$1();
-    const screenShareStream = screenShareParticipant === null || screenShareParticipant === void 0 ? void 0 : screenShareParticipant.screenShareStream;
-    if ((screenShareStream === null || screenShareStream === void 0 ? void 0 : screenShareStream.isAvailable) && !(screenShareStream === null || screenShareStream === void 0 ? void 0 : screenShareStream.renderElement)) {
-        screenShareParticipant && onCreateRemoteStreamView && onCreateRemoteStreamView(screenShareParticipant.userId);
+    if (!renderElement) {
+        onCreateRemoteStreamView && onCreateRemoteStreamView(userId);
     }
-    const loadingMessage = (screenShareParticipant === null || screenShareParticipant === void 0 ? void 0 : screenShareParticipant.displayName)
+    React.useEffect(() => {
+        return () => {
+            if (isVideoStreamOn) {
+                onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
+            }
+        };
+    }, [onDisposeRemoteStreamView, userId, isVideoStreamOn]);
+    const loadingMessage = displayName
         ? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
-            participant: screenShareParticipant === null || screenShareParticipant === void 0 ? void 0 : screenShareParticipant.displayName
+            participant: displayName
         })
         : '';
-    return (React__default['default'].createElement(VideoTile, { displayName: screenShareParticipant === null || screenShareParticipant === void 0 ? void 0 : screenShareParticipant.displayName, isMuted: screenShareParticipant === null || screenShareParticipant === void 0 ? void 0 : screenShareParticipant.isMuted, renderElement: (screenShareStream === null || screenShareStream === void 0 ? void 0 : screenShareStream.renderElement) ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: screenShareStream === null || screenShareStream === void 0 ? void 0 : screenShareStream.renderElement })) : undefined, onRenderPlaceholder: () => React__default['default'].createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
+    return (React__default['default'].createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement }) : undefined, onRenderPlaceholder: () => React__default['default'].createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
 });
 const LoadingSpinner = (props) => {
     return (React__default['default'].createElement(react.Stack, { verticalAlign: "center", className: loadingStyle },
@@ -3953,8 +3959,8 @@ const DRAG_OPTIONS = {
  * @public
  */
 const VideoGallery = (props) => {
-    var _a, _b, _c, _d;
-    const { localParticipant, remoteParticipants = [], localVideoViewOption, remoteVideoViewOption, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS } = props;
+    var _a, _b, _c, _d, _e;
+    const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
@@ -3992,7 +3998,7 @@ const VideoGallery = (props) => {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         if (localVideoStream && !localVideoStream.renderElement) {
-            onCreateLocalStreamView && onCreateLocalStreamView(localVideoViewOption);
+            onCreateLocalStreamView && onCreateLocalStreamView(localVideoViewOptions);
         }
         return (React__default['default'].createElement(VideoTile, { key: localParticipant.userId, userId: localParticipant.userId, renderElement: (localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.renderElement) ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: localVideoStream.renderElement })) : undefined, showLabel: !(shouldFloatLocalVideo && isNarrow), displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: localParticipant.displayName, styles: localVideoTileStylesThemed, onRenderPlaceholder: onRenderAvatar, isMuted: localParticipant.isMuted, showMuteIndicator: showMuteIndicator }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4009,8 +4015,8 @@ const VideoGallery = (props) => {
     ]);
     const defaultOnRenderVideoTile = React.useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
-        return (React__default['default'].createElement(RemoteVideoTile, { key: participant.userId, userId: participant.userId, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOption: isVideoParticipant ? remoteVideoViewOption : undefined, isMuted: participant.isMuted, isSpeaking: participant.isSpeaking, displayName: participant.displayName, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator }));
-    }, [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOption, onRenderAvatar, showMuteIndicator]);
+        return (React__default['default'].createElement(RemoteVideoTile, Object.assign({ key: participant.userId }, participant, { onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator })));
+    }, [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator]);
     const videoTiles = onRenderRemoteVideoTile
         ? visibleVideoParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
         : visibleVideoParticipants.current.map((participant) => {
@@ -4039,17 +4045,20 @@ const VideoGallery = (props) => {
         gridTiles.push(localVideoTile);
     }
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = (React__default['default'].createElement(RemoteScreenShare, { screenShareParticipant: screenShareParticipant, onCreateRemoteStreamView: onCreateRemoteStreamView }));
+    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView })));
     React.useEffect(() => {
         if (containerRef.current) {
             containerRef.current.id = `video-gallery-${uuid.v4()}`;
         }
     }, [containerRef]);
+    const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
     return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
-        shouldFloatLocalVideo && (React__default['default'].createElement(react.Modal, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: (_d = containerRef.current) === null || _d === void 0 ? void 0 : _d.id } }, localParticipant && localVideoTile)),
-        React__default['default'].createElement(react.Stack, { horizontal: false, styles: videoGalleryContainerStyle },
+        shouldFloatLocalVideo &&
+            localParticipant &&
+            (horizontalGalleryPresent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoTile)) : (React__default['default'].createElement(react.Modal, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: floatingLocalVideoModalStyle(theme, isNarrow), layerProps: { hostId: (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.id } }, localVideoTile))),
+        React__default['default'].createElement(react.Stack, { horizontal: false, styles: videoGalleryContainerStyle, tokens: videoGalleryContainerTokens },
             screenShareParticipant ? (remoteScreenShareComponent) : (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn) ? (localScreenShareStreamComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            horizontalGalleryTiles && horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), horizontalGalleryStyles: react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles === null || styles === void 0 ? void 0 : styles.horizontalGallery), childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryTiles)))));
+            horizontalGalleryPresent && (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), horizontalGalleryStyles: react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles === null || styles === void 0 ? void 0 : styles.horizontalGallery), childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryTiles)))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -4161,18 +4170,16 @@ const controlButtonStyles = {
     flexContainer: {
         flexFlow: 'column',
         display: 'contents'
+    },
+    label: {
+        fontSize: '0.625rem',
+        fontWeight: '400',
+        lineHeight: '1rem',
+        cursor: 'pointer',
+        display: 'block',
+        margin: '0rem 0.25rem'
     }
 };
-/**
- * @private
- */
-const controlButtonLabelStyles = {
-    fontSize: '0.625rem',
-    lineHeight: '1rem',
-    cursor: 'pointer',
-    display: 'block',
-    margin: '0rem 0.25rem'
-};
 /**
  * making it Partial as IContextualMenuStyles has all its props non-optional and we only need title to be defined here.
  *
@@ -4242,23 +4249,22 @@ const DefaultRenderIcon = (props) => {
  * @public
  */
 const ControlBarButton = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const componentStyles = react.concatStyleSets(controlButtonStyles, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
-    const theme = useTheme();
     const labelText = (_d = (_b = props === null || props === void 0 ? void 0 : props.text) !== null && _b !== void 0 ? _b : (_c = props === null || props === void 0 ? void 0 : props.strings) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ((props === null || props === void 0 ? void 0 : props.checked) ? (_e = props === null || props === void 0 ? void 0 : props.strings) === null || _e === void 0 ? void 0 : _e.onLabel : (_f = props === null || props === void 0 ? void 0 : props.strings) === null || _f === void 0 ? void 0 : _f.offLabel);
-    const DefaultRenderText = React.useCallback(() => {
-        var _a;
-        return (React__default['default'].createElement(react.Text, { key: props === null || props === void 0 ? void 0 : props.labelKey, className: react.mergeStyles(controlButtonLabelStyles, theme.palette.neutralPrimary, (_a = props === null || props === void 0 ? void 0 : props.styles) === null || _a === void 0 ? void 0 : _a.label) }, labelText));
-    }, [labelText, props === null || props === void 0 ? void 0 : props.labelKey, (_g = props === null || props === void 0 ? void 0 : props.styles) === null || _g === void 0 ? void 0 : _g.label, theme]);
-    const tooltipContent = (_j = (_h = props === null || props === void 0 ? void 0 : props.strings) === null || _h === void 0 ? void 0 : _h.tooltipContent) !== null && _j !== void 0 ? _j : ((props === null || props === void 0 ? void 0 : props.checked) ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
+    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled)
+        ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent
+        : (props === null || props === void 0 ? void 0 : props.checked)
+            ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent
+            : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
     const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
     return (React__default['default'].createElement(ControlButtonTooltip, { content: tooltipContent, id: tooltipId },
-        React__default['default'].createElement(react.DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel ? (_o = props.onRenderText) !== null && _o !== void 0 ? _o : DefaultRenderText : undefined, onRenderIcon: (_p = props.onRenderIcon) !== null && _p !== void 0 ? _p : DefaultRenderIcon }))));
+        React__default['default'].createElement(react.DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon }), props.showLabel ? labelText : React__default['default'].createElement(React__default['default'].Fragment, null))));
 };
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$h = (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); } }
@@ -4267,7 +4273,7 @@ var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments,
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const defaultLocalVideoViewOption = {
+const defaultLocalVideoViewOptions = {
     scalingMode: 'Crop',
     isMirrored: true
 };
@@ -4282,22 +4288,22 @@ const onRenderCameraOffIcon = () => React__default['default'].createElement(reac
  */
 const CameraButton = (props) => {
     var _a, _b, _c;
-    const { localVideoViewOption, onToggleCamera } = props;
+    const { localVideoViewOptions, onToggleCamera } = props;
     const [waitForCamera, setWaitForCamera] = React.useState(false);
     const localeStrings = useLocale$1().strings.cameraButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    const onToggleClick = React.useCallback(() => __awaiter$h(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$l(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
             try {
-                yield onToggleCamera(localVideoViewOption !== null && localVideoViewOption !== void 0 ? localVideoViewOption : defaultLocalVideoViewOption);
+                yield onToggleCamera(localVideoViewOptions !== null && localVideoViewOptions !== void 0 ? localVideoViewOptions : defaultLocalVideoViewOptions);
             }
             finally {
                 setWaitForCamera(false);
             }
         }
-    }), [localVideoViewOption, onToggleCamera]);
+    }), [localVideoViewOptions, onToggleCamera]);
     return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { disabled: props.disabled || waitForCamera, onClick: onToggleCamera ? onToggleClick : props.onClick, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderCameraOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderCameraOffIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'cameraButtonLabel' })));
 };
 
@@ -4713,8 +4719,24 @@ const ScreenShareButton = (props) => {
     var _a, _b, _c, _d;
     const localeStrings = useLocale$1().strings.screenShareButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel' })));
+    const theme = react.useTheme();
+    const styles = screenshareButtonStyles(theme);
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { styles: styles, onClick: (_a = props.onToggleScreenShare) !== null && _a !== void 0 ? _a : props.onClick, onRenderOnIcon: (_b = props.onRenderOnIcon) !== null && _b !== void 0 ? _b : onRenderScreenShareOnIcon, onRenderOffIcon: (_c = props.onRenderOffIcon) !== null && _c !== void 0 ? _c : onRenderScreenShareOffIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'screenShareButtonLabel' })));
 };
+const screenshareButtonStyles = (theme) => ({
+    rootChecked: {
+        background: theme.palette.themePrimary,
+        color: react.DefaultPalette.white,
+        ':focus::after': { outlineColor: `${react.DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
+    },
+    rootCheckedHovered: {
+        background: theme.palette.themePrimary,
+        color: react.DefaultPalette.white,
+        ':focus::after': { outlineColor: `${react.DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
+    },
+    labelHovered: { color: react.DefaultPalette.white },
+    labelChecked: { color: react.DefaultPalette.white }
+});
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -5083,7 +5105,7 @@ const findSelector$1 = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$g = (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); } }
@@ -5105,38 +5127,38 @@ var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments,
 const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, chatThreadClient) => {
     let messageIterator = undefined;
     return {
-        onSendMessage: (content) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onSendMessage: (content) => __awaiter$k(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest);
         }),
-        onUpdateMessage: (messageId, content) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateMessage(messageId, { content });
         }),
-        onDeleteMessage: (messageId) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$g(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$g(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$g(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$k(void 0, void 0, void 0, function* () {
             var _a;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
                 // Also allows recovery via retries in case of transient errors.
-                messageIterator = chatThreadClient.listMessages();
+                messageIterator = chatThreadClient.listMessages({ maxPageSize: 50 });
             }
             let remainingMessagesToGet = messagesToLoad;
             let isAllChatMessagesLoaded = false;
@@ -5740,7 +5762,7 @@ const findSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$f = (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); } }
@@ -5789,10 +5811,10 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$f(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$j(this, void 0, void 0, function* () {
             this._context.setDeviceManagerCameras(dedupeById(yield this._deviceManager.getCameras()));
         });
-        this.audioDevicesUpdated = () => __awaiter$f(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$j(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -5915,7 +5937,7 @@ class CallError extends Error {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$e = (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); } }
@@ -6404,7 +6426,7 @@ class CallContext$1 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$e(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$i(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -6467,7 +6489,7 @@ const findOldestCallEnded = (calls) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$d = (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); } }
@@ -6487,42 +6509,42 @@ class ProxyCall {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$d(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
@@ -6720,7 +6742,7 @@ class RemoteVideoStreamSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$c = (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); } }
@@ -6730,7 +6752,7 @@ var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewRemoteVideo(context, internalContext, callId, participantId, stream, options) {
-    return __awaiter$c(this, void 0, void 0, function* () {
+    return __awaiter$g(this, void 0, void 0, function* () {
         // Render RemoteVideoStream that is part of a Call
         const streamId = stream.id;
         let participantKey;
@@ -6750,7 +6772,8 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
             return;
         }
         if (renderInfo.status === 'Rendering') {
-            console.warn('RemoteVideoStream rendering is already in progress');
+            // Do not log to console here as this is a very common situation due to UI rerenders while
+            // the video rendering is in progress.
             return;
         }
         if (renderInfo.status === 'Stopping') {
@@ -6790,7 +6813,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
     });
 }
 function createViewLocalVideo(context, internalContext, callId, options) {
-    return __awaiter$c(this, void 0, void 0, function* () {
+    return __awaiter$g(this, void 0, void 0, function* () {
         // Render LocalVideoStream that is part of a Call
         const renderInfo = internalContext.getLocalRenderInfo(callId);
         if (!renderInfo) {
@@ -6802,7 +6825,8 @@ function createViewLocalVideo(context, internalContext, callId, options) {
             return;
         }
         if (renderInfo.status === 'Rendering') {
-            console.warn('LocalVideoStream rendering is already in progress');
+            // Do not log to console here as this is a very common situation due to UI rerenders while
+            // the video rendering is in progress.
             return;
         }
         if (renderInfo.status === 'Stopping') {
@@ -6844,14 +6868,15 @@ function createViewLocalVideo(context, internalContext, callId, options) {
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$c(this, void 0, void 0, function* () {
+    return __awaiter$g(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
             return;
         }
         if (renderInfo && renderInfo.status === 'Rendering') {
-            console.warn('Unparented LocalVideoStream rendering is already in progress');
+            // Do not log to console here as this is a very common situation due to UI rerenders while
+            // the video rendering is in progress.
             return;
         }
         if (renderInfo && renderInfo.status === 'Stopping') {
@@ -7665,7 +7690,7 @@ class InternalCallContext {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$b = (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); } }
@@ -7687,7 +7712,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$f(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.
@@ -7698,7 +7723,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$f(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.
@@ -7813,7 +7838,7 @@ const Constants = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$a = (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); } }
@@ -8090,7 +8115,7 @@ class ChatContext$1 {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$a(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$e(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -8193,7 +8218,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$9 = (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); } }
@@ -8276,7 +8301,7 @@ class EventSubscriber {
             this.fetchLastParticipantMessage(event.threadId, 'participantAdded');
         };
         // This is a hot fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$9(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$d(this, void 0, void 0, function* () {
             var e_1, _a;
             try {
                 for (var _b = __asyncValues$1(this.chatClient
@@ -8362,7 +8387,7 @@ class EventSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$8 = (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); } }
@@ -8384,7 +8409,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$8(this, void 0, void 0, function* () {
+                return __awaiter$c(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -8399,7 +8424,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$8(this, void 0, void 0, function* () {
+                        return __awaiter$c(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -8483,7 +8508,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$7 = (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); } }
@@ -8502,14 +8527,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(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$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     // Retry logic?
                     const { content } = args[0];
                     const clientMessageId = nanoid.nanoid(); // Generate a local short uuid for message
@@ -8547,7 +8572,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -8556,7 +8581,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(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)) {
@@ -8574,7 +8599,7 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -8582,7 +8607,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(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);
@@ -8590,7 +8615,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -8598,7 +8623,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$7(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -8635,7 +8660,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$6 = (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); } }
@@ -8654,7 +8679,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$6(this, void 0, void 0, function* () {
+                    return __awaiter$a(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -8667,7 +8692,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$6(this, void 0, void 0, function* () {
+                    return __awaiter$a(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -8687,7 +8712,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$6(this, void 0, void 0, function* () {
+                    return __awaiter$a(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -8698,7 +8723,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$6(this, void 0, void 0, function* () {
+                    return __awaiter$a(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -8762,7 +8787,7 @@ const createStatefulChatClientWithDeps = (chatClient, args, options) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$5 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+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); } }
@@ -8867,7 +8892,7 @@ class AzureCommunicationChatAdapter {
     }
     fetchInitialData() {
         var e_1, _a;
-        return __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
             try {
                 yield this.chatThreadClient.getProperties();
             }
@@ -8909,55 +8934,55 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 yield this.handlers.onSendMessage(content);
             }));
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
             yield this.handlers.onTyping();
         });
     }
     removeParticipant(userId) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 return yield this.handlers.onUpdateMessage(messageId, content);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$5(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -9010,7 +9035,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$5(this, void 0, void 0, function* () {
+        return __awaiter$9(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -9052,7 +9077,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$5(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$9(void 0, void 0, void 0, function* () {
     const chatClient = createStatefulChatClient({
         userId,
         displayName,
@@ -9073,7 +9098,7 @@ const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, di
  *
  * @public
  */
-const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$5(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$9(void 0, void 0, void 0, function* () {
     return new AzureCommunicationChatAdapter(chatClient, chatThreadClient);
 });
 const isChatError = (e) => {
@@ -9413,7 +9438,7 @@ const topicNameLabelStyle = react.mergeStyles({
 /**
  * @private
  */
-react.mergeStyles({
+const participantListWrapper = react.mergeStyles({
     boxShadow: '0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13)',
     width: '20rem',
     // max width at 50% of view so the People Pane is not squeezing the Message Pane to almost nothing when on small screen or high zoom in
@@ -9427,20 +9452,20 @@ const participantListContainerPadding = { childrenGap: '0.5rem' };
 /**
  * @private
  */
-react.mergeStyles({
+const listHeader = react.mergeStyles({
     fontSize: '1rem',
     margin: '1rem'
 });
 /**
  * @private
  */
-react.mergeStyles({
+const participantListStack = react.mergeStyles({
     height: '100%'
 });
 /**
  * @private
  */
-react.mergeStyles({
+const participantListStyle = react.mergeStyles({
     height: '100%',
     overflow: 'auto'
 });
@@ -9463,7 +9488,7 @@ const typingIndicatorChatCompositeStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$4 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+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); } }
@@ -9484,7 +9509,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider } = props;
     const [data, setData] = React__default['default'].useState();
     React.useEffect(() => {
-        (() => __awaiter$4(void 0, void 0, void 0, function* () {
+        (() => __awaiter$8(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const data = yield dataProvider(userId);
                 setData(data);
@@ -9622,16 +9647,17 @@ const usePropsFor$2 = (component) => {
  * @private
  */
 const ChatScreen = (props) => {
-    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, 
-    // onFetchParticipantMenuItems,  // Removed for GA release
-    options, styles } = props;
+    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, onFetchParticipantMenuItems, options, styles } = props;
     const defaultNumberOfChatMessagesToReload = 5;
     const sendBoxParentStyle = react.mergeStyles({ width: '100%' });
     const adapter = useAdapter$1();
     React.useEffect(() => {
         adapter.fetchInitialData();
     }, [adapter]);
+    const locale = useLocale();
+    const chatListHeader = locale.strings.chat.chatListHeader;
     const messageThreadProps = usePropsFor$2(MessageThread);
+    const participantListProps = usePropsFor$2(ParticipantList);
     const sendBoxProps = usePropsFor$2(SendBox);
     const typingIndicatorProps = usePropsFor$2(TypingIndicator);
     const headerProps = useAdaptedSelector$1(getHeaderProps);
@@ -9650,7 +9676,12 @@ const ChatScreen = (props) => {
                 React__default['default'].createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React__default['default'].createElement(react.Stack.Item, { align: "center", className: sendBoxParentStyle },
                     React__default['default'].createElement("div", { style: { paddingLeft: '0.5rem', paddingRight: '0.5rem' } }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
-                    React__default['default'].createElement(SendBox, Object.assign({}, sendBoxProps, { styles: sendBoxStyles })))))));
+                    React__default['default'].createElement(SendBox, Object.assign({}, sendBoxProps, { styles: sendBoxStyles })))),
+            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(react.Stack, { className: participantListWrapper },
+                React__default['default'].createElement(react.Stack, { className: participantListStack },
+                    React__default['default'].createElement(react.Stack.Item, { className: listHeader }, chatListHeader),
+                    React__default['default'].createElement(react.FocusZone, { className: participantListStyle },
+                        React__default['default'].createElement(ParticipantList, Object.assign({}, participantListProps, { onRenderAvatar: (userId, options) => (React__default['default'].createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { dataProvider: onFetchAvatarPersonaData }))), onFetchParticipantMenuItems: onFetchParticipantMenuItems })))))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9875,7 +9906,7 @@ const getCallCompositePage = (call, previousCall) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$7 = (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); } }
@@ -9894,59 +9925,59 @@ _component) => {
     return createCompositeHandlers(useAdapter());
 };
 const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onCreateLocalStreamView: (options) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.createStreamView(undefined, options);
     }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onCreateRemoteStreamView: (userId, options) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.createStreamView(userId, options);
     }),
-    onHangUp: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onHangUp: () => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.leaveCall();
     }),
-    onRemoveParticipant: (userId) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onRemoveParticipant: (userId) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onSelectCamera: (deviceInfo, options) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onSelectMicrophone: (deviceInfo) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.setMicrophone(deviceInfo);
     }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onSelectSpeaker: (deviceInfo) => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.setSpeaker(deviceInfo);
     }),
     onStartCall: (participants) => {
         const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
         return adapter.startCall(rawIds);
     },
-    onStartScreenShare: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onStartScreenShare: () => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.startScreenShare();
     }),
-    onStopScreenShare: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onStopScreenShare: () => __awaiter$7(void 0, void 0, void 0, function* () {
         yield adapter.stopScreenShare();
     }),
-    onToggleCamera: (options) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onToggleCamera: (options) => __awaiter$7(void 0, void 0, void 0, function* () {
         isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
     }),
-    onToggleMicrophone: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onToggleMicrophone: () => __awaiter$7(void 0, void 0, void 0, function* () {
         var _a;
         return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.isMuted) ? yield adapter.unmute() : yield adapter.mute();
     }),
-    onToggleScreenShare: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onToggleScreenShare: () => __awaiter$7(void 0, void 0, void 0, function* () {
         var _b;
         return ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.isScreenSharingOn)
             ? yield adapter.stopScreenShare()
             : yield adapter.startScreenShare();
     }),
-    onStartLocalVideo: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onStartLocalVideo: () => __awaiter$7(void 0, void 0, void 0, function* () {
         if (adapter.getState().call) {
             return adapter.startCamera();
         }
     }),
-    onDisposeLocalStreamView: () => __awaiter$3(void 0, void 0, void 0, function* () {
+    onDisposeLocalStreamView: () => __awaiter$7(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView();
     }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$3(void 0, void 0, void 0, function* () {
+    onDisposeRemoteStreamView: (userId) => __awaiter$7(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView(userId);
     })
 }));
@@ -10016,6 +10047,7 @@ const getIsRecordingActive = (state) => { var _a; return !!((_a = state.call) ==
 const getUserFacingDiagnostics = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.diagnostics; };
 
 // Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
 const MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;
 /** @private */
 const controlBarContainerStyles = {
@@ -10053,17 +10085,6 @@ const groupCallLeaveButtonCompressedStyle = {
         flexFlow: 'row'
     }
 };
-/**
- * @private
- */
-const checkedButtonOverrideStyles = (theme, isChecked) => ({
-    rootChecked: {
-        background: theme.palette.themePrimary,
-        color: react.DefaultPalette.white,
-        ':focus::after': { outlineColor: `${react.DefaultPalette.white} !important` } // added !important to avoid override by FluentUI button styles
-    },
-    label: isChecked ? { color: react.DefaultPalette.white } : {}
-});
 /**
  * Styles that can be applied to ensure flyout items have the minimum touch target size.
  *
@@ -10152,14 +10173,12 @@ const CallControls = (props) => {
     const participantsButtonProps = usePropsFor$1(ParticipantsButton);
     const devicesButtonProps = usePropsFor$1(DevicesButton);
     const hangUpButtonProps = usePropsFor$1(EndCallButton);
-    const theme = useTheme();
-    const screenShareButtonStyles = React.useMemo(() => mergeButtonBaseStyles(checkedButtonOverrideStyles(theme, screenShareButtonProps.checked)), [screenShareButtonProps.checked, theme.palette.themePrimary]);
     const participantsButtonStyles = React.useMemo(() => mergeButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}), [props.increaseFlyoutItemSize]);
     const devicesButtonStyles = React.useMemo(() => mergeButtonBaseStyles(props.increaseFlyoutItemSize ? devicesButtonWithIncreasedTouchTargets : {}), [props.increaseFlyoutItemSize]);
     const compactMode = (options === null || options === void 0 ? void 0 : options.displayType) === 'compact';
     const microphoneButton = (options === null || options === void 0 ? void 0 : options.microphoneButton) !== false && (React__default['default'].createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: !compactMode, styles: controlButtonBaseStyle }, microphoneButtonStrings)));
     const cameraButton = (options === null || options === void 0 ? void 0 : options.cameraButton) !== false && (React__default['default'].createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-camera-button" }, cameraButtonProps, { showLabel: !compactMode, styles: controlButtonBaseStyle })));
-    const screenShareButton = (options === null || options === void 0 ? void 0 : options.screenShareButton) !== false && (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { styles: screenShareButtonStyles, showLabel: !compactMode, disabled: (options === null || options === void 0 ? void 0 : options.screenShareButton) !== true && ((_a = options === null || options === void 0 ? void 0 : options.screenShareButton) === null || _a === void 0 ? void 0 : _a.disabled) })));
+    const screenShareButton = (options === null || options === void 0 ? void 0 : options.screenShareButton) !== false && (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: !compactMode, disabled: (options === null || options === void 0 ? void 0 : options.screenShareButton) !== true && ((_a = options === null || options === void 0 ? void 0 : options.screenShareButton) === null || _a === void 0 ? void 0 : _a.disabled) })));
     const participantButton = (options === null || options === void 0 ? void 0 : options.participantsButton) !== false && (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: !compactMode, callInvitationURL: callInvitationURL, onFetchParticipantMenuItems: onFetchParticipantMenuItems, disabled: (options === null || options === void 0 ? void 0 : options.participantsButton) !== true && ((_b = options === null || options === void 0 ? void 0 : options.participantsButton) === null || _b === void 0 ? void 0 : _b.disabled), styles: participantsButtonStyles })));
     const devicesButton = (options === null || options === void 0 ? void 0 : options.devicesButton) !== false && (React__default['default'].createElement(DevicesButton
     /* By setting `persistMenu?` to true, we prevent options menu from getting hidden every time a participant joins or leaves. */
@@ -10467,11 +10486,11 @@ const VideoGalleryStyles = {
         minWidth: '6rem'
     }
 };
-const localVideoViewOption$2 = {
+const localVideoViewOptions$2 = {
     scalingMode: 'Crop',
     isMirrored: true
 };
-const remoteVideoViewOption = {
+const remoteVideoViewOptions = {
     scalingMode: 'Crop'
 };
 /**
@@ -10481,7 +10500,7 @@ const MediaGallery = (props) => {
     const videoGalleryProps = usePropsFor$1(VideoGallery);
     useLocalVideoStartTrigger(!!props.isVideoStreamOn);
     const VideoGalleryMemoized = React.useMemo(() => {
-        return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOption: localVideoViewOption$2, remoteVideoViewOption: remoteVideoViewOption, styles: VideoGalleryStyles, layout: "floatingLocalVideo", onRenderAvatar: (userId, options) => (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
+        return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", onRenderAvatar: (userId, options) => (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
                 React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))) })));
     }, [props.onFetchAvatarPersonaData, videoGalleryProps]);
     return VideoGalleryMemoized;
@@ -10559,7 +10578,7 @@ const videoTileStyles = {
 
 // Copyright (c) Microsoft Corporation.
 const onRenderEmptyPlaceholder = () => React__default['default'].createElement(React__default['default'].Fragment, null);
-const localVideoViewOption$1 = {
+const localVideoViewOptions$1 = {
     scalingMode: 'Crop',
     isMirrored: true
 };
@@ -10575,7 +10594,7 @@ const ExpandedLocalVideoTile = (props) => {
     React.useEffect(() => {
         if (videoStream && isVideoReady) {
             props.onCreateLocalStreamView &&
-                props.onCreateLocalStreamView(localVideoViewOption$1).catch((err) => console.log('Can not render video', err));
+                props.onCreateLocalStreamView(localVideoViewOptions$1).catch((err) => console.log('Can not render video', err));
         }
     }, [isVideoReady, videoStream, props, renderElement]);
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center", verticalAlign: "center", styles: containerStyles, grow: true },
@@ -10847,7 +10866,7 @@ const onRenderTitle = (iconType, props) => {
         icon,
         React__default['default'].createElement("span", null, props[0].text))) : (React__default['default'].createElement(React__default['default'].Fragment, null));
 };
-const localVideoViewOption = {
+const localVideoViewOptions = {
     scalingMode: 'Crop',
     isMirrored: true
 };
@@ -10874,22 +10893,25 @@ const LocalDeviceSettings = (props) => {
                         ? (_a = props.cameras[0]) === null || _a === void 0 ? void 0 : _a.id
                         : ''
                 : 'deniedOrUnknown', onChange: (event, option, index) => {
-                props.onSelectCamera(props.cameras[index !== null && index !== void 0 ? index : 0], localVideoViewOption);
+                props.onSelectCamera(props.cameras[index !== null && index !== void 0 ? index : 0], localVideoViewOptions);
             }, onRenderTitle: (props) => onRenderTitle('Camera', props) }),
-        React__default['default'].createElement(react.Dropdown, { label: soundLabel, placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: !props.microphonePermissionGranted, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
-                ? undefined
-                : locale.strings.call.microphonePermissionDenied, options: props.microphonePermissionGranted
-                ? getDropDownList(props.microphones)
-                : [{ key: 'deniedOrUnknown', text: '' }], defaultSelectedKey: props.microphonePermissionGranted
-                ? props.selectedMicrophone
-                    ? props.selectedMicrophone.id
-                    : defaultDeviceId(props.microphones)
-                : 'deniedOrUnknown', onChange: (event, option, index) => {
-                props.onSelectMicrophone(props.microphones[index !== null && index !== void 0 ? index : 0]);
-            }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }),
-        React__default['default'].createElement(react.Dropdown, { placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
-                props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
-            }, onRenderTitle: (props) => onRenderTitle('Speaker', props) })));
+        React__default['default'].createElement(react.Stack, null,
+            React__default['default'].createElement(react.Label, { id: 'call-composite-local-sound-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !props.microphonePermissionGranted }, soundLabel),
+            React__default['default'].createElement(react.Stack, { "data-ui-id": "call-composite-sound-settings", tokens: mainStackTokens },
+                React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: !props.microphonePermissionGranted, errorMessage: props.microphonePermissionGranted === undefined || props.microphonePermissionGranted
+                        ? undefined
+                        : locale.strings.call.microphonePermissionDenied, options: props.microphonePermissionGranted
+                        ? getDropDownList(props.microphones)
+                        : [{ key: 'deniedOrUnknown', text: '' }], defaultSelectedKey: props.microphonePermissionGranted
+                        ? props.selectedMicrophone
+                            ? props.selectedMicrophone.id
+                            : defaultDeviceId(props.microphones)
+                        : 'deniedOrUnknown', onChange: (event, option, index) => {
+                        props.onSelectMicrophone(props.microphones[index !== null && index !== void 0 ? index : 0]);
+                    }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }),
+                React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
+                        props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
+                    }, onRenderTitle: (props) => onRenderTitle('Speaker', props) })))));
 };
 const defaultDeviceId = (devices) => {
     if (devices.length === 0) {
@@ -10992,7 +11014,7 @@ const localPreviewTileStyle = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$2 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$6 = (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); } }
@@ -11012,7 +11034,7 @@ const LocalPreview = (props) => {
     const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector$1(devicePermissionSelector);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
     const adapter = useAdapter();
-    const onToggleMic = React.useCallback(() => __awaiter$2(void 0, void 0, void 0, function* () {
+    const onToggleMic = React.useCallback(() => __awaiter$6(void 0, void 0, void 0, function* () {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
     const theme = useTheme();
@@ -11336,7 +11358,7 @@ const mainScreenContainerStyleMobile = react.mergeStyles(Object.assign(Object.as
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$5 = (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); } }
@@ -11383,7 +11405,7 @@ const MainScreen = (props) => {
 const CallComposite = (props) => {
     const { adapter, callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, formFactor = 'desktop' } = props;
     React.useEffect(() => {
-        (() => __awaiter$1(void 0, void 0, void 0, function* () {
+        (() => __awaiter$5(void 0, void 0, void 0, function* () {
             yield adapter.askDevicePermission({ video: true, audio: true });
             adapter.queryCameras();
             adapter.queryMicrophones();
@@ -11474,7 +11496,7 @@ class DiagnosticsForwarder {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$4 = (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); } }
@@ -11612,29 +11634,29 @@ class AzureCommunicationCallAdapter {
         this.callAgent.dispose();
     }
     queryCameras() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 return this.deviceManager.getCameras();
             }));
         });
     }
     queryMicrophones() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 return this.deviceManager.getMicrophones();
             }));
         });
     }
     querySpeakers() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 return this.deviceManager.isSpeakerSelectionAvailable ? this.deviceManager.getSpeakers() : [];
             }));
         });
     }
     askDevicePermission(constrain) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 yield this.deviceManager.askDevicePermission(constrain);
             }));
         });
@@ -11670,7 +11692,7 @@ class AzureCommunicationCallAdapter {
         }
     }
     createStreamView(remoteUserId, options) {
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
             if (remoteUserId === undefined) {
                 yield this.handlers.onCreateLocalStreamView(options);
             }
@@ -11680,7 +11702,7 @@ class AzureCommunicationCallAdapter {
         });
     }
     disposeStreamView(remoteUserId) {
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
             if (remoteUserId === undefined) {
                 yield this.handlers.onDisposeLocalStreamView();
             }
@@ -11691,7 +11713,7 @@ class AzureCommunicationCallAdapter {
     }
     leaveCall() {
         var _a;
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
             const callId = (_a = this.call) === null || _a === void 0 ? void 0 : _a.id;
             yield this.handlers.onHangUp();
             this.unsubscribeCallEvents();
@@ -11706,29 +11728,29 @@ class AzureCommunicationCallAdapter {
         });
     }
     setCamera(device, options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 yield this.handlers.onSelectCamera(device, options);
             }));
         });
     }
     setMicrophone(device) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 yield this.handlers.onSelectMicrophone(device);
             }));
         });
     }
     setSpeaker(device) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 yield this.handlers.onSelectSpeaker(device);
             }));
         });
     }
     startCamera(options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 if (!isCameraOn(this.getState())) {
                     yield this.handlers.onToggleCamera(options);
                 }
@@ -11736,8 +11758,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     stopCamera() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 if (isCameraOn(this.getState())) {
                     yield this.handlers.onToggleCamera();
                 }
@@ -11745,8 +11767,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     mute() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 var _a, _b;
                 this.context.setIsLocalMicrophoneEnabled(false);
                 if (_isInCall((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) && !((_b = this.call) === null || _b === void 0 ? void 0 : _b.isMuted)) {
@@ -11756,8 +11778,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     unmute() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 var _a, _b;
                 this.context.setIsLocalMicrophoneEnabled(true);
                 if (_isInCall((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) && ((_b = this.call) === null || _b === void 0 ? void 0 : _b.isMuted)) {
@@ -11767,8 +11789,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     startScreenShare() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 var _a;
                 if (!((_a = this.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn)) {
                     yield this.handlers.onToggleScreenShare();
@@ -11777,8 +11799,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     stopScreenShare() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
                 var _a;
                 if ((_a = this.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn) {
                     yield this.handlers.onToggleScreenShare();
@@ -11797,7 +11819,7 @@ class AzureCommunicationCallAdapter {
         return this.handlers.onStartCall(idsToAdd);
     }
     removeParticipant(userId) {
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
             this.handlers.onRemoveParticipant(userId);
         });
     }
@@ -11872,7 +11894,7 @@ class AzureCommunicationCallAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter(this, void 0, void 0, function* () {
+        return __awaiter$4(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -11892,7 +11914,7 @@ class AzureCommunicationCallAdapter {
  *
  * @public
  */
-const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator }) => __awaiter(void 0, void 0, void 0, function* () {
+const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator }) => __awaiter$4(void 0, void 0, void 0, function* () {
     const callClient = createStatefulCallClient({ userId });
     const callAgent = yield callClient.createCallAgent(credential, { displayName });
     const adapter = createAzureCommunicationCallAdapterFromClient(callClient, callAgent, locator);
@@ -11906,7 +11928,7 @@ const createAzureCommunicationCallAdapter = ({ userId, displayName, credential,
  *
  * @public
  */
-const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, locator) => __awaiter(void 0, void 0, void 0, function* () {
+const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, locator) => __awaiter$4(void 0, void 0, void 0, function* () {
     const deviceManager = (yield callClient.getDeviceManager());
     return new AzureCommunicationCallAdapter(callClient, locator, callAgent, deviceManager);
 });
@@ -11914,6 +11936,1018 @@ const isCallError = (e) => {
     return e['target'] !== undefined && e['innerError'] !== undefined;
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const sidePaneContainerStyles = {
+    root: {
+        height: '100%',
+        paddingTop: '0.5rem',
+        paddingBottom: '0.5rem',
+        width: '21.5rem'
+    }
+};
+/**
+ * @private
+ */
+const sidePaneContainerHiddenStyles = {
+    root: Object.assign(Object.assign({}, sidePaneContainerStyles), { display: 'none' })
+};
+/**
+ * @private
+ */
+const sidePaneContainerTokens = {
+    childrenGap: '0.5rem'
+};
+/**
+ * @private
+ */
+const sidePaneHeaderStyles = {
+    root: {
+        fontSize: '0.825rem',
+        lineHeight: '1.25rem',
+        padding: '0.25rem',
+        fontWeight: '600'
+    }
+};
+/**
+ * @private
+ */
+const paneBodyContainer = { root: { flexDirection: 'column', display: 'flex' } };
+/**
+ * @private
+ */
+const scrollableContainer = { root: { flexBasis: '0', flexGrow: '1', overflowY: 'auto' } };
+/**
+ * @private
+ */
+const scrollableContainerContents = { root: { flexGrow: '1', flexBasis: '0' } };
+/**
+ * @private
+ */
+const peopleSubheadingStyle = {
+    root: {
+        fontSize: '0.75rem'
+    }
+};
+/**
+ * @private
+ */
+const peoplePaneContainerTokens = {
+    childrenGap: '0.5rem'
+};
+
+var __awaiter$3 = (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());
+    });
+};
+const SidePane = (props) => {
+    // We hide the side pane instead of not rendering the entire pane to persist certain elements
+    // between renders. An example of this is composing a chat message - a chat message that has been
+    // typed but not sent should not be lost if the side panel is closed and then reopened.
+    const sidePaneStyles = props.hidden ? sidePaneContainerHiddenStyles : sidePaneContainerStyles;
+    const theme = useTheme();
+    const sidePaneCloseButtonStyles = {
+        icon: { color: theme.palette.neutralSecondary },
+        iconHovered: { color: theme.palette.neutralSecondary },
+        iconPressed: { color: theme.palette.neutralSecondary }
+    };
+    return (React__default['default'].createElement(react.Stack.Item, { disableShrink: true, verticalFill: true, styles: sidePaneStyles, tokens: sidePaneContainerTokens },
+        React__default['default'].createElement(react.Stack, { verticalFill: true, "data-ui-id": props.dataUiId },
+            React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderStyles },
+                React__default['default'].createElement(react.Stack.Item, null, props.headingText),
+                React__default['default'].createElement(react.CommandBarButton, { styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose })),
+            React__default['default'].createElement(react.Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
+                React__default['default'].createElement(react.Stack, { horizontal: true, styles: scrollableContainer },
+                    React__default['default'].createElement(react.Stack.Item, { verticalFill: true, styles: scrollableContainerContents }, props.children))))));
+};
+/**
+ * In a Meeting when a participant is removed, we must remove them from both
+ * the call and the chat thread.
+ */
+const removeParticipantFromMeeting = (callAdapter, chatAdapter, participantId) => __awaiter$3(void 0, void 0, void 0, function* () {
+    yield callAdapter.removeParticipant(participantId);
+    yield chatAdapter.removeParticipant(participantId);
+});
+/**
+ * @private
+ */
+const EmbeddedPeoplePane = (props) => {
+    const { callAdapter, chatAdapter, inviteLink } = props;
+    const participantListDefaultProps = usePropsFor$1(ParticipantList);
+    const participantListProps = React.useMemo(() => {
+        const onRemoveParticipant = (participantId) => __awaiter$3(void 0, void 0, void 0, function* () { return removeParticipantFromMeeting(callAdapter, chatAdapter, participantId); });
+        return Object.assign(Object.assign({}, participantListDefaultProps), { onRemoveParticipant });
+    }, [participantListDefaultProps, callAdapter, chatAdapter]);
+    const theme = useTheme();
+    const peopleSubheadingStyleThemed = react.concatStyleSets(peopleSubheadingStyle, {
+        root: {
+            color: theme.palette.neutralSecondary
+        }
+    });
+    return (React__default['default'].createElement(SidePane, { hidden: props.hidden, headingText: 'People', onClose: props.onClose, dataUiId: 'meeting-composite-people-pane' },
+        React__default['default'].createElement(react.Stack, { tokens: peoplePaneContainerTokens },
+            inviteLink && (React__default['default'].createElement(react.DefaultButton, { text: "Copy invite link", iconProps: { iconName: 'Link' }, onClick: () => copy__default['default'](inviteLink) })),
+            React__default['default'].createElement(react.Stack.Item, { styles: peopleSubheadingStyleThemed }, "In this call"),
+            React__default['default'].createElement(ParticipantList, Object.assign({}, participantListProps)))));
+};
+/**
+ * @private
+ */
+const EmbeddedChatPane = (props) => {
+    return (React__default['default'].createElement(SidePane, { hidden: props.hidden, headingText: 'Chat', onClose: props.onClose, dataUiId: 'meeting-composite-chat-pane' },
+        React__default['default'].createElement(ChatComposite, Object.assign({}, props.chatCompositeProps, { adapter: props.chatAdapter, fluentTheme: props.fluentTheme, options: { participantPane: false, topic: false } }))));
+};
+
+// Copyright (c) Microsoft Corporation.
+const onRenderOnIcon$1 = () => React__default['default'].createElement(reactIcons.Chat20Filled, { key: 'chatOnIconKey', primaryFill: "currentColor" });
+const onRenderOffIcon$1 = () => React__default['default'].createElement(reactIcons.Chat20Regular, { key: 'chatOffIconKey', primaryFill: "currentColor" });
+/**
+ * @private
+ */
+const ChatButton = (props) => {
+    var _a, _b;
+    const strings = Object.assign({ label: 'Chat' }, props.strings);
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'chatButtonLabelKey', strings: strings, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderOnIcon$1, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderOffIcon$1, onClick: props.onClick })));
+};
+
+// Copyright (c) Microsoft Corporation.
+const onRenderOnIcon = () => React__default['default'].createElement(reactIcons.People20Filled, { key: 'peopleOnIconKey', primaryFill: "currentColor" });
+const onRenderOffIcon = () => React__default['default'].createElement(reactIcons.People20Regular, { key: 'peopleOffIconKey', primaryFill: "currentColor" });
+/**
+ * @private
+ */
+const PeopleButton = (props) => {
+    var _a, _b;
+    const strings = Object.assign({ label: 'People' }, props.strings);
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderOffIcon, onClick: props.onClick })));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const MeetingCallControlBar = (props) => {
+    // Disable the default participants button as meetings composite has its own participants button.
+    let callControlsOptions = {
+        participantsButton: false,
+        screenShareButton: props.mobileView ? false : { disabled: props.disableButtonsForLobbyPage }
+    };
+    // Reduce the controls shown when mobile view is enabled.
+    if (props.mobileView) {
+        callControlsOptions = reduceCallControlsForMobile(callControlsOptions);
+    }
+    /**
+     * Until mobile meetings is worked on, statically set the width of the
+     * control bar such that all controls can be accessed.
+     */
+    const temporaryMeetingControlBarStyles = props.mobileView ? { width: '23.5rem' } : undefined;
+    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(temporaryMeetingControlBarStyles, callControlsContainerStyles, controlBarContainerStyles) },
+        React__default['default'].createElement(react.Stack.Item, { grow: true },
+            React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
+                React__default['default'].createElement(CallControls, { options: callControlsOptions, increaseFlyoutItemSize: props.mobileView }))),
+        React__default['default'].createElement(react.Stack.Item, null,
+            React__default['default'].createElement(ChatButton, { checked: props.chatButtonChecked, showLabel: true, onClick: props.onChatButtonClicked, "data-ui-id": "meeting-composite-chat-button", disabled: props.disableButtonsForLobbyPage }),
+            React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: true, onClick: props.onPeopleButtonClicked, "data-ui-id": "meeting-composite-people-button", disabled: props.disableButtonsForLobbyPage }))));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const compositeOuterContainerStyles = {
+    root: {
+        width: '100%',
+        // This allows the composite to correctly contain the call composite by calculating a height for the available space.
+        // Items inside the call composite that fill 100% of the height will now fill the height of this container instead
+        // of the height of the child items.
+        // If this css property is to be removed, test the participant pane correctly uses the scroll overflow when there a lot
+        // of participants (i.e. beyond screen height) and where one participant is sharing their screen.
+        flexWrap: 'wrap'
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+function callPageToMeetingPage(page) {
+    switch (page) {
+        case 'call':
+            return 'meeting';
+        case 'leftCall':
+            return 'leftMeeting';
+        case 'removedFromCall':
+            return 'removedFromMeeting';
+        case 'joinCallFailedDueToNoNetwork':
+            return 'joinMeetingFailedDueToNoNetwork';
+        default:
+            return page;
+    }
+}
+/**
+ * @private
+ */
+function meetingPageToCallPage(page) {
+    switch (page) {
+        case 'meeting':
+            return 'call';
+        case 'leftMeeting':
+            return 'leftCall';
+        case 'removedFromMeeting':
+            return 'removedFromCall';
+        case 'joinMeetingFailedDueToNoNetwork':
+            return 'joinCallFailedDueToNoNetwork';
+        default:
+            return page;
+    }
+}
+/**
+ * @private
+ */
+const hasJoinedCall = (page, callStatus) => page === 'meeting' && callStatus === 'Connected';
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+function meetingParticipantFromCallParticipant(callParticipant) {
+    return {
+        id: callParticipant.identifier,
+        meetingEndReason: callParticipant.callEndReason,
+        displayName: callParticipant.displayName,
+        state: callParticipant.state,
+        videoStreams: callParticipant.videoStreams,
+        isMuted: callParticipant.isMuted,
+        isSpeaking: callParticipant.isSpeaking
+    };
+}
+/**
+ * @private
+ */
+function callParticipantFromMeetingParticipant(meetingParticipant) {
+    return {
+        identifier: meetingParticipant.id,
+        callEndReason: meetingParticipant.meetingEndReason,
+        displayName: meetingParticipant.displayName,
+        state: meetingParticipant.state,
+        videoStreams: meetingParticipant.videoStreams,
+        isMuted: meetingParticipant.isMuted,
+        isSpeaking: meetingParticipant.isSpeaking
+    };
+}
+/**
+ * @private
+ */
+function meetingParticipantsFromCallParticipants(callParticipants) {
+    const meetingParticipants = {};
+    for (const [key, value] of Object.entries(callParticipants)) {
+        meetingParticipants[key] = meetingParticipantFromCallParticipant(value);
+    }
+    return meetingParticipants;
+}
+/**
+ * @private
+ */
+function callParticipantsFromMeetingParticipants(meetingParticipants) {
+    const callParticipants = {};
+    for (const [key, value] of Object.entries(meetingParticipants)) {
+        callParticipants[key] = callParticipantFromMeetingParticipant(value);
+    }
+    return callParticipants;
+}
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$2 = (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());
+    });
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+function callStateFromMeetingState(meetingState) {
+    return {
+        id: meetingState.id,
+        callerInfo: meetingState.callerInfo,
+        state: meetingState.state,
+        callEndReason: meetingState.meetingEndReason,
+        direction: 'Incoming',
+        isMuted: meetingState.isMuted,
+        isScreenSharingOn: meetingState.isScreenSharingOn,
+        localVideoStreams: meetingState.localVideoStreams,
+        transcription: meetingState.transcription,
+        recording: meetingState.recording,
+        screenShareRemoteParticipant: meetingState.screenShareRemoteParticipant,
+        startTime: meetingState.startTime,
+        endTime: meetingState.endTime,
+        diagnostics: meetingState.diagnostics,
+        remoteParticipants: callParticipantsFromMeetingParticipants(meetingState.participants),
+        remoteParticipantsEnded: callParticipantsFromMeetingParticipants(meetingState.participantsEnded),
+        dominantSpeakers: meetingState.dominantSpeakers
+    };
+}
+function callAdapterStateFromMeetingAdapterState(meetingState) {
+    return {
+        isLocalPreviewMicrophoneEnabled: meetingState.isLocalPreviewMicrophoneEnabled,
+        page: meetingPageToCallPage(meetingState.page),
+        userId: meetingState.userId,
+        displayName: meetingState.displayName,
+        call: meetingState.meeting ? callStateFromMeetingState(meetingState.meeting) : undefined,
+        devices: meetingState.devices,
+        isTeamsCall: meetingState.isTeamsCall,
+        latestErrors: {} //@TODO: latest errors not supported in meeting composite yet.
+    };
+}
+/**
+ * Facade around the MeetingAdapter to satisfy the call adapter interface.
+ *
+ * @private
+ */
+class MeetingBackedCallAdapter {
+    constructor(meetingAdapter) {
+        // For onStateChange we must convert meeting state to chat state. This involves creating a new handler to be passed into the onStateChange.
+        // In order to unsubscribe the handler when offStateChange is called we must have a mapping of the original handler to the newly created handler.
+        this.eventStore = new Map();
+        this.on = (event, listener) => this.meetingAdapter.on(event, listener);
+        this.off = (event, listener) => this.meetingAdapter.off(event, listener);
+        this.onStateChange = (handler) => {
+            const convertedHandler = (state) => {
+                handler(callAdapterStateFromMeetingAdapterState(state));
+            };
+            this.meetingAdapter.onStateChange(convertedHandler);
+            this.eventStore.set(handler, convertedHandler);
+        };
+        this.offStateChange = (handler) => {
+            const convertedHandler = this.eventStore.get(handler);
+            convertedHandler && this.meetingAdapter.offStateChange(convertedHandler);
+        };
+        this.getState = () => callAdapterStateFromMeetingAdapterState(this.meetingAdapter.getState());
+        this.dispose = () => this.meetingAdapter.dispose();
+        this.joinCall = (microphoneOn) => {
+            return this.meetingAdapter.joinMeeting(microphoneOn);
+        };
+        this.leaveCall = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.leaveMeeting(); });
+        this.startCall = (participants) => {
+            return this.meetingAdapter.startMeeting(participants);
+        };
+        this.setCamera = (sourceId, options) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.setCamera(sourceId, options); });
+        this.setMicrophone = (sourceId) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.setMicrophone(sourceId); });
+        this.setSpeaker = (sourceId) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.setSpeaker(sourceId); });
+        this.askDevicePermission = (constraints) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.askDevicePermission(constraints); });
+        this.queryCameras = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.queryCameras(); });
+        this.queryMicrophones = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.queryMicrophones(); });
+        this.querySpeakers = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.querySpeakers(); });
+        this.startCamera = (options) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.startCamera(options); });
+        this.stopCamera = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.stopCamera(); });
+        this.mute = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.mute(); });
+        this.unmute = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.unmute(); });
+        this.startScreenShare = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.startScreenShare(); });
+        this.stopScreenShare = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.stopScreenShare(); });
+        this.removeParticipant = (userId) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.removeParticipant(userId); });
+        this.createStreamView = (remoteUserId, options) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.createStreamView(remoteUserId, options); });
+        this.disposeStreamView = (remoteUserId, options) => __awaiter$2(this, void 0, void 0, function* () { return yield this.meetingAdapter.disposeStreamView(remoteUserId, options); });
+        this.meetingAdapter = meetingAdapter;
+    }
+}
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$1 = (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());
+    });
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+function chatThreadStateFromMeetingState(meetingState) {
+    return {
+        chatMessages: meetingState.chatMessages,
+        participants: meetingState.participants,
+        threadId: meetingState.threadId,
+        properties: meetingState.properties,
+        readReceipts: meetingState.readReceipts,
+        typingIndicators: meetingState.typingIndicators,
+        latestReadTime: meetingState.latestReadTime
+    };
+}
+function ChatAdapterStateFromMeetingAdapterState(meetingState) {
+    if (!meetingState.meeting) {
+        throw 'Cannot get chat adapter state. Meeting state is undefined.';
+    }
+    return {
+        userId: meetingState.userId,
+        displayName: meetingState.displayName || '',
+        thread: chatThreadStateFromMeetingState(meetingState.meeting),
+        latestErrors: {} //@TODO: latest errors not supported in meeting composite yet.
+    };
+}
+/**
+ * Facade around the MeetingAdapter to satisfy the chat adapter interface.
+ *
+ * @private
+ */
+class MeetingBackedChatAdapter {
+    constructor(meetingAdapter) {
+        // For onStateChange we must convert meeting state to chat state. This involves creating a new handler to be passed into the onStateChange.
+        // In order to unsubscribe the handler when offStateChange is called we must have a mapping of the original handler to the newly created handler.
+        this.eventStore = new Map();
+        this.fetchInitialData = () => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.fetchInitialData(); });
+        this.sendMessage = (content) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.sendMessage(content); });
+        this.sendReadReceipt = (chatMessageId) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.sendReadReceipt(chatMessageId); });
+        this.sendTypingIndicator = () => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.sendTypingIndicator(); });
+        this.removeParticipant = (userId) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.removeParticipant(userId); });
+        this.loadPreviousChatMessages = (messagesToLoad) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.loadPreviousChatMessages(messagesToLoad); });
+        this.dispose = () => this.meetingAdapter.dispose();
+        this.onStateChange = (handler) => {
+            const convertedHandler = (state) => {
+                handler(ChatAdapterStateFromMeetingAdapterState(state));
+            };
+            this.meetingAdapter.onStateChange(convertedHandler);
+            this.eventStore.set(handler, convertedHandler);
+        };
+        this.offStateChange = (handler) => {
+            const convertedHandler = this.eventStore.get(handler);
+            convertedHandler && this.meetingAdapter.offStateChange(convertedHandler);
+        };
+        this.getState = () => ChatAdapterStateFromMeetingAdapterState(this.meetingAdapter.getState());
+        /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+        this.on = (event, listener) => this.meetingAdapter.on(event, listener);
+        this.off = (event, listener) => this.meetingAdapter.off(event, listener);
+        this.updateMessage = (messageId, content) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.updateMessage(messageId, content); });
+        this.deleteMessage = (messageId) => __awaiter$1(this, void 0, void 0, function* () { return yield this.meetingAdapter.deleteMessage(messageId); });
+        this.clearErrors = (errorTypes) => {
+            throw `Method not supported in meetings.`;
+        };
+        this.setTopic = (topicName) => __awaiter$1(this, void 0, void 0, function* () {
+            throw `Chat Topics are not supported in meetings.`;
+        });
+        this.meetingAdapter = meetingAdapter;
+    }
+}
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Meeting Composite brings together key components to provide a full meeting experience out of the box.
+ *
+ * @beta
+ */
+const MeetingComposite = (props) => {
+    const { meetingAdapter, fluentTheme, formFactor = 'desktop' } = props;
+    if (!meetingAdapter) {
+        throw 'Meeting adapter is undefined';
+    }
+    const callAdapter = React.useMemo(() => new MeetingBackedCallAdapter(meetingAdapter), [meetingAdapter]);
+    const chatAdapter = React.useMemo(() => new MeetingBackedChatAdapter(meetingAdapter), [meetingAdapter]);
+    const [currentMeetingState, setCurrentMeetingState] = React.useState();
+    const [currentPage, setCurrentPage] = React.useState();
+    meetingAdapter.onStateChange((newState) => {
+        var _a;
+        setCurrentPage(newState.page);
+        setCurrentMeetingState((_a = newState.meeting) === null || _a === void 0 ? void 0 : _a.state);
+    });
+    const [showChat, setShowChat] = React.useState(false);
+    const [showPeople, setShowPeople] = React.useState(false);
+    const closePane = React.useCallback(() => {
+        setShowChat(false);
+        setShowPeople(false);
+    }, []);
+    const toggleChat = React.useCallback(() => {
+        setShowPeople(false);
+        setShowChat(!showChat);
+    }, [showChat]);
+    const togglePeople = React.useCallback(() => {
+        setShowChat(false);
+        setShowPeople(!showPeople);
+    }, [showPeople]);
+    const isInLobbyOrConnecting = currentPage === 'lobby';
+    const hasJoinedCall$1 = !!(currentPage && hasJoinedCall(currentPage, currentMeetingState !== null && currentMeetingState !== void 0 ? currentMeetingState : 'None'));
+    return (React__default['default'].createElement(FluentThemeProvider, { fluentTheme: fluentTheme },
+        React__default['default'].createElement(react.Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles },
+            React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
+                React__default['default'].createElement(react.Stack.Item, { grow: true },
+                    React__default['default'].createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: { callControls: false }, adapter: callAdapter, fluentTheme: fluentTheme }))),
+                chatAdapter && hasJoinedCall$1 && (React__default['default'].createElement(EmbeddedChatPane, { chatCompositeProps: props, hidden: !showChat, chatAdapter: chatAdapter, fluentTheme: fluentTheme, onClose: closePane })),
+                callAdapter && chatAdapter && hasJoinedCall$1 && (React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
+                    React__default['default'].createElement(EmbeddedPeoplePane, { hidden: !showPeople, inviteLink: props.meetingInvitationURL, onClose: closePane, chatAdapter: chatAdapter, callAdapter: callAdapter })))),
+            (isInLobbyOrConnecting || hasJoinedCall$1) && (React__default['default'].createElement(MeetingCallControlBar, { callAdapter: callAdapter, chatButtonChecked: showChat, onChatButtonClicked: toggleChat, peopleButtonChecked: showPeople, onPeopleButtonClicked: togglePeople, mobileView: props.formFactor === 'mobile', disableButtonsForLobbyPage: isInLobbyOrConnecting })))));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Return properties from call state that are used in meeting state.
+ *
+ * @private
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const meetingPropsFromCallState = (callState) => ({
+    id: callState.id,
+    callerInfo: callState.callerInfo,
+    state: callState.state,
+    isMuted: callState.isMuted,
+    isScreenSharingOn: callState.isScreenSharingOn,
+    localVideoStreams: callState.localVideoStreams,
+    transcription: callState.transcription,
+    recording: callState.recording,
+    screenShareRemoteParticipant: callState.screenShareRemoteParticipant,
+    startTime: callState.startTime,
+    endTime: callState.endTime,
+    meetingEndReason: callState.callEndReason,
+    diagnostics: callState.diagnostics,
+    dominantSpeakers: callState.dominantSpeakers,
+    // For meetings we only use participants from the call in a meeting
+    participants: meetingParticipantsFromCallParticipants(callState.remoteParticipants),
+    participantsEnded: meetingParticipantsFromCallParticipants(callState.remoteParticipantsEnded)
+});
+/**
+ * Return properties from chat state that are used in meeting state.
+ *
+ * @private
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const meetingPropsFromChatState = (chatState) => ({
+    chatMessages: chatState.chatMessages,
+    threadId: chatState.threadId,
+    properties: chatState.properties,
+    readReceipts: chatState.readReceipts,
+    typingIndicators: chatState.typingIndicators,
+    latestReadTime: chatState.latestReadTime
+});
+/**
+ * Helper function to return meeting state created from call and chat states
+ *
+ * @private
+ */
+function meetingStateFromBackingStates(callState, chatState) {
+    return Object.assign(Object.assign({}, meetingPropsFromCallState(callState)), meetingPropsFromChatState(chatState));
+}
+/**
+ * Helper function to return an updated meeting state with new chat state applied
+ *
+ * @private
+ */
+function mergeChatStateIntoMeetingState(meetingState, chatState) {
+    return Object.assign(Object.assign({}, meetingState), meetingPropsFromChatState(chatState));
+}
+/**
+ * Helper function to return an updated meeting state with new call state applied
+ *
+ * @private
+ */
+function mergeCallStateIntoMeetingState(meetingState, callState) {
+    // If we have no existing meeting state, populate chat fields with defaults to merge and make a new state.
+    // This is because calls are constructed before chat state is created.
+    if (!meetingState) {
+        return Object.assign({ chatMessages: {}, threadId: '', properties: {}, readReceipts: [], typingIndicators: [], latestReadTime: new Date(0) }, meetingPropsFromCallState(callState));
+    }
+    return Object.assign(Object.assign({}, meetingState), meetingPropsFromCallState(callState));
+}
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+function meetingAdapterStateFromBackingStates(callAdapter, chatAdapter) {
+    const callAdapterState = callAdapter.getState();
+    const chatAdapterState = chatAdapter.getState();
+    const meeting = callAdapterState.call
+        ? meetingStateFromBackingStates(callAdapterState.call, chatAdapterState.thread)
+        : undefined;
+    return {
+        meeting,
+        userId: callAdapterState.userId,
+        page: callPageToMeetingPage(callAdapterState.page),
+        displayName: callAdapterState.displayName,
+        devices: callAdapterState.devices,
+        isLocalPreviewMicrophoneEnabled: callAdapterState.isLocalPreviewMicrophoneEnabled,
+        isTeamsCall: callAdapterState.isTeamsCall
+    };
+}
+/**
+ * @private
+ */
+function mergeChatAdapterStateIntoMeetingAdapterState(meetingAdapterState, chatAdapterState) {
+    const newMeetingState = meetingAdapterState.meeting
+        ? mergeChatStateIntoMeetingState(meetingAdapterState.meeting, chatAdapterState.thread)
+        : undefined;
+    return Object.assign(Object.assign({}, meetingAdapterState), { meeting: newMeetingState });
+}
+/**
+ * @private
+ */
+function mergeCallAdapterStateIntoMeetingAdapterState(meetingAdapterState, callAdapterState) {
+    const newMeetingState = callAdapterState.call
+        ? mergeCallStateIntoMeetingState(meetingAdapterState.meeting, callAdapterState.call)
+        : undefined;
+    return {
+        userId: callAdapterState.userId,
+        page: callPageToMeetingPage(callAdapterState.page),
+        displayName: callAdapterState.displayName,
+        devices: callAdapterState.devices,
+        meeting: newMeetingState,
+        isLocalPreviewMicrophoneEnabled: callAdapterState.isLocalPreviewMicrophoneEnabled,
+        isTeamsCall: callAdapterState.isTeamsCall
+    };
+}
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter = (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());
+    });
+};
+/** Context of meeting, which is a centralized context for all state updates */
+class MeetingContext {
+    constructor(clientState) {
+        this.emitter = new EventEmitter.EventEmitter();
+        this.state = clientState;
+    }
+    onStateChange(handler) {
+        this.emitter.on('stateChanged', handler);
+    }
+    offStateChange(handler) {
+        this.emitter.off('stateChanged', handler);
+    }
+    setState(state) {
+        this.state = state;
+        this.emitter.emit('stateChanged', this.state);
+    }
+    getState() {
+        return this.state;
+    }
+    updateClientState(clientState) {
+        this.setState(clientState);
+    }
+    updateClientStateWithChatState(chatAdapterState) {
+        this.updateClientState(mergeChatAdapterStateIntoMeetingAdapterState(this.state, chatAdapterState));
+    }
+    updateClientStateWithCallState(callAdapterState) {
+        this.updateClientState(mergeCallAdapterStateIntoMeetingAdapterState(this.state, callAdapterState));
+    }
+}
+/**
+ * Meeting adapter backed by Azure Communication Services.
+ * Created for easy use with the Meeting Composite.
+ */
+class AzureCommunicationMeetingAdapter {
+    constructor(callAdapter, chatAdapter) {
+        this.bindPublicMethods();
+        this.callAdapter = callAdapter;
+        this.chatAdapter = chatAdapter;
+        this.context = new MeetingContext(meetingAdapterStateFromBackingStates(callAdapter, chatAdapter));
+        const onChatStateChange = (newChatAdapterState) => {
+            this.context.updateClientStateWithChatState(newChatAdapterState);
+        };
+        this.chatAdapter.onStateChange(onChatStateChange);
+        this.onChatStateChange = onChatStateChange;
+        const onCallStateChange = (newCallAdapterState) => {
+            this.context.updateClientStateWithCallState(newCallAdapterState);
+        };
+        this.callAdapter.onStateChange(onCallStateChange);
+        this.onCallStateChange = onCallStateChange;
+    }
+    bindPublicMethods() {
+        this.joinMeeting.bind(this);
+        this.leaveMeeting.bind(this);
+        this.startMeeting.bind(this);
+        this.onStateChange.bind(this);
+        this.offStateChange.bind(this);
+        this.getState.bind(this);
+        this.dispose.bind(this);
+        this.setCamera.bind(this);
+        this.setMicrophone.bind(this);
+        this.setSpeaker.bind(this);
+        this.askDevicePermission.bind(this);
+        this.queryCameras.bind(this);
+        this.queryMicrophones.bind(this);
+        this.querySpeakers.bind(this);
+        this.startCamera.bind(this);
+        this.stopCamera.bind(this);
+        this.mute.bind(this);
+        this.unmute.bind(this);
+        this.startScreenShare.bind(this);
+        this.stopScreenShare.bind(this);
+        this.removeParticipant.bind(this);
+        this.createStreamView.bind(this);
+        this.disposeStreamView.bind(this);
+        this.fetchInitialData.bind(this);
+        this.sendMessage.bind(this);
+        this.sendReadReceipt.bind(this);
+        this.sendTypingIndicator.bind(this);
+        this.loadPreviousChatMessages.bind(this);
+        this.updateMessage.bind(this);
+        this.deleteMessage.bind(this);
+        this.on.bind(this);
+        this.off.bind(this);
+    }
+    /** Join existing Meeting. */
+    joinMeeting(microphoneOn) {
+        return this.callAdapter.joinCall(microphoneOn);
+    }
+    /** Leave current Meeting. */
+    leaveMeeting() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.removeParticipant(toFlatCommunicationIdentifier(this.chatAdapter.getState().userId));
+            yield this.callAdapter.leaveCall();
+        });
+    }
+    /** Start a new Meeting. */
+    startMeeting(participants) {
+        return this.callAdapter.startCall(participants);
+    }
+    /**
+     * Subscribe to state change events.
+     * @param handler - handler to be called when the state changes. This is passed the new state.
+     */
+    onStateChange(handler) {
+        this.context.onStateChange(handler);
+    }
+    /**
+     * Unsubscribe to state change events.
+     * @param handler - handler to be no longer called when state changes.
+     */
+    offStateChange(handler) {
+        this.context.offStateChange(handler);
+    }
+    /** Get current Meeting state. */
+    getState() {
+        return this.context.getState();
+    }
+    /** Dispose of the current Meeting Adapter. */
+    dispose() {
+        this.chatAdapter.offStateChange(this.onChatStateChange);
+        this.callAdapter.offStateChange(this.onCallStateChange);
+        this.chatAdapter.dispose();
+        this.callAdapter.dispose();
+    }
+    /** Remove a participant from the Meeting. */
+    removeParticipant(userId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.removeParticipant(userId);
+            yield this.callAdapter.removeParticipant(userId);
+        });
+    }
+    setCamera(device, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.setCamera(device, options);
+        });
+    }
+    /** Set the microphone to be used in the meeting. */
+    setMicrophone(device) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.setMicrophone(device);
+        });
+    }
+    /** Set the speaker to be used in the meeting. */
+    setSpeaker(device) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.setSpeaker(device);
+        });
+    }
+    askDevicePermission(constraints) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.askDevicePermission(constraints);
+        });
+    }
+    /** Query for available cameras. */
+    queryCameras() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.callAdapter.queryCameras();
+        });
+    }
+    /** Query for available microphones. */
+    queryMicrophones() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.callAdapter.queryMicrophones();
+        });
+    }
+    /** Query for available speakers. */
+    querySpeakers() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.callAdapter.querySpeakers();
+        });
+    }
+    /** Start the camera for the user in the Meeting. */
+    startCamera(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.startCamera(options);
+        });
+    }
+    /** Stop the camera for the user in the Meeting. */
+    stopCamera() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.stopCamera();
+        });
+    }
+    /** Mute the user in the Meeting. */
+    mute() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.mute();
+        });
+    }
+    /** Unmute the user in the Meeting. */
+    unmute() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.unmute();
+        });
+    }
+    /** Trigger the user to start screen share. */
+    startScreenShare() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.startScreenShare();
+        });
+    }
+    /** Stop the current active screen share. */
+    stopScreenShare() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.stopScreenShare();
+        });
+    }
+    /** Create a stream view for a remote participants video feed. */
+    createStreamView(remoteUserId, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.createStreamView(remoteUserId, options);
+        });
+    }
+    /** Dispose of a created stream view of a remote participants video feed. */
+    disposeStreamView(remoteUserId, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.disposeStreamView(remoteUserId, options);
+        });
+    }
+    /** Fetch initial Meeting data such as chat messages. */
+    fetchInitialData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.fetchInitialData();
+        });
+    }
+    /** Send a chat message. */
+    sendMessage(content) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.sendMessage(content);
+        });
+    }
+    /** Send a chat read receipt. */
+    sendReadReceipt(chatMessageId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.sendReadReceipt(chatMessageId);
+        });
+    }
+    /** Send an isTyping indicator. */
+    sendTypingIndicator() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.chatAdapter.sendTypingIndicator();
+        });
+    }
+    /** Load previous Meeting chat messages. */
+    loadPreviousChatMessages(messagesToLoad) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.chatAdapter.loadPreviousChatMessages(messagesToLoad);
+        });
+    }
+    /** Update an existing message. */
+    updateMessage(messageId, content) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.chatAdapter.updateMessage(messageId, content);
+        });
+    }
+    /** Delete an existing message. */
+    deleteMessage(messageId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.chatAdapter.deleteMessage(messageId);
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    on(event, listener) {
+        switch (event) {
+            case 'participantsJoined':
+                this.callAdapter.on(event, listener);
+                break;
+            case 'participantsLeft':
+                this.callAdapter.on('participantsLeft', listener);
+                break;
+            case 'meetingEnded':
+                this.callAdapter.on('callEnded', listener);
+                break;
+            case 'isMutedChanged':
+                this.callAdapter.on('isMutedChanged', listener);
+                break;
+            case 'callIdChanged':
+                this.callAdapter.on('callIdChanged', listener);
+                break;
+            case 'isLocalScreenSharingActiveChanged':
+                this.callAdapter.on('isLocalScreenSharingActiveChanged', listener);
+                break;
+            case 'displayNameChanged':
+                this.callAdapter.on('displayNameChanged', listener);
+                break;
+            case 'isSpeakingChanged':
+                this.callAdapter.on('isSpeakingChanged', listener);
+                break;
+            case 'messageReceived':
+                this.chatAdapter.on('messageReceived', listener);
+                break;
+            case 'messageSent':
+                this.chatAdapter.on('messageSent', listener);
+                break;
+            case 'messageRead':
+                this.chatAdapter.on('messageRead', listener);
+                break;
+            case 'error':
+                throw 'on(Error) not implemented yet.';
+            default:
+                throw `Unknown MeetingEvent: ${event}`;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    off(event, listener) {
+        switch (event) {
+            case 'participantsJoined':
+                this.callAdapter.off(event, listener);
+                break;
+            case 'participantsLeft':
+                this.callAdapter.off('participantsLeft', listener);
+                break;
+            case 'meetingEnded':
+                this.callAdapter.off('callEnded', listener);
+                break;
+            case 'isMutedChanged':
+                this.callAdapter.off('isMutedChanged', listener);
+                break;
+            case 'callIdChanged':
+                this.callAdapter.off('callIdChanged', listener);
+                break;
+            case 'isLocalScreenSharingActiveChanged':
+                this.callAdapter.off('isLocalScreenSharingActiveChanged', listener);
+                break;
+            case 'displayNameChanged':
+                this.callAdapter.off('displayNameChanged', listener);
+                break;
+            case 'isSpeakingChanged':
+                this.callAdapter.off('isSpeakingChanged', listener);
+                break;
+            case 'messageReceived':
+                this.chatAdapter.off('messageReceived', listener);
+                break;
+            case 'messageSent':
+                this.chatAdapter.off('messageSent', listener);
+                break;
+            case 'messageRead':
+                this.chatAdapter.off('messageRead', listener);
+                break;
+            case 'error':
+                throw 'on(Error) not implemented yet.';
+            default:
+                throw `Unknown MeetingEvent: ${event}`;
+        }
+    }
+}
+/**
+ * Create a meeting adapter backed by Azure Communication services
+ * to plug into the Meeting Composite.
+ *
+ * @beta
+ */
+const createAzureCommunicationMeetingAdapter = ({ userId, displayName, credential, endpoint, chatThreadId, callLocator }) => __awaiter(void 0, void 0, void 0, function* () {
+    const callAdapter = yield createAzureCommunicationCallAdapter({
+        userId,
+        displayName,
+        credential,
+        locator: callLocator
+    });
+    const chatAdapter = yield createAzureCommunicationChatAdapter({
+        endpoint,
+        userId,
+        displayName,
+        credential,
+        threadId: chatThreadId
+    });
+    return new AzureCommunicationMeetingAdapter(callAdapter, chatAdapter);
+});
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Hook to obtain a selector for a specified component.
@@ -12020,6 +13054,7 @@ exports.ErrorBar = ErrorBar;
 exports.FluentThemeProvider = FluentThemeProvider;
 exports.GridLayout = GridLayout;
 exports.LocalizationProvider = LocalizationProvider$1;
+exports.MeetingComposite = MeetingComposite;
 exports.MessageStatusIndicator = MessageStatusIndicator;
 exports.MessageThread = MessageThread;
 exports.MicrophoneButton = MicrophoneButton;
@@ -12037,6 +13072,7 @@ exports.createAzureCommunicationCallAdapter = createAzureCommunicationCallAdapte
 exports.createAzureCommunicationCallAdapterFromClient = createAzureCommunicationCallAdapterFromClient;
 exports.createAzureCommunicationChatAdapter = createAzureCommunicationChatAdapter;
 exports.createAzureCommunicationChatAdapterFromClient = createAzureCommunicationChatAdapterFromClient;
+exports.createAzureCommunicationMeetingAdapter = createAzureCommunicationMeetingAdapter;
 exports.createDefaultCallingHandlers = createDefaultCallingHandlers;
 exports.createDefaultChatHandlers = createDefaultChatHandlers;
 exports.createStatefulCallClient = createStatefulCallClient;