@azure/communication-react 1.11.0-alpha-202312111717 → 1.11.0-alpha-202312130012

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

@@ -13,7 +13,7 @@ const LOGO_HEIGHT_REM = 3;
  * @private
  */
 export const configurationStackTokensDesktop = {
-    childrenGap: '1rem'
+    childrenGap: '1.5rem'
 };
 /**
  * @private
@@ -63,6 +63,7 @@ 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.
@@ -78,8 +79,7 @@ export const selectionContainerStyle = (theme) => mergeStyles({
         right: 0,
         zIndex: 0,
         background: theme.palette.white,
-        opacity: 0.9,
-        borderRadius: theme.effects.roundedCorner4
+        opacity: 0.9
     }
 });
 /**
@@ -125,18 +125,23 @@ export const callDetailsContainerStyles = {
         alignSelf: 'center'
     }
 };
-const callDetailsStyle = {
+const callDetailsStyle = (theme) => ({
     fontSize: '0.9375',
-    lineHeight: '1.25rem'
-};
+    lineHeight: '1.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), { marginBottom: '0.5rem', textAlign: 'center' }));
+export const callDetailsStyleMobile = (theme) => mergeStyles(callDetailsStyle(theme), {
+    marginBottom: '0.5rem',
+    textAlign: 'center'
+});
 /**
  * @private
  */

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

