@azure/communication-react 1.24.0 → 1.25.0-alpha-202502170018

package/dist/dist-esm/react-composites/src/composites/common/CallingDialpad.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallingDialpad.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CallingDialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAiB,EAAE,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9F,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,MAAM;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,YAAY,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;SAC9D;QACD,KAAK,EAAE;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YACpC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;YACpC,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;YACvC,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACrC;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9E,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;QACzC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACrC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,UAAU;KACpB;IACD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IModalStyles, Theme } from '@fluentui/react';\nimport { DialpadStyles } from '@internal/react-components';\n\n/**\n * @private\n */\nexport const themeddialpadModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n  main: {\n    borderRadius: theme.effects.roundedCorner6,\n    padding: '1rem'\n  }\n});\n\n/**\n * @private\n */\nexport const themedDialpadStyle = (isMobile: boolean, theme: Theme): Partial<DialpadStyles> => ({\n  root: {\n    padding: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    maxWidth: '100%'\n  },\n  textField: {\n    root: {\n      borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`\n    },\n    field: {\n      backgroundColor: theme.palette.white,\n      fontSize: theme.fonts.large.fontSize,\n      padding: '0 0.5rem',\n      textAlign: isMobile ? 'center' : 'left',\n      ':active': {\n        padding: '0 0.5rem'\n      }\n    }\n  },\n  deleteIcon: {\n    root: {\n      backgroundColor: theme.palette.white\n    }\n  },\n  digit: {\n    color: theme.palette.themeDarkAlt\n  }\n});\n\n/**\n * @private\n */\nexport const themedCallButtonStyle = (theme: Theme): Partial<IButtonStyles> => ({\n  root: {\n    fontWeight: theme.fonts.medium.fontWeight,\n    fontSize: theme.fonts.medium.fontSize,\n    width: '100%',\n    height: '2.5rem',\n    borderRadius: 3,\n    padding: '0.625rem'\n  },\n  textContainer: {\n    display: 'contents'\n  }\n});"]}
+{"version":3,"file":"CallingDialpad.styles.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingDialpad.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAMlC;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,QAAiB,EAAE,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9F,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,MAAM;KACjB;IACD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,YAAY,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;SAC9D;QACD,KAAK,EAAE;YACL,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YACpC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;YACpC,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;YACvC,SAAS,EAAE;gBACT,OAAO,EAAE,UAAU;aACpB;SACF;KACF;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;SACrC;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;KAClC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAA0B,EAAE,CAAC,CAAC;IAC9E,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;QACzC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QACrC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,UAAU;KACpB;IACD,aAAa,EAAE;QACb,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IModalStyles, Theme } from '@fluentui/react';\n\nimport { DialpadStyles } from '@internal/react-components';\n\n/**\n * @private\n */\nexport const themeddialpadModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n  main: {\n    borderRadius: theme.effects.roundedCorner6,\n    padding: '1rem'\n  }\n});\n\n/**\n * @private\n */\nexport const themedDialpadStyle = (isMobile: boolean, theme: Theme): Partial<DialpadStyles> => ({\n  root: {\n    padding: 0,\n    marginLeft: 0,\n    marginRight: 0,\n    maxWidth: '100%'\n  },\n  textField: {\n    root: {\n      borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`\n    },\n    field: {\n      backgroundColor: theme.palette.white,\n      fontSize: theme.fonts.large.fontSize,\n      padding: '0 0.5rem',\n      textAlign: isMobile ? 'center' : 'left',\n      ':active': {\n        padding: '0 0.5rem'\n      }\n    }\n  },\n  deleteIcon: {\n    root: {\n      backgroundColor: theme.palette.white\n    }\n  },\n  digit: {\n    color: theme.palette.themeDarkAlt\n  }\n});\n\n/**\n * @private\n */\nexport const themedCallButtonStyle = (theme: Theme): Partial<IButtonStyles> => ({\n  root: {\n    fontWeight: theme.fonts.medium.fontWeight,\n    fontSize: theme.fonts.medium.fontSize,\n    width: '100%',\n    height: '2.5rem',\n    borderRadius: 3,\n    padding: '0.625rem'\n  },\n  textContainer: {\n    display: 'contents'\n  }\n});\n"]}

package/dist/dist-esm/react-composites/src/composites/common/CallingRealTimeTextModal.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/** @private */
+export declare const CallingRealTimeTextModal: (props: {
+    /** The flag to show the modal */
+    showModal?: boolean;
+    /** The function to dismiss the modal */
+    onDismissModal?: () => void;
+    /** The function to start RealTimeText */
+    onStartRealTimeText?: () => void;
+}) => JSX.Element;
+export {};
+//# sourceMappingURL=CallingRealTimeTextModal.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/CallingRealTimeTextModal.js

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(rtt) */
+import React from 'react';
+/* @conditional-compile-remove(rtt) */
+import { RealTimeTextModal } from "../../../../react-components/src";
+/* @conditional-compile-remove(rtt) */
+import { useLocale } from '../localization';
+/* @conditional-compile-remove(rtt) */
+/** @private */
+export const CallingRealTimeTextModal = (props) => {
+    const strings = useLocale().strings.call;
+    const modalStrings = {
+        realTimeTextModalTitle: strings.realTimeTextModalTitle,
+        realTimeTextModalText: strings.realTimeTextModalText,
+        realTimeTextConfirmButtonLabel: strings.realTimeTextConfirmButtonLabel,
+        realTimeTextCancelButtonLabel: strings.realTimeTextCancelButtonLabel,
+        realTimeTextModalAriaLabel: strings.realTimeTextModalAriaLabel,
+        realTimeTextCloseModalButtonAriaLabel: strings.realTimeTextCloseModalButtonAriaLabel
+    };
+    return (React.createElement(RealTimeTextModal, { strings: modalStrings, showModal: props.showModal, onDismissModal: props.onDismissModal, onStartRealTimeText: props.onStartRealTimeText }));
+};
+//# sourceMappingURL=CallingRealTimeTextModal.js.map

