@azure/communication-react 1.3.2-alpha-202208100014.0 → 1.3.3-alpha-202208160041.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.2-alpha-202208100014.0';
+var telemetryVersion = '1.3.3-alpha-202208160041.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', 'RemoteHold', 'Ringing'].includes(callStatus);
 /**
  * Check if the call state represents being in the lobby or waiting to be admitted.
  *
@@ -759,7 +759,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             yield (call === null || call === void 0 ? void 0 : call.addParticipant(participant));
         }
     });
-    /* @conditional-compile-remove(dialpad) */
+    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
     const onSendDtmfTone = (dtmfTone) => __awaiter$t(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     return {
         onHangUp,
@@ -782,8 +782,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         onStartLocalVideo,
         onDisposeRemoteStreamView,
         onDisposeLocalStreamView,
-        /* @conditional-compile-remove(dialpad) */
-        onSendDtmfTone
+        /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */ onSendDtmfTone
     };
 });
 /**
@@ -958,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:"Connecting...",participantStateRinging:"Ringing...",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};
 
@@ -1939,13 +1938,13 @@ 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),
-    /* @conditional-compile-remove(dialpad) */
+    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
     BackSpace: React__default['default'].createElement(reactIcons.Backspace20Regular, null)
 };
 
@@ -4316,7 +4315,7 @@ const StreamMedia = (props) => {
         };
     }, [videoStreamElement]);
     return (React__default['default'].createElement("div", { className: container() },
-        React__default['default'].createElement("div", { className: react.mergeStyles(isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme), styles === null || styles === void 0 ? void 0 : styles.root), ref: containerEl }),
+        React__default['default'].createElement("div", { "data-ui-id": "stream-media-container", className: react.mergeStyles(isMirrored && pipEnabled ? invertedVideoInPipStyle(theme) : mediaContainer(theme), styles === null || styles === void 0 ? void 0 : styles.root), ref: containerEl }),
         loadingState === 'loading' && (React__default['default'].createElement("div", { className: loadingSpinnerContainer() },
             React__default['default'].createElement(react.Spinner, { "data-ui-id": "stream-media-loading-spinner", styles: loadSpinnerStyles })))));
 };
@@ -4342,6 +4341,23 @@ const participantItemContainerStyle = (options) => {
 const menuButtonContainerStyle = {
     width: '1.5rem'
 };
+/**
+ * @private
+ */
+const participantStateMaxWidth = '5rem';
+/**
+ * @private
+ */
+const participantStateStringStyles = {
+    maxWidth: participantStateMaxWidth,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    lineHeight: 'normal',
+    paddingLeft: '1rem',
+    marginLeft: 'auto',
+    marginRight: 0
+};
 /**
  * @private
  */
@@ -4375,7 +4391,9 @@ const meContainerStyle = {
  * @public
  */
 const ParticipantItem = (props) => {
-    const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick, showParticipantOverflowTooltip } = props;
+    const { userId, displayName, onRenderAvatar, menuItems, onRenderIcon, presence, styles, me, onClick, showParticipantOverflowTooltip
+    /* @conditional-compile-remove(PSTN-calls) */
+     } = props;
     const [itemHovered, setItemHovered] = React.useState(false);
     const [menuHidden, setMenuHidden] = React.useState(true);
     const containerRef = React.useRef(null);
@@ -4411,11 +4429,14 @@ const ParticipantItem = (props) => {
                 onClick === null || onClick === void 0 ? void 0 : onClick(props);
             }
         }, tabIndex: 0 },
-        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles({ width: `calc(100% - ${menuButtonContainerStyle.width})`, alignItems: 'center' }) },
+        React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles({
+                width: `calc(100% - ${!me && participantStateString ? participantStateMaxWidth : menuButtonContainerStyle.width})`,
+                alignItems: 'center'
+            }) },
             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, null, 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) }, 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
@@ -4751,7 +4772,7 @@ const displayNameStyle = {
 /**
  * @private
  */
-const participantStateStyle = {
+const participantStateStyle$1 = {
     textAlign: 'center',
     paddingTop: '0.5rem',
     fontWeight: 600,
@@ -4815,7 +4836,7 @@ const DefaultPlaceholder = (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) }, participantStateString))));
+            participantStateString && React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStyle$1) }, participantStateString))));
 };
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /**
@@ -4897,7 +4918,7 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
     isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator, 
     /* @conditional-compile-remove(one-to-n-calling) */
     /* @conditional-compile-remove(PSTN-calls) */
