@azure/communication-react 1.13.0-alpha-202402150012 → 1.13.0-alpha-202402161702

package/dist/communication-react.d.ts

@@ -98,7 +98,6 @@ import { SendMessageOptions } from '@azure/communication-chat';
 import { SpotlightedParticipant } from '@azure/communication-calling';
 import { StartCallOptions } from '@azure/communication-calling';
 import { StartCaptionsOptions } from '@azure/communication-calling';
-import { SyntheticEvent } from 'react';
 import { TeamsCall } from '@azure/communication-calling';
 import { TeamsCallAgent } from '@azure/communication-calling';
 import { TeamsMeetingLinkLocator } from '@azure/communication-calling';
@@ -114,7 +113,7 @@ import { VideoStreamRendererView } from '@azure/communication-calling';
 /**
  * Transfer feature state
  *
- * @beta
+ * @public
  */
 export declare interface AcceptedTransfer {
     /**
@@ -2102,7 +2101,7 @@ export declare interface CallCompositeStrings {
     /**
      * Label disaplayed on the lobby screen during a 1:1 outbound call.
      */
-    outboundCallingNoticeString: string;
+    outboundCallingNoticeString?: string;
     /**
      * Notice to be announced by narrator when a participant joins a call
      */
@@ -4756,26 +4755,6 @@ export declare type ChatParticipantListSelector = (state: ChatClientState, props
  */
 export declare type ChatReturnProps<Component extends (props: any) => JSX.Element> = GetChatSelector<Component> extends (state: ChatClientState, props: any) => any ? ReturnType<GetChatSelector<Component>> & Common<ChatHandlers, Parameters<Component>[0]> : never;
 
-/**
- * Custom Fluent theme palette used by chat related components in this library.
- *
- * @beta
- */
-export declare interface ChatTheme {
-    /**
-     * Custom Fluent theme palette used by chat related components in this library.
-     *
-     * @beta
-     */
-    chatPalette: {
-        modalOverlayBlack: string;
-        modalTitleWhite: string;
-        modalButtonBackground: string;
-        modalButtonBackgroundHover: string;
-        modalButtonBackgroundActive: string;
-    };
-}
-
 /**
  * A {@link React.Context} that stores a {@link @azure/communication-chat#ChatThreadClient}.
  *
@@ -6120,7 +6099,7 @@ export declare interface CustomMessage extends MessageCommon {
  *
  * @public
  */
-export declare const darkTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-overlay) */ ChatTheme;
+export declare const darkTheme: PartialTheme & CallingTheme;
 
 /**
  * @beta
@@ -7223,6 +7202,8 @@ export declare interface FluentThemeProviderProps {
      * @defaultValue `false`
      */
     rtl?: boolean;
+    /** Optional style to change the root style of the ThemeProvider */
+    rootStyle?: React_2.CSSProperties | undefined;
 }
 
 /**
@@ -7484,13 +7465,9 @@ export declare interface ImageOverlayProps {
      */
     onDismiss: () => void;
     /**
-     * Callback called when the download button is clicked.
-     */
-    onDownloadButtonClicked: (imageSrc: string) => void;
-    /**
-     * Callback called when there's an error loading the image.
+     * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.
      */
-    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
+    onDownloadButtonClicked?: (imageSrc: string) => void;
 }
 
 /**
@@ -7509,6 +7486,13 @@ export declare interface ImageOverlayStrings {
     dismissButtonAriaLabel: string;
 }
 
+/**
+ * Preset dark theme for the ImageOverlay component.
+ *
+ * @beta
+ */
+export declare const imageOverlayTheme: PartialTheme;
+
 /**
  * @beta
  * This contains a readonly array that returns all the active `incomingCalls`.
@@ -7695,7 +7679,7 @@ export declare interface JumpToNewMessageButtonProps {
  *
  * @public
  */
-export declare const lightTheme: PartialTheme & CallingTheme & /* @conditional-compile-remove(image-overlay) */ ChatTheme;
+export declare const lightTheme: PartialTheme & CallingTheme;
 
 /**
  * Whether the stream is loading or not.
@@ -10399,14 +10383,14 @@ export declare interface TranscriptionCallFeature {
 /**
  * Callback for {@link CallAdapterSubscribers} 'transferRequested' event.
  *
- * @beta
+ * @public
  */
 export declare type TransferAcceptedListener = (event: TransferEventArgs) => void;
 
 /**
  * Transfer feature state
  *
- * @beta
+ * @public
  */
 export declare interface TransferFeature {
     /**

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

@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.13.0-alpha-202402150012';
+var telemetryVersion = '1.13.0-alpha-202402161702';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -6174,14 +6174,6 @@ const lightTheme = {
         /* @conditional-compile-remove(raise-hand) */
         raiseHandGold: '#eaa300'
     },
-    /* @conditional-compile-remove(image-overlay) */
-    chatPalette: {
-        modalOverlayBlack: '#000000',
-        modalTitleWhite: '#ffffff',
-        modalButtonBackground: '#1b1a19',
-        modalButtonBackgroundHover: '#252423',
-        modalButtonBackgroundActive: '#292827'
-    },
     semanticColors: {
         errorText: '#a80000'
     }
@@ -6225,18 +6217,20 @@ const darkTheme = {
         /* @conditional-compile-remove(raise-hand) */
         raiseHandGold: '#eaa300'
     },
-    /* @conditional-compile-remove(image-overlay) */
-    chatPalette: {
-        modalOverlayBlack: '#000000',
-        modalTitleWhite: '#ffffff',
-        modalButtonBackground: '#1b1a19',
-        modalButtonBackgroundHover: '#252423',
-        modalButtonBackgroundActive: '#292827'
-    },
     semanticColors: {
         errorText: '#f1707b'
     }
 };
+/* @conditional-compile-remove(image-overlay) */
+/**
+ * Preset dark theme for the ImageOverlay component.
+ *
+ * @beta
+ */
+const imageOverlayTheme = {
+    palette: darkTheme.palette,
+    semanticColors: Object.assign(Object.assign({}, darkTheme.semanticColors), { bodyBackground: 'rgba(0, 0, 0, 0.85)' })
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -6271,11 +6265,12 @@ const ThemeContext = React.createContext(defaultTheme);
  * @public
  */
 const FluentThemeProvider = (props) => {
-    const { fluentTheme, rtl, children } = props;
+    const { fluentTheme, rtl, children, /* @conditional-compile-remove(image-overlay) */ rootStyle } = props;
     let fluentV8Theme = react.mergeThemes(defaultTheme, fluentTheme);
     fluentV8Theme = react.mergeThemes(fluentV8Theme, { rtl });
     return (React.createElement(ThemeContext.Provider, { value: fluentV8Theme },
-        React.createElement(react.ThemeProvider, { theme: fluentV8Theme, className: wrapper }, children)));
+        React.createElement(react.ThemeProvider, { theme: fluentV8Theme, className: wrapper, 
+            /* @conditional-compile-remove(image-overlay) */ style: rootStyle }, children)));
 };
 /**
  * React hook to access theme
@@ -8811,10 +8806,10 @@ const downloadIcon = {
  * @private
  */
 const overlayStyles = (theme) => {
+    var _a;
     return {
         root: {
-            background: theme.chatPalette.modalOverlayBlack,
-            opacity: '0.85'
+            background: (_a = theme.semanticColors) === null || _a === void 0 ? void 0 : _a.bodyBackground
         }
     };
 };
@@ -8841,6 +8836,14 @@ const scrollableContentStyle = {
     flexDirection: 'column',
     flexWrap: 'nowrap'
 };
+/**
+ * @private
+ */
+const themeProviderRootStyle = {
+    background: 'transparent',
+    display: 'flex',
+    flexDirection: 'column'
+};
 /**
  * @private
  */
@@ -8863,14 +8866,14 @@ const titleBarContainerStyle = {
     alignContent: 'center',
     alignItems: 'center'
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 const titleStyle$2 = (theme) => {
+    var _a;
     return {
         paddingLeft: '0.5rem',
-        color: theme.chatPalette.modalTitleWhite,
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         fontFamily: 'inherit',
         fontSize: '0.875rem',
         fontStyle: 'normal',
@@ -8918,77 +8921,60 @@ const normalImageStyle = {
     maxHeight: '100%',
     maxWidth: '100%'
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 const brokenImageStyle = (theme) => {
+    var _a;
     return {
-        color: theme.chatPalette.modalTitleWhite
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black
     };
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 const closeButtonStyles = (theme) => {
+    var _a, _b, _c;
     return {
-        color: theme.chatPalette.modalTitleWhite,
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
+            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
         },
         ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
+            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
         }
     };
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
-const downloadButtonStyle = (theme) => {
-    return {
-        margin: '0 0.5rem',
-        height: '32px',
-        borderWidth: '1px',
-        fontSize: '0.875rem', // 14px
-        fontWeight: 600,
-        padding: '0.38rem 0.75rem',
-        borderRadius: '4px',
-        backgroundColor: theme.chatPalette.modalButtonBackground,
-        color: theme.chatPalette.modalTitleWhite,
-        whiteSpace: 'nowrap',
-        ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
-        },
-        ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
-        },
-        '@media (max-width: 25rem)': {
-            display: 'none'
-        }
-    };
+const downloadButtonStyle = {
+    margin: '0 0.5rem',
+    height: '32px',
+    borderWidth: '1px',
+    fontSize: '0.875rem', // 14px
+    fontWeight: 600,
+    padding: '0.38rem 0.75rem',
+    borderRadius: '4px',
+    whiteSpace: 'nowrap',
+    '@media (max-width: 25rem)': {
+        display: 'none'
+    }
 };
-/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 const smallDownloadButtonContainerStyle = (theme) => {
+    var _a, _b, _c;
     return {
         marginRight: '0.5rem',
-        color: theme.chatPalette.modalTitleWhite,
         whiteSpace: 'nowrap',
+        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         ':hover': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
+            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
         },
         ':active': {
-            color: theme.chatPalette.modalTitleWhite,
-            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
+            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
         },
         '@media (min-width: 25rem)': {
             display: 'none'
@@ -9006,37 +8992,36 @@ const smallDownloadButtonContainerStyle = (theme) => {
  * @beta
  */
 const ImageOverlay = (props) => {
-    const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss, onError } = props;
-    const theme = useTheme();
+    const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;
     /* @conditional-compile-remove(image-overlay) */
     const localeStrings = useLocale$1().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = React.useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
+    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);
     const renderHeaderBar = () => {
         return (React.createElement(react.Stack, { className: react.mergeStyles(headerStyle) },
             React.createElement(react.Stack, { className: react.mergeStyles(titleBarContainerStyle) },
                 titleIcon,
-                React.createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(theme)), "aria-label": title || 'Image' }, title)),
+                React.createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(imageOverlayTheme)), "aria-label": title || 'Image' }, title)),
             React.createElement(react.Stack, { className: react.mergeStyles(controlBarContainerStyle) },
-                React.createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle(theme)), 
+                onDownloadButtonClicked && (React.createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle), 
                     /* @conditional-compile-remove(image-overlay) */
-                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(react.Icon, { iconName: downloadIcon.iconName, className: react.mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
-                React.createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(theme)), onClick: () => onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
-                React.createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(theme)), onClick: onDismiss, 
+                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(react.Icon, { iconName: downloadIcon.iconName, className: react.mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel })),
+                onDownloadButtonClicked && (React.createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' })),
+                React.createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(imageOverlayTheme)), onClick: onDismiss, 
                     /* @conditional-compile-remove(image-overlay) */
                     ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
     const renderBodyWithLightDismiss = () => {
-        return (React.createElement(react.Stack, { className: react.mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: react.mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "aria-live": 'polite', onError: (event) => {
+        return (React.createElement(react.Stack, { className: react.mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: react.mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "aria-live": 'polite', onError: () => {
                 setIsImageLoaded(false);
-                onError && onError(event);
             }, onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
                 event.persist();
             } }))));
     };
-    return (React.createElement(react.Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
-        renderHeaderBar(),
-        renderBodyWithLightDismiss()));
+    return (React.createElement(react.Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(imageOverlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
+        React.createElement(FluentThemeProvider, { fluentTheme: imageOverlayTheme, rootStyle: themeProviderRootStyle },
+            renderHeaderBar(),
+            renderBodyWithLightDismiss())));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18728,7 +18713,7 @@ const _StarSurvey = (props) => {
 /**
  * @private
  */
-const questionTextStyle = (theme) => react.mergeStyles({
+const questionTextStyle$1 = (theme) => react.mergeStyles({
     fontWeight: 600,
     fontSize: _pxToRem(16),
     lineHeight: _pxToRem(20),
@@ -18879,7 +18864,7 @@ const _TagsSurvey = (props) => {
     }, [selectedTags, selectedTextResponse, onConfirm]);
     return (React.createElement(React.Fragment, null,
         React.createElement(react.Stack, { verticalAlign: "center" },
-            React.createElement(react.Text, { className: questionTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.tagsSurveyQuestion)),
+            React.createElement(react.Text, { className: questionTextStyle$1(theme) }, strings === null || strings === void 0 ? void 0 : strings.tagsSurveyQuestion)),
         React.createElement(react.Pivot, null, Object.keys(tags).map((key, i) => {
             return (React.createElement(react.PivotItem, { key: `key-${i}`, headerText: categoryHeadings[key], headerButtonProps: {
                     'data-order': i,
@@ -25208,7 +25193,7 @@ const getEndedCallPageProps = (locale, endedCall) => {
  *
  * @private
  */
-const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo, transferCall) => {
+const getCallCompositePage = (call, previousCall, transferCall, unsupportedBrowserInfo) => {
     /* @conditional-compile-remove(unsupported-browser) */
     if (isUnsupportedEnvironment(unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
         return 'unsupportedEnvironment';
@@ -26871,12 +26856,25 @@ const createAnnouncementString = (direction, participants, strings) => {
 /**
  * determines if the media gallery should be replaced by the dtmf dialer
  * @param callees Target callees to determine if the dtmf dialer should be shown
+ * @param remoteParticipants Remote participants to determine if the dtmf dialer should be shown if there are participants in the call
+ * when joining
  * @returns whether the dialer should be the gallery content or not
  */
-const showDtmfDialer = (callees) => {
-    return !!((callees === null || callees === void 0 ? void 0 : callees.filter((callee) => {
-        return communicationCommon.isPhoneNumberIdentifier(callee) || communicationCommon.isMicrosoftTeamsAppIdentifier(callee);
-    })) && callees.length > 0);
+const showDtmfDialer = (callees, remoteParticipants) => {
+    let showDtmfDialer = false;
+    callees === null || callees === void 0 ? void 0 : callees.forEach((callee) => {
+        if (communicationCommon.isMicrosoftTeamsAppIdentifier(callee) || communicationCommon.isPhoneNumberIdentifier(callee)) {
+            showDtmfDialer = true;
+        }
+    });
+    if (remoteParticipants) {
+        remoteParticipants.forEach((participant) => {
+            if (!('phoneNumber' in participant.identifier || 'teamsAppId' in participant.identifier)) {
+                showDtmfDialer = false;
+            }
+        });
+    }
+    return showDtmfDialer;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -30484,22 +30482,9 @@ const CallPage = (props) => {
     /* @conditional-compile-remove(dtmf-dialer) */
     const callees = useSelector$1(getTargetCallees);
     /* @conditional-compile-remove(dtmf-dialer) */
-    const renderDtmfDialerFromStart = showDtmfDialer(callees);
+    const renderDtmfDialerFromStart = showDtmfDialer(callees, remoteParticipantsConnected);
     /* @conditional-compile-remove(dtmf-dialer) */
     const [dtmfDialerPresent, setDtmfDialerPresent] = React.useState(renderDtmfDialerFromStart);
-    /* @conditional-compile-remove(dtmf-dialer) */
-    const dialerShouldAutoDismiss = React.useRef(renderDtmfDialerFromStart);
-    /* @conditional-compile-remove(dtmf-dialer) */
-    /**
-     * This useEffect is about clearing the dtmf dialer should there be a new participant that joins the call.
-     * This will only happen the first time should the dialer be present when the call starts.
-     */
-    React.useEffect(() => {
-        if (remoteParticipantsConnected.length > 1 && dtmfDialerPresent && dialerShouldAutoDismiss.current) {
-            setDtmfDialerPresent(false);
-            dialerShouldAutoDismiss.current = false;
-        }
-    }, [dtmfDialerPresent, remoteParticipantsConnected, setDtmfDialerPresent]);
     const strings = useLocale().strings.call;
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = mobileView ? reduceCallControlsForMobile(options === null || options === void 0 ? void 0 : options.callControls) : options === null || options === void 0 ? void 0 : options.callControls;
@@ -31879,13 +31864,21 @@ const moreDetailsStyles = {
  */
 function NoticePage(props) {
     const adapter = useAdapter();
+    const callees = useSelector$1(getTargetCallees);
     return (React.createElement(react.Stack, { className: react.mergeStyles(props.pageStyle), verticalFill: true, verticalAlign: "center", horizontalAlign: "center", "data-ui-id": props.dataUiId, "aria-atomic": true },
         React.createElement(react.Stack, { className: react.mergeStyles(containerStyle), tokens: containerItemGap },
             props.iconName && React.createElement(CallCompositeIcon, { iconName: props.iconName }),
             React.createElement(react.Text, { className: react.mergeStyles(titleStyles), "aria-live": "assertive" }, props.title),
             React.createElement(react.Text, { className: react.mergeStyles(moreDetailsStyles), "aria-live": "assertive" }, props.moreDetails),
             !props.disableStartCallButton && (React.createElement(react.Stack, { styles: rejoinCallButtonContainerStyles },
-                React.createElement(StartCallButton, { onClick: () => adapter.joinCall(), disabled: false, rejoinCall: true, autoFocus: true }))))));
+                React.createElement(StartCallButton, { onClick: () => {
+                        if (callees && callees.length > 0) {
+                            adapter.startCall(callees);
+                        }
+                        else {
+                            adapter.joinCall();
+                        }
+                    }, disabled: false, rejoinCall: true, autoFocus: true }))))));
 }
 
 // Copyright (c) Microsoft Corporation.
@@ -31998,22 +31991,19 @@ const overlayPropsWaitingToBeAdmitted = (strings) => ({
     overlayIcon: React.createElement(CallCompositeIcon, { iconName: "LobbyScreenWaitingToBeAdmitted" })
 });
 const overlayPropsOutboundCall = (strings, participant) => {
+    var _a;
     if (communicationCommon.isPhoneNumberIdentifier(participant.identifier)) {
         return {
             title: participant.identifier.phoneNumber,
-            moreDetails: outboundCallStringsTrampoline(strings)
+            moreDetails: strings.outboundCallingNoticeString
         };
     }
     else {
         return {
-            title: outboundCallStringsTrampoline(strings)
+            title: (_a = strings.outboundCallingNoticeString) !== null && _a !== void 0 ? _a : ''
         };
     }
 };
-const outboundCallStringsTrampoline = (strings) => {
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    return strings.outboundCallingNoticeString;
-};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -32638,6 +32628,39 @@ function ThankYouForFeedbackPage(
             React.createElement(react.Text, { className: react.mergeStyles(titleStyles), "aria-live": "assertive" }, strings.endOfSurveyText))));
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(end-of-call-survey) */
+/* @conditional-compile-remove(end-of-call-survey) */
+/**
+ * @private
+ */
+const questionTextStyle = (theme) => react.mergeStyles({
+    fontWeight: 600,
+    fontSize: _pxToRem(20),
+    lineHeight: _pxToRem(20),
+    color: theme.palette.neutralPrimary
+});
+/* @conditional-compile-remove(end-of-call-survey) */
+/**
+ * @private
+ */
+const surveyContainerStyle = (isMobile) => react.mergeStyles(isMobile
+    ? {
+        width: '20rem',
+        position: 'absolute',
+        top: '10%',
+        left: '50%',
+        transform: 'translateX(-50%)'
+    }
+    : {
+        width: '24rem',
+        position: 'absolute',
+        top: '20%',
+        left: '50%',
+        transform: 'translateX(-50%)'
+    });
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -32672,17 +32695,10 @@ const Survey = (props) => {
     /* @conditional-compile-remove(end-of-call-survey) */
     const theme = react.useTheme();
     /* @conditional-compile-remove(end-of-call-survey) */
-    const questionTextStyle = (theme) => react.mergeStyles({
-        fontWeight: 600,
-        fontSize: _pxToRem(20),
-        lineHeight: _pxToRem(20),
-        color: theme.palette.neutralPrimary
-    });
-    /* @conditional-compile-remove(end-of-call-survey) */
     return (React.createElement(React.Fragment, null,
         showDefaultAfterSubmitScreen && React.createElement(ThankYouForFeedbackPage, { iconName: iconName }),
         showDefaultAfterDismissedScreen && (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton })),
-        !showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (React.createElement(react.Stack, { verticalAlign: "center", style: { width: isMobile ? '20rem' : '24rem' } },
+        !showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && (React.createElement(react.Stack, { verticalAlign: "center", className: surveyContainerStyle(isMobile) },
             React.createElement(react.Text, { className: questionTextStyle(theme) }, strings.surveyTitle),
             React.createElement(SurveyContent, { setShowSubmitFeedbackButton: (showButton) => {
                     setShowSubmitFeedbackButton(showButton);
@@ -32912,7 +32928,7 @@ const MainScreen = (props) => {
                 pageElement = (React.createElement(SurveyPage, { dataUiId: 'left-call-page', surveyOptions: (_p = props.options) === null || _p === void 0 ? void 0 : _p.surveyOptions, iconName: iconName, title: title, moreDetails: moreDetails, disableStartCallButton: disableStartCallButton, mobileView: props.mobileView }));
                 break;
             }
-            pageElement = (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton }));
+            pageElement = (React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: callees ? '' : moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton }));
             break;
         }
         case 'lobby':
@@ -33347,8 +33363,8 @@ class CallContext {
         /* @conditional-compile-remove(call-transfer) */
         const transferCall = latestAcceptedTransfer ? clientState.calls[latestAcceptedTransfer.callId] : undefined;
         const newPage = getCallCompositePage(call, latestEndedCall, 
-        /* @conditional-compile-remove(unsupported-browser) */ environmentInfo, 
-        /* @conditional-compile-remove(call-transfer) */ transferCall);
+        /* @conditional-compile-remove(call-transfer) */ transferCall, 
+        /* @conditional-compile-remove(unsupported-browser) */ environmentInfo);
         if (!IsCallEndedPage(oldPage) && IsCallEndedPage(newPage)) {
             this.emitter.emit('callEnded', { callId: this.callId });
             // Reset the callId to undefined as the call has ended.
@@ -33503,7 +33519,8 @@ class AzureCommunicationCallAdapter {
             };
             this.callAgent.on('callsUpdated', onCallsUpdated);
         }
-        else if (this.callAgent.kind === 'TeamsCallAgent') {
+        /* @conditional-compile-remove(teams-identity-support) */
+        if (this.callAgent.kind === 'TeamsCallAgent') {
             const onTeamsCallsUpdated = (args) => {
                 var _a;
                 if ((_a = this.call) === null || _a === void 0 ? void 0 : _a.id) {
@@ -36853,6 +36870,7 @@ exports.darkTheme = darkTheme;
 exports.fromFlatCommunicationIdentifier = fromFlatCommunicationIdentifier;
 exports.getCallingSelector = getSelector$1;
 exports.getChatSelector = getSelector;
+exports.imageOverlayTheme = imageOverlayTheme;
 exports.lightTheme = lightTheme;
 exports.onResolveVideoEffectDependency = onResolveVideoEffectDependency;
 exports.onResolveVideoEffectDependencyLazy = onResolveVideoEffectDependencyLazy;