@azure/communication-react 1.13.0-alpha-202402080012 → 1.13.0-alpha-202402100012

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

@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.13.0-alpha-202402080012';
+var telemetryVersion = '1.13.0-alpha-202402100012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -417,6 +417,14 @@ const getSpotlightedParticipants = (state, props) => {
     var _a, _b;
     return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.spotlight) === null || _b === void 0 ? void 0 : _b.spotlightedParticipants;
 };
+/* @conditional-compile-remove(spotlight) */
+/**
+ * @private
+ */
+const getMaxParticipantsToSpotlight = (state, props) => {
+    var _a, _b;
+    return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.spotlight) === null || _b === void 0 ? void 0 : _b.maxParticipantsToSpotlight;
+};
 /* @conditional-compile-remove(reaction) */
 /**
  * @private
@@ -1153,14 +1161,14 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
     /* @conditional-compile-remove(end-of-call-survey) */
     const onSubmitSurvey = (survey) => __awaiter$P(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.CallSurvey).submitSurvey(survey)); });
     /* @conditional-compile-remove(spotlight) */
-    const onStartSpotlight = (userId) => __awaiter$P(void 0, void 0, void 0, function* () {
-        const participant = _toCommunicationIdentifier(userId);
-        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).startSpotlight([participant]));
+    const onStartSpotlight = (userIds) => __awaiter$P(void 0, void 0, void 0, function* () {
+        const participants = userIds === null || userIds === void 0 ? void 0 : userIds.map((userId) => _toCommunicationIdentifier(userId));
+        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).startSpotlight(participants));
     });
     /* @conditional-compile-remove(spotlight) */
-    const onStopSpotlight = (userId) => __awaiter$P(void 0, void 0, void 0, function* () {
-        const participant = _toCommunicationIdentifier(userId);
-        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight([participant]));
+    const onStopSpotlight = (userIds) => __awaiter$P(void 0, void 0, void 0, function* () {
+        const participants = userIds === null || userIds === void 0 ? void 0 : userIds.map((userId) => _toCommunicationIdentifier(userId));
+        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight(participants));
     });
     return {
         onHangUp,
@@ -1743,7 +1751,7 @@ function convertSdkParticipantToDeclarativeParticipant(participant) {
         /* @conditional-compile-remove(hide-attendee-name) */
         role: participant.role,
         /* @conditional-compile-remove(spotlight) */
-        spotlighted: undefined
+        spotlight: undefined
     };
 }
 /**
@@ -1809,7 +1817,7 @@ function convertSdkCallToDeclarativeCall(call) {
         },
         /* @conditional-compile-remove(hide-attendee-name) */
         // TODO: Replace this once the SDK supports hide attendee name
-        hideAttendeeNames: true
+        hideAttendeeNames: false
     };
 }
 /**
@@ -2226,11 +2234,11 @@ let CallContext$2 = class CallContext {
         });
     }
     /* @conditional-compile-remove(spotlight) */
-    setSpotlight(callId, spotlightedParticipants) {
+    setSpotlight(callId, spotlightedParticipants, maxParticipantsToSpotlight) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
             if (call) {
-                call.spotlight = { spotlightedParticipants };
+                call.spotlight = { spotlightedParticipants, maxParticipantsToSpotlight };
             }
         });
     }
@@ -2241,7 +2249,19 @@ let CallContext$2 = class CallContext {
             if (call) {
                 const participant = call.remoteParticipants[toFlatCommunicationIdentifier(spotlightedParticipant.identifier)];
                 if (participant) {
-                    participant.spotlighted = { spotlightedOrderPosition: spotlightedParticipant.order };
+                    participant.spotlight = { spotlightedOrderPosition: spotlightedParticipant.order };
+                }
+            }
+        });
+    }
+    /* @conditional-compile-remove(spotlight) */
+    setParticipantNotSpotlighted(callId, spotlightedParticipant) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                const participant = call.remoteParticipants[toFlatCommunicationIdentifier(spotlightedParticipant.identifier)];
+                if (participant) {
+                    participant.spotlight = undefined;
                 }
             }
         });
@@ -3838,11 +3858,14 @@ class SpotlightSubscriber {
         this.unsubscribe = () => {
             this._spotlightFeature.off('spotlightChanged', this.spotlightChanged);
         };
-        this.spotlightChanged = () => {
-            this._context.setSpotlight(this._callIdRef.callId, this._spotlightFeature.getSpotlightedParticipants());
-            for (const addedParticipant of this._spotlightFeature.getSpotlightedParticipants()) {
+        this.spotlightChanged = (args) => {
+            this._context.setSpotlight(this._callIdRef.callId, this._spotlightFeature.getSpotlightedParticipants(), this._spotlightFeature.maxParticipantsToSpotlight);
+            for (const addedParticipant of args.added) {
                 this._context.setParticipantSpotlighted(this._callIdRef.callId, addedParticipant);
             }
+            for (const removedParticipant of args.removed) {
+                this._context.setParticipantNotSpotlighted(this._callIdRef.callId, removedParticipant);
+            }
         };
         this._callIdRef = callIdRef;
         this._context = context;
@@ -4409,6 +4432,12 @@ class ProxyCallCommon {
                         const proxyFeature = new ProxyTransferCallFeature(this._context, target);
                         return new Proxy(transferFeature, proxyFeature);
                     }
+                    /* @conditional-compile-remove(spotlight) */
+                    if (args[0] === communicationCalling.Features.Spotlight) {
+                        const spotlightFeature = target.feature(communicationCalling.Features.Spotlight);
+                        const proxyFeature = new ProxySpotlightCallFeature(this._context);
+                        return new Proxy(spotlightFeature, proxyFeature);
+                    }
                     return target.feature(...args);
                 }, 'Call.feature');
             }
@@ -4461,6 +4490,31 @@ class ProxyTeamsCaptions {
         }
     }
 }