-    state } = props;
+    participantState } = props;
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -4928,12 +4949,12 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
             // Returning `undefined` results in the placeholder with avatar being shown
             return undefined;
         }
-        return React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving ? 'none' : 'loading' });
+        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: state }));
+        participantState: participantState }));
 });
 
 // Copyright (c) Microsoft Corporation.
@@ -5361,7 +5382,7 @@ const RemoteScreenShare = React__default['default'].memo((props) => {
             participant: displayName
         })
         : '';
-    return (React__default['default'].createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving ? 'none' : 'loading' })) : undefined, onRenderPlaceholder: () => React__default['default'].createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
+    return (React__default['default'].createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React__default['default'].createElement(LoadingSpinner, { loadingMessage: loadingMessage }) }));
 });
 const LoadingSpinner = (props) => {
     return (React__default['default'].createElement(react.Stack, { verticalAlign: "center", className: loadingStyle },
@@ -6139,7 +6160,7 @@ const modalMaxDragPosition = { x: localVideoTileOuterPaddingPX, y: localVideoTil
  * @public
  */
 const VideoGallery = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
@@ -6153,6 +6174,8 @@ const VideoGallery = (props) => {
     const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;
     const visibleVideoParticipants = React.useRef([]);
     const visibleAudioParticipants = React.useRef([]);
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const visibleCallingParticipants = React.useRef([]);
     const modalWidth = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.width : LARGE_FLOATING_MODAL_SIZE_PX.width;
     const modalHeight = isNarrow ? SMALL_FLOATING_MODAL_SIZE_PX.height : LARGE_FLOATING_MODAL_SIZE_PX.height;
     // The minimum drag position is the top left of the video gallery. i.e. the modal (PiP) should not be able
@@ -6171,10 +6194,20 @@ const VideoGallery = (props) => {
         lastVisibleParticipants: visibleVideoParticipants.current,
         maxDominantSpeakers: maxRemoteVideoStreams
     }).slice(0, maxRemoteVideoStreams);
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    visibleCallingParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => p.state === ('Connecting' ))) !== null && _b !== void 0 ? _b : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleCallingParticipants.current,
+        maxDominantSpeakers: 0
+    });
     // This set will be used to filter out participants already in visibleVideoParticipants
     const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const visibleCallingParticipantsSet = new Set(visibleCallingParticipants.current.map((p) => p.userId));
     visibleAudioParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
+        participants: (_c = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !visibleCallingParticipantsSet.has(p.userId))) !== null && _c !== void 0 ? _c : [],
         dominantSpeakers,
         lastVisibleParticipants: visibleAudioParticipants.current,
         maxDominantSpeakers: MAX_AUDIO_DOMINANT_SPEAKERS
@@ -6215,7 +6248,9 @@ const VideoGallery = (props) => {
     ]);
     const defaultOnRenderVideoTile = React.useCallback((participant, isVideoParticipant) => {
         const remoteVideoStream = participant.videoStream;
-        return (React__default['default'].createElement(_RemoteVideoTile, Object.assign({ key: participant.userId }, participant, { onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator })));
+        return (React__default['default'].createElement(_RemoteVideoTile, Object.assign({ key: participant.userId }, participant, { onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: isVideoParticipant ? remoteVideoViewOptions : undefined, onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, 
+            /* @conditional-compile-remove(PSTN-calls) */
+            participantState: participant.state })));
     }, [onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, onRenderAvatar, showMuteIndicator]);
     const videoTiles = onRenderRemoteVideoTile
         ? visibleVideoParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
@@ -6227,25 +6262,38 @@ const VideoGallery = (props) => {
         : visibleAudioParticipants.current.map((participant) => {
             return defaultOnRenderVideoTile(participant, false);
         });
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingTiles = onRenderRemoteVideoTile
+        ? visibleCallingParticipants.current.map((participant) => onRenderRemoteVideoTile(participant))
+        : visibleCallingParticipants.current.map((participant) => {
+            return defaultOnRenderVideoTile(participant, false);
+        });
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const screenShareActive = screenShareParticipant || (localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isScreenSharingOn);
-    let gridTiles = [];
-    let horizontalGalleryTiles = [];
-    if (screenShareActive) {
-        // If screen sharing is active, assign video and audio participants as horizontal gallery participants
-        horizontalGalleryTiles = videoTiles.concat(audioTiles);
-    }
-    else {
-        // If screen sharing is not active, then assign all video tiles as grid tiles.
-        // If there are no video tiles, then assign audio tiles as grid tiles.
-        gridTiles = videoTiles.length > 0 ? videoTiles : audioTiles;
-        horizontalGalleryTiles = videoTiles.length > 0 ? audioTiles : [];
-    }
+    const createGridTiles = () => {
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return videoTiles.length > 0 ? videoTiles : audioTiles.concat(callingTiles);
+    };
+    const gridTiles = createGridTiles();
+    const createHorizontalGalleryTiles = () => {
+        if (screenShareActive) {
+            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return videoTiles.concat(audioTiles.concat(callingTiles));
+        }
+        else {
+            // If screen sharing is not active, then assign all video tiles as grid tiles.
+            // If there are no video tiles, then assign audio tiles as grid tiles.
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return videoTiles.length > 0 ? audioTiles.concat(callingTiles) : [];
+        }
+    };
+    const horizontalGalleryTiles = createHorizontalGalleryTiles();
     if (!shouldFloatLocalVideo && localParticipant) {
         gridTiles.push(localVideoTile);
     }
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.isReceiving })));
+    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_d = screenShareParticipant.screenShareStream) === null || _d === void 0 ? void 0 : _d.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_e = screenShareParticipant.screenShareStream) === null || _e === void 0 ? void 0 : _e.isReceiving })));
     const horizontalGalleryPresent = horizontalGalleryTiles && horizontalGalleryTiles.length > 0;
     const layerHostId = reactHooks.useId('layerhost');
     return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
@@ -6725,7 +6773,9 @@ const CameraButton = (props) => {
     const [announcerString, setAnnouncerString] = React.useState(undefined);
     let disabled = props.disabled || waitForCamera;
     /* @conditional-compile-remove(rooms) */
-    disabled = disabled || !_usePermissions().cameraButton;
+    const permissions = _usePermissions();
+    /* @conditional-compile-remove(rooms) */
+    disabled = disabled || !permissions.cameraButton;
     const onRenderCameraOnIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOn" }));
     const onRenderCameraOffIcon = () => (React__default['default'].createElement(HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonCameraOff" }));
     if (waitForCamera && strings.tooltipVideoLoadingContent) {
@@ -7770,7 +7820,7 @@ const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
     const [textValue, setTextValue] = React.useState('');
-    const { onSendDtmfTone, onClickDialpadButton, onDisplayDialpadInput, onChange } = 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, '');
@@ -7805,7 +7855,7 @@ const DialpadContainer = (props) => {
             onChange(onDisplayDialpadInput ? onDisplayDialpadInput(modifiedInput) : formatPhoneNumber(modifiedInput));
         }
     };
-    return (React__default['default'].createElement("div", { className: react.mergeStyles(containerStyles$1(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer" },
+    return (React__default['default'].createElement("div", { className: react.mergeStyles(containerStyles$1(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer" },
         React__default['default'].createElement(react.TextField, { styles: react.concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: onDisplayDialpadInput ? onDisplayDialpadInput(textValue) : formatPhoneNumber(textValue), 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: (e) => {
@@ -7817,7 +7867,7 @@ const DialpadContainer = (props) => {
                 }
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
-                return (React__default['default'].createElement(React__default['default'].Fragment, null, textValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'BackSpace' } }))));
+                return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && textValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'BackSpace' } }))));
             } }),
         React__default['default'].createElement(react.FocusZone, null, dialPadButtonsDefault.map((rows, rowIndex) => {
             return (React__default['default'].createElement(react.Stack, { horizontal: true, key: `row_${rowIndex}`, horizontalAlign: "stretch" }, rows.map((button, columnIndex) => (React__default['default'].createElement(DialpadButton, { key: `button_${columnIndex}`, 
@@ -7848,10 +7898,10 @@ const DialpadContainer = (props) => {
  * @beta
  */
 const Dialpad = (props) => {
-    /* @conditional-compile-remove(dialpad) */
+    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
     const localeStrings = useLocale$1().strings.dialpad;
     const dialpadLocaleStringsTrampoline = () => {
-        /* @conditional-compile-remove(dialpad) */
+        /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
         return localeStrings;
     };
     const strings = Object.assign(Object.assign({}, dialpadLocaleStringsTrampoline()), props.strings);
@@ -8284,7 +8334,7 @@ const getSelector$1 = (component) => {
     return findSelector$1(component);
 };
 const findSelector$1 = (component) => {
-    /* @conditional-compile-remove(dialpad) */
+    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
     // Dialpad only has handlers currently and doesn't require any props from the stateful layer so return the emptySelector
     if (component === Dialpad) {
         return emptySelector;
@@ -12613,7 +12663,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"};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$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};
 
@@ -14346,6 +14396,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.
@@ -14412,6 +14466,10 @@ const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
     onAddParticipant: (participant, options) => __awaiter$9(void 0, void 0, void 0, function* () {
         return yield adapter.addParticipant(participant, options);
     }),
+    /* @conditional-compile-remove(PSTN-calls) */
+    onSendDtmfTone: (dtmfTone) => __awaiter$9(void 0, void 0, void 0, function* () {
+        yield adapter.sendDtmfTone(dtmfTone);
+    }),
     onRemoveParticipant: (userId) => __awaiter$9(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
@@ -14770,6 +14828,12 @@ const icon$2 = () => React__default['default'].createElement(CallCompositeIcon,
 /** @beta */
 const People = (props) => {
     const { strings, onRenderOnIcon, onRenderOffIcon, onClick } = props;
+    /* @conditional-compile-remove(rooms) */
+    let disabled = props.disabled;
+    /* @conditional-compile-remove(rooms) */
+    const permissions = _usePermissions();
+    /* @conditional-compile-remove(rooms) */
+    disabled = disabled || !permissions.participantList;
     const theme = useTheme();
     const styles = React.useMemo(() => {
         var _a;
@@ -14779,7 +14843,125 @@ const People = (props) => {
             }
         }, (_a = props.styles) !== null && _a !== void 0 ? _a : {}, controlButtonBaseStyle);
     }, [props.styles, theme.palette.neutralLight]);
-    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 })));
+    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, 
+        /* @conditional-compile-remove(rooms) */
+        disabled: disabled })));
+};
+
+// 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.
+/**
+ * @private
+ */
+const themeddialpadModalStyle$1 = (theme) => ({
+    main: {
+        borderRadius: theme.effects.roundedCorner6,
+        padding: '1rem'
+    }
+});
+/**
+ * @private
+ */
+const themedDialpadStyle$1 = (isMobile, theme) => ({
+    root: {
+        padding: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        maxWidth: '100%'
+    },
+    textField: {
+        root: {
+            borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`
+        },
+        field: {
+            backgroundColor: theme.palette.white,
+            fontSize: theme.fonts.large.fontSize,
+            padding: '1.063rem 0.5rem',
+            textAlign: 'center',
+            paddingTop: 0
+        }
+    },
+    primaryContent: {
+        color: theme.palette.themeDarkAlt
+    }
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const compositeOuterContainerStyles = {
+    root: {
+        width: '100%',
+        // Create a new stacking context so that DrawerMenu can be positioned absolutely.
+        position: 'relative'
+    }
+};
+/** @private */
+const callCompositeContainerStyles = {
+    root: {
+        // Start a new stacking context so that any `position:absolute` elements
+        // inside the call composite do not compete with its siblings.
+        position: 'relative'
+    }
+};
+/** @private */
+const controlBarContainerStyles$1 = {
+    root: {
+        // Start a new stacking context so that any `position:absolute` elements
+        // inside the control bar do not compete with its siblings.
+        position: 'relative'
+    }
+};
+/** @private */
+const drawerContainerStyles$1 = {
+    root: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        // Any zIndex > 0 will work because this is the only absolutely
+        // positioned element in the container.
+        zIndex: 1
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+/** @private */
+const SendDtmfDialpad = (props) => {
+    const dialpadProps = usePropsFor$1(Dialpad);
+    const { strings, isMobile, showDialpad, onDismissDialpad } = props;
+    const theme = react.useTheme();
+    const onDismissTriggered = () => {
+        onDismissDialpad();
+    };
+    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 }))))))));
+    }
+    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 }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -14798,6 +14980,51 @@ 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
+    }), [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(one-to-n-calling) */
+    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
+            }
+        });
+        return items;
+    };
+    /* @conditional-compile-remove(PSTN-calls) */
+    const [showDialpad, setShowDialpad] = React.useState(false);
     const theme = react.useTheme();
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customButtons = React.useMemo(() => generateCustomControlBarButtons(onFetchCustomButtonPropsTrampoline$1(options), options === null || options === void 0 ? void 0 : options.displayType), [options]);
@@ -14805,16 +15032,25 @@ const CallControls = (props) => {
     if (props.options === false) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
+    /* @conditional-compile-remove(PSTN-calls) */
+    const onDismissDialpad = () => {
+        setShowDialpad(false);
+    };
     return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
+        /* @conditional-compile-remove(PSTN-calls) */
+        React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React__default['default'].createElement(react.Stack.Item, null,
             React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) && React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
                 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 })))));
 };
@@ -14841,7 +15077,7 @@ const callStatusSelector = reselect.createSelector([getCallStatus, getIsScreenSh
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /** @private */
-const controlBarContainerStyles$1 = {
+const controlBarContainerStyles = {
     paddingTop: '0.25rem',
     paddingBottom: '0.25rem',
     // @TODO: this should be exposed through a custom CallComposite Theme API that extends the fluent theme with semantic values
@@ -14860,7 +15096,7 @@ const NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLE
 /**
  * @private
  */
-const callControlsContainerStyles = react.mergeStyles(controlBarContainerStyles$1, {
+const callControlsContainerStyles = react.mergeStyles(controlBarContainerStyles, {
     zIndex: CONTROL_BAR_Z_INDEX
 });
 const containerStyle$2 = {
@@ -15285,7 +15521,7 @@ const iconStyles = {
 /**
  * @private
  */
-const themedDialpadModelStyle = (theme) => ({
+const themeddialpadModalStyle = (theme) => ({
     main: {
         borderRadius: theme.effects.roundedCorner6,
         padding: '1rem'
@@ -15334,48 +15570,6 @@ const themedCallButtonStyle = (theme) => ({
     }
 });
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * @private
- */
-const compositeOuterContainerStyles = {
-    root: {
-        width: '100%',
-        // Create a new stacking context so that DrawerMenu can be positioned absolutely.
-        position: 'relative'
-    }
-};
-/** @private */
-const callCompositeContainerStyles = {
-    root: {
-        // Start a new stacking context so that any `position:absolute` elements
-        // inside the call composite do not compete with its siblings.
-        position: 'relative'
-    }
-};
-/** @private */
-const controlBarContainerStyles = {
-    root: {
-        // Start a new stacking context so that any `position:absolute` elements
-        // inside the control bar do not compete with its siblings.
-        position: 'relative'
-    }
-};
-/** @private */
-const drawerContainerStyles$1 = {
-    root: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        // Any zIndex > 0 will work because this is the only absolutely
-        // positioned element in the container.
-        zIndex: 1
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 /** @private */
 const CallingDialpad = (props) => {
@@ -15397,7 +15591,7 @@ const CallingDialpad = (props) => {
             onDismissTriggered();
         }
     };
-    const dialpadModelStyle = React.useMemo(() => themedDialpadModelStyle(theme), [theme]);
+    const dialpadModalStyle = React.useMemo(() => themeddialpadModalStyle(theme), [theme]);
     const dialpadStyle = React.useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
     const callButtonStyle = React.useMemo(() => themedCallButtonStyle(theme), [theme]);
     const dialpadComponent = () => {
@@ -15408,12 +15602,12 @@ const CallingDialpad = (props) => {
     if (isMobile) {
         return (React__default['default'].createElement(react.Stack, { "data-ui-id": "call-with-chat-composite-dialpad" }, 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: '16px' } }, dialpadComponent()))))));
+                React__default['default'].createElement(react.Stack, { style: { padding: '1rem' } }, dialpadComponent()))))));
     }
-    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: dialpadModelStyle, "data-ui-id": "call-with-chat-composite-dialpad" },
+    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, "data-ui-id": "call-with-chat-composite-dialpad" },
         React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
             React__default['default'].createElement(react.Text, null, strings.dialpadModalTitle),
-            React__default['default'].createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: 'black' } })),
+            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, dialpadComponent()))));
 };
 function DialpadStartCallIconTrampoline() {
@@ -15484,7 +15678,7 @@ const AddPeopleDropdown = (props) => {
                 itemProps: { styles: copyLinkButtonStylesThemed },
                 iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },
                 onClick: () => setShowDialpad(true),
-                'data-ui-id': 'call-with-chat-composite-dial-phone-number-button'
+                'data-ui-id': 'call-dial-phone-number-button'
             });
         }
         return menuProps;
@@ -15509,15 +15703,15 @@ const AddPeopleDropdown = (props) => {
     if (mobileView) {
         return (React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(react.Stack.Item, { styles: copyLinkButtonContainerStyles },
-                React__default['default'].createElement(react.PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-with-chat-composite-add-people-button" })),
-            addPeopleDrawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles, "data-ui-id": "call-with-chat-composite-add-people-dropdown" },
+                React__default['default'].createElement(react.PrimaryButton, { onClick: setDrawerMenuItemsForAddPeople, styles: copyLinkButtonStylesThemed, onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, "data-ui-id": "call-add-people-button" })),
+            addPeopleDrawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles, "data-ui-id": "call-add-people-dropdown" },
                 React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems }))),
             alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId }))));
     }
     return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Stack, null,
         alternateCallerId && (React__default['default'].createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad, onAddParticipant: onAddParticipant, alternateCallerId: alternateCallerId })),
         React__default['default'].createElement(react.Stack, { styles: copyLinkButtonStackStyles },
-            React__default['default'].createElement(react.DefaultButton, { onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-with-chat-composite-add-people-button" })))));
+            React__default['default'].createElement(react.DefaultButton, { onRenderIcon: () => PeoplePaneAddPersonIconTrampoline(), text: strings.peoplePaneAddPeopleButtonLabel, menuProps: defaultMenuProps, styles: copyLinkButtonStylesThemed, "data-ui-id": "call-add-people-button" })))));
 };
 function PeoplePaneOpenDialpadIconNameTrampoline() {
     /* @conditional-compile-remove(PSTN-calls) */
@@ -15923,8 +16117,9 @@ const CallArrangement = (props) => {
     };
     /* @conditional-compile-remove(one-to-n-calling) */
     const callPaneContent = () => {
+        var _a;
         if (adapter && callStatus === 'Connected') {
-            return (React__default['default'].createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onPeopleButtonClicked: showShowPeopleTabHeaderButton$1(props.callControlProps.options) ? selectPeople : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
+            return (React__default['default'].createElement(CallPane, { callAdapter: adapter, onClose: closePane, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems, onPeopleButtonClicked: showShowPeopleTabHeaderButton$1(props.callControlProps.options) ? selectPeople : undefined, modalLayerHostId: props.modalLayerHostId, activePane: activePane, mobileView: props.mobileView, inviteLink: props.callControlProps.callInvitationURL }));
         }
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     };
@@ -15971,6 +16166,61 @@ 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: {
@@ -15996,8 +16246,26 @@ const MediaGallery = (props) => {
     const cameraSwitcherProps = React.useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
-    const onRenderAvatar = React.useCallback((userId, options) => (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-        React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData })))), [props.onFetchAvatarPersonaData]);
+    /* @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
+    ]);
     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 })));
@@ -16362,9 +16630,11 @@ const LocalDeviceSettings = (props) => {
     let isSelectCamEnabled = props.cameraPermissionGranted;
     let isSelectMicEnabled = props.microphonePermissionGranted;
     /* @conditional-compile-remove(rooms) */
-    isSelectCamEnabled = isSelectCamEnabled && _usePermissions().cameraButton;
+    const permissions = _usePermissions();
+    /* @conditional-compile-remove(rooms) */
+    isSelectCamEnabled = isSelectCamEnabled && permissions.cameraButton;
     /* @conditional-compile-remove(rooms) */
-    isSelectMicEnabled = isSelectMicEnabled && _usePermissions().microphoneButton;
+    isSelectMicEnabled = isSelectMicEnabled && permissions.microphoneButton;
     // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its
     // actually granting access to query both microphone and speaker. However the browser popup asks you explicity for
     // 'microphone'. This needs investigation on how we want to handle this and maybe needs follow up with SDK team.
@@ -16802,7 +17072,8 @@ const LobbyPage = (props) => {
         modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => React__default['default'].createElement(LobbyTile, Object.assign({}, lobbyProps, { overlayProps: overlayProps(strings, inLobby) })), dataUiId: 'lobby-page' }));
 };
 const disableLobbyPageControls = (callControlOptions) => {
-    let newOptions = callControlOptions;
+    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
+    let newOptions = callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions;
     if (newOptions !== false) {
         if (newOptions === true || newOptions === undefined) {
             newOptions = {
@@ -16833,6 +17104,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) {
@@ -16878,6 +17297,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');
     }
@@ -16933,6 +17357,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
@@ -17167,6 +17596,8 @@ class AzureCommunicationCallAdapter {
         this.holdCall.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
         this.resumeCall.bind(this);
+        /* @conditional-compile-remove(PSTN-calls) */
+        this.sendDtmfTone.bind(this);
     }
     dispose() {
         this.resetDiagnosticsForwarder();
@@ -17224,9 +17655,9 @@ class AzureCommunicationCallAdapter {
         });
     }
     _joinCall(audioOptions, videoOptions) {
-        const isTeamsMeeting = !('groupId' in this.locator);
+        const isTeamsMeeting = 'teamsLink' in this.locator;
         /* @conditional-compile-remove(rooms) */
-        const isRoomsCall = !('roomId' in this.locator);
+        const isRoomsCall = 'roomId' in this.locator;
         if (isTeamsMeeting) {
             return this.callAgent.join(this.locator, {
                 audioOptions,
@@ -17426,6 +17857,12 @@ class AzureCommunicationCallAdapter {
             }
         });
     }
+    /* @conditional-compile-remove(PSTN-calls) */
+    sendDtmfTone(dtmfTone) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            this.handlers.onSendDtmfTone(dtmfTone);
+        });
+    }
     getState() {
         return this.context.getState();
     }
@@ -17666,7 +18103,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
  */
@@ -17681,7 +18118,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.
@@ -17817,15 +18254,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
@@ -17909,7 +18337,7 @@ const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) =>
  * @private
  */
 const CallWithChatControlBar = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const theme = react.useTheme();
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCallWithChatControlOptions$1(props.mobileView, props.callControls);
@@ -17941,14 +18369,27 @@ 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 }));
-    return (React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles$1) },
+    /* @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 },
@@ -17957,8 +18398,8 @@ 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) */
-                        (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
-                            _a.props.children.slice(0, props.mobileView
+                        (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
+                            _b.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' })));
@@ -17967,8 +18408,8 @@ const CallWithChatControlBar = (props) => {
                             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) */
-        (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
-            _b.props.children.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((element) => {
+        (_c = customButtons['secondary']) === null || _c === void 0 ? void 0 :
+            _c.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 })),
@@ -18142,6 +18583,10 @@ class CallWithChatBackedCallAdapter {
         this.addParticipant = (participant, options) => __awaiter$3(this, void 0, void 0, function* () {
             yield this.callWithChatAdapter.addParticipant(participant, options);
         });
+        /* @conditional-compile-remove(PSTN-calls) */
+        this.sendDtmfTone = (dtmfTone) => __awaiter$3(this, void 0, void 0, function* () {
+            yield this.callWithChatAdapter.sendDtmfTone(dtmfTone);
+        });
         this.callWithChatAdapter = callWithChatAdapter;
     }
 }
@@ -18585,7 +19030,7 @@ const CallWithChatScreen = (props) => {
                     /* @conditional-compile-remove(file-sharing) */
                     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 },
+                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 })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
@@ -18831,6 +19276,8 @@ class AzureCommunicationCallWithChatAdapter {
         this.resumeCall.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
         this.addParticipant.bind(this);
+        /* @conditional-compile-remove(PSTN-calls) */
+        this.sendDtmfTone.bind(this);
     }
     /** Join existing Call. */
     joinCall(microphoneOn) {
@@ -19027,6 +19474,12 @@ class AzureCommunicationCallWithChatAdapter {
             return yield this.callAdapter.addParticipant(participant, options);
         });
     }
+    /* @conditional-compile-remove(PSTN-calls) */
+    sendDtmfTone(dtmfTone) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.callAdapter.sendDtmfTone(dtmfTone);
+        });
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     on(event, listener) {
         switch (event) {