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

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-202402140012';
+var telemetryVersion = '1.13.0-alpha-202402161702';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -4528,21 +4528,17 @@ class ProxyTransferCallFeature {
         switch (prop) {
             case 'on':
                 return (...args) => {
-                    const isTransferRequested = args[0] === 'transferRequested';
-                    if (isTransferRequested) {
+                    const isTransferAccepted = args[0] === 'transferAccepted';
+                    if (isTransferAccepted) {
                         const listener = args[1];
                         const newListener = (args) => {
-                            const newArgs = Object.assign(Object.assign({}, args), { accept: (acceptOptions) => {
-                                    const acceptedTransferCall = args.accept(acceptOptions);
-                                    this._context.setAcceptedTransfer(this._call.id, {
-                                        callId: acceptedTransferCall.id,
-                                        timestamp: new Date()
-                                    });
-                                    return acceptedTransferCall;
-                                } });
-                            listener(newArgs);
+                            this._context.setAcceptedTransfer(this._call.id, {
+                                callId: args.targetCall.id,
+                                timestamp: new Date()
+                            });
+                            listener(args);
                         };
-                        return target.on('transferRequested', newListener);
+                        return target.on('transferAccepted', newListener);
                     }
                 };
             default:
@@ -6178,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'
     }
@@ -6229,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.
@@ -6275,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
@@ -8815,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
         }
     };
 };
@@ -8845,6 +8836,14 @@ const scrollableContentStyle = {
     flexDirection: 'column',
     flexWrap: 'nowrap'
 };
+/**
+ * @private
+ */
+const themeProviderRootStyle = {
+    background: 'transparent',
+    display: 'flex',
+    flexDirection: 'column'
+};
 /**
  * @private
  */
@@ -8867,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',
@@ -8922,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'
@@ -9010,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.
@@ -18732,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),
@@ -18883,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,
@@ -25212,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';
@@ -26875,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.
@@ -30488,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;
@@ -31883,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.
@@ -32002,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.
@@ -32642,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) {
@@ -32676,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);
@@ -32916,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':
@@ -33351,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.
@@ -33458,7 +33470,7 @@ class AzureCommunicationCallAdapter {
         /* @conditional-compile-remove(video-background-effects) */ options, this.targetCallees);
         this.context.onCallEnded((endCallData) => this.emitter.emit('callEnded', endCallData));
         const onStateChange = (clientState) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             // unsubscribe when the instance gets disposed
             if (!this) {
                 callClient.offStateChange(onStateChange);
@@ -33480,31 +33492,6 @@ class AzureCommunicationCallAdapter {
                 });
             }
             this.context.updateClientState(clientState);
-            /* @conditional-compile-remove(call-transfer) */
-            const acceptedTransferCallState = this.context.getState().acceptedTransferCallState;
-            /* @conditional-compile-remove(call-transfer) */
-            // TODO: Remove this if statement when Calling SDK prevents accepting transfer requests that have timed out
-            // This is to handle the case when there has been an accepted transfer call that is now in the connected state
-            // AND is not the current call. Ensure we leave the current call.
-            if (acceptedTransferCallState &&
-                acceptedTransferCallState.state === 'Connected' &&
-                ((_d = this.call) === null || _d === void 0 ? void 0 : _d.id) &&
-                acceptedTransferCallState.id !== this.call.id) {
-                const cAgent = callAgent;
-                const transferCall = cAgent.calls.find((call) => call.id === acceptedTransferCallState.id);
-                if (transferCall) {
-                    const oldCall = this.call;
-                    this.processNewCall(transferCall);
-                    // Arbitrary wait time before hanging up. 2 seconds is derived from manual testing. This is to allow
-                    // transferor to hang up themselves. If the transferor has not hung up, we hang up because we are now
-                    // in the transfer call
-                    setTimeout(() => {
-                        if ((oldCall === null || oldCall === void 0 ? void 0 : oldCall.state) === 'Connected') {
-                            oldCall.hangUp();
-                        }
-                    }, 2000);
-                }
-            }
         };
         this.handlers = createHandlers(callClient, callAgent, deviceManager, undefined, 
         /* @conditional-compile-remove(video-background-effects) */ {
@@ -33532,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) {
@@ -34148,7 +34136,7 @@ class AzureCommunicationCallAdapter {
         /* @conditional-compile-remove(rooms) */
         (_f = this.call) === null || _f === void 0 ? void 0 : _f.on('roleChanged', this.roleChanged.bind(this));
         /* @conditional-compile-remove(call-transfer) */
-        (_g = this.call) === null || _g === void 0 ? void 0 : _g.feature(communicationCalling.Features.Transfer).on('transferRequested', this.transferRequested.bind(this));
+        (_g = this.call) === null || _g === void 0 ? void 0 : _g.feature(communicationCalling.Features.Transfer).on('transferAccepted', this.transferAccepted.bind(this));
         /* @conditional-compile-remove(capabilities) */
         (_h = this.call) === null || _h === void 0 ? void 0 : _h.feature(communicationCalling.Features.Capabilities).on('capabilitiesChanged', this.capabilitiesChanged.bind(this));
         /* @conditional-compile-remove(spotlight) */
@@ -34222,20 +34210,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     /* @conditional-compile-remove(call-transfer) */
-    transferRequested(args) {
-        const newArgs = Object.assign(Object.assign({}, args), { accept: (options) => {
-                var _a, _b, _c, _d, _e, _f;
-                const videoSource = (_c = (_b = (_a = this.context.getState().call) === null || _a === void 0 ? void 0 : _a.localVideoStreams) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.source;
-                args.accept({
-                    audioOptions: (_d = options === null || options === void 0 ? void 0 : options.audioOptions) !== null && _d !== void 0 ? _d : {
-                        muted: !!((_e = this.context.getState().call) === null || _e === void 0 ? void 0 : _e.isMuted)
-                    },
-                    videoOptions: (_f = options === null || options === void 0 ? void 0 : options.videoOptions) !== null && _f !== void 0 ? _f : 
-                    /* maintain video state if options.videoOptions is not defined */
-                    (videoSource ? { localVideoStreams: [new communicationCalling.LocalVideoStream(videoSource)] } : undefined)
-                });
-            } });
-        this.emitter.emit('transferRequested', newArgs);
+    transferAccepted(args) {
+        this.emitter.emit('transferAccepted', args);
     }
     /* @conditional-compile-remove(capabilities) */
     capabilitiesChanged(data) {
@@ -36894,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;