+/* @conditional-compile-remove(spotlight) */
+/**
+ * @private
+ */
+class ProxySpotlightCallFeature {
+    constructor(context) {
+        this._context = context;
+    }
+    get(target, prop) {
+        switch (prop) {
+            case 'startSpotlight':
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$I(this, void 0, void 0, function* () {
+                    const ret = yield target.startSpotlight(...args);
+                    return ret;
+                }), 'Call.feature');
+            case 'stopSpotlight':
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$I(this, void 0, void 0, function* () {
+                    const ret = yield target.stopSpotlight(...args);
+                    return ret;
+                }), 'Call.feature');
+            default:
+                return Reflect.get(target, prop);
+        }
+    }
+}
 /* @conditional-compile-remove(call-transfer) */
 /**
  * @private
@@ -5297,7 +5351,7 @@ const typingIndicatorStringStyle = react.mergeStyles({
     wordBreak: 'break-word'
 });
 
-var participantItem$k={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateRinging:"Calling...",participantStateHold:"On hold"};var ParticipantList$l={overflowParticipantCount:"+{overflowCount} more"};var typingIndicator$k={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$k={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 mentionPopover$k={mentionPopoverHeader:"Suggestions"};var imageOverlay$k={downloadButtonLabel:"Download",dismissButtonAriaLabel:"Close"};var messageStatusIndicator$k={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$k={label:"Leave",tooltipContent:"Leave call"};var cameraButton$k={onLabel:"Camera",offLabel:"Camera",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",onSplitButtonPrimaryActionCamera:"Turn off camera",offSplitButtonPrimaryActionCamera:"Turn on camera",cameraPrimaryActionSplitButtonTitle:"Use camera",videoEffectsMenuItemTitle:"Effects"};var microphoneButton$k={onLabel:"Mic",offLabel:"Mic",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",offSplitButtonMicrophonePrimaryAction:"Unmute microphone",onSplitButtonMicrophonePrimaryAction:"Mute microphone",microphonePrimaryActionSplitButtonTitle:"Use microphone"};var devicesButton$k={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$k={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$k={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var raiseHandButton$k={offLabel:"Raise",onLabel:"Lower",tooltipDisabledContent:"Raise Hand action is disabled",tooltipOnContent:"Lower Hand",tooltipOffContent:"Raise Hand"};var reactionButton$k={label:"React",tooltipDisabledContent:"Reaction action is disabled",tooltipContent:"Send a reaction",likeReactionTooltipContent:"Like",heartReactionTooltipContent:"Love",laughReactionTooltipContent:"Laugh",applauseReactionTooltipContent:"Applause",surprisedReactionTooltipContent:"Surprised"};var messageThread$k={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:"Done",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file",blockedWarningText:"This message was deleted due to organizational policy.",blockedWarningLinkText:"Details",fileCardGroupMessage:"The message has {fileCount} attachment",messageDeletedAnnouncementAriaLabel:"The message is deleted"};var errorBar$k={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:"There was an issue starting screen share.",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.",cameraFrozenForRemoteParticipants:"Users in the call are having issues seeing your video. Please check your devices and network.",unableToStartVideoEffect:"Unable to apply video effect."};var videoGallery$k={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",pinParticipantForMe:"Pin for me",pinParticipantForMeLimitReached:"Pin (limit reached)",unpinParticipantForMe:"Unpin",pinParticipantMenuItemAriaLabel:"Pin {participantName}",unpinParticipantMenuItemAriaLabel:"Unpin {participantName}",pinnedParticipantAnnouncementAriaLabel:"Pinned {participantName}",unpinnedParticipantAnnouncementAriaLabel:"Unpinned {participantName}",startSpotlightVideoTileMenuLabel:"Spotlight for everyone",addSpotlightVideoTileMenuLabel:"Add spotlight",stopSpotlightVideoTileMenuLabel:"Stop spotlighting",stopSpotlightOnSelfVideoTileMenuLabel:"Exit spotlight"};var dialpad$k={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$k={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$k={participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneSitePermissionsRequest$k={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 CameraSitePermissionsRequest$k={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 MicrophoneSitePermissionsRequest$k={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 CameraAndMicrophoneSitePermissionsCheck$k={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 CameraSitePermissionsCheck$k={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 MicrophoneSitePermissionsCheck$k={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 CameraAndMicrophoneSitePermissionsDenied$k={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 CameraAndMicrophoneSitePermissionsDeniedSafari$k={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 CameraSitePermissionsDenied$k={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 MicrophoneSitePermissionsDenied$k={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 CameraSitePermissionsDeniedSafari$k={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 MicrophoneSitePermissionsDeniedSafari$k={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$l={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedBrowserVersion$l={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$l={primaryText:"Operating system not supported",secondaryText:"Please join this call using a device with a compatible operating system.",moreHelpLinkText:"See compatibility requirements"};var BrowserPermissionDenied$k={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$k={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 verticalGallery$k={leftNavButtonAriaLabel:"previous page",rightNavButtonAriaLabel:"next page"};var AttendeeRole$k="Attendee";var en_US$1 = {participantItem:participantItem$k,ParticipantList:ParticipantList$l,typingIndicator:typingIndicator$k,sendBox:sendBox$k,mentionPopover:mentionPopover$k,imageOverlay:imageOverlay$k,messageStatusIndicator:messageStatusIndicator$k,endCallButton:endCallButton$k,cameraButton:cameraButton$k,microphoneButton:microphoneButton$k,devicesButton:devicesButton$k,participantsButton:participantsButton$k,screenShareButton:screenShareButton$k,raiseHandButton:raiseHandButton$k,reactionButton:reactionButton$k,messageThread:messageThread$k,errorBar:errorBar$k,videoGallery:videoGallery$k,dialpad:dialpad$k,holdButton:holdButton$k,videoTile:videoTile$k,CameraAndMicrophoneSitePermissionsRequest:CameraAndMicrophoneSitePermissionsRequest$k,CameraSitePermissionsRequest:CameraSitePermissionsRequest$k,MicrophoneSitePermissionsRequest:MicrophoneSitePermissionsRequest$k,CameraAndMicrophoneSitePermissionsCheck:CameraAndMicrophoneSitePermissionsCheck$k,CameraSitePermissionsCheck:CameraSitePermissionsCheck$k,MicrophoneSitePermissionsCheck:MicrophoneSitePermissionsCheck$k,CameraAndMicrophoneSitePermissionsDenied:CameraAndMicrophoneSitePermissionsDenied$k,CameraAndMicrophoneSitePermissionsDeniedSafari:CameraAndMicrophoneSitePermissionsDeniedSafari$k,CameraSitePermissionsDenied:CameraSitePermissionsDenied$k,MicrophoneSitePermissionsDenied:MicrophoneSitePermissionsDenied$k,CameraSitePermissionsDeniedSafari:CameraSitePermissionsDeniedSafari$k,MicrophoneSitePermissionsDeniedSafari:MicrophoneSitePermissionsDeniedSafari$k,UnsupportedBrowser:UnsupportedBrowser$l,UnsupportedBrowserVersion:UnsupportedBrowserVersion$l,UnsupportedOperatingSystem:UnsupportedOperatingSystem$l,BrowserPermissionDenied:BrowserPermissionDenied$k,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$k,verticalGallery:verticalGallery$k,AttendeeRole:AttendeeRole$k};
+var participantItem$k={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateRinging:"Calling...",participantStateHold:"On hold"};var ParticipantList$l={overflowParticipantCount:"+{overflowCount} more"};var typingIndicator$k={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$k={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 mentionPopover$k={mentionPopoverHeader:"Suggestions"};var imageOverlay$k={downloadButtonLabel:"Download",dismissButtonAriaLabel:"Close"};var messageStatusIndicator$k={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$k={label:"Leave",tooltipContent:"Leave call"};var cameraButton$k={onLabel:"Camera",offLabel:"Camera",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",onSplitButtonPrimaryActionCamera:"Turn off camera",offSplitButtonPrimaryActionCamera:"Turn on camera",cameraPrimaryActionSplitButtonTitle:"Use camera",videoEffectsMenuItemTitle:"Effects"};var microphoneButton$k={onLabel:"Mic",offLabel:"Mic",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",offSplitButtonMicrophonePrimaryAction:"Unmute microphone",onSplitButtonMicrophonePrimaryAction:"Mute microphone",microphonePrimaryActionSplitButtonTitle:"Use microphone"};var devicesButton$k={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$k={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$k={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var raiseHandButton$k={offLabel:"Raise",onLabel:"Lower",tooltipDisabledContent:"Raise Hand action is disabled",tooltipOnContent:"Lower Hand",tooltipOffContent:"Raise Hand"};var reactionButton$k={label:"React",tooltipDisabledContent:"Reaction action is disabled",tooltipContent:"Send a reaction",likeReactionTooltipContent:"Like",heartReactionTooltipContent:"Love",laughReactionTooltipContent:"Laugh",applauseReactionTooltipContent:"Applause",surprisedReactionTooltipContent:"Surprised"};var messageThread$k={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:"Done",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file",blockedWarningText:"This message was deleted due to organizational policy.",blockedWarningLinkText:"Details",fileCardGroupMessage:"The message has {fileCount} attachment",messageDeletedAnnouncementAriaLabel:"The message is deleted"};var errorBar$k={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:"There was an issue starting screen share.",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.",cameraFrozenForRemoteParticipants:"Users in the call are having issues seeing your video. Please check your devices and network.",unableToStartVideoEffect:"Unable to apply video effect.",startSpotlightWhileMaxParticipantsAreSpotlighted:"Cannot start spotlight on participant(s) because the maximum number of participants are already spotlighted."};var videoGallery$k={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",pinParticipantForMe:"Pin for me",pinParticipantForMeLimitReached:"Pin (limit reached)",unpinParticipantForMe:"Unpin",pinParticipantMenuItemAriaLabel:"Pin {participantName}",unpinParticipantMenuItemAriaLabel:"Unpin {participantName}",pinnedParticipantAnnouncementAriaLabel:"Pinned {participantName}",unpinnedParticipantAnnouncementAriaLabel:"Unpinned {participantName}",startSpotlightVideoTileMenuLabel:"Spotlight for everyone",addSpotlightVideoTileMenuLabel:"Add spotlight",spotlightLimitReachedMenuTitle:"Spotlight limit reached",stopSpotlightVideoTileMenuLabel:"Stop spotlighting",stopSpotlightOnSelfVideoTileMenuLabel:"Exit spotlight"};var dialpad$k={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$k={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$k={participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneSitePermissionsRequest$k={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 CameraSitePermissionsRequest$k={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 MicrophoneSitePermissionsRequest$k={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 CameraAndMicrophoneSitePermissionsCheck$k={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 CameraSitePermissionsCheck$k={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 MicrophoneSitePermissionsCheck$k={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 CameraAndMicrophoneSitePermissionsDenied$k={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 CameraAndMicrophoneSitePermissionsDeniedSafari$k={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 CameraSitePermissionsDenied$k={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 MicrophoneSitePermissionsDenied$k={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 CameraSitePermissionsDeniedSafari$k={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 MicrophoneSitePermissionsDeniedSafari$k={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$l={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedBrowserVersion$l={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$l={primaryText:"Operating system not supported",secondaryText:"Please join this call using a device with a compatible operating system.",moreHelpLinkText:"See compatibility requirements"};var BrowserPermissionDenied$k={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$k={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 verticalGallery$k={leftNavButtonAriaLabel:"previous page",rightNavButtonAriaLabel:"next page"};var AttendeeRole$k="Attendee";var en_US$1 = {participantItem:participantItem$k,ParticipantList:ParticipantList$l,typingIndicator:typingIndicator$k,sendBox:sendBox$k,mentionPopover:mentionPopover$k,imageOverlay:imageOverlay$k,messageStatusIndicator:messageStatusIndicator$k,endCallButton:endCallButton$k,cameraButton:cameraButton$k,microphoneButton:microphoneButton$k,devicesButton:devicesButton$k,participantsButton:participantsButton$k,screenShareButton:screenShareButton$k,raiseHandButton:raiseHandButton$k,reactionButton:reactionButton$k,messageThread:messageThread$k,errorBar:errorBar$k,videoGallery:videoGallery$k,dialpad:dialpad$k,holdButton:holdButton$k,videoTile:videoTile$k,CameraAndMicrophoneSitePermissionsRequest:CameraAndMicrophoneSitePermissionsRequest$k,CameraSitePermissionsRequest:CameraSitePermissionsRequest$k,MicrophoneSitePermissionsRequest:MicrophoneSitePermissionsRequest$k,CameraAndMicrophoneSitePermissionsCheck:CameraAndMicrophoneSitePermissionsCheck$k,CameraSitePermissionsCheck:CameraSitePermissionsCheck$k,MicrophoneSitePermissionsCheck:MicrophoneSitePermissionsCheck$k,CameraAndMicrophoneSitePermissionsDenied:CameraAndMicrophoneSitePermissionsDenied$k,CameraAndMicrophoneSitePermissionsDeniedSafari:CameraAndMicrophoneSitePermissionsDeniedSafari$k,CameraSitePermissionsDenied:CameraSitePermissionsDenied$k,MicrophoneSitePermissionsDenied:MicrophoneSitePermissionsDenied$k,CameraSitePermissionsDeniedSafari:CameraSitePermissionsDeniedSafari$k,MicrophoneSitePermissionsDeniedSafari:MicrophoneSitePermissionsDeniedSafari$k,UnsupportedBrowser:UnsupportedBrowser$l,UnsupportedBrowserVersion:UnsupportedBrowserVersion$l,UnsupportedOperatingSystem:UnsupportedOperatingSystem$l,BrowserPermissionDenied:BrowserPermissionDenied$k,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$k,verticalGallery:verticalGallery$k,AttendeeRole:AttendeeRole$k};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -6124,14 +6178,6 @@ const lightTheme = {
         /* @conditional-compile-remove(raise-hand) */
         raiseHandGold: '#eaa300'
     },
-    /* @conditional-compile-remove(image-overlay) */
-    chatPalette: {
-        modalOverlayBlack: '#000000',
-        modalTitleWhite: '#ffffff',
-        modalButtonBackground: '#1b1a19',
-        modalButtonBackgroundHover: '#252423',
-        modalButtonBackgroundActive: '#292827'
-    },
     semanticColors: {
         errorText: '#a80000'
     }
@@ -6175,18 +6221,17 @@ const darkTheme = {
         /* @conditional-compile-remove(raise-hand) */
         raiseHandGold: '#eaa300'
     },
-    /* @conditional-compile-remove(image-overlay) */
-    chatPalette: {
-        modalOverlayBlack: '#000000',
-        modalTitleWhite: '#ffffff',
-        modalButtonBackground: '#1b1a19',
-        modalButtonBackgroundHover: '#252423',
-        modalButtonBackgroundActive: '#292827'
-    },
     semanticColors: {
         errorText: '#f1707b'
     }
 };
+/* @conditional-compile-remove(image-overlay) */
+/**
+ * Preset dark theme for the ImageOverlay component.
+ *
+ * @beta
+ */
+const imageOverlayTheme = { palette: darkTheme.palette };
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -8761,10 +8806,11 @@ const downloadIcon = {
  * @private
  */
 const overlayStyles = (theme) => {
+    var _a;
     return {
         root: {
-            background: theme.chatPalette.modalOverlayBlack,
-            opacity: '0.85'
+            background: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.white,
+            opacity: '0.95'
         }
     };
 };
@@ -8813,14 +8859,14 @@ const titleBarContainerStyle = {
     alignContent: 'center',
     alignItems: 'center'
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 const titleStyle$2 = (theme) => {
+    var _a;
     return {
         paddingLeft: '0.5rem',
-        color: theme.chatPalette.modalTitleWhite,
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         fontFamily: 'inherit',
         fontSize: '0.875rem',
         fontStyle: 'normal',
@@ -8868,77 +8914,60 @@ const normalImageStyle = {
     maxHeight: '100%',
     maxWidth: '100%'
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 const brokenImageStyle = (theme) => {
+    var _a;
     return {
-        color: theme.chatPalette.modalTitleWhite
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black
     };
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 const closeButtonStyles = (theme) => {
+    var _a, _b, _c;
     return {
-        color: theme.chatPalette.modalTitleWhite,
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
+            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
         },
         ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
+            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
         }
     };
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
-const downloadButtonStyle = (theme) => {
-    return {
-        margin: '0 0.5rem',
-        height: '32px',
-        borderWidth: '1px',
-        fontSize: '0.875rem', // 14px
-        fontWeight: 600,
-        padding: '0.38rem 0.75rem',
-        borderRadius: '4px',
-        backgroundColor: theme.chatPalette.modalButtonBackground,
-        color: theme.chatPalette.modalTitleWhite,
-        whiteSpace: 'nowrap',
-        ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
-        },
-        ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
-        },
-        '@media (max-width: 25rem)': {
-            display: 'none'
-        }
-    };
+const downloadButtonStyle = {
+    margin: '0 0.5rem',
+    height: '32px',
+    borderWidth: '1px',
+    fontSize: '0.875rem', // 14px
+    fontWeight: 600,
+    padding: '0.38rem 0.75rem',
+    borderRadius: '4px',
+    whiteSpace: 'nowrap',
+    '@media (max-width: 25rem)': {
+        display: 'none'
+    }
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 const smallDownloadButtonContainerStyle = (theme) => {
+    var _a, _b, _c;
     return {
         marginRight: '0.5rem',
-        color: theme.chatPalette.modalTitleWhite,
         whiteSpace: 'nowrap',
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
+            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
         },
         ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
+            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
         },
         '@media (min-width: 25rem)': {
             display: 'none'
@@ -8956,37 +8985,36 @@ const smallDownloadButtonContainerStyle = (theme) => {
  * @beta
  */
 const ImageOverlay = (props) => {
-    const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss, onError } = props;
-    const theme = useTheme();
+    const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;
     /* @conditional-compile-remove(image-overlay) */
     const localeStrings = useLocale$1().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = React.useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
+    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);
     const renderHeaderBar = () => {
         return (React.createElement(react.Stack, { className: react.mergeStyles(headerStyle) },
             React.createElement(react.Stack, { className: react.mergeStyles(titleBarContainerStyle) },
                 titleIcon,
-                React.createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(theme)), "aria-label": title || 'Image' }, title)),
+                React.createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(imageOverlayTheme)), "aria-label": title || 'Image' }, title)),
             React.createElement(react.Stack, { className: react.mergeStyles(controlBarContainerStyle) },
-                React.createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle(theme)), 
+                onDownloadButtonClicked && (React.createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle), 
                     /* @conditional-compile-remove(image-overlay) */
-                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(react.Icon, { iconName: downloadIcon.iconName, className: react.mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
-                React.createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(theme)), onClick: () => onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
-                React.createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(theme)), onClick: onDismiss, 
+                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(react.Icon, { iconName: downloadIcon.iconName, className: react.mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel })),
+                onDownloadButtonClicked && (React.createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' })),
+                React.createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(imageOverlayTheme)), onClick: onDismiss, 
                     /* @conditional-compile-remove(image-overlay) */
                     ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
     const renderBodyWithLightDismiss = () => {
-        return (React.createElement(react.Stack, { className: react.mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: react.mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "aria-live": 'polite', onError: (event) => {
+        return (React.createElement(react.Stack, { className: react.mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: react.mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "aria-live": 'polite', onError: () => {
                 setIsImageLoaded(false);
-                onError && onError(event);
             }, onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
                 event.persist();
             } }))));
     };
-    return (React.createElement(react.Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
-        renderHeaderBar(),
-        renderBodyWithLightDismiss()));
+    return (React.createElement(FluentThemeProvider, { fluentTheme: imageOverlayTheme },
+        React.createElement(react.Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(imageOverlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
+            renderHeaderBar(),
+            renderBodyWithLightDismiss())));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10122,12 +10150,19 @@ const chatMessageMenuStyle = react.mergeStyles({
  * @private
  */
 const useChatMessageEditContainerStyles = reactComponents.makeStyles({
-    root: {
-        paddingTop: '1.25rem' //height of the menu button + marginBottom
-    },
-    body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding(0)), { backgroundColor: 'transparent', boxSizing: 'border-box' }), reactComponents.shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), reactComponents.shorthands.borderRadius(reactComponents.tokens.borderRadiusMedium)), reactComponents.shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`)), { 
+    body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding(0)), { backgroundColor: 'transparent', boxSizing: 'border-box' }), reactComponents.shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), reactComponents.shorthands.borderRadius(reactComponents.tokens.borderRadiusMedium)), reactComponents.shorthands.margin('21px', '1px', '1px', '1px')), { 
+        // Width should be updated on hover to include the border width change
+        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`, '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)), reactComponents.shorthands.margin('20px', 0, 0, 0)), { width: '100%' }) }),
+    bodyAttached: {
+        marginBottom: '1px',
+        marginTop: '3px',
         // Width should be updated on hover to include the border width change
-        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`, '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.margin('0rem')), reactComponents.shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)), { width: '100%' }) }),
+        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`,
+        '&:hover, &:active, &:focus, &:focus-within': {
+            marginTop: '2px',
+            marginBottom: 0
+        }
+    },
     bodyError: Object.assign({}, reactComponents.shorthands.borderColor(errorTextColor)),
     bodyDefault: Object.assign(Object.assign({}, reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStrokeAccessible)), { '&:hover, &:active, &:focus, &:focus-within': Object.assign({}, reactComponents.shorthands.borderColor(reactComponents.tokens.colorCompoundBrandStroke)) })
 });
