@azure/communication-react 1.0.0-beta.1 → 1.0.0-beta.5

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

@@ -0,0 +1,78 @@
+{
+    "participantItem": {
+        "isMeText": "(您)",
+        "menuTitle": "更多選項"
+    },
+    "typingIndicator": {
+        "singleUser": "{user} 正在輸入...",
+        "multipleUsers": "{users} 正在輸入...",
+        "multipleUsersAbbreviateOne": "{users} 和其他 1 人正在輸入...",
+        "multipleUsersAbbreviateMany": "{users} 和其他 {numOthers} 人正在輸入...",
+        "delimiter": "， "
+    },
+    "sendBox": {
+        "placeholderText": "輸入訊息"
+    },
+    "messageStatusIndicator": {
+        "deliveredTooltipText": "已傳送",
+        "seenTooltipText": "已讀",
+        "sendingTooltipText": "正在傳送",
+        "failedToSendTooltipText": "無法傳送"
+    },
+    "endCallButton": {
+        "label": "離開"
+    },
+    "cameraButton": {
+        "onLabel": "關閉",
+        "offLabel": "開啟"
+    },
+    "microphoneButton": {
+        "onLabel": "靜音",
+        "offLabel": "取消靜音"
+    },
+    "optionsButton": {
+        "label": "選項",
+        "cameraMenuTitle": "攝影機",
+        "cameraMenuTooltip": "選擇攝影機",
+        "microphoneMenuTitle": "麥克風",
+        "microphoneMenuTooltip": "選擇麥克風",
+        "speakerMenuTitle": "演講者",
+        "speakerMenuTooltip": "選擇講者"
+    },
+    "participantsButton": {
+        "label": "人員",
+        "menuHeader": "在此通話中",
+        "participantsListButtonLabel": "{numParticipants} 人員",
+        "muteAllButtonLabel": "將所有人設為靜音",
+        "copyInviteLinkButtonLabel": "複製邀請連結"
+    },
+    "screenShareButton": {
+        "onLabel": "停止",
+        "offLabel": "分享"
+    },
+    "messageThread": {
+        "yesterday": "昨天",
+        "sunday": "星期日",
+        "monday": "星期一",
+        "tuesday": "星期二",
+        "wednesday": "星期三",
+        "thursday": "星期四",
+        "friday": "星期五",
+        "saturday": "星期六",
+        "participantJoined": "已加入聊天。",
+        "participantLeft": "已離開聊天。"
+    },
+    "errorBar": {
+        "unableToReachChatService": "您處於離線狀態",
+        "accessDenied": "無法存取聊天服務 - 請檢查提供的使用者認證",
+        "userNotInThisThread": "您已不在此聊天對話中",
+        "sendMessageNotInThisThread": "無法傳送訊息，因為您已不在此聊天對話中",
+        "sendMessageGeneric": "無法傳送訊息",
+        "startVideoGeneric": "無法啟動影片",
+        "stopVideoGeneric": "無法停止影片",
+        "muteGeneric": "無法將麥克風設為靜音",
+        "unmuteGeneric": "無法將麥克風取消靜音",
+        "startScreenShareGeneric": "無法開始螢幕畫面分享",
+        "stopScreenShareGeneric": "無法停止螢幕畫面分享"
+    }
+}

package/dist/dist-esm/react-components/src/localization/localizationUtils.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export interface IObjectMap<T> {
+    [key: string]: T;
+}
+/**
+ * Create an array of span elements by replacing the pattern "{}" in str with the elements
+ * passed in as vars and creating span elements fromt he rest
+ * eg: formatElements("hello {name}. '{name}' is a rare name.", {name: <Persona text="Foo"/>})
+ * returns [<span>hello </span>, <span><Persona text="Foo"/></span>, <span>. <span>, <span><Persona text="Foo"/></span>, <span> is a rare name.</span>]"
+ * @param {string} str The string to be formatted
+ * @param {Object} vars Variables to use to format the string
+ * @returns {JSX.Element} formatted elements
+ */
+export declare const formatSpanElements: (str: string, vars: IObjectMap<JSX.Element>) => JSX.Element[];
+/**
+ * Replace the pattern "{}" in str with the values passed in as vars
+ * eg: formatString("hello {name}. '{name}' is a rare name.", {name: "Foo"})
+ * return "hello Foo. 'Foo' is a rare name."
+ * @param {string} str The string to be formatted
+ * @param {Object} variables Variables to use to format the string
+ * @returns {string} formatted string
+ */
+export declare const formatString: (str: string, vars: IObjectMap<string>) => string;
+//# sourceMappingURL=localizationUtils.d.ts.map

package/dist/dist-esm/react-components/src/localization/localizationUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localizationUtils.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/localization/localizationUtils.tsx"],"names":[],"mappings":";AAKA,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,QAAS,MAAM,QAAQ,WAAW,WAAW,CAAC,KAAG,WAAW,EA0B1F,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,QAAS,MAAM,QAAQ,WAAW,MAAM,CAAC,KAAG,MAWpE,CAAC"}

package/dist/dist-esm/react-components/src/localization/localizationUtils.js

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React from 'react';
+/**
+ * Create an array of span elements by replacing the pattern "{}" in str with the elements
+ * passed in as vars and creating span elements fromt he rest
+ * eg: formatElements("hello {name}. '{name}' is a rare name.", {name: <Persona text="Foo"/>})
+ * returns [<span>hello </span>, <span><Persona text="Foo"/></span>, <span>. <span>, <span><Persona text="Foo"/></span>, <span> is a rare name.</span>]"
+ * @param {string} str The string to be formatted
+ * @param {Object} vars Variables to use to format the string
+ * @returns {JSX.Element} formatted elements
+ */
+export const formatSpanElements = (str, vars) => {
+    if (!str) {
+        return [];
+    }
+    if (!vars) {
+        return [];
+    }
+    const elements = [];
+    // regex to search for the pattern "{}"
+    const placeholdersRegex = /{(\w+)}/g;
+    const regex = RegExp(placeholdersRegex);
+    let array = regex.exec(str);
+    let prev = 0;
+    let elementKey = 1;
+    while (array !== null) {
+        if (prev !== array.index) {
+            elements.push(React.createElement("span", { key: elementKey++ }, str.substring(prev, array.index)));
+        }
+        elements.push(React.createElement("span", { key: elementKey++ }, vars[array[0].substring(1, array[0].length - 1)]));
+        prev = regex.lastIndex;
+        array = regex.exec(str);
+    }
+    elements.push(React.createElement("span", { key: elementKey++ }, str.substring(prev)));
+    return elements;
+};
+/**
+ * Replace the pattern "{}" in str with the values passed in as vars
+ * eg: formatString("hello {name}. '{name}' is a rare name.", {name: "Foo"})
+ * return "hello Foo. 'Foo' is a rare name."
+ * @param {string} str The string to be formatted
+ * @param {Object} variables Variables to use to format the string
+ * @returns {string} formatted string
+ */
+export const formatString = (str, vars) => {
+    if (!str) {
+        return '';
+    }
+    if (!vars) {
+        return str;
+    }
+    // regex to search for the pattern "{}"
+    const placeholdersRegex = /{(\w+)}/g;
+    return str.replace(placeholdersRegex, (_, k) => vars[k] || `{${k}}`);
+};
+//# sourceMappingURL=localizationUtils.js.map

package/dist/dist-esm/react-components/src/localization/localizationUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"localizationUtils.js","sourceRoot":"","sources":["../../../../../../react-components/src/localization/localizationUtils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAW,EAAE,IAA6B,EAAiB,EAAE;IAC9F,IAAI,CAAC,GAAG,EAAE;QACR,OAAO,EAAE,CAAC;KACX;IACD,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,EAAE,CAAC;KACX;IAED,MAAM,QAAQ,GAAkB,EAAE,CAAC;IAEnC,uCAAuC;IACvC,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACrC,MAAM,KAAK,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IACxC,IAAI,KAAK,GAA2B,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpD,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,OAAO,KAAK,KAAK,IAAI,EAAE;QACrB,IAAI,IAAI,KAAK,KAAK,CAAC,KAAK,EAAE;YACxB,QAAQ,CAAC,IAAI,CAAC,8BAAM,GAAG,EAAE,UAAU,EAAE,IAAG,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAQ,CAAC,CAAC;SACnF;QACD,QAAQ,CAAC,IAAI,CAAC,8BAAM,GAAG,EAAE,UAAU,EAAE,IAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAQ,CAAC,CAAC;QAClG,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;QACvB,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzB;IACD,QAAQ,CAAC,IAAI,CAAC,8BAAM,GAAG,EAAE,UAAU,EAAE,IAAG,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,CAAQ,CAAC,CAAC;IACrE,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,IAAwB,EAAU,EAAE;IAC5E,IAAI,CAAC,GAAG,EAAE;QACR,OAAO,EAAE,CAAC;KACX;IACD,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,GAAG,CAAC;KACZ;IAED,uCAAuC;IACvC,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACrC,OAAO,GAAG,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;AACvF,CAAC,CAAC"}

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.d.ts

@@ -1,19 +1,28 @@
-import React from 'react';
-import { Theme, PartialTheme } from '@fluentui/react-theme-provider';
-/**
- * Props for FluentThemeProvider
- */
-export interface FluentThemeProviderProps {
-    /** Children to be themed. */
-    children: React.ReactNode;
-    /** Optional theme state for FluentThemeProvider. Defaults to a light theme if not provided. */
-    fluentTheme?: PartialTheme | Theme;
-}
-/**
- * @description Provider to apply a Fluent theme across this library's react components.
- * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web),
- * controls, and also from [Fluent React Northstar](https://fluentsite.z22.web.core.windows.net/0.53.0) controls.
- * This provider handles applying any theme provided to both the underlying Fluent UI controls, as well as the Fluent React Northstar controls.
- */
-export declare const FluentThemeProvider: (props: FluentThemeProviderProps) => JSX.Element;
+import React from 'react';
+import { Theme, PartialTheme } from '@fluentui/react';
+/**
+ * Props for FluentThemeProvider
+ */
+export interface FluentThemeProviderProps {
+    /** Children to be themed. */
+    children: React.ReactNode;
+    /** Theme for components. Defaults to a light theme if not provided. */
+    fluentTheme?: PartialTheme | Theme;
+    /**
+     * Whether components are displayed right-to-left
+     * @defaultValue `false`
+     */
+    rtl?: boolean;
+}
+/** Theme context for library's react components */
+export declare const ThemeContext: React.Context<Theme>;
+/**
+ * @description Provider to apply a Fluent theme across this library's react components.
+ * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web),
+ * controls, and also from [Fluent React Northstar](https://fluentsite.z22.web.core.windows.net/0.53.0) controls.
+ * This provider handles applying any theme provided to both the underlying Fluent UI controls, as well as the Fluent React Northstar controls.
+ */
+export declare const FluentThemeProvider: (props: FluentThemeProviderProps) => JSX.Element;
+/** React hook to access theme */
+export declare const useTheme: () => Theme;
 //# sourceMappingURL=FluentThemeProvider.d.ts.map

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FluentThemeProvider.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/theming/FluentThemeProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAiB,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAIpF;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,6BAA6B;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+FAA+F;IAC/F,WAAW,CAAC,EAAE,YAAY,GAAG,KAAK,CAAC;CACpC;AAiBD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,KAAG,WAwCrE,CAAC"}
+{"version":3,"file":"FluentThemeProvider.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/theming/FluentThemeProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAiB,KAAK,EAAE,YAAY,EAAsC,MAAM,iBAAiB,CAAC;AAIzG;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,6BAA6B;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uEAAuE;IACvE,WAAW,CAAC,EAAE,YAAY,GAAG,KAAK,CAAC;IACnC;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAUD,mDAAmD;AACnD,eAAO,MAAM,YAAY,sBAAqC,CAAC;AAY/D;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,KAAG,WAsCrE,CAAC;AAEF,iCAAiC;AACjC,eAAO,MAAM,QAAQ,QAAO,KAAiC,CAAC"}

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.js

