@azure/communication-react 1.4.3-alpha-202212150014.0 → 1.4.3-alpha-202212170012.0

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.3-alpha-202212150014.0';
+var telemetryVersion = '1.4.3-alpha-202212170012.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -408,6 +408,13 @@ const getDiagnostics = (state, props) => { var _a; return (_a = state.calls[prop
  * @private
  */
 const getCallState = (state, props) => { var _a; return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.state; };
+/**
+ * @private
+ */
+const getEnvironmentInfo = (state) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return state.environmentInfo;
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -2491,7 +2498,9 @@ function createView(context, internalContext, callId, participantId, stream, opt
     }
     else if (!('id' in stream) && !callId) {
         // Render LocalVideoStream that is not part of a Call
-        return createViewUnparentedVideo(context, internalContext, stream, options);
+        // Because it is not part of the call we don't tee errors to state naturally (e.g. via a Call Client function such as startVideo).
+        // We do not have a startLocalPreviewVideo function, so as a workaround we ensure any errors are propagated here.
+        return context.withAsyncErrorTeedToState(() => __awaiter$v(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
     }
     else {
         _logEvent(callingStatefulLogger, {
@@ -2516,7 +2525,9 @@ function disposeView(context, internalContext, callId, participantId, stream) {
     }
     else if (!('id' in stream) && !callId) {
         // Stop rendering LocalVideoStream that is not part of a Call
-        disposeViewUnparentedVideo(context, internalContext, stream);
+        // Because it is not part of the call we don't tee errors to state naturally (e.g. via a Call Client function such as startVideo).
+        // We do not have a stopLocalPreviewVideo function, so as a workaround we ensure any errors are propagated here.
+        context.withErrorTeedToState(() => disposeViewUnparentedVideo(context, internalContext, stream), 'Call.stopVideo')();
     }
     else {
         _logEvent(callingStatefulLogger, {
@@ -4003,7 +4014,7 @@ const typingIndicatorStringStyle = react.mergeStyles({
     wordBreak: 'break-word'
 });
 
-var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$d={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$d={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant",fitRemoteParticipantToFrame:"Fit to frame",fillRemoteParticipantFrame:"Fill frame"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$d={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$d={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneDomainPermissionsCheck={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraDomainPermissionsCheck={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneDomainPermissionsCheck={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneDomainPermissionsDenied={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraDomainPermissionsDenied={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneDomainPermissionsDenied={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$e={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedBrowserVersion$1={primaryText:"Browser update needed",secondaryText:"To ensure the best call possible, please update your browser and then try joining the call again.",moreHelpLinkText:"See compatibility requirements",continueAnywayButtonText:"Start call without updating"};var UnsupportedOperatingSystem$1={primaryText:"Operating system not supported",secondaryText:"Please join this call using a device with a compatible operating system.",moreHelpLinkText:"See compatibility requirements"};var BrowserPermissionDenied$d={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$d={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d,dialpad:dialpad$d,holdButton:holdButton$d,videoTile:videoTile$d,CameraAndMicrophoneDomainPermissionsRequest:CameraAndMicrophoneDomainPermissionsRequest,CameraDomainPermissionsRequest:CameraDomainPermissionsRequest,MicrophoneDomainPermissionsRequest:MicrophoneDomainPermissionsRequest,CameraAndMicrophoneDomainPermissionsCheck:CameraAndMicrophoneDomainPermissionsCheck,CameraDomainPermissionsCheck:CameraDomainPermissionsCheck,MicrophoneDomainPermissionsCheck:MicrophoneDomainPermissionsCheck,CameraAndMicrophoneDomainPermissionsDenied:CameraAndMicrophoneDomainPermissionsDenied,CameraDomainPermissionsDenied:CameraDomainPermissionsDenied,MicrophoneDomainPermissionsDenied:MicrophoneDomainPermissionsDenied,UnsupportedBrowser:UnsupportedBrowser$e,UnsupportedBrowserVersion:UnsupportedBrowserVersion$1,UnsupportedOperatingSystem:UnsupportedOperatingSystem$1,BrowserPermissionDenied:BrowserPermissionDenied$d,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$d};
+var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$d={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied"};var screenShareButton$d={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneAccessDeniedSafari:"Unable to access microphone. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAccessDeniedSafari:"Unable to access camera. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant",fitRemoteParticipantToFrame:"Fit to frame",fillRemoteParticipantFrame:"Fill frame"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$d={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$d={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraDomainPermissionsRequest={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneDomainPermissionsRequest={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneDomainPermissionsCheck={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraDomainPermissionsCheck={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneDomainPermissionsCheck={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneDomainPermissionsDenied={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraAndMicrophoneDomainPermissionsDeniedSafari={primaryText:"Unable to access camera and microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraDomainPermissionsDenied={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneDomainPermissionsDenied={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var CameraDomainPermissionsDeniedSafari={primaryText:"Unable to access camera",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneDomainPermissionsDeniedSafari={primaryText:"Unable to access microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$e={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedBrowserVersion$1={primaryText:"Browser update needed",secondaryText:"To ensure the best call possible, please update your browser and then try joining the call again.",moreHelpLinkText:"See compatibility requirements",continueAnywayButtonText:"Start call without updating"};var UnsupportedOperatingSystem$1={primaryText:"Operating system not supported",secondaryText:"Please join this call using a device with a compatible operating system.",moreHelpLinkText:"See compatibility requirements"};var BrowserPermissionDenied$d={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$d={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d,dialpad:dialpad$d,holdButton:holdButton$d,videoTile:videoTile$d,CameraAndMicrophoneDomainPermissionsRequest:CameraAndMicrophoneDomainPermissionsRequest,CameraDomainPermissionsRequest:CameraDomainPermissionsRequest,MicrophoneDomainPermissionsRequest:MicrophoneDomainPermissionsRequest,CameraAndMicrophoneDomainPermissionsCheck:CameraAndMicrophoneDomainPermissionsCheck,CameraDomainPermissionsCheck:CameraDomainPermissionsCheck,MicrophoneDomainPermissionsCheck:MicrophoneDomainPermissionsCheck,CameraAndMicrophoneDomainPermissionsDenied:CameraAndMicrophoneDomainPermissionsDenied,CameraAndMicrophoneDomainPermissionsDeniedSafari:CameraAndMicrophoneDomainPermissionsDeniedSafari,CameraDomainPermissionsDenied:CameraDomainPermissionsDenied,MicrophoneDomainPermissionsDenied:MicrophoneDomainPermissionsDenied,CameraDomainPermissionsDeniedSafari:CameraDomainPermissionsDeniedSafari,MicrophoneDomainPermissionsDeniedSafari:MicrophoneDomainPermissionsDeniedSafari,UnsupportedBrowser:UnsupportedBrowser$e,UnsupportedBrowserVersion:UnsupportedBrowserVersion$1,UnsupportedOperatingSystem:UnsupportedOperatingSystem$1,BrowserPermissionDenied:BrowserPermissionDenied$d,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$d};
 
 var participantItem$c={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$c={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$c={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$c={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$c={label:"Leave",tooltipContent:"Leave call"};var cameraButton$c={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$c={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$c={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$c={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$c={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$c={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};var errorBar$c={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$c={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant"};var dialpad$c={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$c={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$c={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var DomainPermissions$c={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Allow Access"};var UnsupportedBrowser$d={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLink:"More help"};var BrowserPermissionDenied$c={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$c={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var en_GB$1 = {participantItem:participantItem$c,typingIndicator:typingIndicator$c,sendBox:sendBox$c,messageStatusIndicator:messageStatusIndicator$c,endCallButton:endCallButton$c,cameraButton:cameraButton$c,microphoneButton:microphoneButton$c,devicesButton:devicesButton$c,participantsButton:participantsButton$c,screenShareButton:screenShareButton$c,messageThread:messageThread$c,errorBar:errorBar$c,videoGallery:videoGallery$c,dialpad:dialpad$c,holdButton:holdButton$c,videoTile:videoTile$c,DomainPermissions:DomainPermissions$c,UnsupportedBrowser:UnsupportedBrowser$d,BrowserPermissionDenied:BrowserPermissionDenied$c,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$c};
 
@@ -4454,11 +4465,13 @@ const messageBarType = (errorType) => {
         case 'callNoSpeakerFound':
         case 'callNoMicrophoneFound':
         case 'callMicrophoneAccessDenied':
+        case 'callMicrophoneAccessDeniedSafari':
         case 'callMicrophoneMutedBySystem':
         case 'callMicrophoneUnmutedBySystem':
         case 'callMacOsMicrophoneAccessDenied':
         case 'callLocalVideoFreeze':
         case 'callCameraAccessDenied':
+        case 'callCameraAccessDeniedSafari':
         case 'callCameraAlreadyInUse':
         case 'callVideoStoppedBySystem':
         case 'callVideoRecoveredBySystem':
@@ -4486,11 +4499,13 @@ const customIconName = {
     callNoSpeakerFound: 'ErrorBarCallNoSpeakerFound',
     callNoMicrophoneFound: 'ErrorBarCallNoMicrophoneFound',
     callMicrophoneAccessDenied: 'ErrorBarCallMicrophoneAccessDenied',
+    callMicrophoneAccessDeniedSafari: 'ErrorBarCallMicrophoneAccessDenied',
     callMicrophoneMutedBySystem: 'ErrorBarCallMicrophoneMutedBySystem',
     callMicrophoneUnmutedBySystem: 'ErrorBarCallMicrophoneUnmutedBySystem',
     callMacOsMicrophoneAccessDenied: 'ErrorBarCallMacOsMicrophoneAccessDenied',
     callLocalVideoFreeze: 'ErrorBarCallLocalVideoFreeze',
     callCameraAccessDenied: 'ErrorBarCallCameraAccessDenied',
+    callCameraAccessDeniedSafari: 'ErrorBarCallCameraAccessDenied',
     callCameraAlreadyInUse: 'ErrorBarCallCameraAlreadyInUse',
     callVideoStoppedBySystem: 'ErrorBarCallVideoStoppedBySystem',
     callVideoRecoveredBySystem: 'ErrorBarCallVideoRecoveredBySystem',
@@ -8642,6 +8657,164 @@ const rootLayoutStyle$1 = {
     root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
 };
 
+/**
+ * Calculates the participants that should be rendered based on the list of dominant
+ * speakers and currently rendered participants in a call.
+ * @param args - SmartDominantSpeakerParticipantsArgs
+ * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}
+ */
+const smartDominantSpeakerParticipants = (args) => {
+    const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;
+    // Don't apply any logic if total number of video streams is less than max dominant speakers.
+    if (participants.length <= maxDominantSpeakers) {
+        return participants;
+    }
+    const participantsMap = participantsById(participants);
+    // Only use the Max allowed dominant speakers that exist in participants
+    const dominantSpeakerIds = Array.from(new Set(dominantSpeakers).values())
+        .filter((id) => !!participantsMap[id])
+        .slice(0, maxDominantSpeakers);
+    const lastVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId);
+    const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
+    const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));
+    // Remove participants that are no longer dominant and replace them with new dominant speakers.
+    for (let index = 0; index < maxDominantSpeakers; index++) {
+        const newVisibleParticipantId = newVisibleParticipantIds[index];
+        if (newVisibleParticipantId === undefined || !dominantSpeakerIds.includes(newVisibleParticipantId)) {
+            const replacement = newDominantSpeakerIds.shift();
+            if (!replacement) {
+                break;
+            }
+            newVisibleParticipantIds[index] = replacement;
+        }
+    }
+    const removedVisibleParticipantIds = lastVisibleParticipantIds.filter((p) => !newVisibleParticipantIds.includes(p));
+    removedVisibleParticipantIds.forEach((p) => newVisibleParticipantIds.push(p));
+    const newVisibleParticipantIdSet = new Set(newVisibleParticipantIds);
+    const leftoverParticipants = participants.filter((p) => !newVisibleParticipantIdSet.has(p.userId));
+    leftoverParticipants.forEach((p) => {
+        newVisibleParticipantIds.push(p.userId);
+    });
+    // newVisibleParticipantIds can contain identifiers for participants that are no longer in the call. So we ignore those IDs.
+    const newVisibleParticipants = newVisibleParticipantIds
+        .map((participantId) => participantsMap[participantId])
+        .filter((p) => !!p);
+    return newVisibleParticipants;
+};
+const participantsById = (participants) => {
+    const response = {};
+    participants.forEach((p) => (response[p.userId] = p));
+    return response;
+};
+
+// Copyright (c) Microsoft Corporation.
+const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
+const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
+/**
+ * @private
+ */
+const useFloatingLocalVideoLayout = (props) => {
+    var _a, _b;
+    const visibleVideoParticipants = React.useRef([]);
+    const visibleAudioParticipants = React.useRef([]);
+    const { remoteParticipants, dominantSpeakers, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS, isScreenShareActive = false } = props;
+    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleVideoParticipants.current,
+        maxDominantSpeakers: maxRemoteVideoStreams
+    }).slice(0, maxRemoteVideoStreams);
+    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' ));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
+    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
+        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
+        dominantSpeakers,
+        lastVisibleParticipants: visibleAudioParticipants.current,
+        maxDominantSpeakers: maxAudioDominantSpeakers
+    });
+    const getGridParticipants = React.useCallback(() => {
+        if (isScreenShareActive) {
+            return [];
+        }
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return visibleVideoParticipants.current.length > 0
+            ? visibleVideoParticipants.current
+            : visibleAudioParticipants.current.concat(callingParticipants);
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive
+    ]);
+    const gridParticipants = getGridParticipants();
+    const getHorizontalGalleryRemoteParticipants = React.useCallback(() => {
+        if (isScreenShareActive) {
+            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));
+        }
+        else {
+            // If screen sharing is not active, then assign all video tiles as grid tiles.
+            // If there are no video tiles, then assign audio tiles as grid tiles.
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleVideoParticipants.current.length > 0
+                ? visibleAudioParticipants.current.concat(callingParticipants)
+                : [];
+        }
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive
+    ]);
+    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
+    return { gridParticipants, horizontalGalleryParticipants };
+};
+/**
+ * @private
+ */
+const usePinnedParticipantLayout = (props) => {
+    // map remote participants by userId
+    const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
+        map[remoteParticipant.userId] = remoteParticipant;
+        return map;
+    }, {});
+    // count pinned participants with video
+    let pinnedParticipantsWithVideoOnCount = 0;
+    // get pinned participants in the same order of pinned participant user ids using remoteParticipantMap
+    const pinnedParticipants = [];
+    props.pinnedParticipantUserIds.forEach((id) => {
+        var _a;
+        const pinnedParticipant = remoteParticipantMap[id];
+        if (pinnedParticipant) {
+            pinnedParticipants.push(pinnedParticipant);
+            if ((_a = pinnedParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
+                pinnedParticipantsWithVideoOnCount++;
+            }
+        }
+    });
+    // get unpinned participants by filtering all remote participants using a set of pinned participant user ids
+    const pinnedParticipantUserIdSet = new Set(props.pinnedParticipantUserIds);
+    const unpinnedParticipants = props.remoteParticipants.filter((p) => !pinnedParticipantUserIdSet.has(p.userId));
+    const floatingLocalVideoLayoutProps = Object.assign(Object.assign({}, props), { 
+        // if there are pinned participants then we should only consider unpinned participants
+        remoteParticipants: unpinnedParticipants, 
+        // if there is a maximum of remote video streams we need to subtract pinned participants with video
+        maxRemoteVideoStreams: props.maxRemoteVideoStreams
+            ? props.maxRemoteVideoStreams - pinnedParticipantsWithVideoOnCount
+            : undefined });
+    const floatingLocalVideoLayout = useFloatingLocalVideoLayout(floatingLocalVideoLayoutProps);
+    if (props.pinnedParticipantUserIds.length === 0) {
+        return floatingLocalVideoLayout;
+    }
+    return {
+        gridParticipants: props.isScreenShareActive ? [] : pinnedParticipants,
+        horizontalGalleryParticipants: props.isScreenShareActive
+            ? pinnedParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)
+            : floatingLocalVideoLayout.gridParticipants.concat(floatingLocalVideoLayout.horizontalGalleryParticipants)
+    };
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -8791,14 +8964,84 @@ const calculateChildrenPerPage = (args) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
 /**
  * Small floating modal width and height in rem for small screen
  */
-const SMALL_FLOATING_MODAL_SIZE_PX$1 = { width: 64, height: 88 };
+const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
 /**
  * Large floating modal width and height in rem for large screen
+ * Aspect ratio: 16:9
+ */
+const LARGE_FLOATING_MODAL_SIZE_PX = { width: 215, height: 120 };
+/**
+ * @private
+ * z-index to ensure that the local video tile is above the video gallery.
  */
-const LARGE_FLOATING_MODAL_SIZE_PX$1 = { width: 160, height: 120 };
+const LOCAL_VIDEO_TILE_ZINDEX = 2;
+/**
+ * @private
+ */
+const localVideoTileContainerStyle = (theme, isNarrow) => {
+    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
+        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
+        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
+};
+/**
+ * @private
+ */
+const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
+    return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
+        root: { boxShadow: theme.effects.elevation8 }
+    });
+};
+/**
+ * @private
+ */
+const floatingLocalVideoModalStyle = (theme, isNarrow) => {
+    return react.concatStyleSets({
+        main: localVideoTileContainerStyle(theme, isNarrow)
+    }, {
+        main: {
+            boxShadow: theme.effects.elevation8,
+            ':focus-within': {
+                boxShadow: theme.effects.elevation16,
+                border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
+            }
+        }
+    }, localVideoModalStyles);
+};
+/**
+ * Padding equal to the amount the modal should stay inside the bounds of the container.
+ * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
+ * @private
+ */
+const localVideoTileOuterPaddingPX = 8;
+/**
+ * @private
+ */
+const floatingLocalVideoTileStyle = {
+    root: {
+        position: 'absolute',
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
+        height: '100%',
+        width: '100%'
+    }
+};
+/**
+ * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
+ * @private
+ */
+const localVideoModalStyles = {
+    keyboardMoveIconContainer: {
+        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
@@ -8809,8 +9052,8 @@ const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
             : `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
         width: shouldFloatLocalVideo
             ? isNarrow
-                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX$1.width)})`
-                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX$1.width)})`
+                ? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
+                : `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
             : '100%',
         paddingRight: '0.5rem'
     };
@@ -8854,132 +9097,20 @@ const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
 
 // Copyright (c) Microsoft Corporation.
 /**
- * A ResponsiveHorizontalGallery styled for the @link{VideoGallery}
- */
-const VideoGalleryResponsiveHorizontalGallery = (props) => {
-    const { shouldFloatLocalVideo = false, isNarrow = false, horizontalGalleryElements, styles } = props;
-    const containerStyles = React.useMemo(() => horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), [shouldFloatLocalVideo, isNarrow]);
-    const galleryStyles = React.useMemo(() => react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles), [isNarrow, styles]);
-    return (React__default['default'].createElement(react.Stack, { styles: { root: { paddingTop: '0.5rem' } } },
-        React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, horizontalGalleryStyles: galleryStyles, childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryElements)));
-};
-
-/**
- * Calculates the participants that should be rendered based on the list of dominant
- * speakers and currently rendered participants in a call.
- * @param args - SmartDominantSpeakerParticipantsArgs
- * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}
- */
-const smartDominantSpeakerParticipants = (args) => {
-    const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;
-    // Don't apply any logic if total number of video streams is less than max dominant speakers.
-    if (participants.length <= maxDominantSpeakers) {
-        return participants;
-    }
-    const participantsMap = participantsById(participants);
-    // Only use the Max allowed dominant speakers that exist in participants
-    const dominantSpeakerIds = Array.from(new Set(dominantSpeakers).values())
-        .filter((id) => !!participantsMap[id])
-        .slice(0, maxDominantSpeakers);
-    const lastVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId);
-    const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
-    const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));
-    // Remove participants that are no longer dominant and replace them with new dominant speakers.
-    for (let index = 0; index < maxDominantSpeakers; index++) {
-        const newVisibleParticipantId = newVisibleParticipantIds[index];
-        if (newVisibleParticipantId === undefined || !dominantSpeakerIds.includes(newVisibleParticipantId)) {
-            const replacement = newDominantSpeakerIds.shift();
-            if (!replacement) {
-                break;
-            }
-            newVisibleParticipantIds[index] = replacement;
-        }
-    }
-    const removedVisibleParticipantIds = lastVisibleParticipantIds.filter((p) => !newVisibleParticipantIds.includes(p));
-    removedVisibleParticipantIds.forEach((p) => newVisibleParticipantIds.push(p));
-    const newVisibleParticipantIdSet = new Set(newVisibleParticipantIds);
-    const leftoverParticipants = participants.filter((p) => !newVisibleParticipantIdSet.has(p.userId));
-    leftoverParticipants.forEach((p) => {
-        newVisibleParticipantIds.push(p.userId);
-    });
-    // newVisibleParticipantIds can contain identifiers for participants that are no longer in the call. So we ignore those IDs.
-    const newVisibleParticipants = newVisibleParticipantIds
-        .map((participantId) => participantsMap[participantId])
-        .filter((p) => !!p);
-    return newVisibleParticipants;
-};
-const participantsById = (participants) => {
-    const response = {};
-    participants.forEach((p) => (response[p.userId] = p));
-    return response;
-};
-
-// Copyright (c) Microsoft Corporation.
-const DEFAULT_MAX_REMOTE_VIDEOSTREAMS = 4;
-const DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS = 6;
-/**
- * @private
- */
-const useFloatingLocalVideoLayout = (props) => {
-    var _a, _b;
-    const visibleVideoParticipants = React.useRef([]);
-    const visibleAudioParticipants = React.useRef([]);
-    const { remoteParticipants, dominantSpeakers, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEOSTREAMS, maxAudioDominantSpeakers = DEFAULT_MAX_AUDIO_DOMINANT_SPEAKERS, isScreenShareActive = false } = props;
-    visibleVideoParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_a = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; })) !== null && _a !== void 0 ? _a : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleVideoParticipants.current,
-        maxDominantSpeakers: maxRemoteVideoStreams
-    }).slice(0, maxRemoteVideoStreams);
-    const visibleVideoParticipantsSet = new Set(visibleVideoParticipants.current.map((p) => p.userId));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipants = remoteParticipants.filter((p) => p.state === ('Connecting' ));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
-    visibleAudioParticipants.current = smartDominantSpeakerParticipants({
-        participants: (_b = remoteParticipants === null || remoteParticipants === void 0 ? void 0 : remoteParticipants.filter((p) => !visibleVideoParticipantsSet.has(p.userId) &&
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId))) !== null && _b !== void 0 ? _b : [],
-        dominantSpeakers,
-        lastVisibleParticipants: visibleAudioParticipants.current,
-        maxDominantSpeakers: maxAudioDominantSpeakers
-    });
-    const getGridParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
-            return [];
-        }
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return visibleVideoParticipants.current.length > 0
-            ? visibleVideoParticipants.current
-            : visibleAudioParticipants.current.concat(callingParticipants);
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive
-    ]);
-    const gridParticipants = getGridParticipants();
-    const getHorizontalGalleryRemoteParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
-            // If screen sharing is active, assign video and audio participants as horizontal gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleVideoParticipants.current.concat(visibleAudioParticipants.current.concat(callingParticipants));
-        }
-        else {
-            // If screen sharing is not active, then assign all video tiles as grid tiles.
-            // If there are no video tiles, then assign audio tiles as grid tiles.
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleVideoParticipants.current.length > 0
-                ? visibleAudioParticipants.current.concat(callingParticipants)
-                : [];
-        }
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive
-    ]);
-    const horizontalGalleryParticipants = getHorizontalGalleryRemoteParticipants();
-    return { gridParticipants, horizontalGalleryParticipants };
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
+ * A ResponsiveHorizontalGallery styled for the {@link VideoGallery}
+ *
+ * @private
+ */
+const VideoGalleryResponsiveHorizontalGallery = (props) => {
+    const { shouldFloatLocalVideo = false, isNarrow = false, horizontalGalleryElements, styles } = props;
+    const containerStyles = React.useMemo(() => horizontalGalleryContainerStyle(shouldFloatLocalVideo, isNarrow), [shouldFloatLocalVideo, isNarrow]);
+    const galleryStyles = React.useMemo(() => react.concatStyleSets(horizontalGalleryStyle(isNarrow), styles), [isNarrow, styles]);
+    return (React__default['default'].createElement(react.Stack, { styles: { root: { paddingTop: '0.5rem' } } },
+        React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, horizontalGalleryStyles: galleryStyles, childWidthRem: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width : LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP }, horizontalGalleryElements)));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
  * DefaultLayout displays remote participants, local video component, and screen sharing component in
  * a grid and horizontal gallery.
  *
@@ -9015,83 +9146,6 @@ const DefaultLayout = (props) => {
         horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery }))));
 };
 
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
-/**
- * Small floating modal width and height in rem for small screen
- */
-const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
-/**
- * Large floating modal width and height in rem for large screen
- */
-const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
-/**
- * @private
- * z-index to ensure that the local video tile is above the video gallery.
- */
-const LOCAL_VIDEO_TILE_ZINDEX = 2;
-/**
- * @private
- */
-const localVideoTileContainerStyle = (theme, isNarrow) => {
-    return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
-        ? { left: _pxToRem(localVideoTileOuterPaddingPX) }
-        : { right: _pxToRem(localVideoTileOuterPaddingPX) }));
-};
-/**
- * @private
- */
-const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
-    return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
-        root: { boxShadow: theme.effects.elevation8 }
-    });
-};
-/**
- * @private
- */
-const floatingLocalVideoModalStyle = (theme, isNarrow) => {
-    return react.concatStyleSets({
-        main: localVideoTileContainerStyle(theme, isNarrow)
-    }, {
-        main: {
-            boxShadow: theme.effects.elevation8,
-            ':focus-within': {
-                boxShadow: theme.effects.elevation16,
-                border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
-            }
-        }
-    }, localVideoModalStyles);
-};
-/**
- * Padding equal to the amount the modal should stay inside the bounds of the container.
- * i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
- * @private
- */
-const localVideoTileOuterPaddingPX = 8;
-/**
- * @private
- */
-const floatingLocalVideoTileStyle = {
-    root: {
-        position: 'absolute',
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX,
-        height: '100%',
-        width: '100%'
-    }
-};
-/**
- * Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
- * @private
- */
-const localVideoModalStyles = {
-    keyboardMoveIconContainer: {
-        zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 const animationDuration = react.AnimationVariables.durationValue2;
 const ZERO = { x: 0, y: 0 };
@@ -9876,6 +9930,56 @@ const FloatingLocalVideoLayout = (props) => {
             React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }))));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * PinnedParticipantsLayout displays remote participants and a screen sharing component in