@@ -10259,11 +10294,11 @@ const ChatMessageComponentAsEditBox = (props) => {
                         }, id: 'submitIconWrapper' }))), /* @conditional-compile-remove(file-sharing) */
             onRenderFileUploads()));
     };
-    const bodyClassName = reactComponents.mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);
-    return (React.createElement(reactChat.ChatMyMessage, { root: {
-            className: reactComponents.mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)
+    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
+    return (React.createElement(reactChat.ChatMyMessage, { attached: attached, root: {
+            className: chatMyMessageStyles.root
         }, body: {
-            className: bodyClassName
+            className: reactComponents.mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
         } }, getContent()));
 };
 const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
@@ -12341,7 +12376,7 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
                         React.createElement(RaisedHandIcon, null)))),
                 callingParticipant.isScreenSharing && (React.createElement(react.Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles$2, ariaLabel: strings.sharingIconLabel })),
                 callingParticipant.isMuted && (React.createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel })),
-                /* @conditional-compile-remove(spotlight) */ callingParticipant.isSpotlighted && (React.createElement(react.Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles$2 }))));
+                /* @conditional-compile-remove(spotlight) */ callingParticipant.spotlight && (React.createElement(react.Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles$2 }))));
         }
         : () => null;
     /* @conditional-compile-remove(raise-hand) */
@@ -12807,10 +12842,11 @@ const useRemoteVideoStreamLifecycleMaintainer = (props) => {
 const useVideoTileContextualMenuProps = (props) => {
     var _a;
     const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, 
-    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds, 
+    /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = [], 
     /* @conditional-compile-remove(spotlight) */ isSpotlighted, 
     /* @conditional-compile-remove(spotlight) */ onStartSpotlight, 
-    /* @conditional-compile-remove(spotlight) */ onStopSpotlight } = props;
+    /* @conditional-compile-remove(spotlight) */ onStopSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight } = props;
     const scalingMode = React.useMemo(() => {
         var _a;
         return (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
@@ -12874,7 +12910,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         iconName: 'StopSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
                     },
-                    onClick: () => onStopSpotlight(remoteParticipant.userId),
+                    onClick: () => onStopSpotlight([remoteParticipant.userId]),
                     ariaLabel: strings.stopSpotlightVideoTileMenuLabel
                 });
             }
@@ -12883,6 +12919,9 @@ const useVideoTileContextualMenuProps = (props) => {
             const startSpotlightMenuLabel = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0
                 ? strings === null || strings === void 0 ? void 0 : strings.addSpotlightVideoTileMenuLabel
                 : strings === null || strings === void 0 ? void 0 : strings.startSpotlightVideoTileMenuLabel;
+            const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight
+                ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
+                : false;
             if (onStartSpotlight && remoteParticipant.userId && startSpotlightMenuLabel) {
                 items.push({
                     key: 'startSpotlight',
@@ -12891,8 +12930,10 @@ const useVideoTileContextualMenuProps = (props) => {
                         iconName: 'StartSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
                     },
-                    onClick: () => onStartSpotlight(remoteParticipant.userId),
-                    ariaLabel: startSpotlightMenuLabel
+                    onClick: () => onStartSpotlight([remoteParticipant.userId]),
+                    ariaLabel: startSpotlightMenuLabel,
+                    disabled: maxSpotlightedParticipantsReached,
+                    title: maxSpotlightedParticipantsReached ? strings === null || strings === void 0 ? void 0 : strings.spotlightLimitReachedMenuTitle : undefined
                 });
             }
         }
@@ -12949,7 +12990,8 @@ const useVideoTileContextualMenuProps = (props) => {
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
         /* @conditional-compile-remove(spotlight) */ isSpotlighted,
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
-        /* @conditional-compile-remove(spotlight) */ onStopSpotlight
+        /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight
     ]);
     return contextualMenuProps;
 };
@@ -13715,7 +13757,8 @@ const _RemoteVideoTile = React.memo((props) => {
     /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds, 
     /* @conditional-compile-remove(spotlight) */ isSpotlighted, 
     /* @conditional-compile-remove(spotlight) */ onStartSpotlight, 
-    /* @conditional-compile-remove(spotlight) */ onStopSpotlight, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, 
+    /* @conditional-compile-remove(spotlight) */ onStopSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, 
     /* @conditional-compile-remove(reaction) */ reactionResources } = props;
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
@@ -13753,7 +13796,8 @@ const _RemoteVideoTile = React.memo((props) => {
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
         /* @conditional-compile-remove(spotlight) */ isSpotlighted,
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
-        /* @conditional-compile-remove(spotlight) */ onStopSpotlight
+        /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight
     });
     const videoTileContextualMenuProps = React.useMemo(() => {
         if (menuKind !== 'contextual' || !contextualMenuProps) {
@@ -16213,6 +16257,8 @@ const VideoGallery = (props) => {
     onStartSpotlight, 
     /* @conditional-compile-remove(spotlight) */
     onStopSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    maxParticipantsToSpotlight, 
     /* @conditional-compile-remove(reaction) */
     reactionResources } = props;
     const ids = useIdentifiers();
@@ -16265,7 +16311,7 @@ const VideoGallery = (props) => {
             return onRenderLocalVideoTile(localParticipant);
         }
         /* @conditional-compile-remove(spotlight) */
-        const isSpotlighted = spotlightedParticipants === null || spotlightedParticipants === void 0 ? void 0 : spotlightedParticipants.includes(localParticipant.userId);
+        const isSpotlighted = !!localParticipant.spotlight;
         const localVideoTileStyles = react.concatStyleSets(localTileNotInGrid ? floatingLocalVideoTileStyle : {}, {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
@@ -16307,8 +16353,6 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(gallery-layouts) */
         layout,
         showLocalVideoTileLabel,
-        /* @conditional-compile-remove(spotlight) */
-        spotlightedParticipants,
         /* @conditional-compile-remove(reaction) */
         reactionResources
     ]);
@@ -16343,7 +16387,7 @@ const VideoGallery = (props) => {
         const selectedScalingMode = remoteVideoStream ? selectedScalingModeState[participant.userId] : undefined;
         let isPinned = pinnedParticipants === null || pinnedParticipants === void 0 ? void 0 : pinnedParticipants.includes(participant.userId);
         /* @conditional-compile-remove(spotlight) */
-        const isSpotlighted = spotlightedParticipants === null || spotlightedParticipants === void 0 ? void 0 : spotlightedParticipants.includes(participant.userId);
+        const isSpotlighted = !!participant.spotlight;
         /* @conditional-compile-remove(spotlight) */
         isPinned = isSpotlighted ? false : isPinned;
         const createViewOptions = () => {
@@ -16376,6 +16420,8 @@ const VideoGallery = (props) => {
             onStartSpotlight: onStartSpotlight, 
             /* @conditional-compile-remove(spotlight) */
             onStopSpotlight: onStopSpotlight, 
+            /* @conditional-compile-remove(spotlight) */
+            maxParticipantsToSpotlight: maxParticipantsToSpotlight, 
             /* @conditional-compile-remove(reaction) */
             reactionResources: reactionResources }));
     }, [
@@ -16397,6 +16443,7 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipants,
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
         /* @conditional-compile-remove(reaction) */ reactionResources
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
@@ -19956,12 +20003,12 @@ const memoizedConvertToVideoTileReaction = memoizeOne((reactionState) => {
  */
 const memoizedSpotlight = memoizeOne((spotlightedParticipants, userId) => {
     const spotlightOrder = spotlightedParticipants === null || spotlightedParticipants === void 0 ? void 0 : spotlightedParticipants.find((spotlightedParticipant) => toFlatCommunicationIdentifier(spotlightedParticipant.identifier) === userId);
-    return spotlightOrder ? { spotlightOrderPosition: spotlightOrder.order } : undefined;
+    return spotlightOrder ? { spotlightedOrderPosition: spotlightOrder.order } : undefined;
 });
 /* @conditional-compile-remove(spotlight) */
-const convertRemoteParticipantToParticipantListParticipantBetaSpotlight = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, isSpotlighted) => {
+const convertRemoteParticipantToParticipantListParticipantBetaSpotlight = (userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers, reaction, spotlight) => {
     return Object.assign(Object.assign({}, convertRemoteParticipantToParticipantListParticipant(userId, displayName, state, isMuted, isScreenSharing, isSpeaking, raisedHand, localUserCanRemoveOthers)), { reaction,
-        isSpotlighted });
+        spotlight });
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -19997,7 +20044,9 @@ const _videoGalleryRemoteParticipantsMemo = (remoteParticipants, isHideAttendeeN
             /* @conditional-compile-remove(raise-hand) */
             participant.raisedHand, 
             /* @conditional-compile-remove(reaction) */
-            remoteParticipantReaction);
+            remoteParticipantReaction, 
+            /* @conditional-compile-remove(spotlight) */
+            participant.spotlight);
         }));
     });
 };
