@azure/communication-react 1.11.0-beta.1 → 1.11.0

package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/mutedNotificationSelector.d.ts

@@ -2,26 +2,7 @@ import * as reselect from 'reselect';
 /**
  * @private
  */
-export declare const mutedNotificationSelector: ((state: {
-    isLocalPreviewMicrophoneEnabled: boolean;
-    page: import("..").CallCompositePage;
-    unsupportedBrowserVersionsAllowed?: boolean | undefined;
-    userId: import("@azure/communication-common").CommunicationIdentifierKind;
-    displayName?: string | undefined;
-    call?: import("../../../../../calling-stateful-client/src").CallState | undefined;
-    devices: import("../../../../../calling-stateful-client/src").DeviceManagerState;
-    endedCall?: import("../../../../../calling-stateful-client/src").CallState | undefined;
-    isTeamsCall: boolean;
-    isRoomsCall: boolean;
-    latestErrors: import("../..").AdapterErrors;
-    alternateCallerId?: string | undefined;
-    environmentInfo?: import("@azure/communication-calling").EnvironmentInfo | undefined;
-    cameraStatus?: "On" | "Off" | undefined;
-    videoBackgroundImages?: import("..").VideoBackgroundImage[] | undefined;
-    onResolveVideoEffectDependency?: (() => Promise<import("../../../../../calling-component-bindings/src").VideoBackgroundEffectsDependency>) | undefined;
-    selectedVideoBackgroundEffect?: import("..").VideoBackgroundEffect | undefined;
-    acceptedTransferCallState?: import("../../../../../calling-stateful-client/src").CallState | undefined;
-}) => {
+export declare const mutedNotificationSelector: ((state: import("..").CallAdapterUiState & import("..").CallAdapterClientState) => {
     speakingWhileMuted: boolean;
 }) & reselect.OutputSelectorFields<(args_0: import("../../../../../calling-stateful-client/src").DiagnosticsCallFeatureState | undefined) => {
     speakingWhileMuted: boolean;

package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/networkReconnectTileSelector.d.ts

@@ -2,26 +2,7 @@ import * as reselect from 'reselect';
 /**
  * @private
  */
-export declare const networkReconnectTileSelector: ((state: {
-    isLocalPreviewMicrophoneEnabled: boolean;
-    page: import("..").CallCompositePage;
-    unsupportedBrowserVersionsAllowed?: boolean | undefined;
-    userId: import("@azure/communication-common").CommunicationIdentifierKind;
-    displayName?: string | undefined;
-    call?: import("../../../../../calling-stateful-client/src").CallState | undefined;
-    devices: import("../../../../../calling-stateful-client/src").DeviceManagerState;
-    endedCall?: import("../../../../../calling-stateful-client/src").CallState | undefined;
-    isTeamsCall: boolean;
-    isRoomsCall: boolean;
-    latestErrors: import("../..").AdapterErrors;
-    alternateCallerId?: string | undefined;
-    environmentInfo?: import("@azure/communication-calling").EnvironmentInfo | undefined;
-    cameraStatus?: "On" | "Off" | undefined;
-    videoBackgroundImages?: import("..").VideoBackgroundImage[] | undefined;
-    onResolveVideoEffectDependency?: (() => Promise<import("../../../../../calling-component-bindings/src").VideoBackgroundEffectsDependency>) | undefined;
-    selectedVideoBackgroundEffect?: import("..").VideoBackgroundEffect | undefined;
-    acceptedTransferCallState?: import("../../../../../calling-stateful-client/src").CallState | undefined;
-}) => {
+export declare const networkReconnectTileSelector: ((state: import("..").CallAdapterUiState & import("..").CallAdapterClientState) => {
     networkReconnectValue: boolean | import("@azure/communication-calling").DiagnosticQuality | undefined;
     localParticipantVideoStream: {
         isAvailable: boolean;

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/Buttons.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Buttons.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/Buttons.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAoD,MAAM,iBAAiB,CAAC;AAEpG,MAAM,+BAA+B,GAAG,CAAC,CAAC;AAE1C,eAAe;AACf,MAAM,CAAC,MAAM,yBAAyB,GAAW;IAC/C,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,SAAS;IACxB,4HAA4H;IAC5H,SAAS,EAAE;;;GAGV;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,IAAI,EAAE;QACJ,MAAM,EAAE,UAAU;QAClB,YAAY,EAAE,CAAC;QACf,MAAM,EAAE,WAAW;QACnB,KAAK,EAAE,WAAW;KACnB;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,IAAI,EAAE;QACJ,MAAM,EAAE,GAAG;QACX,YAAY,EAAE,QAAQ;KACvB;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAA8B;IACxE,IAAI,EAAE;QACJ,MAAM,EAAE,GAAG,+BAA+B,KAAK;QAC/C,UAAU,EAAE,GAAG,+BAA+B,KAAK;QACnD,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,QAAQ;KACnB;IACD,WAAW,EAAE;QACX,MAAM,EAAE,GAAG,+BAA+B,KAAK;QAC/C,UAAU,EAAE,GAAG,+BAA+B,KAAK;QACnD,SAAS,EAAE,OAAO;KACnB;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,OAAO;QAClB,SAAS,EAAE,QAAQ;KACpB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,MAAM;KACnB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0CAA0C,GAA6B;IAClF,UAAU,EAAE;QACV,cAAc,EAAE,+BAA+B;QAC/C,qBAAqB,EAAE;YACrB,qBAAqB,EAAE;gBACrB,IAAI,EAAE;oBACJ,MAAM,EAAE,GAAG,+BAA+B,KAAK;iBAChD;gBACD,6BAA6B,EAAE,+BAA+B;aAC/D;SACF;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAwB;IACzE,UAAU,EAAE;QACV,cAAc,EAAE,+BAA+B;KAChD;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAkB;IACnD,KAAK,EAAE;QACL,QAAQ,EAAE,SAAS;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,GAAG,MAAuB,EAAiB,EAAE;IAClF,IAAI,MAAM,GAAG,sBAAsB,CAAC;IACpC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACrB,MAAM,GAAG,eAAe,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IButtonStyles, IContextualMenuItemStyles, IStyle } from '@fluentui/react';\nimport { DevicesButtonStyles, ParticipantsButtonStyles } from '@internal/react-components';\nconst MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;\n\n/** @private */\nexport const controlBarContainerStyles: IStyle = {\n  paddingTop: '0.25rem',\n  paddingBottom: '0.25rem',\n  // @TODO: this should be exposed through a custom CallComposite Theme API that extends the fluent theme with semantic values\n  boxShadow: `\n    0px 6.400000095367432px 14.399999618530273px 0px #00000021;\n    0px 1.2000000476837158px 3.5999999046325684px 0px #0000001A;\n  `\n};\n\n/**\n * @private\n */\nexport const groupCallLeaveButtonStyle = {\n  root: {\n    border: '0.125rem',\n    borderRadius: 2,\n    height: '2.1875rem',\n    width: '6.5625rem'\n  },\n  flexContainer: {\n    flexFlow: 'row'\n  }\n};\n\n/**\n * @private\n */\nexport const groupCallLeaveButtonCompressedStyle = {\n  root: {\n    border: '0',\n    borderRadius: '0.5rem'\n  },\n  flexContainer: {\n    flexFlow: 'row'\n  }\n};\n\n/**\n * Styles that can be applied to ensure flyout items have the minimum touch target size.\n *\n * @private\n */\nexport const buttonFlyoutIncreasedSizeStyles: IContextualMenuItemStyles = {\n  root: {\n    height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    maxHeight: 'unset',\n    overflow: 'hidden'\n  },\n  linkContent: {\n    height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    maxHeight: 'unset'\n  },\n  icon: {\n    maxHeight: 'unset',\n    textAlign: 'center'\n  },\n  checkmarkIcon: {\n    lineHeight: '2rem'\n  }\n};\n\n/**\n * @private\n */\nexport const participantButtonWithIncreasedTouchTargets: ParticipantsButtonStyles = {\n  menuStyles: {\n    menuItemStyles: buttonFlyoutIncreasedSizeStyles,\n    participantListStyles: {\n      participantItemStyles: {\n        root: {\n          height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`\n        },\n        participantSubMenuItemsStyles: buttonFlyoutIncreasedSizeStyles\n      }\n    }\n  }\n};\n\n/**\n * @private\n */\nexport const devicesButtonWithIncreasedTouchTargets: DevicesButtonStyles = {\n  menuStyles: {\n    menuItemStyles: buttonFlyoutIncreasedSizeStyles\n  }\n};\n\n/**\n * @private\n */\nexport const controlButtonBaseStyle: IButtonStyles = {\n  label: {\n    minWidth: '2.25rem'\n  }\n};\n\n/**\n * @private\n */\nexport const concatButtonBaseStyles = (...styles: IButtonStyles[]): IButtonStyles => {\n  let result = controlButtonBaseStyle;\n  styles.forEach(style => {\n    result = concatStyleSets(result, style);\n  });\n  return result;\n};\"../../../../../react-components/src\""]}
+{"version":3,"file":"Buttons.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/Buttons.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAoD,MAAM,iBAAiB,CAAC;AAEpG,MAAM,+BAA+B,GAAG,CAAC,CAAC;AAE1C,eAAe;AACf,MAAM,CAAC,MAAM,yBAAyB,GAAW;IAC/C,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,SAAS;IACxB,4HAA4H;IAC5H,SAAS,EAAE;;;GAGV;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,IAAI,EAAE;QACJ,MAAM,EAAE,UAAU;QAClB,YAAY,EAAE,CAAC;QACf,MAAM,EAAE,WAAW;QACnB,KAAK,EAAE,WAAW;KACnB;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAG;IACjD,IAAI,EAAE;QACJ,MAAM,EAAE,GAAG;QACX,YAAY,EAAE,QAAQ;KACvB;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAA8B;IACxE,IAAI,EAAE;QACJ,MAAM,EAAE,GAAG,+BAA+B,KAAK;QAC/C,UAAU,EAAE,GAAG,+BAA+B,KAAK;QACnD,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,QAAQ;KACnB;IACD,WAAW,EAAE;QACX,MAAM,EAAE,GAAG,+BAA+B,KAAK;QAC/C,UAAU,EAAE,GAAG,+BAA+B,KAAK;QACnD,SAAS,EAAE,OAAO;KACnB;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,OAAO;QAClB,SAAS,EAAE,QAAQ;KACpB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,MAAM;KACnB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0CAA0C,GAA6B;IAClF,UAAU,EAAE;QACV,cAAc,EAAE,+BAA+B;QAC/C,qBAAqB,EAAE;YACrB,qBAAqB,EAAE;gBACrB,IAAI,EAAE;oBACJ,MAAM,EAAE,GAAG,+BAA+B,KAAK;iBAChD;gBACD,6BAA6B,EAAE,+BAA+B;aAC/D;SACF;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAwB;IACzE,UAAU,EAAE;QACV,cAAc,EAAE,+BAA+B;KAChD;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAkB;IACnD,KAAK,EAAE;QACL,QAAQ,EAAE,SAAS;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,GAAG,MAAuB,EAAiB,EAAE;IAClF,IAAI,MAAM,GAAG,sBAAsB,CAAC;IACpC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACrB,MAAM,GAAG,eAAe,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, IButtonStyles, IContextualMenuItemStyles, IStyle } from '@fluentui/react';\nimport { DevicesButtonStyles, ParticipantsButtonStyles } from '@internal/react-components';\nconst MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;\n\n/** @private */\nexport const controlBarContainerStyles: IStyle = {\n  paddingTop: '0.25rem',\n  paddingBottom: '0.25rem',\n  // @TODO: this should be exposed through a custom CallComposite Theme API that extends the fluent theme with semantic values\n  boxShadow: `\n    0px 6.400000095367432px 14.399999618530273px 0px #00000021;\n    0px 1.2000000476837158px 3.5999999046325684px 0px #0000001A;\n  `\n};\n\n/**\n * @private\n */\nexport const groupCallLeaveButtonStyle = {\n  root: {\n    border: '0.125rem',\n    borderRadius: 2,\n    height: '2.1875rem',\n    width: '6.5625rem'\n  },\n  flexContainer: {\n    flexFlow: 'row'\n  }\n};\n\n/**\n * @private\n */\nexport const groupCallLeaveButtonCompressedStyle = {\n  root: {\n    border: '0',\n    borderRadius: '0.5rem'\n  },\n  flexContainer: {\n    flexFlow: 'row'\n  }\n};\n\n/**\n * Styles that can be applied to ensure flyout items have the minimum touch target size.\n *\n * @private\n */\nexport const buttonFlyoutIncreasedSizeStyles: IContextualMenuItemStyles = {\n  root: {\n    height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    maxHeight: 'unset',\n    overflow: 'hidden'\n  },\n  linkContent: {\n    height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    maxHeight: 'unset'\n  },\n  icon: {\n    maxHeight: 'unset',\n    textAlign: 'center'\n  },\n  checkmarkIcon: {\n    lineHeight: '2rem'\n  }\n};\n\n/**\n * @private\n */\nexport const participantButtonWithIncreasedTouchTargets: ParticipantsButtonStyles = {\n  menuStyles: {\n    menuItemStyles: buttonFlyoutIncreasedSizeStyles,\n    participantListStyles: {\n      participantItemStyles: {\n        root: {\n          height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`\n        },\n        participantSubMenuItemsStyles: buttonFlyoutIncreasedSizeStyles\n      }\n    }\n  }\n};\n\n/**\n * @private\n */\nexport const devicesButtonWithIncreasedTouchTargets: DevicesButtonStyles = {\n  menuStyles: {\n    menuItemStyles: buttonFlyoutIncreasedSizeStyles\n  }\n};\n\n/**\n * @private\n */\nexport const controlButtonBaseStyle: IButtonStyles = {\n  label: {\n    minWidth: '2.25rem'\n  }\n};\n\n/**\n * @private\n */\nexport const concatButtonBaseStyles = (...styles: IButtonStyles[]): IButtonStyles => {\n  let result = controlButtonBaseStyle;\n  styles.forEach(style => {\n    result = concatStyleSets(result, style);\n  });\n  return result;\n};"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.d.ts

@@ -13,8 +13,12 @@ export declare const configurationStackTokensDesktop: IStackTokens;
  * @private
  */
 export declare const configurationStackTokensMobile: IStackTokens;
+/**
+ * @private
+ */
+export declare const deviceConfigurationStackTokens: IStackTokens;
 /** @private */
-export declare const configurationContainerStyle: (desktop: boolean, backgroundImageUrl?: string | undefined) => IStackStyles;
+export declare const configurationContainerStyle: (desktop: boolean, backgroundImageUrl?: string) => IStackStyles;
 /**
  * @private
  */
@@ -26,11 +30,11 @@ export declare const selectionContainerStyle: (theme: ITheme) => string;
 /**
  * @private
  */
-export declare const titleContainerStyleDesktop: string;
+export declare const titleContainerStyleDesktop: (theme: ITheme) => string;
 /**
  * @private
  */
-export declare const titleContainerStyleMobile: string;
+export declare const titleContainerStyleMobile: (theme: ITheme) => string;
 /**
  * @private
  */
@@ -38,11 +42,11 @@ export declare const callDetailsContainerStyles: IStackStyles;
 /**
  * @private
  */
-export declare const callDetailsStyleDesktop: string;
+export declare const callDetailsStyleDesktop: (theme: ITheme) => string;
 /**
  * @private
  */
-export declare const callDetailsStyleMobile: string;
+export declare const callDetailsStyleMobile: (theme: ITheme) => string;
 /**
  * @private
  */
@@ -68,7 +72,7 @@ export declare const effectsButtonStyles: (theme: Theme) => IButtonStyles;
 /** @private */
 export declare const fillWidth: string;
 /** @private */
-export declare const configurationCenteredContent: (fillsHeight: boolean, hasLogo?: boolean | undefined) => string;
+export declare const configurationCenteredContent: (fillsHeight: boolean, hasLogo?: boolean) => string;
 /** @private */
 export declare const panelStyles: Partial<IPanelStyles>;
 /** @private */
@@ -76,5 +80,5 @@ export declare const panelFocusProps: IFocusTrapZoneProps;
 /**
  * @private
  */
-export declare const logoStyles: (shape: 'circle' | 'square') => IImageStyles;
+export declare const logoStyles: (shape: undefined | 'unset' | 'circle') => IImageStyles;
 //# sourceMappingURL=CallConfiguration.styles.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js

@@ -9,17 +9,22 @@ export const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;
 /** @private */
 export const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;
 const LOGO_HEIGHT_REM = 3;
-const LOGO_MARGIN_BOTTOM_REM = 1;
 /**
  * @private
  */
 export const configurationStackTokensDesktop = {
-    childrenGap: '1rem'
+    childrenGap: '1.5rem'
 };
 /**
  * @private
  */
 export const configurationStackTokensMobile = {
+    childrenGap: '0.5rem'
+};
+/**
+ * @private
+ */
+export const deviceConfigurationStackTokens = {
     childrenGap: '1.5rem'
 };
 /** @private */
@@ -27,7 +32,7 @@ export 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',
         // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2
@@ -55,6 +60,8 @@ export const selectionContainerStyle = (theme) => mergeStyles({
     padding: '1rem',
     borderRadius: theme.effects.roundedCorner6,
     border: `0.0625rem solid ${theme.palette.neutralLight}`,
+    overflow: 'hidden',
+    // do not let child background overflow the curved corners
     boxShadow: theme.effects.elevation4,
     // Style the background of the container to have partial transparency.
     // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.
@@ -70,27 +77,42 @@ export const selectionContainerStyle = (theme) => mergeStyles({
         right: 0,
         zIndex: 0,
         background: theme.palette.white,
-        opacity: 0.9,
-        borderRadius: theme.effects.roundedCorner4
+        opacity: 0.9
     }
 });
 /**
  * @private
  */
-export const titleContainerStyleDesktop = mergeStyles({
-    fontSize: '1.25rem',
-    lineHeight: '1.75rem',
+export const titleContainerStyleDesktop = (theme) => mergeStyles({
+    fontSize: '1.2rem',
+    lineHeight: '1rem',
     fontWeight: 600
-});
+}, configurationPageTextDecoration(theme));
 /**
  * @private
  */
-export const titleContainerStyleMobile = mergeStyles({
+export const titleContainerStyleMobile = (theme) => 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
  */
@@ -101,19 +123,23 @@ export const callDetailsContainerStyles = {
         alignSelf: 'center'
     }
 };
-const callDetailsStyle = {
+const callDetailsStyle = (theme) => ({
     fontSize: '0.9375',
     lineHeight: '1.25rem',
-    marginTop: '0.25rem'
-};
+    textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,
+    marginTop: '-0.33rem' // compensate for extra padding around the CallTitle that avoids the SVG shadowing being cut off
+});
 /**
  * @private
  */
-export const callDetailsStyleDesktop = mergeStyles(Object.assign({}, callDetailsStyle));
+export const callDetailsStyleDesktop = (theme) => mergeStyles(callDetailsStyle(theme));
 /**
  * @private
  */
-export const callDetailsStyleMobile = mergeStyles(Object.assign(Object.assign({}, callDetailsStyle), { textAlign: 'center' }));
+export const callDetailsStyleMobile = (theme) => mergeStyles(callDetailsStyle(theme), {
+    marginBottom: '0.5rem',
+    textAlign: 'center'
+});
 /**
  * @private
  */
@@ -199,7 +225,7 @@ export const configurationCenteredContent = (fillsHeight, hasLogo) => mergeStyle
     // 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 */
 export const panelStyles = {
@@ -231,13 +257,13 @@ export const logoStyles = (shape) => ({
         overflow: 'initial',
         // prevent the image being clipped
         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
     }
 });
 //# sourceMappingURL=CallConfiguration.styles.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackItemStyles, IStackStyles, IStackTokens, IStyle, mergeStyles, IButtonStyles, Theme, IPanelStyles, IFocusTrapZoneProps, IImageStyles, AnimationStyles, ITheme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;\nconst LOGO_HEIGHT_REM = 3;\nconst LOGO_MARGIN_BOTTOM_REM = 1;\n\n/**\n * @private\n */\nexport const configurationStackTokensDesktop: IStackTokens = {\n  childrenGap: '1rem'\n};\n\n/**\n * @private\n */\nexport const configurationStackTokensMobile: IStackTokens = {\n  childrenGap: '1.5rem'\n};\n\n/** @private */\nexport const configurationContainerStyle = (desktop: boolean, backgroundImageUrl?: string): IStackStyles => ({\n  root: {\n    height: '100%',\n    width: '100%',\n    padding: '2rem 1rem 2rem 1rem',\n    minWidth: desktop ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n    : '16rem',\n    // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n    minHeight: desktop ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n    : '13rem',\n    '::before': !backgroundImageUrl ? undefined : {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      zIndex: 0,\n      width: '100%',\n      height: '100%',\n      backgroundImage: `url(${backgroundImageUrl})`,\n      backgroundSize: 'cover',\n      backgroundPosition: 'center',\n      ...AnimationStyles.fadeIn500\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const configurationSectionStyle: IStackStyles = {\n  root: {\n    width: '100%',\n    minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n    maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`\n  }\n};\n\n/**\n * @private\n */\nexport const selectionContainerStyle = (theme: ITheme): string => mergeStyles({\n  width: '100%',\n  height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n  padding: '1rem',\n  borderRadius: theme.effects.roundedCorner6,\n  border: `0.0625rem solid ${theme.palette.neutralLight}`,\n  boxShadow: theme.effects.elevation4,\n  // Style the background of the container to have partial transparency.\n  // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.\n  // Ideally rgba would be used but we cannot garauntee the format of theme.palette.white\n  // to parse it correctly.\n  position: 'relative',\n  ':before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    zIndex: 0,\n    background: theme.palette.white,\n    opacity: 0.9,\n    borderRadius: theme.effects.roundedCorner4\n  }\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleDesktop = mergeStyles({\n  fontSize: '1.25rem',\n  lineHeight: '1.75rem',\n  fontWeight: 600\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleMobile = mergeStyles({\n  fontSize: '1.0625rem',\n  lineHeight: '1.375rem',\n  fontWeight: 600,\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const callDetailsContainerStyles: IStackStyles = {\n  root: {\n    textAlign: 'center',\n    maxWidth: _pxToRem(700),\n    alignSelf: 'center'\n  }\n};\nconst callDetailsStyle: IStyle = {\n  fontSize: '0.9375',\n  lineHeight: '1.25rem',\n  marginTop: '0.25rem'\n};\n\n/**\n * @private\n */\nexport const callDetailsStyleDesktop = mergeStyles({\n  ...callDetailsStyle\n});\n\n/**\n * @private\n */\nexport const callDetailsStyleMobile = mergeStyles({\n  ...callDetailsStyle,\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleDesktop: IStackStyles = {\n  root: {\n    paddingTop: '1.125rem'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleMobile: IStackStyles = {\n  root: {\n    textAlign: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonStyleMobile = mergeStyles({\n  width: '100%',\n  maxWidth: 'unset',\n  borderRadius: '0.25rem'\n});\n\n/**\n * @private\n */\nexport const startCallButtonStyleDesktop = mergeStyles({\n  borderRadius: '0.25rem',\n  width: 'auto',\n  height: '2.25rem'\n});\n\n/** @private */\nexport const cameraAndVideoEffectsContainerStyleDesktop: IStackItemStyles = {\n  root: {\n    alignItems: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const effectsButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      background: 'transparent',\n      border: 'none',\n      color: theme.palette.themePrimary,\n      // Top and bottom padding needs to be 5px to match the label padding\n      padding: '5px 0.25rem',\n      ':hover, :focus': {\n        color: theme.palette.themePrimary\n      },\n      svg: {\n        height: '1rem',\n        width: '1rem'\n      }\n    },\n    rootChecked: {\n      color: theme.palette.themePrimary\n    },\n    rootHovered: {\n      color: theme.palette.themePrimary\n    },\n    rootPressed: {\n      color: theme.palette.themePrimary\n    },\n    rootFocused: {\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/** @private */\nexport const fillWidth = mergeStyles({\n  width: '100%',\n  position: 'relative'\n});\n\n/** @private */\nexport const configurationCenteredContent = (fillsHeight: boolean, hasLogo?: boolean): string => mergeStyles({\n  width: '100%',\n  position: 'relative',\n  // If the content does not fill the height, center it vertically.\n  // We do not include the logo in the centering per design. This allows it to fade\n  // in and not shift the content. To exclude the logo, we subtract the logo height\n  // and margin from the actual height. This allows the flex box's natural centering\n  // to appropriately center the content.\n  height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM + LOGO_MARGIN_BOTTOM_REM}rem` : '0rem'})`\n});\n\n/** @private */\nexport const panelStyles: Partial<IPanelStyles> = {\n  content: {\n    display: 'flex',\n    flexBasis: '100%',\n    paddingLeft: '0rem',\n    // remove default padding\n    paddingRight: '0rem' // remove default padding\n  },\n\n  commands: {\n    paddingTop: '0rem' // remove default padding\n  },\n\n  scrollableContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%'\n  }\n};\n\n/** @private */\nexport const panelFocusProps: IFocusTrapZoneProps = {\n  forceFocusInsideTrap: false\n};\n\n/**\n * @private\n */\nexport const logoStyles = (shape: 'circle' | 'square'): IImageStyles => ({\n  root: {\n    overflow: 'initial',\n    // prevent the image being clipped\n    display: 'flex',\n    justifyContent: 'center',\n    marginBottom: `${LOGO_MARGIN_BOTTOM_REM}rem`\n  },\n  image: {\n    borderRadius: shape === 'circle' ? '100%' : undefined,\n    height: `${LOGO_HEIGHT_REM}rem`,\n    width: `${LOGO_HEIGHT_REM}rem` // width should match height\n  }\n});\"../../../../../acs-ui-common/src\""]}
+{"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAwD,WAAW,EAAyE,eAAe,EAAU,MAAM,iBAAiB,CAAC;AACpM,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAEnD,eAAe;AACf,MAAM,CAAC,MAAM,wCAAwC,GAAG,EAAE,CAAC;AAC3D,eAAe;AACf,MAAM,CAAC,MAAM,wCAAwC,GAAG,MAAM,CAAC;AAC/D,eAAe;AACf,MAAM,CAAC,MAAM,qCAAqC,GAAG,MAAM,CAAC;AAC5D,MAAM,eAAe,GAAG,CAAC,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAiB;IAC3D,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAiB;IAC1D,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAiB;IAC1D,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,OAAgB,EAAE,kBAA2B,EAAgB,EAAE,CAAC,CAAC;IAC3G,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB;QAChE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,oHAAoH;YAChJ,CAAC,CAAC,OAAO;QACT,mGAAmG;QACnG,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gEAAgE;YAC7F,CAAC,CAAC,OAAO;QACT,UAAU,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,iBAC3C,OAAO,EAAE,IAAI,EACb,QAAQ,EAAE,UAAU,EACpB,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,MAAM,EAAE,CAAC,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,OAAO,kBAAkB,GAAG,EAC7C,cAAc,EAAE,OAAO,EACvB,kBAAkB,EAAE,QAAQ,IACzB,eAAe,CAAC,SAAS,CAC7B;KACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAiB;IACrD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,GAAG,wCAAwC,KAAK;QAC1D,QAAQ,EAAE,GAAG,wCAAwC,KAAK;KAC3D;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,WAAW,CAAC;IAC5E,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,GAAG,qCAAqC,KAAK;IACrD,OAAO,EAAE,MAAM;IACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,MAAM,EAAE,mBAAmB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;IACvD,QAAQ,EAAE,QAAQ;IAClB,0DAA0D;IAC1D,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;IACnC,sEAAsE;IACtE,sFAAsF;IACtF,uFAAuF;IACvF,yBAAyB;IACzB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE;QACT,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,OAAO,EAAE,GAAG;KACb;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,WAAW,CAAC;IAC/E,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,GAAG;CAChB,EAAE,+BAA+B,CAAC,KAAK,CAAC,CAAC,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,WAAW,CAAC;IAC9E,QAAQ,EAAE,WAAW;IACrB,UAAU,EAAE,UAAU;IACtB,UAAU,EAAE,GAAG;IACf,SAAS,EAAE,QAAQ;CACpB,EAAE,+BAA+B,CAAC,KAAK,CAAC,CAAC,CAAC;AAE3C;;;GAGG;AACH,MAAM,+BAA+B,GAAG,CAAC,KAAa,EAAU,EAAE;IAChE,OAAO;QACL,UAAU,EAAE,eAAe,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;QAC7D,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;QACnC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB;QACxC,UAAU,EAAE,aAAa;QACzB,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC;QAC1B,IAAI,EAAE;YACJ,aAAa,EAAE,UAAU,CAAC,4CAA4C;SACvE;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAiB;IACtD,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC;QACvB,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AACF,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,CAAC;IACnD,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,eAAe,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;IAC7D,SAAS,EAAE,UAAU,CAAC,gGAAgG;CACvH,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEvG;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE;IACpG,YAAY,EAAE,QAAQ;IACtB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAiB;IAChE,IAAI,EAAE;QACJ,UAAU,EAAE,UAAU;KACvB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mCAAmC,GAAiB;IAC/D,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACpD,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,OAAO;IACjB,YAAY,EAAE,SAAS;CACxB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC;IACrD,YAAY,EAAE,SAAS;IACvB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH,eAAe;AACf,MAAM,CAAC,MAAM,0CAA0C,GAAqB;IAC1E,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAiB,EAAE;IACjE,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,EAAE,aAAa;YACzB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;YACjC,oEAAoE;YACpE,OAAO,EAAE,aAAa;YACtB,gBAAgB,EAAE;gBAChB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aAClC;YACD,GAAG,EAAE;gBACH,MAAM,EAAE,MAAM;gBACd,KAAK,EAAE,MAAM;aACd;SACF;QACD,WAAW,EAAE;YACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;SAClC;QACD,WAAW,EAAE;YACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;SAClC;QACD,WAAW,EAAE;YACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;SAClC;QACD,WAAW,EAAE;YACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;SAClC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC;IACnC,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,eAAe;AACf,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,WAAoB,EAAE,OAAiB,EAAU,EAAE,CAAC,WAAW,CAAC;IAC3G,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,iEAAiE;IACjE,iFAAiF;IACjF,iFAAiF;IACjF,kFAAkF;IAClF,uCAAuC;IACvC,MAAM,EAAE,eAAe,CAAC,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,eAAe,KAAK,CAAC,CAAC,CAAC,MAAM,GAAG;CACrF,CAAC,CAAC;AAEH,eAAe;AACf,MAAM,CAAC,MAAM,WAAW,GAA0B;IAChD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,MAAM;QACnB,yBAAyB;QACzB,YAAY,EAAE,MAAM,CAAC,yBAAyB;KAC/C;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,MAAM,CAAC,yBAAyB;KAC7C;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAwB;IAClD,oBAAoB,EAAE,KAAK;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAqC,EAAgB,EAAE,CAAC,CAAC;IAClF,IAAI,EAAE;QACJ,QAAQ,EAAE,SAAS;QACnB,kCAAkC;QAClC,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;KACzB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,GAAG,eAAe,KAAK;QAC/B,YAAY,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QACrD,WAAW,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QACrD,SAAS,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;KACpD;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackItemStyles, IStackStyles, IStackTokens, IStyle, mergeStyles, IButtonStyles, Theme, IPanelStyles, IFocusTrapZoneProps, IImageStyles, AnimationStyles, ITheme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM = 11;\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM = 20.625;\n/** @private */\nexport const CONFIGURATION_PAGE_SECTION_HEIGHT_REM = 13.625;\nconst LOGO_HEIGHT_REM = 3;\n\n/**\n * @private\n */\nexport const configurationStackTokensDesktop: IStackTokens = {\n  childrenGap: '1.5rem'\n};\n\n/**\n * @private\n */\nexport const configurationStackTokensMobile: IStackTokens = {\n  childrenGap: '0.5rem'\n};\n\n/**\n * @private\n */\nexport const deviceConfigurationStackTokens: IStackTokens = {\n  childrenGap: '1.5rem'\n};\n\n/** @private */\nexport const configurationContainerStyle = (desktop: boolean, backgroundImageUrl?: string): IStackStyles => ({\n  root: {\n    height: '100%',\n    width: '100%',\n    padding: desktop ? '2rem 1rem 2rem 1rem' : '1rem 1rem 2rem 1rem',\n    minWidth: desktop ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n    : '16rem',\n    // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n    minHeight: desktop ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n    : '13rem',\n    '::before': !backgroundImageUrl ? undefined : {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      zIndex: 0,\n      width: '100%',\n      height: '100%',\n      backgroundImage: `url(${backgroundImageUrl})`,\n      backgroundSize: 'cover',\n      backgroundPosition: 'center',\n      ...AnimationStyles.fadeIn500\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const configurationSectionStyle: IStackStyles = {\n  root: {\n    width: '100%',\n    minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n    maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`\n  }\n};\n\n/**\n * @private\n */\nexport const selectionContainerStyle = (theme: ITheme): string => mergeStyles({\n  width: '100%',\n  height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n  padding: '1rem',\n  borderRadius: theme.effects.roundedCorner6,\n  border: `0.0625rem solid ${theme.palette.neutralLight}`,\n  overflow: 'hidden',\n  // do not let child background overflow the curved corners\n  boxShadow: theme.effects.elevation4,\n  // Style the background of the container to have partial transparency.\n  // Using `before:` pseudo-element to avoid having to wrap the content in an extra div.\n  // Ideally rgba would be used but we cannot garauntee the format of theme.palette.white\n  // to parse it correctly.\n  position: 'relative',\n  ':before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    zIndex: 0,\n    background: theme.palette.white,\n    opacity: 0.9\n  }\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleDesktop = (theme: ITheme): string => mergeStyles({\n  fontSize: '1.2rem',\n  lineHeight: '1rem',\n  fontWeight: 600\n}, configurationPageTextDecoration(theme));\n\n/**\n * @private\n */\nexport const titleContainerStyleMobile = (theme: ITheme): string => mergeStyles({\n  fontSize: '1.0625rem',\n  lineHeight: '1.375rem',\n  fontWeight: 600,\n  textAlign: 'center'\n}, configurationPageTextDecoration(theme));\n\n/**\n * Ensure configuration page text is legible on top of a background image.\n * @private\n */\nconst configurationPageTextDecoration = (theme: ITheme): IStyle => {\n  return {\n    textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,\n    fill: theme.semanticColors.bodyText,\n    stroke: theme.palette.whiteTranslucent40,\n    paintOrder: 'stroke fill',\n    strokeWidth: _pxToRem(1.5),\n    text: {\n      letterSpacing: '-0.02rem' // cope with extra width due to stroke width\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const callDetailsContainerStyles: IStackStyles = {\n  root: {\n    textAlign: 'center',\n    maxWidth: _pxToRem(700),\n    alignSelf: 'center'\n  }\n};\nconst callDetailsStyle = (theme: ITheme): IStyle => ({\n  fontSize: '0.9375',\n  lineHeight: '1.25rem',\n  textShadow: `0px 0px 8px ${theme.palette.whiteTranslucent40}`,\n  marginTop: '-0.33rem' // compensate for extra padding around the CallTitle that avoids the SVG shadowing being cut off\n});\n\n/**\n * @private\n */\nexport const callDetailsStyleDesktop = (theme: ITheme): string => mergeStyles(callDetailsStyle(theme));\n\n/**\n * @private\n */\nexport const callDetailsStyleMobile = (theme: ITheme): string => mergeStyles(callDetailsStyle(theme), {\n  marginBottom: '0.5rem',\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleDesktop: IStackStyles = {\n  root: {\n    paddingTop: '1.125rem'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleMobile: IStackStyles = {\n  root: {\n    textAlign: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const startCallButtonStyleMobile = mergeStyles({\n  width: '100%',\n  maxWidth: 'unset',\n  borderRadius: '0.25rem'\n});\n\n/**\n * @private\n */\nexport const startCallButtonStyleDesktop = mergeStyles({\n  borderRadius: '0.25rem',\n  width: 'auto',\n  height: '2.25rem'\n});\n\n/** @private */\nexport const cameraAndVideoEffectsContainerStyleDesktop: IStackItemStyles = {\n  root: {\n    alignItems: 'center'\n  }\n};\n\n/**\n * @private\n */\nexport const effectsButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      background: 'transparent',\n      border: 'none',\n      color: theme.palette.themePrimary,\n      // Top and bottom padding needs to be 5px to match the label padding\n      padding: '5px 0.25rem',\n      ':hover, :focus': {\n        color: theme.palette.themePrimary\n      },\n      svg: {\n        height: '1rem',\n        width: '1rem'\n      }\n    },\n    rootChecked: {\n      color: theme.palette.themePrimary\n    },\n    rootHovered: {\n      color: theme.palette.themePrimary\n    },\n    rootPressed: {\n      color: theme.palette.themePrimary\n    },\n    rootFocused: {\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/** @private */\nexport const fillWidth = mergeStyles({\n  width: '100%',\n  position: 'relative'\n});\n\n/** @private */\nexport const configurationCenteredContent = (fillsHeight: boolean, hasLogo?: boolean): string => mergeStyles({\n  width: '100%',\n  position: 'relative',\n  // If the content does not fill the height, center it vertically.\n  // We do not include the logo in the centering per design. This allows it to fade\n  // in and not shift the content. To exclude the logo, we subtract the logo height\n  // and margin from the actual height. This allows the flex box's natural centering\n  // to appropriately center the content.\n  height: `calc(100% - ${!fillsHeight && hasLogo ? `${LOGO_HEIGHT_REM}rem` : '0rem'})`\n});\n\n/** @private */\nexport const panelStyles: Partial<IPanelStyles> = {\n  content: {\n    display: 'flex',\n    flexBasis: '100%',\n    paddingLeft: '0rem',\n    // remove default padding\n    paddingRight: '0rem' // remove default padding\n  },\n  commands: {\n    paddingTop: '0rem' // remove default padding\n  },\n  scrollableContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%'\n  }\n};\n\n/** @private */\nexport const panelFocusProps: IFocusTrapZoneProps = {\n  forceFocusInsideTrap: false\n};\n\n/**\n * @private\n */\nexport const logoStyles = (shape: undefined | 'unset' | 'circle'): IImageStyles => ({\n  root: {\n    overflow: 'initial',\n    // prevent the image being clipped\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  image: {\n    height: `${LOGO_HEIGHT_REM}rem`,\n    borderRadius: shape === 'circle' ? '100%' : undefined,\n    aspectRatio: shape === 'circle' ? '1 / 1' : undefined,\n    objectFit: shape === 'circle' ? 'cover' : undefined\n  }\n});"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallPage.styles.d.ts

@@ -34,7 +34,7 @@ export declare const bannerNotificationStyles: IStackStyles;
 /**
  * @private
  */
-export declare const callArrangementContainerStyles: (verticalControlBar?: boolean | undefined) => IStackStyles;
+export declare const callArrangementContainerStyles: (verticalControlBar?: boolean) => IStackStyles;
 /**
  * @private
  */

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallPage.styles.js

@@ -66,6 +66,7 @@ export const notificationsContainerStyles = {
  */
 export const bannerNotificationStyles = {
     root: {
+        zIndex: NOTIFICATION_CONTAINER_Z_INDEX,
         pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container
     }
 };

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallPage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallPage.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/CallPage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0C,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAClE,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAChC,2HAA2H;AAC3H,eAAe;AACf,MAAM,CAAC,MAAM,mBAAmB,GAAG,qBAAqB,GAAG,CAAC,CAAC;AAC7D,6GAA6G;AAC7G,MAAM,8BAA8B,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;AAEhG,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,8BAA8B,GAAG,CAAC,CAAC;AAEjE;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC,yBAAyB,EAAE;IAChF,MAAM,EAAE,mBAAmB;CAC5B,CAAC,CAAC;AACH,MAAM,cAAc,GAAW;IAC7B,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,OAAO,CAAC,qDAAqD;CACzE,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,iCAC3C,cAAc,KACjB,QAAQ,EAAE,OAAO,IACjB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,iCAC1C,cAAc,KACjB,QAAQ,EAAE,SAAS,IACnB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,eAAuB,EAAgB,EAAE,CAAC,CAAC;IACtF,IAAI,EAAE;QACJ,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,eAAe;KAC5B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAqB;IAC3D,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAiB;IACxD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,8BAA8B;QACtC,aAAa,EAAE,MAAM,CAAC,2EAA2E;KAClG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAiB;IACpD,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM,CAAC,iFAAiF;KACxG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,kBAA4B,EAAgB,EAAE;IAC3F,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,sDAAsD;SACtH;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAqB;IACxD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackItemStyles, IStackStyles, IStyle, mergeStyles } from '@fluentui/react';\nimport { controlBarContainerStyles } from './CallControls.styles';\nconst VIDEO_GALLERY_Z_INDEX = 1;\n// The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery\n/** @private */\nexport const CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;\n// The notification container should be in the highest z-band to ensure it shows on top of all other content.\nconst NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;\n\n/** @private */\nexport const DRAWER_Z_INDEX = NOTIFICATION_CONTAINER_Z_INDEX + 1;\n\n/**\n * @private\n */\nexport const callControlsContainerStyles = mergeStyles(controlBarContainerStyles, {\n  zIndex: CONTROL_BAR_Z_INDEX\n});\nconst containerStyle: IStyle = {\n  width: '100%',\n  position: 'relative',\n  minHeight: '13rem' // linked to minimum space allocated to media gallery\n};\n\n/**\n * @private\n */\nexport const containerStyleDesktop = mergeStyles({\n  ...containerStyle,\n  minWidth: '30rem'\n});\n\n/**\n * @private\n */\nexport const containerStyleMobile = mergeStyles({\n  ...containerStyle,\n  minWidth: '17.5rem'\n});\n\n/**\n * @private\n */\nexport const galleryParentContainerStyles = (backgroundColor: string): IStackStyles => ({\n  root: {\n    zIndex: VIDEO_GALLERY_Z_INDEX,\n    width: '100%',\n    background: backgroundColor\n  }\n});\n\n/**\n * @private\n */\nexport const mediaGalleryContainerStyles: IStackItemStyles = {\n  root: {\n    height: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const notificationsContainerStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    padding: '1rem',\n    zIndex: NOTIFICATION_CONTAINER_Z_INDEX,\n    pointerEvents: 'none' // to allow the operation of controls underneath the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const bannerNotificationStyles: IStackStyles = {\n  root: {\n    pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const callArrangementContainerStyles = (verticalControlBar?: boolean): IStackStyles => {\n  return {\n    root: {\n      width: '100%',\n      height: '100%',\n      flexDirection: verticalControlBar ? 'unset' : 'column-reverse' // to allow first initial keyboard focus on ControlBar\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const verticalControlBarStyles: IStackItemStyles = {\n  root: {\n    margin: 'auto'\n  }\n};"]}
+{"version":3,"file":"CallPage.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/CallPage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA0C,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAClE,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAChC,2HAA2H;AAC3H,eAAe;AACf,MAAM,CAAC,MAAM,mBAAmB,GAAG,qBAAqB,GAAG,CAAC,CAAC;AAC7D,6GAA6G;AAC7G,MAAM,8BAA8B,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;AAEhG,eAAe;AACf,MAAM,CAAC,MAAM,cAAc,GAAG,8BAA8B,GAAG,CAAC,CAAC;AAEjE;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,WAAW,CAAC,yBAAyB,EAAE;IAChF,MAAM,EAAE,mBAAmB;CAC5B,CAAC,CAAC;AACH,MAAM,cAAc,GAAW;IAC7B,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,OAAO,CAAC,qDAAqD;CACzE,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,iCAC3C,cAAc,KACjB,QAAQ,EAAE,OAAO,IACjB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,iCAC1C,cAAc,KACjB,QAAQ,EAAE,SAAS,IACnB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,eAAuB,EAAgB,EAAE,CAAC,CAAC;IACtF,IAAI,EAAE;QACJ,MAAM,EAAE,qBAAqB;QAC7B,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,eAAe;KAC5B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAqB;IAC3D,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAiB;IACxD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,8BAA8B;QACtC,aAAa,EAAE,MAAM,CAAC,2EAA2E;KAClG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAiB;IACpD,IAAI,EAAE;QACJ,MAAM,EAAE,8BAA8B;QACtC,aAAa,EAAE,MAAM,CAAC,iFAAiF;KACxG;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,kBAA4B,EAAgB,EAAE;IAC3F,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,sDAAsD;SACtH;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAqB;IACxD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackItemStyles, IStackStyles, IStyle, mergeStyles } from '@fluentui/react';\nimport { controlBarContainerStyles } from './CallControls.styles';\nconst VIDEO_GALLERY_Z_INDEX = 1;\n// The control bar must be in a higher z-band than the video gallery so the drop shadow appears on top of the video gallery\n/** @private */\nexport const CONTROL_BAR_Z_INDEX = VIDEO_GALLERY_Z_INDEX + 1;\n// The notification container should be in the highest z-band to ensure it shows on top of all other content.\nconst NOTIFICATION_CONTAINER_Z_INDEX = Math.max(CONTROL_BAR_Z_INDEX, VIDEO_GALLERY_Z_INDEX) + 1;\n\n/** @private */\nexport const DRAWER_Z_INDEX = NOTIFICATION_CONTAINER_Z_INDEX + 1;\n\n/**\n * @private\n */\nexport const callControlsContainerStyles = mergeStyles(controlBarContainerStyles, {\n  zIndex: CONTROL_BAR_Z_INDEX\n});\nconst containerStyle: IStyle = {\n  width: '100%',\n  position: 'relative',\n  minHeight: '13rem' // linked to minimum space allocated to media gallery\n};\n\n/**\n * @private\n */\nexport const containerStyleDesktop = mergeStyles({\n  ...containerStyle,\n  minWidth: '30rem'\n});\n\n/**\n * @private\n */\nexport const containerStyleMobile = mergeStyles({\n  ...containerStyle,\n  minWidth: '17.5rem'\n});\n\n/**\n * @private\n */\nexport const galleryParentContainerStyles = (backgroundColor: string): IStackStyles => ({\n  root: {\n    zIndex: VIDEO_GALLERY_Z_INDEX,\n    width: '100%',\n    background: backgroundColor\n  }\n});\n\n/**\n * @private\n */\nexport const mediaGalleryContainerStyles: IStackItemStyles = {\n  root: {\n    height: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const notificationsContainerStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    padding: '1rem',\n    zIndex: NOTIFICATION_CONTAINER_Z_INDEX,\n    pointerEvents: 'none' // to allow the operation of controls underneath the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const bannerNotificationStyles: IStackStyles = {\n  root: {\n    zIndex: NOTIFICATION_CONTAINER_Z_INDEX,\n    pointerEvents: 'auto' // to allow the dismissal or error and warning bars in the notification container\n  }\n};\n\n/**\n * @private\n */\nexport const callArrangementContainerStyles = (verticalControlBar?: boolean): IStackStyles => {\n  return {\n    root: {\n      width: '100%',\n      height: '100%',\n      flexDirection: verticalControlBar ? 'unset' : 'column-reverse' // to allow first initial keyboard focus on ControlBar\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const verticalControlBarStyles: IStackItemStyles = {\n  root: {\n    margin: 'auto'\n  }\n};"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LobbyTile.styles.d.ts

@@ -1,4 +1,4 @@
-import { IPalette, IStyle } from '@fluentui/react';
+import { IPalette, IStackItemStyles, IStyle } from '@fluentui/react';
 /**
  * @private
  */
@@ -20,4 +20,8 @@ export declare const videoTileStyles: {
  * @private
  */
 export declare const moreDetailsStyle: (palette: IPalette, isVideoReady: boolean) => IStyle;
+/**
+ * @private
+ */
+export declare const localCameraSwitcherContainerStyles: IStackItemStyles;
 //# sourceMappingURL=LobbyTile.styles.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LobbyTile.styles.js

@@ -34,4 +34,14 @@ export const moreDetailsStyle = (palette, isVideoReady) => ({
     color: isVideoReady ? 'white' : palette.themePrimary,
     textAlign: 'center'
 });
+/**
+ * @private
+ */
+export const localCameraSwitcherContainerStyles = {
+    root: {
+        position: 'absolute',
+        top: '0rem',
+        right: '0rem'
+    }
+};
 //# sourceMappingURL=LobbyTile.styles.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LobbyTile.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LobbyTile.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/LobbyTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAW;IAC3C,0DAA0D;IAC1D,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyD,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE;IACxG,OAAO;QACL,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY;QACpD,SAAS,EAAE,QAAQ;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAiB,EAAE,YAAqB,EAAU,EAAE,CAAC,CAAC;IACrF,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY;IACpD,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPalette, IStyle } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const overlayContainerStyle: IStyle = {\n  // Ensure some space around the text on a narrow viewport.\n  margin: '1rem'\n};\n\n/**\n * @private\n */\nexport const titleStyle: (palette: IPalette, isVideoReady: boolean) => IStyle = (palette, isVideoReady) => {\n  return {\n    fontSize: '1rem',\n    color: isVideoReady ? 'white' : palette.themePrimary,\n    textAlign: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const videoTileStyles = {\n  root: {\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const moreDetailsStyle = (palette: IPalette, isVideoReady: boolean): IStyle => ({\n  fontSize: '0.75rem',\n  color: isVideoReady ? 'white' : palette.themePrimary,\n  textAlign: 'center'\n});"]}
+{"version":3,"file":"LobbyTile.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/LobbyTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAW;IAC3C,0DAA0D;IAC1D,MAAM,EAAE,MAAM;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyD,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE;IACxG,OAAO;QACL,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY;QACpD,SAAS,EAAE,QAAQ;KACpB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAiB,EAAE,YAAqB,EAAU,EAAE,CAAC,CAAC;IACrF,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY;IACpD,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAqB;IAClE,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,MAAM;QACX,KAAK,EAAE,MAAM;KACd;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPalette, IStackItemStyles, IStyle } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const overlayContainerStyle: IStyle = {\n  // Ensure some space around the text on a narrow viewport.\n  margin: '1rem'\n};\n\n/**\n * @private\n */\nexport const titleStyle: (palette: IPalette, isVideoReady: boolean) => IStyle = (palette, isVideoReady) => {\n  return {\n    fontSize: '1rem',\n    color: isVideoReady ? 'white' : palette.themePrimary,\n    textAlign: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const videoTileStyles = {\n  root: {\n    height: '100%',\n    width: '100%'\n  }\n};\n\n/**\n * @private\n */\nexport const moreDetailsStyle = (palette: IPalette, isVideoReady: boolean): IStyle => ({\n  fontSize: '0.75rem',\n  color: isVideoReady ? 'white' : palette.themePrimary,\n  textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const localCameraSwitcherContainerStyles: IStackItemStyles = {\n  root: {\n    position: 'absolute',\n    top: '0rem',\n    right: '0rem'\n  }\n};"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.d.ts

@@ -6,7 +6,7 @@ export declare const localPreviewContainerStyleDesktop: (theme: ITheme) => strin
 /**
  * @private
  */
-export declare const localPreviewContainerStyleMobile: string;
+export declare const localPreviewContainerStyleMobile: (theme: ITheme) => string;
 /**
  * @private
  */
@@ -16,7 +16,6 @@ export declare const cameraOffLabelStyle: string;
  */
 export declare const localPreviewTileStyle: {
     root: {
-        borderRadius: string;
         '@media (forced-colors: active)': {
             borderColor: string;
             border: string;

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.js

@@ -2,17 +2,30 @@
 // Licensed under the MIT License.
 import { mergeStyles } from '@fluentui/react';
 import { CONFIGURATION_PAGE_SECTION_HEIGHT_REM, CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM, CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM } from './CallConfiguration.styles';
-const localPreviewContainerStyle = {
-    borderRadius: '.25rem'
-};
+const localPreviewContainerStyle = (theme) => ({
+    borderRadius: theme.effects.roundedCorner6,
+    overflow: 'hidden' // do not let child background overflow the curved corners
+});
 /**
  * @private
  */
-export const localPreviewContainerStyleDesktop = (theme) => mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '100%', height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`, minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`, maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`, border: `0.0625rem solid ${theme.palette.neutralLight}`, boxShadow: theme.effects.elevation4 }));
+export const localPreviewContainerStyleDesktop = (theme) => mergeStyles(localPreviewContainerStyle(theme), {
+    width: '100%',
+    height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
+    minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,
+    maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`,
+    border: `0.0625rem solid ${theme.palette.neutralLight}`,
+    borderRadius: theme.effects.roundedCorner6,
+    boxShadow: theme.effects.elevation4
+});
 /**
  * @private
  */
-export const localPreviewContainerStyleMobile = mergeStyles(Object.assign(Object.assign({}, localPreviewContainerStyle), { width: '100%', height: '100%', minHeight: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem` }));
+export const localPreviewContainerStyleMobile = (theme) => mergeStyles(localPreviewContainerStyle(theme), {
+    width: '100%',
+    height: '100%',
+    minHeight: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`
+});
 /**
  * @private
  */
@@ -24,7 +37,6 @@ export const cameraOffLabelStyle = mergeStyles({
  */
 export const localPreviewTileStyle = {
     root: {
-        borderRadius: '.25rem',
         '@media (forced-colors: active)': {
             borderColor: '#FFFFFF',
             border: '1px solid'

package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalPreview.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAkB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,qCAAqC,EAAE,wCAAwC,EAAE,wCAAwC,EAAE,MAAM,4BAA4B,CAAC;AACvK,MAAM,0BAA0B,GAAW;IACzC,YAAY,EAAE,QAAQ;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,WAAW,iCAClF,0BAA0B,KAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,GAAG,qCAAqC,KAAK,EACrD,QAAQ,EAAE,GAAG,wCAAwC,KAAK,EAC1D,QAAQ,EAAE,GAAG,wCAAwC,KAAK,EAC1D,MAAM,EAAE,mBAAmB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,EACvD,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,IACnC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,WAAW,iCACtD,0BAA0B,KAC7B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,GAAG,qCAAqC,KAAK,IACxD,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,OAAO;CAC5B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,YAAY,EAAE,QAAQ;QACtB,gCAAgC,EAAE;YAChC,WAAW,EAAE,SAAS;YACtB,MAAM,EAAE,WAAW;SACpB;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,IAAI,EAAE;QACJ,gCAAgC,EAAE;YAChC,QAAQ,EAAE;gBACR,MAAM,EAAE,sBAAsB,CAAC,qDAAqD;aACrF;YAED,eAAe,EAAE;gBACf,MAAM,EAAE,kBAAkB;gBAC1B,qDAAqD;gBACrD,OAAO,EAAE,kBAAkB;aAC5B;SACF;KACF;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, ITheme, mergeStyles } from '@fluentui/react';\nimport { CONFIGURATION_PAGE_SECTION_HEIGHT_REM, CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM, CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM } from './CallConfiguration.styles';\nconst localPreviewContainerStyle: IStyle = {\n  borderRadius: '.25rem'\n};\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleDesktop = (theme: ITheme): string => mergeStyles({\n  ...localPreviewContainerStyle,\n  width: '100%',\n  height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n  minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n  maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`,\n  border: `0.0625rem solid ${theme.palette.neutralLight}`,\n  boxShadow: theme.effects.elevation4\n});\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleMobile = mergeStyles({\n  ...localPreviewContainerStyle,\n  width: '100%',\n  height: '100%',\n  minHeight: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`\n});\n\n/**\n * @private\n */\nexport const cameraOffLabelStyle = mergeStyles({\n  fontSize: '0.75rem' // 12px\n});\n\n/**\n * @private\n */\nexport const localPreviewTileStyle = {\n  root: {\n    borderRadius: '.25rem',\n    '@media (forced-colors: active)': {\n      borderColor: '#FFFFFF',\n      border: '1px solid'\n    }\n  }\n};\n\n/**\n * @private\n */\nexport const localPreviewButtonStyle = {\n  root: {\n    '@media (forced-colors: active)': {\n      ':focus': {\n        border: '1px solid !important' // we need bang important to override fluents colours\n      },\n\n      ':focus::after': {\n        border: 'unset !important',\n        // we need bang important to override fluents colours\n        outline: 'unset !important'\n      }\n    }\n  }\n};"]}
+{"version":3,"file":"LocalPreview.styles.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/styles/LocalPreview.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAkB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,qCAAqC,EAAE,wCAAwC,EAAE,wCAAwC,EAAE,MAAM,4BAA4B,CAAC;AACvK,MAAM,0BAA0B,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,CAAC;IAC7D,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,QAAQ,EAAE,QAAQ,CAAC,0DAA0D;CAC9E,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,WAAW,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE;IACzH,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,GAAG,qCAAqC,KAAK;IACrD,QAAQ,EAAE,GAAG,wCAAwC,KAAK;IAC1D,QAAQ,EAAE,GAAG,wCAAwC,KAAK;IAC1D,MAAM,EAAE,mBAAmB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;IACvD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;IAC1C,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;CACpC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,WAAW,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE;IACxH,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,GAAG,qCAAqC,KAAK;CACzD,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,OAAO;CAC5B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE;QACJ,gCAAgC,EAAE;YAChC,WAAW,EAAE,SAAS;YACtB,MAAM,EAAE,WAAW;SACpB;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,IAAI,EAAE;QACJ,gCAAgC,EAAE;YAChC,QAAQ,EAAE;gBACR,MAAM,EAAE,sBAAsB,CAAC,qDAAqD;aACrF;YACD,eAAe,EAAE;gBACf,MAAM,EAAE,kBAAkB;gBAC1B,qDAAqD;gBACrD,OAAO,EAAE,kBAAkB;aAC5B;SACF;KACF;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, ITheme, mergeStyles } from '@fluentui/react';\nimport { CONFIGURATION_PAGE_SECTION_HEIGHT_REM, CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM, CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM } from './CallConfiguration.styles';\nconst localPreviewContainerStyle = (theme: ITheme): IStyle => ({\n  borderRadius: theme.effects.roundedCorner6,\n  overflow: 'hidden' // do not let child background overflow the curved corners\n});\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleDesktop = (theme: ITheme): string => mergeStyles(localPreviewContainerStyle(theme), {\n  width: '100%',\n  height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,\n  minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,\n  maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`,\n  border: `0.0625rem solid ${theme.palette.neutralLight}`,\n  borderRadius: theme.effects.roundedCorner6,\n  boxShadow: theme.effects.elevation4\n});\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleMobile = (theme: ITheme): string => mergeStyles(localPreviewContainerStyle(theme), {\n  width: '100%',\n  height: '100%',\n  minHeight: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`\n});\n\n/**\n * @private\n */\nexport const cameraOffLabelStyle = mergeStyles({\n  fontSize: '0.75rem' // 12px\n});\n\n/**\n * @private\n */\nexport const localPreviewTileStyle = {\n  root: {\n    '@media (forced-colors: active)': {\n      borderColor: '#FFFFFF',\n      border: '1px solid'\n    }\n  }\n};\n\n/**\n * @private\n */\nexport const localPreviewButtonStyle = {\n  root: {\n    '@media (forced-colors: active)': {\n      ':focus': {\n        border: '1px solid !important' // we need bang important to override fluents colours\n      },\n      ':focus::after': {\n        border: 'unset !important',\n        // we need bang important to override fluents colours\n        outline: 'unset !important'\n      }\n    }\n  }\n};"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CallControlOptions.d.ts

@@ -4,7 +4,7 @@ import { CommonCallControlOptions } from '../../common/types/CommonCallControlOp
  *
  * @public
  */
-export declare type CallControlOptions = (CommonCallControlOptions & {
+export type CallControlOptions = (CommonCallControlOptions & {
     /**
      * Show, Hide or Disable participants button during a call. This is the option only work for legacyControl bar.
      * @defaultValue true

package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CapabilityChangedNotificationTracking.d.ts

@@ -5,5 +5,5 @@ export interface CapabilityChangedNotificationTrackingInfo {
     lastDismissedAt?: Date;
 }
 /** @private */
-export declare type TrackedCapabilityChangedNotifications = Partial<Record<ParticipantCapabilityName, CapabilityChangedNotificationTrackingInfo>>;
+export type TrackedCapabilityChangedNotifications = Partial<Record<ParticipantCapabilityName, CapabilityChangedNotificationTrackingInfo>>;
 //# sourceMappingURL=CapabilityChangedNotificationTracking.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/types/ErrorTracking.d.ts

@@ -5,5 +5,5 @@ export interface ErrorTrackingInfo {
     lastDismissedAt?: Date;
 }
 /** @private */
-export declare type TrackedErrors = Partial<Record<ErrorType, ErrorTrackingInfo>>;
+export type TrackedErrors = Partial<Record<ErrorType, ErrorTrackingInfo>>;
 //# sourceMappingURL=ErrorTracking.d.ts.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/types/ErrorTracking.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorTracking.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/types/ErrorTracking.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ErrorType } from '@internal/react-components';\n\n/** @private */\nexport interface ErrorTrackingInfo {\n  mostRecentlyActive: Date;\n  lastDismissedAt?: Date;\n}\n\n/** @private */\nexport type TrackedErrors = Partial<Record<ErrorType, ErrorTrackingInfo>>;\"../../../../../react-components/src\""]}
+{"version":3,"file":"ErrorTracking.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/types/ErrorTracking.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ErrorType } from '@internal/react-components';\n\n/** @private */\nexport interface ErrorTrackingInfo {\n  mostRecentlyActive: Date;\n  lastDismissedAt?: Date;\n}\n\n/** @private */\nexport type TrackedErrors = Partial<Record<ErrorType, ErrorTrackingInfo>>;"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.d.ts

@@ -1,5 +1,5 @@
 import { RemoteParticipantState } from "../../../../../calling-stateful-client/src";
-declare type ParticipantChangedAnnouncmentStrings = {
+type ParticipantChangedAnnouncmentStrings = {
     participantJoinedNoticeString: string;
     twoParticipantJoinedNoticeString: string;
     threeParticipantJoinedNoticeString: string;