+ * a grid and horizontal gallery while floating the local video
+ *
+ * @private
+ */
+const PinnedParticipantsLayout = (props) => {
+    const { remoteParticipants = [], pinnedParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, showCameraSwitcherInLocalPreview, parentWidth, parentHeight, isLocalVideoFloating } = props;
+    const theme = useTheme();
+    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+    const pinnedParticipantsLayout = usePinnedParticipantLayout({
+        remoteParticipants,
+        pinnedParticipantUserIds: pinnedParticipants,
+        dominantSpeakers,
+        maxRemoteVideoStreams,
+        isScreenShareActive: !!screenShareComponent
+    });
+    let activeVideoStreams = 0;
+    const shouldFloatLocalVideo = isLocalVideoFloating && remoteParticipants.length > 0;
+    const gridTiles = pinnedParticipantsLayout.gridParticipants.map((p) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    if (localVideoComponent && !shouldFloatLocalVideo) {
+        gridTiles.push(localVideoComponent);
+    }
+    const horizontalGalleryTiles = pinnedParticipantsLayout.horizontalGalleryParticipants.map((p) => {
+        var _a, _b;
+        return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
+            : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
+    });
+    const layerHostId = reactHooks.useId('layerhost');
+    const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
+    // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
+    showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, isNarrow), {
+            boxShadow: theme.effects.elevation8,
+            zIndex: LOCAL_VIDEO_TILE_ZINDEX
+        }) }, localVideoComponent)) : horizontalGalleryTiles.length > 0 ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, isNarrow)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, isNarrow: isNarrow, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+    return (React__default['default'].createElement(react.Stack, { styles: rootLayoutStyle },
+        wrappedLocalVideoComponent,
+        React__default['default'].createElement(react.Stack, { horizontal: false, styles: innerLayoutStyle },
+            screenShareComponent ? (screenShareComponent) : (React__default['default'].createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
+            horizontalGalleryTiles.length > 0 && (React__default['default'].createElement(VideoGalleryResponsiveHorizontalGallery, { isNarrow: isNarrow, shouldFloatLocalVideo: true, horizontalGalleryElements: horizontalGalleryTiles, styles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery })),
+            React__default['default'].createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }))));
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -9889,7 +9993,7 @@ const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
  * @public
  */
 const VideoGallery = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { localParticipant, remoteParticipants = [], localVideoViewOptions, remoteVideoViewOptions, dominantSpeakers, onRenderLocalVideoTile, onRenderRemoteVideoTile, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView, styles, layout, onRenderAvatar, showMuteIndicator, maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
@@ -9900,6 +10004,11 @@ const VideoGallery = (props) => {
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
     const isNarrow = containerWidth ? isNarrowWidth(containerWidth) : false;
+    /* @conditional-compile-remove(pinned-participants) */
+    const [pinnedParticipantsState, _] = React__default['default'].useState([]);
+    /* @conditional-compile-remove(pinned-participants) */
+    // Use pinnedParticipants from props but if it is not defined use the maintained state of pinned participants
+    const pinnedParticipants = (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState;
     /* @conditional-compile-remove(rooms) */
     const permissions = _usePermissions();
     /**
@@ -9960,13 +10069,50 @@ const VideoGallery = (props) => {
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React__default['default'].createElement(LocalScreenShare, { localParticipant: localParticipant });
-    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_a = screenShareParticipant.screenShareStream) === null || _a === void 0 ? void 0 : _a.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.isReceiving })));
+    const remoteScreenShareComponent = screenShareParticipant && (React__default['default'].createElement(RemoteScreenShare, Object.assign({}, screenShareParticipant, { renderElement: (_b = screenShareParticipant.screenShareStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateRemoteStreamView: onCreateRemoteStreamView, onDisposeRemoteStreamView: onDisposeRemoteStreamView, isReceiving: (_c = screenShareParticipant.screenShareStream) === null || _c === void 0 ? void 0 : _c.isReceiving })));
     const screenShareComponent = remoteScreenShareComponent
         ? remoteScreenShareComponent
         : localParticipant.isScreenSharingOn
             ? localScreenShareStreamComponent
             : undefined;
-    const videoGalleryLayout = layout === 'floatingLocalVideo' ? (React__default['default'].createElement(FloatingLocalVideoLayout, { remoteParticipants: remoteParticipants, onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile, localVideoComponent: localVideoTile, screenShareComponent: screenShareComponent, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, maxRemoteVideoStreams: maxRemoteVideoStreams, dominantSpeakers: dominantSpeakers, parentWidth: containerWidth, parentHeight: containerHeight, styles: styles })) : (React__default['default'].createElement(DefaultLayout, { remoteParticipants: remoteParticipants, onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile, localVideoComponent: localVideoTile, screenShareComponent: screenShareComponent, maxRemoteVideoStreams: maxRemoteVideoStreams, dominantSpeakers: dominantSpeakers, parentWidth: containerWidth, styles: styles }));
+    const layoutProps = React.useMemo(() => ({
+        remoteParticipants,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants,
+        screenShareComponent,
+        showCameraSwitcherInLocalPreview,
+        maxRemoteVideoStreams,
+        dominantSpeakers,
+        styles,
+        onRenderRemoteParticipant: onRenderRemoteVideoTile !== null && onRenderRemoteVideoTile !== void 0 ? onRenderRemoteVideoTile : defaultOnRenderVideoTile,
+        localVideoComponent: localVideoTile,
+        parentWidth: containerWidth,
+        parentHeight: containerHeight,
+        isLocalVideoFloating: layout === 'floatingLocalVideo'
+    }), [
+        remoteParticipants,
+        screenShareComponent,
+        showCameraSwitcherInLocalPreview,
+        maxRemoteVideoStreams,
+        dominantSpeakers,
+        styles,
+        localVideoTile,
+        containerWidth,
+        containerHeight,
+        onRenderRemoteVideoTile,
+        defaultOnRenderVideoTile,
+        layout,
+        /* @conditional-compile-remove(pinned-participants) */ pinnedParticipants
+    ]);
+    const videoGalleryLayout = React.useMemo(() => {
+        /* @conditional-compile-remove(pinned-participants) */
+        if (layoutProps.pinnedParticipants.length > 0) {
+            return React__default['default'].createElement(PinnedParticipantsLayout, Object.assign({}, layoutProps));
+        }
+        if (layout === 'floatingLocalVideo') {
+            return React__default['default'].createElement(FloatingLocalVideoLayout, Object.assign({}, layoutProps));
+        }
+        return React__default['default'].createElement(DefaultLayout, Object.assign({}, layoutProps));
+    }, [layout, layoutProps]);
     return (React__default['default'].createElement("div", { "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) }, videoGalleryLayout));
 };
 
@@ -10708,7 +10854,9 @@ const CameraAndMicrophoneDomainPermissions = (props) => {
     const locale = useLocale$1().strings;
     /* @conditional-compile-remove(call-readiness) */
     const strings = useShallowMerge(props.type === 'denied'
-        ? locale.CameraAndMicrophoneDomainPermissionsDenied
+        ? props.browserHint === 'safari'
+            ? locale.CameraAndMicrophoneDomainPermissionsDeniedSafari
+            : locale.CameraAndMicrophoneDomainPermissionsDenied
         : props.type === 'request'
             ? locale.CameraAndMicrophoneDomainPermissionsRequest
             : locale.CameraAndMicrophoneDomainPermissionsCheck, props.strings);
@@ -10733,7 +10881,9 @@ const MicrophoneDomainPermissions = (props) => {
     const locale = useLocale$1().strings;
     /* @conditional-compile-remove(call-readiness) */
     const strings = useShallowMerge(props.type === 'denied'
-        ? locale.MicrophoneDomainPermissionsDenied
+        ? props.browserHint === 'safari'
+            ? locale.MicrophoneDomainPermissionsDeniedSafari
+            : locale.MicrophoneDomainPermissionsDenied
         : props.type === 'request'
             ? locale.MicrophoneDomainPermissionsRequest
             : locale.MicrophoneDomainPermissionsCheck, props.strings);
@@ -10754,7 +10904,9 @@ const CameraDomainPermissions = (props) => {
     const locale = useLocale$1().strings;
     /* @conditional-compile-remove(call-readiness) */
     const strings = useShallowMerge(props.type === 'denied'
-        ? locale.CameraDomainPermissionsDenied
+        ? props.browserHint === 'safari'
+            ? locale.CameraDomainPermissionsDeniedSafari
+            : locale.CameraDomainPermissionsDenied
         : props.type === 'request'
             ? locale.CameraDomainPermissionsRequest
             : locale.CameraDomainPermissionsCheck, props.strings);
@@ -10780,6 +10932,7 @@ const ParticipantsButton = (props) => {
     var _a, _b, _c, _d;
     const { callInvitationURL, styles, onMuteAll, onRenderIcon, onRenderParticipantList, participants, myUserId, excludeMe, onRenderParticipant, onRenderAvatar, onRemoveParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
     const disabled = props.disabled;
+    const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = React.useState('');
     const onRenderPeopleIcon = () => (React__default['default'].createElement(_HighContrastAwareIcon, { disabled: disabled, iconName: "ControlButtonParticipants" }));
     const ids = useIdentifiers();
     const onMuteAllCallback = React.useCallback(() => {
@@ -10810,6 +10963,19 @@ const ParticipantsButton = (props) => {
     const localeStrings = useLocale$1().strings.participantsButton;
     const strings = React.useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     const participantCount = participants.length;
+    /**
+     * sets the announcement string for when the link is copied.
+     */
+    const toggleAnnouncerString = React.useCallback(() => {
+        setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
+        /**
+         * Clears the announcer string after the user clicks the
+         * copyInviteLink button allowing it to be re-announced.
+         */
+        setTimeout(() => {
+            setCopyInviteLinkAnnouncerStrings('');
+        }, 3000);
+    }, [strings.copyInviteLinkActionedAriaLabel]);
     const generateDefaultParticipantsSubMenuProps = React.useCallback(() => {
         var _a;
         const items = [];
@@ -10889,7 +11055,10 @@ const ParticipantsButton = (props) => {
                 title: strings.copyInviteLinkButtonLabel,
                 itemProps: { styles: (_b = styles === null || styles === void 0 ? void 0 : styles.menuStyles) === null || _b === void 0 ? void 0 : _b.menuItemStyles },
                 iconProps: { iconName: 'Link' },
-                onClick: onCopyCallback
+                onClick: () => {
+                    onCopyCallback();
+                    toggleAnnouncerString();
+                }
             });
         }
         return menuProps;
@@ -10904,9 +11073,12 @@ const ParticipantsButton = (props) => {
         excludeMe,
         ids.participantButtonPeopleMenuItem,
         generateDefaultParticipantsSubMenuProps,
-        onCopyCallback
+        onCopyCallback,
+        toggleAnnouncerString
     ]);
-    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { disabled: disabled, menuProps: (_c = props.menuProps) !== null && _c !== void 0 ? _c : defaultMenuProps, menuIconProps: { hidden: true }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderPeopleIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'participantsButtonLabel' })));
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(Announcer, { announcementString: copyInviteLinkAnnouncerStrings, ariaLive: 'polite' }),
+        React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { disabled: disabled, menuProps: (_c = props.menuProps) !== null && _c !== void 0 ? _c : defaultMenuProps, menuIconProps: { hidden: true }, onRenderIcon: onRenderIcon !== null && onRenderIcon !== void 0 ? onRenderIcon : onRenderPeopleIcon, strings: strings, labelKey: (_d = props.labelKey) !== null && _d !== void 0 ? _d : 'participantsButtonLabel' }))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -11810,7 +11982,7 @@ const continueAnywayButtonStyles = (theme) => {
 // Copyright (c) Microsoft Corporation.
 /* @conditional-compile-remove(unsupported-browser) */
 const UnsupportedEnvironmentContainer = (props) => {
-    const { onTroubleshootingClick, strings, onContinueClick } = props;
+    const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
     const theme = useTheme();
     return (React__default['default'].createElement(react.Stack, { styles: containerStyles$2, tokens: { childrenGap: '2rem' } },
         React__default['default'].createElement(react.Icon, { iconName: "UnsupportedEnvironmentWarning", "data-ui-id": "unsupported-environment-icon" }),
@@ -11818,7 +11990,7 @@ const UnsupportedEnvironmentContainer = (props) => {
             React__default['default'].createElement(react.Text, { styles: mainTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
             React__default['default'].createElement(react.Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
         onTroubleshootingClick && (React__default['default'].createElement(react.Link, { styles: linkTextStyles, onClick: onTroubleshootingClick, "data-ui-id": "unsupported-environment-link" }, strings === null || strings === void 0 ? void 0 : strings.moreHelpLinkText)),
-        onContinueClick && (React__default['default'].createElement(react.DefaultButton, { "data-ui-id": "allowUnsupportedBrowserButton", styles: continueAnywayButtonStyles(theme), onClick: onContinueClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText))));
+        onContinueAnywayClick && (React__default['default'].createElement(react.DefaultButton, { "data-ui-id": "allowUnsupportedBrowserButton", styles: continueAnywayButtonStyles(theme), onClick: onContinueAnywayClick }, strings === null || strings === void 0 ? void 0 : strings.continueAnywayButtonText))));
 };
 /**
  * UI to display to the user that the environment they are using is not supported by calling application.
@@ -11849,8 +12021,8 @@ const UnsupportedBrowser = (props) => {
  * @beta
  */
 const UnsupportedBrowserVersion = (props) => {
-    const { onTroubleshootingClick, strings, onContinueClick } = props;
-    return (React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings, onContinueClick: onContinueClick }));
+    const { onTroubleshootingClick, strings, onContinueAnywayClick } = props;
+    return (React__default['default'].createElement(UnsupportedEnvironment, { onTroubleshootingClick: onTroubleshootingClick, strings: strings, onContinueAnywayClick: onContinueAnywayClick }));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -12324,8 +12496,8 @@ const useSelector$4 = (selector, selectorProps) => {
  *
  * @public
  */
-const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagnostics, getDeviceManager$1], (latestErrors, diagnostics, deviceManager) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagnostics, getDeviceManager$1, getEnvironmentInfo], (latestErrors, diagnostics, deviceManager, environmentInfo) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     // The order in which the errors are returned is significant: The `ErrorBar` shows errors on the UI in that order.
     // There are several options for the ordering:
     //   - Sorted by when the errors happened (latest first / oldest first).
@@ -12334,6 +12506,10 @@ const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagno
     // We chose to stable sort by error type: We intend to show only a small number of errors on the UI and we do not
     // have timestamps for errors.
     const activeErrorMessages = [];
+    const isSafari = () => {
+        /* @conditional-compile-remove(unsupported-browser) */
+        return (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.environment.browser) === 'safari';
+    };
     // Errors reported via diagnostics are more reliable than from API method failures, so process those first.
     if (((_a = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.network.latest.networkReceiveQuality) === null || _a === void 0 ? void 0 : _a.value) === communicationCalling.DiagnosticQuality.Bad ||
         ((_b = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.network.latest.networkReceiveQuality) === null || _b === void 0 ? void 0 : _b.value) === communicationCalling.DiagnosticQuality.Poor) {
@@ -12345,10 +12521,13 @@ const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagno
     if (((_d = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.noMicrophoneDevicesEnumerated) === null || _d === void 0 ? void 0 : _d.value) === true) {
         activeErrorMessages.push({ type: 'callNoMicrophoneFound' });
     }
-    if (((_e = deviceManager.deviceAccess) === null || _e === void 0 ? void 0 : _e.audio) === false) {
+    if (((_e = deviceManager.deviceAccess) === null || _e === void 0 ? void 0 : _e.audio) === false && isSafari()) {
+        activeErrorMessages.push({ type: 'callMicrophoneAccessDeniedSafari' });
+    }
+    if (((_f = deviceManager.deviceAccess) === null || _f === void 0 ? void 0 : _f.audio) === false && !isSafari()) {
         activeErrorMessages.push({ type: 'callMicrophoneAccessDenied' });
     }
-    if (((_f = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.microphonePermissionDenied) === null || _f === void 0 ? void 0 : _f.value) === true) {
+    if (((_g = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.microphonePermissionDenied) === null || _g === void 0 ? void 0 : _g.value) === true) {
         activeErrorMessages.push({ type: 'callMacOsMicrophoneAccessDenied' });
     }
     const microphoneMuteUnexpectedlyDiagnostic = (diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.microphoneMuteUnexpectedly) || (diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.microphoneNotFunctioning);
@@ -12373,18 +12552,21 @@ const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagno
             activeErrorMessages.push({ type: 'callVideoRecoveredBySystem' });
         }
     }
-    if (((_g = deviceManager.deviceAccess) === null || _g === void 0 ? void 0 : _g.video) === false) {
+    if (((_h = deviceManager.deviceAccess) === null || _h === void 0 ? void 0 : _h.video) === false && isSafari()) {
+        activeErrorMessages.push({ type: 'callCameraAccessDeniedSafari' });
+    }
+    else if (((_j = deviceManager.deviceAccess) === null || _j === void 0 ? void 0 : _j.video) === false) {
         activeErrorMessages.push({ type: 'callCameraAccessDenied' });
     }
     else {
-        if (((_h = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.cameraFreeze) === null || _h === void 0 ? void 0 : _h.value) === true) {
+        if (((_k = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.cameraFreeze) === null || _k === void 0 ? void 0 : _k.value) === true) {
             activeErrorMessages.push({ type: 'callCameraAlreadyInUse' });
         }
     }
-    if (((_j = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.cameraPermissionDenied) === null || _j === void 0 ? void 0 : _j.value) === true) {
+    if (((_l = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.cameraPermissionDenied) === null || _l === void 0 ? void 0 : _l.value) === true) {
         activeErrorMessages.push({ type: 'callMacOsCameraAccessDenied' });
     }
-    if (((_k = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.screenshareRecordingDisabled) === null || _k === void 0 ? void 0 : _k.value) === true) {
+    if (((_m = diagnostics === null || diagnostics === void 0 ? void 0 : diagnostics.media.latest.screenshareRecordingDisabled) === null || _m === void 0 ? void 0 : _m.value) === true) {
         activeErrorMessages.push({ type: 'callMacOsScreenShareAccessDenied' });
     }
     // Prefer to show errors with privacy implications.
@@ -12393,7 +12575,7 @@ const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagno
     appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.stopScreenSharing', 'stopScreenShareGeneric');
     appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.startVideo', 'startVideoGeneric');
     appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.unmute', 'unmuteGeneric');
-    if (((_l = latestErrors['CallAgent.join']) === null || _l === void 0 ? void 0 : _l.message) === 'CallAgent.join: Invalid meeting link') {
+    if (((_o = latestErrors['CallAgent.join']) === null || _o === void 0 ? void 0 : _o.message) === 'CallAgent.join: Invalid meeting link') {
         appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'CallAgent.join', 'failedToJoinCallInvalidMeetingLink');
     }
     else {
@@ -15020,6 +15202,14 @@ const isValidIdentifier = (identifier) => {
         communicationCommon.isMicrosoftTeamsUserIdentifier(identifier) ||
         communicationCommon.isUnknownIdentifier(identifier));
 };
+/**
+ * Check if we are using safari browser
+ * @private
+ */
+const _isSafari = (environmentInfo) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.environment.browser) === 'safari';
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -16689,7 +16879,7 @@ const Microphone = (props) => {
         : {};
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     // tab focus on MicrophoneButton on page load
-    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled })));
+    return (React__default['default'].createElement(MicrophoneButton, Object.assign({ autoFocus: true, "data-ui-id": "call-composite-microphone-button" }, microphoneButtonProps, { showLabel: props.displayType !== 'compact', styles: styles }, microphoneButtonStrings, { enableDeviceSelectionMenu: props.splitButtonsForDeviceSelection, disabled: microphoneButtonProps.disabled || props.disabled })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17120,14 +17310,6 @@ const bannerNotificationStyles = {
         pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container
     }
 };
-/**
- * @private
- */
-const callArrangementContainerStyles = {
-    root: {
-        flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar
-    }
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -17706,7 +17888,21 @@ function PeoplePaneAddPersonIconTrampoline() {
 const AddPeopleButton = (props) => {
     const { inviteLink, mobileView, strings, participantList } = props;
     const theme = react.useTheme();
+    const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = React.useState('');
     React.useMemo(() => react.concatStyleSets(copyLinkButtonStyles, themedCopyLinkButtonStyles$1(mobileView, theme)), [mobileView, theme]);
+    /**
+     * sets the announcement string for when the link is copied.
+     */
+    React.useCallback(() => {
+        setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);
+        /**
+         * Clears the announcer string after the user clicks the
+         * copyInviteLink button allowing it to be re-announced.
+         */
+        setTimeout(() => {
+            setCopyInviteLinkAnnouncerStrings('');
+        }, 3000);
+    }, [strings.copyInviteLinkActionedAriaLabel]);
     /* @conditional-compile-remove(PSTN-calls) */
     if (mobileView) {
         return (React__default['default'].createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId }));
@@ -17878,7 +18074,7 @@ const hiddenStyles = {
  */
 const sidePaneStyles = {
     root: {
-        height: '100%',
+        height: 'auto',
         padding: '0.5rem 0.25rem',
         maxWidth: '21.5rem'
     }
@@ -18109,29 +18305,29 @@ const CallArrangement = (props) => {
     /* @conditional-compile-remove(rooms) */
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
     if (!rolePermissions.cameraButton && props.errorBarProps) {
-        errorBarProps = Object.assign(Object.assign({}, props.errorBarProps), { activeErrorMessages: props.errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied') });
+        errorBarProps = Object.assign(Object.assign({}, props.errorBarProps), { activeErrorMessages: props.errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari') });
     }
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles) },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
-            React__default['default'].createElement(react.Stack, { horizontal: true, grow: true, styles: callArrangementContainerStyles },
+            React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
                 React__default['default'].createElement(react.Stack.Item, { styles: notificationsContainerStyles },
                     React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
                         React__default['default'].createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
                     errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
                         React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)))),
                     canUnmute && !!props.mutedNotificationProps && React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps))),
-                ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
-                    /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                    !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
-                    React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
-                        /* @conditional-compile-remove(one-to-n-calling) */
-                        peopleButtonChecked: activePane === 'people', 
-                        /* @conditional-compile-remove(one-to-n-calling) */
-                        onPeopleButtonClicked: togglePeoplePane })))),
                 React__default['default'].createElement(react.Stack.Item, { grow: true, style: callCompositeContainerFlex() },
                     React__default['default'].createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true }, props.onRenderGalleryContent && (React__default['default'].createElement(react.Stack, { verticalFill: true, styles: mediaGalleryContainerStyles }, props.onRenderGalleryContent())))),
                 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
-                callPaneContent()))));
+                callPaneContent()),
+            ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false &&
+                /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+                !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: callControlsContainerStyles },
+                React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+                    /* @conditional-compile-remove(one-to-n-calling) */
+                    peopleButtonChecked: activePane === 'people', 
+                    /* @conditional-compile-remove(one-to-n-calling) */
+                    onPeopleButtonClicked: togglePeoplePane })))))));
 };
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
 const showShowPeopleTabHeaderButton$1 = (callControls) => {
@@ -19087,18 +19283,26 @@ const DRAWER_HIGH_Z_BAND = 99; // setting z index to  99 so that it sit above al
  * @private
  */
 const CallReadinessModal = (props) => {
-    const { mobileView, audioState, videoState, permissionsState, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
+    const { mobileView, permissionsState, 
+    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
     const onLightDismissTriggered = () => {
         // do nothing here
         // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
     };
+    // On Safari browser with 2 options: don't allow/never for this website again, when don't allow is clicked, permissionAPI returns prompt and PermissionGranted from calling sdk returns false (the right value)
+    const videoState = permissionsState.camera;
+    const audioState = permissionsState.microphone;
     const showModal = videoState === 'denied' || videoState === 'prompt' || audioState === 'denied' || audioState === 'prompt';
+    /* @conditional-compile-remove(unsupported-browser) */
+    const isSafari = _isSafari(environmentInfo);
     const modal = !showModal
         ? undefined
         : () => {
             // if both video and audio permission are not set
             if (videoState === 'prompt' && audioState === 'prompt') {
-                return (React__default['default'].createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React__default['default'].createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -19106,7 +19310,9 @@ const CallReadinessModal = (props) => {
             }
             // if audio permission is set up but video is not
             else if (videoState === 'prompt') {
-                return (React__default['default'].createElement(CameraDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React__default['default'].createElement(CameraDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -19116,7 +19322,9 @@ const CallReadinessModal = (props) => {
             }
             // if video permission is set up but audio is not
             else if (audioState === 'prompt') {
-                return (React__default['default'].createElement(MicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React__default['default'].createElement(MicrophoneDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -19124,7 +19332,9 @@ const CallReadinessModal = (props) => {
             }
             // if both video and audio are denied
             else if (videoState === 'denied' && audioState === 'denied') {
-                return (React__default['default'].createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React__default['default'].createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -19132,7 +19342,9 @@ const CallReadinessModal = (props) => {
             }
             // if only video is denied
             else if (videoState === 'denied') {
-                return (React__default['default'].createElement(CameraDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React__default['default'].createElement(CameraDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -19142,7 +19354,9 @@ const CallReadinessModal = (props) => {
             }
             // if only audio is denied
             else {
-                return (React__default['default'].createElement(MicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React__default['default'].createElement(MicrophoneDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -19168,26 +19382,35 @@ const CallReadinessModal = (props) => {
  * @private
  */
 const CallReadinessModalFallBack = (props) => {
-    const { mobileView, cameraPermissionGranted, microphonePermissionGranted, checkPermissionModalShowing, permissionsState, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
+    const { mobileView, checkPermissionModalShowing, permissionsState, 
+    /* @conditional-compile-remove(unsupported-browser) */ environmentInfo, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
     const onLightDismissTriggered = () => {
         // do nothing here
         // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
     };
-    // When permissions are not set, value is undefined, do nothing here
-    // When permissions are set to denied, value is false, show helper screen
-    const showModal = cameraPermissionGranted === false || microphonePermissionGranted === false;
+    const videoState = permissionsState.camera;
+    const audioState = permissionsState.microphone;
+    // When permissions are not set, do nothing here
+    // When permissions are set to denied, show helper screen
+    const showModal = videoState === 'denied' || audioState === 'denied';
+    /* @conditional-compile-remove(unsupported-browser) */
+    const isSafari = _isSafari(environmentInfo);
     const modal = !showModal
         ? undefined
         : () => {
-            if (cameraPermissionGranted === false && microphonePermissionGranted === false) {
-                return (React__default['default'].createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+            if (videoState === 'denied' && audioState === 'denied') {
+                return (React__default['default'].createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
                         : undefined, type: "denied" }));
             }
-            else if (cameraPermissionGranted === false && microphonePermissionGranted) {
-                return (React__default['default'].createElement(CameraDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+            else if (videoState === 'denied' && audioState === 'granted') {
+                return (React__default['default'].createElement(CameraDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -19196,7 +19419,9 @@ const CallReadinessModalFallBack = (props) => {
                     }, type: "denied" }));
             }
             else {
-                return (React__default['default'].createElement(MicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                return (React__default['default'].createElement(MicrophoneDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -19205,10 +19430,10 @@ const CallReadinessModalFallBack = (props) => {
         };
     if (mobileView) {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            (checkPermissionModalShowing ||
-                microphonePermissionGranted === undefined ||
-                cameraPermissionGranted === undefined) && (React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
-                React__default['default'].createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
+                React__default['default'].createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -19217,12 +19442,12 @@ const CallReadinessModalFallBack = (props) => {
     }
     else {
         return (React__default['default'].createElement(React__default['default'].Fragment, null,
-            (checkPermissionModalShowing ||
-                microphonePermissionGranted === undefined ||
-                cameraPermissionGranted === undefined) && (React__default['default'].createElement(react.Modal, { isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
+            (checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React__default['default'].createElement(react.Modal, { isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
                     setIsPermissionsModalDismissed(false);
                 }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } },
-                React__default['default'].createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                React__default['default'].createElement(CameraAndMicrophoneDomainPermissions, { appName: 'app', 
+                    /* @conditional-compile-remove(unsupported-browser) */
+                    browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
                         ? () => {
                             onPermissionsTroubleshootingClick(permissionsState);
                         }
@@ -19257,13 +19482,15 @@ const ConfigurationPage = (props) => {
     let errorBarProps = usePropsFor$1(ErrorBar);
     const adapter = useAdapter();
     const deviceState = adapter.getState().devices;
+    /* @conditional-compile-remove(unsupported-browser) */
+    const environmentInfo = adapter.getState().environmentInfo;
     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) */
     // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK
     if (!rolePermissions.cameraButton) {
-        errorBarProps = Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied') });
+        errorBarProps = Object.assign(Object.assign({}, errorBarProps), { activeErrorMessages: errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari') });
     }
     /* @conditional-compile-remove(rooms) */
     if (!rolePermissions.microphoneButton) {
@@ -19291,8 +19518,24 @@ const ConfigurationPage = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const permissionsState = {
         // fall back to using cameraPermissionGranted and microphonePermissionGranted if permission API is not supported
-        camera: videoState && videoState !== 'unsupported' ? videoState : cameraPermissionGranted ? 'granted' : 'denied',
-        microphone: audioState && audioState !== 'unsupported' ? audioState : microphonePermissionGranted ? 'granted' : 'denied'
+        camera: videoState && videoState !== 'unsupported'
+            ? cameraPermissionGranted !== false
+                ? videoState
+                : 'denied'
+            : cameraPermissionGranted !== false
+                ? cameraPermissionGranted
+                    ? 'granted'
+                    : 'prompt'
+                : 'denied',
+        microphone: audioState && audioState !== 'unsupported'
+            ? microphonePermissionGranted !== false
+                ? audioState
+                : 'denied'
+            : microphonePermissionGranted !== false
+                ? microphonePermissionGranted
+                    ? 'granted'
+                    : 'prompt'
+                : 'denied'
     };
     /* @conditional-compile-remove(call-readiness) */
     const networkErrors = errorBarProps.activeErrorMessages.filter((message) => message.type === 'callNetworkQualityLow');
@@ -19331,13 +19574,17 @@ const ConfigurationPage = (props) => {
             videoState &&
             videoState !== 'unsupported' &&
             audioState &&
-            audioState !== 'unsupported' && (React__default['default'].createElement(CallReadinessModal, { mobileView: mobileView, audioState: audioState, videoState: videoState, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
+            audioState !== 'unsupported' && (React__default['default'].createElement(CallReadinessModal, { mobileView: mobileView, 
+            /* @conditional-compile-remove(unsupported-browser) */
+            environmentInfo: environmentInfo, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
         /* @conditional-compile-remove(call-readiness) */
         // show the following screen if permission API is not availible (unsupported) and videoState, audioState is assigned values
         callReadinessOptedIn &&
             videoState &&
             audioState &&
-            (videoState === 'unsupported' || audioState === 'unsupported') && (React__default['default'].createElement(CallReadinessModalFallBack, { mobileView: mobileView, cameraPermissionGranted: cameraPermissionGranted, microphonePermissionGranted: microphonePermissionGranted, checkPermissionModalShowing: forceShowingCheckPermissions, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
+            (videoState === 'unsupported' || audioState === 'unsupported') && (React__default['default'].createElement(CallReadinessModalFallBack, { mobileView: mobileView, checkPermissionModalShowing: forceShowingCheckPermissions, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, 
+            /* @conditional-compile-remove(unsupported-browser) */
+            environmentInfo: environmentInfo, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
         React__default['default'].createElement(react.Stack, { grow: true, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
             mobileWithPreview && (React__default['default'].createElement(react.Stack.Item, null,
                 title,
@@ -19779,7 +20026,7 @@ const UnsupportedBrowserPage = (props) => {
         pageElement = (React__default['default'].createElement(UnsupportedBrowser, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserStrings }));
     }
     else if (!(environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion)) {
-        pageElement = (React__default['default'].createElement(UnsupportedBrowserVersion, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserVersionStrings, onContinueClick: onContinueClick }));
+        pageElement = (React__default['default'].createElement(UnsupportedBrowserVersion, { onTroubleshootingClick: onTroubleshootingClick, strings: unsupportedBrowserVersionStrings, onContinueAnywayClick: onContinueClick }));
     }
     else {
         throw new Error('There was a problem with your environment info');
@@ -21122,50 +21369,6 @@ const DesktopMoreButton = (props) => {
         strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() } })));
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * @private
- */
-const compositeOuterContainerStyles = {
-    root: {
-        width: '100%',
-        // Create a new stacking context so that DrawerMenu can be positioned absolutely.
-        position: 'relative'
-    }
-};
-/** @private */
-const callCompositeContainerStyles = {
-    root: {
-        // Start a new stacking context so that any `position:absolute` elements
-        // inside the call composite do not compete with its siblings.
-        position: 'relative'
-    }
-};
-/** @private */
-const controlBarContainerStyles = {
-    root: {
-        // Start a new stacking context so that any `position:absolute` elements
-        // inside the control bar do not compete with its siblings.
-        position: 'relative'
-    }
-};
-/** @private */
-const hiddenAutoFocusButtonStyles = {
-    root: {
-        width: '0',
-        height: '0',
-        margin: '0',
-        minHeight: '0',
-        minWidth: '0',
-        maxHeight: '0',
-        maxWidth: '0',
-        outline: 'none',
-        padding: '0',
-        position: 'absolute'
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) => {
     if (callWithChatControls === false) {
@@ -21188,13 +21391,6 @@ const inferCallWithChatControlOptions$1 = (mobileView, callWithChatControls) =>
  */
 const CallWithChatControlBar = (props) => {
     var _a, _b;
-    React.useEffect(() => {
-        var _a;
-        // On mount, button used for initial focus is hidden to prevent screen readers from announcing the initial focus
-        if (document.querySelector('[data-ui-id=call-with-chat-autofocus-hidden-button]') === document.activeElement) {
-            (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', 'true');
-        }
-    }, []);
     const theme = react.useTheme();
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCallWithChatControlOptions$1(props.mobileView, props.callControls);
@@ -21235,7 +21431,6 @@ const CallWithChatControlBar = (props) => {
         React__default['default'].createElement(react.Stack.Item, { grow: true },
             React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
                 React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
-                    React__default['default'].createElement(ControlBarButton, { autoFocus: true, ariaHidden: true, "data-ui-id": 'call-with-chat-autofocus-hidden-button', styles: hiddenAutoFocusButtonStyles, tabIndex: -1 }),
                     React__default['default'].createElement(react.Stack.Item, null,
                         React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
                             isEnabled$1(options.microphoneButton) && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
@@ -21342,6 +21537,35 @@ const getDesktopEndCallButtonStyles = (theme) => {
 };
 const isEnabled$1 = (option) => option !== false;
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const compositeOuterContainerStyles = {
+    root: {
+        width: '100%',
+        // Create a new stacking context so that DrawerMenu can be positioned absolutely.
+        position: 'relative'
+    }
+};
+/** @private */
+const callCompositeContainerStyles = {
+    root: {
+        // Start a new stacking context so that any `position:absolute` elements
+        // inside the call composite do not compete with its siblings.
+        position: 'relative'
+    }
+};
+/** @private */
+const controlBarContainerStyles = {
+    root: {
+        // Start a new stacking context so that any `position:absolute` elements
+        // inside the control bar do not compete with its siblings.
+        position: 'relative'
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {