@azure/communication-react 1.24.0-alpha-202501310016 → 1.24.0-alpha-202502010017

package/dist/dist-cjs/communication-react/{index-B8uYcMR8.js → index--34qf-o2.js}

@@ -188,7 +188,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.24.0-alpha-202501310016';
+var telemetryVersion = '1.24.0-alpha-202502010017';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -8078,13 +8078,9 @@ const customNotificationIconName = {
     breakoutRoomJoined: 'NotificationBarBreakoutRoomJoined',
     /* @conditional-compile-remove(breakout-rooms) */
     breakoutRoomClosingSoon: 'NotificationBarBreakoutRoomClosingSoon',
-    /* @conditional-compile-remove(media-access) */
     capabilityTurnVideoOnPresent: 'ControlButtonCameraOff',
-    /* @conditional-compile-remove(media-access) */
     capabilityTurnVideoOnAbsent: 'ControlButtonCameraProhibited',
-    /* @conditional-compile-remove(media-access) */
     capabilityUnmuteMicPresent: 'ControlButtonMicOff',
-    /* @conditional-compile-remove(media-access) */
     capabilityUnmuteMicAbsent: 'ControlButtonMicProhibited',
     /* @conditional-compile-remove(together-mode) */
     togetherModeStarted: 'NotificationBarTogetherModeIcon',
@@ -8141,19 +8137,13 @@ const nullToUndefined = (value) => (value === null ? undefined : value);
 /**
  * @private
  */
-const formatMoreButtonAriaDescription = (displayName, isMuted, isHandRaised, state, isSpeaking, strings, 
-/* @conditional-compile-remove(media-access) */
-isMicDisabled, 
-/* @conditional-compile-remove(media-access) */
-isCameraDisabled) => {
+const formatMoreButtonAriaDescription = (displayName, isMuted, isHandRaised, state, isSpeaking, strings, isMicDisabled, isCameraDisabled) => {
     const mutedState = isMuted
         ? strings === null || strings === undefined ? undefined : strings.moreOptionsParticipantMutedStateMutedAriaLabel
         : strings === null || strings === undefined ? undefined : strings.moreOptionsParticipantMutedStateUnmutedAriaLabel;
     const handRaisedState = isHandRaised ? strings === null || strings === undefined ? undefined : strings.moreOptionsParticipantHandRaisedAriaLabel : undefined;
     const isSpeakingState = isSpeaking ? strings === null || strings === undefined ? undefined : strings.moreOptionsParticipantIsSpeakingAriaLabel : undefined;
-    /* @conditional-compile-remove(media-access) */
     const micDisabledState = isMicDisabled ? strings === null || strings === undefined ? undefined : strings.moreOptionsParticipantMicDisabledAriaLabel : undefined;
-    /* @conditional-compile-remove(media-access) */
     const cameraDisabledState = isCameraDisabled ? strings === null || strings === undefined ? undefined : strings.moreOptionsParticipantCameraDisabledAriaLabel : undefined;
     const description = (strings === null || strings === undefined ? undefined : strings.moreOptionsButtonAriaLabel)
         ? _formatString(strings === null || strings === undefined ? undefined : strings.moreOptionsButtonAriaLabel, {
@@ -8162,9 +8152,7 @@ isCameraDisabled) => {
             isHandRaised: handRaisedState !== null && handRaisedState !== undefined ? handRaisedState : ' ',
             state: state !== null && state !== undefined ? state : ' ',
             isSpeaking: isSpeakingState !== null && isSpeakingState !== undefined ? isSpeakingState : ' ',
-            /* @conditional-compile-remove(media-access) */
             micDisabledState: micDisabledState !== null && micDisabledState !== undefined ? micDisabledState : ' ',
-            /* @conditional-compile-remove(media-access) */
             cameraDisabledState: cameraDisabledState !== null && cameraDisabledState !== undefined ? cameraDisabledState : ' '
         })
         : '';
@@ -8792,13 +8780,9 @@ const DEFAULT_COMPONENT_ICONS = {
     ControlButtonScreenShareStop: React.createElement(reactIcons.ShareScreenStop20Filled, null),
     ControlButtonRaiseHand: React.createElement(ControlButtonRaiseHandIcon, null),
     ControlButtonLowerHand: React.createElement(ControlButtonLowerHandIcon, null),
-    /* @conditional-compile-remove(media-access) */
     ControlButtonMicProhibited: React.createElement(reactIcons.MicProhibited20Filled, null),
-    /* @conditional-compile-remove(media-access) */
     ControlButtonMicProhibitedSmall: React.createElement(reactIcons.MicProhibited16Filled, null),
-    /* @conditional-compile-remove(media-access) */
     ControlButtonCameraProhibited: React.createElement(reactIcons.VideoProhibited20Filled, null),
-    /* @conditional-compile-remove(media-access) */
     ControlButtonCameraProhibitedSmall: React.createElement(reactIcons.VideoProhibited16Filled, null),
     RaiseHandContextualMenuItem: React.createElement(reactIcons.HandRight20Regular, null),
     LowerHandContextualMenuItem: React.createElement(reactIcons.HandRightOff20Regular, null),
@@ -8863,7 +8847,6 @@ const DEFAULT_COMPONENT_ICONS = {
     SendBoxSend: React.createElement(reactIcons.Send20Regular, null),
     SendBoxSendHovered: React.createElement(reactIcons.Send20Filled, null),
     VideoTileMicOff: React.createElement(reactIcons.MicOff16Filled, null),
-    /* @conditional-compile-remove(media-access) */
     VideoTileCameraOff: React.createElement(reactIcons.VideoProhibited16Filled, null),
     DialpadBackspace: React.createElement(reactIcons.Backspace20Regular, null),
     /* @conditional-compile-remove(call-readiness) */
@@ -16415,7 +16398,7 @@ class _ErrorBoundary extends React.Component {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-CAFpQ8Yk.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-B69n5di0.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -16423,7 +16406,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-CAFpQ8Yk.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-B69n5di0.js'); });
 /**
  * @private
  */
@@ -18008,16 +17991,13 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     const displayName = formatDisplayName(participant.displayName);
     const callingPalette = theme.callingPalette;
     const isPinned = pinnedParticipants && (pinnedParticipants === null || pinnedParticipants === undefined ? undefined : pinnedParticipants.includes(participant.userId));
-    const showRenderIconTrampoline = () => {
-        /* @conditional-compile-remove(media-access) */
-        return !!((callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.isScreenSharing) ||
-            (callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.isMuted) ||
-            (callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.raisedHand) ||
-            isPinned ||
-            !((callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.mediaAccess) ? callingParticipant.mediaAccess.isAudioPermitted : true) ||
-            !((callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.mediaAccess) ? callingParticipant.mediaAccess.isVideoPermitted : true));
-    };
-    const onRenderIcon = showRenderIconTrampoline()
+    const isScreenSharing = callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.isScreenSharing;
+    const isMuted = callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.isMuted;
+    const hasRaisedHand = callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.raisedHand;
+    const isAudioPermitted = (callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.mediaAccess) ? callingParticipant.mediaAccess.isAudioPermitted : true;
+    const isVideoPermitted = (callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.mediaAccess) ? callingParticipant.mediaAccess.isVideoPermitted : true;
+    const shouldRenderParticipantIcon = isScreenSharing || isMuted || hasRaisedHand || isPinned || !isAudioPermitted || !isVideoPermitted;
+    const onRenderIcon = shouldRenderParticipantIcon
         ? () => {
             var _a, _b;
             return (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.5rem' } },
@@ -18034,13 +18014,10 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
                 callingParticipant.isScreenSharing && (React.createElement(react.Icon, { iconName: "ParticipantItemScreenShareStart", className: iconStyles$2, ariaLabel: strings.sharingIconLabel })),
                 callingParticipant.spotlight && React.createElement(react.Icon, { iconName: "ParticipantItemSpotlighted", className: iconStyles$2 }),
                 isPinned && React.createElement(react.Icon, { iconName: "ParticipantItemPinned", className: iconStyles$2 }),
-                /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&
-                    !callingParticipant.mediaAccess.isVideoPermitted ? (React.createElement(react.Icon, { iconName: "ControlButtonCameraProhibited", className: iconStyles$2, ariaLabel: strings.mutedIconLabel })) : undefined,
-                /* @conditional-compile-remove(media-access) */ callingParticipant.mediaAccess &&
-                    !((_b = callingParticipant.mediaAccess) === null || _b === undefined ? undefined : _b.isAudioPermitted) ? (React.createElement(react.Icon, { iconName: "ControlButtonMicProhibited", className: iconStyles$2, ariaLabel: strings.mutedIconLabel })) : undefined,
-                /* @conditional-compile-remove(media-access) */ (callingParticipant.mediaAccess
-                    ? callingParticipant.mediaAccess.isAudioPermitted
-                    : true) && callingParticipant.isMuted ? (React.createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel })) : undefined));
+                callingParticipant.mediaAccess && !callingParticipant.mediaAccess.isVideoPermitted ? (React.createElement(react.Icon, { iconName: "ControlButtonCameraProhibited", className: iconStyles$2, ariaLabel: strings.mutedIconLabel })) : undefined,
+                callingParticipant.mediaAccess && !((_b = callingParticipant.mediaAccess) === null || _b === undefined ? undefined : _b.isAudioPermitted) ? (React.createElement(react.Icon, { iconName: "ControlButtonMicProhibited", className: iconStyles$2, ariaLabel: strings.mutedIconLabel })) : undefined,
+                (callingParticipant.mediaAccess ? callingParticipant.mediaAccess.isAudioPermitted : true) &&
+                    callingParticipant.isMuted ? (React.createElement(react.Icon, { iconName: "ParticipantItemMicOff", className: iconStyles$2, ariaLabel: strings.mutedIconLabel })) : undefined));
         }
         : () => null;
     const onRenderAvatarWithRaiseHand = (callingParticipant === null || callingParticipant === undefined ? undefined : callingParticipant.raisedHand) && onRenderAvatar
@@ -18051,9 +18028,7 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
         displayName: displayName !== null && displayName !== undefined ? displayName : '',
         connectionState: (_b = formatParticipantStateString(callingParticipant, strings)) !== null && _b !== undefined ? _b : '',
         mutedState: (_c = (callingParticipant.isMuted ? strings === null || strings === undefined ? undefined : strings.mutedIconLabel : undefined)) !== null && _c !== undefined ? _c : '',
-        /* @conditional-compile-remove(media-access) */
         micDisabledState: (_e = (((_d = callingParticipant.mediaAccess) === null || _d === undefined ? undefined : _d.isAudioPermitted) === false ? strings === null || strings === undefined ? undefined : strings.micDisabledIconLabel : undefined)) !== null && _e !== undefined ? _e : '',
-        /* @conditional-compile-remove(media-access) */
         cameraDisabledState: (_g = (((_f = callingParticipant.mediaAccess) === null || _f === undefined ? undefined : _f.isVideoPermitted) === false ? strings === null || strings === undefined ? undefined : strings.cameraDisabledIconLabel : undefined)) !== null && _g !== undefined ? _g : '',
         sharingState: (_h = (callingParticipant.isScreenSharing ? strings === null || strings === undefined ? undefined : strings.sharingIconLabel : undefined)) !== null && _h !== undefined ? _h : '',
         handRaisedState: (_p = (((_j = callingParticipant.raisedHand) === null || _j === undefined ? undefined : _j.raisedHandOrderPosition)
@@ -18648,26 +18623,15 @@ const callingComponentLogger = logger.createClientLogger('communication-react:ca
  * @private
  */
 const useVideoStreamLifecycleMaintainer = (props) => {
-    const { isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode, streamId, 
-    /* @conditional-compile-remove(media-access) */
-    isVideoPermitted } = props;
+    const { isMirrored, isScreenSharingOn, isStreamAvailable, onCreateStreamView, onDisposeStreamView, renderElementExists, scalingMode, streamId, isVideoPermitted } = props;
     const [videoStreamViewResult, setVideoStreamViewResult] = React.useState();
-    const createStreamViewTrampoline = React.useCallback((isStreamAvailable, renderElementExists, 
-    /* @conditional-compile-remove(media-access) */ isVideoPermitted) => {
+    React.useEffect(() => {
         var _a;
-        /* @conditional-compile-remove(media-access) */
-        if (isVideoPermitted === false) {
-            return;
-        }
-        if (isStreamAvailable && !renderElementExists) {
+        if (isVideoPermitted !== false && isStreamAvailable && !renderElementExists) {
             (_a = onCreateStreamView === null || onCreateStreamView === undefined ? undefined : onCreateStreamView({ isMirrored, scalingMode })) === null || _a === undefined ? undefined : _a.then((result) => {
                 result && setVideoStreamViewResult(result);
             });
         }
-    }, [isMirrored, onCreateStreamView, scalingMode]);
-    React.useEffect(() => {
-        createStreamViewTrampoline(isStreamAvailable, renderElementExists, 
-        /* @conditional-compile-remove(media-access) */ isVideoPermitted);
         // Always clean up element to make tile up to date and be able to dispose correctly
         return () => {
             if (renderElementExists) {
@@ -18689,8 +18653,6 @@ const useVideoStreamLifecycleMaintainer = (props) => {
         renderElementExists,
         scalingMode,
         streamId,
-        createStreamViewTrampoline,
-        /* @conditional-compile-remove(media-access) */
         isVideoPermitted
     ]);
     // The execution order for above useEffect is onCreateRemoteStreamView =>(async time gap) RenderElement generated => element disposed => onDisposeRemoteStreamView
@@ -18746,15 +18708,7 @@ const useRemoteVideoStreamLifecycleMaintainer = (props) => {
  */
 const useVideoTileContextualMenuProps = (props) => {
     var _a;
-    const { participant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, spotlightedParticipantUserIds = [], isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, myUserId, onMuteParticipant, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidVideo, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitVideo } = props;
+    const { participant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, spotlightedParticipantUserIds = [], isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, myUserId, onMuteParticipant, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = props;
     const scalingMode = React.useMemo(() => {
         var _a;
         return (_a = props.participant.videoStream) === null || _a === undefined ? undefined : _a.scalingMode;
@@ -18776,7 +18730,6 @@ const useVideoTileContextualMenuProps = (props) => {
                 disabled: participant.isMuted
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if (participant.canAudioBeForbidden &&
             participant.mediaAccess &&
             !participant.mediaAccess.isAudioPermitted &&
@@ -18793,7 +18746,6 @@ const useVideoTileContextualMenuProps = (props) => {
                 ariaLabel: strings === null || strings === undefined ? undefined : strings.permitAudioTileMenuLabel
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if (participant.canAudioBeForbidden && ((_a = participant.mediaAccess) === null || _a === undefined ? undefined : _a.isAudioPermitted) && onForbidAudio) {
             items.push({
                 key: 'forbidAudio',
@@ -18807,7 +18759,6 @@ const useVideoTileContextualMenuProps = (props) => {
                 ariaLabel: strings === null || strings === undefined ? undefined : strings.forbidAudioTileMenuLabel
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if (participant.canVideoBeForbidden &&
             participant.mediaAccess &&
             !participant.mediaAccess.isVideoPermitted &&
@@ -18824,7 +18775,6 @@ const useVideoTileContextualMenuProps = (props) => {
                 ariaLabel: strings === null || strings === undefined ? undefined : strings.permitVideoTileMenuLabel
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if (participant.canVideoBeForbidden && ((_b = participant.mediaAccess) === null || _b === undefined ? undefined : _b.isVideoPermitted) && onForbidVideo) {
             items.push({
                 key: 'forbidVideo',
@@ -18982,19 +18932,12 @@ const useVideoTileContextualMenuProps = (props) => {
         onStartSpotlight,
         onUpdateScalingMode,
         view,
-        /* @conditional-compile-remove(media-access) */
         participant.canAudioBeForbidden,
-        /* @conditional-compile-remove(media-access) */
         participant.canVideoBeForbidden,
-        /* @conditional-compile-remove(media-access) */
         participant.mediaAccess,
-        /* @conditional-compile-remove(media-access) */
         onPermitAudio,
-        /* @conditional-compile-remove(media-access) */
         onForbidAudio,
-        /* @conditional-compile-remove(media-access) */
         onPermitVideo,
-        /* @conditional-compile-remove(media-access) */
         onForbidVideo
     ]);
     return contextualMenuProps;
@@ -19376,18 +19319,10 @@ const videoTileMoreMenuProps = {
 const VideoTileMoreOptionsButton = (props) => {
     const locale = useLocale$1().strings.videoTile;
     const theme = useTheme();
-    const { contextualMenu, canShowContextMenuButton, participantDisplayName, participantHandRaised, participantIsSpeaking, participantState, participantIsMuted, 
-    /* @conditional-compile-remove(media-access) */
-    isMicDisabled, 
-    /* @conditional-compile-remove(media-access) */
-    isCameraDisabled } = props;
+    const { contextualMenu, canShowContextMenuButton, participantDisplayName, participantHandRaised, participantIsSpeaking, participantState, participantIsMuted, isMicDisabled, isCameraDisabled } = props;
     const [moreButtonAiraDescription, setMoreButtonAriaDescription] = React.useState('');
     React.useEffect(() => {
-        setMoreButtonAriaDescription(formatMoreButtonAriaDescription(participantDisplayName, participantIsMuted, participantHandRaised, participantState, participantIsSpeaking, locale, 
-        /* @conditional-compile-remove(media-access) */
-        isMicDisabled, 
-        /* @conditional-compile-remove(media-access) */
-        isCameraDisabled));
+        setMoreButtonAriaDescription(formatMoreButtonAriaDescription(participantDisplayName, participantIsMuted, participantHandRaised, participantState, participantIsSpeaking, locale, isMicDisabled, isCameraDisabled));
     }, [
         participantDisplayName,
         participantHandRaised,
@@ -19395,9 +19330,7 @@ const VideoTileMoreOptionsButton = (props) => {
         participantIsSpeaking,
         participantState,
         locale,
-        /* @conditional-compile-remove(media-access) */
         isMicDisabled,
-        /* @conditional-compile-remove(media-access) */
         isCameraDisabled
     ]);
     if (!contextualMenu) {
@@ -19414,9 +19347,7 @@ const VideoTileMoreOptionsButton = (props) => {
  * @public
  */
 const VideoTile = (props) => {
-    const { children, displayName, initialsName, isMirrored, isMuted, isSpotlighted, isPinned, onRenderPlaceholder, renderElement, overlay: reactionOverlay, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, raisedHand, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, contextualMenu, 
-    /* @conditional-compile-remove(media-access) */
-    mediaAccess } = props;
+    const { children, displayName, initialsName, isMirrored, isMuted, isSpotlighted, isPinned, onRenderPlaceholder, renderElement, overlay: reactionOverlay, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, raisedHand, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, contextualMenu, mediaAccess } = props;
     const [isHovered, setIsHovered] = React.useState(false);
     const [isFocused, setIsFocused] = React.useState(false);
     // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.
@@ -19509,17 +19440,7 @@ const VideoTile = (props) => {
     const canShowContextMenuButton = isHovered || isFocused;
     let raisedHandBackgroundColor = '';
     raisedHandBackgroundColor = callingPalette.raiseHandGold;
-    const participantMediaAccessIcons = React.useMemo(() => canShowLabel || participantStateString
-        ? getMediaAccessIconsTrampoline(showMuteIndicator, isMuted, 
-        /* @conditional-compile-remove(media-access) */
-        mediaAccess)
-        : undefined, [
-        canShowLabel,
-        isMuted,
-        /* @conditional-compile-remove(media-access) */ mediaAccess,
-        participantStateString,
-        showMuteIndicator
-    ]);
+    const participantMediaAccessIcons = React.useMemo(() => canShowLabel || participantStateString ? getMediaAccessIcons(showMuteIndicator, isMuted, mediaAccess) : undefined, [canShowLabel, isMuted, mediaAccess, participantStateString, showMuteIndicator]);
     const canShowParticipantIcons = participantMediaAccessIcons || isSpotlighted || isPinned;
     return (React.createElement(react.Stack, Object.assign({ "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
             background: theme.palette.neutralLighter,
@@ -19552,11 +19473,7 @@ const VideoTile = (props) => {
                             React.createElement(react.Icon, { iconName: "VideoTileSpotlighted" }))),
                         isPinned && (React.createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
                             React.createElement(react.Icon, { iconName: "VideoTilePinned", className: react.mergeStyles(pinIconStyle) }))))),
-                    React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, participantDisplayName: displayName, participantHandRaised: !!raisedHand, participantIsMuted: isMuted, participantState: participantStateString, participantIsSpeaking: isSpeaking, canShowContextMenuButton: canShowContextMenuButton, 
-                        /* @conditional-compile-remove(media-access) */
-                        isMicDisabled: (mediaAccess === null || mediaAccess === undefined ? undefined : mediaAccess.isAudioPermitted) === false, 
-                        /* @conditional-compile-remove(media-access) */
-                        isCameraDisabled: (mediaAccess === null || mediaAccess === undefined ? undefined : mediaAccess.isVideoPermitted) === false })))),
+                    React.createElement(VideoTileMoreOptionsButton, { contextualMenu: contextualMenu, participantDisplayName: displayName, participantHandRaised: !!raisedHand, participantIsMuted: isMuted, participantState: participantStateString, participantIsSpeaking: isSpeaking, canShowContextMenuButton: canShowContextMenuButton, isMicDisabled: (mediaAccess === null || mediaAccess === undefined ? undefined : mediaAccess.isAudioPermitted) === false, isCameraDisabled: (mediaAccess === null || mediaAccess === undefined ? undefined : mediaAccess.isVideoPermitted) === false })))),
             children && (React.createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === undefined ? undefined : styles.overlayContainer) }, children)),
             raisedHand && (React.createElement(react.Stack, { horizontal: true, tokens: { childrenGap: '0.2rem' }, className: raiseHandContainerStyles(theme, !canShowLabel) },
                 React.createElement(react.Stack.Item, null,
@@ -19564,21 +19481,16 @@ const VideoTile = (props) => {
                 React.createElement(react.Stack.Item, null,
                     React.createElement(RaisedHandIcon, null)))))));
 };
-const getMediaAccessIconsTrampoline = (showMuteIndicator, isMuted, mediaAccess) => {
-    /* @conditional-compile-remove(media-access) */
+const getMediaAccessIcons = (showMuteIndicator, isMuted, mediaAccess) => {
     const cameraForbidIcon = mediaAccess && !(mediaAccess === null || mediaAccess === undefined ? undefined : mediaAccess.isVideoPermitted) ? (React.createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
         React.createElement(react.Icon, { iconName: "ControlButtonCameraProhibitedSmall" }))) : undefined;
-    /* @conditional-compile-remove(media-access) */
     const micOffIcon = (mediaAccess ? mediaAccess.isAudioPermitted : true) && showMuteIndicator && isMuted ? (React.createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
         React.createElement(react.Icon, { iconName: "VideoTileMicOff" }))) : undefined;
-    /* @conditional-compile-remove(media-access) */
     const micForbidIcon = mediaAccess && !(mediaAccess === null || mediaAccess === undefined ? undefined : mediaAccess.isAudioPermitted) && showMuteIndicator ? (React.createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle) },
         React.createElement(react.Icon, { iconName: "ControlButtonMicProhibitedSmall" }))) : undefined;
-    /* @conditional-compile-remove(media-access) */
     if (!(cameraForbidIcon || micOffIcon || micForbidIcon)) {
         return undefined;
     }
-    /* @conditional-compile-remove(media-access) */
     return (React.createElement(React.Fragment, null,
         cameraForbidIcon,
         micOffIcon,
@@ -20228,6 +20140,11 @@ const REACTION_TRAVEL_HEIGHT = 0.35 * REM_TO_PX_MULTIPLIER;
  */
 const REACTION_MAX_TRAVEL_HEIGHT = 0.5 * REM_TO_PX_MULTIPLIER;
 /* @conditional-compile-remove(together-mode) */
+/**
+ * The maximum width for displaying the participant's display name.
+ */
+const MAX_DISPLAY_NAME_WIDTH = 150;
+/* @conditional-compile-remove(together-mode) */
 /**
  * Sets the seating position for a participant in Together Mode.
  *
@@ -20352,15 +20269,25 @@ const togetherModeParticipantStatusContainer = (backgroundColor, borderRadius) =
  * @private
  */
 const togetherModeParticipantDisplayName = (isParticipantHovered, participantSeatingWidth, color) => {
-    const MIN_DISPLAY_NAME_WIDTH = 100;
+    // expands the display name width when participant is hovered or clicked on else make it 70% of the participant seating width
+    const width = isParticipantHovered || participantSeatingWidth * REM_TO_PX_MULTIPLIER > MAX_DISPLAY_NAME_WIDTH
+        ? 'fit-content'
+        : _pxToRem(0.7 * participantSeatingWidth * REM_TO_PX_MULTIPLIER);
+    // For smaller displays, the display name is hidden only participant is hovered or clicked on for mobile view
+    const showDisplayName = isParticipantHovered || participantSeatingWidth * REM_TO_PX_MULTIPLIER > MAX_DISPLAY_NAME_WIDTH
+        ? 'inline-block'
+        : 'none';
     return {
         textOverflow: 'ellipsis',
-        flexGrow: 1, // Allow text to grow within available space
-        overflow: isParticipantHovered ? 'visible' : 'hidden',
         whiteSpace: 'nowrap',
         textAlign: 'center',
         color,
-        display: isParticipantHovered || participantSeatingWidth > MIN_DISPLAY_NAME_WIDTH ? 'inline-block' : 'none' // Completely remove the element when hidden
+        overflow: isParticipantHovered ? 'visible' : 'hidden',
+        width,
+        display: showDisplayName,
+        fontSize: `${_pxToRem(13)}`,
+        lineHeight: `${_pxToRem(20)}`,
+        maxWidth: isParticipantHovered ? 'fit-content' : _pxToRem(0.7 * participantSeatingWidth * REM_TO_PX_MULTIPLIER)
     };
 };
 /* @conditional-compile-remove(together-mode) */
@@ -20369,7 +20296,7 @@ const togetherModeParticipantDisplayName = (isParticipantHovered, participantSea
  */
 const togetherModeParticipantEmojiSpriteStyle = (emojiSize, emojiScaledSize, participantSeatWidth) => {
     const participantSeatWidthInPixel = parseFloat(participantSeatWidth) * REM_TO_PX_MULTIPLIER;
-    const emojiScaledSizeInPercent = (emojiScaledSize / participantSeatWidthInPixel) * 100;
+    const emojiScaledSizeInPercent = 100 - (emojiScaledSize / participantSeatWidthInPixel) * 100;
     return {
         width: `${emojiSize}`,
         position: 'absolute',
@@ -20377,6 +20304,20 @@ const togetherModeParticipantEmojiSpriteStyle = (emojiSize, emojiScaledSize, par
         left: `${emojiScaledSizeInPercent / 2}%`
     };
 };
+/* @conditional-compile-remove(together-mode) */
+/**
+ * The style for the transition of the participant status container in Together Mode.
+ * @private
+ */
+const participantStatusTransitionStyle = {
+    position: 'absolute',
+    bottom: `${_pxToRem(2)}`,
+    width: 'fit-content',
+    textAlign: 'center',
+    transform: 'translate(-50%)',
+    transition: 'width 0.3s ease, transform 0.3s ease',
+    left: '50%'
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -20399,7 +20340,7 @@ const TogetherModeOverlay = React.memo((props) => {
      * It updates the togetherModeParticipantStatus state when there's a change in the remoteParticipants, localParticipant,
      * raisedHand, spotlight, isMuted, displayName, or hoveredParticipantID.
      */
-    React.useMemo(() => {
+    const updatedParticipantStatus = React.useMemo(() => {
         const allParticipants = [...remoteParticipants, localParticipant];
         const participantsWithVideoAvailable = allParticipants.filter((p) => { var _a; return ((_a = p.videoStream) === null || _a === undefined ? undefined : _a.isAvailable) && togetherModeSeatPositions[p.userId]; });
         const updatedSignals = {};
@@ -20422,16 +20363,13 @@ const TogetherModeOverlay = React.memo((props) => {
         }
         // This is used to remove the participants bounding box from the DOM when they are no longer in the stream
         const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter((id) => !updatedSignals[id]);
-        setTogetherModeParticipantStatus((prevSignals) => {
-            const newSignals = Object.assign(Object.assign({}, prevSignals), updatedSignals);
-            const newSignalsLength = Object.keys(newSignals).length;
-            participantsNotInTogetherModeStream.forEach((id) => {
-                delete newSignals[id];
-            });
-            const hasChanges = Object.keys(newSignals).some((key) => JSON.stringify(newSignals[key]) !== JSON.stringify(prevSignals[key]) ||
-                newSignalsLength !== Object.keys(prevSignals).length);
-            return hasChanges ? newSignals : prevSignals;
+        const newSignals = Object.assign(Object.assign({}, togetherModeParticipantStatus), updatedSignals);
+        participantsNotInTogetherModeStream.forEach((id) => {
+            delete newSignals[id];
         });
+        const hasSignalingChange = Object.keys(newSignals).some((key) => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key]));
+        const updateTogetherModeParticipantStatusState = hasSignalingChange || Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;
+        return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;
     }, [
         remoteParticipants,
         localParticipant,
@@ -20441,29 +20379,24 @@ const TogetherModeOverlay = React.memo((props) => {
         locale.strings.videoGallery.displayNamePlaceholder,
         hoveredParticipantID
     ]);
-    /*
-     * When a larger participant scene switches to a smaller group in Together Mode,
-     * participant video streams remain available because their video is still active,
-     * even though they are not visible in the Together Mode stream.
-     * Therefore, we rely on the updated seating position values to identify who is included in the Together Mode stream.
-     * The Together mode seat position will only contain seat coordinates of participants who are visible in the Together Mode stream.
-     */
-    React.useMemo(() => {
-        const removedVisibleParticipants = Object.keys(togetherModeParticipantStatus).filter((participantId) => !togetherModeSeatPositions[participantId]);
-        setTogetherModeParticipantStatus((prevSignals) => {
-            const newSignals = Object.assign({}, prevSignals);
-            removedVisibleParticipants.forEach((participantId) => {
-                delete newSignals[participantId];
-            });
-            // Trigger a re-render only if changes occurred
-            const hasChanges = Object.keys(newSignals).length !== Object.keys(prevSignals).length;
-            return hasChanges ? newSignals : prevSignals;
-        });
-    }, [togetherModeParticipantStatus, togetherModeSeatPositions]);
+    React.useEffect(() => {
+        if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {
+            setHoveredParticipantID('');
+        }
+        setTogetherModeParticipantStatus(updatedParticipantStatus);
+    }, [hoveredParticipantID, updatedParticipantStatus]);
     return (React.createElement("div", { style: { position: 'absolute', width: '100%', height: '100%' } }, Object.values(togetherModeParticipantStatus).map((participantStatus) => {
         var _a, _b;
         return participantStatus.id && (React.createElement("div", { key: participantStatus.id, style: Object.assign({}, getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)), onMouseEnter: () => setHoveredParticipantID(participantStatus.id), onMouseLeave: () => setHoveredParticipantID('') },
             React.createElement("div", null,
+                participantStatus.showDisplayName && (React.createElement("div", { style: Object.assign({}, participantStatusTransitionStyle) },
+                    React.createElement("div", { style: Object.assign({}, togetherModeParticipantStatusContainer(callingPalette.videoTileLabelBackgroundLight, theme.effects.roundedCorner4)) },
+                        participantStatus.isHandRaised && React.createElement(RaisedHandIcon, null),
+                        participantStatus.showDisplayName && (React.createElement(react.Text, { style: Object.assign({}, togetherModeParticipantDisplayName(hoveredParticipantID === participantStatus.id, parseFloat(participantStatus.seatPositionStyle.seatPosition.width), participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit')) }, participantStatus.displayName)),
+                        participantStatus.isMuted && (React.createElement(react.Stack, { className: react.mergeStyles(togetherModeIconStyle) },
+                            React.createElement(react.Icon, { iconName: "VideoTileMicOff" }))),
+                        participantStatus.isSpotlighted && (React.createElement(react.Stack, { className: react.mergeStyles(togetherModeIconStyle) },
+                            React.createElement(react.Icon, { iconName: "VideoTileSpotlighted" })))))),
                 ((_a = participantStatus.reaction) === null || _a === undefined ? undefined : _a.reactionType) && (
                 // First div - Section that fixes the travel height and applies the movement animation
                 // Second div - Responsible for ensuring the sprite emoji is always centered in the participant seat position
@@ -20472,15 +20405,7 @@ const TogetherModeOverlay = React.memo((props) => {
                         REACTION_MAX_TRAVEL_HEIGHT, parseFloat(participantStatus.seatPositionStyle.seatPosition.height) * REACTION_TRAVEL_HEIGHT) },
                     React.createElement("div", { style: Object.assign({}, togetherModeParticipantEmojiSpriteStyle(emojiSize, participantStatus.scaledSize || 1, participantStatus.seatPositionStyle.seatPosition.width)) },
                         React.createElement("div", { style: spriteAnimationStyles(REACTION_NUMBER_OF_ANIMATION_FRAMES, participantStatus.scaledSize || 1, (_b = (participantStatus.reaction &&
-                                getEmojiResource(participantStatus === null || participantStatus === undefined ? undefined : participantStatus.reaction.reactionType, reactionResources))) !== null && _b !== undefined ? _b : '') })))),
-                participantStatus.showDisplayName && (React.createElement("div", null,
-                    React.createElement("div", { style: Object.assign({}, togetherModeParticipantStatusContainer(callingPalette.videoTileLabelBackgroundLight, theme.effects.roundedCorner4)) },
-                        participantStatus.isHandRaised && React.createElement(RaisedHandIcon, null),
-                        participantStatus.showDisplayName && (React.createElement(react.Text, { style: Object.assign({}, togetherModeParticipantDisplayName(hoveredParticipantID === participantStatus.id, parseFloat(participantStatus.seatPositionStyle.seatPosition.width), participantStatus.displayName ? theme.palette.neutralSecondary : 'inherit')) }, participantStatus.displayName)),
-                        participantStatus.isMuted && (React.createElement(react.Stack, { className: react.mergeStyles(togetherModeIconStyle) },
-                            React.createElement(react.Icon, { iconName: "VideoTileMicOff" }))),
-                        participantStatus.isSpotlighted && (React.createElement(react.Stack, { className: react.mergeStyles(togetherModeIconStyle) },
-                            React.createElement(react.Icon, { iconName: "VideoTileSpotlighted" })))))))));
+                                getEmojiResource(participantStatus === null || participantStatus === undefined ? undefined : participantStatus.reaction.reactionType, reactionResources))) !== null && _b !== undefined ? _b : '') })))))));
     })));
 });
 
@@ -20569,15 +20494,7 @@ const MeetingReactionOverlay = (props) => {
 const _RemoteVideoTile = React.memo((props) => {
     var _a, _b;
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
-    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, spotlightedParticipantUserIds, isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, onMuteParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, reactionResources, streamId, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidVideo, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitVideo } = props;
+    isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, spotlightedParticipantUserIds, isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, onMuteParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, reactionResources, streamId, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = props;
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === undefined ? undefined : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -20589,7 +20506,6 @@ const _RemoteVideoTile = React.memo((props) => {
         renderElementExists: !!renderElement,
         scalingMode: remoteVideoViewOptions === null || remoteVideoViewOptions === undefined ? undefined : remoteVideoViewOptions.scalingMode,
         streamId,
-        /* @conditional-compile-remove(media-access) */
         isVideoPermitted: remoteParticipant.mediaAccess ? remoteParticipant.mediaAccess.isVideoPermitted : true
     }), [
         isAvailable,
@@ -20602,7 +20518,6 @@ const _RemoteVideoTile = React.memo((props) => {
         renderElement,
         userId,
         streamId,
-        /* @conditional-compile-remove(media-access) */
         remoteParticipant.mediaAccess
     ]);
     // Handle creating, destroying and updating the video stream as necessary
@@ -20623,10 +20538,10 @@ const _RemoteVideoTile = React.memo((props) => {
         onStopSpotlight,
         maxParticipantsToSpotlight,
         onMuteParticipant,
-        /* @conditional-compile-remove(media-access) */ onForbidAudio,
-        /* @conditional-compile-remove(media-access) */ onPermitAudio,
-        /* @conditional-compile-remove(media-access) */ onForbidVideo,
-        /* @conditional-compile-remove(media-access) */ onPermitVideo
+        onForbidAudio,
+        onPermitAudio,
+        onForbidVideo,
+        onPermitVideo
     });
     const videoTileContextualMenuProps = React.useMemo(() => {
         if (menuKind !== 'contextual' || !contextualMenuProps) {
@@ -20671,9 +20586,7 @@ const _RemoteVideoTile = React.memo((props) => {
     return (React.createElement(react.Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
         React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = formatInitialsName()) !== null && _b !== undefined ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, alwaysShowLabelBackground: props.alwaysShowLabelBackground, participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: props.onLongTouch
                 ? props.onLongTouch
-                : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps$1(contextualMenuProps, () => setDrawerMenuItemProps([]))), isSpotlighted: isSpotlighted, overlay: reactionOverlay, 
-            /* @conditional-compile-remove(media-access) */
-            mediaAccess: remoteParticipant.mediaAccess })),
+                : () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps$1(contextualMenuProps, () => setDrawerMenuItemProps([]))), isSpotlighted: isSpotlighted, overlay: reactionOverlay, mediaAccess: remoteParticipant.mediaAccess })),
         drawerMenuItemProps.length > 0 && (React.createElement(react.Layer, { hostId: props.drawerMenuHostId },
             React.createElement(react.Stack, { styles: drawerMenuWrapperStyles },
                 React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: displayName }))))));
@@ -20778,9 +20691,7 @@ const LocalScreenShare = React.memo((props) => {
         ? locale.strings.videoGallery.displayNamePlaceholder
         : localParticipant === null || localParticipant === undefined ? undefined : localParticipant.displayName;
     const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;
-    return (React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === undefined ? undefined : localParticipant.isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isAvailable === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), 
-        /* @conditional-compile-remove(media-access) */
-        mediaAccess: localParticipant.mediaAccess }));
+    return (React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === undefined ? undefined : localParticipant.isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isAvailable === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), mediaAccess: localParticipant.mediaAccess }));
 });
 
 // Copyright (c) Microsoft Corporation.
@@ -20885,9 +20796,7 @@ const LocalVideoCameraCycleButton = (props) => {
  * @internal
  */
 const _LocalVideoTile = React.memo((props) => {
-    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, alwaysShowLabelBackground, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, raisedHand, reaction, isSpotlighted, spotlightedParticipantUserIds, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, menuKind, strings, reactionResources, isScreenSharingOn, 
-    /* @conditional-compile-remove(media-access) */
-    mediaAccess } = props;
+    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, alwaysShowLabelBackground, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, raisedHand, reaction, isSpotlighted, spotlightedParticipantUserIds, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, menuKind, strings, reactionResources, isScreenSharingOn, mediaAccess } = props;
     const theme = useTheme();
     const localVideoStreamProps = React.useMemo(() => ({
         isMirrored: localVideoViewOptions === null || localVideoViewOptions === undefined ? undefined : localVideoViewOptions.isMirrored,
@@ -20896,7 +20805,6 @@ const _LocalVideoTile = React.memo((props) => {
         onDisposeLocalStreamView,
         renderElementExists: !!renderElement,
         scalingMode: localVideoViewOptions === null || localVideoViewOptions === undefined ? undefined : localVideoViewOptions.scalingMode,
-        /* @conditional-compile-remove(media-access) */
         isVideoPermitted: mediaAccess ? mediaAccess.isVideoPermitted : true
     }), [
         isAvailable,
@@ -20905,7 +20813,6 @@ const _LocalVideoTile = React.memo((props) => {
         onCreateLocalStreamView,
         onDisposeLocalStreamView,
         renderElement,
-        /* @conditional-compile-remove(media-access) */
         mediaAccess
     ]);
     // Handle creating, destroying and updating the video stream as necessary
@@ -20977,8 +20884,7 @@ const _LocalVideoTile = React.memo((props) => {
             React.createElement(react.Spinner, { label: strings === null || strings === undefined ? undefined : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", role: "alert", styles: loadSpinnerStyles(theme, false) })));
     }, [strings === null || strings === undefined ? undefined : strings.waitingScreenText, theme]);
     return (React.createElement(react.Stack, { "data-ui-id": "local-video-tile", className: react.mergeStyles({ width: '100%', height: '100%' }), onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
-        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== undefined ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay, 
-            /* @conditional-compile-remove(media-access) */ mediaAccess: mediaAccess }), drawerMenuItemProps.length > 0 && (React.createElement(react.Layer, { hostId: props.drawerMenuHostId },
+        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== undefined ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay, mediaAccess: mediaAccess }), drawerMenuItemProps.length > 0 && (React.createElement(react.Layer, { hostId: props.drawerMenuHostId },
             React.createElement(react.Stack, { styles: drawerMenuWrapperStyles },
                 React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))))));
 });
@@ -21871,9 +21777,9 @@ const DefaultLayout = (props) => {
     return (React.createElement(react.Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: rootLayoutStyle$1, tokens: videoGalleryLayoutGap },
         props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
         screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === undefined ? undefined : styles.gridLayout }, gridTiles)),
-        overflowGalleryTrampoline$4(overflowGallery, props.overflowGalleryPosition)));
+        overflowGalleryTrampoline$3(overflowGallery, props.overflowGalleryPosition)));
 };
-const overflowGalleryTrampoline$4 = (gallery, galleryPosition) => {
+const overflowGalleryTrampoline$3 = (gallery, galleryPosition) => {
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
 };
 
@@ -22726,9 +22632,9 @@ const FloatingLocalVideoLayout = (props) => {
         React.createElement(react.Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
             props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
             screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === undefined ? undefined : styles.gridLayout }, gridTiles)),
-            overflowGalleryTrampoline$3(overflowGallery, props.overflowGalleryPosition))));
+            overflowGalleryTrampoline$2(overflowGallery, props.overflowGalleryPosition))));
 };
-const overflowGalleryTrampoline$3 = (gallery, galleryPosition) => {
+const overflowGalleryTrampoline$2 = (gallery, galleryPosition) => {
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
 };
 
@@ -22821,9 +22727,9 @@ const SpeakerVideoLayout = (props) => {
         React.createElement(react.Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
             props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
             screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === undefined ? undefined : styles.gridLayout }, gridTiles)),
-            overflowGalleryTrampoline$2(overflowGallery, props.overflowGalleryPosition))));
+            overflowGalleryTrampoline$1(overflowGallery, props.overflowGalleryPosition))));
 };
