@azure/communication-react 1.12.1-alpha-202401230013 → 1.12.1-alpha-202401250013

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

@@ -14,6 +14,9 @@ var textareaCaretTs = require('textarea-caret-ts');
 var reactComponents = require('@fluentui/react-components');
 var useDebounce = require('use-debounce');
 var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
+require('roosterjs-editor-plugins');
+require('roosterjs-editor-core');
+require('roosterjs-react');
 var uuid = require('uuid');
 var reactChat = require('@fluentui-contrib/react-chat');
 var react$1 = require('@griffel/react');
@@ -170,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.12.1-alpha-202401230013';
+var telemetryVersion = '1.12.1-alpha-202401250013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -522,7 +525,7 @@ const getSupportedSpokenLanguages = (state, props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$N = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$O = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -561,7 +564,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$N(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$O(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -769,7 +772,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$M = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$N = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -790,7 +793,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @private
  */
 const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager, call, options) => {
-    const onStartLocalVideo = () => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$N(void 0, void 0, void 0, function* () {
         // Before the call object creates a stream, dispose of any local preview streams.
         // @TODO: is there any way to parent the unparented view to the call object instead
         // of disposing and creating a new stream?
@@ -810,7 +813,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$N(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -819,7 +822,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             yield call.stopVideo(stream);
         }
     });
-    const onToggleCamera = (options) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$N(void 0, void 0, void 0, function* () {
         const previewOn = _isPreviewOn(callClient.getState().deviceManager);
         // the disposal of the unparented views is to workaround: https://skype.visualstudio.com/SPOOL/_workitems/edit/3030558.
         // The root cause of the issue is caused by never transitioning the unparented view to the
@@ -876,19 +879,19 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             }
         }
     });
