@azure/communication-react 1.3.2-alpha-202208040020.0 → 1.3.2-alpha-202208090015.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-202208040020.0';
+var telemetryVersion = '1.3.2-alpha-202208090015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -280,6 +280,32 @@ const createSafeReplacer = () => {
     };
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @internal
+ * Converts units of rem to units of pixels
+ * @param rem - units of rem
+ * @returns units of pixels
+ */
+const _convertRemToPx = (rem) => {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+};
+/**
+ * @internal
+ * Disable dismiss on resize to work around a couple Fluent UI bugs
+ * - The Callout is dismissed whenever *any child of window (inclusive)* is resized. In practice, this
+ * happens when we change the VideoGallery layout, or even when the video stream element is internally resized
+ * by the headless SDK.
+ * - We also want to prevent dismiss when chat pane is scrolling especially a new message is added.
+ * A side effect of this workaround is that the context menu stays open when window is resized, and may
+ * get detached from original target visually. That bug is preferable to the bug when this value is not set -
+ * The Callout (frequently) gets dismissed automatically.
+ */
+const _preventDismissOnEvent = (ev) => {
+    return ev.type === 'resize' || ev.type === 'scroll';
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -932,7 +958,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"};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}",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 a number",deleteButtonAriaLabel:"Delete"};var HoldButton$e={onLabel:"Resume",offLabel:"Hold",toolTipOnContent:"Resume call",toolTipOffContent:"Hold call"};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};
+var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed Participant"};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$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};
 
@@ -2238,29 +2264,6 @@ const SendBoxErrors = (props) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-/**
- * Converts units of rem to units of pixels
- * @param rem - units of rem
- * @returns units of pixels
- */
-const convertRemToPx = (rem) => {
-    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
-};
-/**
- * Converts units of rem to units of pixels
- * @private
- * Disable dismiss on resize to work around a couple Fluent UI bugs
- * - The Callout is dismissed whenever *any child of window (inclusive)* is resized. In practice, this
- * happens when we change the VideoGallery layout, or even when the video stream element is internally resized
- * by the headless SDK.
- * - We also want to prevent dismiss when chat pane is scrolling especially a new message is added.
- * A side effect of this workaround is that the context menu stays open when window is resized, and may
- * get detached from original target visually. That bug is preferable to the bug when this value is not set -
- * The Callout (frequently) gets dismissed automatically.
- */
-const preventDismissOnEvent = (ev) => {
-    return ev.type === 'resize' || ev.type === 'scroll';
-};
 /**
  * Conditionally modify locale strings passed to the file card
  * @returns file upload card strings
@@ -2336,7 +2339,8 @@ const _FileCard = (props) => {
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
         React__default['default'].createElement(react.Stack, { className: containerClassName, onClick: () => {
-                props.actionHandler && props.actionHandler();
+                var _a;
+                (_a = props.actionHandler) === null || _a === void 0 ? void 0 : _a.call(props);
             } },
             React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: fileInfoWrapperClassName },
                 React__default['default'].createElement(react.Stack, null,
@@ -3332,25 +3336,13 @@ const ChatMessageContent = (props) => {
 const MessageContentAsRichTextHTML = (props) => {
     const htmlToReactParser = new htmlToReact.Parser();
     const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    const messageAriaText = props.message.content
-        ? _formatString(props.messageContentAriaText, {
-            author: `${props.message.senderDisplayName}`,
-            message: props.message.content
-        })
-        : undefined;
-    return (React__default['default'].createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-text": messageAriaText },
+    return (React__default['default'].createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-text": props.messageContentAriaText },
         React__default['default'].createElement(reactAriaLive.LiveMessage, { message: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, "aria-live": "polite" }),
         htmlToReactParser.parse(props.message.content)));
 };
 const MessageContentAsText = (props) => {
     const liveAuthor = _formatString(props.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    const messageAriaText = props.message.content
-        ? _formatString(props.messageContentAriaText, {
-            author: `${props.message.senderDisplayName}`,
-            message: props.message.content
-        })
-        : undefined;
-    return (React__default['default'].createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": messageAriaText },
+    return (React__default['default'].createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.messageContentAriaText },
         React__default['default'].createElement(reactAriaLive.LiveMessage, { message: `${props.message.mine ? '' : liveAuthor} ${props.message.content}`, "aria-live": "polite" }),
         React__default['default'].createElement(Linkify__default['default'], { componentDecorator: (decoratedHref, decoratedText, key) => {
                 return (React__default['default'].createElement(react.Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText));
@@ -3532,14 +3524,20 @@ const MessageBubble = (props) => {
         locale,
         fileDownloadHandler
     ]);
-    const messageContentRef = React.useRef(null);
+    const messageContentAriaText = props.message.content
+        ? props.message.mine
+            ? _formatString(strings.messageContentMineAriaText, {
+                message: props.message.content
+            })
+            : _formatString(strings.messageContentAriaText, {
+                author: `${props.message.senderDisplayName}`,
+                message: props.message.content
+            })
+        : undefined;
     const chatMessage = (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement("div", { ref: messageRef, tabIndex: 0, onFocus: () => {
-                var _a;
-                (_a = messageContentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            } },
-            React__default['default'].createElement(reactNorthstar.Chat.Message, { "data-ui-id": "chat-composite-message", className: react.mergeStyles(messageContainerStyle), styles: messageContainerStyle, content: React__default['default'].createElement("div", { ref: messageContentRef, tabIndex: 0 },
-                    React__default['default'].createElement(ChatMessageContent, { message: message, liveAuthorIntro: strings.liveAuthorIntro, messageContentAriaText: strings.messageContentAriaText }),
+        React__default['default'].createElement("div", { ref: messageRef },
+            React__default['default'].createElement(reactNorthstar.Chat.Message, { "data-ui-id": "chat-composite-message", className: react.mergeStyles(messageContainerStyle), styles: messageContainerStyle, content: React__default['default'].createElement("div", { tabIndex: 0 },
+                    React__default['default'].createElement(ChatMessageContent, { message: message, liveAuthorIntro: strings.liveAuthorIntro, messageContentAriaText: messageContentAriaText }),
                     props.onRenderFileDownloads
                         ? props.onRenderFileDownloads(userId, message)
                         : defaultOnRenderFileDownloads()), author: React__default['default'].createElement(reactNorthstar.Text, { className: chatMessageDateStyle }, message.senderDisplayName), mine: message.mine, timestamp: React__default['default'].createElement(reactNorthstar.Text, { "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: messageStatus === 'failed' ? (React__default['default'].createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag)) : message.editedOn ? (React__default['default'].createElement("div", { className: chatMessageEditedTagStyle(theme) }, strings.editedTag)) : undefined, positionActionMenu: false, actionMenu: actionMenuProps, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onBlur: () => setWasInteractionByTouch(false), onClick: () => {
@@ -3665,7 +3663,7 @@ const NARROW_WIDTH_REM = 30;
  * @param containerWidthRem  container width in rem
  * @returns boolean
  */
-const isNarrowWidth = (containerWidthRem) => containerWidthRem <= convertRemToPx(NARROW_WIDTH_REM);
+const isNarrowWidth = (containerWidthRem) => containerWidthRem <= _convertRemToPx(NARROW_WIDTH_REM);
 
 /**
  * @private
@@ -4356,7 +4354,7 @@ const iconContainerStyle$1 = {
 /**
  * @private
  */
-const iconStyles$2 = react.mergeStyles({
+const iconStyles$3 = react.mergeStyles({
     display: 'flex',
     lineHeight: 0,
     alignItems: 'center'
@@ -4402,7 +4400,7 @@ const ParticipantItem = (props) => {
     const contextualMenuStyle = React.useMemo(() => react.mergeStyles({ background: theme.palette.neutralLighterAlt }, styles === null || styles === void 0 ? void 0 : styles.menu), [theme.palette.neutralLighterAlt, styles === null || styles === void 0 ? void 0 : styles.menu]);
     const infoContainerStyle = React.useMemo(() => react.mergeStyles(iconContainerStyle$1, { color: theme.palette.neutralTertiary }, styles === null || styles === void 0 ? void 0 : styles.iconContainer), [theme.palette.neutralTertiary, styles === null || styles === void 0 ? void 0 : styles.iconContainer]);
     const menuButton = React.useMemo(() => (React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: react.mergeStyles(menuButtonContainerStyle), title: menuTitle, "data-ui-id": ids.participantItemMenuButton },
-        React__default['default'].createElement(react.Icon, { iconName: itemHovered ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions', className: iconStyles$2 }))), [itemHovered, menuTitle, ids.participantItemMenuButton]);
+        React__default['default'].createElement(react.Icon, { iconName: itemHovered ? 'ParticipantItemOptionsHovered' : 'ParticipantItemOptions', className: iconStyles$3 }))), [itemHovered, menuTitle, ids.participantItemMenuButton]);
     const onDismissMenu = () => {
         setItemHovered(false);
         setMenuHidden(true);
@@ -4419,7 +4417,7 @@ const ParticipantItem = (props) => {
         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: _preventDismissOnEvent
                 } })))));
 };
 
