@azure/communication-react 1.13.0-alpha-202402110013 → 1.13.0-alpha-202402130013

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.13.0-alpha-202402110013';
+module.exports = '1.13.0-alpha-202402130013';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.13.0-alpha-202402110013';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.13.0-alpha-202402130013';\n"]}

package/dist/dist-esm/react-components/src/components/ImageOverlay.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { SyntheticEvent } from 'react';
 /**
  * Props for {@link ImageOverlay}.
  *
@@ -30,9 +30,13 @@ export interface ImageOverlayProps {
      */
     onDismiss: () => void;
     /**
-     * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.
+     * Callback called when the download button is clicked.
      */
-    onDownloadButtonClicked?: (imageSrc: string) => void;
+    onDownloadButtonClicked: (imageSrc: string) => void;
+    /**
+     * Callback called when there's an error loading the image.
+     */
+    onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;
 }
 /**
  * Strings of {@link ImageOverlay} that can be overridden.

package/dist/dist-esm/react-components/src/components/ImageOverlay.js

@@ -7,47 +7,46 @@ import React, { useState } from 'react';
 /* @conditional-compile-remove(image-overlay) */
 import { bodyContainer, brokenImageStyle, cancelIcon, closeButtonStyles, controlBarContainerStyle, downloadButtonStyle, downloadIcon, downloadIconStyle, focusTrapZoneStyle, headerStyle, normalImageStyle, overlayStyles, scrollableContentStyle, smallDownloadButtonContainerStyle, titleBarContainerStyle, titleStyle } from './styles/ImageOverlay.style';
 /* @conditional-compile-remove(image-overlay) */
-import { FluentThemeProvider } from '../theming/FluentThemeProvider';
+import { useTheme } from '../theming/FluentThemeProvider';
 /* @conditional-compile-remove(image-overlay) */
 import { useLocale } from '../localization';
 /* @conditional-compile-remove(image-overlay) */
-import { imageOverlayTheme } from '../theming';
-/* @conditional-compile-remove(image-overlay) */
 /**
  * Component to render a fullscreen modal for a selected image.
  *
  * @beta
  */
 export const ImageOverlay = (props) => {
-    const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;
+    const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss, onError } = props;
+    const theme = useTheme();
     /* @conditional-compile-remove(image-overlay) */
     const localeStrings = useLocale().strings.imageOverlay;
     const [isImageLoaded, setIsImageLoaded] = useState(true);