package/dist/dist-esm/react-composites/src/composites/common/CallingRealTimeTextModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallingRealTimeTextModal.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CallingRealTimeTextModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,sCAAsC;AACtC,OAAO,EAAE,iBAAiB,EAA4B,yCAAmC;AACzF,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,sCAAsC;AACtC,eAAe;AACf,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAOxC,EAAe,EAAE;IAChB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;IACzC,MAAM,YAAY,GAA6B;QAC7C,sBAAsB,EAAE,OAAO,CAAC,sBAAsB;QACtD,qBAAqB,EAAE,OAAO,CAAC,qBAAqB;QACpD,8BAA8B,EAAE,OAAO,CAAC,8BAA8B;QACtE,6BAA6B,EAAE,OAAO,CAAC,6BAA6B;QACpE,0BAA0B,EAAE,OAAO,CAAC,0BAA0B;QAC9D,qCAAqC,EAAE,OAAO,CAAC,qCAAqC;KACrF,CAAC;IAEF,OAAO,CACL,oBAAC,iBAAiB,IAChB,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,GAC9C,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n/* @conditional-compile-remove(rtt) */\nimport React from 'react';\n/* @conditional-compile-remove(rtt) */\nimport { RealTimeTextModal, RealTimeTextModalStrings } from '@internal/react-components';\n/* @conditional-compile-remove(rtt) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(rtt) */\n/** @private */\nexport const CallingRealTimeTextModal = (props: {\n  /** The flag to show the modal */\n  showModal?: boolean;\n  /** The function to dismiss the modal */\n  onDismissModal?: () => void;\n  /** The function to start RealTimeText */\n  onStartRealTimeText?: () => void;\n}): JSX.Element => {\n  const strings = useLocale().strings.call;\n  const modalStrings: RealTimeTextModalStrings = {\n    realTimeTextModalTitle: strings.realTimeTextModalTitle,\n    realTimeTextModalText: strings.realTimeTextModalText,\n    realTimeTextConfirmButtonLabel: strings.realTimeTextConfirmButtonLabel,\n    realTimeTextCancelButtonLabel: strings.realTimeTextCancelButtonLabel,\n    realTimeTextModalAriaLabel: strings.realTimeTextModalAriaLabel,\n    realTimeTextCloseModalButtonAriaLabel: strings.realTimeTextCloseModalButtonAriaLabel\n  };\n\n  return (\n    <RealTimeTextModal\n      strings={modalStrings}\n      showModal={props.showModal}\n      onDismissModal={props.onDismissModal}\n      onStartRealTimeText={props.onStartRealTimeText}\n    />\n  );\n};\n\nexport {};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/CalloutWithIcon.js

@@ -6,12 +6,10 @@ import { FontIcon } from '@fluentui/react';
 import React from 'react';
 /** @private */
 export const CalloutWithIcon = (props) => {
-    return React.createElement(Callout, { styles: calloutStyle, target: `#${props.targetId}`, directionalHint: DirectionalHint.topCenter, beakWidth: BEAK_WIDTH_PX, gapSpace: GAP_SPACE_PX, doNotLayer: props.doNotLayer },
-        React.createElement(Stack, { horizontal: true, styles: calloutRootStackStyle, tokens: {
-                childrenGap: '0.375rem'
-            } },
+    return (React.createElement(Callout, { styles: calloutStyle, target: `#${props.targetId}`, directionalHint: DirectionalHint.topCenter, beakWidth: BEAK_WIDTH_PX, gapSpace: GAP_SPACE_PX, doNotLayer: props.doNotLayer },
+        React.createElement(Stack, { horizontal: true, styles: calloutRootStackStyle, tokens: { childrenGap: '0.375rem' } },
             React.createElement(FontIcon, { iconName: "Checkmark", className: iconClass }),
-            React.createElement(Text, null, props.text)));
+            React.createElement(Text, null, props.text))));
 };
 const calloutStyle = {
     root: {

package/dist/dist-esm/react-composites/src/composites/common/CalloutWithIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalloutWithIcon.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CalloutWithIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrF,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,OAAO,oBAAC,OAAO,IAAC,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,eAAe,EAAE,eAAe,CAAC,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU;QAC1L,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,qBAAqB,EAAE,MAAM,EAAE;gBACzD,WAAW,EAAE,UAAU;aACxB;YACG,oBAAC,QAAQ,IAAC,QAAQ,EAAC,WAAW,EAAC,SAAS,EAAE,SAAS,GAAI;YACvD,oBAAC,IAAI,QAAE,KAAK,CAAC,IAAI,CAAQ,CACnB,CACA,CAAC;AACf,CAAC,CAAC;AACF,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,kCAAkC;QAC3C,YAAY,EAAE,SAAS;KACxB;IACD,WAAW,EAAE;QACX,YAAY,EAAE,SAAS;KACxB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AACF,MAAM,qBAAqB,GAAG;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC;AACF,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,YAAY,GAAG,CAAC,CAAC;AACvB,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, DirectionalHint, mergeStyles, Stack, Text } from '@fluentui/react';\n// eslint-disable-next-line no-restricted-imports\nimport { FontIcon } from '@fluentui/react';\nimport React from 'react';\n\n/** @private */\nexport interface CalloutWithIconProps {\n  targetId: string;\n  text?: string;\n  doNotLayer?: boolean;\n}\n\n/** @private */\nexport const CalloutWithIcon = (props: CalloutWithIconProps): JSX.Element => {\n  return <Callout styles={calloutStyle} target={`#${props.targetId}`} directionalHint={DirectionalHint.topCenter} beakWidth={BEAK_WIDTH_PX} gapSpace={GAP_SPACE_PX} doNotLayer={props.doNotLayer}>\n      <Stack horizontal styles={calloutRootStackStyle} tokens={{\n      childrenGap: '0.375rem'\n    }}>\n        <FontIcon iconName=\"Checkmark\" className={iconClass} />\n        <Text>{props.text}</Text>\n      </Stack>\n    </Callout>;\n};\nconst calloutStyle = {\n  root: {\n    padding: '0.375rem 0.75rem 0.375rem 0.5rem',\n    borderRadius: '0.25rem'\n  },\n  beakCurtain: {\n    borderRadius: '0.25rem'\n  },\n  container: {\n    zIndex: 0\n  }\n};\nconst calloutRootStackStyle = {\n  root: {\n    display: 'flex',\n    alignItems: 'center'\n  }\n};\nconst BEAK_WIDTH_PX = 8;\nconst GAP_SPACE_PX = 2;\nconst iconClass = mergeStyles({\n  fontSize: 18\n});"]}
+{"version":3,"file":"CalloutWithIcon.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CalloutWithIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrF,iDAAiD;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,OAAO,CACL,oBAAC,OAAO,IACN,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,IAAI,KAAK,CAAC,QAAQ,EAAE,EAC5B,eAAe,EAAE,eAAe,CAAC,SAAS,EAC1C,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,KAAK,CAAC,UAAU;QAE5B,oBAAC,KAAK,IAAC,UAAU,QAAC,MAAM,EAAE,qBAAqB,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE;YAClF,oBAAC,QAAQ,IAAC,QAAQ,EAAC,WAAW,EAAC,SAAS,EAAE,SAAS,GAAI;YACvD,oBAAC,IAAI,QAAE,KAAK,CAAC,IAAI,CAAQ,CACnB,CACA,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,kCAAkC;QAC3C,YAAY,EAAE,SAAS;KACxB;IACD,WAAW,EAAE;QACX,YAAY,EAAE,SAAS;KACxB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AAEF,MAAM,qBAAqB,GAAG;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,CAAC;AAExB,MAAM,YAAY,GAAG,CAAC,CAAC;AAEvB,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Callout, DirectionalHint, mergeStyles, Stack, Text } from '@fluentui/react';\n// eslint-disable-next-line no-restricted-imports\nimport { FontIcon } from '@fluentui/react';\nimport React from 'react';\n\n/** @private */\nexport interface CalloutWithIconProps {\n  targetId: string;\n  text?: string;\n  doNotLayer?: boolean;\n}\n\n/** @private */\nexport const CalloutWithIcon = (props: CalloutWithIconProps): JSX.Element => {\n  return (\n    <Callout\n      styles={calloutStyle}\n      target={`#${props.targetId}`}\n      directionalHint={DirectionalHint.topCenter}\n      beakWidth={BEAK_WIDTH_PX}\n      gapSpace={GAP_SPACE_PX}\n      doNotLayer={props.doNotLayer}\n    >\n      <Stack horizontal styles={calloutRootStackStyle} tokens={{ childrenGap: '0.375rem' }}>\n        <FontIcon iconName=\"Checkmark\" className={iconClass} />\n        <Text>{props.text}</Text>\n      </Stack>\n    </Callout>\n  );\n};\n\nconst calloutStyle = {\n  root: {\n    padding: '0.375rem 0.75rem 0.375rem 0.5rem',\n    borderRadius: '0.25rem'\n  },\n  beakCurtain: {\n    borderRadius: '0.25rem'\n  },\n  container: {\n    zIndex: 0\n  }\n};\n\nconst calloutRootStackStyle = {\n  root: {\n    display: 'flex',\n    alignItems: 'center'\n  }\n};\n\nconst BEAK_WIDTH_PX = 8;\n\nconst GAP_SPACE_PX = 2;\n\nconst iconClass = mergeStyles({\n  fontSize: 18\n});\n"]}

package/dist/dist-esm/react-composites/src/composites/common/CaptionsBannerMoreButton.d.ts

@@ -1,11 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import { ControlBarButtonProps } from "../../../../react-components/src";
-import { FocusableElement } from './types/FocusableElement';
 /** @private */
 export interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {
     onCaptionsSettingsClick?: () => void;
-    /** Element to return focus to when the Captions Banner is closed */
-    returnFocusRef?: React.RefObject<FocusableElement>;
 }
 /**
  *

package/dist/dist-esm/react-composites/src/composites/common/CaptionsBannerMoreButton.js

@@ -36,23 +36,23 @@ export const CaptionsBannerMoreButton = (props) => {
         });
     }), [startCaptionsButtonProps]);
     const stopCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
         yield startCaptionsButtonProps.onStopCaptions();
-        (_b = (_a = props.returnFocusRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
-    }), [startCaptionsButtonProps, props.returnFocusRef]);
+    }), [startCaptionsButtonProps]);
     moreButtonContextualMenuItems.push({
         key: 'ToggleCaptionsKey',
-        text: startCaptionsButtonProps.checked ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+        text: startCaptionsButtonProps.checked
+            ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
+            : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
         onClick: () => {
-            startCaptionsButtonProps.checked ? stopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+            startCaptionsButtonProps.checked
+                ? stopCaptions()
+                : startCaptionsButtonProps.currentSpokenLanguage !== ''
+                    ? startCaptions()
+                    : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
         },
         iconProps: {
             iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
-            styles: {
-                root: {
-                    lineHeight: 0
-                }
-            }
+            styles: { root: { lineHeight: 0 } }
         },
         itemProps: {
             styles: buttonFlyoutIncreasedSizeStyles
@@ -66,11 +66,7 @@ export const CaptionsBannerMoreButton = (props) => {
             onClick: props.onCaptionsSettingsClick,
             iconProps: {
                 iconName: 'CaptionsSettingsIcon',
-                styles: {
-                    root: {
-                        lineHeight: 0
-                    }
-                }
+                styles: { root: { lineHeight: 0 } }
             },
             itemProps: {
                 styles: buttonFlyoutIncreasedSizeStyles
@@ -78,13 +74,11 @@ export const CaptionsBannerMoreButton = (props) => {
             disabled: !startCaptionsButtonProps.checked
         });
     }
-    return React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "captions-banner-more-button", strings: moreButtonStrings, menuIconProps: {
-            hidden: true
-        }, menuProps: {
+    return (React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "captions-banner-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
             items: moreButtonContextualMenuItems,
             calloutProps: {
                 preventDismissOnEvent: _preventDismissOnEvent
             }
-        } }));
+        } })));
 };
 //# sourceMappingURL=CaptionsBannerMoreButton.js.map

package/dist/dist-esm/react-composites/src/composites/common/CaptionsBannerMoreButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBannerMoreButton.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/CaptionsBannerMoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport { useCallback } from 'react';\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { StartCaptionsButton } from '@internal/react-components';\nimport { useMemo } from 'react';\nimport { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';\nimport { useLocale } from '../localization';\nimport { MoreButton } from './MoreButton';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { FocusableElement } from './types/FocusableElement';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {\n  onCaptionsSettingsClick?: () => void;\n\n  /** Element to return focus to when the Captions Banner is closed */\n  returnFocusRef?: React.RefObject<FocusableElement>;\n}\n\n/**\n *\n * @private\n */\nexport const CaptionsBannerMoreButton = (props: CaptionsBannerMoreButtonProps): JSX.Element => {\n  const localeStrings = useLocale();\n  const startCaptionsButtonProps = usePropsFor(StartCaptionsButton);\n  const moreButtonStrings = useMemo(() => ({\n    label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,\n    tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip\n  }), [localeStrings]);\n  const moreButtonContextualMenuItems: IContextualMenuItem[] = [];\n  const startCaptions = useCallback(async () => {\n    await startCaptionsButtonProps.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonProps]);\n  const stopCaptions = useCallback(async () => {\n    await startCaptionsButtonProps.onStopCaptions();\n    props.returnFocusRef?.current?.focus();\n  }, [startCaptionsButtonProps, props.returnFocusRef]);\n  moreButtonContextualMenuItems.push({\n    key: 'ToggleCaptionsKey',\n    text: startCaptionsButtonProps.checked ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n    onClick: () => {\n      startCaptionsButtonProps.checked ? stopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();\n    },\n    iconProps: {\n      iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',\n      styles: {\n        root: {\n          lineHeight: 0\n        }\n      }\n    },\n    itemProps: {\n      styles: buttonFlyoutIncreasedSizeStyles\n    }\n  });\n  if (props.onCaptionsSettingsClick) {\n    moreButtonContextualMenuItems.push({\n      key: 'openCaptionsSettingsKey',\n      id: 'common-call-composite-captions-settings-button',\n      text: localeStrings.strings.call.captionsSettingsLabel,\n      onClick: props.onCaptionsSettingsClick,\n      iconProps: {\n        iconName: 'CaptionsSettingsIcon',\n        styles: {\n          root: {\n            lineHeight: 0\n          }\n        }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: !startCaptionsButtonProps.checked\n    });\n  }\n  return <MoreButton {...props} data-ui-id=\"captions-banner-more-button\" strings={moreButtonStrings} menuIconProps={{\n    hidden: true\n  }} menuProps={{\n    items: moreButtonContextualMenuItems,\n    calloutProps: {\n      preventDismissOnEvent: _preventDismissOnEvent\n    }\n  }} />;\n};"]}
+{"version":3,"file":"CaptionsBannerMoreButton.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsBannerMoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport { useCallback } from 'react';\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { StartCaptionsButton } from '@internal/react-components';\nimport { useMemo } from 'react';\nimport { buttonFlyoutIncreasedSizeStyles } from '../CallComposite/styles/Buttons.styles';\nimport { useLocale } from '../localization';\nimport { MoreButton } from './MoreButton';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { usePropsFor } from '../CallComposite/hooks/usePropsFor';\n\n/** @private */\nexport interface CaptionsBannerMoreButtonProps extends ControlBarButtonProps {\n  onCaptionsSettingsClick?: () => void;\n}\n\n/**\n *\n * @private\n */\nexport const CaptionsBannerMoreButton = (props: CaptionsBannerMoreButtonProps): JSX.Element => {\n  const localeStrings = useLocale();\n  const startCaptionsButtonProps = usePropsFor(StartCaptionsButton);\n  const moreButtonStrings = useMemo(\n    () => ({\n      label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,\n      tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip\n    }),\n    [localeStrings]\n  );\n\n  const moreButtonContextualMenuItems: IContextualMenuItem[] = [];\n\n  const startCaptions = useCallback(async () => {\n    await startCaptionsButtonProps.onStartCaptions({\n      spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage\n    });\n  }, [startCaptionsButtonProps]);\n\n  const stopCaptions = useCallback(async () => {\n    await startCaptionsButtonProps.onStopCaptions();\n  }, [startCaptionsButtonProps]);\n\n  moreButtonContextualMenuItems.push({\n    key: 'ToggleCaptionsKey',\n    text: startCaptionsButtonProps.checked\n      ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent\n      : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,\n    onClick: () => {\n      startCaptionsButtonProps.checked\n        ? stopCaptions()\n        : startCaptionsButtonProps.currentSpokenLanguage !== ''\n          ? startCaptions()\n          : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();\n    },\n    iconProps: {\n      iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',\n      styles: { root: { lineHeight: 0 } }\n    },\n    itemProps: {\n      styles: buttonFlyoutIncreasedSizeStyles\n    }\n  });\n\n  if (props.onCaptionsSettingsClick) {\n    moreButtonContextualMenuItems.push({\n      key: 'openCaptionsSettingsKey',\n      id: 'common-call-composite-captions-settings-button',\n      text: localeStrings.strings.call.captionsSettingsLabel,\n      onClick: props.onCaptionsSettingsClick,\n      iconProps: {\n        iconName: 'CaptionsSettingsIcon',\n        styles: { root: { lineHeight: 0 } }\n      },\n      itemProps: {\n        styles: buttonFlyoutIncreasedSizeStyles\n      },\n      disabled: !startCaptionsButtonProps.checked\n    });\n  }\n\n  return (\n    <MoreButton\n      {...props}\n      data-ui-id=\"captions-banner-more-button\"\n      strings={moreButtonStrings}\n      menuIconProps={{ hidden: true }}\n      menuProps={{\n        items: moreButtonContextualMenuItems,\n        calloutProps: {\n          preventDismissOnEvent: _preventDismissOnEvent\n        }\n      }}\n    />\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/ContainerRectProps.js

@@ -1,9 +1,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
-export const containerDivStyles = {
-    position: 'relative',
-    width: '100%',
-    height: '100%'
-};
+export const containerDivStyles = { position: 'relative', width: '100%', height: '100%' };
 //# sourceMappingURL=ContainerRectProps.js.map

package/dist/dist-esm/react-composites/src/composites/common/ContainerRectProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContainerRectProps.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/common/ContainerRectProps.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAUlC,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\n\n/** @private */\nexport type ContainerRectProps = {\n  containerHeight?: number;\n  containerWidth?: number;\n};\n\n/** @private */\nexport const containerDivStyles: IStyle = {\n  position: 'relative',\n  width: '100%',\n  height: '100%'\n};"]}
+{"version":3,"file":"ContainerRectProps.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ContainerRectProps.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAUlC,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } from '@fluentui/react';\n\n/** @private */\nexport type ContainerRectProps = {\n  containerHeight?: number;\n  containerWidth?: number;\n};\n\n/** @private */\nexport const containerDivStyles: IStyle = { position: 'relative', width: '100%', height: '100%' };\n"]}

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.d.ts

@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import { RefObject } from 'react';
 import { CallAdapter } from '../../CallComposite';
 import { IButton, ITheme } from '@fluentui/react';
 import { ControlBarButtonStyles } from "../../../../../react-components/src";
@@ -6,7 +6,6 @@ import { VideoGalleryLayout } from "../../../../../react-components/src";
 import { ContainerRectProps } from '../ContainerRectProps';
 import { CallWithChatControlOptions } from '../../CallWithChatComposite';
 import { CommonCallControlOptions } from '../types/CommonCallControlOptions';
-import { FocusableElement } from '../types/FocusableElement';
 /**
  * @private
  */
@@ -38,11 +37,15 @@ export interface CommonCallControlBarProps {
     onToggleTeamsMeetingConferenceModal?: () => void;
     teamsMeetingConferenceModalPresent?: boolean;
     sidePaneDismissButtonRef?: RefObject<IButton>;
+    onStartRealTimeText?: () => void;
+    startRealTimeTextButtonChecked?: boolean;
 }
+type CommonCallControlBarMergedProps = CommonCallControlBarProps & ContainerRectProps;
 /**
  * @private
  */
-export declare const CommonCallControlBar: React.ForwardRefExoticComponent<CommonCallControlBarProps & ContainerRectProps & React.RefAttributes<FocusableElement>>;
+export declare const CommonCallControlBar: (props: CommonCallControlBarMergedProps) => JSX.Element;
 /** @private */
 export declare const getDesktopCommonButtonStyles: (theme: ITheme) => ControlBarButtonStyles;
+export {};
 //# sourceMappingURL=CommonCallControlBar.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js

@@ -9,10 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useMemo, useRef, useEffect, useState, useCallback, useImperativeHandle, forwardRef } from 'react';
+import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';
 import { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';
 import { PeopleButton } from './PeopleButton';
 import { concatStyleSets, mergeStyles, mergeStyleSets, Stack, useTheme } from '@fluentui/react';
+/* @conditional-compile-remove(breakout-rooms) */
 import { PrimaryButton } from '@fluentui/react';
 import { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';
 import { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';
@@ -26,7 +27,6 @@ import { MoreButton } from '../MoreButton';
 import { CUSTOM_BUTTON_OPTIONS, generateCustomCallControlBarButton, onFetchCustomButtonPropsTrampoline } from './CustomButton';
 import { DesktopMoreButton } from './DesktopMoreButton';
 import { isDisabled, _isSafari } from '../../CallComposite/utils';
-import { HiddenFocusStartPoint } from '../HiddenFocusStartPoint';
 import { CallingCaptionsSettingsModal } from '../CallingCaptionsSettingsModal';
 import { RaiseHand } from '../../CallComposite/components/buttons/RaiseHand';
 import { Reaction } from '../../CallComposite/components/buttons/Reaction';
@@ -38,10 +38,14 @@ import { useLocale } from '../../localization';
 import { isBoolean } from '../utils';
 import { getEnvironmentInfo } from '../../CallComposite/selectors/baseSelectors';
 import { getIsTeamsCall } from '../../CallComposite/selectors/baseSelectors';
+/* @conditional-compile-remove(breakout-rooms) */
 import { getAssignedBreakoutRoom, getBreakoutRoomSettings } from '../../CallComposite/selectors/baseSelectors';
 import { callStatusSelector } from '../../CallComposite/selectors/callStatusSelector';
 import { MeetingConferencePhoneInfoModal } from "../../../../../react-components/src";
+/* @conditional-compile-remove(breakout-rooms) */
 import { Timer } from './Timer';
+/* @conditional-compile-remove(rtt) */
+import { CallingRealTimeTextModal } from '../CallingRealTimeTextModal';
 const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) => {
     if (commonCallControlOptions === false) {
         return false;
@@ -58,19 +62,10 @@ const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) =>
 /**
  * @private
  */
-export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef) => {
+export const CommonCallControlBar = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const theme = useTheme();
     const rtl = theme.rtl;
-    // Create an imperatively callable focus function to allow the parent component to focus the control bar any time.
-    const [hiddenFocusStartElementKey, setHiddenFocusStartElementKey] = useState(0);
-    useImperativeHandle(commonCallControlBarRef, () => ({
-        focus: () => {
-            // To move focus to the hidden element, we increment the key to force a re-mount of the HiddenFocusStartPoint component
-            // which relies on focusOnMount to move focus to the next interact-able element.
-            setHiddenFocusStartElementKey(prevKey => prevKey + 1);
-        }
-    }));
     const controlBarContainerRef = useRef(null);
     const sidepaneControlsRef = useRef(null);
     const controlBarSizeRef = useRef(null);
@@ -82,10 +77,14 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCommonCallControlOptions(props.mobileView, props.callControls);
     const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);
+    /* @conditional-compile-remove(rtt) */
+    const [showRealTimeTextModal, setShowRealTimeTextModal] = useState(false);
     // If the hangup capability is not present, we default to true
-    const isHangUpForEveryoneAllowed = (_a = useSelector(state => { var _a, _b; return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.hangUpForEveryOne.isPresent; })) !== null && _a !== void 0 ? _a : true;
+    const isHangUpForEveryoneAllowed = (_a = useSelector((state) => { var _a, _b; return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.hangUpForEveryOne.isPresent; })) !== null && _a !== void 0 ? _a : true;
     const isTeams = useSelector(getIsTeamsCall);
+    /* @conditional-compile-remove(breakout-rooms) */
     const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);
+    /* @conditional-compile-remove(breakout-rooms) */
     const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);
     const handleResize = useCallback(() => {
         setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
@@ -116,6 +115,14 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
     const openCaptionsSettingsModal = useCallback(() => {
         setShowCaptionsSettingsModal(true);
     }, []);
+    /* @conditional-compile-remove(rtt) */
+    const openRealTimeTextModal = useCallback(() => {
+        setShowRealTimeTextModal(true);
+    }, []);
+    /* @conditional-compile-remove(rtt) */
+    const onDismissRealTimeTextModal = useCallback(() => {
+        setShowRealTimeTextModal(false);
+    }, []);
     const onDismissCaptionsSettings = useCallback(() => {
         setShowCaptionsSettingsModal(false);
     }, []);
@@ -143,12 +150,17 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
     const environmentInfo = useSelector(getEnvironmentInfo);
     const isSafari = _isSafari(environmentInfo);
     useEffect(() => {
-        if (props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency && props.callAdapter.getState().deepNoiseSuppressionOnByDefault) {
+        if (props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
+            props.callAdapter.getState().deepNoiseSuppressionOnByDefault) {
             startDeepNoiseSuppression();
             setDeepNoiseSuppressionOn(true);
         }
     }, [props.callAdapter, startDeepNoiseSuppression]);
-    const showNoiseSuppressionButton = props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency && !props.callAdapter.getState().hideDeepNoiseSuppressionButton && !isSafari ? true : false;
+    const showNoiseSuppressionButton = props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
+        !props.callAdapter.getState().hideDeepNoiseSuppressionButton &&
+        !isSafari
+        ? true
+        : false;
     const onClickNoiseSuppression = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (isDeepNoiseSuppressionOn) {
             yield props.callAdapter.stopNoiseSuppressionEffect();
@@ -168,26 +180,32 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
             }
         });
     }, [props.mobileView, theme.semanticColors.bodyBackground]);
-    const screenShareButtonStyles = useMemo(() => !props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined, [props.mobileView, theme]);
-    const commonButtonStyles = useMemo(() => !props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined, [props.mobileView, theme]);
-    const endCallButtonStyles = useMemo(() => !props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined, [props.mobileView, theme]);
+    const screenShareButtonStyles = useMemo(() => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined), [props.mobileView, theme]);
+    const commonButtonStyles = useMemo(() => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined), [props.mobileView, theme]);
+    const endCallButtonStyles = useMemo(() => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined), [props.mobileView, theme]);
     const controlBarWrapperDesktopStyles = useMemo(
     // only center control bar buttons based on parent container if there are enough space on the screen and not mobile
-    () => !props.mobileView && !isOutOfSpace ? rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles : {}, [props.mobileView, rtl, isOutOfSpace]);
+    () => (!props.mobileView && !isOutOfSpace ? (rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}), [props.mobileView, rtl, isOutOfSpace]);
     // only center control bar buttons based on parent container if there are enough space on the screen and not mobile