@@ -1,60 +1,62 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-import React, { useState, useEffect } from 'react';
-import { mergeStyles } from '@fluentui/react';
-import { ThemeProvider } from '@fluentui/react-theme-provider';
-import { mergeThemes, Provider, teamsTheme } from '@fluentui/react-northstar';
-import { lightTheme } from './themes';
-const wrapper = mergeStyles({
-    height: '100%',
-    width: '100%'
-});
-const initialFluentNorthstarTheme = mergeThemes(teamsTheme, {
-    componentVariables: {
-        // suppressing teams theme for chat message links to get better styling from Fluent UI Link
-        ChatMessage: {
-            linkColor: undefined,
-            linkColorMine: undefined
-        }
-    }
-});
-/**
- * @description Provider to apply a Fluent theme across this library's react components.
- * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web),
- * controls, and also from [Fluent React Northstar](https://fluentsite.z22.web.core.windows.net/0.53.0) controls.
- * This provider handles applying any theme provided to both the underlying Fluent UI controls, as well as the Fluent React Northstar controls.
- */
-export const FluentThemeProvider = (props) => {
-    const { fluentTheme, children } = props;
-    // if fluentTheme is not provided, default to light theme
-    const fluentUITheme = fluentTheme !== null && fluentTheme !== void 0 ? fluentTheme : lightTheme;
-    const [fluentNorthstarTheme, setFluentNorthstarTheme] = useState(initialFluentNorthstarTheme);
-    useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
-        setFluentNorthstarTheme(mergeThemes(initialFluentNorthstarTheme, {
-            componentVariables: {
-                Chat: {
-                    backgroundColor: (_a = fluentUITheme === null || fluentUITheme === void 0 ? void 0 : fluentUITheme.palette) === null || _a === void 0 ? void 0 : _a.white
-                },
-                ChatMessage: {
-                    authorColor: (_b = fluentUITheme === null || fluentUITheme === void 0 ? void 0 : fluentUITheme.palette) === null || _b === void 0 ? void 0 : _b.neutralPrimary,
-                    contentColor: (_c = fluentUITheme === null || fluentUITheme === void 0 ? void 0 : fluentUITheme.palette) === null || _c === void 0 ? void 0 : _c.neutralPrimary,
-                    backgroundColor: (_d = fluentUITheme === null || fluentUITheme === void 0 ? void 0 : fluentUITheme.palette) === null || _d === void 0 ? void 0 : _d.neutralLighter,
-                    backgroundColorMine: (_e = fluentUITheme === null || fluentUITheme === void 0 ? void 0 : fluentUITheme.palette) === null || _e === void 0 ? void 0 : _e.themeLight
-                }
-            },
-            componentStyles: {
-                ChatMessage: {
-                    timestamp: {
-                        WebkitTextFillColor: (_f = fluentUITheme === null || fluentUITheme === void 0 ? void 0 : fluentUITheme.palette) === null || _f === void 0 ? void 0 : _f.neutralSecondary
-                    }
-                }
-            }
-            // add more northstar components to align with Fluent UI theme
-        }));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [fluentUITheme]);
-    return (React.createElement(ThemeProvider, { theme: fluentUITheme, className: wrapper },
-        React.createElement(Provider, { theme: fluentNorthstarTheme, className: wrapper }, children)));
-};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React, { createContext, useContext } from 'react';
+import { ThemeProvider, getTheme, mergeThemes, mergeStyles } from '@fluentui/react';
+import { mergeThemes as mergeNorthstarThemes, Provider, teamsTheme } from '@fluentui/react-northstar';
+import { lightTheme } from './themes';
+const wrapper = mergeStyles({
+    height: '100%',
+    width: '100%',
+    overflow: 'auto'
+});
+const defaultTheme = mergeThemes(getTheme(), lightTheme);
+/** Theme context for library's react components */
+export const ThemeContext = createContext(defaultTheme);
+const initialFluentNorthstarTheme = mergeNorthstarThemes(teamsTheme, {
+    componentVariables: {
+        // suppressing teams theme for chat message links to get better styling from Fluent UI Link
+        ChatMessage: {
+            linkColor: undefined,
+            linkColorMine: undefined
+        }
+    }
+});
+/**
+ * @description Provider to apply a Fluent theme across this library's react components.
+ * @remarks Components in this library are composed primarily from [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web),
+ * controls, and also from [Fluent React Northstar](https://fluentsite.z22.web.core.windows.net/0.53.0) controls.
+ * This provider handles applying any theme provided to both the underlying Fluent UI controls, as well as the Fluent React Northstar controls.
+ */
+export const FluentThemeProvider = (props) => {
+    const { fluentTheme, rtl, children } = props;
+    let fluentUITheme = mergeThemes(defaultTheme, fluentTheme);
+    // merge in rtl from FluentThemeProviderProps
+    fluentUITheme = mergeThemes(fluentUITheme, { rtl });
+    const fluentNorthstarTheme = mergeNorthstarThemes(initialFluentNorthstarTheme, {
+        componentVariables: {
+            Chat: {
+                backgroundColor: fluentUITheme.palette.white
+            },
+            ChatMessage: {
+                authorColor: fluentUITheme.palette.neutralPrimary,
+                contentColor: fluentUITheme.palette.neutralPrimary,
+                backgroundColor: fluentUITheme.palette.neutralLighter,
+                backgroundColorMine: fluentUITheme.palette.themeLight
+            }
+        },
+        componentStyles: {
+            ChatMessage: {
+                timestamp: {
+                    WebkitTextFillColor: fluentUITheme.palette.neutralSecondary
+                }
+            }
+        }
+        // add more northstar components to align with Fluent UI theme
+    });
+    return (React.createElement(ThemeContext.Provider, { value: fluentUITheme },
+        React.createElement(ThemeProvider, { theme: fluentUITheme, className: wrapper },
+            React.createElement(Provider, { theme: fluentNorthstarTheme, className: wrapper, rtl: rtl }, children))));
+};
+/** React hook to access theme */
+export const useTheme = () => useContext(ThemeContext);
 //# sourceMappingURL=FluentThemeProvider.js.map

package/dist/dist-esm/react-components/src/theming/FluentThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluentThemeProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/FluentThemeProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAuB,MAAM,gCAAgC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAc,MAAM,2BAA2B,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAYtC,MAAM,OAAO,GAAG,WAAW,CAAC;IAC1B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC,CAAC;AAEH,MAAM,2BAA2B,GAAG,WAAW,CAAC,UAAU,EAAE;IAC1D,kBAAkB,EAAE;QAClB,2FAA2F;QAC3F,WAAW,EAAE;YACX,SAAS,EAAE,SAAS;YACpB,aAAa,EAAE,SAAS;SACzB;KACF;CACF,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACxC,yDAAyD;IACzD,MAAM,aAAa,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,UAAU,CAAC;IAChD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAkB,2BAA2B,CAAC,CAAC;IAE/G,SAAS,CAAC,GAAG,EAAE;;QACb,uBAAuB,CACrB,WAAW,CAAC,2BAA2B,EAAE;YACvC,kBAAkB,EAAE;gBAClB,IAAI,EAAE;oBACJ,eAAe,QAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,0CAAE,KAAK;iBAC/C;gBACD,WAAW,EAAE;oBACX,WAAW,QAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,0CAAE,cAAc;oBACnD,YAAY,QAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,0CAAE,cAAc;oBACpD,eAAe,QAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,0CAAE,cAAc;oBACvD,mBAAmB,QAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,0CAAE,UAAU;iBACxD;aACF;YACD,eAAe,EAAE;gBACf,WAAW,EAAE;oBACX,SAAS,EAAE;wBACT,mBAAmB,QAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,0CAAE,gBAAgB;qBAC9D;iBACF;aACF;YACD,8DAA8D;SAC/D,CAAC,CACH,CAAC;QACF,uDAAuD;IACzD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,OAAO;QACrD,oBAAC,QAAQ,IAAC,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,OAAO,IACtD,QAAQ,CACA,CACG,CACjB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"FluentThemeProvider.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/FluentThemeProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,aAAa,EAAuB,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzG,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACtG,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAiBtC,MAAM,OAAO,GAAG,WAAW,CAAC;IAC1B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,CAAC;AAEzD,mDAAmD;AACnD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAQ,YAAY,CAAC,CAAC;AAE/D,MAAM,2BAA2B,GAAG,oBAAoB,CAAC,UAAU,EAAE;IACnE,kBAAkB,EAAE;QAClB,2FAA2F;QAC3F,WAAW,EAAE;YACX,SAAS,EAAE,SAAS;YACpB,aAAa,EAAE,SAAS;SACzB;KACF;CACF,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAe,EAAE;IAClF,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7C,IAAI,aAAa,GAAU,WAAW,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAClE,6CAA6C;IAC7C,aAAa,GAAG,WAAW,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,2BAA2B,EAAE;QAC7E,kBAAkB,EAAE;YAClB,IAAI,EAAE;gBACJ,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK;aAC7C;YACD,WAAW,EAAE;gBACX,WAAW,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBACjD,YAAY,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBAClD,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,cAAc;gBACrD,mBAAmB,EAAE,aAAa,CAAC,OAAO,CAAC,UAAU;aACtD;SACF;QACD,eAAe,EAAE;YACf,WAAW,EAAE;gBACX,SAAS,EAAE;oBACT,mBAAmB,EAAE,aAAa,CAAC,OAAO,CAAC,gBAAgB;iBAC5D;aACF;SACF;QACD,8DAA8D;KAC/D,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa;QACzC,oBAAC,aAAa,IAAC,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,OAAO;YACrD,oBAAC,QAAQ,IAAC,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAChE,QAAQ,CACA,CACG,CACM,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,iCAAiC;AACjC,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAU,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC"}

