@azure/communication-react 1.3.3-alpha-202208120013.0 → 1.3.3-alpha-202208180014.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-202208120013.0';
+var telemetryVersion = '1.3.3-alpha-202208180014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -405,7 +405,7 @@ var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments,
  *
  * @internal
  */
-const _isInCall = (callStatus) => !!callStatus && !['None', 'Disconnected', 'Connecting'].includes(callStatus);
+const _isInCall = (callStatus) => !!callStatus && !['None', 'Disconnected', 'Connecting', 'LocalHold', 'Ringing', 'EarlyMedia'].includes(callStatus);
 /**
  * Check if the call state represents being in the lobby or waiting to be admitted.
  *
@@ -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$e={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$e,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};
 
@@ -1938,9 +1938,9 @@ const DEFAULT_COMPONENT_ICONS = {
     ParticipantItemOptionsHovered: React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, null),
     ParticipantItemScreenShareStart: React__default['default'].createElement(reactIcons.ShareScreenStart20Filled, null),
     /* @conditional-compile-remove(PSTN-calls) */
-    HoldCall: React__default['default'].createElement(reactIcons.Pause20Filled, null),
+    HoldCall: React__default['default'].createElement(reactIcons.Pause20Regular, null),
     /* @conditional-compile-remove(PSTN-calls) */
-    ResumeCall: React__default['default'].createElement(reactIcons.Play20Filled, null),
+    ResumeCall: React__default['default'].createElement(reactIcons.Play20Regular, null),
     SendBoxSend: React__default['default'].createElement(reactIcons.Send20Regular, null),
     SendBoxSendHovered: React__default['default'].createElement(reactIcons.Send20Filled, null),
     VideoTileMicOff: React__default['default'].createElement(reactIcons.MicOff16Filled, null),
@@ -2271,6 +2271,12 @@ 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.
 /**
@@ -4348,7 +4354,7 @@ const participantStateMaxWidth = '5rem';
 /**
  * @private
  */