-    const controlBarDesktopContainerStyles = useMemo(() => !props.mobileView && !isOutOfSpace ? {
-        position: 'relative',
-        minHeight: '4.5rem',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        paddingLeft: '1rem'
-    } : {}, [props.mobileView, isOutOfSpace]);
+    const controlBarDesktopContainerStyles = useMemo(() => !props.mobileView && !isOutOfSpace
+        ? {
+            position: 'relative',
+            minHeight: '4.5rem',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            paddingLeft: '1rem'
+        }
+        : {}, [props.mobileView, isOutOfSpace]);
     const customButtons = useMemo(() => generateCustomCallControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options === null || options === void 0 ? void 0 : options.displayType : undefined), [options]);
     const capabilitiesSelector = useSelector(capabilitySelector);
     const callState = useSelector(callStatusSelector);
-    const isReactionAllowed = callState.callStatus !== 'Connected' || !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) || capabilitiesSelector.capabilities.useReactions.isPresent;
+    const isReactionAllowed = callState.callStatus !== 'Connected' ||
+        !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) ||
+        capabilitiesSelector.capabilities.useReactions.isPresent;
+    /* @conditional-compile-remove(breakout-rooms) */
     const canReturnToMainMeeting = breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting === false;
+    /* @conditional-compile-remove(breakout-rooms) */
     const returnFromBreakoutRoom = useCallback(() => props.callAdapter.returnFromBreakoutRoom(), [props.callAdapter]);
     // when options is false then we want to hide the whole control bar.
     if (options === false) {
@@ -199,61 +217,94 @@ export const CommonCallControlBar = forwardRef((props, commonCallControlBarRef)
     const cameraButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.cameraButton);
     const showExitSpotlightButton = (options === null || options === void 0 ? void 0 : options.exitSpotlightButton) !== false;
     const showCaptionsButton = props.isCaptionsSupported && isEnabled(options.captionsButton);
+    /* @conditional-compile-remove(rtt) */
+    const showRealTimeTextButton = props.isRealTimeTextSupported;
     const showTeamsMeetingPhoneCallButton = isEnabled(options === null || options === void 0 ? void 0 : options.teamsMeetingPhoneCallButton);
-    const showDesktopMoreButton = isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) && (false || isEnabled(options === null || options === void 0 ? void 0 : options.holdButton) || showCaptionsButton || props.onUserSetGalleryLayout);
+    const showDesktopMoreButton = isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) &&
+        (false ||
+            isEnabled(options === null || options === void 0 ? void 0 : options.holdButton) ||
+            showCaptionsButton ||
+            props.onUserSetGalleryLayout ||
+            /* @conditional-compile-remove(rtt) */ showRealTimeTextButton);
     const role = (_b = props.callAdapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
     const hideRaiseHandButtonInRoomsCall = props.callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
     const reactionResources = props.callAdapter.getState().reactions;
-    return React.createElement("div", { ref: controlBarSizeRef },
+    return (React.createElement("div", { ref: controlBarSizeRef },
         React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
-            showCaptionsSettingsModal && React.createElement(CallingCaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn && props.useTeamsCaptions }),
-            props.teamsMeetingConferenceModalPresent && React.createElement(MeetingConferencePhoneInfoModal, { conferencePhoneInfoList: (_e = (_d = (_c = props.callAdapter.getState().call) === null || _c === void 0 ? void 0 : _c.meetingConference) === null || _d === void 0 ? void 0 : _d.conferencePhones) !== null && _e !== void 0 ? _e : [], showModal: props.teamsMeetingConferenceModalPresent, onDismissMeetingPhoneInfoSettings: props.onToggleTeamsMeetingConferenceModal })),
+            showCaptionsSettingsModal && (React.createElement(CallingCaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn && props.useTeamsCaptions })),
+            /* @conditional-compile-remove(rtt) */ showRealTimeTextModal && (React.createElement(CallingRealTimeTextModal, { showModal: showRealTimeTextModal, onDismissModal: onDismissRealTimeTextModal, onStartRealTimeText: props.onStartRealTimeText })),
+            props.teamsMeetingConferenceModalPresent && (React.createElement(MeetingConferencePhoneInfoModal, { conferencePhoneInfoList: (_e = (_d = (_c = props.callAdapter.getState().call) === null || _c === void 0 ? void 0 : _c.meetingConference) === null || _d === void 0 ? void 0 : _d.conferencePhones) !== null && _e !== void 0 ? _e : [], showModal: props.teamsMeetingConferenceModalPresent, onDismissMeetingPhoneInfoSettings: props.onToggleTeamsMeetingConferenceModal }))),
         React.createElement(Stack, { horizontal: true, reversed: !props.mobileView && !isOutOfSpace, horizontalAlign: "space-between", className: mergeStyles(callControlsContainerStyles, controlBarContainerStyles, controlBarDesktopContainerStyles) },
             React.createElement(Stack.Item, { grow: true, className: mergeStyles(controlBarWrapperDesktopStyles) },
                 React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
                     React.createElement(Stack, { horizontalAlign: "center" },
-                        React.createElement(HiddenFocusStartPoint, { key: hiddenFocusStartElementKey }),
                         React.createElement(Stack.Item, null,
                             React.createElement("div", { ref: controlBarContainerRef },
                                 React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
-                                    !props.mobileView && assignedBreakoutRoom && assignedBreakoutRoom.state === 'open' &&
+                                    /* @conditional-compile-remove(breakout-rooms) */
+                                    !props.mobileView &&
+                                        assignedBreakoutRoom &&
+                                        assignedBreakoutRoom.state === 'open' &&
                                         // Breakout room settings are only defined in a breakout room so we use this to ensure
                                         // the button is not shown when already in a breakout room
-                                        !breakoutRoomSettings && React.createElement(PrimaryButton, { text: callStrings.joinBreakoutRoomButtonLabel, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                                        !breakoutRoomSettings && (React.createElement(PrimaryButton, { text: callStrings.joinBreakoutRoomButtonLabel, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                                             assignedBreakoutRoom.join();
-                                        }), styles: commonButtonStyles }),
-                                    microphoneButtonIsEnabled && React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton), disableTooltip: props.mobileView, onClickNoiseSuppression: onClickNoiseSuppression, isDeepNoiseSuppressionOn: isDeepNoiseSuppressionOn, showNoiseSuppressionButton: showNoiseSuppressionButton }),
-                                    cameraButtonIsEnabled && React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, disabled: props.disableButtonsForHoldScreen || isDisabled(options.cameraButton), onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef, disableTooltip: props.mobileView }),
-                                    !props.mobileView && isReactionAllowed && isEnabled(options.reactionButton) && reactionResources && React.createElement(Reaction, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen, reactionResource: reactionResources }),
-                                    !props.mobileView && isEnabled(options.raiseHandButton) && !hideRaiseHandButtonInRoomsCall && React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton) }),
-                                    showDtmfDialerButton(options) && props.onSetDialpadPage !== undefined && React.createElement(DtmfDialpadButton, { styles: commonButtonStyles, displayType: options.displayType, onClick: () => {
+                                        }), styles: commonButtonStyles })),
+                                    microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton), disableTooltip: props.mobileView, onClickNoiseSuppression: onClickNoiseSuppression, isDeepNoiseSuppressionOn: isDeepNoiseSuppressionOn, showNoiseSuppressionButton: showNoiseSuppressionButton })),
+                                    cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, disabled: props.disableButtonsForHoldScreen || isDisabled(options.cameraButton), onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef, disableTooltip: props.mobileView })),
+                                    !props.mobileView &&
+                                        isReactionAllowed &&
+                                        isEnabled(options.reactionButton) &&
+                                        reactionResources && (React.createElement(Reaction, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen, reactionResource: reactionResources })),
+                                    !props.mobileView && isEnabled(options.raiseHandButton) && !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton) })),
+                                    showDtmfDialerButton(options) && props.onSetDialpadPage !== undefined && (React.createElement(DtmfDialpadButton, { styles: commonButtonStyles, displayType: options.displayType, onClick: () => {
                                             if (props.onSetDialpadPage !== undefined) {
                                                 props.onSetDialpadPage();
                                             }
-                                        } }),
-                                    showExitSpotlightButton && props.onStopLocalSpotlight && React.createElement(ExitSpotlightButton, { displayType: options.displayType, onClick: props.onStopLocalSpotlight, styles: commonButtonStyles, strings: exitSpotlightButtonStrings }),
-                                    screenShareButtonIsEnabled && React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) }), (_f = customButtons['primary']) === null || _f === void 0 ? void 0 :
-                                    _f.slice(0, props.mobileView ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
-                                        return React.createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact', disableTooltip: props.mobileView });
+                                        } })),
+                                    showExitSpotlightButton && props.onStopLocalSpotlight && (React.createElement(ExitSpotlightButton, { displayType: options.displayType, onClick: props.onStopLocalSpotlight, styles: commonButtonStyles, strings: exitSpotlightButtonStrings })),
+                                    screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) })), (_f = customButtons['primary']) === null || _f === void 0 ? void 0 :
+                                    _f.slice(0, props.mobileView
+                                        ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
+                                        : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
+                                        return (React.createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact', disableTooltip: props.mobileView }));
                                     }),
