@azure/communication-react 1.3.3-alpha-202208240015.0 → 1.3.3-alpha-202208270015.0

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

@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.3-alpha-202208240015.0';
+var telemetryVersion = '1.3.3-alpha-202208270015.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -391,7 +391,7 @@ const getCallState = (state, props) => { var _a; return (_a = state.calls[props.
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$u = (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); } }
@@ -405,7 +405,7 @@ var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments,
  *
  * @internal
  */
-const _isInCall = (callStatus) => !!callStatus && !['None', 'Disconnected', 'Connecting', 'LocalHold', 'Ringing', 'EarlyMedia'].includes(callStatus);
+const _isInCall = (callStatus) => !!callStatus && !['None', 'Disconnected', 'Connecting', 'Ringing', 'EarlyMedia'].includes(callStatus);
 /**
  * Check if the call state represents being in the lobby or waiting to be admitted.
  *
@@ -429,7 +429,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$u(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$w(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -536,7 +536,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$t = (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); } }
@@ -560,7 +560,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @public
  */
 const createDefaultCallingHandlers = memoizeOne__default['default']((callClient, callAgent, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$v(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?
@@ -580,7 +580,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$v(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -593,7 +593,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             });
         }
     });
-    const onToggleCamera = (options) => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (call && _isInCall(call.state)) {
             const stream = call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
             if (stream) {
@@ -623,19 +623,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
     const onStartCall = (participants, options) => {
         return callAgent ? callAgent.startCall(participants, options) : undefined;
     };
-    const onSelectMicrophone = (device) => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -658,19 +658,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!call || !_isInCall(call.state)) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
         }
         return call.isMuted ? yield call.unmute() : yield call.mute();
     });