@@ -4443,7 +4441,7 @@ const participantListItemStyle = {
 /**
  * @private
  */
-const iconStyles$1 = react.mergeStyles({
+const iconStyles$2 = react.mergeStyles({
     display: 'flex',
     lineHeight: 0,
     alignItems: 'center'
@@ -4464,8 +4462,8 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     const menuItems = createParticipantMenuItems && createParticipantMenuItems(participant);
     const onRenderIcon = (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isScreenSharing) || (callingParticipant === null || callingParticipant === void 0 ? void 0 : callingParticipant.isMuted)
         ? () => (React__default['default'].createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
-            callingParticipant.isScreenSharing && (React__default['default'].createElement(react.Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles$1, ariaLabel: strings.sharingIconLabel })),
-            callingParticipant.isMuted && (React__default['default'].createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$1, ariaLabel: strings.mutedIconLabel }))))
+            callingParticipant.isScreenSharing && (React__default['default'].createElement(react.Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles$2, ariaLabel: strings.sharingIconLabel })),
+            callingParticipant.isMuted && (React__default['default'].createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel }))))
         : () => null;
     const displayName = !participant.displayName ? strings.displayNamePlaceholder : participant.displayName;
     return (React__default['default'].createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip }));
@@ -4735,6 +4733,15 @@ const displayNameStyle = {
     textOverflow: 'ellipsis',
     maxWidth: '100%'
 };