-    const onSelectMicrophone = (device) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$N(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$N(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$N(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -919,11 +922,11 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(raise-hand) */
-    const onRaiseHand = () => __awaiter$M(void 0, void 0, void 0, function* () { var _a; return yield ((_a = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _a === void 0 ? void 0 : _a.raiseHand()); });
+    const onRaiseHand = () => __awaiter$N(void 0, void 0, void 0, function* () { var _a; return yield ((_a = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _a === void 0 ? void 0 : _a.raiseHand()); });
     /* @conditional-compile-remove(raise-hand) */
-    const onLowerHand = () => __awaiter$M(void 0, void 0, void 0, function* () { var _b; return yield ((_b = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _b === void 0 ? void 0 : _b.lowerHand()); });
+    const onLowerHand = () => __awaiter$N(void 0, void 0, void 0, function* () { var _b; return yield ((_b = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _b === void 0 ? void 0 : _b.lowerHand()); });
     /* @conditional-compile-remove(raise-hand) */
-    const onToggleRaiseHand = () => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onToggleRaiseHand = () => __awaiter$N(void 0, void 0, void 0, function* () {
         const raiseHandFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand);
         const localUserId = callClient.getState().userId;
         const isLocalRaisedHand = raiseHandFeature === null || raiseHandFeature === void 0 ? void 0 : raiseHandFeature.getRaisedHands().find((publishedState) => toFlatCommunicationIdentifier(publishedState.identifier) === toFlatCommunicationIdentifier(localUserId));
@@ -935,7 +938,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(reaction) */
-    const onReactionClicked = (reaction) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onReactionClicked = (reaction) => __awaiter$N(void 0, void 0, void 0, function* () {
         var _c;
         if (reaction === 'like' ||
             reaction === 'applause' ||
@@ -949,19 +952,19 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
         return;
     });
-    const onToggleMicrophone = () => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$N(void 0, void 0, void 0, function* () {
         if (!call || !(_isInCall(call.state) || _isInLobbyOrConnecting(call.state))) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
         }
         return call.isMuted ? yield call.unmute() : yield call.mute();
     });
-    const onStartScreenShare = () => __awaiter$M(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$M(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$M(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = (forEveryone) => __awaiter$M(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
+    const onStartScreenShare = () => __awaiter$N(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$N(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$N(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = (forEveryone) => __awaiter$N(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onToggleHold = () => __awaiter$M(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
-    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$N(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
+    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$N(void 0, void 0, void 0, function* () {
         var _d;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -977,7 +980,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         const { view } = (_d = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _d !== void 0 ? _d : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$N(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -1008,7 +1011,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
         return (createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view) ? { view: createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view } : undefined;
     });
-    const onDisposeRemoteStreamView = (userId) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -1029,7 +1032,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeRemoteVideoStreamView = (userId) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteVideoStreamView = (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -1046,7 +1049,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             callClient.disposeView(call.id, participant.identifier, remoteVideoStream);
         }
     });
-    const onDisposeRemoteScreenShareStreamView = (userId) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteScreenShareStreamView = (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -1063,7 +1066,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$N(void 0, void 0, void 0, function* () {
         // If the user is currently in a call, dispose of the local stream view attached to that call.
         const callState = call && callClient.getState().calls[call.id];
         const localStream = callState === null || callState === void 0 ? void 0 : callState.localVideoStreams.find((item) => item.mediaStreamType === 'Video');
@@ -1076,18 +1079,18 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         yield disposeAllLocalPreviewViews(callClient);
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$M(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$N(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     const notImplemented = () => {
         throw new Error('Not implemented, cannot call a method from an abstract object');
     };
     /* @conditional-compile-remove(call-readiness) */
-    const askDevicePermission = (constrain) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const askDevicePermission = (constrain) => __awaiter$N(void 0, void 0, void 0, function* () {
         if (deviceManager) {
             yield (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.askDevicePermission(constrain));
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onRemoveVideoBackgroundEffects = () => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onRemoveVideoBackgroundEffects = () => __awaiter$N(void 0, void 0, void 0, function* () {
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -1100,7 +1103,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$N(void 0, void 0, void 0, function* () {
         var _e;
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
@@ -1114,7 +1117,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$N(void 0, void 0, void 0, function* () {
         var _f;
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
@@ -1128,34 +1131,34 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(close-captions) */
-    const onStartCaptions = (options) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onStartCaptions = (options) => __awaiter$N(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield (captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.startCaptions(options));
     });
     /* @conditional-compile-remove(close-captions) */
-    const onStopCaptions = () => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onStopCaptions = () => __awaiter$N(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield (captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.stopCaptions());
     });
     /* @conditional-compile-remove(close-captions) */
-    const onSetSpokenLanguage = (language) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onSetSpokenLanguage = (language) => __awaiter$N(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield (captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.setSpokenLanguage(language));
     });
     /* @conditional-compile-remove(close-captions) */
-    const onSetCaptionLanguage = (language) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onSetCaptionLanguage = (language) => __awaiter$N(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield captionsFeature.setCaptionLanguage(language);
     });
     /* @conditional-compile-remove(end-of-call-survey) */
-    const onSubmitSurvey = (survey) => __awaiter$M(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.CallSurvey).submitSurvey(survey)); });
+    const onSubmitSurvey = (survey) => __awaiter$N(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.CallSurvey).submitSurvey(survey)); });
     /* @conditional-compile-remove(spotlight) */
-    const onStartSpotlight = (userId) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onStartSpotlight = (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
         const participant = _toCommunicationIdentifier(userId);
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).startSpotlight([participant]));
     });
     /* @conditional-compile-remove(spotlight) */
-    const onStopSpotlight = (userId) => __awaiter$M(void 0, void 0, void 0, function* () {
+    const onStopSpotlight = (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
         const participant = _toCommunicationIdentifier(userId);
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight([participant]));
     });
@@ -1218,7 +1221,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$L = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$M = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1246,7 +1249,7 @@ const createDefaultCallingHandlers = memoizeOne((...args) => {
             return callAgent === null || callAgent === void 0 ? void 0 : callAgent.startCall(participants, options);
         }, 
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$L(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$M(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             if (communicationCommon.isPhoneNumberIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant, options);
@@ -1254,7 +1257,7 @@ const createDefaultCallingHandlers = memoizeOne((...args) => {
             else if (communicationCommon.isCommunicationUserIdentifier(participant) || communicationCommon.isMicrosoftTeamsUserIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant);
             }
-        }), onRemoveParticipant: (userId) => __awaiter$L(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$M(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             yield (call === null || call === void 0 ? void 0 : call.removeParticipant(participant));
         }) });
@@ -1262,7 +1265,7 @@ const createDefaultCallingHandlers = memoizeOne((...args) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$K = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$L = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1294,7 +1297,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne((callClient, callAgent, dev
         }, 
         /* @conditional-compile-remove(teams-identity-support) */
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$K(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$L(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             /* @conditional-compile-remove(teams-identity-support) */
             const threadId = options === null || options === void 0 ? void 0 : options.threadId;
@@ -1310,7 +1313,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne((callClient, callAgent, dev
             }
             /* @conditional-compile-remove(teams-identity-support) */
             call === null || call === void 0 ? void 0 : call.addParticipant(participant);
-        }), onRemoveParticipant: (userId) => __awaiter$K(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$L(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             if (communicationCommon.isCommunicationUserIdentifier(participant)) {
                 throw new Error('CommunicationIdentifier in Teams call is not supported!');
@@ -1401,7 +1404,7 @@ const getCaptionsSpeakerIdentifier = (captions) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$J = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$K = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1450,13 +1453,13 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$J(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$K(this, void 0, void 0, function* () {
             // Device Manager always has a camera with '' name if there are no real camera devices available.
             // We don't want to show that in the UI.
             const realCameras = (yield this._deviceManager.getCameras()).filter((c) => !!c.name);
             this._context.setDeviceManagerCameras(dedupeById(realCameras));
         });
-        this.audioDevicesUpdated = () => __awaiter$J(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$K(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -1857,7 +1860,7 @@ function convertFromSDKToRaisedHandState(raisedHand) {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$I = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$J = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2676,7 +2679,7 @@ let CallContext$2 = class CallContext {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$I(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$J(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -3130,7 +3133,7 @@ function _logStreamEvent(eventName, streamLogInfo, error) {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$H = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$I = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3140,7 +3143,7 @@ var __awaiter$H = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewVideo(context, internalContext, callId, stream, participantId, options) {
-    return __awaiter$H(this, void 0, void 0, function* () {
+    return __awaiter$I(this, void 0, void 0, function* () {
         // we can only have 3 types of createView
         let streamEventType;
         // we will reuse these for local as well but we need to make sure the remote stream is passed in like before.
@@ -3269,7 +3272,7 @@ function createViewVideo(context, internalContext, callId, stream, participantId
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$H(this, void 0, void 0, function* () {
+    return __awaiter$I(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -3438,7 +3441,7 @@ function createView(context, internalContext, callId, participantId, stream, opt
         // Render LocalVideoStream that is not part of a Call
         // Because it is not part of the call we don't tee errors to state naturally (e.g. via a Call Client function such as startVideo).
         // We do not have a startLocalPreviewVideo function, so as a workaround we ensure any errors are propagated here.
-        return context.withAsyncErrorTeedToState(() => __awaiter$H(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
+        return context.withAsyncErrorTeedToState(() => __awaiter$I(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
     }
     else {
         _logStreamEvent(EventNames.CREATE_STREAM_INVALID_PARAMS, { streamType });
@@ -4048,7 +4051,7 @@ class CallSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$G = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$H = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4068,14 +4071,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -4316,7 +4319,7 @@ const clearCallRelatedState = (context, internalContext) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$G = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4342,56 +4345,56 @@ class ProxyCallCommon {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$F(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$F(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$F(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$F(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$F(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$F(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$F(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$F(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
@@ -4431,7 +4434,7 @@ class ProxyTeamsCaptions {
     get(target, prop) {
         switch (prop) {
             case 'startCaptions':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$F(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(this, void 0, void 0, function* () {
                     var _a, _b;
                     this._context.setStartCaptionsInProgress(this._call.id, true);
                     const ret = yield target.startCaptions(...args);
@@ -4439,7 +4442,7 @@ class ProxyTeamsCaptions {
                     return ret;
                 }), 'Call.feature');
             case 'stopCaptions':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$F(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(this, void 0, void 0, function* () {
                     const ret = yield target.stopCaptions(...args);
                     this._context.setIsCaptionActive(this._call.id, false);
                     this._context.setStartCaptionsInProgress(this._call.id, false);
@@ -4447,13 +4450,13 @@ class ProxyTeamsCaptions {
                     return ret;
                 }), 'Call.feature');
             case 'setSpokenLanguage':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$F(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(this, void 0, void 0, function* () {
                     const ret = yield target.setSpokenLanguage(...args);
                     this._context.setSelectedSpokenLanguage(this._call.id, args[0]);
                     return ret;
                 }), 'Call.feature');
             case 'setCaptionLanguage':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$F(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(this, void 0, void 0, function* () {
                     const ret = yield target.setCaptionLanguage(...args);
                     this._context.setSelectedCaptionLanguage(this._call.id, args[0]);
                     return ret;
@@ -4501,7 +4504,7 @@ class ProxyTransferCallFeature {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$E = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4515,7 +4518,7 @@ class ProxyCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$E(this, void 0, void 0, function* () {
+                    return __awaiter$F(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -4753,7 +4756,7 @@ class InternalCallContext {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$E = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4768,7 +4771,7 @@ class ProxyTeamsCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$D(this, void 0, void 0, function* () {
+                    return __awaiter$E(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'TeamsCall.addParticipant');
@@ -4885,7 +4888,7 @@ const teamsCallAgentDeclaratify = (callAgent, context, internalContext) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4907,7 +4910,7 @@ class ProxyVideoStreamRendererView {
     get(target, prop) {
         switch (prop) {
             case 'updateScalingMode': {
-                return (...args) => __awaiter$C(this, void 0, void 0, function* () {
+                return (...args) => __awaiter$D(this, void 0, void 0, function* () {
                     yield target.updateScalingMode(...args);
                     this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);
                 });
@@ -4928,7 +4931,7 @@ const videoStreamRendererViewDeclaratify = (view, context, callId, participantId
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4950,7 +4953,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$C(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -4963,7 +4966,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'createTeamsCallAgent': {
-                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
+                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$C(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -4976,7 +4979,7 @@ class ProxyCallClient {
                 }), 'CallClient.createTeamsCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$B(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$C(this, void 0, void 0, function* () {
                     // As of writing, the SDK always returns the same instance of DeviceManager so we keep a reference of
                     // DeviceManager and if it does not change we return the cached DeclarativeDeviceManager. If it does not we'll
                     // throw an error that indicate we need to fix this issue as our implementation has diverged from the SDK.
@@ -5005,7 +5008,7 @@ class ProxyCallClient {
                         /**
                          * add to this object if we want to proxy anything else off the DebugInfo feature object.
                          */
-                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$B(this, void 0, void 0, function* () {
+                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$C(this, void 0, void 0, function* () {
                                 const environmentInfo = yield feature.getEnvironmentInfo();
                                 this._context.setEnvironmentInfo(environmentInfo);
                                 return environmentInfo;
@@ -5066,7 +5069,7 @@ const createStatefulCallClientWithDeps = (callClient, context, internalContext)
     });
     Object.defineProperty(callClient, 'createView', {
         configurable: false,
-        value: (callId, participantId, stream, options) => __awaiter$B(void 0, void 0, void 0, function* () {
+        value: (callId, participantId, stream, options) => __awaiter$C(void 0, void 0, void 0, function* () {
             const participantIdKind = participantId ? communicationCommon.getIdentifierKind(participantId) : undefined;
             const result = yield createView(context, internalContext, callId, participantIdKind, stream, options);
             // We only need to declaratify the VideoStreamRendererView object for remote participants. Because the updateScalingMode only needs to be called on remote participant stream views.
@@ -6029,11 +6032,17 @@ const sendButtonStyle = react.mergeStyles({
 /**
  * @private
  */
-const sendIconStyle = react.mergeStyles({
-    width: '1.25rem',
-    height: '1.25rem',
-    margin: 'auto'
-});
+const sendIconStyle = (props) => {
+    const { theme, hasText, 
+    /* @conditional-compile-remove(file-sharing) */ hasFile, hasErrorMessage, customSendIconStyle } = props;
+    const hasNoContent = !hasText && /* @conditional-compile-remove(file-sharing) */ !hasFile;
+    return react.mergeStyles({
+        width: '1.25rem',
+        height: '1.25rem',
+        margin: 'auto',
+        color: hasErrorMessage || hasNoContent ? theme.palette.neutralTertiary : theme.palette.themePrimary
+    }, customSendIconStyle);
+};
 /**
  * @private
  */
@@ -6066,7 +6075,7 @@ const borderAndBoxShadowStyle = (props) => {
     const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;
     const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;
     const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;
-    return {
+    return react.mergeStyles({
         borderRadius: theme.effects.roundedCorner4,
         border: `${borderThickness}rem solid ${borderColor}`,
         // The border thickness of the sendbox wrapper changes on hover, to prevent the border thickness change causing the
@@ -6076,7 +6085,7 @@ const borderAndBoxShadowStyle = (props) => {
             border: `${borderActiveThickness}rem solid ${borderColorActive}`,
             margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`
         }
-    };
+    });
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -6544,57 +6553,6 @@ const textFieldStyle = {
         borderRadius: '0.25rem'
     }
 };
-/**
- * @private
- */
-const inputButtonStyle = react.mergeStyles({
-    color: 'grey',
-    margin: 'auto',
-    width: '1.0625rem',
-    height: '1.0625rem',
-    backgroundColor: 'transparent',
-    '&:hover': {
-        backgroundColor: 'transparent'
-    }
-});
-/**
- * @private
- */
-const inputButtonTooltipStyle = react.mergeStyles({
-    // The toolTip host container show be a flex box, so that alignItems: 'center' works for inside buttons
-    display: 'flex'
-});
-/**
- * @private
- */
-const iconWrapperStyle$1 = react.mergeStyles({
-    pointerEvents: 'none'
-});
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const isDarkThemed = (theme) => {
-    const themeBlackBrightness = getPerceptualBrightnessOfHexColor(theme.palette.black);
-    const themeWhiteBrightness = getPerceptualBrightnessOfHexColor(theme.palette.white);
-    if (Number.isNaN(themeBlackBrightness) || Number.isNaN(themeWhiteBrightness)) {
-        return false;
-    }
-    return themeBlackBrightness > themeWhiteBrightness;
-};
-const getPerceptualBrightnessOfHexColor = (hexColor) => {
-    // return NaN if hexColor is not a hex code
-    if (!/^#[0-9A-Fa-f]{6}$/i.test(hexColor)) {
-        return NaN;
-    }
-    const r = parseInt(hexColor.substring(1, 3), 16);
-    const g = parseInt(hexColor.substring(3, 5), 16);
-    const b = parseInt(hexColor.substring(5, 7), 16);
-    // arithmetic mean μ of the red, green, and blue color coordinates. Source: https://en.wikipedia.org/wiki/Brightness
-    return (r + g + b) / 3;
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -7660,7 +7618,7 @@ const _MentionPopover = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$A = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7846,7 +7804,7 @@ const TextFieldWithMention = (props) => {
         onSuggestionSelected,
         updateMentionSuggestions
     ]);
-    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$A(void 0, void 0, void 0, function* () {
+    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$B(void 0, void 0, void 0, function* () {
         var _a;
         let suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
         suggestions = suggestions.filter((suggestion) => suggestion.displayText.trim() !== '');
@@ -8023,7 +7981,7 @@ const TextFieldWithMention = (props) => {
             });
         }
     }, [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]);
-    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$A(void 0, void 0, void 0, function* () {
+    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$B(void 0, void 0, void 0, function* () {
         var _b;
         debouncedQueryUpdate.cancel();
         if (event.currentTarget === null) {
@@ -8317,14 +8275,71 @@ const InputBoxComponent = (props) => {
     return (React.createElement(react.Stack, { className: mergedRootStyle },
         React.createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
 };
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const isDarkThemed = (theme) => {
+    const themeBlackBrightness = getPerceptualBrightnessOfHexColor(theme.palette.black);
+    const themeWhiteBrightness = getPerceptualBrightnessOfHexColor(theme.palette.white);
+    if (Number.isNaN(themeBlackBrightness) || Number.isNaN(themeWhiteBrightness)) {
+        return false;
+    }
+    return themeBlackBrightness > themeWhiteBrightness;
+};
+const getPerceptualBrightnessOfHexColor = (hexColor) => {
+    // return NaN if hexColor is not a hex code
+    if (!/^#[0-9A-Fa-f]{6}$/i.test(hexColor)) {
+        return NaN;
+    }
+    const r = parseInt(hexColor.substring(1, 3), 16);
+    const g = parseInt(hexColor.substring(3, 5), 16);
+    const b = parseInt(hexColor.substring(5, 7), 16);
+    // arithmetic mean μ of the red, green, and blue color coordinates. Source: https://en.wikipedia.org/wiki/Brightness
+    return (r + g + b) / 3;
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const inputBoxButtonStyle = react.mergeStyles({
+    color: 'grey',
+    margin: 'auto',
+    width: '1.0625rem',
+    height: '1.0625rem',
+    backgroundColor: 'transparent',
+    '&:hover': {
+        backgroundColor: 'transparent'
+    }
+});
+/**
+ * @private
+ */
+const inputBoxButtonTooltipStyle = react.mergeStyles({
+    // The toolTip host container show be a flex box, so that alignItems: 'center' works for inside buttons
+    display: 'flex'
+});
+/**
+ * @private
+ */
+const iconWrapperStyle$1 = react.mergeStyles({
+    pointerEvents: 'none'
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 /**
  * @private
  */
 const InputBoxButton = (props) => {
     const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;
     const [isHover, setIsHover] = React.useState(false);
-    const mergedButtonStyle = react.mergeStyles(inputButtonStyle, className);
-    const theme = useTheme();
+    const mergedButtonStyle = react.mergeStyles(inputBoxButtonStyle, className);
+    const theme = react.useTheme();
     const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
     // Place callout with no gap between it and the button.
     const calloutProps = {
@@ -8332,7 +8347,7 @@ const InputBoxButton = (props) => {
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    return (React.createElement(react.TooltipHost, { hostClassName: inputButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
+    return (React.createElement(react.TooltipHost, { hostClassName: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
         React.createElement(react.IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
                 setIsHover(true);
             }, onMouseLeave: () => {
@@ -8568,8 +8583,26 @@ const _FileUploadCards = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const EMPTY_MESSAGE_REGEX = /^\s*$/;
+/* @conditional-compile-remove(file-sharing) */
+/**
+ * @private
+ */
+const hasIncompleteFileUploads = (activeFileUploads) => {
+    return !!((activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.length) &&
+        !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete));
+};
+/* @conditional-compile-remove(file-sharing) */
+/**
+ * @private
+ */
+const hasCompletedFileUploads = (activeFileUploads) => {
+    return !!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.find((file) => !file.error));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 const MAXIMUM_LENGTH_OF_MESSAGE$1 = 8000;
+const EMPTY_MESSAGE_REGEX = /^\s*$/;
 /**
  * Component for typing and sending messages.
  *
@@ -8581,15 +8614,17 @@ const MAXIMUM_LENGTH_OF_MESSAGE$1 = 8000;
 const SendBox = (props) => {
     const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus, 
     /* @conditional-compile-remove(mention) */
-    mentionLookupOptions } = props;
+    mentionLookupOptions, 
+    /* @conditional-compile-remove(file-sharing) */
+    activeFileUploads } = props;
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.sendBox;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const ids = useIdentifiers();
-    const activeFileUploads = activeFileUploadsTrampoline(props);
     const [textValue, setTextValue] = React.useState('');
     const [textValueOverflow, setTextValueOverflow] = React.useState(false);
     const sendTextFieldRef = React.useRef(null);
+    /* @conditional-compile-remove(file-sharing) */
     const [fileUploadsPendingError, setFileUploadsPendingError] = React.useState(undefined);
     const sendMessageOnClick = () => {
         var _a;
@@ -8598,16 +8633,18 @@ const SendBox = (props) => {
             return;
         }
         // Don't send message until all files have been uploaded successfully
+        /* @conditional-compile-remove(file-sharing) */
         setFileUploadsPendingError(undefined);
-        if (hasIncompleteFileUploads(props)) {
-            /* @conditional-compile-remove(file-sharing) */
+        /* @conditional-compile-remove(file-sharing) */
+        if (hasIncompleteFileUploads(activeFileUploads)) {
             setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });
             return;
         }
         const message = textValue;
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid file upload
-        if (!EMPTY_MESSAGE_REGEX.test(message) || hasFile(props)) {
+        if (!EMPTY_MESSAGE_REGEX.test(message) ||
+            /* @conditional-compile-remove(file-sharing) */ hasCompletedFileUploads(activeFileUploads)) {
             onSendMessage && onSendMessage(sanitizeText(message));
             setTextValue('');
         }
@@ -8629,18 +8666,28 @@ const SendBox = (props) => {
     const errorMessage = systemMessage !== null && systemMessage !== void 0 ? systemMessage : textTooLongMessage;
     const mergedSendButtonStyle = React.useMemo(() => react.mergeStyles(sendButtonStyle, styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer), [styles === null || styles === void 0 ? void 0 : styles.sendMessageIconContainer]);
     const mergedStyles = React.useMemo(() => react.concatStyleSets(styles), [styles]);
-    const hasText = !!textValue;
-    const hasTextOrFile = hasText || hasFile(props);
-    const mergedSendIconStyle = React.useMemo(() => react.mergeStyles(sendIconStyle, {
-        color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary
-    }, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon), [errorMessage, hasTextOrFile, theme, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
+    const mergedSendIconStyle = React.useMemo(() => sendIconStyle({
+        theme,
+        hasText: !!textValue,
+        /* @conditional-compile-remove(file-sharing) */ hasFile: hasCompletedFileUploads(activeFileUploads),
+        hasErrorMessage: !!errorMessage,
+        customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
+    }), [
+        theme,
+        textValue,
+        /* @conditional-compile-remove(file-sharing) */ activeFileUploads,
+        errorMessage,
+        styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
+    ]);
     const onRenderSendIcon = React.useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(react.Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
     // Ensure that errors are cleared when there are no files in sendBox
+    /* @conditional-compile-remove(file-sharing) */
     React.useEffect(() => {
         if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
             setFileUploadsPendingError(undefined);
         }
     }, [activeFileUploads]);
+    /* @conditional-compile-remove(file-sharing) */
     const sendBoxErrorsProps = React.useMemo(() => {
         var _a;
         return {
@@ -8662,13 +8709,13 @@ const SendBox = (props) => {
                 } })));
     }, [activeFileUploads, props, localeStrings]);
     return (React.createElement(react.Stack, { className: react.mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
-        ) },
+        ) }, /* @conditional-compile-remove(file-sharing) */
         React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
-        React.createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
+        React.createElement(react.Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
-            })) },
+            }) },
             React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
                     const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
                     if (!keyWasSendingMessage) {
@@ -8691,15 +8738,6 @@ const SendBox = (props) => {
 /**
  * @private
  */
-const hasIncompleteFileUploads = (props) => {
-    const activeFileUploads = activeFileUploadsTrampoline(props);
-    return !!((activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.length) &&
-        !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete));
-};
-const hasFile = (props) => {
-    const activeFileUploads = activeFileUploadsTrampoline(props);
-    return !!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.find((file) => !file.error));
-};
 const sanitizeText = (message) => {
     if (EMPTY_MESSAGE_REGEX.test(message)) {
         return '';
@@ -8708,10 +8746,6 @@ const sanitizeText = (message) => {
         return message;
     }
 };
-const activeFileUploadsTrampoline = (props) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return props.activeFileUploads;
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -8959,6 +8993,21 @@ const ImageGallery = (props) => {
         renderBodyWithLightDismiss()));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+react.mergeStyles({
+    border: 'none',
+    overflow: 'auto',
+    padding: '10px',
+    outline: 'none',
+    bottom: '0',
+    minHeight: '2.25rem',
+    maxHeight: '8.25rem'
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
@@ -10633,7 +10682,7 @@ const chatMessageActionMenuProps = (menuProps) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$A = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -10676,7 +10725,7 @@ const _FileDownloadCards = (props) => {
             fileCount: `${(_c = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.filter(isFileSharingAttachment).length) !== null && _c !== void 0 ? _c : 0}`
         });
     }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$A(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -10728,7 +10777,7 @@ const useLocaleStringsTrampoline = () => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -10829,7 +10878,7 @@ const MessageBubble = (props) => {
         return undefined;
     }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
     /* @conditional-compile-remove(image-gallery) */
-    const handleOnInlineImageClicked = React.useCallback((attachmentId) => __awaiter$y(void 0, void 0, void 0, function* () {
+    const handleOnInlineImageClicked = React.useCallback((attachmentId) => __awaiter$z(void 0, void 0, void 0, function* () {
         if (onInlineImageClicked === undefined) {
             return;
         }
@@ -10949,7 +10998,7 @@ const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -10982,7 +11031,7 @@ const ChatMessageComponent = (props) => {
         onSendMessage && onSendMessage(content !== undefined ? content : '');
     }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
     if (isEditing && message.messageType === 'chat') {
-        return (React.createElement(ChatMessageComponentAsEditBox, { message: message, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$x(void 0, void 0, void 0, function* () {
+        return (React.createElement(ChatMessageComponentAsEditBox, { message: message, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$y(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     message.messageId &&
                     (yield props.onUpdateMessage(message.messageId, text, metadata, options));
@@ -11293,7 +11342,7 @@ const ChatMessageComponentWrapper = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11463,7 +11512,7 @@ const MessageThreadWrapper = (props) => {
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const [inlineAttachments, setInlineAttachments] = React.useState({});
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const onFetchInlineAttachment = React.useCallback((attachments, messageId) => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onFetchInlineAttachment = React.useCallback((attachments, messageId) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!onFetchAttachments || attachments.length === 0) {
             return;
         }
@@ -11493,7 +11542,7 @@ const MessageThreadWrapper = (props) => {
     const previousMessagesRef = React.useRef([]);
     // an aria label for Narrator to notify when a message is deleted
     const [deletedMessageAriaLabel, setDeletedMessageAriaLabel] = React.useState(undefined);
-    const onDeleteMessageCallback = React.useCallback((messageId) => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onDeleteMessageCallback = React.useCallback((messageId) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!onDeleteMessage) {
             return;
         }
@@ -11573,7 +11622,7 @@ const MessageThreadWrapper = (props) => {
      */
     const clientHeight = (_a = chatThreadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$w(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -11624,7 +11673,7 @@ const MessageThreadWrapper = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$w(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -13745,7 +13794,7 @@ const localVideoTileContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -13762,7 +13811,7 @@ const LocalVideoCameraCycleButton = (props) => {
     const { cameras, selectedCamera, onSelectCamera, label, ariaDescription, size } = props;
     const theme = react.useTheme();
     const [waitForCamera, setWaitForCamera] = React.useState(false);
-    const onChangeCameraClick = React.useCallback((device) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onChangeCameraClick = React.useCallback((device) => __awaiter$w(void 0, void 0, void 0, function* () {
         // Throttle changing camera to prevent too many callbacks
         if (onSelectCamera) {
             setWaitForCamera(true);
@@ -16868,7 +16917,7 @@ const DevicesButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16906,7 +16955,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$v(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -16920,7 +16969,7 @@ const CameraButton = (props) => {
             }
         }
     }), [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);
-    const onChangeCameraClick = React.useCallback((device) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onChangeCameraClick = React.useCallback((device) => __awaiter$v(void 0, void 0, void 0, function* () {
         // Throttle changing camera to prevent too many callbacks
         if (onSelectCamera) {
             setWaitForCamera(true);
@@ -17091,7 +17140,7 @@ const lightThemeCallButtonStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -17132,7 +17181,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$u(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -18307,7 +18356,7 @@ const dtmfFrequencies = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -18351,10 +18400,10 @@ const DialpadButton = (props) => {
     const [buttonPressed, setButtonPressed] = React.useState(false);
     const dtmfToneSound = React.useRef(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));
     const useLongPressProps = React.useMemo(() => ({
-        onClick: () => __awaiter$s(void 0, void 0, void 0, function* () {
+        onClick: () => __awaiter$t(void 0, void 0, void 0, function* () {
             onClick(digit, index);
         }),
-        onLongPress: () => __awaiter$s(void 0, void 0, void 0, function* () {
+        onLongPress: () => __awaiter$t(void 0, void 0, void 0, function* () {
             onLongPress(digit, index);
         }),
         touchEventsOnly: isMobile
@@ -18403,7 +18452,7 @@ const DialpadButton = (props) => {
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
-    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false, disableDtmfPlayback, enableInputEditing } = props;
+    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false, disableDtmfPlayback, dialpadMode = 'dialer' } = props;
     const dtmfToneAudioContext = React.useRef(new AudioContext());
     const [plainTextValue, setPlainTextValue] = React.useState(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
     const plainTextValuePreviousRenderValue = React.useRef(plainTextValue);
@@ -18450,20 +18499,16 @@ const DialpadContainer = (props) => {
         setText(modifiedInput);
     };
     return (React.createElement(react.Stack, { className: react.mergeStyles(containerStyles$3(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer", horizontalAlign: 'center' },
-        React.createElement(react.TextField, { styles: react.concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : enableInputEditing ? formatPhoneNumber(plainTextValue) : plainTextValue, 
+        dialpadMode === 'dialer' && (React.createElement(react.TextField, { styles: react.concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: textFieldValue ? textFieldValue : formatPhoneNumber(plainTextValue), 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: (e) => {
-                if (enableInputEditing) {
-                    setText(e.target.value);
-                }
+                setText(e.target.value);
             }, onClick: (e) => {
-                if (!enableInputEditing) {
-                    e.preventDefault();
-                }
+                e.preventDefault();
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
                 return (React.createElement(React.Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React.createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'DialpadBackspace' } }))));
-            } }),
+            } })),
         React.createElement(react.FocusZone, null, dialPadButtonsDefault.map((rows, rowIndex) => {
             return (React.createElement(react.Stack, { horizontal: true, key: `row_${rowIndex}`, horizontalAlign: "stretch", tokens: { childrenGap: '1rem' } }, rows.map((button, columnIndex) => (React.createElement(DialpadButton, { key: `button_${columnIndex}`, 
                 /* row index = 0
@@ -19503,7 +19548,7 @@ const _spokenLanguageToCaptionLanguage = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -19546,7 +19591,7 @@ const _CaptionsSettingsModal = (props) => {
             onDismissCaptionsSettings();
         }
     }, [onDismissCaptionsSettings]);
-    const onConfirm = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onConfirm = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
         const spokenLanguageCode = selectedSpokenLanguage.key.toString();
         const captionLanguageCode = selectedCaptionLanguage.key.toString();
         if (isCaptionsFeatureActive) {
@@ -20634,7 +20679,7 @@ const findConditionalCompiledSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -20657,35 +20702,35 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$q(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$r(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, options) => __awaiter$q(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, options) => __awaiter$r(void 0, void 0, void 0, function* () {
             const updatedMetadata = (options === null || options === void 0 ? void 0 : options.metadata) ? Object.assign({}, options.metadata) : {};
             updatedMetadata.fileSharingMetadata = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachmentMetadata) || []);
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
-        onDeleteMessage: (messageId) => __awaiter$q(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$r(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$q(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$r(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$q(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$r(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$q(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$r(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$q(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$r(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$q(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$r(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
@@ -21594,7 +21639,7 @@ const chatStatefulLogger = logger.createClientLogger('communication-react:chat-s
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -21869,7 +21914,7 @@ let ChatContext$1 = class ChatContext {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$p(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$q(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -21981,7 +22026,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -22070,7 +22115,7 @@ class EventSubscriber {
         };
         // This is a temporary fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK.
         // Without the temporary fix, there are missing 'participant joined' and 'participant left' system messages in the chat thread.
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$o(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$p(this, void 0, void 0, function* () {
             var _a, e_1, _b, _c;
             try {
                 for (var _d = true, _e = __asyncValues$1(this.chatClient
@@ -22164,7 +22209,7 @@ class EventSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -22186,7 +22231,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$n(this, void 0, void 0, function* () {
+                return __awaiter$o(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -22201,7 +22246,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$n(this, void 0, void 0, function* () {
+                        return __awaiter$o(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -22288,7 +22333,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -22307,14 +22352,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$m(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$n(this, void 0, void 0, function* () {
                     const message = yield chatThreadClient.getMessage(...args);
                     this._context.setChatMessage(chatThreadClient.threadId, convertChatMessage(message));
                     return message;
                 }), 'ChatThreadClient.getMessage');
             }
             case 'sendMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$m(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$n(this, void 0, void 0, function* () {
                     var _a;
                     // Retry logic?
                     const [request, options] = args;
@@ -22355,7 +22400,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$m(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$n(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -22364,7 +22409,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$m(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$n(this, void 0, void 0, function* () {
                     // DeleteMessage is able to either delete local one(for failed message) or synced message
                     const [messageId] = args;
                     if (this._context.deleteLocalMessage(chatThreadClient.threadId, messageId)) {
@@ -22382,12 +22427,12 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'sendTypingNotification': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$m(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$n(this, void 0, void 0, function* () {
                     return yield chatThreadClient.sendTypingNotification(...args);
                 }), 'ChatThreadClient.sendTypingNotification');
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$m(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$n(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -22395,7 +22440,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$m(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$n(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateMessage(...args);
                     const [messageId, updateOption] = args;
                     this._context.updateChatMessageContent(chatThreadClient.threadId, messageId, updateOption === null || updateOption === void 0 ? void 0 : updateOption.content);
@@ -22403,7 +22448,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$m(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$n(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -22411,7 +22456,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$m(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$n(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -22449,7 +22494,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -22468,7 +22513,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$m(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -22481,7 +22526,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$m(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -22501,7 +22546,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$m(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -22512,7 +22557,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$l(this, void 0, void 0, function* () {
+                    return __awaiter$m(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -22706,7 +22751,9 @@ const COMPOSITE_ONLY_ICONS = {
     /* @conditional-compile-remove(gallery-layouts) */
     LargeGalleryLayout: React.createElement(reactIcons.Table20Regular, null),
     /* @conditional-compile-remove(control-bar-button-injection) */
-    DefaultCustomButton: React.createElement(reactIcons.Circle20Regular, null)
+    DefaultCustomButton: React.createElement(reactIcons.Circle20Regular, null),
+    /* @conditional-compile-remove(dtmf-dialer) */
+    DtmfDialpadButton: React.createElement(reactIcons.Dialpad20Regular, null)
 };
 /**
  * The default set of icons that are available to used in the Composites.
@@ -22739,7 +22786,7 @@ const CallCompositeIcon = (props) => (React.createElement(react.FontIcon, Object
  */
 const CallWithChatCompositeIcon = (props) => (React.createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",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",leavingCallTitle:"Leaving...",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",notInvitedToRoomDetails:"You are not able to join this room because you do not have an invite.",notInvitedToRoomTitle:"Not invited to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",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",roomNotFoundDetails:"The room ID provided could not be found.",roomNotFoundTitle:"Room not found",roomNotValidDetails:"This room is not valid at this current time.",roomNotValidTitle:"Room not valid",inviteToRoomRemovedDetails:"Your invite to join this room was removed.",inviteToRoomRemovedTitle:"Invite to room removed",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",dismissModalAriaLabel:"Local and remote picture and picture, press enter to return to call",callRejectedTitle:"The call could not be completed",callRejectedMoreDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutTitle:"The call could not be completed",callTimeoutDetails:"The person you are trying to reach is unavailable. Please try again later.",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"View",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic",moreButtonGalleryDefaultLayoutLabel:"Gallery view",moreButtonGalleryFocusedContentLayoutLabel:"Focus on content",moreButtonLargeGalleryDefaultLayoutLabel:"Large Gallery",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}},surveyQuestion:"How was your call today?",starSurveyHelperText:"How was the quality of the call?",starSurveyOneStarText:"The quality was bad.",starSurveyTwoStarText:"The quality was poor.",starSurveyThreeStarText:"The quality was good.",starSurveyFourStarText:"The quality was great.",starSurveyFiveStarText:"The quality was excellent.",surveyConfirmButtonLabel:"Send Feedback",starRatingAriaLabel:"Select {0} of {1} stars",surveyCancelButtonAriaLabel:"Cancel",tagsSurveyQuestion:"What could have been better?",tagsSurveyTextFieldDefaultText:"Other, please specify",tagsSurveyHelperText:"Check any issues you experienced",surveyTextboxDefaultText:"Other, please specify",surveyIssues:{overallRating:{callCannotJoin:"I could not join call",callCannotInvite:"I could not invite others into the call",hadToRejoin:"I had to rejoin the call",callEndedUnexpectedly:"Call ended for me unexpectedly",otherIssues:"I was having other issues with the call"},audioRating:{noLocalAudio:"The other side could not hear any sound",noRemoteAudio:"I could not hear any sound",echo:"I heard echos on the call",audioNoise:"I heard noise on the call",lowVolume:"Volume was low",audioStoppedUnexpectedly:"Audio stopped unexpectedly",distortedSpeech:"Audio was distorted",audioInterruption:"Audio was interrupted",otherIssues:"I was having other audio issues in this call"},videoRating:{noVideoReceived:"I could not see any video",noVideoSent:"Others could not see me",lowQuality:"Video quality was low",freezes:"Video frozen",stoppedUnexpectedly:"Video stopped unexpectedly",darkVideoReceived:"I can only see dark screens when others turn on their camera",audioVideoOutOfSync:"Audio and Video was out of sync",otherIssues:"I was having other video issues in this call"},screenshareRating:{noContentLocal:"Other people could not see my screenshare",noContentRemote:"I could not see other people's screenshare",cannotPresent:"I could not present my screen",lowQuality:"Screen share quality was low",freezes:"Screen share frozen",stoppedUnexpectedly:"Screen share stopped unexpectedly",largeDelay:"Screen share has a large delay",otherIssues:"I was having other screen share issues in this call"}},SurveyIssuesHeadingStrings:{overallRating:"Overall",audioRating:"Audio",videoRating:"Video",screenshareRating:"Presenting"}};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",moreDrawerGalleryOptionsMenuTitle:"Gallery options",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
+var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",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",leavingCallTitle:"Leaving...",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",notInvitedToRoomDetails:"You are not able to join this room because you do not have an invite.",notInvitedToRoomTitle:"Not invited to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",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",roomNotFoundDetails:"The room ID provided could not be found.",roomNotFoundTitle:"Room not found",roomNotValidDetails:"This room is not valid at this current time.",roomNotValidTitle:"Room not valid",inviteToRoomRemovedDetails:"Your invite to join this room was removed.",inviteToRoomRemovedTitle:"Invite to room removed",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",dismissModalAriaLabel:"Local and remote picture and picture, press enter to return to call",callRejectedTitle:"The call could not be completed",callRejectedMoreDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutTitle:"The call could not be completed",callTimeoutDetails:"The person you are trying to reach is unavailable. Please try again later.",dtmfDialerButtonLabel:"Dialpad",dtmfDialerButtonTooltipOn:"Show dialpad",dtmfDialerButtonTooltipOff:"Hide dialpad",dtmfDialerMoreButtonLabelOn:"Show dialpad",dtmfDialerMoreButtonLabelOff:"Hide dialpad",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"View",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic",moreButtonGalleryDefaultLayoutLabel:"Gallery view",moreButtonGalleryFocusedContentLayoutLabel:"Focus on content",moreButtonLargeGalleryDefaultLayoutLabel:"Large Gallery",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}},surveyQuestion:"How was your call today?",starSurveyHelperText:"How was the quality of the call?",starSurveyOneStarText:"The quality was bad.",starSurveyTwoStarText:"The quality was poor.",starSurveyThreeStarText:"The quality was good.",starSurveyFourStarText:"The quality was great.",starSurveyFiveStarText:"The quality was excellent.",surveyConfirmButtonLabel:"Send Feedback",starRatingAriaLabel:"Select {0} of {1} stars",surveyCancelButtonAriaLabel:"Cancel",tagsSurveyQuestion:"What could have been better?",tagsSurveyTextFieldDefaultText:"Other, please specify",tagsSurveyHelperText:"Check any issues you experienced",surveyTextboxDefaultText:"Other, please specify",surveyIssues:{overallRating:{callCannotJoin:"I could not join call",callCannotInvite:"I could not invite others into the call",hadToRejoin:"I had to rejoin the call",callEndedUnexpectedly:"Call ended for me unexpectedly",otherIssues:"I was having other issues with the call"},audioRating:{noLocalAudio:"The other side could not hear any sound",noRemoteAudio:"I could not hear any sound",echo:"I heard echos on the call",audioNoise:"I heard noise on the call",lowVolume:"Volume was low",audioStoppedUnexpectedly:"Audio stopped unexpectedly",distortedSpeech:"Audio was distorted",audioInterruption:"Audio was interrupted",otherIssues:"I was having other audio issues in this call"},videoRating:{noVideoReceived:"I could not see any video",noVideoSent:"Others could not see me",lowQuality:"Video quality was low",freezes:"Video frozen",stoppedUnexpectedly:"Video stopped unexpectedly",darkVideoReceived:"I can only see dark screens when others turn on their camera",audioVideoOutOfSync:"Audio and Video was out of sync",otherIssues:"I was having other video issues in this call"},screenshareRating:{noContentLocal:"Other people could not see my screenshare",noContentRemote:"I could not see other people's screenshare",cannotPresent:"I could not present my screen",lowQuality:"Screen share quality was low",freezes:"Screen share frozen",stoppedUnexpectedly:"Screen share stopped unexpectedly",largeDelay:"Screen share has a large delay",otherIssues:"I was having other screen share issues in this call"}},SurveyIssuesHeadingStrings:{overallRating:"Overall",audioRating:"Audio",videoRating:"Video",screenshareRating:"Presenting"}};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",moreDrawerGalleryOptionsMenuTitle:"Gallery options",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -22996,7 +23043,7 @@ const convertObservableFileUploadToFileUploadsUiState = (fileUploads) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -23131,9 +23178,9 @@ class AzureCommunicationChatAdapter {
         this.unsubscribeAllEvents();
     }
     fetchInitialData() {
-        return __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$l(this, void 0, void 0, function* () {
                 var _a, e_1, _b, _c;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -23169,8 +23216,8 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options = {}) {
-        return __awaiter$k(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$l(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertFileUploadsUiStateToMessageMetadata(this.context.getState().fileUploads));
                 /* @conditional-compile-remove(file-sharing) */
@@ -23187,43 +23234,43 @@ class AzureCommunicationChatAdapter {
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$k(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$l(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$k(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$l(this, void 0, void 0, function* () {
                 yield this.handlers.onTyping();
             }));
         });
     }
     removeParticipant(userId) {
-        return __awaiter$k(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$l(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$k(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$l(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$k(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$l(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, metadata, options) {
-        return __awaiter$k(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$l(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 const updatedOptions = options ? { attachmentMetadata: options.attachmentMetadata, metadata: metadata } : {};
                 /* @conditional-compile-remove(file-sharing) */
@@ -23232,8 +23279,8 @@ class AzureCommunicationChatAdapter {
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$k(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$l(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -23268,8 +23315,8 @@ class AzureCommunicationChatAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     downloadAttachments(options) {
-        return __awaiter$k(this, void 0, void 0, function* () {
-            return this.asyncTeeErrorToEventEmitter(() => __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
+            return this.asyncTeeErrorToEventEmitter(() => __awaiter$l(this, void 0, void 0, function* () {
                 if (this.credential === undefined) {
                     throw new ChatError('ChatThreadClient.getMessage', new Error('AccessToken is null'));
                 }
@@ -23283,9 +23330,9 @@ class AzureCommunicationChatAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     downloadAuthenticatedFile(accessToken, options) {
-        return __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
             function fetchWithAuthentication(url, token) {
-                return __awaiter$k(this, void 0, void 0, function* () {
+                return __awaiter$l(this, void 0, void 0, function* () {
                     const headers = new Headers();
                     headers.append('Authorization', `Bearer ${token}`);
                     try {
@@ -23377,7 +23424,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$k(this, void 0, void 0, function* () {
+        return __awaiter$l(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -23427,7 +23474,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$k(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$l(void 0, void 0, void 0, function* () {
     return _createAzureCommunicationChatAdapterInner(endpointUrl, userId, displayName, credential, threadId);
 });
 /**
@@ -23435,7 +23482,7 @@ const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, di
  *
  * @internal
  */
-const _createAzureCommunicationChatAdapterInner = (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') => __awaiter$k(void 0, void 0, void 0, function* () {
+const _createAzureCommunicationChatAdapterInner = (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') => __awaiter$l(void 0, void 0, void 0, function* () {
     if (!_isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
@@ -23504,7 +23551,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$k(void 0, void 0, void 0, function* () {
+        (() => __awaiter$l(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -23536,7 +23583,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$k(void 0, void 0, void 0, function* () {
+            (() => __awaiter$l(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -23560,7 +23607,7 @@ beforeDispose) => {
 function createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient, 
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 options) {
-    return __awaiter$k(this, void 0, void 0, function* () {
+    return __awaiter$l(this, void 0, void 0, function* () {
         return new AzureCommunicationChatAdapter(chatClient, chatThreadClient, 
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ options);
     });
@@ -23794,7 +23841,7 @@ const sendboxContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -23815,7 +23862,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$j(void 0, void 0, void 0, function* () {
+        (() => __awaiter$k(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -24232,7 +24279,7 @@ const FileDownloadErrorBar = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -24259,7 +24306,7 @@ const ChatScreen = (props) => {
     const theme = useTheme();
     React.useEffect(() => {
         // Initial data should be always fetched by the composite(or external caller) instead of the adapter
-        const fetchData = () => __awaiter$i(void 0, void 0, void 0, function* () {
+        const fetchData = () => __awaiter$j(void 0, void 0, void 0, function* () {
             // Fetch initial data for adapter
             yield adapter.fetchInitialData();
             // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
@@ -24299,7 +24346,7 @@ const ChatScreen = (props) => {
             setDownloadErrorMessage(errorMessage);
         } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$i(void 0, void 0, void 0, function* () {
+    const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$j(void 0, void 0, void 0, function* () {
         const entry = {};
         attachment.forEach((target) => {
             if (target.attachmentType === 'inlineImage' && target.previewUrl) {
@@ -24310,7 +24357,7 @@ const ChatScreen = (props) => {
         return blob;
     }), [adapter]);
     /* @conditional-compile-remove(image-gallery) */
-    const onInlineImageClicked = React.useCallback((attachmentId, messageId) => __awaiter$i(void 0, void 0, void 0, function* () {
+    const onInlineImageClicked = React.useCallback((attachmentId, messageId) => __awaiter$j(void 0, void 0, void 0, function* () {
         var _a, _b;
         const messages = (_a = messageThreadProps.messages) === null || _a === void 0 ? void 0 : _a.filter((message) => {
             return message.messageId === messageId;
@@ -24607,7 +24654,7 @@ const END_CALL_PAGES = [
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -24930,7 +24977,7 @@ const isDisabled$4 = (option) => {
 /**
  * @returns Permissions state for the camera.
  */
-const queryCameraPermissionFromPermissionsAPI = () => __awaiter$h(void 0, void 0, void 0, function* () {
+const queryCameraPermissionFromPermissionsAPI = () => __awaiter$i(void 0, void 0, void 0, function* () {
     try {
         return (yield navigator.permissions.query({ name: 'camera' })).state;
     }
@@ -24943,7 +24990,7 @@ const queryCameraPermissionFromPermissionsAPI = () => __awaiter$h(void 0, void 0
 /**
  * @returns Permissions state for the microphone.
  */
-const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$h(void 0, void 0, void 0, function* () {
+const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$i(void 0, void 0, void 0, function* () {
     try {
         return (yield navigator.permissions.query({ name: 'microphone' })).state;
     }
@@ -24960,7 +25007,7 @@ const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$h(void 0, vo
  * If permission API is not supported on this browser, permission state is set to unsupported.
  * @private
  */
-const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$h(void 0, void 0, void 0, function* () {
+const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$i(void 0, void 0, void 0, function* () {
     const [cameraResult, microphoneResult] = yield Promise.all([
         queryCameraPermissionFromPermissionsAPI(),
         queryMicrophonePermissionFromPermissionsAPI()
@@ -25038,7 +25085,7 @@ const getSelectedCameraFromAdapterState = (state) => state.devices.selectedCamer
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -25057,143 +25104,143 @@ _component) => {
     return createCompositeHandlers(useAdapter());
 };
 const createCompositeHandlers = memoizeOne((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onCreateLocalStreamView: (options) => __awaiter$h(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(undefined, options);
     }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onCreateRemoteStreamView: (userId, options) => __awaiter$h(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(userId, options);
     }),
-    onHangUp: (forEveryone) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onHangUp: (forEveryone) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.leaveCall(forEveryone);
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onToggleHold: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onToggleHold: () => __awaiter$h(void 0, void 0, void 0, function* () {
         var _a;
         return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold' ? yield adapter.resumeCall() : yield adapter.holdCall();
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onAddParticipant: (participant, options) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onAddParticipant: (participant, options) => __awaiter$h(void 0, void 0, void 0, function* () {
         return yield adapter.addParticipant(participant, options);
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onSendDtmfTone: (dtmfTone) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onSendDtmfTone: (dtmfTone) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.sendDtmfTone(dtmfTone);
     }),
-    onRemoveParticipant: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onRemoveParticipant: (userId) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
     /* @conditional-compile-remove(raise-hand) */
-    onRaiseHand: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onRaiseHand: () => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.raiseHand();
     }),
     /* @conditional-compile-remove(raise-hand) */
-    onLowerHand: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onLowerHand: () => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.lowerHand();
     }),
     /* @conditional-compile-remove(raise-hand) */
-    onToggleRaiseHand: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onToggleRaiseHand: () => __awaiter$h(void 0, void 0, void 0, function* () {
         var _b;
         ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.raiseHand.localParticipantRaisedHand)
             ? yield adapter.lowerHand()
             : yield adapter.raiseHand();
     }),
     /* @conditional-compile-remove(reaction) */
-    onReactionClicked: (reaction) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onReactionClicked: (reaction) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.onReactionClicked(reaction);
     }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onSelectCamera: (deviceInfo, options) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onSelectMicrophone: (deviceInfo) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.setMicrophone(deviceInfo);
     }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onSelectSpeaker: (deviceInfo) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.setSpeaker(deviceInfo);
     }),
     onStartCall: (participants, options) => {
         const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
         return adapter.startCall(rawIds, options);
     },
-    onStartScreenShare: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onStartScreenShare: () => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.startScreenShare();
     }),
-    onStopScreenShare: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onStopScreenShare: () => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.stopScreenShare();
     }),
-    onToggleCamera: (options) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onToggleCamera: (options) => __awaiter$h(void 0, void 0, void 0, function* () {
         isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
     }),
-    onToggleMicrophone: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onToggleMicrophone: () => __awaiter$h(void 0, void 0, void 0, function* () {
         var _c;
         return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isMuted) ? yield adapter.unmute() : yield adapter.mute();
     }),
-    onToggleScreenShare: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onToggleScreenShare: () => __awaiter$h(void 0, void 0, void 0, function* () {
         var _d;
         return ((_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.isScreenSharingOn)
             ? yield adapter.stopScreenShare()
             : yield adapter.startScreenShare();
     }),
-    onStartLocalVideo: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onStartLocalVideo: () => __awaiter$h(void 0, void 0, void 0, function* () {
         if (adapter.getState().call) {
             return adapter.startCamera();
         }
     }),
-    onDisposeLocalStreamView: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onDisposeLocalStreamView: () => __awaiter$h(void 0, void 0, void 0, function* () {
         return adapter.disposeLocalVideoStreamView();
     }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onDisposeRemoteStreamView: (userId) => __awaiter$h(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView(userId);
     }),
-    onDisposeRemoteScreenShareStreamView: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onDisposeRemoteScreenShareStreamView: (userId) => __awaiter$h(void 0, void 0, void 0, function* () {
         return adapter.disposeScreenShareStreamView(userId);
     }),
-    onDisposeRemoteVideoStreamView: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onDisposeRemoteVideoStreamView: (userId) => __awaiter$h(void 0, void 0, void 0, function* () {
         return adapter.disposeRemoteVideoStreamView(userId);
     }),
     /* @conditional-compile-remove(call-readiness) */
-    askDevicePermission: (constrain) => __awaiter$g(void 0, void 0, void 0, function* () {
+    askDevicePermission: (constrain) => __awaiter$h(void 0, void 0, void 0, function* () {
         return adapter.askDevicePermission(constrain);
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onRemoveVideoBackgroundEffects: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onRemoveVideoBackgroundEffects: () => __awaiter$h(void 0, void 0, void 0, function* () {
         return yield adapter.stopVideoBackgroundEffects();
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$h(void 0, void 0, void 0, function* () {
         const blurConfig = Object.assign({ effectName: 'blur' }, backgroundBlurConfig);
         return yield adapter.startVideoBackgroundEffect(blurConfig);
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onReplaceVideoBackground: (backgroundReplacementConfig) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onReplaceVideoBackground: (backgroundReplacementConfig) => __awaiter$h(void 0, void 0, void 0, function* () {
         const replacementConfig = Object.assign({ effectName: 'replacement' }, backgroundReplacementConfig);
         return yield adapter.startVideoBackgroundEffect(replacementConfig);
     }),
     /* @conditional-compile-remove(close-captions) */
-    onStartCaptions: (options) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onStartCaptions: (options) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.startCaptions(options);
     }),
     /* @conditional-compile-remove(close-captions) */
-    onStopCaptions: () => __awaiter$g(void 0, void 0, void 0, function* () {
+    onStopCaptions: () => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.stopCaptions();
     }),
     /* @conditional-compile-remove(close-captions) */
-    onSetSpokenLanguage: (language) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onSetSpokenLanguage: (language) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.setSpokenLanguage(language);
     }),
     /* @conditional-compile-remove(close-captions) */
-    onSetCaptionLanguage: (language) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onSetCaptionLanguage: (language) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.setCaptionLanguage(language);
     }),
     /* @conditional-compile-remove(end-of-call-survey) */
-    onSubmitSurvey: (survey) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onSubmitSurvey: (survey) => __awaiter$h(void 0, void 0, void 0, function* () {
         return yield adapter.submitSurvey(survey);
     }),
     /* @conditional-compile-remove(spotlight) */
-    onStartSpotlight: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onStartSpotlight: (userId) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.startSpotlight(userId);
     }),
     /* @conditional-compile-remove(spotlight) */
-    onStopSpotlight: (userId) => __awaiter$g(void 0, void 0, void 0, function* () {
+    onStopSpotlight: (userId) => __awaiter$h(void 0, void 0, void 0, function* () {
         yield adapter.stopSpotlight(userId);
     })
 }));
@@ -25327,17 +25374,17 @@ const concatButtonBaseStyles = (...styles) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const icon$2 = () => React.createElement(reactIcons.MoreHorizontal20Filled, { key: 'chatOnIconKey', primaryFill: "currentColor" });
+const icon$3 = () => React.createElement(reactIcons.MoreHorizontal20Filled, { key: 'chatOnIconKey', primaryFill: "currentColor" });
 /**
  * @private
  */
 const MoreButton = (props) => {
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: props.showLabel, onRenderOnIcon: icon$2, onRenderOffIcon: icon$2, onClick: props.onClick, "data-ui-id": props['data-ui-id'] })));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: props.showLabel, onRenderOnIcon: icon$3, onRenderOffIcon: icon$3, onClick: props.onClick, "data-ui-id": props['data-ui-id'] })));
 };
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -25365,7 +25412,7 @@ const CaptionsBannerMoreButton = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const moreButtonContextualMenuItems = [];
     /* @conditional-compile-remove(close-captions) */
-    const startCaptions = React.useCallback(() => __awaiter$f(void 0, void 0, void 0, function* () {
+    const startCaptions = React.useCallback(() => __awaiter$g(void 0, void 0, void 0, function* () {
         yield startCaptionsButtonHandlers.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
@@ -25712,6 +25759,10 @@ const getLatestCapabilitiesChangedInfo = (state) => {
     var _a, _b;
     return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.latestCapabilitiesChangeInfo;
 };
+/**
+ * @private
+ */
+const getTargetCallees = (state) => state.targetCallees;
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -25805,7 +25856,7 @@ const isDisabled$2 = (option) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const icon$1 = () => React.createElement(CallCompositeIcon, { iconName: 'ControlButtonParticipants' });
+const icon$2 = () => React.createElement(CallCompositeIcon, { iconName: 'ControlButtonParticipants' });
 /**
  * @private
  */
@@ -25821,7 +25872,7 @@ const People = (props) => {
             }
         }, (_a = props.styles) !== null && _a !== void 0 ? _a : {}, controlButtonBaseStyle);
     }, [props.styles, theme.palette.neutralLight]);
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { "data-ui-id": "call-composite-participants-button", strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon$1, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon$1, onClick: onClick, styles: styles })));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { "data-ui-id": "call-composite-participants-button", strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon$2, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon$2, onClick: onClick, styles: styles })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -26438,7 +26489,7 @@ const isRoomsCallTrampoline = (adapter) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const icon = () => React.createElement(CallCompositeIcon, { iconName: 'ControlBarPeopleButton' });
+const icon$1 = () => React.createElement(CallCompositeIcon, { iconName: 'ControlBarPeopleButton' });
 /**
  * @private
  */
@@ -26453,7 +26504,7 @@ const PeopleButton = (props) => {
             }
         }, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.styles, theme.palette.neutralLight]);
-    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: onClick, styles: styles })));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon$1, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon$1, onClick: onClick, styles: styles })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -26472,7 +26523,152 @@ const useCallWithChatCompositeStrings = () => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+/**
+ * @private
+ */
+const mediaGallerySelector = reselect__namespace.createSelector([getLocalVideoStreams], (localVideoStreams) => {
+    var _a, _b;
+    return {
+        isVideoStreamOn: !!((_b = (_a = localVideoStreams === null || localVideoStreams === void 0 ? void 0 : localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.target)
+    };
+});
+/**
+ * Custom selector for this hook to retrieve all the participants that are currently
+ * connected to the call.
+ */
+const getRemoteParticipantsConnectedSelector = reselect__namespace.createSelector([getRemoteParticipants], (remoteParticipants) => {
+    const participants = Object.values(remoteParticipants !== null && remoteParticipants !== void 0 ? remoteParticipants : {});
+    return participants.filter((p) => p.state === 'Connected');
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * sets the announcement string whenever a Participant comes or goes from a call to be
+ * used by the system narrator.
+ *
+ * @returns string to be used by the narrator and Announcer component
+ *
+ * @internal
+ */
+const useParticipantChangedAnnouncement = () => {
+    const locale = useLocale().strings.call;
+    const strings = React.useMemo(() => {
+        return {
+            participantJoinedNoticeString: locale.participantJoinedNoticeString,
+            twoParticipantJoinedNoticeString: locale.twoParticipantJoinedNoticeString,
+            threeParticipantJoinedNoticeString: locale.threeParticipantJoinedNoticeString,
+            participantLeftNoticeString: locale.participantLeftNoticeString,
+            twoParticipantLeftNoticeString: locale.twoParticipantLeftNoticeString,
+            threeParticipantLeftNoticeString: locale.threeParticipantLeftNoticeString,
+            unnamedParticipantString: locale.unnamedParticipantString,
+            manyParticipantsJoined: locale.manyParticipantsJoined,
+            manyParticipantsLeft: locale.manyParticipantsLeft,
+            manyUnnamedParticipantsJoined: locale.manyUnnamedParticipantsJoined,
+            manyUnnamedParticipantsLeft: locale.manyUnnamedParticipantsLeft
+        };
+    }, [locale]);
+    const [announcerString, setAnnouncerString] = React.useState('');
+    const currentParticipants = useSelector$1(getRemoteParticipantsConnectedSelector);
+    /**
+     * We want to use a useRef here since we want to not fire this hook based on the previous participants
+     * this allows this value to be used in the hook without being in the dependency array.
+     *
+     * Note: By definition if this hook is used in another component it is not pure anymore.
+     */
+    const previousParticipants = React.useRef(currentParticipants);
+    const resetAnnoucement = (string) => {
+        setAnnouncerString(string);
+    };
+    React.useMemo(() => {
+        const currentIds = currentParticipants.map((p) => toFlatCommunicationIdentifier(p.identifier));
+        const previousIds = previousParticipants.current.map((p) => toFlatCommunicationIdentifier(p.identifier));
+        const whoJoined = currentParticipants.filter((p) => !previousIds.includes(toFlatCommunicationIdentifier(p.identifier)));
+        const whoLeft = previousParticipants.current.filter((p) => !currentIds.includes(toFlatCommunicationIdentifier(p.identifier)));
+        if (whoJoined.length > 0) {
+            resetAnnoucement(createAnnouncementString('joined', whoJoined, strings));
+        }
+        if (whoLeft.length > 0) {
+            resetAnnoucement(createAnnouncementString('left', whoLeft, strings));
+        }
+        // Update cached value at the end.
+        previousParticipants.current = currentParticipants;
+    }, [currentParticipants, strings]);
+    return announcerString;
+};
+/**
+ * Generates the announcement string for when a participant joins or leaves a call.
+ */
+const createAnnouncementString = (direction, participants, strings) => {
+    var _a, _b, _c;
+    /**
+     * If there are no participants return empty string.
+     */
+    if (participants.length === 0) {
+        return '';
+    }
+    /**
+     * Filter participants into two arrays to put all the unnamed participants at the back of the
+     * names being announced.
+     */
+    const unnamedParticipants = participants.filter((p) => !p.displayName);
+    const namedParicipants = participants.filter((p) => p.displayName);
+    const sortedParticipants = namedParicipants.concat(unnamedParticipants);
+    /**
+     * if there are only unnamed participants present in the array announce a special unnamed participants
+     * only string.
+     */
+    if (sortedParticipants.filter((p) => p.displayName).length === 0 && sortedParticipants.length > 1) {
+        return _formatString(direction === 'joined' ? strings.manyUnnamedParticipantsJoined : strings.manyUnnamedParticipantsLeft, {
+            numOfParticipants: (sortedParticipants.length - 1).toString()
+        });
+    }
+    const participantNames = sortedParticipants.map((p) => { var _a; return (_a = p.displayName) !== null && _a !== void 0 ? _a : strings.unnamedParticipantString; });
+    switch (sortedParticipants.length) {
+        case 1:
+            return _formatString(direction === 'joined' ? strings.participantJoinedNoticeString : strings.participantLeftNoticeString, { displayName: participantNames[0] });
+        case 2:
+            return _formatString(direction === 'joined' ? strings.twoParticipantJoinedNoticeString : strings.twoParticipantLeftNoticeString, {
+                displayName1: participantNames[0],
+                displayName2: participantNames[1]
+            });
+        case 3:
+            return _formatString(direction === 'joined' ? strings.threeParticipantJoinedNoticeString : strings.threeParticipantLeftNoticeString, {
+                displayName1: participantNames[0],
+                displayName2: participantNames[1],
+                displayName3: participantNames[2]
+            });
+    }
+    /**
+     * If we have more than 3 participants joining we need to do something more to announce them
+     * appropriately.
+     *
+     * We don't want to announce every name when more than 3 participants join at once so
+     * we parse out the first 3 names we have and announce those with the number of others.
+     */
+    const numberOfExtraParticipants = sortedParticipants.length - 3;
+    return _formatString(direction === 'joined' ? strings.manyParticipantsJoined : strings.manyParticipantsLeft, {
+        displayName1: (_a = sortedParticipants[0].displayName) !== null && _a !== void 0 ? _a : strings.unnamedParticipantString,
+        displayName2: (_b = sortedParticipants[1].displayName) !== null && _b !== void 0 ? _b : strings.unnamedParticipantString,
+        displayName3: (_c = sortedParticipants[2].displayName) !== null && _c !== void 0 ? _c : strings.unnamedParticipantString,
+        numOfParticipants: numberOfExtraParticipants.toString()
+    });
+};
+/* @conditional-compile-remove(dtmf-dialer) */
+/**
+ * determines if the media gallery should be replaced by the dtmf dialer
+ * @param callees Target callees to determine if the dtmf dialer should be shown
+ * @returns whether the dialer should be the gallery content or not
+ */
+const showDtmfDialer = (callees) => {
+    return !!((callees === null || callees === void 0 ? void 0 : callees.filter((callee) => {
+        return communicationCommon.isPhoneNumberIdentifier(callee) || communicationCommon.isMicrosoftTeamsAppIdentifier(callee);
+    })) && callees.length > 0);
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -26486,7 +26682,7 @@ var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 const DesktopMoreButton = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const localeStrings = useLocale();
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -26496,7 +26692,7 @@ const DesktopMoreButton = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const startCaptionsButtonHandlers = useHandlers();
     /* @conditional-compile-remove(close-captions) */
-    const startCaptions = React.useCallback(() => __awaiter$e(void 0, void 0, void 0, function* () {
+    const startCaptions = React.useCallback(() => __awaiter$f(void 0, void 0, void 0, function* () {
         yield startCaptionsButtonHandlers.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
@@ -26507,6 +26703,12 @@ const DesktopMoreButton = (props) => {
     const [focusedContentOn, setFocusedContentOn] = React.useState(false);
     /* @conditional-compile-remove(gallery-layouts) */
     const [previousLayout, setPreviousLayout] = React.useState((_a = props.userSetGalleryLayout) !== null && _a !== void 0 ? _a : 'floatingLocalVideo');
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const callees = useSelector$1(getTargetCallees);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const allowDtmfDialer = showDtmfDialer(callees);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const [dtmfDialerChecked, setDtmfDialerChecked] = React.useState((_b = props.dtmfDialerPresent) !== null && _b !== void 0 ? _b : false);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const moreButtonStrings = React.useMemo(() => ({
         label: localeStrings.strings.call.moreButtonCallingLabel,
@@ -26598,20 +26800,30 @@ const DesktopMoreButton = (props) => {
             });
         }
     }
-    /*@conditional-compile-remove(PSTN-calls) */
-    if (props.onClickShowDialpad) {
-        moreButtonContextualMenuItems.push({
-            key: 'showDialpadKey',
-            text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,
-            onClick: () => {
-                props.onClickShowDialpad && props.onClickShowDialpad();
-            },
-            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
-            itemProps: {
-                styles: buttonFlyoutIncreasedSizeStyles
-            },
-            disabled: props.disableButtonsForHoldScreen
-        });
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const dtmfDialerScreenOption = {
+        key: 'dtmfDialerScreenKey',
+        itemProps: {
+            styles: buttonFlyoutIncreasedSizeStyles
+        },
+        text: !dtmfDialerChecked
+            ? localeStrings.strings.call.dtmfDialerMoreButtonLabelOn
+            : localeStrings.strings.call.dtmfDialerMoreButtonLabelOff,
+        onClick: () => {
+            props.onSetDialpadPage && props.onSetDialpadPage();
+            setDtmfDialerChecked(!dtmfDialerChecked);
+        },
+        iconProps: {
+            iconName: 'DtmfDialpadButton',
+            styles: { root: { lineHeight: 0 } }
+        }
+    };
+    /* @conditional-compile-remove(dtmf-dialer) */
+    /**
+     * Only render the dtmf dialer if the dialpad for PSTN calls is not present
+     */
+    if (props.onSetDialpadPage && allowDtmfDialer) {
+        moreButtonContextualMenuItems.push(dtmfDialerScreenOption);
     }
     /* @conditional-compile-remove(gallery-layouts) */
     if (props.onUserSetOverflowGalleryPositionChange) {
@@ -26758,11 +26970,11 @@ const DesktopMoreButton = (props) => {
             }
         };
         /* @conditional-compile-remove(large-gallery) */
-        (_c = (_b = galleryOptions.subMenuProps) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.push(largeGalleryOption);
+        (_d = (_c = galleryOptions.subMenuProps) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d.push(largeGalleryOption);
         /* @conditional-compile-remove(gallery-layout-composite) */
-        (_e = (_d = galleryOptions.subMenuProps) === null || _d === void 0 ? void 0 : _d.items) === null || _e === void 0 ? void 0 : _e.push(galleryOption);
+        (_f = (_e = galleryOptions.subMenuProps) === null || _e === void 0 ? void 0 : _e.items) === null || _f === void 0 ? void 0 : _f.push(galleryOption);
         /* @conditional-compile-remove(overflow-top-composite) */
-        (_g = (_f = galleryOptions.subMenuProps) === null || _f === void 0 ? void 0 : _f.items) === null || _g === void 0 ? void 0 : _g.push(overflowGalleryOption);
+        (_h = (_g = galleryOptions.subMenuProps) === null || _g === void 0 ? void 0 : _g.items) === null || _h === void 0 ? void 0 : _h.push(overflowGalleryOption);
         /* @conditional-compile-remove(gallery-layouts) */
         moreButtonContextualMenuItems.push(galleryOptions);
     }
@@ -26835,6 +27047,38 @@ const invisibleHiddenFocusStartPoint = {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(dtmf-dialer) */
+/* @conditional-compile-remove(dtmf-dialer) */
+const icon = () => React.createElement(CallCompositeIcon, { iconName: 'DtmfDialpadButton' });
+/* @conditional-compile-remove(dtmf-dialer) */
+/**
+ * Button for showing and hiding the dtmf dialer in the Call composite.
+ * To be used only if the more button control is disabled. This button will replace
+ * it in the control bar unless it is also disabled.
+ * @private
+ */
+const DtmfDialpadButton = (props) => {
+    const { strings, onRenderOnIcon, onRenderOffIcon, onClick, displayType } = props;
+    const theme = react.useTheme();
+    const locale = useLocale();
+    const dialpadButtonStrings = {
+        label: locale.strings.call.dtmfDialerButtonLabel,
+        tooltipOnContent: locale.strings.call.dtmfDialerButtonTooltipOn,
+        tooltipOffContent: locale.strings.call.dtmfDialerButtonTooltipOff
+    };
+    const styles = React.useMemo(() => {
+        var _a;
+        return react.concatStyleSets({
+            rootChecked: {
+                background: theme.palette.neutralLight
+            }
+        }, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
+    }, [props.styles, theme.palette.neutralLight]);
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings ? strings : dialpadButtonStrings, showLabel: displayType !== 'compact', labelKey: 'dtmfDialpadButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: onClick, styles: styles })));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) => {
@@ -26978,6 +27222,12 @@ const CommonCallControlBar = (props) => {
                                         /* @conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled$4(options.microphoneButton) })),
+                                    /* @conditional-compile-remove(dtmf-dialer) */ showDtmfDialerButton(options) &&
+                                        props.onSetDialpadPage !== undefined && (React.createElement(DtmfDialpadButton, { styles: commonButtonStyles, displayType: options.displayType, onClick: () => {
+                                            if (props.onSetDialpadPage !== undefined) {
+                                                props.onSetDialpadPage();
+                                            }
+                                        } })),
                                     screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled$4(options.screenShareButton) })), (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
@@ -27001,7 +27251,11 @@ const CommonCallControlBar = (props) => {
                                         /* @conditional-compile-remove(gallery-layouts) */
                                         onUserSetGalleryLayout: props.onUserSetGalleryLayout, 
                                         /* @conditional-compile-remove(gallery-layouts) */
-                                        userSetGalleryLayout: props.userSetGalleryLayout })),
+                                        userSetGalleryLayout: props.userSetGalleryLayout, 
+                                        /* @conditional-compile-remove(dtmf-dialer) */
+                                        dtmfDialerPresent: props.dtmfDialerPresent, 
+                                        /* @conditional-compile-remove(dtmf-dialer) */
+                                        onSetDialpadPage: props.onSetDialpadPage })),
                                     React.createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles }))))))),
             !props.mobileView && sideButtonsPresent && (React.createElement(react.Stack.Item, null,
                 React.createElement("div", { ref: sidepaneControlsRef },
@@ -27116,6 +27370,15 @@ const getDesktopEndCallButtonStyles = (theme) => {
     return react.concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);
 };
 const isEnabled$1 = (option) => option !== false;
+/* @conditional-compile-remove(dtmf-dialer) */
+const showDtmfDialerButton = (options) => {
+    if (options.moreButton === false && options.dtmfDialerButton !== false) {
+        return true;
+    }
+    else {
+        return false;
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -27250,7 +27513,7 @@ const themedToggleButtonStyle = (theme, checked) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -27489,7 +27752,7 @@ const MoreDrawer = (props) => {
         ? captionSettingsProp.currentCaptionLanguage
         : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
     /* @conditional-compile-remove(close-captions) */
-    const onToggleChange = React.useCallback(() => __awaiter$d(void 0, void 0, void 0, function* () {
+    const onToggleChange = React.useCallback(() => __awaiter$e(void 0, void 0, void 0, function* () {
         if (!captionSettingsProp.isCaptionsFeatureActive) {
             yield startCaptionsButtonHandlers.onStartCaptions({
                 spokenLanguage: currentSpokenLanguage
@@ -28228,7 +28491,7 @@ const AddPeopleButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -28250,11 +28513,11 @@ const PeoplePaneContent = (props) => {
         return localeStrings.strings.call;
     };
     const strings = getStrings();
-    const removeParticipantFromCall = React.useCallback((participantId) => __awaiter$c(void 0, void 0, void 0, function* () {
+    const removeParticipantFromCall = React.useCallback((participantId) => __awaiter$d(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(participantId);
     }), [adapter]);
     /* @conditional-compile-remove(PSTN-calls) */
-    const addParticipantToCall = React.useCallback((participant, options) => __awaiter$c(void 0, void 0, void 0, function* () {
+    const addParticipantToCall = React.useCallback((participant, options) => __awaiter$d(void 0, void 0, void 0, function* () {
         yield adapter.addParticipant(participant, options);
     }), [adapter]);
     /* @conditional-compile-remove(PSTN-calls) */
@@ -28281,7 +28544,7 @@ const PeoplePaneContent = (props) => {
         setDrawerMenuItems
     ]);
     const participantListProps = React.useMemo(() => {
-        const onRemoveAParticipant = (participantId) => __awaiter$c(void 0, void 0, void 0, function* () { return removeParticipantFromCall(participantId); });
+        const onRemoveAParticipant = (participantId) => __awaiter$d(void 0, void 0, void 0, function* () { return removeParticipantFromCall(participantId); });
         return Object.assign(Object.assign({}, participantListDefaultProps), { 
             // Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked
             onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant, 
@@ -28422,7 +28685,7 @@ const localVideoSelector = reselect__namespace.createSelector([callStatusSelecto
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$b = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -28491,7 +28754,7 @@ const VideoEffectsPaneContent = (props) => {
         return videoEffects;
     }, [strings, adapter]);
     /* @conditional-compile-remove(video-background-effects) */
-    const onEffectChange = React.useCallback((effectKey) => __awaiter$b(void 0, void 0, void 0, function* () {
+    const onEffectChange = React.useCallback((effectKey) => __awaiter$c(void 0, void 0, void 0, function* () {
         if (effectKey === 'blur') {
             const blurEffect = {
                 effectName: effectKey
@@ -29227,7 +29490,11 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(gallery-layouts) */
                     onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, 
                     /* @conditional-compile-remove(gallery-layouts) */
-                    userSetGalleryLayout: props.userSetGalleryLayout, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
+                    userSetGalleryLayout: props.userSetGalleryLayout, 
+                    /* @conditional-compile-remove(dtmf-dialer) */
+                    onSetDialpadPage: props.onSetDialpadPage, 
+                    /* @conditional-compile-remove(dtmf-dialer) */
+                    dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
                 ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */
@@ -29301,140 +29568,6 @@ const localVideoCameraCycleButtonSelector = reselect.createSelector([getDeviceMa
     };
 });
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const mediaGallerySelector = reselect__namespace.createSelector([getLocalVideoStreams], (localVideoStreams) => {
-    var _a, _b;
-    return {
-        isVideoStreamOn: !!((_b = (_a = localVideoStreams === null || localVideoStreams === void 0 ? void 0 : localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.target)
-    };
-});
-/**
- * Custom selector for this hook to retrieve all the participants that are currently
- * connected to the call.
- */
-const getRemoteParticipantsConnectedSelector = reselect__namespace.createSelector([getRemoteParticipants], (remoteParticipants) => {
-    const participants = Object.values(remoteParticipants !== null && remoteParticipants !== void 0 ? remoteParticipants : {});
-    return participants.filter((p) => p.state === 'Connected');
-});
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * sets the announcement string whenever a Participant comes or goes from a call to be
- * used by the system narrator.
- *
- * @returns string to be used by the narrator and Announcer component
- *
- * @internal
- */
-const useParticipantChangedAnnouncement = () => {
-    const locale = useLocale().strings.call;
-    const strings = React.useMemo(() => {
-        return {
-            participantJoinedNoticeString: locale.participantJoinedNoticeString,
-            twoParticipantJoinedNoticeString: locale.twoParticipantJoinedNoticeString,
-            threeParticipantJoinedNoticeString: locale.threeParticipantJoinedNoticeString,
-            participantLeftNoticeString: locale.participantLeftNoticeString,
-            twoParticipantLeftNoticeString: locale.twoParticipantLeftNoticeString,
-            threeParticipantLeftNoticeString: locale.threeParticipantLeftNoticeString,
-            unnamedParticipantString: locale.unnamedParticipantString,
-            manyParticipantsJoined: locale.manyParticipantsJoined,
-            manyParticipantsLeft: locale.manyParticipantsLeft,
-            manyUnnamedParticipantsJoined: locale.manyUnnamedParticipantsJoined,
-            manyUnnamedParticipantsLeft: locale.manyUnnamedParticipantsLeft
-        };
-    }, [locale]);
-    const [announcerString, setAnnouncerString] = React.useState('');
-    const currentParticipants = useSelector$1(getRemoteParticipantsConnectedSelector);
-    /**
-     * We want to use a useRef here since we want to not fire this hook based on the previous participants
-     * this allows this value to be used in the hook without being in the dependency array.
-     *
-     * Note: By definition if this hook is used in another component it is not pure anymore.
-     */
-    const previousParticipants = React.useRef(currentParticipants);
-    const resetAnnoucement = (string) => {
-        setAnnouncerString(string);
-    };
-    React.useMemo(() => {
-        const currentIds = currentParticipants.map((p) => toFlatCommunicationIdentifier(p.identifier));
-        const previousIds = previousParticipants.current.map((p) => toFlatCommunicationIdentifier(p.identifier));
-        const whoJoined = currentParticipants.filter((p) => !previousIds.includes(toFlatCommunicationIdentifier(p.identifier)));
-        const whoLeft = previousParticipants.current.filter((p) => !currentIds.includes(toFlatCommunicationIdentifier(p.identifier)));
-        if (whoJoined.length > 0) {
-            resetAnnoucement(createAnnouncementString('joined', whoJoined, strings));
-        }
-        if (whoLeft.length > 0) {
-            resetAnnoucement(createAnnouncementString('left', whoLeft, strings));
-        }
-        // Update cached value at the end.
-        previousParticipants.current = currentParticipants;
-    }, [currentParticipants, strings]);
-    return announcerString;
-};
-/**
- * Generates the announcement string for when a participant joins or leaves a call.
- */
-const createAnnouncementString = (direction, participants, strings) => {
-    var _a, _b, _c;
-    /**
-     * If there are no participants return empty string.
-     */
-    if (participants.length === 0) {
-        return '';
-    }
-    /**
-     * Filter participants into two arrays to put all the unnamed participants at the back of the
-     * names being announced.
-     */
-    const unnamedParticipants = participants.filter((p) => !p.displayName);
-    const namedParicipants = participants.filter((p) => p.displayName);
-    const sortedParticipants = namedParicipants.concat(unnamedParticipants);
-    /**
-     * if there are only unnamed participants present in the array announce a special unnamed participants
-     * only string.
-     */
-    if (sortedParticipants.filter((p) => p.displayName).length === 0 && sortedParticipants.length > 1) {
-        return _formatString(direction === 'joined' ? strings.manyUnnamedParticipantsJoined : strings.manyUnnamedParticipantsLeft, {
-            numOfParticipants: (sortedParticipants.length - 1).toString()
-        });
-    }
-    const participantNames = sortedParticipants.map((p) => { var _a; return (_a = p.displayName) !== null && _a !== void 0 ? _a : strings.unnamedParticipantString; });
-    switch (sortedParticipants.length) {
-        case 1:
-            return _formatString(direction === 'joined' ? strings.participantJoinedNoticeString : strings.participantLeftNoticeString, { displayName: participantNames[0] });
-        case 2:
-            return _formatString(direction === 'joined' ? strings.twoParticipantJoinedNoticeString : strings.twoParticipantLeftNoticeString, {
-                displayName1: participantNames[0],
-                displayName2: participantNames[1]
-            });
-        case 3:
-            return _formatString(direction === 'joined' ? strings.threeParticipantJoinedNoticeString : strings.threeParticipantLeftNoticeString, {
-                displayName1: participantNames[0],
-                displayName2: participantNames[1],
-                displayName3: participantNames[2]
-            });
-    }
-    /**
-     * If we have more than 3 participants joining we need to do something more to announce them
-     * appropriately.
-     *
-     * We don't want to announce every name when more than 3 participants join at once so
-     * we parse out the first 3 names we have and announce those with the number of others.
-     */
-    const numberOfExtraParticipants = sortedParticipants.length - 3;
-    return _formatString(direction === 'joined' ? strings.manyParticipantsJoined : strings.manyParticipantsLeft, {
-        displayName1: (_a = sortedParticipants[0].displayName) !== null && _a !== void 0 ? _a : strings.unnamedParticipantString,
-        displayName2: (_b = sortedParticipants[1].displayName) !== null && _b !== void 0 ? _b : strings.unnamedParticipantString,
-        displayName3: (_c = sortedParticipants[2].displayName) !== null && _c !== void 0 ? _c : strings.unnamedParticipantString,
-        numOfParticipants: numberOfExtraParticipants.toString()
-    });
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 const VideoGalleryStyles = {
@@ -29727,6 +29860,112 @@ const networkReconnectTileSelector = reselect__namespace.createSelector([getUser
     };
 });
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @internal
+ */
+const getMinutes$1 = (time) => {
+    return Math.floor(getSeconds$1(time) / 60);
+};
+/**
+ * @internal
+ */
+const getSeconds$1 = (time) => {
+    return Math.floor(time / 1000);
+};
+/**
+ * @internal
+ */
+const getHours$1 = (time) => {
+    return Math.floor(getMinutes$1(time) / 60);
+};
+/**
+ * @internal
+ */
+const getReadableTime$1 = (time) => {
+    const hours = getHours$1(time);
+    const readableMinutes = ('0' + (getMinutes$1(time) % 60)).slice(-2);
+    const readableSeconds = ('0' + (getSeconds$1(time) % 60)).slice(-2);
+    return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * styles for hold pane timer
+ *
+ * @private
+ */
+const DtmfDialpadContentTimerStyles = {
+    root: {
+        color: 'inherit',
+        fontWeight: 600,
+        fontSize: _pxToRem(20),
+        lineHeight: _pxToRem(28),
+        margin: 'auto'
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+var __awaiter$b = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const DtmfDialpadPageContent = (props) => {
+    var _a, _b;
+    const { adapter } = props;
+    const adapterState = adapter.getState();
+    const theme = react.useTheme();
+    const calleeId = (_a = adapterState.targetCallees) === null || _a === void 0 ? void 0 : _a[0];
+    const remoteParticipants = (_b = adapterState.call) === null || _b === void 0 ? void 0 : _b.remoteParticipants;
+    let calleeName;
+    if (remoteParticipants) {
+        const remoteParticipantValues = Object.values(remoteParticipants);
+        if (calleeId && communicationCommon.isPhoneNumberIdentifier(calleeId)) {
+            calleeName = calleeId.phoneNumber;
+        }
+        else {
+            calleeName = remoteParticipantValues.find((p) => p.identifier === calleeId);
+        }
+    }
+    return (React.createElement(react.Stack, { style: { height: '100%', width: '100%', background: theme.palette.white } },
+        React.createElement(react.Stack, { verticalAlign: 'center', style: { margin: 'auto' } },
+            React.createElement(DtmfDialerContentTimer, null),
+            React.createElement(react.Text, { style: { margin: 'auto' } }, calleeName !== 'Unnamed participant' ? calleeName : ''),
+            React.createElement(Dialpad, { onSendDtmfTone: (tone) => __awaiter$b(void 0, void 0, void 0, function* () {
+                    /* @conditional-compile-remove(dtmf-dialer) */
+                    yield adapter.sendDtmfTone(tone);
+                }), dialpadMode: 'dtmf' }))));
+};
+const DtmfDialerContentTimer = () => {
+    const [time, setTime] = React.useState(0);
+    const elapsedTime = getReadableTime$1(time);
+    const startTime = React.useRef(performance.now());
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setTime(performance.now() - startTime.current);
+        }, 10);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [startTime]);
+    return React.createElement(react.Text, { styles: DtmfDialpadContentTimerStyles }, elapsedTime);
+};
+/**
+ * @internal
+ */
+const DtmfDialpadPage = (props) => {
+    const adapter = useAdapter();
+    return React.createElement(DtmfDialpadPageContent, { adapter: adapter, mobileView: props.mobileView });
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -29751,10 +29990,50 @@ const CallPage = (props) => {
     const errorBarProps = usePropsFor$1(ErrorBar);
     const mutedNotificationProps = useSelector$1(mutedNotificationSelector);
     const networkReconnectTileProps = useSelector$1(networkReconnectTileSelector);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const remoteParticipantsConnected = useSelector$1(getRemoteParticipantsConnectedSelector);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const callees = useSelector$1(getTargetCallees);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const renderDtmfDialerFromStart = showDtmfDialer(callees);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const [dtmfDialerPresent, setDtmfDialerPresent] = React.useState(renderDtmfDialerFromStart);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const dialerShouldAutoDismiss = React.useRef(renderDtmfDialerFromStart);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    /**
+     * This useEffect is about clearing the dtmf dialer should there be a new participant that joins the call.
+     * This will only happen the first time should the dialer be present when the call starts.
+     */
+    React.useEffect(() => {
+        if (remoteParticipantsConnected.length > 1 && dtmfDialerPresent && dialerShouldAutoDismiss.current) {
+            setDtmfDialerPresent(false);
+            dialerShouldAutoDismiss.current = false;
+        }
+    }, [dtmfDialerPresent, remoteParticipantsConnected, setDtmfDialerPresent]);
     const strings = useLocale().strings.call;
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = mobileView ? reduceCallControlsForMobile(options === null || options === void 0 ? void 0 : options.callControls) : options === null || options === void 0 ? void 0 : options.callControls;
     const drawerMenuHostId = reactHooks.useId('drawerMenuHost');
+    const onRenderGalleryContentTrampoline = () => {
+        /* @conditional-compile-remove(dtmf-dialer) */
+        if (dtmfDialerPresent) {
+            return (React.createElement(DtmfDialpadPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: props.latestErrors, onDismissError: props.onDismissError, 
+                /* @conditional-compile-remove(capabilities) */
+                capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps, onSetDialpadPage: () => setDtmfDialerPresent(!dtmfDialerPresent), dtmfDialerPresent: dtmfDialerPresent }));
+        }
+        else {
+            return (React.createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, 
+                /* @conditional-compile-remove(pinned-participants) */
+                remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, drawerMenuHostId: drawerMenuHostId, 
+                /* @conditional-compile-remove(click-to-call) */
+                localVideoTileOptions: options === null || options === void 0 ? void 0 : options.localVideoTile, 
+                /* @conditional-compile-remove(gallery-layouts) */
+                userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
+                /* @conditional-compile-remove(gallery-layouts) */
+                userSetGalleryLayout: galleryLayout })));
+        }
+    };
     return (React.createElement(CallArrangement, { id: drawerMenuHostId, complianceBannerProps: Object.assign(Object.assign({}, complianceBannerProps), { strings }), errorBarProps: (options === null || options === void 0 ? void 0 : options.errorBar) !== false && errorBarProps, mutedNotificationProps: mutedNotificationProps, callControlProps: {
             callInvitationURL: callInvitationURL,
             onFetchParticipantMenuItems: onFetchParticipantMenuItems,
@@ -29762,15 +30041,7 @@ const CallPage = (props) => {
             increaseFlyoutItemSize: mobileView
         }, 
         /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
-        onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (React.createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, 
-            /* @conditional-compile-remove(pinned-participants) */
-            remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, drawerMenuHostId: drawerMenuHostId, 
-            /* @conditional-compile-remove(click-to-call) */
-            localVideoTileOptions: options === null || options === void 0 ? void 0 : options.localVideoTile, 
-            /* @conditional-compile-remove(gallery-layouts) */
-            userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
-            /* @conditional-compile-remove(gallery-layouts) */
-            userSetGalleryLayout: galleryLayout }))) : (React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React.createElement(React.Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: onCloseChatPane, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, 
+        onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (onRenderGalleryContentTrampoline()) : (React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React.createElement(React.Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: onCloseChatPane, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, 
         /* @conditional-compile-remove(gallery-layouts) */
         onUserSetOverflowGalleryPositionChange: onSetUserSetOverflowGalleryPosition, 
         /* @conditional-compile-remove(gallery-layouts) */
@@ -29778,7 +30049,11 @@ const CallPage = (props) => {
         /* @conditional-compile-remove(gallery-layouts) */
         userSetGalleryLayout: galleryLayout, 
         /* @conditional-compile-remove(capabilities) */
-        capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps }));
+        capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps, 
+        /* @conditional-compile-remove(dtmf-dialer) */
+        onSetDialpadPage: () => setDtmfDialerPresent(!dtmfDialerPresent), 
+        /* @conditional-compile-remove(dtmf-dialer) */
+        dtmfDialerPresent: dtmfDialerPresent }));
 };
 /**
  * @private