-    const onStartScreenShare = () => __awaiter$t(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$t(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$t(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = () => __awaiter$t(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
+    const onStartScreenShare = () => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$v(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = () => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onToggleHold = () => __awaiter$t(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$t(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$v(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$v(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -686,7 +686,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         const { view } = (_a = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _a !== void 0 ? _a : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -714,7 +714,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
         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$t(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -735,7 +735,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$v(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');
@@ -747,11 +747,11 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         // TODO: we need to remember which LocalVideoStream was used for LocalPreview and dispose that one.
         yield disposeAllLocalPreviewViews(callClient);
     });
-    const onRemoveParticipant = (userId) => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onRemoveParticipant = (userId) => __awaiter$v(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.removeParticipant(fromFlatCommunicationIdentifier(userId)));
     });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onAddParticipant = (participant, options) => __awaiter$t(void 0, void 0, void 0, function* () {
+    const onAddParticipant = (participant, options) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (communicationCommon.isPhoneNumberIdentifier(participant)) {
             yield (call === null || call === void 0 ? void 0 : call.addParticipant(participant, options));
         }
@@ -760,7 +760,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$t(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$v(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     return {
         onHangUp,
         /* @conditional-compile-remove(PSTN-calls) */
@@ -1899,6 +1899,8 @@ const DEFAULT_COMPONENT_ICONS = {
     ControlButtonMicOn: React__default['default'].createElement(reactIcons.MicOn20Filled, null),
     ControlButtonOptions: React__default['default'].createElement(reactIcons.Settings20Filled, null),
     ControlButtonParticipants: React__default['default'].createElement(reactIcons.People20Filled, null),
+    /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
+    ControlButtonParticipantsContextualMenuItem: React__default['default'].createElement(reactIcons.People20Regular, null),
     ControlButtonScreenShareStart: React__default['default'].createElement(reactIcons.ShareScreenStart20Filled, null),
     ControlButtonScreenShareStop: React__default['default'].createElement(reactIcons.ShareScreenStop20Filled, null),
     /* @conditional-compile-remove(file-sharing) */
@@ -1938,7 +1940,9 @@ const DEFAULT_COMPONENT_ICONS = {
     ParticipantItemOptionsHovered: React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, null),
     ParticipantItemScreenShareStart: React__default['default'].createElement(reactIcons.ShareScreenStart20Filled, null),
     /* @conditional-compile-remove(PSTN-calls) */
-    HoldCall: React__default['default'].createElement(reactIcons.Pause20Regular, null),
+    HoldCallContextualMenuItem: React__default['default'].createElement(reactIcons.CallPause20Regular, null),
+    /* @conditional-compile-remove(PSTN-calls) */
+    HoldCallButton: React__default['default'].createElement(reactIcons.CallPause20Filled, null),
     /* @conditional-compile-remove(PSTN-calls) */
     ResumeCall: React__default['default'].createElement(reactIcons.Play20Regular, null),
     SendBoxSend: React__default['default'].createElement(reactIcons.Send20Regular, null),
@@ -3392,7 +3396,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
 
-var __awaiter$s = (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); } }
@@ -3417,7 +3421,7 @@ const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$s(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$u(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -3565,7 +3569,7 @@ const ChatMessageComponentAsMessageBubble = React__default['default'].memo(Messa
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$r = (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); } }
@@ -3599,7 +3603,7 @@ const ChatMessageComponent = (props) => {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     else if (isEditing) {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$r(void 0, void 0, void 0, function* () {
+        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$t(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     props.message.messageId &&
                     (yield props.onUpdateMessage(props.message.messageId, text, metadata, options));
@@ -3698,7 +3702,7 @@ const getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$q = (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); } }
@@ -3925,7 +3929,7 @@ const MessageThread = (props) => {
         setChatMessagesInitialized(chatMessagesInitialized);
     };
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -3976,7 +3980,7 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
         if (chatScrollDivRef.current && !isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -4428,7 +4432,7 @@ const ParticipantItem = (props) => {
         setMenuHidden(true);
     };
     const participantStateString = participantStateStringTrampoline$1(props, strings);
-    return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, className: react.mergeStyles(participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
+    return (React__default['default'].createElement("div", { ref: containerRef, role: 'menuitem', "data-is-focusable": true, "data-ui-id": "participant-item", className: react.mergeStyles(participantItemContainerStyle({ localparticipant: me, clickable: !!menuItems }), styles === null || styles === void 0 ? void 0 : styles.root), onMouseEnter: () => setItemHovered(true), onMouseLeave: () => setItemHovered(false), onClick: () => {
             if (!participantStateString) {
                 setItemHovered(true);
                 setMenuHidden(false);
@@ -6789,7 +6793,7 @@ const DevicesButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$p = (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); } }
@@ -6831,7 +6835,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -6963,7 +6967,7 @@ const lightThemeCallButtonStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$o = (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); } }
@@ -7006,7 +7010,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -7817,15 +7821,71 @@ const formatPhoneNumber = (phoneNumber) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-const DialpadButton = (props) => {
-    var _a, _b, _c, _d;
-    const theme = react.useTheme();
-    return (React__default['default'].createElement(react.DefaultButton, { "data-test-id": `dialpad-button-${props.index}`, onClick: () => {
-            props.onClick(props.primaryContent, props.index);
-        }, styles: react.concatStyleSets(buttonStyles(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) },
-        React__default['default'].createElement(react.Stack, null,
-            React__default['default'].createElement(react.Text, { className: react.mergeStyles(primaryContentStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.primaryContent) }, props.primaryContent),
-            React__default['default'].createElement(react.Text, { className: react.mergeStyles(secondaryContentStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.secondaryContent) }, (_d = props.secondaryContent) !== null && _d !== void 0 ? _d : ' '))));
+/**
+ * @private
+ */
+function useLongPress(onClick, onLongPress) {
+    const timerRef = React.useRef();
+    const [isLongPress, setIsLongPress] = React.useState(false);
+    const [action, setAction] = React.useState(false);
+    function startPressTimer() {
+        setIsLongPress(false);
+        timerRef.current = setTimeout(() => {
+            setIsLongPress(true);
+        }, 500);
+    }
+    function handleOnClick() {
+        onClick();
+        if (isLongPress) {
+            onLongPress();
+            return;
+        }
+    }
+    function handleOnKeyDown() {
+        if (action) {
+            setAction(false);
+            startPressTimer();
+        }
+    }
+    function handleOnKeyUp() {
+        setAction(true);
+        timerRef.current && clearTimeout(timerRef.current);
+    }
+    function handleOnMouseDown() {
+        startPressTimer();
+    }
+    function handleOnMouseUp() {
+        timerRef.current && clearTimeout(timerRef.current);
+    }
+    function handleOnTouchStart() {
+        startPressTimer();
+    }
+    function handleOnTouchEnd() {
+        timerRef.current && clearTimeout(timerRef.current);
+    }
+    return {
+        handlers: {
+            onClick: handleOnClick,
+            onMouseDown: handleOnMouseDown,
+            onMouseUp: handleOnMouseUp,
+            onTouchStart: handleOnTouchStart,
+            onTouchEnd: handleOnTouchEnd,
+            onKeyDown: handleOnKeyDown,
+            onKeyUp: handleOnKeyUp
+        }
+    };
+}
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+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); } }
+        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 dialPadButtonsDefault = [
     [
@@ -7859,58 +7919,76 @@ const DtmfTones = [
     'Num0',
     'Pound'
 ];
+const DialpadButton = (props) => {
+    var _a, _b, _c, _d;
+    const theme = react.useTheme();
+    const { primaryContent, index, onClick, onLongPress } = props;
+    const clickFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
+        onClick(primaryContent, index);
+    }), [primaryContent, index, onClick]);
+    const longPressFunction = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
+        onLongPress(primaryContent, index);
+    }), [primaryContent, index, onLongPress]);
+    const { handlers } = useLongPress(clickFunction, longPressFunction);
+    return (React__default['default'].createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, handlers),
+        React__default['default'].createElement(react.Stack, null,
+            React__default['default'].createElement(react.Text, { className: react.mergeStyles(primaryContentStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.primaryContent) }, props.primaryContent),
+            React__default['default'].createElement(react.Text, { className: react.mergeStyles(secondaryContentStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.secondaryContent) }, (_d = props.secondaryContent) !== null && _d !== void 0 ? _d : ' '))));
+};
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
-    const [textValue, setTextValue] = React.useState('');
-    const { onSendDtmfTone, onClickDialpadButton, onDisplayDialpadInput, onChange, showDeleteButton = true } = props;
-    const sanitizeInput = (input) => {
-        // remove non-valid characters from input: letters,special characters excluding +, *,#
-        return input.replace(/[^\d*#+]/g, '');
-    };
+    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true } = props;
+    const [plainTextValue, setPlainTextValue] = React.useState(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
+    React.useEffect(() => {
+        if (onChange) {
+            onChange(plainTextValue);
+        }
+    }, [plainTextValue, onChange]);
+    React.useEffect(() => {
+        setText(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
+    }, [textFieldValue]);
     const onClickDialpad = (input, index) => {
-        // remove non-valid characters from input: letters,special characters excluding +, *,#
-        const value = sanitizeInput(textValue + input);
-        setTextValue(value);
+        setText(plainTextValue + input);
         if (onSendDtmfTone) {
             onSendDtmfTone(DtmfTones[index]);
         }
         if (onClickDialpadButton) {
             onClickDialpadButton(input, index);
         }
-        if (onChange) {
-            onChange(onDisplayDialpadInput ? onDisplayDialpadInput(value) : formatPhoneNumber(value));
+    };
+    const onLongPressDialpad = (input, index) => {
+        if (input === '0' && index === 10) {
+            setText(plainTextValue + '+');
+        }
+        else {
+            setText(plainTextValue + input);
+        }
+        if (onSendDtmfTone) {
+            onSendDtmfTone(DtmfTones[index]);
+        }
+        if (onClickDialpadButton) {
+            onClickDialpadButton(input, index);
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const setText = (e) => {
+    const setText = (input) => {
         // remove non-valid characters from input: letters,special characters excluding +, *,#
-        const input = sanitizeInput(e.target.value);
-        setTextValue(input);
+        const plainInput = sanitizeInput(input);
+        setPlainTextValue(plainInput);
     };
-    // Potential Improvement:
-    // comment out the following line for now to disable customization for dialpad content
-    // const dialpadButtonsContent = props.dialpadButtons ?? dialPadButtonsDefault;
     const deleteNumbers = () => {
-        const modifiedInput = textValue.substring(0, textValue.length - 1);
-        setTextValue(modifiedInput);
-        if (onChange) {
-            onChange(onDisplayDialpadInput ? onDisplayDialpadInput(modifiedInput) : formatPhoneNumber(modifiedInput));
-        }
+        const modifiedInput = plainTextValue.substring(0, plainTextValue.length - 1);
+        setText(modifiedInput);
     };
     return (React__default['default'].createElement("div", { className: react.mergeStyles(containerStyles$1(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root), "data-test-id": "dialpadContainer", "data-ui-id": "dialpadContainer" },
-        React__default['default'].createElement(react.TextField, { styles: react.concatStyleSets(textFieldStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.textField), value: onDisplayDialpadInput ? onDisplayDialpadInput(textValue) : formatPhoneNumber(textValue), 
+        React__default['default'].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) => {
-                setText(e);
-                // remove non-valid characters from input: letters,special characters excluding +, *,#
-                const input = sanitizeInput(e.target.value);
-                if (onChange) {
-                    onChange(onDisplayDialpadInput ? onDisplayDialpadInput(input) : formatPhoneNumber(input));
-                }
+                setText(e.target.value);
             }, placeholder: props.strings.placeholderText, "data-test-id": "dialpad-input", onRenderSuffix: () => {
                 var _a;
-                return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && textValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'BackSpace' } }))));
+                return (React__default['default'].createElement(React__default['default'].Fragment, null, showDeleteButton && plainTextValue.length !== 0 && (React__default['default'].createElement(react.IconButton, { ariaLabel: props.strings.deleteButtonAriaLabel, onClick: deleteNumbers, styles: react.concatStyleSets(iconButtonStyles(theme), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.deleteIcon), iconProps: { iconName: 'BackSpace' } }))));
             } }),
         React__default['default'].createElement(react.FocusZone, null, dialPadButtonsDefault.map((rows, rowIndex) => {
             return (React__default['default'].createElement(react.Stack, { horizontal: true, key: `row_${rowIndex}`, horizontalAlign: "stretch" }, rows.map((button, columnIndex) => (React__default['default'].createElement(DialpadButton, { key: `button_${columnIndex}`, 
@@ -7931,7 +8009,7 @@ const DialpadContainer = (props) => {
                 then use this index to locate the corresponding dtmf tones
                 DtmfTones[index]
                 */
-                index: columnIndex + rowIndex * rows.length, primaryContent: button.primaryContent, secondaryContent: button.secondaryContent, styles: props.styles, onClick: onClickDialpad })))));
+                index: columnIndex + rowIndex * rows.length, primaryContent: button.primaryContent, secondaryContent: button.secondaryContent, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad })))));
         }))));
 };
 /**
@@ -7950,6 +8028,10 @@ const Dialpad = (props) => {
     const strings = Object.assign(Object.assign({}, dialpadLocaleStringsTrampoline()), props.strings);
     return React__default['default'].createElement(DialpadContainer, Object.assign({ strings: strings }, props));
 };
+const sanitizeInput = (input) => {
+    // remove non-valid characters from input: letters,special characters excluding +, *,#
+    return input.replace(/[^\d*#+]/g, '');
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7964,7 +8046,7 @@ const Dialpad = (props) => {
 const HoldButton = (props) => {
     const { onToggleHold, strings } = props;
     const onRenderHoldIcon = () => {
-        return React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "HoldCall" });
+        return React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "HoldCallButton" });
     };
     const onRenderResumeIcon = () => {
         return React__default['default'].createElement(HighContrastAwareIcon, { disabled: props.disabled, iconName: "ResumeCall" });
@@ -8414,7 +8496,7 @@ const findConditionalCompiledSelector = (component) => {
 
 // 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); } }
@@ -8437,35 +8519,35 @@ const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, ch
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$o(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$o(void 0, void 0, void 0, function* () {
             const updatedMetadata = metadata ? Object.assign({}, metadata) : {};
             updatedMetadata['fileSharingMetadata'] = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachedFilesMetadata) || []);
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
-        onDeleteMessage: (messageId) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$o(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$o(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$n(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$o(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$o(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$n(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$o(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$o(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.
@@ -9156,7 +9238,7 @@ const findSelector = (component) => {
 
 // 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); } }
@@ -9205,10 +9287,10 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$m(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$n(this, void 0, void 0, function* () {
             this._context.setDeviceManagerCameras(dedupeById(yield this._deviceManager.getCameras()));
         });
-        this.audioDevicesUpdated = () => __awaiter$m(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$n(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -9411,7 +9493,7 @@ class CallIdHistory {
 
 // 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); } }
@@ -9896,7 +9978,7 @@ class CallContext$1 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$l(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$m(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -9960,7 +10042,7 @@ const findOldestCallEnded = (calls) => {
 
 // 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); } }
@@ -9980,63 +10062,63 @@ class ProxyCall {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
             }
             case 'addParticipant': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$l(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -10244,7 +10326,7 @@ class RemoteVideoStreamSubscriber {
 
 // 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); } }
@@ -10254,7 +10336,7 @@ var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewRemoteVideo(context, internalContext, callId, participantId, stream, options) {
-    return __awaiter$j(this, void 0, void 0, function* () {
+    return __awaiter$k(this, void 0, void 0, function* () {
         // Render RemoteVideoStream that is part of a Call
         const streamId = stream.id;
         let participantKey;
@@ -10362,7 +10444,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
     });
 }
 function createViewLocalVideo(context, internalContext, callId, options) {
-    return __awaiter$j(this, void 0, void 0, function* () {
+    return __awaiter$k(this, void 0, void 0, function* () {
         _logEvent(callingStatefulLogger, {
             name: EventNames.START_LOCAL_STREAM_RENDERING,
             level: 'info',
@@ -10478,7 +10560,7 @@ function createViewLocalVideo(context, internalContext, callId, options) {
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$j(this, void 0, void 0, function* () {
+    return __awaiter$k(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -11106,7 +11188,7 @@ class CallSubscriber {
 
 // 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); } }
@@ -11126,14 +11208,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -11471,7 +11553,7 @@ class InternalCallContext {
 
 // 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); } }
@@ -11493,7 +11575,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$h(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(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.
@@ -11506,7 +11588,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$h(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$i(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.
@@ -11629,7 +11711,7 @@ const chatStatefulLogger = logger.createClientLogger('communication-react:chat-s
 
 // 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); } }
@@ -11904,7 +11986,7 @@ class ChatContext$1 {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$g(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$h(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -12011,7 +12093,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 
 // 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); } }
@@ -12095,7 +12177,7 @@ class EventSubscriber {
             this.fetchLastParticipantMessage(event.threadId, 'participantAdded');
         };
         // This is a hot fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$f(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$g(this, void 0, void 0, function* () {
             var e_1, _a;
             try {
                 for (var _b = __asyncValues$1(this.chatClient
@@ -12181,7 +12263,7 @@ class EventSubscriber {
 
 // 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); } }
@@ -12203,7 +12285,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$e(this, void 0, void 0, function* () {
+                return __awaiter$f(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -12218,7 +12300,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$e(this, void 0, void 0, function* () {
+                        return __awaiter$f(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -12302,7 +12384,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 
 // 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); } }
@@ -12321,14 +12403,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$d(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(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$d(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
                     // Retry logic?
                     const [request, options] = args;
                     const { content } = request;
@@ -12368,7 +12450,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$d(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -12377,7 +12459,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$d(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(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)) {
@@ -12395,7 +12477,7 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$d(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -12403,7 +12485,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$d(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(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);
@@ -12411,7 +12493,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$d(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -12419,7 +12501,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$d(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$e(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -12456,7 +12538,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 
 // 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); } }
@@ -12475,7 +12557,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$c(this, void 0, void 0, function* () {
+                    return __awaiter$d(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -12488,7 +12570,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$c(this, void 0, void 0, function* () {
+                    return __awaiter$d(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -12508,7 +12590,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$c(this, void 0, void 0, function* () {
+                    return __awaiter$d(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -12519,7 +12601,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$c(this, void 0, void 0, function* () {
+                    return __awaiter$d(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -12706,7 +12788,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumeCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",openDtmfDialpadLabel:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close Dialpad",openDtmfDialpadLabel:"Show Dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$c={chatListHeader:"In this chat"};var callWithChat$c={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButton:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -13108,7 +13190,7 @@ const convertObservableFileUploadToFileUploadsUiState = (fileUploads) => {
 
 // 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); } }
@@ -13234,9 +13316,9 @@ class AzureCommunicationChatAdapter {
         this.unsubscribeAllEvents();
     }
     fetchInitialData() {
-        return __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$b(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
                 var e_1, _a;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -13270,8 +13352,8 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options = {}) {
-        return __awaiter$b(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(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) */
@@ -13288,49 +13370,49 @@ class AzureCommunicationChatAdapter {
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$b(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
             yield this.handlers.onTyping();
         });
     }
     removeParticipant(userId) {
-        return __awaiter$b(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$b(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$b(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, metadata, options) {
-        return __awaiter$b(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, metadata, options);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$b(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$c(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -13411,7 +13493,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$b(this, void 0, void 0, function* () {
+        return __awaiter$c(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -13453,7 +13535,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$b(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$c(void 0, void 0, void 0, function* () {
     const chatClient = createStatefulChatClient({
         userId,
         displayName,
@@ -13516,7 +13598,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$b(void 0, void 0, void 0, function* () {
+        (() => __awaiter$c(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -13548,7 +13630,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$b(void 0, void 0, void 0, function* () {
+            (() => __awaiter$c(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -13569,7 +13651,7 @@ beforeDispose) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$b(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$c(void 0, void 0, void 0, function* () {
     return new AzureCommunicationChatAdapter(chatClient, chatThreadClient);
 });
 const isChatError = (e) => {
@@ -13771,7 +13853,7 @@ const sendboxContainerStyles = {
 
 // 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); } }
@@ -13792,7 +13874,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$a(void 0, void 0, void 0, function* () {
+        (() => __awaiter$b(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -14448,14 +14530,15 @@ const getCallCompositePage = (call, previousCall) => {
         // `_isInLobbyOrConnecting` needs to be checked first because `_isInCall` also returns true when call is in lobby.
         if (_isInLobbyOrConnecting(call === null || call === void 0 ? void 0 : call.state)) {
             return 'lobby';
-        }
-        else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
-            return 'call';
+            // `LocalHold` needs to be checked before `isInCall` since it is also a state that's considered in call.
         }
         else if ((call === null || call === void 0 ? void 0 : call.state) === 'LocalHold') {
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
             return 'hold';
         }
+        else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
+            return 'call';
+        }
         else {
             // When the call object has been constructed after clicking , but before 'connecting' has been
             // set on the call object, we continue to show the configuration screen.
@@ -14527,7 +14610,7 @@ const disableCallControls = (callControlOptions, disabledControls) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$9 = (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); } }
@@ -14546,72 +14629,72 @@ _component) => {
     return createCompositeHandlers(useAdapter());
 };
 const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$9(void 0, void 0, void 0, function* () {
+    onCreateLocalStreamView: (options) => __awaiter$a(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(undefined, options);
     }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$9(void 0, void 0, void 0, function* () {
+    onCreateRemoteStreamView: (userId, options) => __awaiter$a(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(userId, options);
     }),
-    onHangUp: () => __awaiter$9(void 0, void 0, void 0, function* () {
+    onHangUp: () => __awaiter$a(void 0, void 0, void 0, function* () {
         yield adapter.leaveCall();
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onToggleHold: () => __awaiter$9(void 0, void 0, void 0, function* () {
+    onToggleHold: () => __awaiter$a(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$9(void 0, void 0, void 0, function* () {
+    onAddParticipant: (participant, options) => __awaiter$a(void 0, void 0, void 0, function* () {
         return yield adapter.addParticipant(participant, options);
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onSendDtmfTone: (dtmfTone) => __awaiter$9(void 0, void 0, void 0, function* () {
+    onSendDtmfTone: (dtmfTone) => __awaiter$a(void 0, void 0, void 0, function* () {
         yield adapter.sendDtmfTone(dtmfTone);
     }),
-    onRemoveParticipant: (userId) => __awaiter$9(void 0, void 0, void 0, function* () {
+    onRemoveParticipant: (userId) => __awaiter$a(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$9(void 0, void 0, void 0, function* () {
+    onSelectCamera: (deviceInfo, options) => __awaiter$a(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$9(void 0, void 0, void 0, function* () {
+    onSelectMicrophone: (deviceInfo) => __awaiter$a(void 0, void 0, void 0, function* () {
         yield adapter.setMicrophone(deviceInfo);
     }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$9(void 0, void 0, void 0, function* () {
+    onSelectSpeaker: (deviceInfo) => __awaiter$a(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$9(void 0, void 0, void 0, function* () {
+    onStartScreenShare: () => __awaiter$a(void 0, void 0, void 0, function* () {
         yield adapter.startScreenShare();
     }),
-    onStopScreenShare: () => __awaiter$9(void 0, void 0, void 0, function* () {
+    onStopScreenShare: () => __awaiter$a(void 0, void 0, void 0, function* () {
         yield adapter.stopScreenShare();
     }),
-    onToggleCamera: (options) => __awaiter$9(void 0, void 0, void 0, function* () {
+    onToggleCamera: (options) => __awaiter$a(void 0, void 0, void 0, function* () {
         isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
     }),
-    onToggleMicrophone: () => __awaiter$9(void 0, void 0, void 0, function* () {
+    onToggleMicrophone: () => __awaiter$a(void 0, void 0, void 0, function* () {
         var _b;
         return ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.isMuted) ? yield adapter.unmute() : yield adapter.mute();
     }),
-    onToggleScreenShare: () => __awaiter$9(void 0, void 0, void 0, function* () {
+    onToggleScreenShare: () => __awaiter$a(void 0, void 0, void 0, function* () {
         var _c;
         return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isScreenSharingOn)
             ? yield adapter.stopScreenShare()
             : yield adapter.startScreenShare();
     }),
-    onStartLocalVideo: () => __awaiter$9(void 0, void 0, void 0, function* () {
+    onStartLocalVideo: () => __awaiter$a(void 0, void 0, void 0, function* () {
         if (adapter.getState().call) {
             return adapter.startCamera();
         }
     }),
-    onDisposeLocalStreamView: () => __awaiter$9(void 0, void 0, void 0, function* () {
+    onDisposeLocalStreamView: () => __awaiter$a(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView();
     }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$9(void 0, void 0, void 0, function* () {
+    onDisposeRemoteStreamView: (userId) => __awaiter$a(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView(userId);
     })
 }));
@@ -14674,7 +14757,8 @@ const buttonFlyoutIncreasedSizeStyles = {
         maxHeight: 'unset'
     },
     icon: {
-        maxHeight: 'unset'
+        maxHeight: 'unset',
+        textAlign: 'center'
     }
 };
 /**
@@ -14976,6 +15060,7 @@ const themedDialpadStyle$1 = (isMobile, theme) => ({
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
             padding: '0 0.5rem ',
+            direction: 'rtl',
             textAlign: 'center',
             ':active': {
                 padding: '0 0.5rem'
@@ -15094,7 +15179,7 @@ const CallControls = (props) => {
                         props.onPeopleButtonClicked();
                     }
                 },
-                iconProps: { iconName: 'ControlButtonParticipants', styles: { root: { lineHeight: 0 } } },
+                iconProps: { iconName: 'ControlButtonParticipantsContextualMenuItem', styles: { root: { lineHeight: 0 } } },
                 itemProps: {
                     styles: buttonFlyoutIncreasedSizeStyles
                 },
@@ -15107,7 +15192,7 @@ const CallControls = (props) => {
             onClick: () => {
                 holdButtonProps.onToggleHold();
             },
-            iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } },
+            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
@@ -15121,7 +15206,7 @@ const CallControls = (props) => {
             onClick: () => {
                 setShowDialpad(true);
             },
-            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } },
+            iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             }
@@ -15650,6 +15735,7 @@ const themedDialpadStyle = (isMobile, theme) => ({
             backgroundColor: theme.palette.white,
             fontSize: theme.fonts.large.fontSize,
             padding: '0 0.5rem',
+            direction: 'rtl',
             textAlign: isMobile ? 'center' : 'left',
             ':active': {
                 padding: '0 0.5rem'
@@ -15848,7 +15934,7 @@ const AddPeopleButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$9 = (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); } }
@@ -15863,10 +15949,11 @@ var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments,
 const PeoplePaneContent = (props) => {
     const { inviteLink, onFetchParticipantMenuItems, setDrawerMenuItems, strings, onRemoveParticipant } = props;
     const participantListDefaultProps = usePropsFor$1(ParticipantList);
+    const disableRemoveButton = !hasRemoveParticipantsPermissionTrampoline();
     const setDrawerMenuItemsForParticipant = React.useMemo(() => {
         return (participant) => {
             if (participant) {
-                let contextualMenuItems = createDefaultContextualMenuItems(participant, strings, participantListDefaultProps.onRemoveParticipant, participantListDefaultProps.myUserId);
+                let contextualMenuItems = createDefaultContextualMenuItems(participant, strings, participantListDefaultProps.onRemoveParticipant, participantListDefaultProps.myUserId, disableRemoveButton);
                 if (onFetchParticipantMenuItems) {
                     contextualMenuItems = onFetchParticipantMenuItems(participant.userId, participantListDefaultProps.myUserId, contextualMenuItems);
                 }
@@ -15878,11 +15965,12 @@ const PeoplePaneContent = (props) => {
         strings,
         participantListDefaultProps.onRemoveParticipant,
         participantListDefaultProps.myUserId,
+        disableRemoveButton,
         onFetchParticipantMenuItems,
         setDrawerMenuItems
     ]);
     const participantListProps = React.useMemo(() => {
-        const onRemoveAParticipant = (participantId) => __awaiter$8(void 0, void 0, void 0, function* () { return onRemoveParticipant(participantId); });
+        const onRemoveAParticipant = (participantId) => __awaiter$9(void 0, void 0, void 0, function* () { return onRemoveParticipant(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, 
@@ -15913,7 +16001,11 @@ const PeoplePaneContent = (props) => {
  * @param localParticipantUserId - Local participant user id
  * @returns - IContextualMenuItem[]
  */
-const createDefaultContextualMenuItems = (participant, strings, onRemoveParticipant, localParticipantUserId) => {
+const createDefaultContextualMenuItems = (participant, strings, onRemoveParticipant, localParticipantUserId, disableRemoveButton) => {
+    let disabled = !participant.isRemovable;
+    if (disableRemoveButton) {
+        disabled = disabled || disableRemoveButton;
+    }
     const menuItems = [];
     if ((participant === null || participant === void 0 ? void 0 : participant.userId) !== localParticipantUserId) {
         menuItems.push({
@@ -15927,11 +16019,18 @@ const createDefaultContextualMenuItems = (participant, strings, onRemoveParticip
             iconProps: {
                 iconName: 'UserRemove'
             },
-            disabled: !participant.isRemovable
+            disabled: disabled
         });
     }
     return menuItems;
 };
+/**
+ * @private
+ */
+const hasRemoveParticipantsPermissionTrampoline = () => {
+    /* @conditional-compile-remove(rooms) */
+    return _usePermissions().removeParticipantButton;
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -16074,7 +16173,7 @@ const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
     return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
 };
 
-var __awaiter$7 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16104,11 +16203,11 @@ const CallPane = (props) => {
     /**
      * In a Call Composite when a participant is removed, we must remove them from the call.
      */
-    const removeParticipantFromCall = (participantId) => __awaiter$7(void 0, void 0, void 0, function* () {
+    const removeParticipantFromCall = (participantId) => __awaiter$8(void 0, void 0, void 0, function* () {
         yield props.callAdapter.removeParticipant(participantId);
     });
     /* @conditional-compile-remove(PSTN-calls) */
-    const addParticipantToCall = (participant, options) => __awaiter$7(void 0, void 0, void 0, function* () {
+    const addParticipantToCall = (participant, options) => __awaiter$8(void 0, void 0, void 0, function* () {
         yield props.callAdapter.addParticipant(participant, options);
     });
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);
@@ -16817,7 +16916,7 @@ const localPreviewTileStyle = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$6 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$7 = (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); } }
@@ -16837,7 +16936,7 @@ const LocalPreview = (props) => {
     const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector$1(devicePermissionSelector);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
     const adapter = useAdapter();
-    const onToggleMic = React.useCallback(() => __awaiter$6(void 0, void 0, void 0, function* () {
+    const onToggleMic = React.useCallback(() => __awaiter$7(void 0, void 0, void 0, function* () {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
     const theme = useTheme();
@@ -16976,6 +17075,15 @@ const ConfigurationPage = (props) => {
     const errorBarProps = usePropsFor$1(ErrorBar);
     const adapter = useAdapter();
     const deviceState = adapter.getState().devices;
+    let disableStartCallButton = !microphonePermissionGranted || ((_a = deviceState.microphones) === null || _a === void 0 ? void 0 : _a.length) === 0;
+    /* @conditional-compile-remove(rooms) */
+    const rolePermissions = _usePermissions();
+    /* @conditional-compile-remove(rooms) */
+    if (!rolePermissions.microphoneButton) {
+        // If user's role permissions do not allow access to the microphone button then DO NOT disable the start call button
+        // because microphone device permission is not needed for the user's role
+        disableStartCallButton = false;
+    }
     const locale = useLocale();
     const title = (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop }, locale.strings.call.configurationPageTitle));
     const callDescription = locale.strings.call.configurationPageCallDetails && (React__default['default'].createElement(react.Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails));
@@ -16994,7 +17102,7 @@ const ConfigurationPage = (props) => {
                         callDescription),
                     React__default['default'].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGranted, microphonePermissionGranted: microphonePermissionGranted })))),
                 React__default['default'].createElement(react.Stack, { styles: mobileView ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                    React__default['default'].createElement(StartCallButton, { className: mobileView ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: !microphonePermissionGranted || ((_a = deviceState.microphones) === null || _a === void 0 ? void 0 : _a.length) === 0 }))))));
+                    React__default['default'].createElement(StartCallButton, { className: mobileView ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton }))))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17147,6 +17255,11 @@ const resumeButtonStyles = {
         fontWeight: 400,
         display: 'flex',
         fontSize: _pxToRem(14)
+    },
+    labelDisabled: {
+        fontWeight: 400,
+        display: 'flex',
+        fontSize: _pxToRem(14)
     }
 };
 /**
@@ -17204,6 +17317,16 @@ const holdPaneContentStyles = {
 };
 
 // Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$6 = (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());
+    });
+};
 /**
  * Hold pane to display when the user places themselves on hold
  *
@@ -17217,6 +17340,7 @@ const HoldPane = () => {
     const [time, setTime] = React.useState(0);
     const elapsedTime = getReadableTime(time);
     const startTime = React.useRef(performance.now());
+    const [resumingCall, setResumingCall] = React.useState(false);
     React__default['default'].useEffect(() => {
         const interval = setInterval(() => {
             setTime(performance.now() - startTime.current);
@@ -17225,14 +17349,24 @@ const HoldPane = () => {
             clearInterval(interval);
         };
     }, [startTime]);
+    const resumeSpinner = () => {
+        return React__default['default'].createElement(react.Spinner, { label: strings.resumingCallButtonLabel, labelPosition: 'right' });
+    };
     return (React__default['default'].createElement(react.Stack, { styles: paneStyles },
         React__default['default'].createElement(react.Stack, { horizontal: true, styles: holdPaneContentStyles },
             React__default['default'].createElement(react.Text, { styles: holdPaneTimerStyles }, elapsedTime),
             React__default['default'].createElement(react.Text, { styles: holdPaneLabelStyles }, strings.holdScreenLabel),
-            React__default['default'].createElement(react.PrimaryButton, { text: strings.resumeCallButtonLabel, ariaLabel: strings.resumeCallButtonAriaLabel, styles: resumeButtonStyles, onClick: () => {
-                    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                    holdButtonProps.onToggleHold();
-                }, "data-ui-id": "hold-page-resume-call-button" }))));
+            React__default['default'].createElement(react.PrimaryButton, { text: !resumingCall ? strings.resumeCallButtonLabel : undefined, ariaLabel: !resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel, styles: resumeButtonStyles, disabled: resumingCall, onClick: () => __awaiter$6(void 0, void 0, void 0, function* () {
+                    setResumingCall(true);
+                    try {
+                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+                        yield holdButtonProps.onToggleHold();
+                    }
+                    catch (e) {
+                        setResumingCall(false);
+                        throw e;
+                    }
+                }), "data-ui-id": "hold-page-resume-call-button" }, resumingCall && resumeSpinner()))));
 };
 const getMinutes = (time) => {
     return Math.floor(getSeconds(time) / 60);
@@ -17257,7 +17391,9 @@ const stringsTrampoline = (locale) => {
     return {
         holdScreenLabel: locale.strings.call.holdScreenLabel,
         resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel,
-        resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel
+        resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel,
+        resumingCallButtonLabel: locale.strings.call.resumingCallButtonLabel,
+        resumingCallButtonAriaLabel: locale.strings.call.resumingCallButtonAriaLabel
     };
 };
 
@@ -17719,7 +17855,7 @@ class AzureCommunicationCallAdapter {
         });
     }
     _joinCall(audioOptions, videoOptions) {
-        const isTeamsMeeting = 'teamsLink' in this.locator;
+        const isTeamsMeeting = 'meetingLink' in this.locator;
         /* @conditional-compile-remove(rooms) */
         const isRoomsCall = 'roomId' in this.locator;
         if (isTeamsMeeting) {
@@ -18401,7 +18537,7 @@ const DesktopMoreButton = (props) => {
             onClick: () => {
                 holdButtonProps.onToggleHold();
             },
-            iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } },
+            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
             },
@@ -18932,7 +19068,7 @@ const MoreDrawer = (props) => {
             onItemClick: () => {
                 holdButtonProps.onToggleHold();
             },
-            iconProps: { iconName: 'HoldCall', styles: { root: { lineHeight: 0 } } }
+            iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } }
         });
     }
     /*@conditional-compile-remove(PSTN-calls) */