+/**
+ * @private
+ */
+const participantStateStyle = {
+    textAlign: 'center',
+    paddingTop: '0.5rem',
+    fontWeight: 600,
+    fontSize: '0.75rem'
+};
 /**
  * @private
  */
@@ -4774,9 +4781,26 @@ const DEFAULT_PERSONA_MAX_SIZE_PX = 100;
 // Coin min size is set PersonaSize.size32
 const DEFAULT_PERSONA_MIN_SIZE_PX = 32;
 const DefaultPlaceholder = (props) => {
-    const { text, noVideoAvailableAriaLabel, coinSize, styles, hidePersonaDetails } = props;
+    const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails, participantState, strings } = props;
+    const participantStateString = React__default['default'].useMemo(() => {
+        if (!strings) {
+            return;
+        }
+        if (participantState === 'Connecting') {
+            return strings === null || strings === void 0 ? void 0 : strings.participantStateConnecting;
+        }
+        else if (participantState === 'Ringing') {
+            return strings === null || strings === void 0 ? void 0 : strings.participantStateRinging;
+        }
+        else if (participantState === 'Hold') {
+            return strings === null || strings === void 0 ? void 0 : strings.participantStateHold;
+        }
+        return;
+    }, [participantState, strings]);
     return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-        React__default['default'].createElement(react.Persona, { styles: styles, coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false })));