@@ -1 +1 @@
-{"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../../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 {\n  IStackItemStyles,\n  IStackStyles,\n  IStackTokens,\n  IStyle,\n  mergeStyles,\n  IButtonStyles,\n  Theme,\n  IPanelStyles,\n  IFocusTrapZoneProps,\n  IImageStyles,\n  AnimationStyles,\n  ITheme\n} 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;\n\nconst LOGO_HEIGHT_REM = 3;\n\n/**\n * @private\n */\nexport const configurationStackTokensDesktop: IStackTokens = {\n  childrenGap: '1rem'\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\n      ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n      : '16rem', // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n    minHeight: desktop\n      ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n      : '13rem',\n    '::before': !backgroundImageUrl\n      ? undefined\n      : {\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 =>\n  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 = (theme: ITheme): string =>\n  mergeStyles(\n    {\n      fontSize: '1.2rem',\n      lineHeight: '1rem',\n      fontWeight: 600\n    },\n    configurationPageTextDecoration(theme)\n  );\n\n/**\n * @private\n */\nexport const titleContainerStyleMobile = (theme: ITheme): string =>\n  mergeStyles(\n    {\n      fontSize: '1.0625rem',\n      lineHeight: '1.375rem',\n      fontWeight: 600,\n      textAlign: 'center'\n    },\n    configurationPageTextDecoration(theme)\n  );\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};\n\nconst callDetailsStyle: IStyle = {\n  fontSize: '0.9375',\n  lineHeight: '1.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  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 =>\n  mergeStyles({\n    width: '100%',\n    position: 'relative',\n\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', // 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', // 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});\n"]}
+{"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../../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 {\n  IStackItemStyles,\n  IStackStyles,\n  IStackTokens,\n  IStyle,\n  mergeStyles,\n  IButtonStyles,\n  Theme,\n  IPanelStyles,\n  IFocusTrapZoneProps,\n  IImageStyles,\n  AnimationStyles,\n  ITheme\n} 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;\n\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\n      ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n      : '16rem', // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n    minHeight: desktop\n      ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n      : '13rem',\n    '::before': !backgroundImageUrl\n      ? undefined\n      : {\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 =>\n  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', // 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 =>\n  mergeStyles(\n    {\n      fontSize: '1.2rem',\n      lineHeight: '1rem',\n      fontWeight: 600\n    },\n    configurationPageTextDecoration(theme)\n  );\n\n/**\n * @private\n */\nexport const titleContainerStyleMobile = (theme: ITheme): string =>\n  mergeStyles(\n    {\n      fontSize: '1.0625rem',\n      lineHeight: '1.375rem',\n      fontWeight: 600,\n      textAlign: 'center'\n    },\n    configurationPageTextDecoration(theme)\n  );\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};\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 =>\n  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 =>\n  mergeStyles({\n    width: '100%',\n    position: 'relative',\n\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', // 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', // 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});\n"]}

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":["../../../../../../../../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;AAElE,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;AAEH,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';\n\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});\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};\n"]}
+{"version":3,"file":"CallPage.styles.js","sourceRoot":"","sources":["../../../../../../../../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;AAElE,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;AAEH,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';\n\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});\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};\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":["../../../../../../../../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,EACL,qCAAqC,EACrC,wCAAwC,EACxC,wCAAwC,EACzC,MAAM,4BAA4B,CAAC;AAEpC,MAAM,0BAA0B,GAAW;IACzC,YAAY,EAAE,QAAQ;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAa,EAAU,EAAE,CACzE,WAAW,iCACN,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;AAEL;;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;YACD,eAAe,EAAE;gBACf,MAAM,EAAE,kBAAkB,EAAE,qDAAqD;gBACjF,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 {\n  CONFIGURATION_PAGE_SECTION_HEIGHT_REM,\n  CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM,\n  CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM\n} from './CallConfiguration.styles';\n\nconst localPreviewContainerStyle: IStyle = {\n  borderRadius: '.25rem'\n};\n\n/**\n * @private\n */\nexport const localPreviewContainerStyleDesktop = (theme: ITheme): string =>\n  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      ':focus::after': {\n        border: 'unset !important', // we need bang important to override fluents colours\n        outline: 'unset !important'\n      }\n    }\n  }\n};\n"]}
+{"version":3,"file":"LocalPreview.styles.js","sourceRoot":"","sources":["../../../../../../../../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,EACL,qCAAqC,EACrC,wCAAwC,EACxC,wCAAwC,EACzC,MAAM,4BAA4B,CAAC;AAEpC,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,CACzE,WAAW,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE;IAC7C,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;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAAC,KAAa,EAAU,EAAE,CACxE,WAAW,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE;IAC7C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,GAAG,qCAAqC,KAAK;CACzD,CAAC,CAAC;AAEL;;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,EAAE,qDAAqD;gBACjF,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 {\n  CONFIGURATION_PAGE_SECTION_HEIGHT_REM,\n  CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM,\n  CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM\n} from './CallConfiguration.styles';\n\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 =>\n  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 =>\n  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', // we need bang important to override fluents colours\n        outline: 'unset !important'\n      }\n    }\n  }\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/localization/locales/ar-SA/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "المزيد",
         "captionsBannerMoreButtonTooltip": "خيارات إضافية",
         "dismissModalAriaLabel": "صورة وصورة محلية وبعيدة، اضغط على مفتاح الإدخال للعودة إلى المكالمة",
+        "callRejectedTitle": "إكمال المكالمة غير ممكن",
+        "callRejectedMoreDetails": "الشخص الذي تحاول الوصول إليه غير متوفر. الرجاء المحاولة مرة أخرى لاحقا.",
         "spokenLanguageStrings": {
             "ar-ae": "العربية - الإمارات العربية المتحدة",
             "ar-sa": "العربية - السعودية",

package/dist/dist-esm/react-composites/src/composites/localization/locales/cs-CZ/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Další",
         "captionsBannerMoreButtonTooltip": "Další možnosti",
         "dismissModalAriaLabel": "Místní a vzdálený obrázek a obrázek, stisknutím klávesy Enter se vrátíte k hovoru",
+        "callRejectedTitle": "Hovor nešlo spojit.",
+        "callRejectedMoreDetails": "Osoba, se kterou se pokoušíte spojit, není k dispozici. Zkuste to prosím znovu později.",
         "spokenLanguageStrings": {
             "ar-ae": "Arabština - Spojené arabské emiráty",
             "ar-sa": "Arabština - Saúdská Arábie",

package/dist/dist-esm/react-composites/src/composites/localization/locales/de-DE/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Mehr",
         "captionsBannerMoreButtonTooltip": "Weitere Optionen",
         "dismissModalAriaLabel": "Lokales Bild und Remotebild. Drücken Sie die EINGABETASTE, um zum Anruf zurückzukehren.",
+        "callRejectedTitle": "Der Anruf konnte nicht ausgeführt werden.",
+        "callRejectedMoreDetails": "Die Person, die Sie erreichen möchten, ist nicht verfügbar. Versuchen Sie es später noch mal.",
         "spokenLanguageStrings": {
             "ar-ae": "Arabisch – Vereinigte Arabische Emirate",
             "ar-sa": "Arabisch – Saudi-Arabien",

package/dist/dist-esm/react-composites/src/composites/localization/locales/en-GB/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "More",
         "captionsBannerMoreButtonTooltip": "More options",
         "dismissModalAriaLabel": "Local and remote picture and picture, press enter to return to call",
+        "callRejectedTitle": "The call could not be completed",
+        "callRejectedMoreDetails": "The person you are trying to reach is unavailable. Please try again later.",
         "spokenLanguageStrings": {
             "ar-ae": "Arabic - U.A.E.",
             "ar-sa": "Arabic - Saudi Arabia",

package/dist/dist-esm/react-composites/src/composites/localization/locales/es-ES/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Más",
         "captionsBannerMoreButtonTooltip": "Más opciones",
         "dismissModalAriaLabel": "Imagen e imagen local y remota, presiona Entrar para volver a la llamada",
+        "callRejectedTitle": "No se pudo completar la llamada",
+        "callRejectedMoreDetails": "La persona con la que quieres contactarte no está disponible. Inténtalo de nuevo más tarde.",
         "spokenLanguageStrings": {
             "ar-ae": "Árabe - Emiratos Árabes Unidos",
             "ar-sa": "Árabe - Arabia Saudí",

package/dist/dist-esm/react-composites/src/composites/localization/locales/fi-FI/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Lisää",
         "captionsBannerMoreButtonTooltip": "Lisää vaihtoehtoja",
         "dismissModalAriaLabel": "Paikallinen kuva ja etäkuva, palaa puheluun painamalla Enter-näppäintä",
+        "callRejectedTitle": "Puhelua ei voitu soittaa",
+        "callRejectedMoreDetails": "Henkilö, jota yrität tavoittaa, ei ole tavoitettavissa. Yritä myöhemmin uudelleen.",
         "spokenLanguageStrings": {
             "ar-ae": "arabia – Arabiemiirikunnat",
             "ar-sa": "arabia – Saudi-Arabia",

package/dist/dist-esm/react-composites/src/composites/localization/locales/fr-FR/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Plus",
         "captionsBannerMoreButtonTooltip": "Autres options",
         "dismissModalAriaLabel": "Image et image locales et distantes, appuyez sur entrée pour revenir à l'appel",
+        "callRejectedTitle": "Nous n’avons pas pu effectuer l’appel",
+        "callRejectedMoreDetails": "La personne que vous essayez de rejoindre n’est pas disponible. Veuillez réessayer plus tard.",
         "spokenLanguageStrings": {
             "ar-ae": "Arabe – E.A.U.",
             "ar-sa": "Arabe – Arabie saoudite",

package/dist/dist-esm/react-composites/src/composites/localization/locales/he-IL/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "עוד",
         "captionsBannerMoreButtonTooltip": "אפשרויות נוספות",
         "dismissModalAriaLabel": "תמונה מקומית ותמונה מרוחקת, הקש על Enter כדי לחזור לשיחה.",
+        "callRejectedTitle": "לא הייתה אפשרות להשלים את השיחה.",
+        "callRejectedMoreDetails": "האדם שאליו אתה מנסה להגיע אינו זמין. נסה שוב מאוחר יותר.",
         "spokenLanguageStrings": {
             "ar-ae": "ערבית - איחוד האמירויות",
             "ar-sa": "ערבית - ערב הסעודית",

package/dist/dist-esm/react-composites/src/composites/localization/locales/it-IT/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Altro",
         "captionsBannerMoreButtonTooltip": "Altre opzioni",
         "dismissModalAriaLabel": "Immagine e immagine locale e remota, premi INVIO per tornare alla chiamata",
+        "callRejectedTitle": "Non è stato possibile completare la chiamata",
+        "callRejectedMoreDetails": "La persona che stai tentando di raggiungere non è disponibile. Riprovare più tardi.",
         "spokenLanguageStrings": {
             "ar-ae": "Arabo - Emirati Arabi Uniti",
             "ar-sa": "Arabo - Arabia Saudita",

package/dist/dist-esm/react-composites/src/composites/localization/locales/ja-JP/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "その他",
         "captionsBannerMoreButtonTooltip": "その他のオプション",
         "dismissModalAriaLabel": "ローカルとリモートの画像と画像。通話に戻るには Enter キーを押します",
+        "callRejectedTitle": "通話を完了できませんでした",
+        "callRejectedMoreDetails": "連絡を取ろうとしているユーザーは利用できません。後でもう一度お試しください。",
         "spokenLanguageStrings": {
             "ar-ae": "アラビア語 - U.A.E.",
             "ar-sa": "アラビア語 - サウジアラビア",

package/dist/dist-esm/react-composites/src/composites/localization/locales/ko-KR/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "기타",
         "captionsBannerMoreButtonTooltip": "기타 옵션",
         "dismissModalAriaLabel": "로컬 및 원격 사진 및 그림, Enter 키를 눌러 통화로 돌아가기",
+        "callRejectedTitle": "통화를 완료할 수 없습니다.",
+        "callRejectedMoreDetails": "연결하려는 사용자와 지금 대화할 수 없습니다. 나중에 다시 시도하세요.",
         "spokenLanguageStrings": {
             "ar-ae": "아랍어 - 아랍에미리트",
             "ar-sa": "아라비아어 - 사우디 아라비아",

package/dist/dist-esm/react-composites/src/composites/localization/locales/nb-NO/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Mer",
         "captionsBannerMoreButtonTooltip": "Flere alternativer",
         "dismissModalAriaLabel": "Lokalt og eksternt bilde og bilde, trykk på Enter for å gå tilbake til samtalen",
+        "callRejectedTitle": "Kan ikke fullføre samtalen",
+        "callRejectedMoreDetails": "Personen du prøver å nå, er ikke tilgjengelig. Prøv på nytt senere.",
         "spokenLanguageStrings": {
             "ar-ae": "Arabisk – De forente arabiske emirater",
             "ar-sa": "Arabisk – Saudi-Arabia",

package/dist/dist-esm/react-composites/src/composites/localization/locales/nl-NL/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Meer",
         "captionsBannerMoreButtonTooltip": "Meer opties",
         "dismissModalAriaLabel": "Lokale en externe afbeelding en afbeelding, druk op Enter om terug te keren naar het gesprek",
+        "callRejectedTitle": "De aanroep kan niet worden voltooid",
+        "callRejectedMoreDetails": "De persoon die u probeert te bereiken, is niet beschikbaar. Probeer het later opnieuw.",
         "spokenLanguageStrings": {
             "ar-ae": "Arabisch - Verenigde Arabische Emiraten",
             "ar-sa": "Arabisch - Saudi-Arabië",

package/dist/dist-esm/react-composites/src/composites/localization/locales/pl-PL/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Więcej",
         "captionsBannerMoreButtonTooltip": "Więcej opcji",
         "dismissModalAriaLabel": "Lokalny i zdalny obraz i obraz, naciśnij klawisz Enter, aby powrócić do rozmowy",
+        "callRejectedTitle": "Nie można zakończyć rozmowy",
+        "callRejectedMoreDetails": "Osoba, z którą próbujesz się skontaktować, jest niedostępna. Spróbuj ponownie później.",
         "spokenLanguageStrings": {
             "ar-ae": "arabski — Zjednoczone Emiraty Arabskie",
             "ar-sa": "arabski — Arabia Saudyjska",

package/dist/dist-esm/react-composites/src/composites/localization/locales/pt-BR/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Mais",
         "captionsBannerMoreButtonTooltip": "Mais opções",
         "dismissModalAriaLabel": "Imagem e imagem local e remota, pressione Enter para retornar à chamada",
+        "callRejectedTitle": "Não foi possível concluir a chamada",
+        "callRejectedMoreDetails": "A pessoa que você está tentando acessar não está disponível. Tente novamente mais tarde.",
         "spokenLanguageStrings": {
             "ar-ae": "Árabe - Emirados Árabes Unidos",
             "ar-sa": "Árabe - Arábia Saudita",

package/dist/dist-esm/react-composites/src/composites/localization/locales/ru-RU/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Дополнительно",
         "captionsBannerMoreButtonTooltip": "Дополнительные параметры",
         "dismissModalAriaLabel": "Локальное и удаленное изображение. Нажмите клавишу ВВОД, чтобы вернуться к звонку.",
+        "callRejectedTitle": "Не удалось совершить звонок",
+        "callRejectedMoreDetails": "Пользователь, с которым вы пытаетесь связаться, недоступен. Повторите попытку позже.",
         "spokenLanguageStrings": {
             "ar-ae": "Арабский (ОАЭ)",
             "ar-sa": "Арабский (Саудовская Аравия)",

package/dist/dist-esm/react-composites/src/composites/localization/locales/sv-SE/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Mer",
         "captionsBannerMoreButtonTooltip": "Fler alternativ",
         "dismissModalAriaLabel": "Lokal bild och fjärrbild och bild, tryck på Retur för att återgå till samtalet",
+        "callRejectedTitle": "Det gick inte att slutföra samtalet",
+        "callRejectedMoreDetails": "Personen du försöker nå är inte tillgänglig. Försök igen senare.",
         "spokenLanguageStrings": {
             "ar-ae": "Arabiska – Förenade Arabemiraten",
             "ar-sa": "Arabiska – Saudiarabien",

package/dist/dist-esm/react-composites/src/composites/localization/locales/tr-TR/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "Diğer",
         "captionsBannerMoreButtonTooltip": "Diğer seçenekler",
         "dismissModalAriaLabel": "Yerel ve uzak resim ve resim, aramaya geri dönmek için Enter tuşuna basın",
+        "callRejectedTitle": "Arama tamamlanamadı",
+        "callRejectedMoreDetails": "Ulaşmaya çalıştığınız kişi kullanılamıyor. Lütfen daha sonra yeniden deneyin.",
         "spokenLanguageStrings": {
             "ar-ae": "Arapça - BAE",
             "ar-sa": "Arapça - Suudi Arabistan",

package/dist/dist-esm/react-composites/src/composites/localization/locales/zh-CN/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "更多",
         "captionsBannerMoreButtonTooltip": "更多选项",
         "dismissModalAriaLabel": "本地和远程图片和图像，按 Enter 返回呼叫",
+        "callRejectedTitle": "无法完成呼叫",
+        "callRejectedMoreDetails": "您尝试联系的人员不可用。请稍后重试。",
         "spokenLanguageStrings": {
             "ar-ae": "阿拉伯语 - 阿拉伯联合酋长国",
             "ar-sa": "阿拉伯语 - 沙特阿拉伯",

package/dist/dist-esm/react-composites/src/composites/localization/locales/zh-TW/strings.json

@@ -116,6 +116,8 @@
         "captionsBannerMoreButtonCallingLabel": "其他",
         "captionsBannerMoreButtonTooltip": "更多選項",
         "dismissModalAriaLabel": "本機和遠端圖片，按 Enter 以返回通話",
+        "callRejectedTitle": "無法完成通話",
+        "callRejectedMoreDetails": "您嘗試連絡的人員無法使用。請稍後再試。",
         "spokenLanguageStrings": {
             "ar-ae": "阿拉伯文 - 阿拉伯聯合大公國",
             "ar-sa": "阿拉伯文 - 沙烏地阿拉伯",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.11.0-alpha-202312111717",
+  "version": "1.11.0-alpha-202312130012",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -53,7 +53,7 @@
   "peerDependencies": {
     "@azure/communication-calling": "1.20.1-beta.2",
     "@azure/communication-calling-effects": "1.0.1",
-    "@azure/communication-chat": "1.4.0-beta.2",
+    "@azure/communication-chat": "1.5.0-beta.1",
     "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0",
@@ -62,7 +62,6 @@
   "main": "./dist/dist-cjs/communication-react/index.js",
   "module": "./dist/dist-esm/communication-react/src/index.js",
   "scripts": {
-    "prepare": "ts-patch install -s",
     "copy-original": "cpx \"../*/src/**\" ./preprocess-dist && renamer --find src --replace preprocessed ./preprocess-dist/**/*",
     "preprocess": "babel ../*/src --out-dir ../preprocessed --extensions \".ts,.tsx\" --keep-file-extension --config-file ./.babelrc.js --relative && rimraf ../preprocessed",
     "copy-preprocess": "cpx \"../*/preprocessed/**\" ./preprocess-dist && renamer --find preprocessed --replace src ./preprocess-dist/**/*",