@@ -20005,20 +20054,26 @@ const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpe
 /* @conditional-compile-remove(raise-hand) */
 raisedHand, // temp unknown type to build stable
 /* @conditional-compile-remove(reaction) */
-reaction // temp unknown type to build stable
+reaction, // temp unknown type to build stable
+/* @conditional-compile-remove(reaction) */
+spotlight // temp unknown type to build stable
 ) => {
     return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, 
     /* @conditional-compile-remove(raise-hand) */
     raisedHand, 
     /* @conditional-compile-remove(reaction) */
-    reaction);
+    reaction, 
+    /* @conditional-compile-remove(reaction) */
+    spotlight);
 });
 /** @private */
 const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName, 
 /* @conditional-compile-remove(raise-hand) */
 raisedHand, // temp unknown type to build stable
 /* @conditional-compile-remove(reaction) */
-reaction // temp unknown type to build stable
+reaction, // temp unknown type to build stable
+/* @conditional-compile-remove(reaction) */
+spotlight // temp unknown type to build stable
 ) => {
     const rawVideoStreamsArray = Object.values(videoStreams);
     let videoStream = undefined;
@@ -20047,7 +20102,9 @@ reaction // temp unknown type to build stable
         /* @conditional-compile-remove(raise-hand) */
         raisedHand: raisedHand,
         /* @conditional-compile-remove(reaction) */
-        reaction: reaction
+        reaction: reaction,
+        /* @conditional-compile-remove(reaction) */
+        spotlight: spotlight
     };
 };
 const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
@@ -20135,7 +20192,9 @@ const videoGallerySelector = reselect.createSelector([
     /* @conditional-compile-remove(reaction) */
     getLocalParticipantReactionState,
     /* @conditional-compile-remove(spotlight) */
-    getSpotlightedParticipants
+    getSpotlightedParticipants,
+    /* @conditional-compile-remove(spotlight) */
+    getMaxParticipantsToSpotlight
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
 /* @conditional-compile-remove(optimal-video-count) */
 optimalVideoCount, 
@@ -20148,7 +20207,9 @@ isHideAttendeeNamesEnabled,
 /* @conditional-compile-remove(reaction) */
 localParticipantReaction, 
 /* @conditional-compile-remove(spotlight) */
-spotlightedParticipants) => {
+spotlightedParticipants, 
+/* @conditional-compile-remove(spotlight) */
+maxParticipantsToSpotlight) => {
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
         ? remoteParticipants[screenShareRemoteParticipantId]
         : undefined;
@@ -20164,7 +20225,9 @@ spotlightedParticipants) => {
         screenShareParticipant: screenShareRemoteParticipant
             ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, 
             /* @conditional-compile-remove(raise-hand) */
-            screenShareRemoteParticipant.raisedHand)
+            screenShareRemoteParticipant.raisedHand, 
+            /* @conditional-compile-remove(spotlight) */
+            screenShareRemoteParticipant.spotlight)
             : undefined,
         localParticipant: memoizeLocalParticipant(identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
         /* @conditional-compile-remove(rooms) */
@@ -20182,7 +20245,9 @@ spotlightedParticipants) => {
         /* @conditional-compile-remove(optimal-video-count) */
         maxRemoteVideoStreams: optimalVideoCount,
         /* @conditional-compile-remove(spotlight) */
-        spotlightedParticipants: spotlightedParticipantIds
+        spotlightedParticipants: spotlightedParticipantIds,
+        /* @conditional-compile-remove(spotlight) */
+        maxParticipantsToSpotlight: maxParticipantsToSpotlight
     };
 });
 const updateUserDisplayNamesTrampoline$2 = (remoteParticipants) => {
@@ -20301,7 +20366,7 @@ spotlightedParticipants) => {
         /* @conditional-compile-remove(reaction) */
         reaction: localParticipantReaction,
         /* @conditional-compile-remove(spotlight) */
-        isSpotlighted: memoizedSpotlight(spotlightedParticipants, userId)
+        spotlight: memoizedSpotlight(spotlightedParticipants, userId)
     });
     /* @conditional-compile-remove(total-participant-count) */
     const totalParticipantCount = partitipantCount;