-                                    props.mobileView && React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage, disableTooltip: props.mobileView }),
-                                    !props.mobileView && showDesktopMoreButton && React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, callControls: props.callControls, isCaptionsSupported: showCaptionsButton, onCaptionsSettingsClick: openCaptionsSettingsModal, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayout, userSetGalleryLayout: props.userSetGalleryLayout, dtmfDialerPresent: props.dtmfDialerPresent, onSetDialpadPage: props.onSetDialpadPage, teamsMeetingPhoneCallEnable: showTeamsMeetingPhoneCallButton, onMeetingPhoneInfoClick: props.onToggleTeamsMeetingConferenceModal }),
-                                    React.createElement(EndCall, { displayType: "compact", mobileView: props.mobileView, styles: endCallButtonStyles, enableEndCallMenu: !isBoolean(props.callControls) && !isBoolean((_g = props.callControls) === null || _g === void 0 ? void 0 : _g.endCallButton) && !props.mobileView && isHangUpForEveryoneAllowed && !isTeams &&
-                                            // Temporary disable it for Teams call, since capability does not give the right value
+                                    props.mobileView && (React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage, disableTooltip: props.mobileView })),
+                                    !props.mobileView && showDesktopMoreButton && (React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, callControls: props.callControls, isCaptionsSupported: showCaptionsButton, 
+                                        /* @conditional-compile-remove(rtt) */
+                                        isRealTimeTextSupported: showRealTimeTextButton, onCaptionsSettingsClick: openCaptionsSettingsModal, 
+                                        /* @conditional-compile-remove(rtt) */
+                                        onStartRealTimeTextClick: openRealTimeTextModal, 
+                                        /* @conditional-compile-remove(rtt) */
+                                        startRealTimeTextButtonChecked: props.startRealTimeTextButtonChecked, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayout, userSetGalleryLayout: props.userSetGalleryLayout, dtmfDialerPresent: props.dtmfDialerPresent, onSetDialpadPage: props.onSetDialpadPage, teamsMeetingPhoneCallEnable: showTeamsMeetingPhoneCallButton, onMeetingPhoneInfoClick: props.onToggleTeamsMeetingConferenceModal })),
+                                    React.createElement(EndCall, { displayType: "compact", mobileView: props.mobileView, styles: endCallButtonStyles, enableEndCallMenu: !isBoolean(props.callControls) &&
+                                            !isBoolean((_g = props.callControls) === null || _g === void 0 ? void 0 : _g.endCallButton) &&
+                                            !props.mobileView &&
+                                            isHangUpForEveryoneAllowed &&
+                                            !isTeams && // Temporary disable it for Teams call, since capability does not give the right value
                                             ((_j = (_h = props.callControls) === null || _h === void 0 ? void 0 : _h.endCallButton) === null || _j === void 0 ? void 0 : _j.hangUpForEveryone) === 'endCallOptions' &&
                                             // Only show the end call menu when the call is connected, user should not be able to end the call for everyone
                                             // when they are not actively in the call to communicate they will.
-                                            callState.callStatus === 'Connected' && !canReturnToMainMeeting, disableEndCallModal: !isBoolean(props.callControls) && !isBoolean((_k = props.callControls) === null || _k === void 0 ? void 0 : _k.endCallButton) && ((_m = (_l = props.callControls) === null || _l === void 0 ? void 0 : _l.endCallButton) === null || _m === void 0 ? void 0 : _m.disableEndCallModal), returnFromBreakoutRoom: canReturnToMainMeeting ? returnFromBreakoutRoom : undefined }))))))),
-            !props.mobileView && sideButtonsPresent && React.createElement(Stack.Item, null,
+                                            callState.callStatus === 'Connected' &&
+                                            /* @conditional-compile-remove(breakout-rooms) */
+                                            !canReturnToMainMeeting, disableEndCallModal: !isBoolean(props.callControls) &&
+                                            !isBoolean((_k = props.callControls) === null || _k === void 0 ? void 0 : _k.endCallButton) &&
+                                            ((_m = (_l = props.callControls) === null || _l === void 0 ? void 0 : _l.endCallButton) === null || _m === void 0 ? void 0 : _m.disableEndCallModal), 
+                                        /* @conditional-compile-remove(breakout-rooms) */
+                                        returnFromBreakoutRoom: canReturnToMainMeeting ? returnFromBreakoutRoom : undefined }))))))),
+            !props.mobileView && sideButtonsPresent && (React.createElement(Stack.Item, null,
                 React.createElement("div", { ref: sidepaneControlsRef },
                     React.createElement(Stack, { horizontal: true, className: !props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined },
-                        isEnabled(options === null || options === void 0 ? void 0 : options.peopleButton) && React.createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage || props.disableButtonsForHoldScreen || isDisabled(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles, componentRef: props.peopleButtonRef, chatButtonPresent: isEnabled(options.chatButton), peoplePaneDismissButtonRef: props.sidePaneDismissButtonRef }), (_o = customButtons['secondary']) === null || _o === void 0 ? void 0 :
+                        isEnabled(options === null || options === void 0 ? void 0 : options.peopleButton) && (React.createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage ||
+                                props.disableButtonsForHoldScreen ||
+                                isDisabled(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles, componentRef: props.peopleButtonRef, chatButtonPresent: isEnabled(options.chatButton), peoplePaneDismissButtonRef: props.sidePaneDismissButtonRef })), (_o = customButtons['secondary']) === null || _o === void 0 ? void 0 :
                         _o.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
-                            return React.createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' });
-                        })))),
-            (breakoutRoomSettings === null || breakoutRoomSettings === void 0 ? void 0 : breakoutRoomSettings.roomEndTime) && !props.mobileView && !isOutOfSpace && React.createElement(Stack.Item, null,
-                React.createElement(Timer, { timeStampInfo: breakoutRoomSettings === null || breakoutRoomSettings === void 0 ? void 0 : breakoutRoomSettings.roomEndTime.toString() }))));
-});
+                            return (React.createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
+                        }))))),
+            /* @conditional-compile-remove(breakout-rooms) */
+            (breakoutRoomSettings === null || breakoutRoomSettings === void 0 ? void 0 : breakoutRoomSettings.roomEndTime) && !props.mobileView && !isOutOfSpace && (React.createElement(Stack.Item, null,
+                React.createElement(Timer, { timeStampInfo: breakoutRoomSettings === null || breakoutRoomSettings === void 0 ? void 0 : breakoutRoomSettings.roomEndTime.toString() }))))));
+};
 const desktopButtonContainerStyle = {
     padding: '0.75rem',
     columnGap: '0.5rem'
@@ -325,9 +376,7 @@ const getDesktopScreenShareButtonStyles = (theme) => {
         border: 'none',
         background: theme.palette.themePrimary,
         color: theme.palette.white,
-        '* > svg': {
-            fill: theme.palette.white
-        },
+        '* > svg': { fill: theme.palette.white },
         '@media (forced-colors: active)': {
             border: '1px solid',
             borderColor: theme.palette.black