-    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);
+    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
     const renderHeaderBar = () => {
         return (React.createElement(Stack, { className: mergeStyles(headerStyle) },
             React.createElement(Stack, { className: mergeStyles(titleBarContainerStyle) },
                 titleIcon,
-                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(imageOverlayTheme)), "aria-label": title || 'Image' }, title)),
+                React.createElement(Stack.Item, { className: mergeStyles(titleStyle(theme)), "aria-label": title || 'Image' }, title)),
             React.createElement(Stack, { className: mergeStyles(controlBarContainerStyle) },
-                onDownloadButtonClicked && (React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle), 
+                React.createElement(DefaultButton, { className: mergeStyles(downloadButtonStyle(theme)), 
                     /* @conditional-compile-remove(image-overlay) */
-                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel })),
-                onDownloadButtonClicked && (React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme)), onClick: () => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' })),
-                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(imageOverlayTheme)), onClick: onDismiss, 
+                    text: localeStrings.downloadButtonLabel, onClick: () => onDownloadButtonClicked(imageSrc), onRenderIcon: () => React.createElement(Icon, { iconName: downloadIcon.iconName, className: mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
+                React.createElement(IconButton, { iconProps: downloadIcon, className: mergeStyles(smallDownloadButtonContainerStyle(theme)), onClick: () => onDownloadButtonClicked(imageSrc), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
+                React.createElement(IconButton, { iconProps: cancelIcon, className: mergeStyles(closeButtonStyles(theme)), onClick: onDismiss, 
                     /* @conditional-compile-remove(image-overlay) */
                     ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
     };
     const renderBodyWithLightDismiss = () => {
-        return (React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "aria-live": 'polite', onError: () => {
+        return (React.createElement(Stack, { className: mergeStyles(bodyContainer), onClick: () => props.onDismiss() }, imageSrc && (React.createElement("img", { src: imageSrc, className: mergeStyles(imageStyle), alt: altText || 'image', "aria-label": 'image-overlay-main-image', "aria-live": 'polite', onError: (event) => {
                 setIsImageLoaded(false);
+                onError && onError(event);
             }, onClick: (event) => event.stopPropagation(), onDoubleClick: (event) => {
                 event.persist();
             } }))));
     };
-    return (React.createElement(FluentThemeProvider, { fluentTheme: imageOverlayTheme },
-        React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(imageOverlayTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
-            renderHeaderBar(),
-            renderBodyWithLightDismiss())));
+    return (React.createElement(Modal, { titleAriaId: title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
+        renderHeaderBar(),
+        renderBodyWithLightDismiss()));
 };
 //# sourceMappingURL=ImageOverlay.js.map

package/dist/dist-esm/react-components/src/components/ImageOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) */\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport React, { useState } from 'react';\n/* @conditional-compile-remove(image-overlay) */\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageOverlay.style';\n/* @conditional-compile-remove(image-overlay) */\nimport { FluentThemeProvider } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-overlay) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay) */\nimport { imageOverlayTheme } from '../theming';\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Props for {@link ImageOverlay}.\n *\n * @beta\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Optional callback called when the download button is clicked. If not provided, the download button will not be rendered.\n   */\n  onDownloadButtonClicked?: (imageSrc: string) => void;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @beta\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @beta\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss } = props;\n\n  /* @conditional-compile-remove(image-overlay) */\n  const localeStrings = useLocale().strings.imageOverlay;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(imageOverlayTheme);\n\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(imageOverlayTheme))} aria-label={title || 'Image'}>\n            {title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          {onDownloadButtonClicked && (\n            <DefaultButton\n              className={mergeStyles(downloadButtonStyle)}\n              /* @conditional-compile-remove(image-overlay) */\n              text={localeStrings.downloadButtonLabel}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n              aria-live={'polite'}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n            />\n          )}\n          {onDownloadButtonClicked && (\n            <IconButton\n              iconProps={downloadIcon}\n              className={mergeStyles(smallDownloadButtonContainerStyle(imageOverlayTheme))}\n              onClick={() => onDownloadButtonClicked && onDownloadButtonClicked(imageSrc)}\n              /* @conditional-compile-remove(image-overlay) */\n              aria-label={localeStrings.downloadButtonLabel}\n              aria-live={'polite'}\n            />\n          )}\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(imageOverlayTheme))}\n            onClick={onDismiss}\n            /* @conditional-compile-remove(image-overlay) */\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && (\n          <img\n            src={imageSrc}\n            className={mergeStyles(imageStyle)}\n            alt={altText || 'image'}\n            aria-label={'image-overlay-main-image'}\n            aria-live={'polite'}\n            onError={() => {\n              setIsImageLoaded(false);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <FluentThemeProvider fluentTheme={imageOverlayTheme}>\n      <Modal\n        titleAriaId={title}\n        isOpen={isOpen}\n        onDismiss={onDismiss}\n        overlay={{ styles: { ...overlayStyles(imageOverlayTheme) } }}\n        styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n        isDarkOverlay={true}\n      >\n        {renderHeaderBar()}\n        {renderBodyWithLightDismiss()}\n      </Modal>\n    </FluentThemeProvider>\n  );\n};\n"]}
+{"version":3,"file":"ImageOverlay.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ImageOverlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(image-overlay) */\nimport { DefaultButton, Icon, IconButton, Modal, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport React, { SyntheticEvent, useState } from 'react';\n/* @conditional-compile-remove(image-overlay) */\nimport {\n  bodyContainer,\n  brokenImageStyle,\n  cancelIcon,\n  closeButtonStyles,\n  controlBarContainerStyle,\n  downloadButtonStyle,\n  downloadIcon,\n  downloadIconStyle,\n  focusTrapZoneStyle,\n  headerStyle,\n  normalImageStyle,\n  overlayStyles,\n  scrollableContentStyle,\n  smallDownloadButtonContainerStyle,\n  titleBarContainerStyle,\n  titleStyle\n} from './styles/ImageOverlay.style';\n/* @conditional-compile-remove(image-overlay) */\nimport { useTheme } from '../theming/FluentThemeProvider';\n/* @conditional-compile-remove(image-overlay) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(image-overlay) */\nimport { ChatTheme } from '../theming';\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Props for {@link ImageOverlay}.\n *\n * @beta\n */\nexport interface ImageOverlayProps {\n  /**\n   * Boolean that controls whether the modal is displayed.\n   */\n  isOpen: boolean;\n  /**\n   * Image source used to display the image in a large scale.\n   */\n  imageSrc: string;\n  /**\n   * Optional string used as a alt text for the image. @default 'image'\n   */\n  altText?: string;\n  /**\n   * Optional string used as the title of the image and displayed on the top left corner of the ImageOverlay.\n   */\n  title?: string;\n  /**\n   * Optional JSX element used as a title icon and displayed to the left of the title element.\n   */\n  titleIcon?: JSX.Element;\n  /**\n   * Callback to invoke when the ImageOverlay modal is dismissed\n   */\n  onDismiss: () => void;\n  /**\n   * Callback called when the download button is clicked.\n   */\n  onDownloadButtonClicked: (imageSrc: string) => void;\n  /**\n   * Callback called when there's an error loading the image.\n   */\n  onError?: (event: SyntheticEvent<HTMLImageElement, Event>) => void;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Strings of {@link ImageOverlay} that can be overridden.\n *\n * @beta\n */\nexport interface ImageOverlayStrings {\n  /**\n   * Download button label for ImageOverlay\n   */\n  downloadButtonLabel: string;\n  /**\n   * Dismiss button aria label for ImageOverlay\n   */\n  dismissButtonAriaLabel: string;\n}\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Component to render a fullscreen modal for a selected image.\n *\n * @beta\n */\nexport const ImageOverlay = (props: ImageOverlayProps): JSX.Element => {\n  const { isOpen, imageSrc, title, titleIcon, altText, onDownloadButtonClicked, onDismiss, onError } = props;\n  const theme = useTheme() as unknown as ChatTheme;\n\n  /* @conditional-compile-remove(image-overlay) */\n  const localeStrings = useLocale().strings.imageOverlay;\n\n  const [isImageLoaded, setIsImageLoaded] = useState<boolean>(true);\n\n  const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);\n\n  const renderHeaderBar = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(headerStyle)}>\n        <Stack className={mergeStyles(titleBarContainerStyle)}>\n          {titleIcon}\n          <Stack.Item className={mergeStyles(titleStyle(theme))} aria-label={title || 'Image'}>\n            {title}\n          </Stack.Item>\n        </Stack>\n        <Stack className={mergeStyles(controlBarContainerStyle)}>\n          <DefaultButton\n            className={mergeStyles(downloadButtonStyle(theme))}\n            /* @conditional-compile-remove(image-overlay) */\n            text={localeStrings.downloadButtonLabel}\n            onClick={() => onDownloadButtonClicked(imageSrc)}\n            onRenderIcon={() => <Icon iconName={downloadIcon.iconName} className={mergeStyles(downloadIconStyle)} />}\n            aria-live={'polite'}\n            /* @conditional-compile-remove(image-overlay) */\n            aria-label={localeStrings.downloadButtonLabel}\n          />\n          <IconButton\n            iconProps={downloadIcon}\n            className={mergeStyles(smallDownloadButtonContainerStyle(theme))}\n            onClick={() => onDownloadButtonClicked(imageSrc)}\n            /* @conditional-compile-remove(image-overlay) */\n            aria-label={localeStrings.downloadButtonLabel}\n            aria-live={'polite'}\n          />\n          <IconButton\n            iconProps={cancelIcon}\n            className={mergeStyles(closeButtonStyles(theme))}\n            onClick={onDismiss}\n            /* @conditional-compile-remove(image-overlay) */\n            ariaLabel={localeStrings.dismissButtonAriaLabel}\n            aria-live={'polite'}\n          />\n        </Stack>\n      </Stack>\n    );\n  };\n\n  const renderBodyWithLightDismiss = (): JSX.Element => {\n    return (\n      <Stack className={mergeStyles(bodyContainer)} onClick={() => props.onDismiss()}>\n        {imageSrc && (\n          <img\n            src={imageSrc}\n            className={mergeStyles(imageStyle)}\n            alt={altText || 'image'}\n            aria-label={'image-overlay-main-image'}\n            aria-live={'polite'}\n            onError={(event) => {\n              setIsImageLoaded(false);\n              onError && onError(event);\n            }}\n            onClick={(event) => event.stopPropagation()}\n            onDoubleClick={(event) => {\n              event.persist();\n            }}\n          />\n        )}\n      </Stack>\n    );\n  };\n\n  return (\n    <Modal\n      titleAriaId={title}\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      overlay={{ styles: { ...overlayStyles(theme) } }}\n      styles={{ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }}\n      isDarkOverlay={true}\n    >\n      {renderHeaderBar()}\n      {renderBodyWithLightDismiss()}\n    </Modal>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/ImageOverlay.style.d.ts

@@ -1,5 +1,6 @@
-import { IIconProps, IStyle, PartialTheme } from '@fluentui/react';
+import { IIconProps, IStyle } from '@fluentui/react';
 import { IOverlayStyles } from '@fluentui/react';
+import { ChatTheme } from '../../theming/themes';
 /**
  * @private
  */
@@ -11,7 +12,7 @@ export declare const downloadIcon: IIconProps;
 /**
  * @private
  */
-export declare const overlayStyles: (theme: PartialTheme) => IOverlayStyles;
+export declare const overlayStyles: (theme: ChatTheme) => IOverlayStyles;
 /**
  * @private
  */
@@ -31,7 +32,7 @@ export declare const titleBarContainerStyle: IStyle;
 /**
  * @private
  */
-export declare const titleStyle: (theme: PartialTheme) => IStyle;
+export declare const titleStyle: (theme: ChatTheme) => IStyle;
 /**
  * @private
  */
@@ -51,17 +52,17 @@ export declare const normalImageStyle: IStyle;
 /**
  * @private
  */
-export declare const brokenImageStyle: (theme: PartialTheme) => IStyle;
+export declare const brokenImageStyle: (theme: ChatTheme) => IStyle;
 /**
  * @private
  */
-export declare const closeButtonStyles: (theme: PartialTheme) => IStyle;
+export declare const closeButtonStyles: (theme: ChatTheme) => IStyle;
 /**
  * @private
  */
-export declare const downloadButtonStyle: IStyle;
+export declare const downloadButtonStyle: (theme: ChatTheme) => IStyle;
 /**
  * @private
  */
-export declare const smallDownloadButtonContainerStyle: (theme: PartialTheme) => IStyle;
+export declare const smallDownloadButtonContainerStyle: (theme: ChatTheme) => IStyle;
 //# sourceMappingURL=ImageOverlay.style.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/ImageOverlay.style.js

@@ -15,11 +15,10 @@ export const downloadIcon = {
  * @private
  */
 export const overlayStyles = (theme) => {
-    var _a;
     return {
         root: {
-            background: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.white,
-            opacity: '0.95'
+            background: theme.chatPalette.modalOverlayBlack,
+            opacity: '0.85'
         }
     };
 };
@@ -68,14 +67,14 @@ export const titleBarContainerStyle = {
     alignContent: 'center',
     alignItems: 'center'
 };
+/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const titleStyle = (theme) => {
-    var _a;
     return {
         paddingLeft: '0.5rem',
-        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
+        color: theme.chatPalette.modalTitleWhite,
         fontFamily: 'inherit',
         fontSize: '0.875rem',
         fontStyle: 'normal',
@@ -123,60 +122,77 @@ export const normalImageStyle = {
     maxHeight: '100%',
     maxWidth: '100%'
 };
+/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const brokenImageStyle = (theme) => {
-    var _a;
     return {
-        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black
+        color: theme.chatPalette.modalTitleWhite
     };
 };
+/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const closeButtonStyles = (theme) => {
-    var _a, _b, _c;
     return {
-        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
+        color: theme.chatPalette.modalTitleWhite,
         ':hover': {
-            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
         },
         ':active': {
-            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
         }
     };
 };
+/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
-export const downloadButtonStyle = {
-    margin: '0 0.5rem',
-    height: '32px',
-    borderWidth: '1px',
-    fontSize: '0.875rem', // 14px
-    fontWeight: 600,
-    padding: '0.38rem 0.75rem',
-    borderRadius: '4px',
-    whiteSpace: 'nowrap',
-    '@media (max-width: 25rem)': {
-        display: 'none'
-    }
+export const downloadButtonStyle = (theme) => {
+    return {
+        margin: '0 0.5rem',
+        height: '32px',
+        borderWidth: '1px',
+        fontSize: '0.875rem', // 14px
+        fontWeight: 600,
+        padding: '0.38rem 0.75rem',
+        borderRadius: '4px',
+        backgroundColor: theme.chatPalette.modalButtonBackground,
+        color: theme.chatPalette.modalTitleWhite,
+        whiteSpace: 'nowrap',
+        ':hover': {
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
+        },
+        ':active': {
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
+        },
+        '@media (max-width: 25rem)': {
+            display: 'none'
+        }
+    };
 };
+/* @conditional-compile-remove(image-overlay) */
 /**
  * @private
  */
 export const smallDownloadButtonContainerStyle = (theme) => {
-    var _a, _b, _c;
     return {
         marginRight: '0.5rem',
+        color: theme.chatPalette.modalTitleWhite,
         whiteSpace: 'nowrap',
-        color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
         ':hover': {
-            color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundHover
         },
         ':active': {
-            color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
+            color: theme.chatPalette.modalTitleWhite,
+            backgroundColor: theme.chatPalette.modalButtonBackgroundActive
         },
         '@media (min-width: 25rem)': {
             display: 'none'

package/dist/dist-esm/react-components/src/components/styles/ImageOverlay.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconProps, IStyle, PartialTheme } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport { IOverlayStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/**\n * @private\n */\nexport const downloadIcon: IIconProps = {\n  iconName: 'Download'\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const overlayStyles = (theme: PartialTheme): IOverlayStyles => {\n  return {\n    root: {\n      background: theme.palette?.white,\n      opacity: '0.95'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const focusTrapZoneStyle: IStyle = {\n  boxShadow: 'none',\n  background: 'transparent',\n  display: 'flex',\n  width: '100%',\n  height: '100%',\n  maxWidth: '100%',\n  maxHeight: '100%'\n};\n\n/**\n * @private\n */\nexport const scrollableContentStyle: IStyle = {\n  overflowY: 'hidden',\n  display: 'flex',\n  maxWidth: '100%',\n  maxHeight: '100%',\n  flexDirection: 'column',\n  flexWrap: 'nowrap'\n};\n\n/**\n * @private\n */\nexport const headerStyle: IStyle = {\n  fontSize: 'inherit',\n  margin: '0',\n  width: '100%',\n  height: '3.5rem',\n  flexDirection: 'row',\n  justifyContent: 'space-between',\n  padding: '0.25rem 0.75rem'\n};\n\n/**\n * @private\n */\nexport const titleBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const titleStyle = (theme: PartialTheme): IStyle => {\n  return {\n    paddingLeft: '0.5rem',\n    color: theme.palette?.black,\n    fontFamily: 'inherit',\n    fontSize: '0.875rem',\n    fontStyle: 'normal',\n    fontWeight: '600',\n    lineHeight: '1.25rem'\n  };\n};\n\n/**\n * @private\n */\nexport const controlBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const downloadIconStyle: IStyle = {\n  marginRight: '0.5em',\n  fontSize: '0.875rem' // 14px\n};\n\n/**\n * @private\n */\nexport const bodyContainer: IStyle = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  padding: '1rem 2rem 3rem 2rem',\n  '@media (max-width: 25rem) or (max-height: 25rem)': {\n    padding: '0rem 1rem 2rem 1rem'\n  }\n};\n\n/**\n * @private\n */\nexport const normalImageStyle: IStyle = {\n  objectFit: 'contain',\n  maxHeight: '100%',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const brokenImageStyle = (theme: PartialTheme): IStyle => {\n  return {\n    color: theme.palette?.black\n  };\n};\n\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: PartialTheme): IStyle => {\n  return {\n    color: theme.palette?.black,\n    ':hover': {\n      color: theme.palette?.black\n    },\n    ':active': {\n      color: theme.palette?.black\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const downloadButtonStyle: IStyle = {\n  margin: '0 0.5rem',\n  height: '32px',\n  borderWidth: '1px',\n  fontSize: '0.875rem', // 14px\n  fontWeight: 600,\n  padding: '0.38rem 0.75rem',\n  borderRadius: '4px',\n  whiteSpace: 'nowrap',\n  '@media (max-width: 25rem)': {\n    display: 'none'\n  }\n};\n\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: PartialTheme): IStyle => {\n  return {\n    marginRight: '0.5rem',\n    whiteSpace: 'nowrap',\n    color: theme.palette?.black,\n    ':hover': {\n      color: theme.palette?.black\n    },\n    ':active': {\n      color: theme.palette?.black\n    },\n    '@media (min-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n"]}
+{"version":3,"file":"ImageOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconProps, IStyle } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport { IOverlayStyles } from '@fluentui/react';\n/* @conditional-compile-remove(image-overlay) */\nimport { ChatTheme } from '../../theming/themes';\n\n/**\n * @private\n */\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/**\n * @private\n */\nexport const downloadIcon: IIconProps = {\n  iconName: 'Download'\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const overlayStyles = (theme: ChatTheme): IOverlayStyles => {\n  return {\n    root: {\n      background: theme.chatPalette.modalOverlayBlack,\n      opacity: '0.85'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const focusTrapZoneStyle: IStyle = {\n  boxShadow: 'none',\n  background: 'transparent',\n  display: 'flex',\n  width: '100%',\n  height: '100%',\n  maxWidth: '100%',\n  maxHeight: '100%'\n};\n\n/**\n * @private\n */\nexport const scrollableContentStyle: IStyle = {\n  overflowY: 'hidden',\n  display: 'flex',\n  maxWidth: '100%',\n  maxHeight: '100%',\n  flexDirection: 'column',\n  flexWrap: 'nowrap'\n};\n\n/**\n * @private\n */\nexport const headerStyle: IStyle = {\n  fontSize: 'inherit',\n  margin: '0',\n  width: '100%',\n  height: '3.5rem',\n  flexDirection: 'row',\n  justifyContent: 'space-between',\n  padding: '0.25rem 0.75rem'\n};\n\n/**\n * @private\n */\nexport const titleBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const titleStyle = (theme: ChatTheme): IStyle => {\n  return {\n    paddingLeft: '0.5rem',\n    color: theme.chatPalette.modalTitleWhite,\n    fontFamily: 'inherit',\n    fontSize: '0.875rem',\n    fontStyle: 'normal',\n    fontWeight: '600',\n    lineHeight: '1.25rem'\n  };\n};\n\n/**\n * @private\n */\nexport const controlBarContainerStyle: IStyle = {\n  flexDirection: 'row',\n  justifyContent: 'start',\n  flexWrap: 'wrap',\n  alignContent: 'center',\n  alignItems: 'center'\n};\n\n/**\n * @private\n */\nexport const downloadIconStyle: IStyle = {\n  marginRight: '0.5em',\n  fontSize: '0.875rem' // 14px\n};\n\n/**\n * @private\n */\nexport const bodyContainer: IStyle = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  padding: '1rem 2rem 3rem 2rem',\n  '@media (max-width: 25rem) or (max-height: 25rem)': {\n    padding: '0rem 1rem 2rem 1rem'\n  }\n};\n\n/**\n * @private\n */\nexport const normalImageStyle: IStyle = {\n  objectFit: 'contain',\n  maxHeight: '100%',\n  maxWidth: '100%'\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const brokenImageStyle = (theme: ChatTheme): IStyle => {\n  return {\n    color: theme.chatPalette.modalTitleWhite\n  };\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: ChatTheme): IStyle => {\n  return {\n    color: theme.chatPalette.modalTitleWhite,\n    ':hover': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n    },\n    ':active': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n    }\n  };\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const downloadButtonStyle = (theme: ChatTheme): IStyle => {\n  return {\n    margin: '0 0.5rem',\n    height: '32px',\n    borderWidth: '1px',\n    fontSize: '0.875rem', // 14px\n    fontWeight: 600,\n    padding: '0.38rem 0.75rem',\n    borderRadius: '4px',\n    backgroundColor: theme.chatPalette.modalButtonBackground,\n    color: theme.chatPalette.modalTitleWhite,\n    whiteSpace: 'nowrap',\n    ':hover': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n    },\n    ':active': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n    },\n    '@media (max-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: ChatTheme): IStyle => {\n  return {\n    marginRight: '0.5rem',\n    color: theme.chatPalette.modalTitleWhite,\n    whiteSpace: 'nowrap',\n    ':hover': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundHover\n    },\n    ':active': {\n      color: theme.chatPalette.modalTitleWhite,\n      backgroundColor: theme.chatPalette.modalButtonBackgroundActive\n    },\n    '@media (min-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n"]}

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

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "فشل في الانضمام إلى المكالمة.",
         "failedToJoinCallInvalidMeetingLink": "تعذر الانضمام إلى الاجتماع. ارتباط غير صالح.",
         "cameraFrozenForRemoteParticipants": "يواجه المستخدمون في المكالمة مشكلات في رؤية الفيديو الخاص بك. الرجاء التحقق من أجهزتك وشبكتك.",
-        "unableToStartVideoEffect": "يتعذر تطبيق تأثير الفيديو."
+        "unableToStartVideoEffect": "يتعذر تطبيق تأثير الفيديو.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "لا يمكن بدء تسليط الضوء على المشاركين (المشاركين) لأنه تم بالفعل تسليط الضوء على الحد الأقصى لعدد المشاركين."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "أنت تشارك شاشتك",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "تثبيت {participantName}",
         "unpinParticipantMenuItemAriaLabel": "إزالة تثبيت {participantName}",
         "pinnedParticipantAnnouncementAriaLabel": "تم تثبيت {participantName}",
-        "unpinnedParticipantAnnouncementAriaLabel": "تم إلغاء تثبيت {participantName}"
+        "unpinnedParticipantAnnouncementAriaLabel": "تم إلغاء تثبيت {participantName}",
+        "startSpotlightVideoTileMenuLabel": "تسليط الضوء لدى الجميع",
+        "addSpotlightVideoTileMenuLabel": "إضافة تسليط ضوء",
+        "spotlightLimitReachedMenuTitle": "تم الوصول إلى الحد الأقصى لتسليط الضوء",
+        "stopSpotlightVideoTileMenuLabel": "التوقف عن تسليط الضوء",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "الخروج من وضع تسليط الضوء"
     },
     "dialpad": {
         "placeholderText": "أدخل رقم الهاتف",

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

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "K hovoru se nepovedlo připojit.",
         "failedToJoinCallInvalidMeetingLink": "Ke schůzce se nelze připojit. Neplatný odkaz.",
         "cameraFrozenForRemoteParticipants": "Uživatelé v hovoru mají problémy s zobrazením vašeho videa. Zkontrolujte prosím svá zařízení a síť.",
-        "unableToStartVideoEffect": "Nelze použít efekt videa."
+        "unableToStartVideoEffect": "Nelze použít efekt videa.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "Nelze zahájit vytváření hlavního výběru účastníků, protože je již v hlavním výběru maximální počet účastníků."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "Sdílíte obrazovku",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "Připnout {participantName}",
         "unpinParticipantMenuItemAriaLabel": "Odepnout {participantName}",
         "pinnedParticipantAnnouncementAriaLabel": "Připnutý účastník {participantName}",
-        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} odepnut"
+        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} odepnut",
+        "startSpotlightVideoTileMenuLabel": "Přidat do hlavního výběru všem",
+        "addSpotlightVideoTileMenuLabel": "Přidat do hlavního výběru",
+        "spotlightLimitReachedMenuTitle": "Dosáhlo se limitu hlavního výběru",
+        "stopSpotlightVideoTileMenuLabel": "Zastavit přidávání do hlavního výběru",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Ukončit hlavní výběr"
     },
     "dialpad": {
         "placeholderText": "Zadejte telefonní číslo",

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

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "Fehler bei der Teilnahme am Anruf.",
         "failedToJoinCallInvalidMeetingLink": "Teilnahme an Besprechung nicht möglich. Ungültiger Link.",
         "cameraFrozenForRemoteParticipants": "Benutzer im Anruf haben Probleme, Ihr Video zu sehen. Überprüfen Sie Ihre Geräte und Ihr Netzwerk.",
-        "unableToStartVideoEffect": "Videoeffekt kann nicht angewendet werden."
+        "unableToStartVideoEffect": "Videoeffekt kann nicht angewendet werden.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "Das Spotlight für Teilnehmer*innen kann nicht gestartet werden, da die maximale Anzahl von Teilnehmer*innen bereits im Spotlight ist."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "Sie teilen Ihren Bildschirm",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "{participantName} anheften",
         "unpinParticipantMenuItemAriaLabel": "{participantName} lösen",
         "pinnedParticipantAnnouncementAriaLabel": "{participantName} angeheftet",
-        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} gelöst"
+        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} gelöst",
+        "startSpotlightVideoTileMenuLabel": "Spotlight für alle",
+        "addSpotlightVideoTileMenuLabel": "Spotlight hinzufügen",
+        "spotlightLimitReachedMenuTitle": "Spotlight-Limit erreicht",
+        "stopSpotlightVideoTileMenuLabel": "Spotlight beenden",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Spotlight beenden"
     },
     "dialpad": {
         "placeholderText": "Telefonnummer eingeben",

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

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "Failed to join call.",
         "failedToJoinCallInvalidMeetingLink": "Unable to join Meeting. Invalid Link.",
         "cameraFrozenForRemoteParticipants": "Users in the call are having issues seeing your video. Please check your devices and network.",
-        "unableToStartVideoEffect": "Unable to apply video effect."
+        "unableToStartVideoEffect": "Unable to apply video effect.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "Cannot start spotlight on participant(s) because the maximum number of participants are already spotlighted."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "You are sharing your screen",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "Pin {participantName}",
         "unpinParticipantMenuItemAriaLabel": "Unpin {participantName}",
         "pinnedParticipantAnnouncementAriaLabel": "Pinned {participantName}",
-        "unpinnedParticipantAnnouncementAriaLabel": "Unpinned {participantName}"
+        "unpinnedParticipantAnnouncementAriaLabel": "Unpinned {participantName}",
+        "startSpotlightVideoTileMenuLabel": "Spotlight for everyone",
+        "addSpotlightVideoTileMenuLabel": "Add spotlight",
+        "spotlightLimitReachedMenuTitle": "Spotlight limit reached",
+        "stopSpotlightVideoTileMenuLabel": "Stop spotlighting",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Exit spotlight"
     },
     "dialpad": {
         "placeholderText": "Enter phone number",

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

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "No se pudo unir a la llamada.",
         "failedToJoinCallInvalidMeetingLink": "No se puede unir a la reunión. Vínculo no válido.",
         "cameraFrozenForRemoteParticipants": "Los usuarios de la llamada tienen problemas para ver el vídeo. Compruebe los dispositivos y la red.",
-        "unableToStartVideoEffect": "No se puede aplicar el efecto de vídeo."
+        "unableToStartVideoEffect": "No se puede aplicar el efecto de vídeo.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "No se puede iniciar el primer plano en los participantes porque el número máximo de participantes ya está puesto en primer plano."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "Está compartiendo su pantalla",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "Anclar {participantName}",
         "unpinParticipantMenuItemAriaLabel": "Desanclar {participantName}",
         "pinnedParticipantAnnouncementAriaLabel": "{participantName} anclado",
-        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} desanclado"
+        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} desanclado",
+        "startSpotlightVideoTileMenuLabel": "Poner en primer plano para todos",
+        "addSpotlightVideoTileMenuLabel": "Agregar primer plano",
+        "spotlightLimitReachedMenuTitle": "Se alcanzó el límite de primer plano",
+        "stopSpotlightVideoTileMenuLabel": "Dejar de poner en primer plano",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Primer plano"
     },
     "dialpad": {
         "placeholderText": "Introduzca el número de teléfono",

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

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "Puheluun liittyminen epäonnistui.",
         "failedToJoinCallInvalidMeetingLink": "Kokoukseen liittyminen ei onnistu. Linkki on virheellinen.",
         "cameraFrozenForRemoteParticipants": "Puhelun käyttäjillä on videokuvan näkymiseen liittyviä ongelmia. Tarkista laitteesi ja verkkosi.",
-        "unableToStartVideoEffect": "Videotehosteen käyttäminen ei onnistu."
+        "unableToStartVideoEffect": "Videotehosteen käyttäminen ei onnistu.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "Osallistujien korostusta ei voi aloittaa, koska enimmäismäärä osallistujia on jo valokeilassa."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "Näyttösi jaetaan parhaillaan",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "Kiinnitä {participantName}",
         "unpinParticipantMenuItemAriaLabel": "Poista henkilön {participantName} kiinnitys",
         "pinnedParticipantAnnouncementAriaLabel": "Kiinnitetty {participantName}",
-        "unpinnedParticipantAnnouncementAriaLabel": "Poistettu henkilön {participantName} kiinnitys"
+        "unpinnedParticipantAnnouncementAriaLabel": "Poistettu henkilön {participantName} kiinnitys",
+        "startSpotlightVideoTileMenuLabel": "Lisää valokeilaan kaikille",
+        "addSpotlightVideoTileMenuLabel": "Lisää valokeilaan",
+        "spotlightLimitReachedMenuTitle": "Spotlight-raja saavutettu",
+        "stopSpotlightVideoTileMenuLabel": "Poista valokeilasta",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Valokeila"
     },
     "dialpad": {
         "placeholderText": "Anna puhelinnumero",

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

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "Nous n’avons pas pu rejoindre l’appel.",
         "failedToJoinCallInvalidMeetingLink": "Impossible de rejoindre la réunion. Lien non valide.",
         "cameraFrozenForRemoteParticipants": "Les utilisateurs de l’appel rencontrent des problèmes pour voir votre vidéo. Vérifiez vos appareils et votre réseau.",
-        "unableToStartVideoEffect": "Impossible d’appliquer l’effet vidéo."
+        "unableToStartVideoEffect": "Impossible d’appliquer l’effet vidéo.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "Impossible de lancer la mise en lumière sur le(s) participant(s), car le nombre maximum de participants est déjà mis en lumière."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "Vous partagez votre écran.",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "Épingler {participantName}",
         "unpinParticipantMenuItemAriaLabel": "Détacher {participantName}",
         "pinnedParticipantAnnouncementAriaLabel": "{participantName} a été épinglé",
-        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} a été détaché"
+        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} a été détaché",
+        "startSpotlightVideoTileMenuLabel": "Mettre en évidence pour tout le monde",
+        "addSpotlightVideoTileMenuLabel": "Ajouter la mise en évidence",
+        "spotlightLimitReachedMenuTitle": "Limite Spotlight atteinte",
+        "stopSpotlightVideoTileMenuLabel": "Arrêter la mise en évidence",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Quitter la mise en évidence"
     },
     "dialpad": {
         "placeholderText": "Entrer un numéro de téléphone",

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

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "הצטרפות לשיחה נכשלה.",
         "failedToJoinCallInvalidMeetingLink": "לא ניתן להצטרף לפגישה. קישור לא חוקי.",
         "cameraFrozenForRemoteParticipants": "משתמשים בשיחה נתקלים בבעיות בהצגת הווידאו שלך. בדוק את המכשירים ואת הרשת שלך.",
-        "unableToStartVideoEffect": "לא ניתן להחיל אפקט וידאו."
+        "unableToStartVideoEffect": "לא ניתן להחיל אפקט וידאו.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "אין אפשרות להפעיל זרקור על משתתפים מכיוון שכבר יש זרקורים על המספר המרבי של משתתפים."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "אתה משתף את המסך שלך",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "הצמד את {participantName}",
         "unpinParticipantMenuItemAriaLabel": "בטל את הצמדת {participantName}",
         "pinnedParticipantAnnouncementAriaLabel": "{participantName} הוצמד",
-        "unpinnedParticipantAnnouncementAriaLabel": "הצמדת {participantName} בוטלה"
+        "unpinnedParticipantAnnouncementAriaLabel": "הצמדת {participantName} בוטלה",
+        "startSpotlightVideoTileMenuLabel": "הצבת זרקור עבור כולם",
+        "addSpotlightVideoTileMenuLabel": "הוסף זרקור",
+        "spotlightLimitReachedMenuTitle": "הגעת למגבלת הזרקורים",
+        "stopSpotlightVideoTileMenuLabel": "הפסק להציב זרקור",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "צא מזרקור"
     },
     "dialpad": {
         "placeholderText": "הזן מספר טלפון",

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

@@ -200,7 +200,8 @@
         "failedToJoinCallGeneric": "Non è stato possibile partecipare alla chiamata.",
         "failedToJoinCallInvalidMeetingLink": "Impossibile partecipare alla riunione. Collegamento non valido.",
         "cameraFrozenForRemoteParticipants": "Gli utenti della chiamata hanno problemi a visualizzare il video. Controllare i dispositivi e la rete.",
-        "unableToStartVideoEffect": "Non è possibile applicare l'effetto video."
+        "unableToStartVideoEffect": "Non è possibile applicare l'effetto video.",
+        "startSpotlightWhileMaxParticipantsAreSpotlighted": "Non è possibile avviare i contenuti in evidenza sui partecipanti perché il numero massimo di partecipanti è già in evidenza."
     },
     "videoGallery": {
         "screenIsBeingSharedMessage": "Stai condividendo lo schermo",
@@ -218,7 +219,12 @@
         "pinParticipantMenuItemAriaLabel": "Aggiungi {participantName}",
         "unpinParticipantMenuItemAriaLabel": "Rimuovi {participantName}",
         "pinnedParticipantAnnouncementAriaLabel": "{participantName} aggiunto",
-        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} sbloccato"
+        "unpinnedParticipantAnnouncementAriaLabel": "{participantName} sbloccato",
+        "startSpotlightVideoTileMenuLabel": "Metti in evidenza per tutti",
+        "addSpotlightVideoTileMenuLabel": "Metti in evidenza",
+        "spotlightLimitReachedMenuTitle": "È stato raggiunto il limite di contenuti in evidenza",
+        "stopSpotlightVideoTileMenuLabel": "Interrompi la posizione in evidenza",
+        "stopSpotlightOnSelfVideoTileMenuLabel": "Chiudi visualizzazione in evidenza"
     },
     "dialpad": {
         "placeholderText": "Inserisci numero di telefono",