@@ -20462,7 +20527,7 @@ const useSelector$4 = (selector, selectorProps) => {
  * @public
  */
 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, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     // 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).
@@ -20572,6 +20637,10 @@ const errorBarSelector$1 = reselect.createSelector([getLatestErrors$1, getDiagno
     else {
         appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'CallAgent.join', 'failedToJoinCallGeneric');
     }
+    /* @conditional-compile-remove(spotlight) */
+    if ((_t = latestErrors['Call.feature']) === null || _t === void 0 ? void 0 : _t.message.match(/Call\.feature: startSpotlight failed\. \d+ is the max number of participants that can be Spotlighted/g)) {
+        appendActiveErrorIfDefined(activeErrorMessages, latestErrors, 'Call.feature', 'startSpotlightWhileMaxParticipantsAreSpotlighted');
+    }
     // We only return the first few errors to avoid filling up the UI with too many `MessageBar`s.
     activeErrorMessages.splice(maxErrorCount$1);
     return { activeErrorMessages: activeErrorMessages };
@@ -21687,24 +21756,28 @@ class ResourceDownloadQueue {
         const copy = Object.assign({}, message);
         this._messagesNeedingResourceRetrieval.push(copy);
     }
-    startQueue(threadId, operation) {
+    startQueue(threadId, operation, options) {
         return __awaiter$t(this, void 0, void 0, function* () {
             if (this.isActive) {
                 return;
             }
             while (this._messagesNeedingResourceRetrieval.length > 0) {
                 this.isActive = true;
-                const message = this._messagesNeedingResourceRetrieval.shift();
+                let message = this._messagesNeedingResourceRetrieval.shift();
                 if (!message) {
                     this.isActive = false;
                     continue;
                 }
                 try {
-                    const newMessage = yield operation(message, this._credential);
-                    if (newMessage) {
-                        this.isActive = false;
-                        this._context.setChatMessage(threadId, newMessage);
+                    if (options) {
+                        const singleUrl = options.singleUrl;
+                        message = yield this.downloadSingleUrl(message, singleUrl, operation);
+                    }
+                    else {
+                        message = yield this.downloadAllPreviewUrls(message, operation);
                     }
+                    this.isActive = false;
+                    this._context.setChatMessage(threadId, message);
                 }
                 catch (error) {
                     console.log('Downloading Resource error: ', error);
@@ -21712,37 +21785,39 @@ class ResourceDownloadQueue {
             }
         });
     }
-}
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-/**
- * @private
- */
-const requestAttachments = (message, credential) => __awaiter$t(void 0, void 0, void 0, function* () {
-    var _a;
-    const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
-    if (message.type === 'html' && attachments) {
-        if (message.resourceCache === undefined) {
-            message.resourceCache = {};
-        }
-        for (const attachment of attachments) {
-            if (attachment.previewUrl) {
-                const previewUrl = attachment.previewUrl;
-                try {
-                    const src = yield fetchImageSource(previewUrl, credential);
-                    message.resourceCache[previewUrl] = src;
+    downloadSingleUrl(message, resourceUrl, operation) {
+        return __awaiter$t(this, void 0, void 0, function* () {
+            if (message.resourceCache === undefined) {
+                message.resourceCache = {};
+            }
+            const blobUrl = yield operation(resourceUrl, this._credential);
+            message.resourceCache[resourceUrl] = blobUrl;
+            return message;
+        });
+    }
+    downloadAllPreviewUrls(message, operation) {
+        var _a;
+        return __awaiter$t(this, void 0, void 0, function* () {
+            const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
+            if (message.type === 'html' && attachments) {
+                if (message.resourceCache === undefined) {
+                    message.resourceCache = {};
                 }
-                catch (error) {
-                    throw new ResourceDownloadError(message);
+                for (const attachment of attachments) {
+                    if (attachment.previewUrl) {
+                        const blobUrl = yield operation(attachment.previewUrl, this._credential);
+                        message.resourceCache[attachment.previewUrl] = blobUrl;
+                    }
                 }
             }
-        }
+            return message;
+        });
     }
-    return message;
-});
+}
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 /**
  * @private
  */
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const fetchImageSource = (src, credential) => __awaiter$t(void 0, void 0, void 0, function* () {
     function fetchWithAuthentication(url, token) {
         return __awaiter$t(this, void 0, void 0, function* () {
@@ -21761,16 +21836,6 @@ const fetchImageSource = (src, credential) => __awaiter$t(void 0, void 0, void 0
     const blob = yield response.blob();
     return URL.createObjectURL(blob);
 });
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-/**
- * @private
- */
-class ResourceDownloadError extends Error {
-    constructor(chatMessageWithStatus) {
-        super();
-        this.chatMessageWithStatus = chatMessageWithStatus;
-    }
-}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -21787,7 +21852,7 @@ immer.enableMapSet();
 // Needed to generate state diff for verbose logging.
 immer.enablePatches();
 /**
- * @private
+ * @internal
  */
 let ChatContext$1 = class ChatContext {
     constructor(maxListeners, 
@@ -21801,12 +21866,15 @@ let ChatContext$1 = class ChatContext {
         this._batchMode = false;
         this.typingIndicatorInterval = undefined;
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        this._messageQueue = undefined;
+        this._inlineImageQueue = undefined;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        this._fullsizeImageQueue = undefined;
         this._logger = logger.createClientLogger('communication-react:chat-context');
         this._emitter = new EventEmitter();
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         if (credential) {
-            this._messageQueue = new ResourceDownloadQueue(this, credential);
+            this._inlineImageQueue = new ResourceDownloadQueue(this, credential);
+            this._fullsizeImageQueue = new ResourceDownloadQueue(this, credential);
         }
         if (maxListeners) {
             this._emitter.setMaxListeners(maxListeners);
@@ -21827,6 +21895,52 @@ let ChatContext$1 = class ChatContext {
             this._emitter.emit('stateChanged', this._state);
         }
     }
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    dispose() {
+        this.modifyState((draft) => {
+            Object.keys(draft.threads).forEach((threadId) => {
+                const thread = draft.threads[threadId];
+                Object.keys(thread.chatMessages).forEach((messageId) => {
+                    const cache = thread.chatMessages[messageId].resourceCache;
+                    if (cache) {
+                        Object.keys(cache).forEach((resourceUrl) => {
+                            const blobUrl = cache[resourceUrl];
+                            URL.revokeObjectURL(blobUrl);
+                        });
+                    }
+                    thread.chatMessages[messageId].resourceCache = undefined;
+                });
+            });
+        });
+        // Any item in queue should be removed.
+    }
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    downloadResourceToCache(threadId, messageId, resourceUrl) {
+        this.modifyState((draft) => {
+            var _a;
+            const message = (_a = draft.threads[threadId]) === null || _a === void 0 ? void 0 : _a.chatMessages[messageId];
+            if (message && this._fullsizeImageQueue) {
+                if (!message.resourceCache) {
+                    message.resourceCache = {};
+                }
+                // Need to discuss retry logic in case of failure
+                this._fullsizeImageQueue.addMessage(message);
+                this._fullsizeImageQueue.startQueue(threadId, fetchImageSource, { singleUrl: resourceUrl });
+            }
+        });
+    }
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    removeResourceFromCache(threadId, messageId, resourceUrl) {
+        this.modifyState((draft) => {
+            var _a;
+            const message = (_a = draft.threads[threadId]) === null || _a === void 0 ? void 0 : _a.chatMessages[messageId];
+            if (message && message.resourceCache) {
+                const blobUrl = message.resourceCache[resourceUrl];
+                URL.revokeObjectURL(blobUrl);
+                delete message.resourceCache[resourceUrl];
+            }
+        });
+    }
     setThread(threadId, threadState) {
         this.modifyState((draft) => {
             draft.threads[threadId] = threadState;
@@ -22054,12 +22168,12 @@ let ChatContext$1 = class ChatContext {
         var _a;
         const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
         if (message.type === 'html' && attachments && attachments.length > 0) {
-            if (this._messageQueue &&
-                !this._messageQueue.containsMessageWithSameAttachments(message) &&
+            if (this._inlineImageQueue &&
+                !this._inlineImageQueue.containsMessageWithSameAttachments(message) &&
                 message.resourceCache === undefined) {
                 // Need to discuss retry logic in case of failure
-                this._messageQueue.addMessage(message);
-                this._messageQueue.startQueue(threadId, requestAttachments);
+                this._inlineImageQueue.addMessage(message);
+                this._inlineImageQueue.startQueue(threadId, fetchImageSource);
             }
         }
     }
@@ -22774,6 +22888,21 @@ const _createStatefulChatClientWithDeps = (chatClient, args, options) => {
             eventSubscriber = val;
         }
     });
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    Object.defineProperty(proxy, 'dispose', {
+        configurable: false,
+        value: () => context === null || context === void 0 ? void 0 : context.dispose()
+    });
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    Object.defineProperty(proxy, 'downloadResourceToCache', {
+        configurable: false,
+        value: (threadId, messageId, resourceUrl) => context === null || context === void 0 ? void 0 : context.downloadResourceToCache(threadId, messageId, resourceUrl)
+    });
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    Object.defineProperty(proxy, 'removeResourceFromCache', {
+        configurable: false,
+        value: (threadId, messageId, resourceUrl) => context === null || context === void 0 ? void 0 : context.removeResourceFromCache(threadId, messageId, resourceUrl)
+    });
     Object.defineProperty(proxy, 'getState', {
         configurable: false,
         value: () => context === null || context === void 0 ? void 0 : context.getState()
@@ -22946,7 +23075,7 @@ const CallCompositeIcon = (props) => (React.createElement(react.FontIcon, Object
  */
 const CallWithChatCompositeIcon = (props) => (React.createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",notInvitedToRoomDetails:"You are not able to join this room because you do not have an invite.",notInvitedToRoomTitle:"Not invited to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",startSpotlightParticipantListMenuLabel:"Spotlight for everyone",addSpotlightParticipantListMenuLabel:"Add spotlight",stopSpotlightParticipantListMenuLabel:"Stop spotlighting",stopSpotlightOnSelfParticipantListMenuLabel:"Exit spotlight",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"The room ID provided could not be found.",roomNotFoundTitle:"Room not found",roomNotValidDetails:"This room is not valid at this current time.",roomNotValidTitle:"Room not valid",inviteToRoomRemovedDetails:"Your invite to join this room was removed.",inviteToRoomRemovedTitle:"Invite to room removed",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",dismissModalAriaLabel:"Local and remote picture and picture, press enter to return to call",callRejectedTitle:"The call could not be completed",callRejectedMoreDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutTitle:"The call could not be completed",callTimeoutDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutBotTitle:"The call could not be completed",callTimeoutBotDetails:"The service that you are trying to reach is unavailable. Please try again later.",dtmfDialerButtonLabel:"Dialpad",dtmfDialerButtonTooltipOn:"Show dialpad",dtmfDialerButtonTooltipOff:"Hide dialpad",dtmfDialerMoreButtonLabelOn:"Show dialpad",dtmfDialerMoreButtonLabelOff:"Hide dialpad",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"View",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic",moreButtonGalleryDefaultLayoutLabel:"Gallery view",moreButtonGalleryFocusedContentLayoutLabel:"Focus on content",moreButtonLargeGalleryDefaultLayoutLabel:"Large Gallery",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}},surveyTitle:"Help us improve",starSurveyHelperText:"How was the quality of the call?",starSurveyOneStarText:"The quality was bad.",starSurveyTwoStarText:"The quality was poor.",starSurveyThreeStarText:"The quality was good.",starSurveyFourStarText:"The quality was great.",starSurveyFiveStarText:"The quality was excellent.",surveyConfirmButtonLabel:"Send Feedback",starRatingAriaLabel:"Select {0} of {1} stars",surveySkipButtonLabel:"Skip",tagsSurveyQuestion:"What could have been better?",tagsSurveyTextFieldDefaultText:"Other, please specify",tagsSurveyHelperText:"Check any issues you experienced",surveyTextboxDefaultText:"Other, please specify",endOfSurveyText:"Thank you for your feedback!",surveyIssues:{overallRating:{callCannotJoin:"I could not join call",callCannotInvite:"I could not invite others into the call",hadToRejoin:"I had to rejoin the call",callEndedUnexpectedly:"Call ended for me unexpectedly",otherIssues:"I was having other issues with the call"},audioRating:{noLocalAudio:"The other side could not hear any sound",noRemoteAudio:"I could not hear any sound",echo:"I heard echos on the call",audioNoise:"I heard noise on the call",lowVolume:"Volume was low",audioStoppedUnexpectedly:"Audio stopped unexpectedly",distortedSpeech:"Audio was distorted",audioInterruption:"Audio was interrupted",otherIssues:"I was having other audio issues in this call"},videoRating:{noVideoReceived:"I could not see any video",noVideoSent:"Others could not see me",lowQuality:"Video quality was low",freezes:"Video frozen",stoppedUnexpectedly:"Video stopped unexpectedly",darkVideoReceived:"I can only see dark screens when others turn on their camera",audioVideoOutOfSync:"Audio and Video was out of sync",otherIssues:"I was having other video issues in this call"},screenshareRating:{noContentLocal:"Other people could not see my screenshare",noContentRemote:"I could not see other people's screenshare",cannotPresent:"I could not present my screen",lowQuality:"Screen share quality was low",freezes:"Screen share frozen",stoppedUnexpectedly:"Screen share stopped unexpectedly",largeDelay:"Screen share has a large delay",otherIssues:"I was having other screen share issues in this call"}},SurveyIssuesHeadingStrings:{overallRating:"Overall",audioRating:"Audio",videoRating:"Video",screenshareRating:"Presenting"},spotlightPrompt:{startSpotlightHeading:"Spotlight for everyone?",startSpotlightText:"You'll highlight this video for everyone in the meeting.",startSpotlightOnSelfText:"You'll highlight your video for everyone in the meeting.",startSpotlightConfirmButtonLabel:"Spotlight for everyone",startSpotlightCancelButtonLabel:"Cancel",stopSpotlightHeading:"Stop spotlighting?",stopSpotlightOnSelfHeading:"Exit spotlight?",stopSpotlightText:"This video will no longer be highlighted for everyone in the meeting.",stopSpotlightOnSelfText:"Your video will no longer be highlighted for everyone in the meeting.",stopSpotlightConfirmButtonLabel:"Stop spotlighting",stopSpotlightOnSelfConfirmButtonLabel:"Exit spotlight",stopSpotlightCancelButtonLabel:"Cancel"}};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",moreDrawerGalleryOptionsMenuTitle:"Gallery options",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
+var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",notInvitedToRoomDetails:"You are not able to join this room because you do not have an invite.",notInvitedToRoomTitle:"Not invited to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",startSpotlightParticipantListMenuLabel:"Spotlight for everyone",addSpotlightParticipantListMenuLabel:"Add spotlight",stopSpotlightParticipantListMenuLabel:"Stop spotlighting",stopSpotlightOnSelfParticipantListMenuLabel:"Exit spotlight",spotlightLimitReachedParticipantListMenuTitle:"Spotlight limit reached",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"The room ID provided could not be found.",roomNotFoundTitle:"Room not found",roomNotValidDetails:"This room is not valid at this current time.",roomNotValidTitle:"Room not valid",inviteToRoomRemovedDetails:"Your invite to join this room was removed.",inviteToRoomRemovedTitle:"Invite to room removed",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",dismissModalAriaLabel:"Local and remote picture and picture, press enter to return to call",callRejectedTitle:"The call could not be completed",callRejectedMoreDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutTitle:"The call could not be completed",callTimeoutDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutBotTitle:"The call could not be completed",callTimeoutBotDetails:"The service that you are trying to reach is unavailable. Please try again later.",dtmfDialerButtonLabel:"Dialpad",dtmfDialerButtonTooltipOn:"Show dialpad",dtmfDialerButtonTooltipOff:"Hide dialpad",dtmfDialerMoreButtonLabelOn:"Show dialpad",dtmfDialerMoreButtonLabelOff:"Hide dialpad",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"View",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic",moreButtonGalleryDefaultLayoutLabel:"Gallery view",moreButtonGalleryFocusedContentLayoutLabel:"Focus on content",moreButtonLargeGalleryDefaultLayoutLabel:"Large Gallery",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}},surveyTitle:"Help us improve",starSurveyHelperText:"How was the quality of the call?",starSurveyOneStarText:"The quality was bad.",starSurveyTwoStarText:"The quality was poor.",starSurveyThreeStarText:"The quality was good.",starSurveyFourStarText:"The quality was great.",starSurveyFiveStarText:"The quality was excellent.",surveyConfirmButtonLabel:"Send Feedback",starRatingAriaLabel:"Select {0} of {1} stars",surveySkipButtonLabel:"Skip",tagsSurveyQuestion:"What could have been better?",tagsSurveyTextFieldDefaultText:"Other, please specify",tagsSurveyHelperText:"Check any issues you experienced",surveyTextboxDefaultText:"Other, please specify",endOfSurveyText:"Thank you for your feedback!",surveyIssues:{overallRating:{callCannotJoin:"I could not join call",callCannotInvite:"I could not invite others into the call",hadToRejoin:"I had to rejoin the call",callEndedUnexpectedly:"Call ended for me unexpectedly",otherIssues:"I was having other issues with the call"},audioRating:{noLocalAudio:"The other side could not hear any sound",noRemoteAudio:"I could not hear any sound",echo:"I heard echos on the call",audioNoise:"I heard noise on the call",lowVolume:"Volume was low",audioStoppedUnexpectedly:"Audio stopped unexpectedly",distortedSpeech:"Audio was distorted",audioInterruption:"Audio was interrupted",otherIssues:"I was having other audio issues in this call"},videoRating:{noVideoReceived:"I could not see any video",noVideoSent:"Others could not see me",lowQuality:"Video quality was low",freezes:"Video frozen",stoppedUnexpectedly:"Video stopped unexpectedly",darkVideoReceived:"I can only see dark screens when others turn on their camera",audioVideoOutOfSync:"Audio and Video was out of sync",otherIssues:"I was having other video issues in this call"},screenshareRating:{noContentLocal:"Other people could not see my screenshare",noContentRemote:"I could not see other people's screenshare",cannotPresent:"I could not present my screen",lowQuality:"Screen share quality was low",freezes:"Screen share frozen",stoppedUnexpectedly:"Screen share stopped unexpectedly",largeDelay:"Screen share has a large delay",otherIssues:"I was having other screen share issues in this call"}},SurveyIssuesHeadingStrings:{overallRating:"Overall",audioRating:"Audio",videoRating:"Video",screenshareRating:"Presenting"},spotlightPrompt:{startSpotlightHeading:"Spotlight for everyone?",startSpotlightText:"You'll highlight this video for everyone in the meeting.",startSpotlightOnSelfText:"You'll highlight your video for everyone in the meeting.",startSpotlightConfirmButtonLabel:"Spotlight for everyone",startSpotlightCancelButtonLabel:"Cancel",stopSpotlightHeading:"Stop spotlighting?",stopSpotlightOnSelfHeading:"Exit spotlight?",stopSpotlightText:"This video will no longer be highlighted for everyone in the meeting.",stopSpotlightOnSelfText:"Your video will no longer be highlighted for everyone in the meeting.",stopSpotlightConfirmButtonLabel:"Stop spotlighting",stopSpotlightOnSelfConfirmButtonLabel:"Exit spotlight",stopSpotlightCancelButtonLabel:"Cancel"}};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",moreDrawerGalleryOptionsMenuTitle:"Gallery options",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -25408,12 +25537,12 @@ const createCompositeHandlers = memoizeOne((adapter) => ({
         return yield adapter.submitSurvey(survey);
     }),
     /* @conditional-compile-remove(spotlight) */
-    onStartSpotlight: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.startSpotlight(userId);
+    onStartSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
+        yield adapter.startSpotlight(userIds);
     }),
     /* @conditional-compile-remove(spotlight) */
-    onStopSpotlight: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.stopSpotlight(userId);
+    onStopSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
+        yield adapter.stopSpotlight(userIds);
     })
 }));
 
@@ -28715,7 +28844,9 @@ const usePeoplePane = (props) => {
     /* @conditional-compile-remove(spotlight) */
     onStopSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    ableToSpotlight } = props;
+    ableToSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    maxParticipantsToSpotlight } = props;
     const closePane = React.useCallback(() => {
         var _a;
         updateSidePaneRenderer(undefined);
@@ -28736,7 +28867,7 @@ const usePeoplePane = (props) => {
                     key: 'stop-spotlight',
                     text: stopSpotlightMenuText,
                     onClick: () => {
-                        onStopSpotlight === null || onStopSpotlight === void 0 ? void 0 : onStopSpotlight(participantId);
+                        onStopSpotlight === null || onStopSpotlight === void 0 ? void 0 : onStopSpotlight([participantId]);
                     },
                     iconProps: {
                         iconName: 'StopSpotlightContextualMenuItem',
@@ -28750,18 +28881,27 @@ const usePeoplePane = (props) => {
             const startSpotlightMenuText = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0
                 ? localeStrings.addSpotlightParticipantListMenuLabel
                 : localeStrings.startSpotlightParticipantListMenuLabel;
+            const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight
+                ? spotlightedParticipantUserIds
+                    ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
+                    : false
+                : false;
             if (onStartSpotlight && startSpotlightMenuText && ableToSpotlight) {
                 _defaultMenuItems.push({
                     key: 'start-spotlight',
                     text: startSpotlightMenuText,
                     onClick: () => {
-                        onStartSpotlight === null || onStartSpotlight === void 0 ? void 0 : onStartSpotlight(participantId);
+                        onStartSpotlight === null || onStartSpotlight === void 0 ? void 0 : onStartSpotlight([participantId]);
                     },
                     iconProps: {
                         iconName: 'StartSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
                     },
-                    ariaLabel: startSpotlightMenuText
+                    ariaLabel: startSpotlightMenuText,
+                    disabled: maxSpotlightedParticipantsReached,
+                    title: maxSpotlightedParticipantsReached
+                        ? localeStrings.spotlightLimitReachedParticipantListMenuTitle
+                        : undefined
                 });
             }
         }
@@ -28777,7 +28917,9 @@ const usePeoplePane = (props) => {
         localeStrings.stopSpotlightOnSelfParticipantListMenuLabel,
         localeStrings.addSpotlightParticipantListMenuLabel,
         localeStrings.startSpotlightParticipantListMenuLabel,
-        ableToSpotlight
+        localeStrings.spotlightLimitReachedParticipantListMenuTitle,
+        ableToSpotlight,
+        maxParticipantsToSpotlight
     ]);
     let _onFetchParticipantMenuItems = onFetchParticipantMenuItems;
     /* @conditional-compile-remove(spotlight) */
@@ -29506,8 +29648,11 @@ const useSpotlightCallbacksWithPrompt = (onStartSpotlight, onStopSpotlight, setI
 };
 /* @conditional-compile-remove(spotlight) */
 const getStartSpotlightWithPromptCallback = (myUserId, onStartSpotlight, setIsPromptOpen, setPromptProps, strings) => {
-    return (userId) => __awaiter$d(void 0, void 0, void 0, function* () {
-        const startSpotlightPromptText = userId === myUserId
+    return (userIds) => __awaiter$d(void 0, void 0, void 0, function* () {
+        if (userIds && userIds.length > 1) {
+            onStartSpotlight(userIds);
+        }
+        const startSpotlightPromptText = userIds === undefined || userIds[0] === myUserId
             ? strings.spotlightPrompt.startSpotlightOnSelfText
             : strings.spotlightPrompt.startSpotlightText;
         setPromptProps({
@@ -29516,7 +29661,7 @@ const getStartSpotlightWithPromptCallback = (myUserId, onStartSpotlight, setIsPr
             confirmButtonLabel: strings.spotlightPrompt.startSpotlightConfirmButtonLabel,
             cancelButtonLabel: strings.spotlightPrompt.startSpotlightCancelButtonLabel,
             onConfirm: () => {
-                onStartSpotlight(userId);
+                onStartSpotlight(userIds);
                 setIsPromptOpen(false);
             },
             onCancel: () => setIsPromptOpen(false)
@@ -29526,12 +29671,17 @@ const getStartSpotlightWithPromptCallback = (myUserId, onStartSpotlight, setIsPr
 };
 /* @conditional-compile-remove(spotlight) */
 const getStopSpotlightWithPromptCallback = (myUserId, onStopSpotlight, setIsPromptOpen, setPromptProps, strings) => {
-    return (userId) => __awaiter$d(void 0, void 0, void 0, function* () {
-        const stopSpotlightPromptHeading = userId === myUserId
+    return (userIds) => __awaiter$d(void 0, void 0, void 0, function* () {
+        if (userIds && userIds.length > 1) {
+            onStopSpotlight(userIds);
+        }
+        const stopSpotlightPromptHeading = userIds === undefined || userIds[0] === myUserId
             ? strings.spotlightPrompt.stopSpotlightOnSelfHeading
             : strings.spotlightPrompt.stopSpotlightHeading;
-        const stopSpotlightPromptText = userId === myUserId ? strings.spotlightPrompt.stopSpotlightOnSelfText : strings.spotlightPrompt.stopSpotlightText;
-        const stopSpotlightPromptConfirmButtonLabel = userId === myUserId
+        const stopSpotlightPromptText = userIds === undefined || userIds[0] === myUserId
+            ? strings.spotlightPrompt.stopSpotlightOnSelfText
+            : strings.spotlightPrompt.stopSpotlightText;
+        const stopSpotlightPromptConfirmButtonLabel = userIds === undefined || userIds[0] === myUserId
             ? strings.spotlightPrompt.stopSpotlightOnSelfConfirmButtonLabel
             : strings.spotlightPrompt.stopSpotlightConfirmButtonLabel;
         setPromptProps({
@@ -29540,7 +29690,7 @@ const getStopSpotlightWithPromptCallback = (myUserId, onStopSpotlight, setIsProm
             confirmButtonLabel: stopSpotlightPromptConfirmButtonLabel,
             cancelButtonLabel: strings.spotlightPrompt.stopSpotlightCancelButtonLabel,
             onConfirm: () => {
-                onStopSpotlight(userId);
+                onStopSpotlight(userIds);
                 setIsPromptOpen(false);
             },
             onCancel: () => setIsPromptOpen(false)
@@ -29599,14 +29749,15 @@ const CallArrangement = (props) => {
     /* @conditional-compile-remove(spotlight) */
     const { setPromptProps, setIsPromptOpen } = props;
     /* @conditional-compile-remove(spotlight) */
-    const { onStartSpotlight, onStopSpotlight, spotlightedParticipants } = videoGalleryProps;
+    const { onStartSpotlight, onStopSpotlight, spotlightedParticipants, maxParticipantsToSpotlight } = videoGalleryProps;
     /* @conditional-compile-remove(spotlight) */
     const { onStartSpotlightWithPrompt, onStopSpotlightWithPrompt } = useSpotlightCallbacksWithPrompt(onStartSpotlight, onStopSpotlight, setIsPromptOpen, setPromptProps);
     const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign({}, peoplePaneProps), { 
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds: spotlightedParticipants, 
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight: onStartSpotlightWithPrompt, 
         /* @conditional-compile-remove(spotlight) */ onStopSpotlight: onStopSpotlightWithPrompt, 
-        /* @conditional-compile-remove(spotlight) */ ableToSpotlight: (_c = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.capabilitiesFeature) === null || _c === void 0 ? void 0 : _c.capabilities.spotlightParticipant.isPresent }));
+        /* @conditional-compile-remove(spotlight) */ ableToSpotlight: (_c = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.capabilitiesFeature) === null || _c === void 0 ? void 0 : _c.capabilities.spotlightParticipant.isPresent, 
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight }));
     const togglePeoplePane = React.useCallback(() => {
         if (isPeoplePaneOpen) {
             closePeoplePane();
@@ -33878,15 +34029,15 @@ class AzureCommunicationCallAdapter {
         });
     }
     /* @conditional-compile-remove(spotlight) */
-    startSpotlight(userId) {
+    startSpotlight(userIds) {
         return __awaiter$5(this, void 0, void 0, function* () {
-            this.handlers.onStartSpotlight(userId);
+            this.handlers.onStartSpotlight(userIds);
         });
     }
     /* @conditional-compile-remove(spotlight) */
-    stopSpotlight(userId) {
+    stopSpotlight(userIds) {
         return __awaiter$5(this, void 0, void 0, function* () {
-            this.handlers.onStopSpotlight(userId);
+            this.handlers.onStopSpotlight(userIds);
         });
     }
     getState() {
@@ -33926,7 +34077,7 @@ class AzureCommunicationCallAdapter {
         }
     }
     subscribeCallEvents() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         /* @conditional-compile-remove(calling-sounds) */
         if (this.call) {
             this.callingSoundSubscriber = new CallingSoundSubscriber(this.call, this.getState().targetCallees, this.getState().sounds);
@@ -33943,6 +34094,8 @@ class AzureCommunicationCallAdapter {
         (_g = this.call) === null || _g === void 0 ? void 0 : _g.feature(communicationCalling.Features.Transfer).on('transferRequested', this.transferRequested.bind(this));
         /* @conditional-compile-remove(capabilities) */
         (_h = this.call) === null || _h === void 0 ? void 0 : _h.feature(communicationCalling.Features.Capabilities).on('capabilitiesChanged', this.capabilitiesChanged.bind(this));
+        /* @conditional-compile-remove(spotlight) */
+        (_j = this.call) === null || _j === void 0 ? void 0 : _j.feature(communicationCalling.Features.Spotlight).on('spotlightChanged', this.spotlightChanged.bind(this));
     }
     unsubscribeCallEvents() {
         var _a, _b, _c, _d, _e;
@@ -34054,6 +34207,10 @@ class AzureCommunicationCallAdapter {
         }
         this.emitter.emit('roleChanged');
     }
+    /* @conditional-compile-remove(spotlight) */
+    spotlightChanged(args) {
+        this.emitter.emit('spotlightChanged', args);
+    }
     callIdChanged() {
         var _a;
         ((_a = this.call) === null || _a === void 0 ? void 0 : _a.id) && this.emitter.emit('callIdChanged', { callId: this.call.id });
@@ -34648,15 +34805,15 @@ class CallWithChatBackedCallAdapter {
         });
     }
     /* @conditional-compile-remove(spotlight) */
-    startSpotlight(userId) {
+    startSpotlight(userIds) {
         return __awaiter$4(this, void 0, void 0, function* () {
-            return this.callWithChatAdapter.startSpotlight(userId);
+            return this.callWithChatAdapter.startSpotlight(userIds);
         });
     }
     /* @conditional-compile-remove(spotlight) */
-    stopSpotlight(userId) {
+    stopSpotlight(userIds) {
         return __awaiter$4(this, void 0, void 0, function* () {
-            return this.callWithChatAdapter.stopSpotlight(userId);
+            return this.callWithChatAdapter.stopSpotlight(userIds);
         });
     }
 }
@@ -35786,15 +35943,15 @@ class AzureCommunicationCallWithChatAdapter {
         });
     }
     /* @conditional-compile-remove(spotlight) */
-    startSpotlight(userId) {
+    startSpotlight(userIds) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return this.callAdapter.startSpotlight(userId);
+            return this.callAdapter.startSpotlight(userIds);
         });
     }
     /* @conditional-compile-remove(spotlight) */
-    stopSpotlight(userId) {
+    stopSpotlight(userIds) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return this.callAdapter.stopSpotlight(userId);
+            return this.callAdapter.stopSpotlight(userIds);
         });
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -36658,6 +36815,7 @@ exports.darkTheme = darkTheme;
 exports.fromFlatCommunicationIdentifier = fromFlatCommunicationIdentifier;
 exports.getCallingSelector = getSelector$1;
 exports.getChatSelector = getSelector;
+exports.imageOverlayTheme = imageOverlayTheme;
 exports.lightTheme = lightTheme;
 exports.onResolveVideoEffectDependency = onResolveVideoEffectDependency;
 exports.onResolveVideoEffectDependencyLazy = onResolveVideoEffectDependencyLazy;