-const overflowGalleryTrampoline$2 = (gallery, galleryPosition) => {
+const overflowGalleryTrampoline$1 = (gallery, galleryPosition) => {
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
 };
 
@@ -22915,9 +22821,9 @@ const LargeGalleryLayout = (props) => {
     return (React.createElement(react.Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: rootLayoutStyle$1, tokens: videoGalleryLayoutGap },
         props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
         screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === undefined ? undefined : styles.gridLayout }, gridTiles)),
-        overflowGalleryTrampoline$1(overflowGallery, props.overflowGalleryPosition)));
+        overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)));
 };
-const overflowGalleryTrampoline$1 = (gallery, galleryPosition) => {
+const overflowGalleryTrampoline = (gallery, galleryPosition) => {
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
 };
 const calculateMaxTilesInLargeGrid = (parentWidth, parentHeight) => {
@@ -22938,61 +22844,8 @@ const calculateMaxTilesInLargeGrid = (parentWidth, parentHeight) => {
  * https://reactjs.org/docs/react-api.html#reactmemo
  */
 const TogetherModeLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, parentHeight, overflowGalleryPosition = 'horizontalBottom', pinnedParticipantUserIds = [], togetherModeStreamComponent } = props;
-    const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    const isShort = parentHeight ? isShortHeight(parentHeight) : false;
-    const [indexesToRender, setIndexesToRender] = React.useState([]);
-    const childrenPerPage = React.useRef(4);
-    const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
-        remoteParticipants,
-        dominantSpeakers,
-        maxGridParticipants: maxRemoteVideoStreams,
-        isScreenShareActive: !!screenShareComponent,
-        maxOverflowGalleryDominantSpeakers: screenShareComponent
-            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
-            : childrenPerPage.current,
-        pinnedParticipantUserIds,
-        layout: 'floatingLocalVideo'
-    });
-    const { gridTiles, overflowGalleryTiles } = renderTiles(gridParticipants, onRenderRemoteParticipant, maxRemoteVideoStreams, indexesToRender, overflowGalleryParticipants, dominantSpeakers);
-    const layerHostId = reactHooks.useId('layerhost');
-    const togetherModeOverFlowGalleryTiles = React.useMemo(() => {
-        let newTiles = overflowGalleryTiles;
-        if (togetherModeStreamComponent) {
-            if (screenShareComponent) {
-                newTiles = gridTiles.concat(overflowGalleryTiles);
-            }
-        }
-        return newTiles;
-    }, [gridTiles, overflowGalleryTiles, screenShareComponent, togetherModeStreamComponent]);
-    const overflowGallery = React.useMemo(() => {
-        if (overflowGalleryTiles.length === 0 && !props.screenShareComponent) {
-            return null;
-        }
-        return (React.createElement(OverflowGallery, { isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: false, overflowGalleryElements: togetherModeOverFlowGalleryTiles, horizontalGalleryStyles: styles === null || styles === undefined ? undefined : styles.horizontalGallery, verticalGalleryStyles: styles === null || styles === undefined ? undefined : styles.verticalGallery, overflowGalleryPosition: overflowGalleryPosition, onChildrenPerPageChange: (n) => {
-                childrenPerPage.current = n;
-            }, parentWidth: parentWidth }));
-    }, [
-        overflowGalleryTiles.length,
-        props.screenShareComponent,
-        isShort,
-        isNarrow,
-        togetherModeOverFlowGalleryTiles,
-        styles === null || styles === undefined ? undefined : styles.horizontalGallery,
-        styles === null || styles === undefined ? undefined : styles.verticalGallery,
-        overflowGalleryPosition,
-        parentWidth
-    ]);
-    return screenShareComponent ? (React.createElement(react.Stack, { styles: rootLayoutStyle$1 },
-        React.createElement(react.LayerHost, { id: layerHostId, className: react.mergeStyles(layerHostStyle) }),
-        React.createElement(react.Stack, { horizontal: overflowGalleryPosition === 'verticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
-            props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
-            screenShareComponent,
-            overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)))) : (React.createElement(react.Stack, null, props.togetherModeStreamComponent));
-};
-/* @conditional-compile-remove(together-mode) */
-const overflowGalleryTrampoline = (gallery, galleryPosition) => {
-    return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
+    const { togetherModeStreamComponent } = props;
+    return React.createElement(react.Stack, null, togetherModeStreamComponent);
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -23093,15 +22946,7 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(together-mode) */
     togetherModeSeatingCoordinates, 
     /* @conditional-compile-remove(together-mode) */
-    onDisposeTogetherModeStreamView, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidVideo, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitVideo } = props;
+    onDisposeTogetherModeStreamView, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
@@ -23159,9 +23004,7 @@ const VideoGallery = (props) => {
             return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
         };
         return (React.createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key" },
-            React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === undefined ? undefined : videoTilesOptions.alwaysShowLabelBackground, userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === undefined ? undefined : localParticipant.videoStream) === null || _a === undefined ? undefined : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === undefined ? undefined : localParticipant.videoStream) === null || _b === undefined ? undefined : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartLocalSpotlight, onStopSpotlight: onStopLocalSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, drawerMenuHostId: drawerMenuHostId, strings: strings, reactionResources: reactionResources, participantsCount: remoteParticipants.length + 1, isScreenSharingOn: localParticipant.isScreenSharingOn, 
-                /* @conditional-compile-remove(media-access) */
-                mediaAccess: localParticipant.mediaAccess })));
+            React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === undefined ? undefined : videoTilesOptions.alwaysShowLabelBackground, userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === undefined ? undefined : localParticipant.videoStream) === null || _a === undefined ? undefined : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === undefined ? undefined : localParticipant.videoStream) === null || _b === undefined ? undefined : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartLocalSpotlight, onStopSpotlight: onStopLocalSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, drawerMenuHostId: drawerMenuHostId, strings: strings, reactionResources: reactionResources, participantsCount: remoteParticipants.length + 1, isScreenSharingOn: localParticipant.isScreenSharingOn, mediaAccess: localParticipant.mediaAccess })));
     }, [
         isNarrow,
         localParticipant,
@@ -23241,15 +23084,7 @@ const VideoGallery = (props) => {
                     ? remoteVideoTileMenu.kind === 'drawer'
                         ? 'drawer'
                         : 'contextual'
-                    : undefined, drawerMenuHostId: drawerMenuHostId, onPinParticipant: onPinParticipant, onUnpinParticipant: onUnpinParticipant, onUpdateScalingMode: onUpdateScalingMode, isPinned: isPinned, disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES$1, toggleAnnouncerString: toggleAnnouncerString, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartRemoteSpotlight, onStopSpotlight: onStopRemoteSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources, onMuteParticipant: onMuteParticipant, 
-            /* @conditional-compile-remove(media-access) */
-            onForbidAudio: onForbidAudio, 
-            /* @conditional-compile-remove(media-access) */
-            onPermitAudio: onPermitAudio, 
-            /* @conditional-compile-remove(media-access) */
-            onForbidVideo: onForbidVideo, 
-            /* @conditional-compile-remove(media-access) */
-            onPermitVideo: onPermitVideo }));
+                    : undefined, drawerMenuHostId: drawerMenuHostId, onPinParticipant: onPinParticipant, onUnpinParticipant: onUnpinParticipant, onUpdateScalingMode: onUpdateScalingMode, isPinned: isPinned, disablePinMenuItem: pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES$1, toggleAnnouncerString: toggleAnnouncerString, spotlightedParticipantUserIds: spotlightedParticipants, isSpotlighted: isSpotlighted, onStartSpotlight: onStartRemoteSpotlight, onStopSpotlight: onStopRemoteSpotlight, maxParticipantsToSpotlight: maxParticipantsToSpotlight, reactionResources: reactionResources, onMuteParticipant: onMuteParticipant, onForbidAudio: onForbidAudio, onPermitAudio: onPermitAudio, onForbidVideo: onForbidVideo, onPermitVideo: onPermitVideo }));
     }, [
         selectedScalingModeState,
         pinnedParticipants,
@@ -23272,13 +23107,9 @@ const VideoGallery = (props) => {
         maxParticipantsToSpotlight,
         reactionResources,
         onMuteParticipant,
-        /* @conditional-compile-remove(media-access) */
         onForbidAudio,
-        /* @conditional-compile-remove(media-access) */
         onPermitAudio,
-        /* @conditional-compile-remove(media-access) */
         onForbidVideo,
-        /* @conditional-compile-remove(media-access) */
         onPermitVideo,
         remoteVideoViewOptions
     ]);
