@azure/communication-react 1.3.3-alpha-202208310017.0 → 1.3.3-alpha-202209030014.0

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

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202208310017.0';
+var telemetryVersion = '1.3.3-alpha-202209030014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -957,7 +957,7 @@ const typingIndicatorStringStyle = react.mergeStyles({
     wordBreak: 'break-word'
 });
 
-var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed Participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On Hold"};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.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",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",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose Audio Device",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 presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present 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:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};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.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted 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.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",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.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed Participant"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On Hold"};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,dialpad:dialpad$d,holdButton:holdButton,videoTile:videoTile};
+var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed Participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};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.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",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",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose Audio Device",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 presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present 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:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};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.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted 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.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",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.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed Participant"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};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,dialpad:dialpad$d,holdButton:holdButton,videoTile:videoTile};
 
 var participantItem$c={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed Participant"};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.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait."};var messageStatusIndicator$c={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$c={label:"Leave",tooltipContent:"Leave Call"};var cameraButton$c={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$c={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$c={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose Audio Device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker"};var participantsButton$c={label:"People",tooltipContent:"Show Participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$c={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};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:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",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",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options"};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.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$c={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed Participant"};var dialpad$c={placeholderText:"Enter a number"};var HoldButton$d={onLabel:"Resume",offLabel:"Hold",toolTipOnContent:"Resume call",toolTipOffContent:"Hold call"};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,dialpad:dialpad$c,HoldButton:HoldButton$d};
 
@@ -2189,7 +2189,7 @@ const VoiceOverButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 /**
- * @private
+ * @internal
  * Announcer component to maker aria announcements on actions
  */
 const Announcer = (props) => {
@@ -2275,12 +2275,6 @@ const useLocaleFileCardStringsTrampoline = () => {
     /* @conditional-compile-remove(file-sharing) */
     return useLocale$1().strings.sendBox;
 };
-/**
- * Identify if a participant state if part of the Calling states or Hold states.
- */
-const _isParticipantStateCallingOrHold = (participantState) => {
-    return !!participantState && ['Idle', 'Connecting', 'EarlyMedia', 'Ringing', 'Hold'].includes(participantState);
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -4813,9 +4807,10 @@ const overlayContainerStyles = {
  */
 const tileInfoContainerStyle = react.mergeStyles({
     position: 'absolute',
-    bottom: '0.5rem',
-    left: '0.5rem',
-    width: 'calc(100% - 1rem)'
+    bottom: '0',
+    left: '0',
+    padding: '0.5rem',
+    width: '100%'
 });
 /**
  * @private
@@ -4853,30 +4848,27 @@ const displayNameStyle = {
 /**
  * @private
  */
-const iconContainerStyle = {
-    height: '100%',
+const iconContainerStyle = (theme) => ({
+    margin: 'auto',
     alignItems: 'center',
     '& svg': {
-        display: 'block'
+        display: 'block',
+        color: theme.palette.neutralPrimary
     }
-};
+});
 /**
  * @private
  */
-const participantStateStringStyles = (showLabel) => {
+const participantStateStringStyles = (theme) => {
     return {
-        textAlign: 'center',
-        minWidth: '3rem',
-        color: 'inherit',
-        width: showLabel ? 'auto' : '100%',
-        marginRight: showLabel ? 0 : 'none',
-        marginLeft: showLabel ? 'auto' : 'none',
+        minWidth: 'max-content',
+        color: theme.palette.black,
         fontSize: '0.75rem',
         lineHeight: 'normal',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
-        padding: '0.25rem'
+        padding: '0.1rem'
     };
 };
 
@@ -4955,13 +4947,13 @@ const VideoTile = (props) => {
                     height: '100%'
                 }
             }, styles === null || styles === void 0 ? void 0 : styles.root) },
-            isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
+            isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles), style: { opacity: participantStateString ? 0.4 : 1 } }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
             (canShowLabel || participantStateString) && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
-                canShowLabel && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
-                    React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName }, displayName),
-                    showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
-                        React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" }))))),
-                participantStateString && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStringStyles(showLabel)) }, participantStateString)))),
+                React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
+                    canShowLabel && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' } }, displayName)),
+                    participantStateString && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel))),
+                    showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle(theme)) },
+                        React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" })))))),
             children && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)))));
 };
 const participantStateStringTrampoline = (props, locale) => {
@@ -4983,184 +4975,8 @@ const tileInfoContainerTokens = {
     // We need to allow the children to set their own margins
     childrenGap: 'none'
 };
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
-/**
- * @private
- */
-const videoGalleryContainerStyle = {
-    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
-};
-/**
- * Small floating modal width and height in rem for small screen
- */
-const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
-/**
- * Large floating modal width and height in rem for large screen
- */
-const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
-/**
- * @private
- * z-index to ensure that the local video tile is above the video gallery.
- */
-const LOCAL_VIDEO_TILE_ZINDEX = 2;
-/**
- * @private
- */
-const floatingLocalVideoModalStyle = (theme, isNarrow) => {
-    return react.concatStyleSets({
-        main: localVideoTileContainerStyle(theme, isNarrow)
-    }, {
-        main: {
-            boxShadow: theme.effects.elevation8,
-            ':focus-within': {
-                boxShadow: theme.effects.elevation16,
-                border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
-            }
-        }
-    }, localVideoModalStyles);
-};
-/**
- * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
- * @private
- */
-const localVideoTileOuterPaddingPX = 8;
-/**
- * @private
- */
-const localVideoTileContainerStyle = (theme, isNarrow) => {
-    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
-        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
-        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
-};
-/**
- * @private
- */
-const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
-    return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
-        root: { boxShadow: theme.effects.elevation8 }
-    });
-};
-/**
- * @private
- */
-const floatingLocalVideoTileStyle = {
-    root: {
-        position: 'absolute',
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
-        height: '100%',
-        width: '100%'
-    }
-};
-/**
- * @private
- */
-const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
-    return {
-        minHeight: isNarrow
-            ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
-            : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-        width: shouldFloatLocalVideo
-            ? isNarrow
-                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
-                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
-            : '100%',
-        paddingRight: '0.5rem'
-    };
-};
-/**
- * @private
- */
-const horizontalGalleryStyle = (isNarrow) => {
-    return {
-        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
-    };
-};
-/**
- * Small horizontal gallery tile size in rem
- * @private
- */
-const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
-/**
- * Large horizontal gallery tile size in rem
- * @private
- */
-const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
-/**
- * @private
- */
-const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
-    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
-    maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
-};
-/**
- * @private
- */
-const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
-    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
-    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
-};
-/**
- * @private
- */
-const layerHostStyle = {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%',
-    overflow: 'hidden',
-    // pointer events for layerHost set to none to make descendants interactive
-    pointerEvents: 'none'
-};
-/**
- * @private
- */
-const localVideoCameraCycleButtonStyles = (theme) => {
-    return {
-        root: {
-            position: 'absolute',
-            width: _pxToRem(32),
-            height: _pxToRem(32),
-            right: '0rem',
-            top: '0rem',
-            color: '#FFFFFF',
-            zIndex: 2,
-            background: 'rgba(0,0,0,0.4)',
-            borderRadius: theme.effects.roundedCorner2
-        },
-        rootFocused: {
-            // styles to remove the unwanted white highlight and blue colour after tapping on button.
-            color: '#FFFFFF',
-            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
-        },
-        icon: {
-            paddingLeft: _pxToRem(3),
-            paddingRight: _pxToRem(3),
-            margin: 0
-        },
-        flexContainer: {
-            paddingBottom: _pxToRem(8)
-        }
-    };
-};
-/**
- * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
- * @private
- */
-const localVideoModalStyles = {
-    keyboardMoveIconContainer: {
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
-    }
+const bracketedParticipantString = (participantString, withBrackets) => {
+    return withBrackets ? `(${participantString})` : participantString;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -5174,9 +4990,6 @@ const localVideoModalStyles = {
 const _RemoteVideoTile = React__default['default'].memo((props) => {
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
     isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
-    const containerRef = React__default['default'].useRef(null);
-    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-    const containerWidth = _useContainerWidth(containerRef);
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -5209,45 +5022,11 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
         }
         return (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }));
     }, [renderElement, isReceiving]);