package/dist/dist-esm/react-components/src/theming/icons.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export declare type ComponentIcons = Record<keyof typeof DEFAULT_COMPONENT_ICONS, JSX.Element>;
+/**
+ * The default set of icons that are available to use in the UI components.
+ */
+export declare const DEFAULT_COMPONENT_ICONS: {
+    ControlButtonCameraOff: JSX.Element;
+    ControlButtonCameraOn: JSX.Element;
+    ControlButtonEndCall: JSX.Element;
+    ControlButtonMicOff: JSX.Element;
+    ControlButtonMicOn: JSX.Element;
+    ControlButtonOptions: JSX.Element;
+    ControlButtonParticipants: JSX.Element;
+    ControlButtonScreenShareStart: JSX.Element;
+    ControlButtonScreenShareStop: JSX.Element;
+    MessageDelivered: JSX.Element;
+    MessageFailed: JSX.Element;
+    MessageSeen: JSX.Element;
+    MessageSending: JSX.Element;
+    OptionsCamera: JSX.Element;
+    OptionsMic: JSX.Element;
+    OptionsSpeaker: JSX.Element;
+    ParticipantItemScreenShareStart: JSX.Element;
+    ParticipantItemMicOff: JSX.Element;
+    ParticipantItemOptions: JSX.Element;
+    ParticipantItemOptionsHovered: JSX.Element;
+    SendBoxSend: JSX.Element;
+    SendBoxSendHovered: JSX.Element;
+    VideoTileMicOff: JSX.Element;
+    EditBoxCancel: JSX.Element;
+    EditBoxSubmit: JSX.Element;
+    MessageEdit: JSX.Element;
+    MessageRemove: JSX.Element;
+};
+//# sourceMappingURL=icons.d.ts.map

package/dist/dist-esm/react-components/src/theming/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/theming/icons.tsx"],"names":[],"mappings":";AA+BA,oBAAY,cAAc,GAAG,MAAM,CAAC,MAAM,OAAO,uBAAuB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;AAEvF;;GAEG;AAEH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BnC,CAAC"}

package/dist/dist-esm/react-components/src/theming/icons.js

@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { CallEnd20Filled, Checkmark20Regular, CheckmarkCircle20Regular, Circle20Regular, Delete20Regular, Dismiss20Regular, Edit20Regular, ErrorCircle20Regular, EyeShow20Filled, MicOff16Filled, MicOff20Filled, MicOn20Filled, MicOn20Regular, MoreHorizontal20Filled, MoreHorizontal20Regular, People20Filled, Send20Filled, Send20Regular, ShareScreenStart20Filled, ShareScreenStop20Filled, Speaker220Regular, Video20Filled, Video20Regular, VideoOff20Filled } from '@fluentui/react-icons';
+import React from 'react';
+/**
+ * The default set of icons that are available to use in the UI components.
+ */
+// NOTE: Don't forget to add icons used in composites to the types in `packages/react-composites/src/composites/common/icons.tsx`
+export const DEFAULT_COMPONENT_ICONS = {
+    ControlButtonCameraOff: React.createElement(VideoOff20Filled, null),
+    ControlButtonCameraOn: React.createElement(Video20Filled, null),
+    ControlButtonEndCall: React.createElement(CallEnd20Filled, null),
+    ControlButtonMicOff: React.createElement(MicOff20Filled, null),
+    ControlButtonMicOn: React.createElement(MicOn20Filled, null),
+    ControlButtonOptions: React.createElement(MoreHorizontal20Filled, null),
+    ControlButtonParticipants: React.createElement(People20Filled, null),
+    ControlButtonScreenShareStart: React.createElement(ShareScreenStart20Filled, null),
+    ControlButtonScreenShareStop: React.createElement(ShareScreenStop20Filled, null),
+    MessageDelivered: React.createElement(CheckmarkCircle20Regular, null),
+    MessageFailed: React.createElement(ErrorCircle20Regular, null),
+    MessageSeen: React.createElement(EyeShow20Filled, null),
+    MessageSending: React.createElement(Circle20Regular, null),
+    OptionsCamera: React.createElement(Video20Regular, null),
+    OptionsMic: React.createElement(MicOn20Regular, null),
+    OptionsSpeaker: React.createElement(Speaker220Regular, null),
+    ParticipantItemScreenShareStart: React.createElement(ShareScreenStart20Filled, null),
+    ParticipantItemMicOff: React.createElement(MicOff16Filled, null),
+    ParticipantItemOptions: React.createElement(MoreHorizontal20Regular, null),
+    ParticipantItemOptionsHovered: React.createElement(MoreHorizontal20Filled, null),
+    SendBoxSend: React.createElement(Send20Regular, null),
+    SendBoxSendHovered: React.createElement(Send20Filled, null),
+    VideoTileMicOff: React.createElement(MicOff16Filled, null),
+    EditBoxCancel: React.createElement(Dismiss20Regular, null),
+    EditBoxSubmit: React.createElement(Checkmark20Regular, null),
+    MessageEdit: React.createElement(Edit20Regular, null),
+    MessageRemove: React.createElement(Delete20Regular, null)
+};
+//# sourceMappingURL=icons.js.map