+        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))));
 };
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 /**
@@ -4787,7 +4811,13 @@ const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
  * @public
  */
 const VideoTile = (props) => {
-    const { children, displayName, initialsName, isMirrored, isMuted, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX } = props;
+    const { children, displayName, initialsName, isMirrored, isMuted, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, 
+    /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(PSTN-calls) */
+    participantState } = props;
+    /* @conditional-compile-remove(one-to-n-calling) */
+    // @conditional-compile-remove(PSTN-calls)
+    const strings = Object.assign(Object.assign({}, useLocale$1().strings.videoTile), props.strings);
     const [personaSize, setPersonaSize] = React.useState(100);
     const videoTileRef = React.useRef(null);
     const theme = useTheme();
@@ -4810,7 +4840,10 @@ const VideoTile = (props) => {
         noVideoAvailableAriaLabel,
         coinSize: personaSize,
         styles: defaultPersonaStyles,
-        hidePersonaDetails: true
+        hidePersonaDetails: true,
+        /* @conditional-compile-remove(one-to-n-calling) */
+        /* @conditional-compile-remove(PSTN-calls) */
+        participantState: participantState
     };
     const videoHintWithBorderRadius = react.mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });
     const tileInfoStyle = React.useMemo(() => react.mergeStyles(isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint, getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'), styles === null || styles === void 0 ? void 0 : styles.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, theme, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer]);
@@ -4824,7 +4857,10 @@ const VideoTile = (props) => {
                     borderRadius: theme.effects.roundedCorner4,
                     border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : 'transparent'}`
                 }) }),
-            isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
+            isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions, { 
+                /* @conditional-compile-remove(one-to-n-calling) */
+                // @conditional-compile-remove(PSTN-calls)
+                strings: strings }))))),
             showLabel && (displayName || (showMuteIndicator && isMuted)) && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle },
                 React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
                     displayName && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName }, displayName)),
@@ -4843,7 +4879,10 @@ const VideoTile = (props) => {
  */
 const _RemoteVideoTile = React__default['default'].memo((props) => {
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
-    isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
+    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;
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -4876,7 +4915,10 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
         }
         return React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving ? 'none' : 'loading' });
     }, [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 }));
+    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 }));
 });
 
 // Copyright (c) Microsoft Corporation.
@@ -4996,8 +5038,8 @@ const ResponsiveHorizontalGallery = (props) => {
  */
 const calculateChildrenPerPage = (args) => {
     const { numberOfChildren, containerWidth, buttonWidthRem, childWidthRem, gapWidthRem } = args;
-    const childWidth = convertRemToPx(childWidthRem);
-    const gapWidth = convertRemToPx(gapWidthRem);
+    const childWidth = _convertRemToPx(childWidthRem);
+    const gapWidth = _convertRemToPx(gapWidthRem);
     /** First check how many children can fit in containerWidth.
      *    __________________________________
      *   |                ||                |
@@ -5011,7 +5053,7 @@ const calculateChildrenPerPage = (args) => {
     if (numberOfChildren <= numberOfChildrenInContainer) {
         return numberOfChildrenInContainer;
     }
-    const buttonWidth = convertRemToPx(buttonWidthRem);
+    const buttonWidth = _convertRemToPx(buttonWidthRem);
     /** We know we need to paginate. So we need to subtract the buttonWidth twice and gapWidth twice from
      * containerWidth to compute childrenSpace
      *   <-----------containerWidth--------->
@@ -6518,7 +6560,7 @@ const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowed = tru
                     maxWidth: '95%'
                 }
             },
-            preventDismissOnEvent
+            preventDismissOnEvent: _preventDismissOnEvent
         }
     };
     const menuItemStyles = react.merge(buttonFlyoutItemStyles, (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.menuItemStyles) !== null && _b !== void 0 ? _b : {});
@@ -6958,7 +7000,7 @@ const ParticipantsButton = (props) => {
             styles: react.merge(participantsButtonMenuPropsStyle, styles === null || styles === void 0 ? void 0 : styles.menuStyles),
             items: [],
             calloutProps: {
-                preventDismissOnEvent
+                preventDismissOnEvent: _preventDismissOnEvent
             }
         };
         if (participantCount > 0) {
@@ -6987,7 +7029,7 @@ const ParticipantsButton = (props) => {
                         },
                         // Disable dismiss on resize to work around a couple Fluent UI bugs
                         // See reasoning in the props for the parent menu.
-                        preventDismissOnEvent
+                        preventDismissOnEvent: _preventDismissOnEvent
                     }
                 },
                 'data-ui-id': ids.participantButtonPeopleMenuItem
@@ -7156,7 +7198,7 @@ const DrawerMenuItem = (props) => {
                 } }, props.secondaryText))),
         secondaryIcon && React__default['default'].createElement(react.Stack.Item, null, secondaryIcon)));
 };
-const MenuItemIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({ className: react.mergeStyles(iconStyles) }, props)));
+const MenuItemIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({ className: react.mergeStyles(iconStyles$1) }, props)));
 const menuItemChildrenGap = { childrenGap: '0.5rem' };
 const drawerMenuItemRootStyles = (hoverBackground, fontSize) => (Object.assign(Object.assign({}, fontSize), { height: '3rem', lineHeight: '3rem', padding: '0rem 0.75rem', cursor: 'pointer', ':hover, :focus': {
         background: hoverBackground
@@ -7176,7 +7218,7 @@ const drawerMenuItemTextStyles = {
         whiteSpace: 'nowrap'
     }
 };
-const iconStyles = {
+const iconStyles$1 = {
     // Vertically center icons in the menu item. Using line-height does not work for centering fluent SVG icons.
     display: 'flex',
     alignItems: 'center',
@@ -7571,7 +7613,7 @@ const buttonStyles = (theme) => ({
 const primaryContentStyles = (theme) => {
     return {
         fontSize: '1.25rem',
-        fontWeight: 600,
+        fontWeight: theme.fonts.medium.fontWeight,
         color: `${theme.palette.neutralPrimary}`
     };
 };
@@ -7667,7 +7709,6 @@ const formatPhoneNumber = (phoneNumber) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-/* @conditional-compile-remove(dialpad) */
 const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
@@ -7678,7 +7719,6 @@ const DialpadButton = (props) => {
             React__default['default'].createElement(react.Text, { className: react.mergeStyles(primaryContentStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.primaryContent) }, props.primaryContent),
             React__default['default'].createElement(react.Text, { className: react.mergeStyles(secondaryContentStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.secondaryContent) }, (_d = props.secondaryContent) !== null && _d !== void 0 ? _d : ' '))));
 };
-/* @conditional-compile-remove(dialpad) */
 const dialPadButtonsDefault = [
     [
         { primaryContent: '1' },
@@ -7697,7 +7737,6 @@ const dialPadButtonsDefault = [
     ],
     [{ primaryContent: '*' }, { primaryContent: '0', secondaryContent: '+' }, { primaryContent: '#' }]
 ];
-/* @conditional-compile-remove(dialpad) */
 const DtmfTones = [
     'Num1',
     'Num2',
@@ -7712,7 +7751,6 @@ const DtmfTones = [
     'Num0',
     'Pound'
 ];
-/* @conditional-compile-remove(dialpad) */
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
@@ -7797,11 +7835,12 @@ const DialpadContainer = (props) => {
 const Dialpad = (props) => {
     /* @conditional-compile-remove(dialpad) */
     const localeStrings = useLocale$1().strings.dialpad;
-    /* @conditional-compile-remove(dialpad) */
-    const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
-    return (React__default['default'].createElement(React__default['default'].Fragment, null, 
-    /* @conditional-compile-remove(dialpad) */
-    React__default['default'].createElement(DialpadContainer, Object.assign({ strings: strings }, props))));
+    const dialpadLocaleStringsTrampoline = () => {
+        /* @conditional-compile-remove(dialpad) */
+        return localeStrings;
+    };
+    const strings = Object.assign(Object.assign({}, dialpadLocaleStringsTrampoline()), props.strings);
+    return React__default['default'].createElement(DialpadContainer, Object.assign({ strings: strings }, props));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -7849,15 +7888,15 @@ const _videoGalleryRemoteParticipantsMemo = (remoteParticipants) => {
             return participant.state !== 'InLobby';
         })
             .map((participant) => {
-            return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, participant.displayName);
+            return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, participant.state, participant.displayName);
         });
     });
 };
-const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, displayName) => {
-    return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, displayName);
+const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName) => {
+    return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName);
 });
 /** @private */
-const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, displayName) => {
+const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName) => {
     const rawVideoStreamsArray = Object.values(videoStreams);
     let videoStream = undefined;
     let screenShareStream = undefined;
@@ -7884,7 +7923,10 @@ const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted
         isSpeaking,
         videoStream,
         screenShareStream,
-        isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable
+        isScreenSharingOn: screenShareStream !== undefined && screenShareStream.isAvailable,
+        /* @conditional-compile-remove(one-to-n-calling) */
+        /* @conditional-compile-remove(PSTN-calls) */
+        state: convertRemoteParticipantStateToVideoGalleryRemoteParticipantState(state)
     };
 };
 const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
@@ -7898,6 +7940,29 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
         renderElement: (_b = stream.view) === null || _b === void 0 ? void 0 : _b.target
     };
 };
+/* @conditional-compile-remove(one-to-n-calling) */
+/* @conditional-compile-remove(PSTN-calls) */
+/**
+ * We convert the Communication Participant states to simpler states that can be used with VideoTiles/VideoGallery.
+ */
+const convertRemoteParticipantStateToVideoGalleryRemoteParticipantState = (state) => {
+    // `Idle` is the first state of the participant.
+    if (state === 'Idle' || state === 'Connecting') {
+        return 'Connecting';
+    }
+    // `EarlyMedia` is a state when the media is played before a participant connects to the call.
+    // It occurs immediately after the `Connecting` state.
+    if (state === 'EarlyMedia' || state === 'Ringing') {
+        return 'Ringing';
+    }
+    if (state === 'Hold') {
+        return 'Hold';
+    }
+    if (state === 'Connected') {
+        return 'Connected';
+    }
+    return;
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7924,7 +7989,7 @@ const videoGallerySelector = reselect.createSelector([
     const noRemoteParticipants = [];
     return {
         screenShareParticipant: screenShareRemoteParticipant
-            ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.displayName)
+            ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName)
             : undefined,
         localParticipant: {
             userId: identifier,
@@ -12517,7 +12582,13 @@ const COMPOSITE_ONLY_ICONS = {
     NoticePageLeftCall: React__default['default'].createElement(reactIcons.CallEnd20Filled, null),
     NoticePageRemovedFromCall: React__default['default'].createElement(reactIcons.Info20Filled, null),
     /* @conditional-compile-remove(file-sharing) */
-    SendBoxAttachFile: React__default['default'].createElement(reactIcons.Attach20Regular, null)
+    SendBoxAttachFile: React__default['default'].createElement(reactIcons.Attach20Regular, null),
+    /* @conditional-compile-remove(PSTN-calls) */
+    PeoplePaneAddPerson: React__default['default'].createElement(reactIcons.PersonAdd20Regular, null),
+    /* @conditional-compile-remove(PSTN-calls) */
+    PeoplePaneOpenDialpad: React__default['default'].createElement(reactIcons.Dialpad20Regular, null),
+    /* @conditional-compile-remove(PSTN-calls) */
+    DialpadStartCall: React__default['default'].createElement(reactIcons.Call20Regular, null)
 };
 /**
  * The default set of icons that are available to used in the Composites.
@@ -12550,7 +12621,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"};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",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};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"};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};
 
@@ -15155,8 +15226,324 @@ const copyLinkButtonStyles = {
 /**
  * @private
  */
-const linkIconStyles = { marginRight: '0.5rem' };
+const themedCopyLinkButtonStyles$1 = (mobileView, theme) => ({
+    root: {
+        minHeight: mobileView ? '3rem' : '2.5rem',
+        borderRadius: mobileView ? theme.effects.roundedCorner6 : theme.effects.roundedCorner4
+    }
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Convert IContextualMenuItem to _DrawerMenuItemProps
+ * @param contextualMenu - IContextualMenuItem to convert
+ * @param onDrawerMenuItemClick - callback to call when converted DrawerMenuItem is clicked
+ * @returns DrawerMenuItem
+ * @private
+ */
+const convertContextualMenuItemToDrawerMenuItem = (contextualMenu, onDrawerMenuItemClick) => {
+    return {
+        itemKey: contextualMenu.key,
+        onItemClick: () => {
+            var _a;
+            (_a = contextualMenu.onClick) === null || _a === void 0 ? void 0 : _a.call(contextualMenu);
+            onDrawerMenuItemClick();
+        },
+        iconProps: contextualMenu.iconProps,
+        text: contextualMenu.text,
+        disabled: contextualMenu.disabled
+    };
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const themedCopyLinkButtonStyles = (theme, mobileView) => ({
+    root: {
+        minHeight: mobileView ? '3rem' : '2.5rem',
+        borderRadius: mobileView ? theme.effects.roundedCorner6 : theme.effects.roundedCorner4,
+        width: '100%'
+    },
+    textContainer: {
+        display: 'contents'
+    }
+});
+/**
+ * @private
+ */
+const themedMenuStyle = (theme) => ({
+    root: {
+        borderRadius: theme.effects.roundedCorner6
+    }
+});
+/**
+ * @private
+ */
+const iconStyles = {
+    // overwrite default line height which results in icons having different size
+    lineHeight: '0',
+    width: '1.125rem'
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const themedDialpadModelStyle = (theme) => ({
+    main: {
+        borderRadius: theme.effects.roundedCorner6,
+        padding: '1rem'
+    }
+});
+/**
+ * @private
+ */
+const themedDialpadStyle = (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: isMobile ? 'center' : 'left',
+            paddingTop: 0
+        }
+    },
+    primaryContent: {
+        color: theme.palette.themeDarkAlt
+    }
+});
+/**
+ * @private
+ */
+const themedCallButtonStyle = (theme) => ({
+    root: {
+        fontWeight: theme.fonts.medium.fontWeight,
+        fontSize: theme.fonts.medium.fontSize,
+        width: '100%',
+        height: '2.5rem',
+        borderRadius: 3,
+        padding: '0.625rem'
+    },
+    textContainer: {
+        display: 'contents'
+    }
+});
 
+// 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) => {
+    const { strings, isMobile, showDialpad, onDismissDialpad } = props;
+    const [textFieldInput, setTextFieldInput] = React.useState('');
+    const theme = react.useTheme();
+    const onDismissTriggered = () => {
+        setTextFieldInput('');
+        onDismissDialpad();
+    };
+    const onClickCall = () => {
+        //place holder for adding calling functionality
+        console.log(textFieldInput);
+    };
+    const dialpadModelStyle = React.useMemo(() => themedDialpadModelStyle(theme), [theme]);
+    const dialpadStyle = React.useMemo(() => themedDialpadStyle(isMobile, theme), [theme, isMobile]);
+    const callButtonStyle = React.useMemo(() => themedCallButtonStyle(theme), [theme]);
+    const dialpadComponent = () => {
+        return (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(Dialpad, { onChange: setTextFieldInput, styles: dialpadStyle }),
+            React__default['default'].createElement(react.PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => DialpadStartCallIconTrampoline(), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
+    };
+    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()))))));
+    }
+    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" },
+        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.Stack, null, dialpadComponent()))));
+};
+function DialpadStartCallIconTrampoline() {
+    /* @conditional-compile-remove(PSTN-calls) */
+    return React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "DialpadStartCall" });
+}
+
+// Copyright (c) Microsoft Corporation.
+const mainScreenContainerStyle = {
+    height: '100%',
+    width: '100%'
+};
+/**
+ * @private
+ */
+const mainScreenContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '30rem', minHeight: '22rem' // max height of min-height of composite pages (Configuration page)
+ }));
+/**
+ * @private
+ */
+const mainScreenContainerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '17.5rem', minHeight: '13rem' // max height of min-height of composite pages (Configuration page & Call page)
+ }));
+/** @private */
+const drawerContainerStyles = {
+    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 AddPeopleDropdown = (props) => {
+    const theme = react.useTheme();
+    const { inviteLink, strings, mobileView } = props;
+    const [showDialpad, setShowDialpad] = React.useState(false);
+    const menuStyleThemed = React.useMemo(() => themedMenuStyle(theme), [theme]);
+    const copyLinkButtonStylesThemed = React.useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);
+    const defaultMenuProps = React.useMemo(() => {
+        const menuProps = {
+            styles: menuStyleThemed,
+            items: [],
+            useTargetWidth: true,
+            calloutProps: {
+                preventDismissOnEvent: _preventDismissOnEvent
+            }
+        };
+        if (inviteLink) {
+            menuProps.items.push({
+                key: 'InviteLinkKey',
+                text: strings.copyInviteLinkButtonLabel,
+                itemProps: { styles: copyLinkButtonStylesThemed },
+                iconProps: { iconName: 'Link', style: iconStyles },
+                onClick: () => copy__default['default'](inviteLink)
+            });
+        }
+        menuProps.items.push({
+            key: 'DialpadKey',
+            text: strings.openDialpadButtonLabel,
+            itemProps: { styles: copyLinkButtonStylesThemed },
+            iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },
+            onClick: () => setShowDialpad(true),
+            'data-ui-id': 'call-with-chat-composite-dial-phone-number-button'
+        });
+        return menuProps;
+    }, [
+        strings.copyInviteLinkButtonLabel,
+        strings.openDialpadButtonLabel,
+        copyLinkButtonStylesThemed,
+        inviteLink,
+        menuStyleThemed
+    ]);
+    const onDismissDialpad = () => {
+        setShowDialpad(false);
+    };
+    const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = React.useState([]);
+    const setDrawerMenuItemsForAddPeople = React.useMemo(() => {
+        return () => {
+            const drawerMenuItems = defaultMenuProps.items.map((contextualMenu) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([])));
+            setAddPeopleDrawerMenuItems(drawerMenuItems);
+        };
+    }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);
+    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(_DrawerMenu, { onLightDismiss: () => setAddPeopleDrawerMenuItems([]), items: addPeopleDrawerMenuItems }))),
+            React__default['default'].createElement(CallingDialpad, { isMobile: true, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad })));
+    }
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Stack, null,
+        React__default['default'].createElement(CallingDialpad, { isMobile: false, strings: strings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
+        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" })))));
+};
+function PeoplePaneOpenDialpadIconNameTrampoline() {
+    /* @conditional-compile-remove(PSTN-calls) */
+    return 'PeoplePaneOpenDialpad';
+}
+function PeoplePaneAddPersonIconTrampoline() {
+    /* @conditional-compile-remove(PSTN-calls) */
+    return React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "PeoplePaneAddPerson" });
+}
+
+// Copyright (c) Microsoft Corporation.
+/** @private */
+const AddPeopleButton = (props) => {
+    const { inviteLink, mobileView, strings, participantList } = props;
+    const theme = react.useTheme();
+    React.useMemo(() => react.concatStyleSets(copyLinkButtonStyles, themedCopyLinkButtonStyles$1(mobileView, theme)), [mobileView, theme]);
+    /* @conditional-compile-remove(PSTN-calls) */
+    if (mobileView) {
+        return React__default['default'].createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink });
+    }
+    else {
+        return (React__default['default'].createElement(react.Stack, { tokens: peoplePaneContainerTokens },
+            React__default['default'].createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink }),
+            participantList));
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
 var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -15199,23 +15586,12 @@ const PeoplePaneContent = (props) => {
             onParticipantClick: props.mobileView ? setDrawerMenuItemsForParticipant : undefined });
     }, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, onRemoveParticipant]);
     const participantList = (React__default['default'].createElement(ParticipantListWithHeading, { isMobile: props.mobileView, participantListProps: participantListProps, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, title: props.strings.peoplePaneSubTitle }));
-    const theme = react.useTheme();
-    const copyLinkButtonStylesThemed = React.useMemo(() => react.concatStyleSets(copyLinkButtonStyles, {
-        root: {
-            minHeight: props.mobileView ? '3rem' : '2.5rem',
-            borderRadius: props.mobileView ? theme.effects.roundedCorner6 : theme.effects.roundedCorner4
-        }
-    }), [props.mobileView, theme.effects.roundedCorner6, theme.effects.roundedCorner4]);
     if (props.mobileView) {
         return (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: peoplePaneContainerStyle, tokens: peoplePaneContainerTokens },
             React__default['default'].createElement(react.Stack.Item, { grow: true, styles: participantListContainerStyles }, participantList),
-            inviteLink && (React__default['default'].createElement(react.Stack.Item, { styles: copyLinkButtonContainerStyles },
-                React__default['default'].createElement(react.PrimaryButton, { onClick: () => copy__default['default'](inviteLink), styles: copyLinkButtonStylesThemed, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), text: strings.copyInviteLinkButtonLabel })))));
+            React__default['default'].createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings })));
     }
-    return (React__default['default'].createElement(react.Stack, { tokens: peoplePaneContainerTokens },
-        inviteLink && (React__default['default'].createElement(react.Stack, { styles: copyLinkButtonStackStyles },
-            React__default['default'].createElement(react.DefaultButton, { text: strings.copyInviteLinkButtonLabel, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), onClick: () => copy__default['default'](inviteLink), styles: copyLinkButtonStylesThemed }))),
-        participantList));
+    return (React__default['default'].createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings }));
 };
 /**
  * Create default contextual menu items for particant
@@ -15244,54 +15620,6 @@ const createDefaultContextualMenuItems = (participant, strings, onRemoveParticip
     }
     return menuItems;
 };
-/**
- * Convert IContextualMenuItem to _DrawerMenuItemProps
- * @param contextualMenu - IContextualMenuItem to convert
- * @param onDrawerMenuItemClick - callback to call when converted DrawerMenuItem is clicked
- * @returns DrawerMenuItem
- */
-const convertContextualMenuItemToDrawerMenuItem = (contextualMenu, onDrawerMenuItemClick) => {
-    return {
-        itemKey: contextualMenu.key,
-        onItemClick: () => {
-            var _a;
-            (_a = contextualMenu.onClick) === null || _a === void 0 ? void 0 : _a.call(contextualMenu);
-            onDrawerMenuItemClick();
-        },
-        iconProps: contextualMenu.iconProps,
-        text: contextualMenu.text,
-        disabled: contextualMenu.disabled
-    };
-};
-
-// Copyright (c) Microsoft Corporation.
-const mainScreenContainerStyle = {
-    height: '100%',
-    width: '100%'
-};
-/**
- * @private
- */
-const mainScreenContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '30rem', minHeight: '22rem' // max height of min-height of composite pages (Configuration page)
- }));
-/**
- * @private
- */
-const mainScreenContainerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '17.5rem', minHeight: '13rem' // max height of min-height of composite pages (Configuration page & Call page)
- }));
-/** @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.
 /**
@@ -15479,7 +15807,7 @@ const CallPane = (props) => {
                         React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
                             React__default['default'].createElement(PeoplePaneContent, Object.assign({}, props, { onRemoveParticipant: removeParticipantFromCall, setDrawerMenuItems: setDrawerMenuItems, strings: strings }))))))),
         props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { callAdapter: props.callAdapter, modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
-        drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
+        drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles },
             React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
 };
 
@@ -17698,48 +18026,6 @@ const getDesktopEndCallButtonStyles = (theme) => {
 };
 const isEnabled$1 = (option) => option !== false;
 
-// 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 = {
-    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.
 // Licensed under the MIT license.
 var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -18157,7 +18443,7 @@ const CallWithChatPane = (props) => {
                     React__default['default'].createElement(react.Stack, { styles: props.activePane === 'chat' ? availableSpaceStyles : hiddenStyles }, chatContent),
                     React__default['default'].createElement(react.Stack, { styles: props.activePane === 'people' ? availableSpaceStyles : hiddenStyles }, peopleContent)))),
         props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { callAdapter: props.callAdapter, modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
-        drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles },
+        drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
             React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
 };
 
@@ -18270,7 +18556,7 @@ const CallWithChatScreen = (props) => {
                     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 },
-                    React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles },
+                    React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles$1 },
                         React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControls, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked }))))),
             // This layer host is for ModalLocalAndRemotePIP in CallWithChatPane. This LayerHost cannot be inside the CallWithChatPane
             // because when the CallWithChatPane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging