@azure/communication-react 1.11.0-alpha-202312050013 → 1.11.0-alpha-202312070013

package/dist/communication-react.d.ts

@@ -1554,11 +1554,11 @@ export declare type CallCompositeOptions = {
              */
             alt?: string;
             /**
-             * The logo can be displayed as a circle or a square.
+             * The logo can be displayed as a circle.
              *
-             * @defaultValue 'circle'
+             * @defaultValue 'unset'
              */
-            shape?: 'circle' | 'square';
+            shape?: 'unset' | 'circle';
         };
         /**
          * Background image displayed on the configuration page.
@@ -2553,7 +2553,7 @@ export declare interface CallState {
  *
  * @public
  */
-export declare interface CallWithChatAdapter extends CallWithChatAdapterManagement, AdapterState<CallWithChatAdapterState>, Disposable, CallWithChatAdapterSubscriptions {
+export declare interface CallWithChatAdapter extends CallWithChatAdapterManagement, AdapterState<CallWithChatAdapterState>, Disposable_2, CallWithChatAdapterSubscriptions {
 }
 
 /**
@@ -3251,11 +3251,11 @@ export declare type CallWithChatCompositeOptions = {
              */
             alt?: string;
             /**
-             * The logo can be displayed as a circle or a square.
+             * The logo can be displayed as a circle.
              *
-             * @defaultValue 'circle'
+             * @defaultValue 'unset'
              */
-            shape?: 'circle' | 'square';
+            shape?: 'unset' | 'circle';
         };
         /**
          * Background image displayed on the configuration page.
@@ -3908,7 +3908,7 @@ export declare type CaptionsReceivedListener = (event: {
  *
  * @public
  */
-export declare type ChatAdapter = ChatAdapterThreadManagement & AdapterState<ChatAdapterState> & Disposable & ChatAdapterSubscribers & FileUploadAdapter;
+export declare type ChatAdapter = ChatAdapterThreadManagement & AdapterState<ChatAdapterState> & Disposable_2 & ChatAdapterSubscribers & FileUploadAdapter;
 
 /**
  * {@link ChatAdapter} state.
@@ -4504,7 +4504,7 @@ export declare type Common<A, B> = Pick<A, CommonProperties<A, B>>;
  *
  * @public
  */
-export declare interface CommonCallAdapter extends AdapterState<CallAdapterState>, Disposable, CallAdapterCallOperations, CallAdapterDeviceManagement, CallAdapterSubscribers {
+export declare interface CommonCallAdapter extends AdapterState<CallAdapterState>, Disposable_2, CallAdapterCallOperations, CallAdapterDeviceManagement, CallAdapterSubscribers {
     /**
      * Join the call with microphone initially on/off.
      * @deprecated Use joinCall(options?:JoinCallOptions) instead.
@@ -5475,8 +5475,8 @@ export declare const createDefaultChatHandlers: (chatClient: StatefulChatClient,
  * @beta
  */
 export declare const createDefaultTeamsCallingHandlers: (callClient: StatefulCallClient, callAgent: undefined | /* @conditional-compile-remove(teams-identity-support) */ TeamsCallAgent, deviceManager: StatefulDeviceManager | undefined, call: undefined | /* @conditional-compile-remove(teams-identity-support) */ TeamsCall, options?: {
-    onResolveVideoBackgroundEffectsDependency?: (() => Promise<VideoBackgroundEffectsDependency>) | undefined;
-} | undefined) => never | TeamsCallingHandlers;
+    onResolveVideoBackgroundEffectsDependency?: () => Promise<VideoBackgroundEffectsDependency>;
+}) => never | TeamsCallingHandlers;
 
 /**
  * Creates a StatefulCallClient {@link StatefulCallClient} by proxying CallClient
@@ -5492,7 +5492,7 @@ export declare const createDefaultTeamsCallingHandlers: (callClient: StatefulCal
  *
  * @public
  */
-export declare const createStatefulCallClient: (args: StatefulCallClientArgs, options?: StatefulCallClientOptions | undefined) => StatefulCallClient;
+export declare const createStatefulCallClient: (args: StatefulCallClientArgs, options?: StatefulCallClientOptions) => StatefulCallClient;
 
 /**
  * Creates a stateful ChatClient {@link StatefulChatClient} by proxying ChatClient
@@ -5501,7 +5501,7 @@ export declare const createStatefulCallClient: (args: StatefulCallClientArgs, op
  *
  * @public
  */