package/dist/dist-esm/react-components/src/theming/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/icons.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,cAAc,EACd,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,uBAAuB,EACvB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,wBAAwB,EACxB,uBAAuB,EACvB,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,iIAAiI;AACjI,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,sBAAsB,EAAE,oBAAC,gBAAgB,OAAG;IAC5C,qBAAqB,EAAE,oBAAC,aAAa,OAAG;IACxC,oBAAoB,EAAE,oBAAC,eAAe,OAAG;IACzC,mBAAmB,EAAE,oBAAC,cAAc,OAAG;IACvC,kBAAkB,EAAE,oBAAC,aAAa,OAAG;IACrC,oBAAoB,EAAE,oBAAC,sBAAsB,OAAG;IAChD,yBAAyB,EAAE,oBAAC,cAAc,OAAG;IAC7C,6BAA6B,EAAE,oBAAC,wBAAwB,OAAG;IAC3D,4BAA4B,EAAE,oBAAC,uBAAuB,OAAG;IACzD,gBAAgB,EAAE,oBAAC,wBAAwB,OAAG;IAC9C,aAAa,EAAE,oBAAC,oBAAoB,OAAG;IACvC,WAAW,EAAE,oBAAC,eAAe,OAAG;IAChC,cAAc,EAAE,oBAAC,eAAe,OAAG;IACnC,aAAa,EAAE,oBAAC,cAAc,OAAG;IACjC,UAAU,EAAE,oBAAC,cAAc,OAAG;IAC9B,cAAc,EAAE,oBAAC,iBAAiB,OAAG;IACrC,+BAA+B,EAAE,oBAAC,wBAAwB,OAAG;IAC7D,qBAAqB,EAAE,oBAAC,cAAc,OAAG;IACzC,sBAAsB,EAAE,oBAAC,uBAAuB,OAAG;IACnD,6BAA6B,EAAE,oBAAC,sBAAsB,OAAG;IACzD,WAAW,EAAE,oBAAC,aAAa,OAAG;IAC9B,kBAAkB,EAAE,oBAAC,YAAY,OAAG;IACpC,eAAe,EAAE,oBAAC,cAAc,OAAG;IACnC,aAAa,EAAE,oBAAC,gBAAgB,OAAG;IACnC,aAAa,EAAE,oBAAC,kBAAkB,OAAG;IACrC,WAAW,EAAE,oBAAC,aAAa,OAAG;IAC9B,aAAa,EAAE,oBAAC,eAAe,OAAG;CACnC,CAAC"}

package/dist/dist-esm/react-components/src/theming/index.d.ts

@@ -1,3 +1,4 @@
-export * from './themes';
-export * from './FluentThemeProvider';
+export * from './themes';
+export * from './FluentThemeProvider';
+export * from './icons';
 //# sourceMappingURL=index.d.ts.map

package/dist/dist-esm/react-components/src/theming/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/theming/index.ts"],"names":[],"mappings":"AAGA,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/theming/index.ts"],"names":[],"mappings":"AAGA,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/dist/dist-esm/react-components/src/theming/index.js

@@ -1,5 +1,6 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-export * from './themes';
-export * from './FluentThemeProvider';
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+export * from './themes';
+export * from './FluentThemeProvider';
+export * from './icons';
 //# sourceMappingURL=index.js.map

package/dist/dist-esm/react-components/src/theming/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/theming/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/dist/dist-esm/react-components/src/theming/themeUtils.d.ts

@@ -1,3 +1,3 @@
-import { Theme } from '@fluentui/react-theme-provider';
-export declare const isDarkThemed: (theme: Theme) => boolean;
+import { Theme } from '@fluentui/react';
+export declare const isDarkThemed: (theme: Theme) => boolean;
 //# sourceMappingURL=themeUtils.d.ts.map