-const participantStateStringStyles = {
+const participantStateStringStyles$1 = {
     maxWidth: participantStateMaxWidth,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -4421,7 +4427,7 @@ const ParticipantItem = (props) => {
         setItemHovered(false);
         setMenuHidden(true);
     };
-    const participantStateString = participantStateStringTrampoline(props, strings);
+    const participantStateString = participantStateStringTrampoline$1(props, strings);
     return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, className: react.mergeStyles(participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
@@ -4436,13 +4442,13 @@ const ParticipantItem = (props) => {
             avatar,
             me && React__default['default'].createElement(react.Text, { className: meTextStyle }, strings.isMeText),
             React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(infoContainerStyle) }, onRenderIcon && onRenderIcon(props))),
-        !me && participantStateString ? (React__default['default'].createElement(react.Text, { "data-ui-id": "participant-item-state-string", className: react.mergeStyles(participantStateStringStyles) }, participantStateString)) : (React__default['default'].createElement("div", null, menuItems && menuItems.length > 0 && (React__default['default'].createElement(React__default['default'].Fragment, null,
+        !me && participantStateString ? (React__default['default'].createElement(react.Text, { "data-ui-id": "participant-item-state-string", className: react.mergeStyles(participantStateStringStyles$1) }, participantStateString)) : (React__default['default'].createElement("div", null, menuItems && menuItems.length > 0 && (React__default['default'].createElement(React__default['default'].Fragment, null,
             menuButton,
             React__default['default'].createElement(react.ContextualMenu, { items: menuItems, hidden: menuHidden, target: containerRef, onItemClick: onDismissMenu, onDismiss: onDismissMenu, directionalHint: react.DirectionalHint.bottomRightEdge, className: contextualMenuStyle, calloutProps: {
                     preventDismissOnEvent: _preventDismissOnEvent
                 } })))))));
 };
-const participantStateStringTrampoline = (props, strings) => {
+const participantStateStringTrampoline$1 = (props, strings) => {
     /* @conditional-compile-remove(one-to-n-calling) */
     /* @conditional-compile-remove(PSTN-calls) */
     return props.participantState === 'Idle' || props.participantState === 'Connecting'
@@ -4454,6 +4460,65 @@ const participantStateStringTrampoline = (props, strings) => {
                 : undefined;
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @internal
+ */
+const presenterPermissions = {
+    cameraButton: true,
+    microphoneButton: true,
+    screenShare: true,
+    removeParticipantButton: true
+};
+/**
+ * @internal
+ */
+const consumerPermissions = {
+    cameraButton: false,
+    microphoneButton: false,
+    screenShare: false,
+    removeParticipantButton: false
+};
+/**
+ * @internal
+ */
+const attendeePermissions = {
+    cameraButton: true,
+    microphoneButton: true,
+    screenShare: false,
+    removeParticipantButton: false
+};
+/**
+ * @internal
+ */
+const PermissionsContext = React.createContext(presenterPermissions);
+/**
+ * @internal
+ */
+const _PermissionsProvider = (props) => {
+    const { permissions, children } = props;
+    return React__default['default'].createElement(PermissionsContext.Provider, { value: permissions }, children);
+};
+/**
+ * @internal
+ * React hook to access permissions
+ */
+const _usePermissions = () => React.useContext(PermissionsContext);
+/**
+ * @internal
+ */
+const _getPermissions = (role) => {
+    if (role === 'Consumer') {
+        return consumerPermissions;
+    }
+    else if (role === 'Attendee') {
+        return attendeePermissions;
+    }
+    else {
+        return presenterPermissions;
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -4534,6 +4599,11 @@ const ParticipantList = (props) => {
     const createParticipantMenuItems = (participant) => {
         var _a, _b;
         let menuItems = [];
+        let disabled = !participant.isRemovable;
+        /* @conditional-compile-remove(rooms) */
+        const isRemovable = _usePermissions().removeParticipantButton;
+        /* @conditional-compile-remove(rooms) */
+        disabled = !isRemovable || disabled;
         if (participant.userId !== myUserId && onRemoveParticipant) {
             menuItems.push({
                 key: 'remove',
@@ -4542,7 +4612,7 @@ const ParticipantList = (props) => {
                 itemProps: {
                     styles: (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles) === null || _b === void 0 ? void 0 : _b.participantSubMenuItemsStyles
                 },
-                disabled: !participant.isRemovable,
+                disabled: disabled,
                 'data-ui-id': ids.participantListRemoveParticipantButton
             });
         }
@@ -4769,15 +4839,6 @@ const displayNameStyle = {
     textOverflow: 'ellipsis',
     maxWidth: '100%'
 };
-/**
- * @private
- */
-const participantStateStyle$1 = {
-    textAlign: 'center',
-    paddingTop: '0.5rem',
-    fontWeight: 600,
-    fontSize: '0.75rem'
-};
 /**
  * @private
  */
@@ -4801,6 +4862,25 @@ const isSpeakingBorderDiv = {
     // Ensure the isSpeaking element does not steal any pointer events such as onClick events
     pointerEvents: 'none'
 };
+/**
+ * @private
+ */
+const participantStateStringStyles = (showLabel) => {
+    return {
+        textAlign: 'center',
+        minWidth: '3rem',
+        color: 'inherit',
+        width: showLabel ? 'auto' : '100%',
+        marginRight: showLabel ? 0 : 'none',
+        marginLeft: showLabel ? 'auto' : 'none',
+        fontSize: '0.75rem',
+        lineHeight: 'normal',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        padding: '0.25rem'
+    };
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -4817,26 +4897,10 @@ const DEFAULT_PERSONA_MAX_SIZE_PX = 100;
 // Coin min size is set PersonaSize.size32
 const DEFAULT_PERSONA_MIN_SIZE_PX = 32;
 const DefaultPlaceholder = (props) => {
-    const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails, participantState, strings } = props;
-    const participantStateString = React__default['default'].useMemo(() => {
-        if (!strings) {
-            return;
-        }
-        if (participantState === 'Idle' || participantState === 'Connecting') {
-            return strings === null || strings === void 0 ? void 0 : strings.participantStateConnecting;
-        }
-        else if (participantState === 'EarlyMedia' || participantState === 'Ringing') {
-            return strings === null || strings === void 0 ? void 0 : strings.participantStateRinging;
-        }
-        else if (participantState === 'Hold') {
-            return strings === null || strings === void 0 ? void 0 : strings.participantStateHold;
-        }
-        return;
-    }, [participantState, strings]);
+    const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;
     return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
         React__default['default'].createElement(react.Stack, { styles: defaultPersonaStyles },
-            React__default['default'].createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false }),
-            participantStateString && React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle$1) }, participantStateString))));
+            React__default['default'].createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false }))));
 };
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /**
@@ -4847,15 +4911,10 @@ const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
  * @public
  */
 const VideoTile = (props) => {
-    const { children, displayName, initialsName, isMirrored, isMuted, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, 
-    /* @conditional-compile-remove(one-to-n-calling) */
-    /* @conditional-compile-remove(PSTN-calls) */
-    participantState } = props;
-    /* @conditional-compile-remove(one-to-n-calling) */
-    // @conditional-compile-remove(PSTN-calls)
-    const strings = Object.assign(Object.assign({}, useLocale$1().strings.videoTile), props.strings);
+    const { children, displayName, initialsName, isMirrored, isMuted, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX } = props;
     const [personaSize, setPersonaSize] = React.useState(100);
     const videoTileRef = React.useRef(null);
+    const locale = useLocale$1();
     const theme = useTheme();
     const isVideoRendered = !!renderElement;
     const observer = React.useRef(new ResizeObserver((entries) => {
@@ -4876,14 +4935,13 @@ const VideoTile = (props) => {
         noVideoAvailableAriaLabel,
         coinSize: personaSize,
         styles: defaultPersonaStyles,
-        hidePersonaDetails: true,
-        /* @conditional-compile-remove(one-to-n-calling) */
-        /* @conditional-compile-remove(PSTN-calls) */
-        participantState: participantState
+        hidePersonaDetails: true
     };
     const videoHintWithBorderRadius = react.mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });
     const tileInfoStyle = React.useMemo(() => react.mergeStyles(isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint, getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'), styles === null || styles === void 0 ? void 0 : styles.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, theme, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer]);
     const ids = useIdentifiers();
+    const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));
+    const participantStateString = participantStateStringTrampoline(props, locale);
     return (React__default['default'].createElement(reactNorthstar.Ref, { innerRef: videoTileRef },
         React__default['default'].createElement(react.Stack, { "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
                 background: theme.palette.neutralLighter,
@@ -4893,274 +4951,91 @@ const VideoTile = (props) => {
                     borderRadius: theme.effects.roundedCorner4,
                     border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : 'transparent'}`
                 }) }),
-            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, { 
-                /* @conditional-compile-remove(one-to-n-calling) */
-                // @conditional-compile-remove(PSTN-calls)
-                strings: strings }))))),
-            showLabel && (displayName || (showMuteIndicator && isMuted)) && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle },
-                React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
-                    displayName && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName }, displayName)),
+            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))))),
+            (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" })))))),
+                        React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" }))))),
+                participantStateString && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStringStyles(showLabel)) }, participantStateString)))),
             children && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)))));
 };
-
-// Copyright (c) Microsoft Corporation.
-/**
- * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
- * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
- * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
- *
- * @internal
- */
-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, 
+const participantStateStringTrampoline = (props, locale) => {
     /* @conditional-compile-remove(one-to-n-calling) */
     /* @conditional-compile-remove(PSTN-calls) */
-    participantState } = props;
-    const remoteVideoStreamProps = React.useMemo(() => ({
-        isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
-        isScreenSharingOn,
-        isStreamAvailable: isAvailable,
-        isStreamReceiving: isReceiving,
-        onCreateRemoteStreamView,
-        onDisposeRemoteStreamView,
-        remoteParticipantId: userId,
-        renderElementExists: !!renderElement,
-        scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode
-    }), [
-        isAvailable,
-        isReceiving,
-        isScreenSharingOn,
-        onCreateRemoteStreamView,
-        onDisposeRemoteStreamView,
-        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
-        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
-        renderElement,
-        userId
-    ]);
-    // Handle creating, destroying and updating the video stream as necessary
-    useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
-    const renderVideoStreamElement = React.useMemo(() => {
-        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
-        // implies that, after their threshold, all streams have no child (blank video)
-        if (!renderElement || !renderElement.childElementCount) {
-            // Returning `undefined` results in the placeholder with avatar being shown
-            return undefined;
-        }
-        return (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }));
-    }, [renderElement, isReceiving]);
-    return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, showLabel: props.showLabel, personaMinSize: props.personaMinSize, 
-        /* @conditional-compile-remove(one-to-n-calling) */
-        /* @conditional-compile-remove(PSTN-calls) */
-        participantState: participantState }));
-});
+    const strings = Object.assign(Object.assign({}, locale.strings.videoTile), props.strings);
+    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(PSTN-calls) */
+    return props.participantState === 'Idle' || props.participantState === 'Connecting'
+        ? strings === null || strings === void 0 ? void 0 : strings.participantStateConnecting
+        : props.participantState === 'EarlyMedia' || props.participantState === 'Ringing'
+            ? strings === null || strings === void 0 ? void 0 : strings.participantStateRinging
+            : props.participantState === 'Hold'
+                ? strings === null || strings === void 0 ? void 0 : strings.participantStateHold
+                : undefined;
+};
+const tileInfoContainerTokens = {
+    // A horizontal Stack sets the left margin to 0 for all it's children.
+    // We need to allow the children to set their own margins
+    childrenGap: 'none'
+};
 
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
 /**
- * Horizontal Gallery button width in rem
+ * @private
  */
-const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
+const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
 /**
  * @private
  */
-const leftRightButtonStyles = (theme) => {
-    return {
-        background: 'none',
-        padding: 0,
-        height: 'auto',
-        minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
-        maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
-        border: `1px solid ${theme.palette.neutralLight}`,
-        borderRadius: theme.effects.roundedCorner4
-    };
+const videoGalleryContainerStyle = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
 };
 /**
- * Horizontal Gallery gap size in rem between tiles and buttons
+ * Small floating modal width and height in rem for small screen
  */
-const HORIZONTAL_GALLERY_GAP = 0.5;
+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 rootStyle = {
-    height: '100%',
-    width: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
-};
+const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-const childrenContainerStyle = {
-    height: '100%',
-    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+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);
 };
-
-// Copyright (c) Microsoft Corporation.
 /**
- * {@link HorizontalGallery} default children per page
+ * 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 DEFAULT_CHILDREN_PER_PAGE = 5;
+const localVideoTileOuterPaddingPX = 8;
 /**
- * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
- * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
- * @returns
+ * @private
  */
-const HorizontalGallery = (props) => {
-    var _a, _b;
-    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
-    const ids = useIdentifiers();
-    const [page, setPage] = React.useState(0);
-    const numberOfChildren = React__default['default'].Children.count(children);
-    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
-    const paginatedChildren = React.useMemo(() => {
-        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
-    }, [children, childrenPerPage]);
-    // If children per page is 0 or less return empty element
-    if (childrenPerPage <= 0) {
-        return React__default['default'].createElement(React__default['default'].Fragment, null);
-    }
-    const firstIndexOfCurrentPage = page * childrenPerPage;
-    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-    const childrenOnCurrentPage = paginatedChildren[clippedPage];
-    const showButtons = numberOfChildren > childrenPerPage;
-    const disablePreviousButton = page === 0;
-    const disableNextButton = page === lastPage;
-    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.horizontalGalleryLeftNavButton })),
-        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
-        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
-};
-const HorizontalGalleryNavigationButton = (props) => {
-    const theme = useTheme();
-    return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
+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) }));
 };
-function bucketize(arr, bucketSize) {
-    const bucketArray = [];
-    if (bucketSize <= 0) {
-        return bucketArray;
-    }
-    for (let i = 0; i < arr.length; i += bucketSize) {
-        bucketArray.push(arr.slice(i, i + bucketSize));
-    }
-    return bucketArray;
-}
-
-// Copyright (c) Microsoft Corporation.
 /**
- * Wrapped HorizontalGallery that adjusts the number of items per page based on the
- * available width obtained from a ResizeObserver, width per child, gap width, and button width
- */
-const ResponsiveHorizontalGallery = (props) => {
-    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
-    const containerRef = React.useRef(null);
-    const containerWidth = _useContainerWidth(containerRef);
-    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
-    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
-    const childrenPerPage = calculateChildrenPerPage({
-        numberOfChildren: React__default['default'].Children.count(props.children),
-        containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
-        childWidthRem,
-        gapWidthRem,
-        buttonWidthRem
-    });
-    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(props.containerStyles) },
-        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
-};
-/**
- * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
- * gaps in between
- */
-const calculateChildrenPerPage = (args) => {
-    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
-    const childWidth = _convertRemToPx(childWidthRem);
-    const gapWidth = _convertRemToPx(gapWidthRem);
-    /** First check how many children can fit in containerWidth.
-     *    __________________________________
-     *   |                ||                |
-     *   |                ||                |
-     *   |________________||________________|
-     *   <-----------containerWidth--------->
-     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
-     */
-    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
-    // If all children fit then return numberOfChildrenInContainer
-    if (numberOfChildren <= numberOfChildrenInContainer) {
-        return numberOfChildrenInContainer;
-    }
-    const buttonWidth = _convertRemToPx(buttonWidthRem);
-    /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
-     * containerWidth to compute childrenSpace
-     *   <-----------containerWidth--------->
-     *    __________________________________
-     *   | ||             ||             || |
-     *   |<||             ||             ||>|
-     *   |_||_____________||_____________||_|
-     *       <-------childrenSpace------>
-     */
-    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
-    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
-    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
-    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
+ * @private
  */
 const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
     return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
@@ -5284,6 +5159,240 @@ const localVideoModalStyles = {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * A memoized version of VideoTile for rendering remote participants. React.memo is used for a performance
+ * boost by memoizing the same rendered component to avoid rerendering a VideoTile when its position in the
+ * array changes causing a rerender in the parent component. https://reactjs.org/docs/react-api.html#reactmemo
+ *
+ * @internal
+ */
+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,
+        isStreamAvailable: isAvailable,
+        isStreamReceiving: isReceiving,
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteParticipantId: userId,
+        renderElementExists: !!renderElement,
+        scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode
+    }), [
+        isAvailable,
+        isReceiving,
+        isScreenSharingOn,
+        onCreateRemoteStreamView,
+        onDisposeRemoteStreamView,
+        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
+        remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.scalingMode,
+        renderElement,
+        userId
+    ]);
+    // Handle creating, destroying and updating the video stream as necessary
+    useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
+    const renderVideoStreamElement = React.useMemo(() => {
+        // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
+        // implies that, after their threshold, all streams have no child (blank video)
+        if (!renderElement || !renderElement.childElementCount) {
+            // Returning `undefined` results in the placeholder with avatar being shown
+            return undefined;
+        }
+        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);
+    }, [
+        /* @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 })));
+});
+/* @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.
+/**
+ * Horizontal Gallery button width in rem
+ */
+const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;
+/**
+ * @private
+ */
+const leftRightButtonStyles = (theme) => {
+    return {
+        background: 'none',
+        padding: 0,
+        height: 'auto',
+        minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,
+        border: `1px solid ${theme.palette.neutralLight}`,
+        borderRadius: theme.effects.roundedCorner4
+    };
+};
+/**
+ * Horizontal Gallery gap size in rem between tiles and buttons
+ */
+const HORIZONTAL_GALLERY_GAP = 0.5;
+/**
+ * @private
+ */
+const rootStyle = {
+    height: '100%',
+    width: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+/**
+ * @private
+ */
+const childrenContainerStyle = {
+    height: '100%',
+    gap: `${HORIZONTAL_GALLERY_GAP}rem`
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * {@link HorizontalGallery} default children per page
+ */
+const DEFAULT_CHILDREN_PER_PAGE = 5;
+/**
+ * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
+ * @param props - HorizontalGalleryProps {@link @azure/communication-react#HorizontalGalleryProps}
+ * @returns
+ */
+const HorizontalGallery = (props) => {
+    var _a, _b;
+    const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
+    const ids = useIdentifiers();
+    const [page, setPage] = React.useState(0);
+    const numberOfChildren = React__default['default'].Children.count(children);
+    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
+    const paginatedChildren = React.useMemo(() => {
+        return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
+    }, [children, childrenPerPage]);
+    // If children per page is 0 or less return empty element
+    if (childrenPerPage <= 0) {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
+    }
+    const firstIndexOfCurrentPage = page * childrenPerPage;
+    const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
+    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const showButtons = numberOfChildren > childrenPerPage;
+    const disablePreviousButton = page === 0;
+    const disableNextButton = page === lastPage;
+    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.horizontalGalleryLeftNavButton })),
+        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
+        showButtons && (React__default['default'].createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React__default['default'].createElement(react.Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
+};
+const HorizontalGalleryNavigationButton = (props) => {
+    const theme = useTheme();
+    return (React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
+};
+function bucketize(arr, bucketSize) {
+    const bucketArray = [];
+    if (bucketSize <= 0) {
+        return bucketArray;
+    }
+    for (let i = 0; i < arr.length; i += bucketSize) {
+        bucketArray.push(arr.slice(i, i + bucketSize));
+    }
+    return bucketArray;
+}
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Wrapped HorizontalGallery that adjusts the number of items per page based on the
+ * available width obtained from a ResizeObserver, width per child, gap width, and button width
+ */
+const ResponsiveHorizontalGallery = (props) => {
+    const { childWidthRem, gapWidthRem, buttonWidthRem = 0 } = props;
+    const containerRef = React.useRef(null);
+    const containerWidth = _useContainerWidth(containerRef);
+    const leftPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingLeft) : 0;
+    const rightPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingRight) : 0;
+    const childrenPerPage = calculateChildrenPerPage({
+        numberOfChildren: React__default['default'].Children.count(props.children),
+        containerWidth: (containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0) - leftPadding - rightPadding,
+        childWidthRem,
+        gapWidthRem,
+        buttonWidthRem
+    });
+    return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(props.containerStyles) },
+        React__default['default'].createElement(HorizontalGallery, { childrenPerPage: childrenPerPage, styles: props.horizontalGalleryStyles }, props.children)));
+};
+/**
+ * Helper function to calculate children per page for HorizontalGallery based on width of container, child, buttons, and
+ * gaps in between
+ */
+const calculateChildrenPerPage = (args) => {
+    const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
+    const childWidth = _convertRemToPx(childWidthRem);
+    const gapWidth = _convertRemToPx(gapWidthRem);
+    /** First check how many children can fit in containerWidth.
+     *    __________________________________
+     *   |                ||                |
+     *   |                ||                |
+     *   |________________||________________|
+     *   <-----------containerWidth--------->
+     *  containerWidth = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+     */
+    const numberOfChildrenInContainer = Math.floor((containerWidth + gapWidth) / (childWidth + gapWidth));
+    // If all children fit then return numberOfChildrenInContainer
+    if (numberOfChildren <= numberOfChildrenInContainer) {
+        return numberOfChildrenInContainer;
+    }
+    const buttonWidth = _convertRemToPx(buttonWidthRem);
+    /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
+     * containerWidth to compute childrenSpace
+     *   <-----------containerWidth--------->
+     *    __________________________________
+     *   | ||             ||             || |
+     *   |<||             ||             ||>|
+     *   |_||_____________||_____________||_|
+     *       <-------childrenSpace------>
+     */
+    const childrenSpace = containerWidth - 2 * buttonWidth - 2 * gapWidth;
+    // Now that we have childrenSpace width we can figure out how many children can fit in childrenSpace.
+    // childrenSpace = n * childWidth + (n - 1) * gapWidth. Isolate n and take the floor.
+    return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -6531,74 +6640,15 @@ const HighContrastAwareIcon = (props) => {
     const { iconName, disabled } = props;
     const theme = useTheme();
     // setting colors for the icons using color from theme, so in dark mode or other accessibility modes, they have pre-defined contrast colors
-    // the media query is for when in specific window accessibility mode, change the svg colors
-    return (React__default['default'].createElement(react.Icon, { iconName: iconName, className: react.mergeStyles({
-            svg: {
-                fill: disabled ? theme.palette.neutralTertiary : theme.palette.neutralPrimaryAlt,
-                '@media (forced-colors: active) and (prefers-color-scheme: dark)': {
-                    fill: disabled ? theme.palette.neutralPrimaryAlt : theme.palette.neutralTertiary
-                }
-            }
-        }) }));
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @internal
- */
-const presenterPermissions = {
-    cameraButton: true,
-    microphoneButton: true,
-    screenShare: true,
-    participantList: true
-};
-/**
- * @internal
- */
-const consumerPermissions = {
-    cameraButton: false,
-    microphoneButton: false,
-    screenShare: false,
-    participantList: false
-};
-/**
- * @internal
- */
-const attendeePermissions = {
-    cameraButton: true,
-    microphoneButton: true,
-    screenShare: false,
-    participantList: true
-};
-/**
- * @internal
- */
-const PermissionsContext = React.createContext(presenterPermissions);
-/**
- * @internal
- */
-const _PermissionsProvider = (props) => {
-    const { permissions, children } = props;
-    return React__default['default'].createElement(PermissionsContext.Provider, { value: permissions }, children);
-};
-/**
- * @internal
- * React hook to access permissions
- */
-const _usePermissions = () => React.useContext(PermissionsContext);
-/**
- * @internal
- */
-const _getPermissions = (role) => {
-    if (role === 'Consumer') {
-        return consumerPermissions;
-    }
-    else if (role === 'Attendee') {
-        return attendeePermissions;
-    }
-    else {
-        return presenterPermissions;
-    }
+    // the media query is for when in specific window accessibility mode, change the svg colors
+    return (React__default['default'].createElement(react.Icon, { iconName: iconName, className: react.mergeStyles({
+            svg: {
+                fill: disabled ? theme.palette.neutralTertiary : theme.palette.neutralPrimaryAlt,
+                '@media (forced-colors: active) and (prefers-color-scheme: dark)': {
+                    fill: disabled ? theme.palette.neutralPrimaryAlt : theme.palette.neutralTertiary
+                }
+            }
+        }) }));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -6995,9 +7045,7 @@ const MicrophoneButton = (props) => {
 const ParticipantsButton = (props) => {
     var _a, _b, _c, _d;
     const { callInvitationURL, styles, onMuteAll, onRenderIcon, onRenderParticipantList, participants, myUserId, excludeMe, onRenderParticipant, onRenderAvatar, onRemoveParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
-    let disabled = props.disabled;
-    /* @conditional-compile-remove(rooms) */
-    disabled = disabled || !_usePermissions().participantList;
+    const disabled = props.disabled;
     const onRenderPeopleIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonParticipants" }));
     const ids = useIdentifiers();
     const onMuteAllCallback = React.useCallback(() => {
@@ -7820,7 +7868,7 @@ const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
     const [textValue, setTextValue] = React.useState('');
-    const { onSendDtmfTone, onClickDialpadButton, onDisplayDialpadInput, onChange, showDeleteButton } = props;
+    const { onSendDtmfTone, onClickDialpadButton, onDisplayDialpadInput, onChange, showDeleteButton = true } = props;
     const sanitizeInput = (input) => {
         // remove non-valid characters from input: letters,special characters excluding +, *,#
         return input.replace(/[^\d*#+]/g, '');
@@ -7898,7 +7946,6 @@ const DialpadContainer = (props) => {
  * @beta
  */
 const Dialpad = (props) => {
-    var _a;
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
     const localeStrings = useLocale$1().strings.dialpad;
     const dialpadLocaleStringsTrampoline = () => {
@@ -7906,8 +7953,7 @@ const Dialpad = (props) => {
         return localeStrings;
     };
     const strings = Object.assign(Object.assign({}, dialpadLocaleStringsTrampoline()), props.strings);
-    const showDeleteButton = (_a = props.showDeleteButton) !== null && _a !== void 0 ? _a : true;
-    return React__default['default'].createElement(DialpadContainer, Object.assign({ strings: strings }, props, { showDeleteButton: showDeleteButton }));
+    return React__default['default'].createElement(DialpadContainer, Object.assign({ strings: strings }, props));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -12665,7 +12711,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"};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"};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",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",resumeCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpad:"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",openDtmfDialpad:"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};
 
@@ -14398,6 +14444,10 @@ const getCallCompositePage = (call, previousCall) => {
         else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
             return 'call';
         }
+        else if ((call === null || call === void 0 ? void 0 : call.state) === 'LocalHold') {
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return 'hold';
+        }
         else {
             // When the call object has been constructed after clicking , but before 'connecting' has been
             // set on the call object, we continue to show the configuration screen.
@@ -14838,6 +14888,15 @@ const People = (props) => {
     return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { "data-ui-id": "call-composite-participants-button", strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon$2, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon$2, onClick: onClick, styles: styles })));
 };
 
+// Copyright (c) Microsoft Corporation.
+const icon$1 = () => React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, { key: 'chatOnIconKey', primaryFill: "currentColor" });
+/**
+ * @private
+ */
+const MoreButton = (props) => {
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: props.showLabel, onRenderOnIcon: icon$1, onRenderOffIcon: icon$1, onClick: props.onClick, "data-ui-id": 'call-with-chat-composite-more-button' })));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -14929,20 +14988,17 @@ const SendDtmfDialpad = (props) => {
     };
     const dialpadModalStyle = React.useMemo(() => themeddialpadModalStyle$1(theme), [theme]);
     const dialpadStyle = React.useMemo(() => themedDialpadStyle$1(isMobile, theme), [theme, isMobile]);
-    const dialpadStrings = {
-        placeholderText: ''
-    };
     if (isMobile) {
         return (React__default['default'].createElement(react.Stack, null, showDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
             React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onDismissTriggered },
                 React__default['default'].createElement(react.Stack, { style: { padding: '1rem' } },
-                    React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false }))))))));
+                    React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))))));
     }
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
         React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
             React__default['default'].createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
         React__default['default'].createElement(react.Stack, null,
-            React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: dialpadStrings }))))));
+            React__default['default'].createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, strings: strings }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14961,11 +15017,62 @@ const CallControls = (props) => {
         tooltipOffContent: localeStrings.strings.callWithChat.peopleButtonTooltipOpen,
         tooltipOnContent: localeStrings.strings.callWithChat.peopleButtonTooltipClose
     }), [localeStrings]);
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const moreButtonStrings = React.useMemo(() => ({
+        label: localeStrings.strings.call.moreButtonCallingLabel,
+        tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
+    }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */
     const dialpadStrings = React.useMemo(() => ({
         dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,
-        dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel
+        dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel,
+        placeholderText: localeStrings.strings.call.dtmfDialpadPlaceHolderText
     }), [localeStrings]);
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const holdButtonProps = usePropsFor$1(HoldButton);
+    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
+    const moreButtonContextualMenuItems = () => {
+        const items = [];
+        if (props.isMobile && props.onPeopleButtonClicked) {
+            items.push({
+                key: 'peopleButtonKey',
+                text: localeStrings.component.strings.participantsButton.label,
+                onClick: () => {
+                    if (props.onPeopleButtonClicked) {
+                        props.onPeopleButtonClicked();
+                    }
+                },
+                iconProps: { iconName: 'ControlButtonParticipants', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                }
+            });
+        }
+        items.push({
+            key: 'holdButtonKey',
+            text: localeStrings.component.strings.holdButton.tooltipOffContent,
+            onClick: () => {
+                holdButtonProps.onToggleHold();
+            },
+            iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            }
+        });
+        /* @conditional-compile-remove(PSTN-calls) */
+        items.push({
+            key: 'showDialpadKey',
+            text: localeStrings.strings.call.openDtmfDialpad,
+            onClick: () => {
+                setShowDialpad(true);
+            },
+            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            }
+        });
+        return items;
+    };
     /* @conditional-compile-remove(PSTN-calls) */
     const [showDialpad, setShowDialpad] = React.useState(false);
     const theme = react.useTheme();
@@ -14987,10 +15094,13 @@ const CallControls = (props) => {
                 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 }),
                 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 }),
                 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 })),
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) && (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 })) && (
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) &&
+                    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */ !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 })) && (
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
                 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-with-chat-composite-people-button", disabled: isDisabled(options === null || options === void 0 ? void 0 : options.participantsButton), strings: peopleButtonStrings })),
                 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 })),
+                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
+                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 })))));
 };
@@ -16032,7 +16142,7 @@ const CallArrangement = (props) => {
     const isMobileWithActivePane = props.mobileView && activePane !== 'none';
     /* @conditional-compile-remove(one-to-n-calling) */
     const togglePeople = React.useCallback(() => {
-        if (activePane === 'people' || !(callStatus === 'Connected')) {
+        if (activePane === 'people' || !_isInCall(callStatus)) {
             setActivePane('none');
         }
         else {
@@ -16041,7 +16151,7 @@ const CallArrangement = (props) => {
     }, [activePane, setActivePane, callStatus]);
     /* @conditional-compile-remove(one-to-n-calling) */
     const selectPeople = React.useCallback(() => {
-        if (callStatus === 'Connected') {
+        if (_isInCall(callStatus)) {
             setActivePane('people');
         }
     }, [setActivePane, callStatus]);
@@ -16058,7 +16168,7 @@ const CallArrangement = (props) => {
     /* @conditional-compile-remove(one-to-n-calling) */
     const callPaneContent = () => {
         var _a;
-        if (adapter && callStatus === 'Connected') {
+        if (adapter && _isInCall(callStatus)) {
             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(React__default['default'].Fragment, null);
@@ -16106,61 +16216,6 @@ const localVideoCameraCycleButtonSelector = reselect.createSelector([getDeviceMa
     };
 });
 
-// Copyright (c) Microsoft Corporation.
-const videoBaseStyle = react.mergeStyles({
-    border: 0
-});
-/**
- * @private
- */
-react.mergeStyles(videoBaseStyle, {
-    width: '100%',
-    height: '100%'
-});
-/**
- * @private
- */
-react.mergeStyles(videoBaseStyle, {
-    width: '100%',
-    height: 0,
-    position: 'relative',
-    paddingTop: '56.25%' /* default to 16:9 Aspect Ratio for now*/
-});
-/**
- * @private
- */
-react.mergeStyles({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%'
-});
-/**
- * @private
- */
-react.mergeStyles({
-    height: '100%',
-    width: '15%'
-});
-/**
- * @private
- */
-react.mergeStyles({
-    height: '100%',
-    width: '85%',
-    position: 'relative'
-});
-/**
- * @private
- */
-const participantStateStyle = {
-    textAlign: 'center',
-    paddingTop: '0.5rem',
-    fontWeight: 400,
-    fontSize: '0.75rem'
-};
-
 // Copyright (c) Microsoft Corporation.
 const VideoGalleryStyles = {
     root: {
@@ -16186,26 +16241,11 @@ const MediaGallery = (props) => {
     const cameraSwitcherProps = React.useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
-    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-    const locale = useLocale().component;
-    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-    const videoTileStrings = locale.strings.videoTile;
     const onRenderAvatar = React.useCallback((userId, options) => {
         return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
             React__default['default'].createElement(react.Stack, { styles: { root: { margin: 'auto', maxHeight: '100%' } } },
-                React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })),
-                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                (options === null || options === void 0 ? void 0 : options.participantState) === 'Ringing' && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle) }, videoTileStrings.participantStateConnecting)),
-                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                (options === null || options === void 0 ? void 0 : options.participantState) === 'Connecting' && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle) }, videoTileStrings.participantStateRinging)),
-                /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                (options === null || options === void 0 ? void 0 : options.participantState) === 'Hold' && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle) }, videoTileStrings.participantStateHold)))));
-    }, [
-        props.onFetchAvatarPersonaData,
-        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */ videoTileStrings.participantStateConnecting,
-        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */ videoTileStrings.participantStateRinging,
-        /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */ videoTileStrings.participantStateHold
-    ]);
+                React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))));
+    }, [props.onFetchAvatarPersonaData]);
     useLocalVideoStartTrigger(!!props.isVideoStreamOn);
     const VideoGalleryMemoized = React.useMemo(() => {
         return (React__default['default'].createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: "floatingLocalVideo", showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar })));
@@ -16446,7 +16486,7 @@ const CallPage = (props) => {
         /* @conditional-compile-remove(one-to-n-calling) */
         onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, 
         /* @conditional-compile-remove(one-to-n-calling) */
-        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => callStatus === 'Connected' ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), dataUiId: 'call-page' }));
+        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React__default['default'].createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData }))) : (React__default['default'].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default['default'].createElement(React__default['default'].Fragment, null)), dataUiId: 'call-page' }));
 };
 /**
  * @private
@@ -17044,6 +17084,154 @@ const overlayPropsWaitingToBeAdmitted = (strings) => ({
     overlayIcon: React__default['default'].createElement(CallCompositeIcon, { iconName: "LobbyScreenWaitingToBeAdmitted" })
 });
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * styles for hold pane resume button
+ *
+ * @private
+ */
+const resumeButtonStyles = {
+    root: {
+        borderRadius: _pxToRem(4),
+        padding: `${_pxToRem(6)} ${_pxToRem(20)} `
+    },
+    label: {
+        fontWeight: 400,
+        display: 'flex',
+        fontSize: _pxToRem(14)
+    }
+};
+/**
+ * styles for hold pane main text
+ *
+ * @private
+ */
+const holdPaneLabelStyles = {
+    root: {
+        color: '#FFFFFF',
+        fontWeight: 600,
+        fontHeight: _pxToRem(22),
+        fontSize: _pxToRem(16),
+        margin: '1rem auto 0.5rem'
+    }
+};
+/**
+ * styles for hold pane timer
+ *
+ * @private
+ */
+const holdPaneTimerStyles = {
+    root: {
+        color: '#FFFFFF',
+        fontWeight: 600,
+        fontSize: _pxToRem(20),
+        lineHeight: _pxToRem(28),
+        margin: 'auto'
+    }
+};
+/**
+ * styles for hold pane container
+ *
+ * @private
+ */
+const paneStyles = {
+    root: {
+        width: '100%',
+        height: '100%',
+        background: 'rgba(0, 0, 0, 0.5)'
+    }
+};
+/**
+ * styles for the hold pane content container
+ *
+ * @private
+ */
+const holdPaneContentStyles = {
+    root: {
+        display: 'flex',
+        margin: 'auto',
+        flexDirection: 'column',
+        justifyContent: 'center'
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Hold pane to display when the user places themselves on hold
+ *
+ * @beta
+ */
+const HoldPane = () => {
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const holdButtonProps = usePropsFor$1(HoldButton);
+    const locale = useLocale();
+    const strings = stringsTrampoline(locale);
+    const [time, setTime] = React.useState(0);
+    const elapsedTime = getReadableTime(time);
+    const startTime = React.useRef(performance.now());
+    React__default['default'].useEffect(() => {
+        const interval = setInterval(() => {
+            setTime(performance.now() - startTime.current);
+        }, 10);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [startTime]);
+    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: strings.resumeCallButtonLabel, ariaLabel: strings.resumeCallButtonAriaLabel, styles: resumeButtonStyles, onClick: () => {
+                    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                    holdButtonProps.onToggleHold();
+                } }))));
+};
+const getMinutes = (time) => {
+    return Math.floor(getSeconds(time) / 60);
+};
+const getSeconds = (time) => {
+    return Math.floor(time / 1000);
+};
+const getHours = (time) => {
+    return Math.floor(getMinutes(time) / 60);
+};
+/**
+ * @internal
+ */
+const getReadableTime = (time) => {
+    const hours = getHours(time);
+    const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);
+    const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);
+    return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;
+};
+const stringsTrampoline = (locale) => {
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    return {
+        holdScreenLabel: locale.strings.call.holdScreenLabel,
+        resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel,
+        resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel
+    };
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @beta
+ */
+const HoldPage = (props) => {
+    var _a, _b, _c;
+    const errorBarProps = usePropsFor$1(ErrorBar);
+    const strings = useLocale().strings.call;
+    const callControlOptions = props.mobileView
+        ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
+        : (_b = props.options) === null || _b === void 0 ? void 0 : _b.callControls;
+    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, errorBarProps: ((_c = props.options) === null || _c === void 0 ? void 0 : _c.errorBar) !== false && Object.assign({}, errorBarProps), callControlProps: {
+            options: callControlOptions,
+            increaseFlyoutItemSize: props.mobileView
+        }, mobileView: props.mobileView, 
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React__default['default'].createElement(HoldPane, null), dataUiId: 'hold-page' }));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$5 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -17089,6 +17277,11 @@ const MainScreen = (props) => {
                 /* @conditional-compile-remove(one-to-n-calling) */
                 modalLayerHostId: props.modalLayerHostId, options: props.options }));
             break;
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        case holdPageTrampoline():
+            pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, 
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options })));
+            break;
         default:
             throw new Error('Invalid call composite page');
     }
@@ -17144,6 +17337,11 @@ const CallComposite = (props) => {
                 /* @conditional-compile-remove(one-to-n-calling) */
                 mobileView && React__default['default'].createElement(react.LayerHost, { id: modalLayerHostId, className: react.mergeStyles(modalLayerHostStyle) })))));
 };
+const holdPageTrampoline = () => {
+    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(PSTN-calls) */
+    return 'hold';
+};
 
 /**
  * @private
@@ -17885,7 +18083,7 @@ const isOutboundCall = (callLocator) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-const icon$1 = () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: 'ControlBarPeopleButton' });
+const icon = () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: 'ControlBarPeopleButton' });
 /**
  * @private
  */
@@ -17900,7 +18098,7 @@ const PeopleButton = (props) => {
             }
         }, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.styles, theme.palette.neutralLight]);
-    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon$1, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon$1, onClick: onClick, styles: styles })));
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: onClick, styles: styles })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18036,15 +18234,6 @@ const chatNotificationContainerStyles = {
     }
 };
 
-// Copyright (c) Microsoft Corporation.
-const icon = () => React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, { key: 'chatOnIconKey', primaryFill: "currentColor" });
-/**
- * @private
- */
-const MoreButton = (props) => {
-    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: false, onRenderOnIcon: icon, onRenderOffIcon: icon, onClick: props.onClick, "data-ui-id": 'call-with-chat-composite-more-button' })));
-};
-
 // Copyright (c) Microsoft Corporation.
 /**
  * Max number of Custom Buttons in primary and secondary ControlBar
@@ -18107,6 +18296,56 @@ const onFetchCustomButtonPropsTrampoline = (options) => {
     return response;
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ *
+ * @private
+ */
+const DesktopMoreButton = (props) => {
+    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const localeStrings = useLocale();
+    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const holdButtonProps = usePropsFor$1(HoldButton);
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const moreButtonStrings = React.useMemo(() => ({
+        label: localeStrings.strings.call.moreButtonCallingLabel,
+        tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
+    }), [localeStrings]);
+    const moreButtonContextualMenuItems = () => {
+        const items = [];
+        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        items.push({
+            key: 'holdButtonKey',
+            text: localeStrings.component.strings.holdButton.tooltipOffContent,
+            onClick: () => {
+                holdButtonProps.onToggleHold();
+            },
+            iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            }
+        });
+        /*@conditional-compile-remove(PSTN-calls) */
+        if (props.onClickShowDialpad) {
+            items.push({
+                key: 'showDialpadKey',
+                text: localeStrings.strings.callWithChat.openDtmfDialpad,
+                onClick: () => {
+                    props.onClickShowDialpad && props.onClickShowDialpad();
+                },
+                iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                }
+            });
+        }
+        return items;
+    };
+    return (React__default['default'].createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-more-button", 
+        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() } })));
+};
+
 // Copyright (c) Microsoft Corporation.
 const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) => {
     if (callWithChatControls === false) {
@@ -18128,7 +18367,7 @@ const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) =>
  * @private
  */
 const CallWithChatControlBar = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const theme = react.useTheme();
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCallWithChatControlOptions$1(props.mobileView, props.callControls);
@@ -18160,27 +18399,14 @@ const CallWithChatControlBar = (props) => {
     const endCallButtonStyles = React.useMemo(() => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined), [props.mobileView, theme]);
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customButtons = React.useMemo(() => generateCustomCallWithChatControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options === null || options === void 0 ? void 0 : options.displayType : undefined), [options]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const dialpadStrings = React.useMemo(() => ({
-        dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,
-        dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel
-    }), [callWithChatStrings]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const [showDialpad, setShowDialpad] = React.useState(false);
     // when options is false then we want to hide the whole control bar.
     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 }));
-    /* @conditional-compile-remove(PSTN-calls) */
-    const onDismissDialpad = () => {
-        setShowDialpad(false);
-    };
     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 },
-                /* @conditional-compile-remove(PSTN-calls) */
-                React__default['default'].createElement(SendDtmfDialpad, { isMobile: (_a = props.mobileView) !== null && _a !== void 0 ? _a : false, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
                 React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
                     React__default['default'].createElement(react.Stack.Item, null,
                         React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
@@ -18189,18 +18415,21 @@ const CallWithChatControlBar = (props) => {
                             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(control-bar-button-injection) */
-                        (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
-                            _b.props.children.slice(0, props.mobileView
+                        (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
+                            _a.props.children.slice(0, props.mobileView
                                 ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
                                 : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
                                 return (React__default['default'].createElement(element.type, Object.assign({}, element.props, { key: element.props.strings.label, styles: commonButtonStyles, displayType: options.displayType, showLabel: options.displayType !== 'compact' })));
                             }),
                             props.mobileView && (React__default['default'].createElement(MoreButton, { "data-ui-id": "call-with-chat-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage })),
+                            /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
+                                /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
+                                !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disabled: props.disableButtonsForLobbyPage, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad })),
                             React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles })))))),
         !props.mobileView && (React__default['default'].createElement(react.Stack, { horizontal: true, className: !props.mobileView ? react.mergeStyles(desktopButtonContainerStyle) : undefined }, 
         /* @conditional-compile-remove(control-bar-button-injection) */
-        (_c = customButtons['secondary']) === null || _c === void 0 ? void 0 :
-            _c.props.children.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
+        (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
+            _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 })),
@@ -18529,6 +18758,10 @@ const MoreDrawer = (props) => {
     var _a, _b, _c, _d, _e;
     const drawerMenuItems = [];
     const { speakers, onSelectSpeaker, onLightDismiss } = props;
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const localeStrings = useLocale();
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const holdButtonProps = usePropsFor$1(HoldButton);
     const onSpeakerItemClick = React.useCallback((_ev, itemKey) => {
         const selected = speakers === null || speakers === void 0 ? void 0 : speakers.find((speaker) => speaker.id === itemKey);
         if (selected) {
@@ -18599,6 +18832,28 @@ const MoreDrawer = (props) => {
             onItemClick: props.onPeopleButtonClicked
         });
     }
+    /* @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)) {
+        drawerMenuItems.push({
+            itemKey: 'holdButtonKey',
+            text: localeStrings.component.strings.holdButton.tooltipOffContent,
+            onItemClick: () => {
+                holdButtonProps.onToggleHold();
+            },
+            iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } }
+        });
+    }
+    /*@conditional-compile-remove(PSTN-calls) */
+    if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton) && props.onClickShowDialpad) {
+        drawerMenuItems.push({
+            itemKey: 'showDialpadKey',
+            text: localeStrings.strings.callWithChat.openDtmfDialpad,
+            onItemClick: () => {
+                props.onClickShowDialpad && props.onClickShowDialpad();
+            },
+            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } }
+        });
+    }
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customDrawerButtons = React.useMemo(() => generateCustomCallWithChatDrawerButtons(onFetchCustomButtonPropsTrampoline(drawerSelectionOptions !== false ? drawerSelectionOptions : undefined), drawerSelectionOptions !== false ? drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.displayType : undefined), [drawerSelectionOptions]);
     /* @conditional-compile-remove(control-bar-button-injection) */
@@ -18810,6 +19065,24 @@ const CallWithChatScreen = (props) => {
     const callCompositeContainerCSS = React.useMemo(() => {
         return { display: isMobileWithActivePane ? 'none' : 'flex' };
     }, [isMobileWithActivePane]);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const [showDtmfDialpad, setShowDtmfDialpad] = React.useState(false);
+    /* @conditional-compile-remove(PSTN-calls) */
+    const onDismissDtmfDialpad = () => {
+        setShowDtmfDialpad(false);
+    };
+    /* @conditional-compile-remove(PSTN-calls) */
+    const onClickShowDialpad = () => {
+        setShowDtmfDialpad(true);
+    };
+    /* @conditional-compile-remove(PSTN-calls) */
+    const callWithChatStrings = useCallWithChatCompositeStrings();
+    /* @conditional-compile-remove(PSTN-calls) */
+    const dialpadStrings = React.useMemo(() => ({
+        dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,
+        dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
+        placeholderText: callWithChatStrings.dtmfDialpadPlaceHolderText
+    }), [callWithChatStrings]);
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React__default['default'].createElement(react.Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles, id: compositeParentDivId },
             React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
@@ -18822,11 +19095,20 @@ const CallWithChatScreen = (props) => {
                     fileSharing: props.fileSharing, rtl: props.rtl }))),
             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, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth })))),
+                    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, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
+                        /* @conditional-compile-remove(PSTN-calls) */
+                        onClickShowDialpad: onClickShowDialpad })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
                     React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
-                        React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControls, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked }))))),
+                        React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControls, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
+                            /* @conditional-compile-remove(PSTN-calls) */
+                            onClickShowDialpad: onClickShowDialpad }))))),
+            /* @conditional-compile-remove(PSTN-calls) */
+            showControlBar && showDtmfDialpad && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
+                React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
+                    React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
+                        React__default['default'].createElement(SendDtmfDialpad, { isMobile: mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))))),
             // This layer host is for ModalLocalAndRemotePIP in CallWithChatPane. This LayerHost cannot be inside the CallWithChatPane
             // because when the CallWithChatPane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging
             // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.
@@ -18844,7 +19126,10 @@ const CallWithChatComposite = (props) => {
             /* @conditional-compile-remove(file-sharing) */
             fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing }))));
 };
-const hasJoinedCallFn = (page, callStatus) => page === 'call' && callStatus === 'Connected';
+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');
+};
 const showShowChatTabHeaderButton = (callControls) => {
     if (callControls === undefined || callControls === true) {
         return true;