-export declare const createStatefulChatClient: (args: StatefulChatClientArgs, options?: StatefulChatClientOptions | undefined) => StatefulChatClient;
+export declare const createStatefulChatClient: (args: StatefulChatClientArgs, options?: StatefulChatClientOptions) => StatefulChatClient;
 
 /**
  * @beta
@@ -5516,7 +5516,7 @@ export declare const createTeamsCallAdapter: ({ userId, credential, locator, opt
  *
  * @beta
  */
-export declare const createTeamsCallAdapterFromClient: (callClient: StatefulCallClient, callAgent: TeamsCallAgent, locator: CallAdapterLocator, options?: CommonCallAdapterOptions | undefined) => Promise<TeamsCallAdapter>;
+export declare const createTeamsCallAdapterFromClient: (callClient: StatefulCallClient, callAgent: TeamsCallAgent, locator: CallAdapterLocator, options?: TeamsAdapterOptions) => Promise<TeamsCallAdapter>;
 
 /**
  * Object returned after creating a local or remote VideoStream.
@@ -5816,49 +5816,49 @@ export declare const DEFAULT_COMPONENT_ICONS: {
  * @public
  */
 export declare const DEFAULT_COMPOSITE_ICONS: {
-    EditBoxCancel: JSX.Element | React_2.JSX.Element;
-    EditBoxSubmit: JSX.Element | React_2.JSX.Element;
-    MessageDelivered: JSX.Element | React_2.JSX.Element;
-    MessageEdit: JSX.Element | React_2.JSX.Element;
-    MessageFailed: JSX.Element | React_2.JSX.Element;
-    MessageRemove: JSX.Element | React_2.JSX.Element;
-    MessageSeen: JSX.Element | React_2.JSX.Element;
-    MessageSending: JSX.Element | React_2.JSX.Element;
-    ParticipantItemOptions: JSX.Element | React_2.JSX.Element;
-    ParticipantItemOptionsHovered: JSX.Element | React_2.JSX.Element;
-    SendBoxSend: JSX.Element | React_2.JSX.Element;
-    SendBoxSendHovered: JSX.Element | React_2.JSX.Element;
+    EditBoxCancel: JSX.Element;
+    EditBoxSubmit: JSX.Element;
+    MessageDelivered: JSX.Element;
+    MessageEdit: JSX.Element;
+    MessageFailed: JSX.Element;
+    MessageRemove: JSX.Element;
+    MessageSeen: JSX.Element;
+    MessageSending: JSX.Element;
+    ParticipantItemOptions: JSX.Element;
+    ParticipantItemOptionsHovered: JSX.Element;
+    SendBoxSend: JSX.Element;
+    SendBoxSendHovered: JSX.Element;
     SendBoxAttachFile?: JSX.Element | undefined;
     ControlBarPeopleButton?: JSX.Element | undefined;
-    ControlButtonCameraOff: JSX.Element | React_2.JSX.Element;
-    ControlButtonCameraOn: JSX.Element | React_2.JSX.Element;
-    ControlButtonEndCall: JSX.Element | React_2.JSX.Element;
-    ControlButtonMicOff: JSX.Element | React_2.JSX.Element;
-    ControlButtonMicOn: JSX.Element | React_2.JSX.Element;
-    ControlButtonOptions: JSX.Element | React_2.JSX.Element;
-    ControlButtonParticipants: JSX.Element | React_2.JSX.Element;
-    ControlButtonScreenShareStart: JSX.Element | React_2.JSX.Element;
-    ControlButtonScreenShareStop: JSX.Element | React_2.JSX.Element;
+    ControlButtonCameraOff: JSX.Element;
+    ControlButtonCameraOn: JSX.Element;
+    ControlButtonEndCall: JSX.Element;
+    ControlButtonMicOff: JSX.Element;
+    ControlButtonMicOn: JSX.Element;
+    ControlButtonOptions: JSX.Element;
+    ControlButtonParticipants: JSX.Element;
+    ControlButtonScreenShareStart: JSX.Element;
+    ControlButtonScreenShareStop: JSX.Element;
     ControlButtonCameraProhibited?: JSX.Element | undefined;
     ControlButtonMicProhibited?: JSX.Element | undefined;
-    ControlButtonRaiseHand: JSX.Element | React_2.JSX.Element;
-    ControlButtonLowerHand: JSX.Element | React_2.JSX.Element;
-    RaiseHandContextualMenuItem: JSX.Element | React_2.JSX.Element;
-    LowerHandContextualMenuItem: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallCameraAccessDenied: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallCameraAlreadyInUse: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallLocalVideoFreeze: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallMacOsCameraAccessDenied: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallMacOsMicrophoneAccessDenied: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallMicrophoneAccessDenied: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallMicrophoneMutedBySystem: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallMicrophoneUnmutedBySystem: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallNetworkQualityLow: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallNoMicrophoneFound: JSX.Element | React_2.JSX.Element;
-    ErrorBarCallNoSpeakerFound: JSX.Element | React_2.JSX.Element;
-    ErrorBarClear: JSX.Element | React_2.JSX.Element;
-    HorizontalGalleryLeftButton: JSX.Element | React_2.JSX.Element;
-    HorizontalGalleryRightButton: JSX.Element | React_2.JSX.Element;
+    ControlButtonRaiseHand: JSX.Element;
+    ControlButtonLowerHand: JSX.Element;
+    RaiseHandContextualMenuItem: JSX.Element;
+    LowerHandContextualMenuItem: JSX.Element;
+    ErrorBarCallCameraAccessDenied: JSX.Element;
+    ErrorBarCallCameraAlreadyInUse: JSX.Element;
+    ErrorBarCallLocalVideoFreeze: JSX.Element;
+    ErrorBarCallMacOsCameraAccessDenied: JSX.Element;
+    ErrorBarCallMacOsMicrophoneAccessDenied: JSX.Element;
+    ErrorBarCallMicrophoneAccessDenied: JSX.Element;
+    ErrorBarCallMicrophoneMutedBySystem: JSX.Element;
+    ErrorBarCallMicrophoneUnmutedBySystem: JSX.Element;
+    ErrorBarCallNetworkQualityLow: JSX.Element;
+    ErrorBarCallNoMicrophoneFound: JSX.Element;
+    ErrorBarCallNoSpeakerFound: JSX.Element;
+    ErrorBarClear: JSX.Element;
+    HorizontalGalleryLeftButton: JSX.Element;
+    HorizontalGalleryRightButton: JSX.Element;
     LobbyScreenConnectingToCall?: JSX.Element | undefined;
     LobbyScreenWaitingToBeAdmitted?: JSX.Element | undefined;
     LocalDeviceSettingsCamera?: JSX.Element | undefined;
@@ -5875,12 +5875,12 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     NoticePageNotInvitedToRoom?: JSX.Element | undefined;
     NoticePageRoomNotFound?: JSX.Element | undefined;
     NoticePageRoomNotValid?: JSX.Element | undefined;
-    OptionsCamera: JSX.Element | React_2.JSX.Element;
-    OptionsMic: JSX.Element | React_2.JSX.Element;
-    OptionsSpeaker: JSX.Element | React_2.JSX.Element;
-    ParticipantItemMicOff: JSX.Element | React_2.JSX.Element;
-    ParticipantItemScreenShareStart: JSX.Element | React_2.JSX.Element;
-    VideoTileMicOff: JSX.Element | React_2.JSX.Element;
+    OptionsCamera: JSX.Element;
+    OptionsMic: JSX.Element;
+    OptionsSpeaker: JSX.Element;
+    ParticipantItemMicOff: JSX.Element;
+    ParticipantItemScreenShareStart: JSX.Element;
+    VideoTileMicOff: JSX.Element;
     LocalCameraSwitch?: JSX.Element | undefined;
     PeoplePaneAddPerson?: JSX.Element | undefined;
     PeoplePaneOpenDialpad?: JSX.Element | undefined;
@@ -6258,10 +6258,11 @@ export declare type DisplayNameChangedListener = (event: {
  *
  * @public
  */
-export declare interface Disposable {
+declare interface Disposable_2 {
     /** Dispose of the Composite */
     dispose(): void;
 }
+export { Disposable_2 as Disposable }
 
 /**
  * DTMF tone for PSTN calls.
@@ -9961,7 +9962,7 @@ export declare const useDeviceManager: () => StatefulDeviceManager | undefined;
  *
  * @public
  */
-export declare const usePropsFor: <Component extends (props: any) => JSX.Element>(component: Component, type?: "chat" | "calling" | undefined) => ComponentProps<Component>;
+export declare const usePropsFor: <Component extends (props: any) => JSX.Element>(component: Component, type?: 'calling' | 'chat') => ComponentProps<Component>;
 
 /**
  * Hook to obtain a selector for a specified component.
@@ -9971,7 +9972,7 @@ export declare const usePropsFor: <Component extends (props: any) => JSX.Element
  *
  * @public
  */
-export declare const useSelector: <ParamT extends Selector | undefined>(selector: ParamT, selectorProps?: (ParamT extends Selector ? Parameters<ParamT>[1] : undefined) | undefined, type?: "chat" | "calling" | undefined) => ParamT extends Selector ? ReturnType<ParamT> : undefined;
+export declare const useSelector: <ParamT extends Selector | undefined>(selector: ParamT, selectorProps?: (ParamT extends Selector ? Parameters<ParamT>[1] : undefined) | undefined, type?: 'calling' | 'chat') => ParamT extends Selector ? ReturnType<ParamT> : undefined;
 
 /**
  * Hook to obtain {@link @azure/communication-calling#TeamsCall} from the provider.

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

@@ -176,7 +176,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.0-alpha-202312050013';
+var telemetryVersion = '1.11.0-alpha-202312070013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5866,7 +5866,8 @@ const lightTheme = {
         neutralPrimary: '#323130',
         neutralDark: '#201f1e',
         black: '#000000',
-        white: '#ffffff'
+        white: '#ffffff',
+        whiteTranslucent40: 'rgba(255, 255, 255, 0.4)'
     },
     callingPalette: {
         callRed: '#a42e43',
@@ -5916,7 +5917,8 @@ const darkTheme = {
         neutralPrimary: '#ffffff',
         neutralDark: '#f4f4f4',
         black: '#f8f8f8',
-        white: '#252423'
+        white: '#252423',
+        whiteTranslucent40: 'rgba(0, 0, 0, 0.4)'
     },
     callingPalette: {
         callRed: '#c4314b',
@@ -11587,8 +11589,7 @@ const participantStateStringStyles$1 = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     lineHeight: 'normal',
-    paddingLeft: '1rem',
-    marginLeft: 'auto',
+    marginLeft: '0.5rem',
     marginRight: 0
 };
 /**
@@ -28328,7 +28329,6 @@ const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;
 /** @private */
 const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;
 const LOGO_HEIGHT_REM = 3;
-const LOGO_MARGIN_BOTTOM_REM = 1;
 /**
  * @private
  */
@@ -28339,6 +28339,12 @@ const configurationStackTokensDesktop = {
  * @private
  */
 const configurationStackTokensMobile = {
+    childrenGap: '0.5rem'
+};
+/**
+ * @private
+ */
+const deviceConfigurationStackTokens = {
     childrenGap: '1.5rem'
 };
 /** @private */
@@ -28346,7 +28352,7 @@ const configurationContainerStyle = (desktop, backgroundImageUrl) => ({
     root: {
         height: '100%',
         width: '100%',
-        padding: '2rem 1rem 2rem 1rem',
+        padding: desktop ? '2rem 1rem 2rem 1rem' : '1rem 1rem 2rem 1rem',
         minWidth: desktop
             ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2
             : '16rem',
@@ -28399,20 +28405,36 @@ const selectionContainerStyle = (theme) => react.mergeStyles({
 /**
  * @private
  */
-const titleContainerStyleDesktop = react.mergeStyles({
-    fontSize: '1.25rem',
-    lineHeight: '1.75rem',
+const titleContainerStyleDesktop = (theme) => react.mergeStyles({
+    fontSize: '1.2rem',
+    lineHeight: '1rem',
     fontWeight: 600
-});
+}, configurationPageTextDecoration(theme));
 /**
  * @private
  */
-const titleContainerStyleMobile = react.mergeStyles({
+const titleContainerStyleMobile = (theme) => react.mergeStyles({
     fontSize: '1.0625rem',
     lineHeight: '1.375rem',
     fontWeight: 600,
     textAlign: 'center'
-});
+}, configurationPageTextDecoration(theme));
+/**
+ * Ensure configuration page text is legible on top of a background image.
+ * @private
+ */
+const configurationPageTextDecoration = (theme) => {
+    return {
+        textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,
+        fill: theme.semanticColors.bodyText,
+        stroke: theme.palette.whiteTranslucent40,
+        paintOrder: 'stroke fill',
+        strokeWidth: _pxToRem(1.5),
+        text: {
+            letterSpacing: '-0.02rem' // cope with extra width due to stroke width
+        }
+    };
+};
 /**
  * @private
  */
@@ -28425,8 +28447,7 @@ const callDetailsContainerStyles = {
 };
 const callDetailsStyle = {
     fontSize: '0.9375',
-    lineHeight: '1.25rem',
-    marginTop: '0.25rem'
+    lineHeight: '1.25rem'
 };
 /**
  * @private
@@ -28435,7 +28456,7 @@ const callDetailsStyleDesktop = react.mergeStyles(Object.assign({}, callDetailsS
 /**
  * @private
  */
-const callDetailsStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, callDetailsStyle), { textAlign: 'center' }));
+const callDetailsStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, callDetailsStyle), { marginBottom: '0.5rem', textAlign: 'center' }));
 /**
  * @private
  */
@@ -28521,7 +28542,7 @@ const configurationCenteredContent = (fillsHeight, hasLogo) => react.mergeStyles
     // in and not shift the content. To exclude the logo, we subtract the logo height
     // and margin from the actual height. This allows the flex box's natural centering
     // to appropriately center the content.
-    height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM + LOGO_MARGIN_BOTTOM_REM}rem` : '0rem'})`
+    height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM}rem` : '0rem'})`
 });
 /** @private */
 const panelStyles = {
@@ -28551,13 +28572,13 @@ const logoStyles = (shape) => ({
     root: {
         overflow: 'initial',
         display: 'flex',
-        justifyContent: 'center',
-        marginBottom: `${LOGO_MARGIN_BOTTOM_REM}rem`
+        justifyContent: 'center'
     },
     image: {
-        borderRadius: shape === 'circle' ? '100%' : undefined,
         height: `${LOGO_HEIGHT_REM}rem`,
-        width: `${LOGO_HEIGHT_REM}rem` // width should match height
+        borderRadius: shape === 'circle' ? '100%' : undefined,
+        aspectRatio: shape === 'circle' ? '1 / 1' : undefined,
+        objectFit: shape === 'circle' ? 'cover' : undefined
     }
 });
 
@@ -29097,6 +29118,88 @@ const CallReadinessModalFallBack = (props) => {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * An SVG element component that wraps inner text to fit the width of the SVG.
+ * @private
+ */
+const SvgWithWordWrapping = (props) => {
+    const { width, text, lineHeightPx, bufferHeightPx } = props;
+    const svgRef = React.useRef(null);
+    const calculationTextElement = React.useRef(null);
+    const visibleTextElement = React.useRef(null);
+    const [height, setHeight] = React.useState(0);
+    // useLayoutEffect ensures that the calculationTextElement is rendered before being used for calculations.
+    // Using useLayoutEffect over useEffect ensures we do not get a layout shift when the visibleTextElement is rendered
+    // and the height is updated. This is because useLayoutEffect runs synchronously after DOM mutations but
+    // before the browser has a chance to paint. See https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+    // for more details.
+    React.useLayoutEffect(() => {
+        if (text && calculationTextElement.current && visibleTextElement.current) {
+            const numLines = convertTextToWrappedText(calculationTextElement.current, visibleTextElement.current, width, lineHeightPx);
+            setHeight(numLines * lineHeightPx);
+        }
+    }, [width, lineHeightPx, text]);
+    return (React__default["default"].createElement("svg", { width: width, height: height + bufferHeightPx, ref: svgRef, xmlns: "http://www.w3.org/2000/svg" },
+        React__default["default"].createElement("text", { height: 0, ref: calculationTextElement, style: { visibility: 'hidden' } }, text),
+        React__default["default"].createElement("text", { ref: visibleTextElement, x: "0", y: bufferHeightPx / 4, role: "heading", "aria-level": 1 })));
+};
+/**
+ * Wrap text in tspan elements to fit the width of the SVG
+ * @param baseTextElement The text element to create the wrapped text from.
+ * @param outputTextElement The text element to insert the wrapped text into.
+ * @param maxWidth The maximum width of the text element.
+ * @param lineHeightPx The height of each line in pixels.
+ * @returns The number of lines of text.
+ */
+const convertTextToWrappedText = (inputTextElement, outputTextElement, maxWidth, lineHeightPx) => {
+    var _a, _b;
+    const words = (_b = (_a = inputTextElement.textContent) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+    if (words.length === 0 || words[0] === '') {
+        throw new Error('Text element must contain text');
+    }
+    // The current line being built.
+    let line = '';
+    // Running total of the number of lines.
+    let numLines = 0;
+    // First, clear the output text element.
+    outputTextElement.textContent = '';
+    // Iterate through each word and create a tspan element for each line.
+    for (let i = 0; i < words.length; i++) {
+        const testLine = line + words[i] + ' ';
+        const testWidth = inputTextElement.getSubStringLength(0, testLine.length);
+        if (testWidth > maxWidth && i > 0) {
+            const newLine = constructTSpanLine(line, lineHeightPx);
+            outputTextElement.appendChild(newLine);
+            line = words[i] + ' ';
+            numLines++;
+        }
+        else {
+            line = testLine;
+        }
+    }
+    // Add the last line.
+    const newLine = constructTSpanLine(line, lineHeightPx);
+    outputTextElement.appendChild(newLine);
+    numLines++;
+    // Return the number of lines to calculate the height of the SVG.
+    return numLines;
+};
+/**
+ * Create a tspan element for a line of text, with text set to be centered.
+ * @param line The line of text.
+ * @param lineHeightPx The height of each line in pixels.
+ * @returns The tspan element.
+ */
+const constructTSpanLine = (line, lineHeightPx) => {
+    const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+    tspan.textContent = line;
+    tspan.setAttribute('x', '50%');
+    tspan.setAttribute('dy', _pxToRem(lineHeightPx));
+    tspan.setAttribute('text-anchor', 'middle');
+    return tspan;
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -29166,7 +29269,8 @@ const ConfigurationPage = (props) => {
         }
     }
     const locale = useLocale();
-    const title = (React__default["default"].createElement(react.Stack.Item, { className: mobileView ? titleContainerStyleMobile : titleContainerStyleDesktop, role: "heading", "aria-level": 1 }, locale.strings.call.configurationPageTitle));
+    const title = locale.strings.call.configurationPageTitle.length > 0 ? (React__default["default"].createElement(react.Stack.Item, { className: mobileView ? titleContainerStyleMobile(theme) : titleContainerStyleDesktop(theme) },
+        React__default["default"].createElement(SvgWithWordWrapping, { width: mobileView ? 325 : 445, lineHeightPx: 16 * 1.5, bufferHeightPx: 16, text: locale.strings.call.configurationPageTitle }))) : (React__default["default"].createElement(React__default["default"].Fragment, null));
     const callDescription = locale.strings.call.configurationPageCallDetails && (React__default["default"].createElement(react.Stack.Item, { className: mobileView ? callDetailsStyleMobile : callDetailsStyleDesktop }, locale.strings.call.configurationPageCallDetails));
     let mobileWithPreview = mobileView;
     /* @conditional-compile-remove(rooms) */
@@ -29265,7 +29369,7 @@ const ConfigurationPage = (props) => {
                         logo: props.logo }),
                     title,
                     callDescription),
-                React__default["default"].createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: configurationStackTokensMobile },
+                React__default["default"].createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: deviceConfigurationStackTokens },
                     localPreviewTrampoline(mobileWithPreview, 
                     /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
                     React__default["default"].createElement(react.Stack, { styles: mobileView ? undefined : configurationSectionStyle },
@@ -29306,11 +29410,10 @@ const micPermissionGrantedTrampoline = (microphonePermissionGranted, audioState)
     return audioState && audioState !== 'unsupported' ? audioState === 'granted' : microphonePermissionGranted;
 };
 const Logo = (props) => {
-    var _a;
     if (!props.logo) {
         return React__default["default"].createElement(React__default["default"].Fragment, null);
     }
-    return React__default["default"].createElement(react.Image, { styles: logoStyles((_a = props.logo.shape) !== null && _a !== void 0 ? _a : 'circle'), src: props.logo.url, alt: props.logo.alt });
+    return React__default["default"].createElement(react.Image, { styles: logoStyles(props.logo.shape), src: props.logo.url, alt: props.logo.alt });
 };
 
 // Copyright (c) Microsoft Corporation.