package/dist/dist-esm/react-components/src/theming/themeUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeUtils.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/theming/themeUtils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAEvD,eAAO,MAAM,YAAY,UAAW,KAAK,KAAG,OAO3C,CAAC"}
+{"version":3,"file":"themeUtils.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/theming/themeUtils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,eAAO,MAAM,YAAY,UAAW,KAAK,KAAG,OAO3C,CAAC"}

package/dist/dist-esm/react-components/src/theming/themeUtils.js

@@ -1,22 +1,22 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-export const isDarkThemed = (theme) => {
-    const themeBlackBrightness = getPerceptualBrightnessOfHexColor(theme.palette.black);
-    const themeWhiteBrightness = getPerceptualBrightnessOfHexColor(theme.palette.white);
-    if (Number.isNaN(themeBlackBrightness) || Number.isNaN(themeWhiteBrightness)) {
-        return false;
-    }
-    return themeBlackBrightness > themeWhiteBrightness;
-};
-const getPerceptualBrightnessOfHexColor = (hexColor) => {
-    // return NaN if hexColor is not a hex code
-    if (!/^#[0-9A-Fa-f]{6}$/i.test(hexColor)) {
-        return NaN;
-    }
-    const r = parseInt(hexColor.substring(1, 3), 16);
-    const g = parseInt(hexColor.substring(3, 5), 16);
-    const b = parseInt(hexColor.substring(5, 7), 16);
-    // arithmetic mean μ of the red, green, and blue color coordinates. Source: https://en.wikipedia.org/wiki/Brightness
-    return (r + g + b) / 3;
-};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+export const isDarkThemed = (theme) => {
+    const themeBlackBrightness = getPerceptualBrightnessOfHexColor(theme.palette.black);
+    const themeWhiteBrightness = getPerceptualBrightnessOfHexColor(theme.palette.white);
+    if (Number.isNaN(themeBlackBrightness) || Number.isNaN(themeWhiteBrightness)) {
+        return false;
+    }
+    return themeBlackBrightness > themeWhiteBrightness;
+};
+const getPerceptualBrightnessOfHexColor = (hexColor) => {
+    // return NaN if hexColor is not a hex code
+    if (!/^#[0-9A-Fa-f]{6}$/i.test(hexColor)) {
+        return NaN;
+    }
+    const r = parseInt(hexColor.substring(1, 3), 16);
+    const g = parseInt(hexColor.substring(3, 5), 16);
+    const b = parseInt(hexColor.substring(5, 7), 16);
+    // arithmetic mean μ of the red, green, and blue color coordinates. Source: https://en.wikipedia.org/wiki/Brightness
+    return (r + g + b) / 3;
+};
 //# sourceMappingURL=themeUtils.js.map

package/dist/dist-esm/react-components/src/theming/themes.d.ts

@@ -1,20 +1,20 @@
-import { PartialTheme } from '@fluentui/react-theme-provider';
-/**
- * Theme designed ACS UI SDK calling components
- */
-export interface CallingTheme {
-    callingPalette: {
-        callRed: string;
-        callRedDark: string;
-        callRedDarker: string;
-    };
-}
-/**
- * Light theme designed ACS UI SDK components
- */
-export declare const lightTheme: PartialTheme & CallingTheme;
-/**
- * Dark theme designed ACS UI SDK components
- */
-export declare const darkTheme: PartialTheme & CallingTheme;
+import { PartialTheme } from '@fluentui/react';
+/**
+ * Theme designed ACS UI SDK calling components
+ */
+export interface CallingTheme {
+    callingPalette: {
+        callRed: string;
+        callRedDark: string;
+        callRedDarker: string;
+    };
+}
+/**
+ * Light theme designed ACS UI SDK components
+ */
+export declare const lightTheme: PartialTheme & CallingTheme;
+/**
+ * Dark theme designed ACS UI SDK components
+ */
+export declare const darkTheme: PartialTheme & CallingTheme;
 //# sourceMappingURL=themes.d.ts.map

package/dist/dist-esm/react-components/src/theming/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/theming/themes.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,cAAc,EAAE;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;QACpB,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,GAAG,YA8BvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,YAAY,GAAG,YA8BtC,CAAC"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/theming/themes.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,cAAc,EAAE;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;QACpB,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,GAAG,YA8BvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,YAAY,GAAG,YA8BtC,CAAC"}