-    const showLabelTrampoline = React.useMemo(() => {
-        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-        return canShowLabel(props.participantState, props.showLabel, containerWidth);
-    }, [
+    return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
-        containerWidth,
-        props
-    ]);
-    return (
-    // IMPORTANT: This div needs to be a flex so that the children take up its full width and height
-    React__default['default'].createElement("div", { ref: containerRef, style: { display: 'flex', flexGrow: 1 } },
-        React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: showLabelTrampoline, 
-            /* @conditional-compile-remove(one-to-n-calling) */
-            /* @conditional-compile-remove(PSTN-calls) */
-            participantState: props.participantState })));
+        participantState: props.participantState }));
 });
-/* @conditional-compile-remove(one-to-n-calling) */
-/* @conditional-compile-remove(PSTN-calls) */
-/**
- * Determines if a label should be shown for a remote video tile.
- * When the remote video tile is rendered as a small tile in horizontal gallery,
- * we hide the participants name if they are in hold/connecting states.
- */
-const canShowLabel = (participantState, showLabel, containerWidth) => {
-    // if showLabel has been explicitly set to false, don't show the label
-    if (showLabel === false) {
-        return showLabel;
-    }
-    // If the participant state is in calling or hold and
-    // the container width is less than the small horizontal gallery tile size,
-    // don't show the label (participant name)
-    if (_isParticipantStateCallingOrHold(participantState)) {
-        if (containerWidth && containerWidth / 16 <= SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width) {
-            return false;
-        }
-    }
-    return showLabel;
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -5397,6 +5176,185 @@ const calculateChildrenPerPage = (args) => {
     return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
+/**
+ * @private
+ */
+const videoGalleryContainerStyle = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+};
+/**
+ * Small floating modal width and height in rem for small screen
+ */
+const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
+/**
+ * Large floating modal width and height in rem for large screen
+ */
+const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
+/**
+ * @private
+ * z-index to ensure that the local video tile is above the video gallery.
+ */
+const LOCAL_VIDEO_TILE_ZINDEX = 2;
+/**
+ * @private
+ */
+const floatingLocalVideoModalStyle = (theme, isNarrow) => {
+    return react.concatStyleSets({
+        main: localVideoTileContainerStyle(theme, isNarrow)
+    }, {
+        main: {
+            boxShadow: theme.effects.elevation8,
+            ':focus-within': {
+                boxShadow: theme.effects.elevation16,
+                border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
+            }
+        }
+    }, localVideoModalStyles);
+};
+/**
+ * Padding equal to the amount the modal should stay inside the bounds of the container.
+ * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
+ * @private
+ */
+const localVideoTileOuterPaddingPX = 8;
+/**
+ * @private
+ */
+const localVideoTileContainerStyle = (theme, isNarrow) => {
+    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
+        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
+        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
+};
+/**
+ * @private
+ */
+const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
+    return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
+        root: { boxShadow: theme.effects.elevation8 }
+    });
+};
+/**
+ * @private
+ */
+const floatingLocalVideoTileStyle = {
+    root: {
+        position: 'absolute',
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
+        height: '100%',
+        width: '100%'
+    }
+};
+/**
+ * @private
+ */
+const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
+    return {
+        minHeight: isNarrow
+            ? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
+            : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+        width: shouldFloatLocalVideo
+            ? isNarrow
+                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
+                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
+            : '100%',
+        paddingRight: '0.5rem'
+    };
+};
+/**
+ * @private
+ */
+const horizontalGalleryStyle = (isNarrow) => {
+    return {
+        children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
+    };
+};
+/**
+ * Small horizontal gallery tile size in rem
+ * @private
+ */
+const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
+/**
+ * Large horizontal gallery tile size in rem
+ * @private
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
+/**
+ * @private
+ */
+const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+};
+/**
+ * @private
+ */
+const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
+    minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
+};
+/**
+ * @private
+ */
+const layerHostStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    // pointer events for layerHost set to none to make descendants interactive
+    pointerEvents: 'none'
+};
+/**
+ * @private
+ */
+const localVideoCameraCycleButtonStyles = (theme) => {
+    return {
+        root: {
+            position: 'absolute',
+            width: _pxToRem(32),
+            height: _pxToRem(32),
+            right: '0rem',
+            top: '0rem',
+            color: '#FFFFFF',
+            zIndex: 2,
+            background: 'rgba(0,0,0,0.4)',
+            borderRadius: theme.effects.roundedCorner2
+        },
+        rootFocused: {
+            // styles to remove the unwanted white highlight and blue colour after tapping on button.
+            color: '#FFFFFF',
+            background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
+        },
+        icon: {
+            paddingLeft: _pxToRem(3),
+            paddingRight: _pxToRem(3),
+            margin: 0
+        },
+        flexContainer: {
+            paddingBottom: _pxToRem(8)
+        }
+    };
+};
+/**
+ * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
+ * @private
+ */
+const localVideoModalStyles = {
+    keyboardMoveIconContainer: {
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -7299,7 +7257,7 @@ const DrawerMenuItem = (props) => {
     const onClick = (ev) => props.onItemClick && props.onItemClick(ev, props.itemKey);
     const onKeyPress = (ev) => onClick && submitWithKeyboard(ev, onClick);
     const secondaryIcon = props.secondaryIconProps ? (React__default['default'].createElement(MenuItemIcon, Object.assign({}, props.secondaryIconProps))) : props.subMenuProps ? (React__default['default'].createElement(MenuItemIcon, { iconName: "ChevronRight" })) : undefined;
-    return (React__default['default'].createElement(react.Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: onKeyPress, onClick: onClick, tokens: menuItemChildrenGap },
+    return (React__default['default'].createElement(react.Stack, { tabIndex: 0, role: "menuitem", horizontal: true, className: react.mergeStyles(drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small), props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), onKeyPress: props.disabled ? undefined : onKeyPress, onClick: props.disabled ? undefined : onClick, tokens: menuItemChildrenGap },
         props.iconProps && (React__default['default'].createElement(react.Stack.Item, { role: "presentation", styles: props.disabled ? { root: { color: theme.palette.neutralTertiaryAlt } } : undefined },
             React__default['default'].createElement(MenuItemIcon, Object.assign({}, props.iconProps)))),
         React__default['default'].createElement(react.Stack.Item, { styles: drawerMenuItemTextStyles, grow: true },
@@ -7774,6 +7732,9 @@ const iconButtonStyles = (theme) => {
     return {
         root: {
             color: `${theme.palette.black}`
+        },
+        icon: {
+            height: 'auto'
         }
     };
 };
@@ -8796,6 +8757,10 @@ const MINIMUM_TYPING_INTERVAL_IN_MILLISECONDS = 8000;
  * @private
  */
 const PARTICIPANTS_THRESHOLD = 20;
+/**
+ * @private
+ */
+const MINUTE_IN_MS = 1000 * 60;
 /**
  * @private
  *
@@ -8839,6 +8804,7 @@ const compareMessages = (firstMessage, secondMessage) => {
 const updateMessagesWithAttached = (chatMessagesWithStatus) => {
     chatMessagesWithStatus.sort(compareMessages);
     chatMessagesWithStatus.forEach((message, index, messages) => {
+        var _a, _b;
         if (message.messageType !== 'chat') {
             return;
         }
@@ -8853,9 +8819,15 @@ const updateMessagesWithAttached = (chatMessagesWithStatus) => {
         const nextMessage = index === messages.length - 1 ? undefined : messages[index + 1];
         const previousSenderId = (previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.messageType) === 'chat' ? previousMessage.senderId : undefined;
         const nextSenderId = (nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.messageType) === 'chat' ? nextMessage.senderId : undefined;
+        const timediff = new Date((_a = message === null || message === void 0 ? void 0 : message.createdOn) !== null && _a !== void 0 ? _a : '').getTime() - new Date((_b = previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.createdOn) !== null && _b !== void 0 ? _b : '').getTime();
+        const diffMins = Math.round(timediff / MINUTE_IN_MS); // minutes
         if (previousSenderId !== message.senderId) {
             attached = message.senderId === nextSenderId ? 'top' : false;
         }
+        else if (diffMins && diffMins >= 5) {
+            // if there are more than or equal to 5 mins time gap between messages do not attach and show time stamp
+            attached = false;
+        }
         else {
             attached = message.senderId === nextSenderId ? true : 'bottom';
         }
@@ -12791,7 +12763,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",openDtmfDialpadLabel:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$c={chatListHeader:"In this chat"};var callWithChat$c={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButton:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -14454,7 +14426,8 @@ const END_CALL_PAGES = [
 
 // Copyright (c) Microsoft Corporation.
 const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
-const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300];
+const REMOTE_PSTN_USER_HUNG_UP = 560000;
+const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
 /**
  * @private
  */
@@ -14499,11 +14472,24 @@ var CallEndReasons;
     CallEndReasons[CallEndReasons["REMOVED_FROM_CALL"] = 2] = "REMOVED_FROM_CALL";
 })(CallEndReasons || (CallEndReasons = {}));
 const getCallEndReason = (call) => {
-    var _a, _b;
-    if (((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
+    var _a, _b, _c;
+    const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));
+    /**
+     * Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.
+     * The code and subcode is the same as when a user is removed from a teams interop call.
+     * Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.
+     * If yes, the caller was kicked out of the call, but we need to show them that they left the call.
+     * Note: This check will only work for 1:1 PSTN Calls. The subcode is different for 1:N PSTN calls, and we do not need to handle that case.
+     */
+    if (remoteParticipantsEndedArray.length === 1 &&
+        communicationCommon.isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&
+        ((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) !== REMOTE_PSTN_USER_HUNG_UP) {
+        return CallEndReasons.LEFT_CALL;
+    }
+    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
         return CallEndReasons.ACCESS_DENIED;
     }
-    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
+    if (((_c = call.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
         return CallEndReasons.REMOVED_FROM_CALL;
     }
     if (call.callEndReason) {
@@ -14610,6 +14596,19 @@ const disableCallControls = (callControlOptions, disabledControls) => {
     }
     return newOptions;
 };
+/**
+ * Check if a disabled object is provided for a button and returns if the button is disabled.
+ *
+ * @param option
+ * @returns whether a button is disabled
+ * @private
+ */
+const isDisabled$2 = (option) => {
+    if (typeof option !== 'boolean') {
+        return !!(option === null || option === void 0 ? void 0 : option.disabled);
+    }
+    return option;
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -14978,9 +14977,9 @@ const Participants = (props) => {
         var _a;
         return concatButtonBaseStyles(props.increaseFlyoutItemSize ? participantButtonWithIncreasedTouchTargets : {}, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.increaseFlyoutItemSize, props.styles]);
-    return (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$2(props.option) || props.disabled, styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
+    return (React__default['default'].createElement(ParticipantsButton, Object.assign({ "data-ui-id": "call-composite-participants-button" }, participantsButtonProps, { showLabel: props.displayType !== 'compact', callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, disabled: isDisabled$1(props.option) || props.disabled, styles: participantsButtonStyles, showParticipantOverflowTooltip: !props.isMobile })));
 };
-const isDisabled$2 = (option) => {
+const isDisabled$1 = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
     }
@@ -14994,11 +14993,11 @@ const ScreenShare = (props) => {
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     const screenShareButtonDisabled = () => {
         /* @conditional-compile-remove(PSTN-calls) */
-        return (screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) ? screenShareButtonProps.disabled : isDisabled$1(props.option);
+        return (screenShareButtonProps === null || screenShareButtonProps === void 0 ? void 0 : screenShareButtonProps.disabled) ? screenShareButtonProps.disabled : isDisabled(props.option);
     };
     return (React__default['default'].createElement(ScreenShareButton, Object.assign({ "data-ui-id": "call-composite-screenshare-button" }, screenShareButtonProps, { showLabel: props.displayType !== 'compact', disabled: screenShareButtonDisabled() || props.disabled, styles: styles })));
 };
-const isDisabled$1 = (option) => {
+const isDisabled = (option) => {
     if (option === undefined || option === true || option === false) {
         return false;
     }
@@ -15179,7 +15178,7 @@ const CallControls = (props) => {
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
     const moreButtonContextualMenuItems = () => {
         const items = [];
-        if (props.isMobile && props.onPeopleButtonClicked) {
+        if (props.isMobile && props.onPeopleButtonClicked && isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton)) {
             items.push({
                 key: 'peopleButtonKey',
                 text: localeStrings.component.strings.participantsButton.label,
@@ -15192,6 +15191,7 @@ const CallControls = (props) => {
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
+                disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton),
                 ['data-ui-id']: 'call-composite-more-menu-people-button'
             });
         }
@@ -15205,7 +15205,7 @@ const CallControls = (props) => {
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
-            disabled: isDisabled(options === null || options === void 0 ? void 0 : options.holdButton),
+            disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.holdButton),
             ['data-ui-id']: 'hold-button'
         });
         /* @conditional-compile-remove(PSTN-calls) */
@@ -15243,27 +15243,21 @@ const CallControls = (props) => {
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React__default['default'].createElement(react.Stack.Item, null,
             React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.cameraButton) })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) &&
                     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                    !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
+                    !props.isMobile && (React__default['default'].createElement(Participants, { option: options === null || options === void 0 ? void 0 : options.participantsButton, callInvitationURL: props.callInvitationURL, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, isMobile: props.isMobile, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })) && (
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton) })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled(options === null || options === void 0 ? void 0 : options.devicesButton) })),
+                React__default['default'].createElement(People, { checked: props.peopleButtonChecked, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) })),
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && (React__default['default'].createElement(MoreButton, { strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: !props.isMobile })),
                 customButtons['primary'],
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React__default['default'].createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
 const isEnabled$2 = (option) => option !== false;
-const isDisabled = (option) => {
-    if (typeof option !== 'boolean') {
-        return !!(option === null || option === void 0 ? void 0 : option.disabled);
-    }
-    return option;
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -15854,6 +15848,7 @@ const AddPeopleDropdown = (props) => {
     const theme = react.useTheme();
     const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;
     const [showDialpad, setShowDialpad] = React.useState(false);
+    const [announcerStrings, setAnnouncerStrings] = React.useState();
     const menuStyleThemed = React.useMemo(() => themedMenuStyle(theme), [theme]);
     const copyLinkButtonStylesThemed = React.useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);
     const defaultMenuProps = React.useMemo(() => {
@@ -15863,6 +15858,10 @@ const AddPeopleDropdown = (props) => {
             useTargetWidth: true,
             calloutProps: {
                 preventDismissOnEvent: _preventDismissOnEvent
+            },
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            onMenuOpened(contextualMenu) {
+                setAnnouncerStrings(undefined);
             }
         };
         if (inviteLink) {
@@ -15871,7 +15870,10 @@ const AddPeopleDropdown = (props) => {
                 text: strings.copyInviteLinkButtonLabel,
                 itemProps: { styles: copyLinkButtonStylesThemed },
                 iconProps: { iconName: 'Link', style: iconStyles },
-                onClick: () => copy__default['default'](inviteLink)
+                onClick: () => {
+                    setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
+                    copy__default['default'](inviteLink);
+                }
             });
         }
         // only show the dialpad option when alternateCallerId is set
@@ -15887,12 +15889,13 @@ const AddPeopleDropdown = (props) => {
         }
         return menuProps;
     }, [
+        menuStyleThemed,
+        inviteLink,
+        alternateCallerId,
         strings.copyInviteLinkButtonLabel,
+        strings.copyInviteLinkActionedAriaLabel,
         strings.openDialpadButtonLabel,
-        copyLinkButtonStylesThemed,
-        inviteLink,
-        menuStyleThemed,
-        alternateCallerId
+        copyLinkButtonStylesThemed
     ]);
     const onDismissDialpad = () => {
         setShowDialpad(false);
@@ -15906,6 +15909,7 @@ const AddPeopleDropdown = (props) => {
     }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);
     if (mobileView) {
         return (React__default['default'].createElement(react.Stack, null,
+            React__default['default'].createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
             React__default['default'].createElement(react.Stack.Item, { styles: copyLinkButtonContainerStyles },
                 React__default['default'].createElement(react.PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" })),
             addPeopleDrawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles, "data-ui-id": "call-add-people-dropdown" },
@@ -15913,6 +15917,7 @@ const AddPeopleDropdown = (props) => {
             alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }))));
     }
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Stack, null,
+        React__default['default'].createElement(Announcer, { ariaLive: 'assertive', announcementString: announcerStrings }),
         alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId })),
         React__default['default'].createElement(react.Stack, { styles: copyLinkButtonStackStyles },
             React__default['default'].createElement(react.DefaultButton, { onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" })))));
@@ -16151,8 +16156,8 @@ const TabHeader = (props) => {
     }, [theme, haveMultipleTabs]);
     return (React__default['default'].createElement(react.Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
         React__default['default'].createElement(react.DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
-        React__default['default'].createElement(react.Stack.Item, { grow: true }, onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab' }, strings.chatButtonLabel))),
-        React__default['default'].createElement(react.Stack.Item, { grow: true }, onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab' }, strings.peopleButtonLabel))),
+        React__default['default'].createElement(react.Stack.Item, { grow: true }, onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab', disabled: props.disableChatButton }, strings.chatButtonLabel))),
+        React__default['default'].createElement(react.Stack.Item, { grow: true }, onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab', disabled: props.disablePeopleButton }, strings.peopleButtonLabel))),
         React__default['default'].createElement(react.DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 
@@ -16199,6 +16204,7 @@ var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments,
  */
 /** @beta */
 const CallPane = (props) => {
+    var _a;
     const [drawerMenuItems, setDrawerMenuItems] = React.useState([]);
     const hidden = props.activePane === 'none';
     const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;
@@ -16210,7 +16216,7 @@ const CallPane = (props) => {
     };
     const strings = getStrings();
     const theme = useTheme();
-    const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { strings: strings, activeTab: props.activePane }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { strings: strings, headingText: props.activePane === 'people' ? strings.peoplePaneTitle : '' })));
+    const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { strings: strings, activeTab: props.activePane, disablePeopleButton: isDisabled$2((_a = props.callControls) === null || _a === void 0 ? void 0 : _a.participantsButton) }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { strings: strings, headingText: props.activePane === 'people' ? strings.peoplePaneTitle : '' })));
     /**
      * In a Call Composite when a participant is removed, we must remove them from the call.
      */
@@ -16336,7 +16342,7 @@ const CallArrangement = (props) => {
     const callPaneContent = React.useCallback(() => {
         var _a;
         if (adapter && _isInCall(callStatus) && activePane === 'people') {
-            return (React__default['default'].createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, onPeopleButtonClicked: showShowPeopleTabHeaderButton$1(props.callControlProps.options) ? selectPeople : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
+            return (React__default['default'].createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, onPeopleButtonClicked: showShowPeopleTabHeaderButton$1(props.callControlProps.options) ? selectPeople : undefined, callControls: typeof props.callControlProps.options !== 'boolean' ? props.callControlProps.options : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
         }
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }, [
@@ -17280,11 +17286,12 @@ const resumeButtonStyles = {
  */
 const holdPaneLabelStyles = {
     root: {
-        color: '#FFFFFF',
+        color: 'inherit',
         fontWeight: 600,
         fontHeight: _pxToRem(22),
         fontSize: _pxToRem(16),
-        margin: '1rem auto 0.5rem'
+        marginTop: '0.5rem',
+        marginBottom: '1.5rem'
     }
 };
 /**
@@ -17294,7 +17301,7 @@ const holdPaneLabelStyles = {
  */
 const holdPaneTimerStyles = {
     root: {
-        color: '#FFFFFF',
+        color: 'inherit',
         fontWeight: 600,
         fontSize: _pxToRem(20),
         lineHeight: _pxToRem(28),
@@ -17310,7 +17317,7 @@ const paneStyles = {
     root: {
         width: '100%',
         height: '100%',
-        background: 'rgba(0, 0, 0, 0.5)'
+        background: 'inherit'
     }
 };
 /**
@@ -17323,7 +17330,9 @@ const holdPaneContentStyles = {
         display: 'flex',
         margin: 'auto',
         flexDirection: 'column',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center'
     }
 };
 
@@ -17360,14 +17369,11 @@ const HoldPane = () => {
             clearInterval(interval);
         };
     }, [startTime]);
-    const resumeSpinner = () => {
-        return React__default['default'].createElement(react.Spinner, { label: strings.resumingCallButtonLabel, labelPosition: 'right' });
-    };
     return (React__default['default'].createElement(react.Stack, { styles: paneStyles },
         React__default['default'].createElement(react.Stack, { horizontal: true, styles: holdPaneContentStyles },
             React__default['default'].createElement(react.Text, { styles: holdPaneTimerStyles }, elapsedTime),
             React__default['default'].createElement(react.Text, { styles: holdPaneLabelStyles }, strings.holdScreenLabel),
-            React__default['default'].createElement(react.PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : undefined, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter$6(void 0, void 0, void 0, function* () {
+            React__default['default'].createElement(react.PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter$6(void 0, void 0, void 0, function* () {
                     setResumingCall(true);
                     try {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -17377,7 +17383,7 @@ const HoldPane = () => {
                         setResumingCall(false);
                         throw e;
                     }
-                }), "data-ui-id": "hold-page-resume-call-button" }, resumingCall && resumeSpinner()))));
+                }), "data-ui-id": "hold-page-resume-call-button" }))));
 };
 const getMinutes = (time) => {
     return Math.floor(getSeconds(time) / 60);
@@ -18633,7 +18639,7 @@ const CallWithChatControlBar = (props) => {
     if (options === false) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
-    const chatButton = (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: props.chatButtonChecked, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel }));
+    const chatButton = (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: props.chatButtonChecked, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.chatButton), strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel }));
     return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles) },
         React__default['default'].createElement(react.Stack.Item, { grow: true },
             React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
@@ -18642,14 +18648,14 @@ const CallWithChatControlBar = (props) => {
                         React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
                             isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                disabled: props.disableButtonsForHoldScreen })),
+                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.microphoneButton) })),
                             isEnabled$1(options.cameraButton) && (React__default['default'].createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                disabled: props.disableButtonsForHoldScreen })),
+                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.cameraButton) })),
                             props.mobileView && isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
                             isEnabled$1(options.screenShareButton) && (React__default['default'].createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
                                 /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                                disabled: props.disableButtonsForHoldScreen })), 
+                                disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.screenShareButton) })), 
                         /* @conditional-compile-remove(control-bar-button-injection) */
                         (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
                             _a.props.children.slice(0, props.mobileView
@@ -18668,7 +18674,7 @@ const CallWithChatControlBar = (props) => {
             _b.props.children.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
                 return (React__default['default'].createElement(element.type, Object.assign({}, element.props, { key: element.props.key, styles: commonButtonStyles, displayType: options.displayType, showLabel: options.displayType !== 'compact' })));
             }),
-            isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage, strings: peopleButtonStrings, styles: commonButtonStyles })),
+            isEnabled$1(options === null || options === void 0 ? void 0 : options.peopleButton) && (React__default['default'].createElement(PeopleButton, { checked: props.peopleButtonChecked, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-with-chat-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
             isEnabled$1(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton))));
 };
 const desktopButtonContainerStyle = {
@@ -19057,7 +19063,8 @@ const MoreDrawer = (props) => {
                 },
                 text: mic.name,
                 onItemClick: onMicrophoneItemClick,
-                secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined
+                secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined,
+                disabled: drawerSelectionOptions !== false ? isDisabled$2(drawerSelectionOptions.microphoneButton) : undefined
             })),
             secondaryText: (_b = props.selectedMicrophone) === null || _b === void 0 ? void 0 : _b.name
         });
@@ -19067,14 +19074,16 @@ const MoreDrawer = (props) => {
             itemKey: 'people',
             text: props.strings.peopleButtonLabel,
             iconProps: { iconName: 'MoreDrawerPeople' },
-            onItemClick: props.onPeopleButtonClicked
+            onItemClick: props.onPeopleButtonClicked,
+            disabled: drawerSelectionOptions !== false ? isDisabled$2(drawerSelectionOptions.peopleButton) : undefined
         });
     }
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton)) {
+    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.holdButton)) {
         drawerMenuItems.push({
             itemKey: 'holdButtonKey',
-            disabled: props.disableButtonsForHoldScreen,
+            disabled: props.disableButtonsForHoldScreen ||
+                (drawerSelectionOptions !== false ? isDisabled$2(drawerSelectionOptions.holdButton) : undefined),
             text: localeStrings.component.strings.holdButton.tooltipOffContent,
             onItemClick: () => {
                 holdButtonProps.onToggleHold();
@@ -19084,7 +19093,7 @@ const MoreDrawer = (props) => {
     }
     /*@conditional-compile-remove(PSTN-calls) */
     // dtmf tone sending only works for 1:1 PSTN call
-    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton) && props.onClickShowDialpad) {
+    if (drawerSelectionOptions !== false && props.onClickShowDialpad) {
         drawerMenuItems.push({
             itemKey: 'showDialpadKey',
             disabled: props.disableButtonsForHoldScreen,
@@ -19156,6 +19165,7 @@ var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 const CallWithChatPane = (props) => {
+    var _a, _b;
     const [drawerMenuItems, setDrawerMenuItems] = React.useState([]);
     const hidden = props.activePane === 'none';
     const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;
@@ -19163,7 +19173,7 @@ const CallWithChatPane = (props) => {
     const theme = useTheme();
     /* @conditional-compile-remove(PSTN-calls) */
     const alternateCallerId = props.callAdapter.getState().alternateCallerId;
-    const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { strings: callWithChatStrings, activeTab: props.activePane }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { strings: callWithChatStrings, headingText: props.activePane === 'chat'
+    const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { strings: callWithChatStrings, activeTab: props.activePane, disableChatButton: isDisabled$2((_a = props.callControls) === null || _a === void 0 ? void 0 : _a.chatButton), disablePeopleButton: isDisabled$2((_b = props.callControls) === null || _b === void 0 ? void 0 : _b.peopleButton) }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { strings: callWithChatStrings, headingText: props.activePane === 'chat'
             ? callWithChatStrings.chatPaneTitle
             : props.activePane === 'people'
                 ? callWithChatStrings.peoplePaneTitle
@@ -19232,6 +19242,7 @@ const CallWithChatScreen = (props) => {
             setCurrentPage(newState.page);
             setCurrentCallState((_a = newState.call) === null || _a === void 0 ? void 0 : _a.state);
         };
+        updateCallWithChatPage(callWithChatAdapter.getState());
         callWithChatAdapter.onStateChange(updateCallWithChatPage);
         return () => {
             callWithChatAdapter.offStateChange(updateCallWithChatPage);
@@ -19337,7 +19348,7 @@ const CallWithChatScreen = (props) => {
                     React__default['default'].createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: { callControls: false }, adapter: callAdapter, fluentTheme: fluentTheme }))),
                 chatProps.adapter && callAdapter && hasJoinedCall && (React__default['default'].createElement(CallWithChatPane, { chatCompositeProps: chatProps, inviteLink: props.joinInvitationURL, onClose: closePane, chatAdapter: chatProps.adapter, callAdapter: callAdapter, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, onChatButtonClicked: showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined, modalLayerHostId: modalLayerHostId, mobileView: mobileView, activePane: activePane, 
                     /* @conditional-compile-remove(file-sharing) */
-                    fileSharing: props.fileSharing, rtl: props.rtl }))),
+                    fileSharing: props.fileSharing, rtl: props.rtl, callControls: typeof props.callControls !== 'boolean' ? props.callControls : undefined }))),
             showControlBar && !isMobileWithActivePane && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(react.Stack.Item, { styles: controlBarContainerStyles$1 },
                     React__default['default'].createElement(CallWithChatControlBar, { callAdapter: callAdapter, chatAdapter: chatProps.adapter, chatButtonChecked: activePane === 'chat', onChatButtonClicked: toggleChat, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeople, onMoreButtonClicked: onMoreButtonClicked, mobileView: mobileView, disableButtonsForLobbyPage: isInLobbyOrConnecting, 
@@ -19377,7 +19388,8 @@ const CallWithChatComposite = (props) => {
 };
 const hasJoinedCallFn = (page, callStatus) => {
     /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
-    return (page === 'call' && callStatus === 'Connected') || (page === 'hold' && callStatus === 'LocalHold');
+    return ((page === 'call' && (callStatus === 'Connected' || callStatus === 'RemoteHold')) ||
+        (page === 'hold' && callStatus === 'LocalHold'));
 };
 const showShowChatTabHeaderButton = (callControls) => {
     if (callControls === undefined || callControls === true) {