@@ -23291,7 +23122,7 @@ const VideoGallery = (props) => {
             ? localScreenShareStreamComponent
             : undefined;
     /* @conditional-compile-remove(together-mode) */
-    const togetherModeStreamComponent = React.useMemo(() => (React.createElement(TogetherModeStream, { startTogetherModeEnabled: startTogetherModeEnabled, isTogetherModeActive: isTogetherModeActive, onCreateTogetherModeStreamView: onCreateTogetherModeStreamView, onStartTogetherMode: onStartTogetherMode, onDisposeTogetherModeStreamView: onDisposeTogetherModeStreamView, onSetTogetherModeSceneSize: onSetTogetherModeSceneSize, togetherModeStreams: togetherModeStreams, seatingCoordinates: togetherModeSeatingCoordinates, localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources, screenShareComponent: screenShareComponent, containerWidth: containerWidth, containerHeight: containerHeight })), [
+    const togetherModeStreamComponent = React.useMemo(() => (React.createElement(TogetherModeStream, { startTogetherModeEnabled: startTogetherModeEnabled, isTogetherModeActive: isTogetherModeActive, onCreateTogetherModeStreamView: onCreateTogetherModeStreamView, onStartTogetherMode: onStartTogetherMode, onDisposeTogetherModeStreamView: onDisposeTogetherModeStreamView, onSetTogetherModeSceneSize: onSetTogetherModeSceneSize, togetherModeStreams: togetherModeStreams, seatingCoordinates: togetherModeSeatingCoordinates, localParticipant: localParticipant, remoteParticipants: remoteParticipants, reactionResources: reactionResources, containerWidth: containerWidth, containerHeight: containerHeight })), [
         startTogetherModeEnabled,
         isTogetherModeActive,
         onCreateTogetherModeStreamView,
@@ -23303,7 +23134,6 @@ const VideoGallery = (props) => {
         localParticipant,
         remoteParticipants,
         reactionResources,
-        screenShareComponent,
         containerWidth,
         containerHeight
     ]);
@@ -23326,9 +23156,7 @@ const VideoGallery = (props) => {
         pinnedParticipantUserIds: pinnedParticipants,
         overflowGalleryPosition,
         localVideoTileSize,
-        spotlightedParticipantUserIds: spotlightedParticipants,
-        /* @conditional-compile-remove(together-mode) */
-        togetherModeStreamComponent
+        spotlightedParticipantUserIds: spotlightedParticipants
     }), [
         remoteParticipants,
         localParticipant,
@@ -23345,9 +23173,7 @@ const VideoGallery = (props) => {
         pinnedParticipants,
         overflowGalleryPosition,
         localVideoTileSize,
-        spotlightedParticipants,
-        /* @conditional-compile-remove(together-mode) */
-        togetherModeStreamComponent
+        spotlightedParticipants
     ]);
     const videoGalleryLayout = React.useMemo(() => {
         if (screenShareParticipant && layout === 'focusedContent') {
@@ -23366,15 +23192,17 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(together-mode) */
         // Teams users can switch to Together mode layout only if they have the capability,
         // while ACS users can do so only if Together mode is enabled.
-        if (layout === 'togetherMode' && canSwitchToTogetherModeLayout) {
-            return React.createElement(TogetherModeLayout, Object.assign({}, layoutProps));
+        if (!screenShareComponent && layout === 'togetherMode' && canSwitchToTogetherModeLayout) {
+            return React.createElement(TogetherModeLayout, { togetherModeStreamComponent: togetherModeStreamComponent });
         }
         return React.createElement(DefaultLayout, Object.assign({}, layoutProps));
     }, [
         /* @conditional-compile-remove(together-mode) */ canSwitchToTogetherModeLayout,
         layout,
         layoutProps,
-        screenShareParticipant
+        screenShareComponent,
+        screenShareParticipant,
+        /* @conditional-compile-remove(together-mode) */ togetherModeStreamComponent
     ]);
     return (React.createElement("div", { 
         // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
@@ -32134,7 +31962,7 @@ const AttachmentDownloadErrorBar = (props) => {
 /**
  * Wrapper for RichTextSendBox component to allow us to use usePropsFor with richTextSendBox with lazy loading
  */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-DTWPl1yi.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-CAzmoL1D.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -32142,7 +31970,7 @@ const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function
  *
 /* @conditional-compile-remove(rich-text-editor-composite-support)
  */
-const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-DTWPl1yi.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
+const loadRichTextSendBox = () => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-CAzmoL1D.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper }));
 /**
  * @private
  */
@@ -33062,7 +32890,6 @@ const memoizeState = memoizeOne((userId, deviceManager, calls, latestErrors, lat
     callAgent: { displayName },
     calls,
     latestErrors,
-    /* @conditional-compile-remove(breakout-rooms) */ /* @conditional-compile-remove(media-access) */
     latestNotifications: latestNotifications !== null && latestNotifications !== undefined ? latestNotifications : {},
     alternateCallerId,
     environmentInfo
@@ -33834,11 +33661,6 @@ const getEnvironmentInfo = (state) => state.environmentInfo;
  */
 const getSelectedVideoEffect = (state) => state.selectedVideoBackgroundEffect;
 /** @private */
-const getCaptionsKind = (state) => {
-    var _a;
-    return (_a = state.call) === null || _a === undefined ? undefined : _a.captionsFeature.captionsKind;
-};
-/** @private */
 const getCaptionsStatus = (state) => {
     var _a;
     return (_a = state.call) === null || _a === undefined ? undefined : _a.captionsFeature.isCaptionsFeatureActive;
@@ -33905,7 +33727,22 @@ const getAlternateCallerId = (state) => state.alternateCallerId;
 const getIsRoomsCall = (state) => state.isRoomsCall;
 /** @private */
 const getVideoBackgroundImages = (state) => state.videoBackgroundImages;
-/* @conditional-compile-remove(media-access) */
+/* @conditional-compile-remove(together-mode) */
+/**
+ * @private
+ * Gets the together mode streams state.
+ * @param state - The current state of the call adapter.
+ * @returns The together mode streams state or undefined.
+ */
+const getIsTogetherModeActive = (state) => { var _a; return (_a = state.call) === null || _a === undefined ? undefined : _a.togetherMode.isActive; };
+/* @conditional-compile-remove(together-mode) */
+/**
+ * @private
+ * Gets local participant's user id.
+ * @param state - The current state of the call adapter.
+ * @returns The local participant's user id or undefined.
+ */
+const getLocalUserId = (state) => state.userId;
 /** @private */
 const getMediaAccessSetting = (state) => { var _a; return (_a = state.call) === null || _a === undefined ? undefined : _a.meetingMediaAccess; };
 
@@ -34102,49 +33939,41 @@ const createCompositeHandlers = memoizeOne((adapter, capabilities) => {
         onMuteAllRemoteParticipants: () => __awaiter$q(undefined, undefined, undefined, function* () {
             yield adapter.muteAllRemoteParticipants();
         }),
-        /* @conditional-compile-remove(media-access) */
         onForbidAudio: ((_a = capabilities === null || capabilities === undefined ? undefined : capabilities.forbidOthersAudio) === null || _a === undefined ? undefined : _a.isPresent)
             ? (userIds) => __awaiter$q(undefined, undefined, undefined, function* () {
                 yield adapter.forbidAudio(userIds);
             })
             : undefined,
-        /* @conditional-compile-remove(media-access) */
         onPermitAudio: ((_b = capabilities === null || capabilities === undefined ? undefined : capabilities.forbidOthersAudio) === null || _b === undefined ? undefined : _b.isPresent)
             ? (userIds) => __awaiter$q(undefined, undefined, undefined, function* () {
                 yield adapter.permitAudio(userIds);
             })
             : undefined,
-        /* @conditional-compile-remove(media-access) */
         onForbidOthersAudio: ((_c = capabilities === null || capabilities === undefined ? undefined : capabilities.forbidOthersAudio) === null || _c === undefined ? undefined : _c.isPresent)
             ? () => __awaiter$q(undefined, undefined, undefined, function* () {
                 yield adapter.forbidOthersAudio();
             })
             : undefined,
-        /* @conditional-compile-remove(media-access) */
         onPermitOthersAudio: ((_d = capabilities === null || capabilities === undefined ? undefined : capabilities.forbidOthersAudio) === null || _d === undefined ? undefined : _d.isPresent)
             ? () => __awaiter$q(undefined, undefined, undefined, function* () {
                 yield adapter.permitOthersAudio();
             })
             : undefined,
-        /* @conditional-compile-remove(media-access) */
         onForbidVideo: ((_e = capabilities === null || capabilities === undefined ? undefined : capabilities.forbidOthersVideo) === null || _e === undefined ? undefined : _e.isPresent)
             ? (userIds) => __awaiter$q(undefined, undefined, undefined, function* () {
                 yield adapter.forbidVideo(userIds);
             })
             : undefined,
-        /* @conditional-compile-remove(media-access) */
         onPermitVideo: ((_f = capabilities === null || capabilities === undefined ? undefined : capabilities.forbidOthersVideo) === null || _f === undefined ? undefined : _f.isPresent)
             ? (userIds) => __awaiter$q(undefined, undefined, undefined, function* () {
                 yield adapter.permitVideo(userIds);
             })
             : undefined,
-        /* @conditional-compile-remove(media-access) */
         onForbidOthersVideo: ((_g = capabilities === null || capabilities === undefined ? undefined : capabilities.forbidOthersVideo) === null || _g === undefined ? undefined : _g.isPresent)
             ? () => __awaiter$q(undefined, undefined, undefined, function* () {
                 yield adapter.forbidOthersVideo();
             })
             : undefined,
-        /* @conditional-compile-remove(media-access) */
         onPermitOthersVideo: ((_h = capabilities === null || capabilities === undefined ? undefined : capabilities.forbidOthersVideo) === null || _h === undefined ? undefined : _h.isPresent)
             ? () => __awaiter$q(undefined, undefined, undefined, function* () {
                 yield adapter.permitOthersVideo();
@@ -35482,7 +35311,7 @@ var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 const DesktopMoreButton = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const localeStrings = useLocale();
     const holdButtonProps = usePropsFor$1(HoldButton);
     const startCaptionsButtonProps = usePropsFor$1(StartCaptionsButton);
@@ -35501,6 +35330,14 @@ const DesktopMoreButton = (props) => {
     const allowDtmfDialer = showDtmfDialer(callees);
     const isTeamsMeeting = useSelector$1(getIsTeamsMeeting);
     const teamsMeetingCoordinates = useSelector$1(getTeamsMeetingCoordinates);
+    /* @conditional-compile-remove(together-mode) */
+    const isTogetherModeActive = useSelector$1(getIsTogetherModeActive);
+    /* @conditional-compile-remove(together-mode) */
+    const participantCapability = useSelector$1(getCapabilites);
+    /* @conditional-compile-remove(together-mode) */
+    const participantId = useSelector$1(getLocalUserId);
+    /* @conditional-compile-remove(together-mode) */
+    const isTeamsCall = useSelector$1(getIsTeamsCall);
     const [dtmfDialerChecked, setDtmfDialerChecked] = React.useState((_b = props.dtmfDialerPresent) !== null && _b !== undefined ? _b : false);
     const moreButtonStrings = React.useMemo(() => ({
         label: localeStrings.strings.call.moreButtonCallingLabel,
@@ -35798,6 +35635,26 @@ const DesktopMoreButton = (props) => {
                 styles: { root: { lineHeight: 0 } }
             }
         };
+        /* @conditional-compile-remove(together-mode) */
+        const togetherModeOption = {
+            key: 'togetherModeSelectionKey',
+            text: localeStrings.strings.call.moreButtonTogetherModeLayoutLabel,
+            canCheck: true,
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            isChecked: props.userSetGalleryLayout === 'togetherMode',
+            onClick: () => {
+                props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('togetherMode');
+                setFocusedContentOn(false);
+            },
+            disabled: !(((participantId === null || participantId === undefined ? undefined : participantId.kind) === 'microsoftTeamsUser' && ((_e = participantCapability === null || participantCapability === undefined ? undefined : participantCapability.startTogetherMode) === null || _e === undefined ? undefined : _e.isPresent)) ||
+                isTogetherModeActive),
+            iconProps: {
+                iconName: 'TogetherModeLayout',
+                styles: { root: { lineHeight: 0 } }
+            }
+        };
         /* @conditional-compile-remove(overflow-top-composite) */
         const overflowGalleryOption = {
             key: 'topKey',
@@ -35824,12 +35681,16 @@ const DesktopMoreButton = (props) => {
             }
         };
         /* @conditional-compile-remove(large-gallery) */
-        (_f = (_e = galleryOptions.subMenuProps) === null || _e === undefined ? undefined : _e.items) === null || _f === undefined ? undefined : _f.push(largeGalleryOption);
+        (_g = (_f = galleryOptions.subMenuProps) === null || _f === undefined ? undefined : _f.items) === null || _g === undefined ? undefined : _g.push(largeGalleryOption);
         /* @conditional-compile-remove(gallery-layout-composite) */
-        (_h = (_g = galleryOptions.subMenuProps) === null || _g === undefined ? undefined : _g.items) === null || _h === undefined ? undefined : _h.push(galleryOption);
+        (_j = (_h = galleryOptions.subMenuProps) === null || _h === undefined ? undefined : _h.items) === null || _j === undefined ? undefined : _j.push(galleryOption);
         /* @conditional-compile-remove(overflow-top-composite) */
-        (_k = (_j = galleryOptions.subMenuProps) === null || _j === undefined ? undefined : _j.items) === null || _k === undefined ? undefined : _k.push(overflowGalleryOption);
-        if (props.callControls === true || ((_l = props.callControls) === null || _l === undefined ? undefined : _l.galleryControlsButton) !== false) {
+        (_l = (_k = galleryOptions.subMenuProps) === null || _k === undefined ? undefined : _k.items) === null || _l === undefined ? undefined : _l.push(overflowGalleryOption);
+        /* @conditional-compile-remove(together-mode) */
+        if (isTeamsCall || isTeamsMeeting) {
+            (_o = (_m = galleryOptions.subMenuProps) === null || _m === undefined ? undefined : _m.items) === null || _o === undefined ? undefined : _o.push(togetherModeOption);
+        }
+        if (props.callControls === true || ((_p = props.callControls) === null || _p === undefined ? undefined : _p.galleryControlsButton) !== false) {
             moreButtonContextualMenuItems.push(galleryOptions);
         }
     }
@@ -36684,7 +36545,7 @@ const inferCallWithChatControlOptions = (callWithChatControls) => {
 };
 /** @private */
 const MoreDrawer = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const theme = react.useTheme();
     const callAdapter = useAdapter();
     const drawerMenuItems = [];
@@ -36698,6 +36559,15 @@ const MoreDrawer = (props) => {
     const allowDtmfDialer = showDtmfDialer(callees, participants, props.dtmfDialerOptions);
     const [dtmfDialerChecked, setDtmfDialerChecked] = React.useState((_a = props.dtmfDialerPresent) !== null && _a !== undefined ? _a : false);
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
+    /* @conditional-compile-remove(together-mode) */
+    const participantCapability = useSelector$1(getCapabilites);
+    /* @conditional-compile-remove(together-mode) */
+    const participantId = useSelector$1(getLocalUserId);
+    /* @conditional-compile-remove(together-mode) */
+    const isTogetherModeActive = useSelector$1(getIsTogetherModeActive);
+    /* @conditional-compile-remove(together-mode) */
+    const isTeamsCall = useSelector$1(getIsTeamsCall);
+    const isTeamsMeeting = getIsTeamsMeeting(callAdapter.getState());
     const onSpeakerItemClick = React.useCallback((_ev, itemKey) => {
         const selected = speakers === null || speakers === undefined ? undefined : speakers.find((speaker) => speaker.id === itemKey);
         if (selected) {
@@ -36715,8 +36585,8 @@ const MoreDrawer = (props) => {
         drawerMenuItems.push({
             itemKey: 'reactions',
             onRendererContent: () => (React.createElement(_ReactionDrawerMenuItem, { onReactionClick: (reaction) => __awaiter$j(undefined, undefined, undefined, function* () {
-                    var _h;
-                    (_h = props.onReactionClick) === null || _h === undefined ? undefined : _h.call(props, reaction);
+                    var _k;
+                    (_k = props.onReactionClick) === null || _k === undefined ? undefined : _k.call(props, reaction);
                     onLightDismiss();
                 }), reactionResources: props.reactionResources }))
         });
@@ -36853,8 +36723,28 @@ const MoreDrawer = (props) => {
         },
         secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
     };
+    /* @conditional-compile-remove(together-mode) */
+    const togetherModeOption = {
+        itemKey: 'togetherModeSelectionKey',
+        text: localeStrings.strings.call.moreButtonTogetherModeLayoutLabel,
+        onItemClick: () => {
+            props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('togetherMode');
+            onLightDismiss();
+        },
+        iconProps: {
+            iconName: 'TogetherModeLayout',
+            styles: { root: { lineHeight: 0 } }
+        },
+        disabled: !(((participantId === null || participantId === undefined ? undefined : participantId.kind) === 'microsoftTeamsUser' && ((_d = participantCapability === null || participantCapability === undefined ? undefined : participantCapability.startTogetherMode) === null || _d === undefined ? undefined : _d.isPresent)) ||
+            isTogetherModeActive),
+        secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
+    };
     /* @conditional-compile-remove(gallery-layout-composite) */
-    (_d = galleryLayoutOptions.subMenuProps) === null || _d === undefined ? undefined : _d.push(galleryOption);
+    (_e = galleryLayoutOptions.subMenuProps) === null || _e === undefined ? undefined : _e.push(galleryOption);
+    /* @conditional-compile-remove(together-mode) */
+    if (isTeamsCall || isTeamsMeeting) {
+        (_f = galleryLayoutOptions.subMenuProps) === null || _f === undefined ? undefined : _f.push(togetherModeOption);
+    }
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === undefined ? undefined : drawerSelectionOptions.galleryControlsButton)) {
         drawerMenuItems.push(galleryLayoutOptions);
     }
@@ -36880,7 +36770,7 @@ const MoreDrawer = (props) => {
             iconProps: { iconName: 'HoldCallContextualMenuItem', styles: { root: { lineHeight: 0 } } }
         });
     }
-    const role = (_e = callAdapter.getState().call) === null || _e === undefined ? undefined : _e.role;
+    const role = (_g = callAdapter.getState().call) === null || _g === undefined ? undefined : _g.role;
     const hideRaiseHandButtonInRoomsCall = callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
     if (drawerSelectionOptions !== false &&
         isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === undefined ? undefined : drawerSelectionOptions.raiseHandButton) &&
@@ -36904,7 +36794,6 @@ const MoreDrawer = (props) => {
             }
         });
     }
-    const isTeamsMeeting = getIsTeamsMeeting(callAdapter.getState());
     const teamsMeetingCoordinates = getTeamsMeetingCoordinates(callAdapter.getState());
     if (drawerSelectionOptions !== false &&
         isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === undefined ? undefined : drawerSelectionOptions.teamsMeetingPhoneCallButton) &&
@@ -36933,8 +36822,8 @@ const MoreDrawer = (props) => {
     const startCaptionsButtonProps = usePropsFor$1(StartCaptionsButton);
     const [isSpokenLanguageDrawerOpen, setIsSpokenLanguageDrawerOpen] = React.useState(false);
     const [isCaptionLanguageDrawerOpen, setIsCaptionLanguageDrawerOpen] = React.useState(false);
-    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState((_f = captionSettingsProp.currentSpokenLanguage) !== null && _f !== undefined ? _f : 'en-us');
-    const [currentCaptionLanguage, setCurrentCaptionLanguage] = React.useState((_g = captionSettingsProp.currentCaptionLanguage) !== null && _g !== undefined ? _g : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
+    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState((_h = captionSettingsProp.currentSpokenLanguage) !== null && _h !== undefined ? _h : 'en-us');
+    const [currentCaptionLanguage, setCurrentCaptionLanguage] = React.useState((_j = captionSettingsProp.currentCaptionLanguage) !== null && _j !== undefined ? _j : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
     const onToggleChange = React.useCallback(() => __awaiter$j(undefined, undefined, undefined, function* () {
         if (!captionSettingsProp.isCaptionsFeatureActive) {
             yield startCaptionsButtonProps.onStartCaptions({
@@ -37918,25 +37807,7 @@ const canRemoveParticipants = (role) => {
 const PEOPLE_SIDE_PANE_ID = 'people';
 /** @private */
 const usePeoplePane = (props) => {
-    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef, setParticipantActioned, spotlightedParticipantUserIds, onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onStopAllSpotlight, maxParticipantsToSpotlight, onMuteParticipant, pinnedParticipants, onPinParticipant, onUnpinParticipant, disablePinMenuItem, onMuteAllRemoteParticipants, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidOthersAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitOthersAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidVideo, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitVideo, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidOthersVideo, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitOthersVideo, 
-    /* @conditional-compile-remove(media-access) */
-    meetingMediaAccess, sidePaneDismissButtonRef, chatButtonPresent } = props;
+    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef, setParticipantActioned, spotlightedParticipantUserIds, onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onStopAllSpotlight, maxParticipantsToSpotlight, onMuteParticipant, pinnedParticipants, onPinParticipant, onUnpinParticipant, disablePinMenuItem, onMuteAllRemoteParticipants, onForbidAudio, onPermitAudio, onForbidOthersAudio, onPermitOthersAudio, onForbidVideo, onPermitVideo, onForbidOthersVideo, onPermitOthersVideo, meetingMediaAccess, sidePaneDismissButtonRef, chatButtonPresent } = props;
     const closePane = React.useCallback(() => {
         var _a;
         updateSidePaneRenderer(undefined);
@@ -37960,30 +37831,22 @@ const usePeoplePane = (props) => {
         onMuteAllRemoteParticipants && onMuteAllRemoteParticipants();
         setShowMuteAllPrompt(false);
     }, [onMuteAllRemoteParticipants, setShowMuteAllPrompt]);
-    /* @conditional-compile-remove(media-access) */
     const [showForbidOthersAudioPrompt, setShowForbidOthersAudioPrompt] = React.useState(false);
-    /* @conditional-compile-remove(media-access) */
     const [showPermitOthersAudioPrompt, setShowPermitOthersAudioPrompt] = React.useState(false);
-    /* @conditional-compile-remove(media-access) */
     const [showForbidOthersVideoPrompt, setShowForbidOthersVideoPrompt] = React.useState(false);
-    /* @conditional-compile-remove(media-access) */
     const [showPermitOthersVideoPrompt, setShowPermitOthersVideoPrompt] = React.useState(false);
-    /* @conditional-compile-remove(media-access) */
     const onForbidAllAttendeesPromptConfirm = React.useCallback(() => {
         onForbidOthersAudio && onForbidOthersAudio();
         setShowForbidOthersAudioPrompt(false);
     }, [onForbidOthersAudio, setShowForbidOthersAudioPrompt]);
-    /* @conditional-compile-remove(media-access) */
     const onPermitAllAttendeesPromptConfirm = React.useCallback(() => {
         onPermitOthersAudio && onPermitOthersAudio();
         setShowPermitOthersAudioPrompt(false);
     }, [onPermitOthersAudio, setShowPermitOthersAudioPrompt]);
-    /* @conditional-compile-remove(media-access) */
     const onForbidOthersVideoPromptConfirm = React.useCallback(() => {
         onForbidOthersVideo && onForbidOthersVideo();
         setShowForbidOthersVideoPrompt(false);
     }, [onForbidOthersVideo, setShowForbidOthersVideoPrompt]);
-    /* @conditional-compile-remove(media-access) */
     const onPermitOthersVideoPromptConfirm = React.useCallback(() => {
         onPermitOthersVideo && onPermitOthersVideo();
         setShowPermitOthersVideoPrompt(false);
@@ -38015,9 +37878,7 @@ const usePeoplePane = (props) => {
                 disabled: isAllMuted
             });
         }
-        /* @conditional-compile-remove(media-access) */
         let hasAttendee = false;
-        /* @conditional-compile-remove(media-access) */
         if (remoteParticipants) {
             for (const participant of Object.values(remoteParticipants)) {
                 if (participant.role && participant.role === 'Attendee') {
@@ -38026,11 +37887,8 @@ const usePeoplePane = (props) => {
                 }
             }
         }
-        /* @conditional-compile-remove(media-access) */
         const isMeetingAudioPermitted = meetingMediaAccess ? meetingMediaAccess.isAudioPermitted : true;
-        /* @conditional-compile-remove(media-access) */
         const isMeetingVideoPermitted = meetingMediaAccess ? meetingMediaAccess.isVideoPermitted : true;
-        /* @conditional-compile-remove(media-access) */
         if (onForbidOthersAudio && remoteParticipants) {
             hasAttendee &&
                 isMeetingAudioPermitted &&
@@ -38049,7 +37907,6 @@ const usePeoplePane = (props) => {
                     disabled: !hasAttendee
                 });
         }
-        /* @conditional-compile-remove(media-access) */
         if (onPermitOthersAudio && remoteParticipants) {
             hasAttendee &&
                 !isMeetingAudioPermitted &&
@@ -38068,7 +37925,6 @@ const usePeoplePane = (props) => {
                     disabled: !hasAttendee
                 });
         }
-        /* @conditional-compile-remove(media-access) */
         if (onForbidOthersVideo && remoteParticipants) {
             hasAttendee &&
                 isMeetingVideoPermitted &&
@@ -38087,7 +37943,6 @@ const usePeoplePane = (props) => {
                     disabled: !hasAttendee
                 });
         }
-        /* @conditional-compile-remove(media-access) */
         if (onPermitOthersVideo && remoteParticipants) {
             hasAttendee &&
                 !isMeetingVideoPermitted &&
@@ -38123,26 +37978,17 @@ const usePeoplePane = (props) => {
     }, [
         onMuteAllRemoteParticipants,
         remoteParticipants,
-        /* @conditional-compile-remove(media-access) */
         meetingMediaAccess,
-        /* @conditional-compile-remove(media-access) */
         onForbidOthersAudio,
-        /* @conditional-compile-remove(media-access) */
         onPermitOthersAudio,
-        /* @conditional-compile-remove(media-access) */
         onForbidOthersVideo,
-        /* @conditional-compile-remove(media-access) */
         onPermitOthersVideo,
         onStopAllSpotlight,
         spotlightedParticipantUserIds,
         localeStrings.muteAllMenuLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidOthersAudioMenuLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitOthersAudioMenuLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidOthersVideoMenuLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitOthersVideoMenuLabel,
         localeStrings.stopAllSpotlightMenuLabel
     ]);
@@ -38180,9 +38026,7 @@ const usePeoplePane = (props) => {
                 disabled: isMuted
             });
         }
-        /* @conditional-compile-remove(media-access) */
         const remoteParticipant = remoteParticipants === null || remoteParticipants === undefined ? undefined : remoteParticipants[participantId];
-        /* @conditional-compile-remove(media-access) */
         if ((remoteParticipant === null || remoteParticipant === undefined ? undefined : remoteParticipant.mediaAccess) &&
             !remoteParticipant.mediaAccess.isAudioPermitted &&
             (remoteParticipant === null || remoteParticipant === undefined ? undefined : remoteParticipant.role) === 'Attendee' &&
@@ -38201,7 +38045,6 @@ const usePeoplePane = (props) => {
                 ariaLabel: localeStrings.permitAudioMenuLabel
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if (((_a = remoteParticipant === null || remoteParticipant === undefined ? undefined : remoteParticipant.mediaAccess) === null || _a === undefined ? undefined : _a.isAudioPermitted) && (remoteParticipant === null || remoteParticipant === undefined ? undefined : remoteParticipant.role) === 'Attendee' && onForbidAudio) {
             _defaultMenuItems.push({
                 key: 'forbid-audio',
@@ -38217,7 +38060,6 @@ const usePeoplePane = (props) => {
                 ariaLabel: localeStrings.forbidAudioMenuLabel
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if ((remoteParticipant === null || remoteParticipant === undefined ? undefined : remoteParticipant.mediaAccess) &&
             !remoteParticipant.mediaAccess.isVideoPermitted &&
             (remoteParticipant === null || remoteParticipant === undefined ? undefined : remoteParticipant.role) === 'Attendee' &&
@@ -38236,7 +38078,6 @@ const usePeoplePane = (props) => {
                 ariaLabel: localeStrings.permitVideoMenuLabel
             });
         }
-        /* @conditional-compile-remove(media-access) */
         if (((_b = remoteParticipant === null || remoteParticipant === undefined ? undefined : remoteParticipant.mediaAccess) === null || _b === undefined ? undefined : _b.isVideoPermitted) && (remoteParticipant === null || remoteParticipant === undefined ? undefined : remoteParticipant.role) === 'Attendee' && onForbidVideo) {
             _defaultMenuItems.push({
                 key: 'forbid-video',
@@ -38353,22 +38194,14 @@ const usePeoplePane = (props) => {
         spotlightedParticipantUserIds,
         onMuteParticipant,
         remoteParticipants,
-        /* @conditional-compile-remove(media-access) */
         onPermitAudio,
-        /* @conditional-compile-remove(media-access) */
         onForbidAudio,
-        /* @conditional-compile-remove(media-access) */
         onPermitVideo,
-        /* @conditional-compile-remove(media-access) */
         onForbidVideo,
         onFetchParticipantMenuItems,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitAudioMenuLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidAudioMenuLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitVideoMenuLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidVideoMenuLabel,
         localeStrings.stopSpotlightOnSelfMenuLabel,
         localeStrings.stopSpotlightMenuLabel,
@@ -38394,57 +38227,33 @@ const usePeoplePane = (props) => {
     const onRenderContent = React.useCallback(() => {
         return (React.createElement(React.Fragment, null,
             React.createElement(Prompt, Object.assign({}, muteAllPromptLabels, { styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onMuteAllPromptConfirm(), isOpen: showMuteAllPrompt, onCancel: () => setShowMuteAllPrompt(false) })),
-            /* @conditional-compile-remove(media-access) */
             React.createElement(Prompt, { heading: localeStrings.forbidOthersAudioDialogTitle, text: localeStrings.forbidOthersAudioDialogContent, confirmButtonLabel: localeStrings.forbidOthersAudioConfirmButtonLabel, cancelButtonLabel: localeStrings.forbidOthersAudioCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onForbidAllAttendeesPromptConfirm(), isOpen: showForbidOthersAudioPrompt, onCancel: () => setShowForbidOthersAudioPrompt(false) }),
-            /* @conditional-compile-remove(media-access) */
             React.createElement(Prompt, { heading: localeStrings.permitOthersAudioDialogTitle, text: localeStrings.permitOthersAudioDialogContent, confirmButtonLabel: localeStrings.permitOthersAudioConfirmButtonLabel, cancelButtonLabel: localeStrings.permitOthersAudioCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onPermitAllAttendeesPromptConfirm(), isOpen: showPermitOthersAudioPrompt, onCancel: () => setShowForbidOthersAudioPrompt(false) }),
-            /* @conditional-compile-remove(media-access) */
             React.createElement(Prompt, { heading: localeStrings.forbidOthersVideoDialogTitle, text: localeStrings.forbidOthersVideoDialogContent, confirmButtonLabel: localeStrings.forbidOthersVideoConfirmButtonLabel, cancelButtonLabel: localeStrings.forbidOthersVideoCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onForbidOthersVideoPromptConfirm(), isOpen: showForbidOthersVideoPrompt, onCancel: () => setShowForbidOthersVideoPrompt(false) }),
-            /* @conditional-compile-remove(media-access) */
             React.createElement(Prompt, { heading: localeStrings.permitOthersVideoDialogTitle, text: localeStrings.permitOthersVideoDialogContent, confirmButtonLabel: localeStrings.permitOthersVideoConfirmButtonLabel, cancelButtonLabel: localeStrings.permitOthersVideoCancelButtonLabel, styles: { main: { minWidth: '22.5rem', padding: '1.5rem' } }, onConfirm: () => onPermitOthersVideoPromptConfirm(), isOpen: showPermitOthersVideoPrompt, onCancel: () => setShowForbidOthersVideoPrompt(false) }),
             React.createElement(PeoplePaneContent, { inviteLink: inviteLink, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItemsForCallComposite, setDrawerMenuItems: setDrawerMenuItems, mobileView: mobileView, setParticipantActioned: setParticipantActioned, participantListHeadingMoreButtonProps: sidePaneHeaderMenuProps, pinnedParticipants: pinnedParticipants, role: role, alternateCallerId: alternateCallerId })));
     }, [
         muteAllPromptLabels,
         showMuteAllPrompt,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidOthersAudioDialogTitle,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidOthersAudioDialogContent,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidOthersAudioConfirmButtonLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidOthersAudioCancelButtonLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitOthersAudioDialogTitle,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitOthersAudioDialogContent,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitOthersAudioConfirmButtonLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitOthersAudioCancelButtonLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidOthersVideoDialogTitle,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidOthersVideoDialogContent,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidOthersVideoConfirmButtonLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.forbidOthersVideoCancelButtonLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitOthersVideoDialogTitle,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitOthersVideoDialogContent,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitOthersVideoConfirmButtonLabel,
-        /* @conditional-compile-remove(media-access) */
         localeStrings.permitOthersVideoCancelButtonLabel,
-        /* @conditional-compile-remove(media-access) */
         showForbidOthersAudioPrompt,
-        /* @conditional-compile-remove(media-access) */
         showPermitOthersAudioPrompt,
-        /* @conditional-compile-remove(media-access) */
         showForbidOthersVideoPrompt,
-        /* @conditional-compile-remove(media-access) */
         showPermitOthersVideoPrompt,
         inviteLink,
         onFetchAvatarPersonaData,
@@ -38457,13 +38266,9 @@ const usePeoplePane = (props) => {
         role,
         alternateCallerId,
         onMuteAllPromptConfirm,
-        /* @conditional-compile-remove(media-access) */
         onForbidAllAttendeesPromptConfirm,
-        /* @conditional-compile-remove(media-access) */
         onPermitAllAttendeesPromptConfirm,
-        /* @conditional-compile-remove(media-access) */
         onForbidOthersVideoPromptConfirm,
-        /* @conditional-compile-remove(media-access) */
         onPermitOthersVideoPromptConfirm
     ]);
     const sidePaneRenderer = React.useMemo(() => ({
@@ -39158,32 +38963,26 @@ const CapabilitiesChangedNotificationBar = (props) => {
     })));
 };
 const getCapabilityChangedNotificationString = (notification, strings) => {
-    var _e, _f, _g, _h;
+    var _a, _b, _c, _d;
     switch (notification.capabilityName) {
-        case 'turnVideoOn':
-            /* @conditional-compile-remove(media-access) */
-            return undefined;
-        case 'unmuteMic':
-            /* @conditional-compile-remove(media-access) */
-            return undefined;
         case 'shareScreen':
             if (notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Presenter') {
-                return (_e = strings === null || strings === undefined ? undefined : strings.shareScreen) === null || _e === undefined ? undefined : _e.grantedDueToRoleChangeToPresenter;
+                return (_a = strings === null || strings === undefined ? undefined : strings.shareScreen) === null || _a === undefined ? undefined : _a.grantedDueToRoleChangeToPresenter;
             }
             if (!notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Attendee') {
-                return (_f = strings === null || strings === undefined ? undefined : strings.shareScreen) === null || _f === undefined ? undefined : _f.lostDueToRoleChangeToAttendee;
+                return (_b = strings === null || strings === undefined ? undefined : strings.shareScreen) === null || _b === undefined ? undefined : _b.lostDueToRoleChangeToAttendee;
             }
             break;
         case 'viewAttendeeNames':
             if (!notification.isPresent &&
                 notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&
                 notification.role === 'Attendee') {
-                return (_g = strings === null || strings === undefined ? undefined : strings.hideAttendeeNames) === null || _g === undefined ? undefined : _g.hideAttendeeNameAttendee;
+                return (_c = strings === null || strings === undefined ? undefined : strings.hideAttendeeNames) === null || _c === undefined ? undefined : _c.hideAttendeeNameAttendee;
             }
             if (!notification.isPresent &&
                 notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&
                 notification.role === 'Presenter') {
-                return (_h = strings === null || strings === undefined ? undefined : strings.hideAttendeeNames) === null || _h === undefined ? undefined : _h.hideAttendeeNamePresenter;
+                return (_d = strings === null || strings === undefined ? undefined : strings.hideAttendeeNames) === null || _d === undefined ? undefined : _d.hideAttendeeNamePresenter;
             }
     }
     return undefined;
@@ -39494,7 +39293,7 @@ const MAX_PINNED_REMOTE_VIDEO_TILES = 4;
  * @private
  */
 const CallArrangement = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const containerClassName = React.useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -39557,15 +39356,7 @@ const CallArrangement = (props) => {
     const videoGalleryProps = usePropsFor$1(VideoGallery);
     const muteAllHandlers = useHandlers();
     const { setPromptProps, setIsPromptOpen, hideSpotlightButtons } = props;
-    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onMuteParticipant, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitAudio, 
-    /* @conditional-compile-remove(media-access) */
-    onForbidVideo, 
-    /* @conditional-compile-remove(media-access) */
-    onPermitVideo } = videoGalleryProps;
+    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, onMuteParticipant, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = videoGalleryProps;
     const [showTeamsMeetingConferenceModal, setShowTeamsMeetingConferenceModal] = React.useState(false);
     const toggleTeamsMeetingConferenceModal = React.useCallback(() => {
         setShowTeamsMeetingConferenceModal(!showTeamsMeetingConferenceModal);
@@ -39639,14 +39430,10 @@ const CallArrangement = (props) => {
         stopAllSpotlightWithPrompt,
         spotlightedParticipants
     ]);
-    /* @conditional-compile-remove(media-access) */
     const meetingMediaAccess = useSelector$1(getMediaAccessSetting);
-    /* @conditional-compile-remove(media-access) */
     const canForbidOthersAudio = !!((_b = capabilities === null || capabilities === undefined ? undefined : capabilities.forbidOthersAudio) === null || _b === undefined ? undefined : _b.isPresent);
-    /* @conditional-compile-remove(media-access) */
     const canForbidOthersVideo = !!((_c = capabilities === null || capabilities === undefined ? undefined : capabilities.forbidOthersVideo) === null || _c === undefined ? undefined : _c.isPresent);
     const onToggleParticipantMicPeoplePaneProps = React.useMemo(() => {
-        /* @conditional-compile-remove(media-access) */
         return {
             onForbidAudio: canForbidOthersAudio ? onForbidAudio : undefined,
             onPermitAudio: canForbidOthersAudio ? onPermitAudio : undefined,
@@ -39659,17 +39446,17 @@ const CallArrangement = (props) => {
             meetingMediaAccess
         };
     }, [
-        /* @conditional-compile-remove(media-access) */ canForbidOthersAudio,
-        /* @conditional-compile-remove(media-access) */ onForbidAudio,
-        /* @conditional-compile-remove(media-access) */ onPermitAudio,
-        /* @conditional-compile-remove(media-access) */ muteAllHandlers.onForbidOthersAudio,
-        /* @conditional-compile-remove(media-access) */ muteAllHandlers.onPermitOthersAudio,
-        /* @conditional-compile-remove(media-access) */ muteAllHandlers.onForbidOthersVideo,
-        /* @conditional-compile-remove(media-access) */ muteAllHandlers.onPermitOthersVideo,
-        /* @conditional-compile-remove(media-access) */ canForbidOthersVideo,
-        /* @conditional-compile-remove(media-access) */ onForbidVideo,
-        /* @conditional-compile-remove(media-access) */ onPermitVideo,
-        /* @conditional-compile-remove(media-access) */ meetingMediaAccess
+        canForbidOthersAudio,
+        onForbidAudio,
+        onPermitAudio,
+        muteAllHandlers.onForbidOthersAudio,
+        muteAllHandlers.onPermitOthersAudio,
+        muteAllHandlers.onForbidOthersVideo,
+        muteAllHandlers.onPermitOthersVideo,
+        canForbidOthersVideo,
+        onForbidVideo,
+        onPermitVideo,
+        meetingMediaAccess
     ]);
     const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, peoplePaneProps), spotlightPeoplePaneProps), onMuteParticipantPeoplePaneProps), pinPeoplePaneProps), onToggleParticipantMicPeoplePaneProps));
     const togglePeoplePane = React.useCallback(() => {
@@ -39736,10 +39523,11 @@ const CallArrangement = (props) => {
     if ((isVideoPaneOpen || !isCameraOn) && (props.errorBarProps || props.showErrorNotifications)) {
         filteredLatestErrorNotifications = filteredLatestErrorNotifications.filter((e) => e.type !== 'unableToStartVideoEffect');
     }
-    const isTeamsCaptions = useSelector$1(getCaptionsKind) === 'TeamsCaptions';
     const isTeamsMeeting = useSelector$1(getIsTeamsMeeting);
     const isTeamsCall = useSelector$1(getIsTeamsCall);
-    const useTeamsCaptions = isTeamsMeeting || isTeamsCall || isTeamsCaptions;
+    // Teams captions are only available in Teams meetings or Teams calls.
+    // For Teams Meetings, we need to check if the capability is present.
+    const useTeamsCaptions = (isTeamsMeeting && ((_d = capabilities === null || capabilities === undefined ? undefined : capabilities.setCaptionLanguage) === null || _d === undefined ? undefined : _d.isPresent)) || isTeamsCall;
     const hasJoinedCall = useSelector$1(getCallStatus) === 'Connected';
     const isCaptionsOn = useSelector$1(getCaptionsStatus);
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
@@ -39747,7 +39535,7 @@ const CallArrangement = (props) => {
     const galleryContainerStyles = React.useMemo(() => {
         var _a;
         return Object.assign(Object.assign({}, mediaGalleryContainerStyles$1), (((_a = props === null || props === undefined ? undefined : props.captionsOptions) === null || _a === undefined ? undefined : _a.height) === 'full' ? { root: { postion: 'absolute' } } : {}));
-    }, [(_d = props === null || props === undefined ? undefined : props.captionsOptions) === null || _d === undefined ? undefined : _d.height]);
+    }, [(_e = props === null || props === undefined ? undefined : props.captionsOptions) === null || _e === undefined ? undefined : _e.height]);
     if (isTeamsMeeting) {
         filteredLatestErrorNotifications
             .filter((notification) => notification.type === 'teamsMeetingCallNetworkQualityLow')
@@ -39760,8 +39548,8 @@ const CallArrangement = (props) => {
     const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
     // Filter out shareScreen capability notifications if on mobile
     const filteredCapabilitesChangedNotifications = props.mobileView
-        ? (_e = props.capabilitiesChangedNotificationBarProps) === null || _e === undefined ? undefined : _e.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
-        : (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === undefined ? undefined : _f.capabilitiesChangedNotifications;
+        ? (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === undefined ? undefined : _f.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
+        : (_g = props.capabilitiesChangedNotificationBarProps) === null || _g === undefined ? undefined : _g.capabilitiesChangedNotifications;
     /* @conditional-compile-remove(breakout-rooms) */
     const notificationStackStrings = useCompositeStringsForNotificationStackStrings(locale);
     let latestNotifications = props.latestNotifications;
@@ -39781,17 +39569,17 @@ const CallArrangement = (props) => {
     return (React.createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React.createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React.createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
-                ((_g = props.callControlProps) === null || _g === undefined ? undefined : _g.options) !== false && !isMobileWithActivePane && (React.createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
+                ((_h = props.callControlProps) === null || _h === undefined ? undefined : _h.options) !== false && !isMobileWithActivePane && (React.createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
                         zIndex: CONTROL_BAR_Z_INDEX,
                         padding: verticalControlBar ? '0.25rem' : 'unset'
-                    }) }, isLegacyCallControlEnabled((_h = props.callControlProps) === null || _h === undefined ? undefined : _h.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { ref: controlBarRef, callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, 
+                    }) }, isLegacyCallControlEnabled((_j = props.callControlProps) === null || _j === undefined ? undefined : _j.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { ref: controlBarRef, callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, 
                     /* @conditional-compile-remove(rtt) */
                     isRealTimeTextSupported: hasJoinedCall, 
                     /* @conditional-compile-remove(rtt) */
                     onStartRealTimeText: onStartRealTimeText, 
                     /* @conditional-compile-remove(rtt) */
                     startRealTimeTextButtonChecked: openRealTimeText, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined, onToggleTeamsMeetingConferenceModal: toggleTeamsMeetingConferenceModal, teamsMeetingConferenceModalPresent: showTeamsMeetingConferenceModal, sidePaneDismissButtonRef: sidePaneDismissButtonRef }))))),
-                ((_j = props.callControlProps) === null || _j === undefined ? undefined : _j.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
+                ((_k = props.callControlProps) === null || _k === undefined ? undefined : _k.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) || hasJoinedCall, 
                         /* @conditional-compile-remove(rtt) */
                         isRealTimeTextSupported: hasJoinedCall, 
@@ -39822,7 +39610,7 @@ const CallArrangement = (props) => {
                     React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$4((_k = props.callControlProps.options) === null || _k === undefined ? undefined : _k.participantsButton), onChatButtonClicked: (_l = props.mobileChatTabHeader) === null || _l === undefined ? undefined : _l.onClick, disableChatButton: (_m = props.mobileChatTabHeader) === null || _m === undefined ? undefined : _m.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
+                            isDisabled$4((_l = props.callControlProps.options) === null || _l === undefined ? undefined : _l.participantsButton), onChatButtonClicked: (_m = props.mobileChatTabHeader) === null || _m === undefined ? undefined : _m.onClick, disableChatButton: (_o = props.mobileChatTabHeader) === null || _o === undefined ? undefined : _o.disabled, showAddPeopleButton: !!props.callControlProps.callInvitationURL, ariaLabel: isVideoEffectsPaneOpen ? locale.strings.call.videoEffectsPaneAriaLabel : undefined }),
                     props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                             closePeoplePane();
                             if (props.onCloseChatPane) {
@@ -43521,13 +43309,9 @@ class AzureCommunicationCallAdapter {
         this.stopAllSpotlight.bind(this);
         this.muteParticipant.bind(this);
         this.muteAllRemoteParticipants.bind(this);
-        /* @conditional-compile-remove(media-access) */
         this.forbidOthersAudio.bind(this);
-        /* @conditional-compile-remove(media-access) */
         this.permitOthersAudio.bind(this);
-        /* @conditional-compile-remove(media-access) */
         this.forbidOthersAudio.bind(this);
-        /* @conditional-compile-remove(media-access) */
         this.permitOthersAudio.bind(this);
     }
     dispose() {
@@ -44064,56 +43848,48 @@ class AzureCommunicationCallAdapter {
             this.handlers.onStopAllSpotlight();
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidAudio(userIds) {
         return __awaiter$7(this, undefined, undefined, function* () {
             var _a, _b;
             (_b = (_a = this.handlers).onForbidAudio) === null || _b === undefined ? undefined : _b.call(_a, userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitAudio(userIds) {
         return __awaiter$7(this, undefined, undefined, function* () {
             var _a, _b;
             (_b = (_a = this.handlers).onPermitAudio) === null || _b === undefined ? undefined : _b.call(_a, userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidOthersAudio() {
         return __awaiter$7(this, undefined, undefined, function* () {
             var _a, _b;
             (_b = (_a = this.handlers).onForbidOthersAudio) === null || _b === undefined ? undefined : _b.call(_a);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitOthersAudio() {
         return __awaiter$7(this, undefined, undefined, function* () {
             var _a, _b;
             (_b = (_a = this.handlers).onPermitOthersAudio) === null || _b === undefined ? undefined : _b.call(_a);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidVideo(userIds) {
         return __awaiter$7(this, undefined, undefined, function* () {
             var _a, _b;
             (_b = (_a = this.handlers).onForbidVideo) === null || _b === undefined ? undefined : _b.call(_a, userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitVideo(userIds) {
         return __awaiter$7(this, undefined, undefined, function* () {
             var _a, _b;
             (_b = (_a = this.handlers).onPermitVideo) === null || _b === undefined ? undefined : _b.call(_a, userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidOthersVideo() {
         return __awaiter$7(this, undefined, undefined, function* () {
             var _a, _b;
             (_b = (_a = this.handlers).onForbidOthersVideo) === null || _b === undefined ? undefined : _b.call(_a);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitOthersVideo() {
         return __awaiter$7(this, undefined, undefined, function* () {
             var _a, _b;
@@ -44300,17 +44076,12 @@ class AzureCommunicationCallAdapter {
     transferAccepted(args) {
         this.emitter.emit('transferAccepted', args);
     }
-    capabilitiesChangedunmuteMicTrampoline(data) {
-        /* @conditional-compile-remove(media-access) */
-        return;
-    }
     capabilitiesChanged(data) {
         var _a, _b;
         if (((_a = data.newValue.turnVideoOn) === null || _a === undefined ? undefined : _a.isPresent) === false) {
             // stopCamera is handled by web sdk when video hard muted.
             this.disposeLocalVideoStreamView();
         }
-        this.capabilitiesChangedunmuteMicTrampoline(data);
         if (((_b = data.newValue.shareScreen) === null || _b === undefined ? undefined : _b.isPresent) === false) {
             this.stopScreenShare();
         }
@@ -45023,49 +44794,41 @@ class CallWithChatBackedCallAdapter {
             return this.callWithChatAdapter.returnFromBreakoutRoom();
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidAudio(userIds) {
         return __awaiter$6(this, undefined, undefined, function* () {
             return this.callWithChatAdapter.forbidAudio(userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitAudio(userIds) {
         return __awaiter$6(this, undefined, undefined, function* () {
             return this.callWithChatAdapter.permitAudio(userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidOthersAudio() {
         return __awaiter$6(this, undefined, undefined, function* () {
             return this.callWithChatAdapter.forbidOthersAudio();
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitOthersAudio() {
         return __awaiter$6(this, undefined, undefined, function* () {
             return this.callWithChatAdapter.permitOthersAudio();
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidVideo(userIds) {
         return __awaiter$6(this, undefined, undefined, function* () {
             return this.callWithChatAdapter.forbidAudio(userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitVideo(userIds) {
         return __awaiter$6(this, undefined, undefined, function* () {
             return this.callWithChatAdapter.permitAudio(userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidOthersVideo() {
         return __awaiter$6(this, undefined, undefined, function* () {
             return this.callWithChatAdapter.forbidOthersAudio();
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitOthersVideo() {
         return __awaiter$6(this, undefined, undefined, function* () {
             return this.callWithChatAdapter.permitOthersAudio();
@@ -46361,49 +46124,41 @@ class AzureCommunicationCallWithChatAdapter {
             }
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidAudio(userIds) {
         return __awaiter$4(this, undefined, undefined, function* () {
             return this.callAdapter.forbidAudio(userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitAudio(userIds) {
         return __awaiter$4(this, undefined, undefined, function* () {
             return this.callAdapter.permitAudio(userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidOthersAudio() {
         return __awaiter$4(this, undefined, undefined, function* () {
             return this.callAdapter.forbidOthersAudio();
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitOthersAudio() {
         return __awaiter$4(this, undefined, undefined, function* () {
             return this.callAdapter.permitOthersAudio();
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidVideo(userIds) {
         return __awaiter$4(this, undefined, undefined, function* () {
             return this.callAdapter.forbidVideo(userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitVideo(userIds) {
         return __awaiter$4(this, undefined, undefined, function* () {
             return this.callAdapter.permitVideo(userIds);
         });
     }
-    /* @conditional-compile-remove(media-access) */
     forbidOthersVideo() {
         return __awaiter$4(this, undefined, undefined, function* () {
             return this.callAdapter.forbidOthersVideo();
         });
     }
-    /* @conditional-compile-remove(media-access) */
     permitOthersVideo() {
         return __awaiter$4(this, undefined, undefined, function* () {
             return this.callAdapter.permitOthersVideo();
@@ -47611,4 +47366,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-B8uYcMR8.js.map
+//# sourceMappingURL=index--34qf-o2.js.map