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

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

@@ -1,54 +1,73 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { DefaultPalette as palette, Icon, mergeStyles, Persona, Stack, Text } from '@fluentui/react';
+import { Icon, mergeStyles, Persona, Stack, Text } from '@fluentui/react';
 import { Ref } from '@fluentui/react-northstar';
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useIdentifiers } from '../identifiers';
 import { useTheme } from '../theming';
-import { disabledVideoHint, displayNameStyle, iconContainerStyle, isSpeakingStyles, overlayContainerStyles, rootStyles, tileInfoStackItemStyle, videoContainerStyles, videoHint } from './styles/VideoTile.styles';
-// Coin max size is set to 100px (PersonaSize.size100)
-const personaMaxSize = 200;
+import { disabledVideoHint, displayNameStyle, iconContainerStyle, isSpeakingBorderDiv, overlayContainerStyles, rootStyles, videoContainerStyles, videoHint, tileInfoContainerStyle } from './styles/VideoTile.styles';
+import { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';
+// Coin max size is set to PersonaSize.size100
+const PERSONA_MAX_SIZE = 100;
+// Coin min size is set PersonaSize.size32
+const PERSONA_MIN_SIZE = 32;
 const DefaultPlaceholder = (props) => {
     const { text, noVideoAvailableAriaLabel, coinSize, styles, hidePersonaDetails } = props;
     return (React.createElement(Stack, { className: mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
         React.createElement(Persona, { styles: styles, coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '' })));
 };
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
+/**
+ * A component to render the video stream for a single call participant.
+ *
+ * Use with {@link GridLayout} in a {@link VideoGallery}.
+ *
+ * @public
+ */
 export const VideoTile = (props) => {
-    var _a, _b;
-    const { children, displayName, isMirrored, isMuted, onRenderPlaceholder, renderElement, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking } = props;
+    const { children, displayName, initialsName, isMirrored, isMuted, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking } = props;
     const [personaSize, setPersonaSize] = useState(100);
     const videoTileRef = useRef(null);
     const theme = useTheme();
     const isVideoRendered = !!renderElement;
+    const observer = useRef(new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        const personaSize = Math.min(width, height) / 3;
+        setPersonaSize(Math.max(Math.min(personaSize, PERSONA_MAX_SIZE), PERSONA_MIN_SIZE));
+    }));
     useLayoutEffect(() => {
-        if (videoTileRef.current && videoTileRef.current) {
-            const minSize = Math.min(videoTileRef.current.clientHeight, videoTileRef.current.clientWidth, personaMaxSize);
-            setPersonaSize(minSize / 2);
+        if (videoTileRef.current) {
+            observer.current.observe(videoTileRef.current);
         }
-    }, [(_a = videoTileRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, (_b = videoTileRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth]);
+        const currentObserver = observer.current;
+        return () => currentObserver.disconnect();
+    }, [observer, videoTileRef]);
     const placeholderOptions = {
         userId,
-        text: displayName,
+        text: initialsName || displayName,
         noVideoAvailableAriaLabel,
         coinSize: personaSize,
         styles: defaultPersonaStyles,
         hidePersonaDetails: true
     };
-    const nametagColorOverride = useMemo(() => ({ color: isVideoRendered ? palette.neutralPrimary : theme.palette.neutralPrimary }), [isVideoRendered, theme.palette.neutralPrimary]);
-    const tileInfoContainerStyle = useMemo(() => mergeStyles(isVideoRendered ? videoHint : disabledVideoHint, 
-    // when video is being rendered, the displayName has a grey-ish background, so no use of theme
-    nametagColorOverride, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer), [isVideoRendered, nametagColorOverride, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer]);
-    const tileInfoDisplayNameStyle = useMemo(() => mergeStyles(displayNameStyle, nametagColorOverride), [nametagColorOverride]);
+    const videoHintWithBorderRadius = mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });
+    const tileInfoStyle = useMemo(() => mergeStyles(isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint, getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'), styles === null || styles === void 0 ? void 0 : styles.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, theme, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer]);
     const ids = useIdentifiers();
     return (React.createElement(Ref, { innerRef: videoTileRef },
-        React.createElement(Stack, { "data-ui-id": ids.videoTile, className: mergeStyles(rootStyles, isSpeaking ? isSpeakingStyles : {}, { background: theme.palette.neutralLighter }, styles === null || styles === void 0 ? void 0 : styles.root) },
+        React.createElement(Stack, { "data-ui-id": ids.videoTile, className: mergeStyles(rootStyles, {
+                background: theme.palette.neutralLighter,
+                borderRadius: theme.effects.roundedCorner4
+            }, styles === null || styles === void 0 ? void 0 : styles.root) },
+            React.createElement("div", { className: mergeStyles(isSpeakingBorderDiv, {
+                    borderRadius: theme.effects.roundedCorner4,
+                    border: `0.25rem solid ${isSpeaking ? theme.palette.themePrimary : 'transparent'}`
+                }) }),
             isVideoRendered ? (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React.createElement(Stack, { className: mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
-            (displayName || (showMuteIndicator && isMuted !== undefined)) && (React.createElement(Stack, { horizontal: true, className: tileInfoContainerStyle },
-                displayName && (React.createElement(Stack.Item, { className: mergeStyles(tileInfoStackItemStyle) },
-                    React.createElement(Text, { className: tileInfoDisplayNameStyle }, displayName))),
-                showMuteIndicator && isMuted && (React.createElement(Stack.Item, { className: mergeStyles(iconContainerStyle, tileInfoStackItemStyle) },
-                    React.createElement(Icon, { iconName: "VideoTileMicOff" }))))),
+            showLabel && (displayName || (showMuteIndicator && isMuted)) && (React.createElement(Stack, { horizontal: true, className: tileInfoContainerStyle },
+                React.createElement(Stack, { horizontal: true, className: tileInfoStyle },
+                    displayName && (React.createElement(Text, { className: mergeStyles(displayNameStyle), title: displayName }, displayName)),
+                    showMuteIndicator && isMuted && (React.createElement(Stack, { className: mergeStyles(iconContainerStyle) },
+                        React.createElement(Icon, { iconName: "VideoTileMicOff" })))))),
             children && (React.createElement(Stack, { className: mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)))));
 };
 //# sourceMappingURL=VideoTile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/VideoTile.tsx"],"names":[],"mappings":"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"}

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

@@ -1,38 +1,38 @@
 export { TypingIndicator } from './TypingIndicator';
 export type { TypingIndicatorProps, TypingIndicatorStrings, TypingIndicatorStylesProps } from './TypingIndicator';
 export { ErrorBar } from './ErrorBar';
-export type { ActiveError, ErrorBarProps, ErrorBarStrings, ErrorType } from './ErrorBar';
+export type { ActiveErrorMessage, ErrorBarProps, ErrorBarStrings, ErrorType } from './ErrorBar';
 export { GridLayout } from './GridLayout';
-export type { GridLayoutProps, GridLayoutType } from './GridLayout';
+export type { GridLayoutProps, GridLayoutStyles } from './GridLayout';
 export { SendBox } from './SendBox';
 export type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox';
 export { MessageStatusIndicator } from './MessageStatusIndicator';
 export type { MessageStatusIndicatorProps, MessageStatusIndicatorStrings } from './MessageStatusIndicator';
-export type { InputBoxButtonProps } from './InputBoxComponent';
 export { MessageThread } from './MessageThread';
-export type { MessageProps, MessageThreadProps, MessageThreadStrings, MessageThreadStylesProps, JumpToNewMessageButtonProps, DefaultMessageRendererType } from './MessageThread';
+export type { MessageProps, MessageThreadProps, MessageThreadStrings, MessageThreadStyles, JumpToNewMessageButtonProps, MessageRenderer } from './MessageThread';
 export { StreamMedia } from './StreamMedia';
 export type { StreamMediaProps } from './StreamMedia';
 export { ParticipantItem } from './ParticipantItem';
-export type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStylesProps } from './ParticipantItem';
+export type { ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles } from './ParticipantItem';
 export { ParticipantList } from './ParticipantList';
-export type { ParticipantListProps } from './ParticipantList';
+export type { ParticipantListItemStyles, ParticipantListProps, ParticipantListStyles, ParticipantMenuItemsCallback } from './ParticipantList';
 export { VideoGallery } from './VideoGallery';
-export type { VideoGalleryProps } from './VideoGallery';
+export type { VideoGalleryProps, VideoGalleryStrings, VideoGalleryStyles } from './VideoGallery';
+export type { HorizontalGalleryStyles } from './HorizontalGallery';
 export { CameraButton } from './CameraButton';
 export type { CameraButtonProps, CameraButtonStrings } from './CameraButton';
 export { ControlBar } from './ControlBar';
-export type { ControlBarProps, ControlBarLayoutType } from './ControlBar';
+export type { ControlBarProps, ControlBarLayout } from './ControlBar';
 export { ControlBarButton } from './ControlBarButton';
-export type { ControlBarButtonProps, ControlBarButtonStrings } from './ControlBarButton';
+export type { ControlBarButtonProps, ControlBarButtonStrings, ControlBarButtonStyles } from './ControlBarButton';
 export { EndCallButton } from './EndCallButton';
 export type { EndCallButtonProps, EndCallButtonStrings } from './EndCallButton';
 export { MicrophoneButton } from './MicrophoneButton';
 export type { MicrophoneButtonProps, MicrophoneButtonStrings } from './MicrophoneButton';
-export { OptionsButton } from './OptionsButton';
-export type { OptionsDevice, OptionsButtonProps, OptionsButtonStrings } from './OptionsButton';
+export { DevicesButton } from './DevicesButton';
+export type { OptionsDevice, DevicesButtonProps, DevicesButtonStrings, DevicesButtonStyles, DevicesButtonContextualMenuStyles } from './DevicesButton';
 export { ParticipantsButton } from './ParticipantsButton';
-export type { ParticipantsButtonProps, ParticipantsButtonStrings, ParticipantsButtonStylesProps } from './ParticipantsButton';
+export type { ParticipantsButtonContextualMenuStyles, ParticipantsButtonProps, ParticipantsButtonStrings, ParticipantsButtonStyles } from './ParticipantsButton';
 export { ScreenShareButton } from './ScreenShareButton';
 export type { ScreenShareButtonProps, ScreenShareButtonStrings } from './ScreenShareButton';
 export { VideoTile } from './VideoTile';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AAElH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,kBAAkB,EAAE,aAAa,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEhG,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEtE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAElF,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,2BAA2B,EAAE,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAE3G,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,2BAA2B,EAC3B,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE7G,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,yBAAyB,EACzB,oBAAoB,EACpB,qBAAqB,EACrB,4BAA4B,EAC7B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACjG,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEhF,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAEzF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,iCAAiC,EAClC,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,sCAAsC,EACtC,uBAAuB,EACvB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC"}

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

@@ -15,7 +15,7 @@ export { ControlBar } from './ControlBar';
 export { ControlBarButton } from './ControlBarButton';
 export { EndCallButton } from './EndCallButton';
 export { MicrophoneButton } from './MicrophoneButton';
-export { OptionsButton } from './OptionsButton';
+export { DevicesButton } from './DevicesButton';
 export { ParticipantsButton } from './ParticipantsButton';
 export { ScreenShareButton } from './ScreenShareButton';
 export { VideoTile } from './VideoTile';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAO1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUhD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAShD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAQ1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

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

@@ -1,12 +1,37 @@
-import { IStyle } from '@fluentui/react';
+import { IStyle, Theme, IContextualMenuItemStyles } from '@fluentui/react';
+/**
+ * @private
+ */
 export declare const chatActionsCSS: IStyle;
+/**
+ * @private
+ */
 export declare const iconWrapperStyle: string;
+/**
+ * @private
+ */
 export declare const chatMessageDateStyle: string;
+/**
+ * @private
+ */
+export declare const chatMessageEditedTagStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
 export declare const chatMessageMenuStyle: string;
+/**
+ * Styles that can be applied to ensure flyout items have the minimum touch target size.
+ *
+ * @private
+ */
+export declare const menuItemIncreasedSizeStyles: IContextualMenuItemStyles;
+/**
+ * @private
+ */
 export declare const menuIconStyleSet: {
     root: {
-        height: number;
-        width: number;
+        height: string;
+        width: string;
     };
 };
 //# sourceMappingURL=ChatMessageComponent.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/ChatMessageComponent.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponent.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ChatMessageComponent.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,MAAM,EAAe,MAAM,iBAAiB,CAAC;AAEnE,eAAO,MAAM,cAAc,EAAE,MAa5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAI3B,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAAoD,CAAC;AAEtF,eAAO,MAAM,oBAAoB,QAG/B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;CAAsC,CAAC"}
+{"version":3,"file":"ChatMessageComponent.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ChatMessageComponent.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,MAAM,EAAe,KAAK,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAIrG;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,MAa5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAI3B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,oBAAoB,QAAoD,CAAC;AAEtF;;GAEG;AACH,eAAO,MAAM,yBAAyB,UAAW,KAAK,KAAG,MACiC,CAAC;AAE3F;;GAEG;AACH,eAAO,MAAM,oBAAoB,QAG/B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,EAAE,yBAczC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;CAK5B,CAAC"}

package/dist/dist-esm/react-components/src/components/styles/ChatMessageComponent.styles.js

@@ -1,6 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles, FontWeights } from '@fluentui/react';
+const MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;
+/**
+ * @private
+ */
 export const chatActionsCSS = {
     'ul&': {
         right: '0',
@@ -15,15 +19,56 @@ export const chatActionsCSS = {
         border: '0'
     }
 };
+/**
+ * @private
+ */
 export const iconWrapperStyle = mergeStyles({
     padding: '0.375rem',
     webkitBoxPack: 'center',
     justifyContent: 'center'
 });
+/**
+ * @private
+ */
 export const chatMessageDateStyle = mergeStyles({ fontWeight: FontWeights.semibold });
+/**
+ * @private
+ */
+export const chatMessageEditedTagStyle = (theme) => mergeStyles({ fontWeight: FontWeights.semibold, color: theme.palette.neutralSecondary });
+/**
+ * @private
+ */
 export const chatMessageMenuStyle = mergeStyles({
     minWidth: '8.5rem',
     cursor: 'pointer'
 });
-export const menuIconStyleSet = { root: { height: 28, width: 20 } };
+/**
+ * Styles that can be applied to ensure flyout items have the minimum touch target size.
+ *
+ * @private
+ */
+export const menuItemIncreasedSizeStyles = {
+    root: {
+        height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
+        lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
+        maxHeight: 'unset'
+    },
+    linkContent: {
+        height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
+        lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,
+        maxHeight: 'unset'
+    },
+    icon: {
+        maxHeight: 'unset'
+    }
+};
+/**
+ * @private
+ */
+export const menuIconStyleSet = {
+    root: {
+        height: 'calc(100% - 8px)',
+        width: '1.25rem'
+    }
+};
 //# sourceMappingURL=ChatMessageComponent.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponent.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ChatMessageComponent.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnE,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,KAAK,EAAE;QACL,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,WAAW;QAChB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,UAAU;KACrB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,GAAG;QACX,OAAO,EAAE,GAAG;QACZ,MAAM,EAAE,GAAG;KACZ;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,OAAO,EAAE,UAAU;IACnB,aAAa,EAAE,QAAQ;IACvB,cAAc,EAAE,QAAQ;CACzB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC,EAAE,UAAU,EAAE,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;AAEtF,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC"}
+{"version":3,"file":"ChatMessageComponent.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ChatMessageComponent.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAU,WAAW,EAAoC,MAAM,iBAAiB,CAAC;AAErG,MAAM,+BAA+B,GAAG,CAAC,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,KAAK,EAAE;QACL,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,WAAW;QAChB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,UAAU;KACrB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,GAAG;QACX,OAAO,EAAE,GAAG;QACZ,MAAM,EAAE,GAAG;KACZ;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,OAAO,EAAE,UAAU;IACnB,aAAa,EAAE,QAAQ;IACvB,cAAc,EAAE,QAAQ;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC,EAAE,UAAU,EAAE,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAU,EAAE,CAChE,WAAW,CAAC,EAAE,UAAU,EAAE,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAE3F;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,SAAS;CAClB,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAA8B;IACpE,IAAI,EAAE;QACJ,MAAM,EAAE,GAAG,+BAA+B,KAAK;QAC/C,UAAU,EAAE,GAAG,+BAA+B,KAAK;QACnD,SAAS,EAAE,OAAO;KACnB;IACD,WAAW,EAAE;QACX,MAAM,EAAE,GAAG,+BAA+B,KAAK;QAC/C,UAAU,EAAE,GAAG,+BAA+B,KAAK;QACnD,SAAS,EAAE,OAAO;KACnB;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,OAAO;KACnB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,kBAAkB;QAC1B,KAAK,EAAE,SAAS;KACjB;CACF,CAAC"}

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

@@ -1,4 +1,5 @@
-import { IStyle, IButtonStyles, IContextualMenuStyles } from '@fluentui/react';
+import { IStyle, IButtonStyles, IContextualMenuStyles, IContextualMenuItemStyles } from '@fluentui/react';
+import { ParticipantListStyles } from '../ParticipantList';
 interface IControlBarStyles {
     horizontal: IStyle;
     vertical: IStyle;
@@ -11,11 +12,29 @@ interface IControlBarStyles {
     floatingLeft: IStyle;
     floatingRight: IStyle;
 }
+/**
+ * @private
+ */
 export declare const controlBarStyles: IControlBarStyles;
+/**
+ * @private
+ */
 export declare const controlButtonStyles: IButtonStyles;
-export declare const controlButtonLabelStyles: IStyle;
-export declare const endCallControlButtonStyles: IButtonStyles;
+/**
+ * making it Partial as IContextualMenuStyles has all its props non-optional and we only need title to be defined here.
+ *
+ * @private
+ */
 export declare const participantsButtonMenuPropsStyle: Partial<IContextualMenuStyles>;
-export declare const defaultParticipantListContainerStyle: IStyle;
+/**
+ * @private
+ */
+export declare const defaultParticipantListContainerStyle: ParticipantListStyles;
+/**
+ * Default styles for button flyout items
+ *
+ * @private
+ */
+export declare const buttonFlyoutItemStyles: IContextualMenuItemStyles;
 export {};
 //# sourceMappingURL=ControlBar.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/ControlBar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ControlBar.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ControlBar.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAY,MAAM,EAAE,aAAa,EAAE,qBAAqB,EAAmB,MAAM,iBAAiB,CAAC;AAK1G,UAAU,iBAAiB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,iBA0F9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAejC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,MAItC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,aAavC,CAAC;AAGH,eAAO,MAAM,gCAAgC,EAAE,OAAO,CAAC,qBAAqB,CAO3E,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAElD,CAAC"}
+{"version":3,"file":"ControlBar.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ControlBar.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC1G,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,UAAU,iBAAiB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,iBAsF9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,aAuBjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,EAAE,OAAO,CAAC,qBAAqB,CAO3E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oCAAoC,EAAE,qBAIlD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,yBAOpC,CAAC"}

package/dist/dist-esm/react-components/src/components/styles/ControlBar.styles.js

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { getTheme, concatStyleSets } from '@fluentui/react';
-const theme = getTheme();
-const palette = theme.palette;
+/**
+ * @private
+ */
 export const controlBarStyles = {
     horizontal: {
         flexFlow: 'row nowrap'
@@ -18,7 +18,8 @@ export const controlBarStyles = {
         position: 'absolute',
         top: 0,
         left: 0,
-        width: '100%'
+        width: '100%',
+        minWidth: 'fit-content'
     },
     dockedBottom: {
         flexFlow: 'row nowrap',
@@ -27,7 +28,8 @@ export const controlBarStyles = {
         position: 'absolute',
         bottom: 0,
         left: 0,
-        width: '100%'
+        width: '100%',
+        minWidth: 'fit-content'
     },
     dockedLeft: {
         justifyContent: 'center',
@@ -48,32 +50,28 @@ export const controlBarStyles = {
     floatingTop: {
         flexFlow: 'row nowrap',
         justifyContent: 'center',
-        boxShadow: theme.effects.elevation16,
-        borderRadius: theme.effects.roundedCorner6,
         overflow: 'hidden',
         position: 'absolute',
         top: '1rem',
         left: '50%',
         transform: 'translateX(-50%)',
+        minWidth: 'fit-content',
         zIndex: 10
     },
     floatingBottom: {
         flexFlow: 'row nowrap',
         justifyContent: 'center',
-        boxShadow: theme.effects.elevation16,
-        borderRadius: theme.effects.roundedCorner6,
         overflow: 'hidden',
         position: 'absolute',
         bottom: '1rem',
         left: '50%',
         transform: 'translateX(-50%)',
+        minWidth: 'fit-content',
         zIndex: 10
     },
     floatingLeft: {
         flexFlow: 'column nowrap',
         justifyContent: 'center',
-        boxShadow: theme.effects.elevation16,
-        borderRadius: theme.effects.roundedCorner6,
         overflow: 'hidden',
         position: 'absolute',
         top: '50%',
@@ -84,8 +82,6 @@ export const controlBarStyles = {
     floatingRight: {
         flexFlow: 'column nowrap',
         justifyContent: 'center',
-        boxShadow: theme.effects.elevation16,
-        borderRadius: theme.effects.roundedCorner6,
         overflow: 'hidden',
         position: 'absolute',
         top: '50%',
@@ -94,6 +90,9 @@ export const controlBarStyles = {
         zIndex: 10
     }
 };
+/**
+ * @private
+ */
 export const controlButtonStyles = {
     root: {
         background: 'none',
@@ -108,28 +107,21 @@ export const controlButtonStyles = {
     flexContainer: {
         flexFlow: 'column',
         display: 'contents'
-    }
-};
-export const controlButtonLabelStyles = {
-    fontSize: '0.625rem',
-    lineHeight: '1rem',
-    cursor: 'pointer'
-};
-export const endCallControlButtonStyles = concatStyleSets(controlButtonStyles, {
-    root: {
-        color: palette.white
-    },
-    rootHovered: {
-        color: palette.white
-    },
-    rootPressed: {
-        color: palette.white
     },
     label: {
-        color: palette.white
+        fontSize: '0.625rem',
+        fontWeight: '400',
+        lineHeight: '1rem',
+        cursor: 'pointer',
+        display: 'block',
+        margin: '0rem 0.25rem'
     }
-});
-// making it Partial as IContextualMenuStyles has all its props non-optional and we only need title to be defined here
+};
+/**
+ * making it Partial as IContextualMenuStyles has all its props non-optional and we only need title to be defined here.
+ *
+ * @private
+ */
 export const participantsButtonMenuPropsStyle = {
     title: {
         background: 'initial',
@@ -138,7 +130,25 @@ export const participantsButtonMenuPropsStyle = {
         fontSize: '.75rem'
     }
 };
+/**
+ * @private
+ */
 export const defaultParticipantListContainerStyle = {
-    maxHeight: '20rem'
+    root: {
+        maxHeight: '20rem'
+    }
+};
+/**
+ * Default styles for button flyout items
+ *
+ * @private
+ */
+export const buttonFlyoutItemStyles = {
+    icon: {
+        lineHeight: 0
+    },
+    checkmarkIcon: {
+        lineHeight: 0
+    }
 };
 //# sourceMappingURL=ControlBar.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBar.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ControlBar.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ControlBar.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ControlBar.styles.ts"],"names":[],"mappings":"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"}

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

@@ -1,10 +1,21 @@
-export declare const editBoxStyle: string;
+/**
+ * @private
+ */
+export declare const editBoxStyle: (inlineEditButtons: boolean) => string;
+/**
+ * @private
+ */
 export declare const editingButtonStyle: string;
+/**
+ * @private
+ */
 export declare const inputBoxIcon: string;
+/**
+ * @private
+ */
 export declare const editBoxStyleSet: {
     root: {
         width: string;
-        marginLeft: string;
     };
 };
 //# sourceMappingURL=EditBox.styles.d.ts.map

package/dist/dist-esm/react-components/src/components/styles/EditBox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditBox.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/EditBox.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,QAIvB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAE7B,CAAC;AAEH,eAAO,MAAM,YAAY,QAKvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;CAK3B,CAAC"}
+{"version":3,"file":"EditBox.styles.d.ts","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/EditBox.styles.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,eAAO,MAAM,YAAY,sBAAuB,OAAO,KAAG,MAOtD,CAAC;AAEL;;GAEG;AACH,eAAO,MAAM,kBAAkB,QAE7B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,YAAY,QAKvB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAI3B,CAAC"}

package/dist/dist-esm/react-components/src/components/styles/EditBox.styles.js

@@ -1,24 +1,37 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { mergeStyles } from '@fluentui/react';
-export const editBoxStyle = mergeStyles({
+/**
+ * @private
+ */
+export const editBoxStyle = (inlineEditButtons) => mergeStyles({
     marginTop: '0.0875rem',
     marginBottom: '0.0875rem',
-    paddingRight: '3.25rem'
+    // @TODO future refactor: This is being used to give enough space to the accept/reject edits buttons
+    // This space affordance should be handled by the InputBoxComponent not the here (by the parent of the InputBoxComponent)
+    paddingRight: inlineEditButtons ? '3.25rem' : '0.5rem'
 });
+/**
+ * @private
+ */
 export const editingButtonStyle = mergeStyles({
     margin: 'auto .3rem'
 });
+/**
+ * @private
+ */
 export const inputBoxIcon = mergeStyles({
     margin: 'auto',
     '&:hover svg': {
         stroke: 'currentColor'
     }
 });
+/**
+ * @private
+ */
 export const editBoxStyleSet = {
     root: {
-        width: '100%',
-        marginLeft: '6.25rem'
+        width: '100%'
     }
 };
 //# sourceMappingURL=EditBox.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditBox.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/EditBox.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACtC,SAAS,EAAE,WAAW;IACtB,YAAY,EAAE,WAAW;IACzB,YAAY,EAAE,SAAS;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC;IAC5C,MAAM,EAAE,YAAY;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACtC,MAAM,EAAE,MAAM;IACd,aAAa,EAAE;QACb,MAAM,EAAE,cAAc;KACvB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,SAAS;KACtB;CACF,CAAC"}
+{"version":3,"file":"EditBox.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/EditBox.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,iBAA0B,EAAU,EAAE,CACjE,WAAW,CAAC;IACV,SAAS,EAAE,WAAW;IACtB,YAAY,EAAE,WAAW;IACzB,oGAAoG;IACpG,yHAAyH;IACzH,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;CACvD,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC;IAC5C,MAAM,EAAE,YAAY;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACtC,MAAM,EAAE,MAAM;IACd,aAAa,EAAE;QACb,MAAM,EAAE,cAAc;KACvB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;KACd;CACF,CAAC"}