@azure/communication-react 1.7.0-beta.2 → 1.7.1-alpha-202308170011

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/HorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,IAAI,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QACjD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, Theme } from '@fluentui/react';\n\n/**\n * Horizontal Gallery button width in rem\n */\nexport const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;\n\n/**\n * @private\n */\nexport const leftRightButtonStyles = (theme: Theme): IStyle => {\n  return {\n    background: 'none',\n    padding: 0,\n    height: 'auto',\n    minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n    maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n    border: `1px solid ${theme.palette.neutralLight}`,\n    borderRadius: theme.effects.roundedCorner4\n  };\n};\n\n/**\n * Horizontal Gallery gap size in rem between tiles and buttons\n */\nexport const HORIZONTAL_GALLERY_GAP = 0.5;\n\n/**\n * @private\n */\nexport const rootStyle: IStyle = {\n  height: '100%',\n  width: '100%',\n  gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n\n/**\n * @private\n */\nexport const childrenContainerStyle: IStyle = {\n  height: '100%',\n  width: '100%',\n  gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};"]}
+{"version":3,"file":"HorizontalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/HorizontalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,IAAI,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,QAAQ,EAAE,GAAG,+BAA+B,KAAK;QACjD,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QACjD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,GAAG,sBAAsB,KAAK;CACpC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, Theme } from '@fluentui/react';\n\n/**\n * Horizontal Gallery button width in rem\n */\nexport const HORIZONTAL_GALLERY_BUTTON_WIDTH = 1.75;\n\n/**\n * @private\n */\nexport const leftRightButtonStyles = (theme: Theme): IStyle => {\n  return {\n    background: 'none',\n    padding: 0,\n    height: 'auto',\n    minWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n    maxWidth: `${HORIZONTAL_GALLERY_BUTTON_WIDTH}rem`,\n    border: `1px solid ${theme.palette.neutralLight}`,\n    borderRadius: theme.effects.roundedCorner4\n  };\n};\n\n/**\n * Horizontal Gallery gap size in rem between tiles and buttons\n */\nexport const HORIZONTAL_GALLERY_GAP = 0.5;\n\n/**\n * @private\n */\nexport const rootStyle: IStyle = {\n  height: '100%',\n  width: '100%',\n  gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n\n/**\n * @private\n */\nexport const childrenContainerStyle: IStyle = {\n  height: '100%',\n  width: '100%',\n  gap: `${HORIZONTAL_GALLERY_GAP}rem`\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/IconButton.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,aAAa;IACzB,QAAQ,EAAE;QACR,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,aAAa;KAC1B;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const iconButtonClassName = mergeStyles({\n  color: 'unset',\n  width: '1rem',\n  height: '1rem',\n  background: 'transparent',\n  ':hover': {\n    color: 'unset',\n    background: 'transparent'\n  }\n});"]}
+{"version":3,"file":"IconButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/IconButton.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,aAAa;IACzB,QAAQ,EAAE;QACR,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,aAAa;KAC1B;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const iconButtonClassName = mergeStyles({\n  color: 'unset',\n  width: '1rem',\n  height: '1rem',\n  background: 'transparent',\n  ':hover': {\n    color: 'unset',\n    background: 'transparent'\n  }\n});\n"]}

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

@@ -0,0 +1,70 @@
+import { IIconProps, IOverlayStyles, IStyle, Theme } from '@fluentui/react';
+/**
+ * @private
+ */
+export declare const cancelIcon: IIconProps;
+/**
+ * @private
+ */
+export declare const downloadIcon: IIconProps;
+/**
+ * @private
+ */
+export declare const overlayStyles: (theme: Theme, isDarkThemed: boolean) => IOverlayStyles;
+/**
+ * @private
+ */
+export declare const focusTrapZoneStyle: IStyle;
+/**
+ * @private
+ */
+export declare const scrollableContentStyle: IStyle;
+/**
+ * @private
+ */
+export declare const headerStyle: IStyle;
+/**
+ * @private
+ */
+export declare const titleBarContainerStyle: IStyle;
+/**
+ * @private
+ */
+export declare const titleStyle: (theme: Theme, isDarkThemed: boolean) => IStyle;
+/**
+ * @private
+ */
+export declare const controlBarContainerStyle: IStyle;
+/**
+ * @private
+ */
+export declare const downloadIconStyle: IStyle;
+/**
+ * @private
+ */
+export declare const bodyContainer: IStyle;
+/**
+ * @private
+ */
+export declare const bodyFocusZone: IStyle;
+/**
+ * @private
+ */
+export declare const normalImageStyle: IStyle;
+/**
+ * @private
+ */
+export declare const brokenImageStyle: (theme: Theme, isDarkThemed: boolean) => IStyle;
+/**
+ * @private
+ */
+export declare const closeButtonStyles: (theme: Theme, isDarkThemed: boolean) => IStyle;
+/**
+ * @private
+ */
+export declare const downloadButtonStyle: (theme: Theme, isDarkThemed: boolean) => IStyle;
+/**
+ * @private
+ */
+export declare const smallDownloadButtonContainerStyle: (theme: Theme, isDarkThemed: boolean) => IStyle;
+//# sourceMappingURL=ImageGallery.style.d.ts.map

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

@@ -0,0 +1,219 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+export const cancelIcon = { iconName: 'Cancel' };
+/**
+ * @private
+ */
+export const downloadIcon = {
+    iconName: 'Download'
+};
+/**
+ * @private
+ */
+export const overlayStyles = (theme, isDarkThemed) => {
+    return {
+        root: {
+            // The overlay background color should always be black in both light and dark theme.
+            // In dark theme, theme.palette.white is actually black.
+            background: isDarkThemed ? theme.palette.white : theme.palette.black,
+            opacity: '0.85'
+        }
+    };
+};
+/**
+ * @private
+ */
+export const focusTrapZoneStyle = {
+    boxShadow: 'none',
+    background: 'transparent',
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    maxWidth: '100%',
+    maxHeight: '100%'
+};
+/**
+ * @private
+ */
+export const scrollableContentStyle = {
+    overflowY: 'hidden',
+    display: 'flex',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    flexDirection: 'column',
+    flexWrap: 'nowrap'
+};
+/**
+ * @private
+ */
+export const headerStyle = {
+    fontSize: 'inherit',
+    margin: '0',
+    width: '100%',
+    height: '3.5rem',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: '0.25rem 0.75rem'
+};
+/**
+ * @private
+ */
+export const titleBarContainerStyle = {
+    flexDirection: 'row',
+    justifyContent: 'start',
+    flexWrap: 'wrap',
+    alignContent: 'center',
+    alignItems: 'center'
+};
+/**
+ * @private
+ */
+export const titleStyle = (theme, isDarkThemed) => {
+    return {
+        paddingLeft: '0.5rem',
+        marginLeft: '0.5rem',
+        color: isDarkThemed ? undefined : theme.palette.white,
+        fontFamily: 'inherit',
+        fontSize: '0.875rem',
+        fontStyle: 'normal',
+        fontWeight: '600',
+        lineHeight: '1.25rem'
+    };
+};
+/**
+ * @private
+ */
+export const controlBarContainerStyle = {
+    flexDirection: 'row',
+    justifyContent: 'start',
+    flexWrap: 'wrap',
+    alignContent: 'center',
+    alignItems: 'center'
+};
+/**
+ * @private
+ */
+export const downloadIconStyle = {
+    marginRight: '0.5em',
+    fontSize: '0.875rem' // 14px
+};
+/**
+ * @private
+ */
+export const bodyContainer = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    padding: '5.75rem',
+    '@media (max-width: 25rem) or (max-height: 25rem)': {
+        padding: '2rem'
+    }
+};
+/**
+ * @private
+ */
+export const bodyFocusZone = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+};
+/**
+ * @private
+ */
+export const normalImageStyle = {
+    objectFit: 'contain',
+    maxHeight: '100%',
+    maxWidth: '100%'
+};
+/**
+ * @private
+ */
+export const brokenImageStyle = (theme, isDarkThemed) => {
+    return {
+        // The color should be white in dark theme.
+        // In dark theme, theme.palette.black is actually white.
+        color: isDarkThemed ? theme.palette.black : theme.palette.white
+    };
+};
+/**
+ * @private
+ */
+export const closeButtonStyles = (theme, isDarkThemed) => {
+    return {
+        // The color should be white in dark theme.
+        // In dark theme, theme.palette.black is actually white.
+        color: isDarkThemed ? theme.palette.black : theme.palette.white,
+        ':hover': {
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
+        },
+        ':active': {
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
+        }
+    };
+};
+/**
+ * @private
+ */
+export const downloadButtonStyle = (theme, isDarkThemed) => {
+    return {
+        margin: '0 0.5rem',
+        height: '32px',
+        borderWidth: '1px',
+        fontSize: '0.875rem',
+        fontWeight: 600,
+        padding: '0.38rem 0.75rem',
+        borderRadius: '4px',
+        backgroundColor: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,
+        color: isDarkThemed ? undefined : theme.palette.white,
+        whiteSpace: 'nowrap',
+        ':hover': {
+            // The color should be white in dark theme.
+            // In dark theme, theme.palette.black is actually white.
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
+        },
+        ':active': {
+            // The color should be white in dark theme.
+            // In dark theme, theme.palette.black is actually white.
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
+        },
+        '@media (max-width: 25rem)': {
+            display: 'none'
+        }
+    };
+};
+/**
+ * @private
+ */
+export const smallDownloadButtonContainerStyle = (theme, isDarkThemed) => {
+    return {
+        marginRight: '0.5rem',
+        // The color should be white in dark theme.
+        // In dark theme, theme.palette.black is actually white.
+        color: isDarkThemed ? theme.palette.black : theme.palette.white,
+        whiteSpace: 'nowrap',
+        ':hover': {
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
+        },
+        ':active': {
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
+        },
+        '@media (min-width: 25rem)': {
+            display: 'none'
+        }
+    };
+};
+//# sourceMappingURL=ImageGallery.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageGallery.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IIconProps, IOverlayStyles, IStyle, Theme } 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/**\n * @private\n */\nexport const overlayStyles = (theme: Theme, isDarkThemed: boolean): IOverlayStyles => {\n  return {\n    root: {\n      // The overlay background color should always be black in both light and dark theme.\n      // In dark theme, theme.palette.white is actually black.\n      background: isDarkThemed ? theme.palette.white : theme.palette.black,\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/**\n * @private\n */\nexport const titleStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n  return {\n    paddingLeft: '0.5rem',\n    marginLeft: '0.5rem',\n    color: isDarkThemed ? undefined : theme.palette.white,\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: '5.75rem',\n  '@media (max-width: 25rem) or (max-height: 25rem)': {\n    padding: '2rem'\n  }\n};\n\n/**\n * @private\n */\nexport const bodyFocusZone: IStyle = {\n  width: '100%',\n  height: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center'\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: Theme, isDarkThemed: boolean): IStyle => {\n  return {\n    // The color should be white in dark theme.\n    // In dark theme, theme.palette.black is actually white.\n    color: isDarkThemed ? theme.palette.black : theme.palette.white\n  };\n};\n\n/**\n * @private\n */\nexport const closeButtonStyles = (theme: Theme, isDarkThemed: boolean): IStyle => {\n  return {\n    // The color should be white in dark theme.\n    // In dark theme, theme.palette.black is actually white.\n    color: isDarkThemed ? theme.palette.black : theme.palette.white,\n    ':hover': {\n      color: isDarkThemed ? theme.palette.black : theme.palette.white,\n      backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n    },\n    ':active': {\n      color: isDarkThemed ? theme.palette.black : theme.palette.white,\n      backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const downloadButtonStyle = (theme: Theme, isDarkThemed: boolean): 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: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,\n    color: isDarkThemed ? undefined : theme.palette.white,\n    whiteSpace: 'nowrap',\n    ':hover': {\n      // The color should be white in dark theme.\n      // In dark theme, theme.palette.black is actually white.\n      color: isDarkThemed ? theme.palette.black : theme.palette.white,\n      backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n    },\n    ':active': {\n      // The color should be white in dark theme.\n      // In dark theme, theme.palette.black is actually white.\n      color: isDarkThemed ? theme.palette.black : theme.palette.white,\n      backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n    },\n    '@media (max-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n  return {\n    marginRight: '0.5rem',\n    // The color should be white in dark theme.\n    // In dark theme, theme.palette.black is actually white.\n    color: isDarkThemed ? theme.palette.black : theme.palette.white,\n    whiteSpace: 'nowrap',\n    ':hover': {\n      color: isDarkThemed ? theme.palette.black : theme.palette.white,\n      backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n    },\n    ':active': {\n      color: isDarkThemed ? theme.palette.black : theme.palette.white,\n      backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n    },\n    '@media (min-width: 25rem)': {\n      display: 'none'\n    }\n  };\n};\n"]}

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

@@ -13,7 +13,6 @@ export const inputBoxWrapperStyle = mergeStyles({
 export const inputBoxStyle = mergeStyles({
     overflow: 'auto',
     minHeight: '2.25rem',
-    // prevents the input text box from being sized to 0px when the CallWithChatComposite chat pane is closed.
     maxHeight: '8.25rem',
     outline: 'red 5px',
     fontWeight: FontWeights.regular,
@@ -64,9 +63,7 @@ export const textFieldStyle = {
         /**
          * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.
          */
-        ':after': {
-            border: 'none'
-        }
+        ':after': { border: 'none' }
     },
     field: {
         borderRadius: '0.25rem'

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.style.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/InputBoxComponent.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,OAAO,EAAE,GAAG;CACb,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,SAAS;IACpB,0GAA0G;IAC1G,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,WAAW,CAAC,OAAO;IAC/B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,QAAQ;IACpB,6BAA6B,EAAE;QAC7B,QAAQ,EAAE,UAAU;KACrB;IACD,oBAAoB,EAAE;QACpB,QAAQ,EAAE,UAAU;KACrB;IACD,mBAAmB,EAAE;QACnB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAW;IACpD,YAAY,EAAE,MAAM;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG;QACd,QAAQ,EAAE,SAAS;KACpB;IACD,OAAO,EAAE,EAAE;IACX,UAAU,EAAE;QACV,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,GAAG;QACd;;WAEG;QACH,QAAQ,EAAE;YACR,MAAM,EAAE,MAAM;SACf;KACF;IACD,KAAK,EAAE;QACL,YAAY,EAAE,SAAS;KACxB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW;IACnB,eAAe,EAAE,aAAa;IAC9B,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAW;IAClD,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,MAAM;CACZ,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,uGAAuG;IACvG,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,aAAa,EAAE,MAAM;CACtB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { mergeStyles, IStyle, FontWeights } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const inputBoxWrapperStyle = mergeStyles({\n  padding: '0'\n});\n\n/**\n * @private\n */\nexport const inputBoxStyle = mergeStyles({\n  overflow: 'auto',\n  minHeight: '2.25rem',\n  // prevents the input text box from being sized to 0px when the CallWithChatComposite chat pane is closed.\n  maxHeight: '8.25rem',\n  outline: 'red 5px',\n  fontWeight: FontWeights.regular,\n  fontSize: '0.875rem',\n  width: '100%',\n  height: '2.25rem',\n  lineHeight: '1.5rem',\n  '::-webkit-input-placeholder': {\n    fontSize: '0.875rem'\n  },\n  '::-moz-placeholder': {\n    fontSize: '0.875rem'\n  },\n  ':-moz-placeholder': {\n    fontSize: '0.875rem'\n  }\n});\n\n/**\n * @private\n */\nexport const inputBoxNewLineSpaceAffordance: IStyle = {\n  marginBottom: '2rem'\n};\n\n/**\n *\n * @private\n */\nexport const textContainerStyle: IStyle = {\n  alignSelf: 'center',\n  position: 'relative',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport const textFieldStyle: IStyle = {\n  root: {\n    width: '100%',\n    minHeight: '0',\n    fontSize: '8.25rem'\n  },\n  wrapper: {},\n  fieldGroup: {\n    outline: 'none',\n    border: 'none',\n    height: 'auto',\n    minHeight: '0',\n    /**\n     * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.\n     */\n    ':after': {\n      border: 'none'\n    }\n  },\n  field: {\n    borderRadius: '0.25rem'\n  }\n};\n\n/**\n * @private\n */\nexport const inputButtonStyle = mergeStyles({\n  color: 'grey',\n  margin: 'auto',\n  width: '1.0625rem',\n  height: '1.0625rem',\n  backgroundColor: 'transparent',\n  '&:hover': {\n    backgroundColor: 'transparent'\n  }\n});\n\n/**\n * @private\n */\nexport const newLineButtonsContainerStyle: IStyle = {\n  position: 'absolute',\n  right: '0.8rem',\n  bottom: '0.8rem',\n  gap: '1rem'\n};\n\n/**\n * @private\n */\nexport const inputButtonTooltipStyle = mergeStyles({\n  // The toolTip host container show be a flex box, so that alignItems: 'center' works for inside buttons\n  display: 'flex'\n});\n\n/**\n * @private\n */\nexport const iconWrapperStyle = mergeStyles({\n  pointerEvents: 'none'\n});"]}
+{"version":3,"file":"InputBoxComponent.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/InputBoxComponent.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,OAAO,EAAE,GAAG;CACb,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,WAAW,CAAC,OAAO;IAC/B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,QAAQ;IACpB,6BAA6B,EAAE;QAC7B,QAAQ,EAAE,UAAU;KACrB;IACD,oBAAoB,EAAE;QACpB,QAAQ,EAAE,UAAU;KACrB;IACD,mBAAmB,EAAE;QACnB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAW;IACpD,YAAY,EAAE,MAAM;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG;QACd,QAAQ,EAAE,SAAS;KACpB;IACD,OAAO,EAAE,EAAE;IACX,UAAU,EAAE;QACV,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,GAAG;QACd;;WAEG;QACH,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;KAC7B;IACD,KAAK,EAAE;QACL,YAAY,EAAE,SAAS;KACxB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW;IACnB,eAAe,EAAE,aAAa;IAC9B,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAW;IAClD,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,MAAM;CACZ,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,uGAAuG;IACvG,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,aAAa,EAAE,MAAM;CACtB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { mergeStyles, IStyle, FontWeights } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const inputBoxWrapperStyle = mergeStyles({\n  padding: '0'\n});\n\n/**\n * @private\n */\nexport const inputBoxStyle = mergeStyles({\n  overflow: 'auto',\n  minHeight: '2.25rem', // prevents the input text box from being sized to 0px when the CallWithChatComposite chat pane is closed.\n  maxHeight: '8.25rem',\n  outline: 'red 5px',\n  fontWeight: FontWeights.regular,\n  fontSize: '0.875rem',\n  width: '100%',\n  height: '2.25rem',\n  lineHeight: '1.5rem',\n  '::-webkit-input-placeholder': {\n    fontSize: '0.875rem'\n  },\n  '::-moz-placeholder': {\n    fontSize: '0.875rem'\n  },\n  ':-moz-placeholder': {\n    fontSize: '0.875rem'\n  }\n});\n\n/**\n * @private\n */\nexport const inputBoxNewLineSpaceAffordance: IStyle = {\n  marginBottom: '2rem'\n};\n\n/**\n *\n * @private\n */\nexport const textContainerStyle: IStyle = {\n  alignSelf: 'center',\n  position: 'relative',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport const textFieldStyle: IStyle = {\n  root: {\n    width: '100%',\n    minHeight: '0',\n    fontSize: '8.25rem'\n  },\n  wrapper: {},\n  fieldGroup: {\n    outline: 'none',\n    border: 'none',\n    height: 'auto',\n    minHeight: '0',\n    /**\n     * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.\n     */\n    ':after': { border: 'none' }\n  },\n  field: {\n    borderRadius: '0.25rem'\n  }\n};\n\n/**\n * @private\n */\nexport const inputButtonStyle = mergeStyles({\n  color: 'grey',\n  margin: 'auto',\n  width: '1.0625rem',\n  height: '1.0625rem',\n  backgroundColor: 'transparent',\n  '&:hover': {\n    backgroundColor: 'transparent'\n  }\n});\n\n/**\n * @private\n */\nexport const newLineButtonsContainerStyle: IStyle = {\n  position: 'absolute',\n  right: '0.8rem',\n  bottom: '0.8rem',\n  gap: '1rem'\n};\n\n/**\n * @private\n */\nexport const inputButtonTooltipStyle = mergeStyles({\n  // The toolTip host container show be a flex box, so that alignItems: 'center' works for inside buttons\n  display: 'flex'\n});\n\n/**\n * @private\n */\nexport const iconWrapperStyle = mergeStyles({\n  pointerEvents: 'none'\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MentionPopover.style.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/MentionPopover.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAEnE;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IAChF,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;IACpC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;IAC/C,QAAQ,EAAE,SAAS;IACnB,4DAA4D;IAC5D,MAAM,EAAE,qBAAqB,GAAG,CAAC;CAClC,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAgB,EAAE;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;YACrC,MAAM,EAAE,qBAAqB;YAC7B,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ;SACzC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,WAAW,CAAC;IACtD,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,OAAO,EAAE,gBAAgB;IACzB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAU,EAAE;IACjE,OAAO,WAAW,CAAC;QACjB,MAAM,EAAE,WAAW;QACnB,iBAAiB,EAAE;YACjB,OAAO,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,eAAe;SAC/C;KACF,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAY,EAAE,mBAA4B,EAAE,YAAqB,EAAU,EAAE;IACpH,OAAO,WAAW,CAAC;QACjB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;QACpF,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,mBAAmB,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM;KACrF,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n * z-index to ensure that chat container has lower z-index than mention popover\n */\nexport const CHAT_CONTAINER_ZINDEX = 1;\n\n/**\n * @private\n */\nexport const mentionPopoverContainerStyle = (theme: Theme): string => mergeStyles({\n  boxShadow: theme.effects.elevation16,\n  background: theme.semanticColors.bodyBackground,\n  overflow: 'visible',\n  // zIndex to set the mentionPopover above the chat container\n  zIndex: CHAT_CONTAINER_ZINDEX + 1\n});\n/**\n * @private\n */\nexport const headerStyleThemed = (theme: Theme): IStackStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralSecondary,\n      margin: '0.5rem 1rem 0.25rem',\n      fontSize: theme.fonts.smallPlus.fontSize\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const suggestionListContainerStyle = mergeStyles({\n  height: '100%',\n  overflowY: 'visible',\n  overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const suggestionListStyle = mergeStyles({\n  padding: '0.25rem 0rem 0',\n  overflow: 'visible',\n  overflowY: 'scroll'\n});\n\n/**\n * @private\n */\nexport const suggestionItemWrapperStyle = (theme: Theme): string => {\n  return mergeStyles({\n    margin: '0.05rem 0',\n    '&:focus-visible': {\n      outline: `${theme.palette.black} solid 0.1rem`\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const suggestionItemStackStyle = (theme: Theme, isSuggestionHovered: boolean, activeBorder: boolean): string => {\n  return mergeStyles({\n    width: '10rem',\n    alignItems: 'center',\n    height: '36px',\n    padding: '0 0.75rem',\n    background: isSuggestionHovered ? theme.palette.neutralLighter : theme.palette.white,\n    outline: activeBorder ? `0.0625rem solid ${theme.palette.neutralSecondary}` : 'none'\n  });\n};"]}
+{"version":3,"file":"MentionPopover.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MentionPopover.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAEnE;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAEvC;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAY,EAAU,EAAE,CACnE,WAAW,CAAC;IACV,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;IACpC,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;IAC/C,QAAQ,EAAE,SAAS;IACnB,4DAA4D;IAC5D,MAAM,EAAE,qBAAqB,GAAG,CAAC;CAClC,CAAC,CAAC;AACL;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAgB,EAAE;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;YACrC,MAAM,EAAE,qBAAqB;YAC7B,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ;SACzC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,WAAW,CAAC;IACtD,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC;IAC7C,OAAO,EAAE,gBAAgB;IACzB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,QAAQ;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAU,EAAE;IACjE,OAAO,WAAW,CAAC;QACjB,MAAM,EAAE,WAAW;QACnB,iBAAiB,EAAE;YACjB,OAAO,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,eAAe;SAC/C;KACF,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAY,EAAE,mBAA4B,EAAE,YAAqB,EAAU,EAAE;IACpH,OAAO,WAAW,CAAC;QACjB,KAAK,EAAE,OAAO;QACd,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;QACpF,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,mBAAmB,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM;KACrF,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStackStyles, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n * z-index to ensure that chat container has lower z-index than mention popover\n */\nexport const CHAT_CONTAINER_ZINDEX = 1;\n\n/**\n * @private\n */\nexport const mentionPopoverContainerStyle = (theme: Theme): string =>\n  mergeStyles({\n    boxShadow: theme.effects.elevation16,\n    background: theme.semanticColors.bodyBackground,\n    overflow: 'visible',\n    // zIndex to set the mentionPopover above the chat container\n    zIndex: CHAT_CONTAINER_ZINDEX + 1\n  });\n/**\n * @private\n */\nexport const headerStyleThemed = (theme: Theme): IStackStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralSecondary,\n      margin: '0.5rem 1rem 0.25rem',\n      fontSize: theme.fonts.smallPlus.fontSize\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const suggestionListContainerStyle = mergeStyles({\n  height: '100%',\n  overflowY: 'visible',\n  overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const suggestionListStyle = mergeStyles({\n  padding: '0.25rem 0rem 0',\n  overflow: 'visible',\n  overflowY: 'scroll'\n});\n\n/**\n * @private\n */\nexport const suggestionItemWrapperStyle = (theme: Theme): string => {\n  return mergeStyles({\n    margin: '0.05rem 0',\n    '&:focus-visible': {\n      outline: `${theme.palette.black} solid 0.1rem`\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const suggestionItemStackStyle = (theme: Theme, isSuggestionHovered: boolean, activeBorder: boolean): string => {\n  return mergeStyles({\n    width: '10rem',\n    alignItems: 'center',\n    height: '36px',\n    padding: '0 0.75rem',\n    background: isSuggestionHovered ? theme.palette.neutralLighter : theme.palette.white,\n    outline: activeBorder ? `0.0625rem solid ${theme.palette.neutralSecondary}` : 'none'\n  });\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusIndicator.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/MessageStatusIndicator.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,eAAe;AACf,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,WAAW,CAAC;IAC9D,WAAW,EAAE,UAAU;IACvB,QAAQ,EAAE,SAAS;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,WAAW,CAAC;IACzD,QAAQ,EAAE,GAAG,iCAAiC,KAAK;IACnD,KAAK,EAAE,GAAG,iCAAiC,KAAK;IAChD,MAAM,EAAE,GAAG,iCAAiC,KAAK;CAClD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles } from '@fluentui/react';\n\n/** @private */\nexport const MESSAGE_STATUS_INDICATOR_SIZE_REM = 1;\n\n/**\n * ErrorIcon seems designed slightly smaller than other icons we try to match the size and then fix positioning here.\n *\n * @private\n */\nexport const MessageStatusIndicatorErrorIconStyle = mergeStyles({\n  marginRight: '-0.06rem',\n  fontSize: '1.06rem'\n});\n\n/**\n * @private\n */\nexport const MessageStatusIndicatorIconStyle = mergeStyles({\n  fontSize: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`,\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`,\n  height: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});"]}
+{"version":3,"file":"MessageStatusIndicator.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageStatusIndicator.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,eAAe;AACf,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oCAAoC,GAAG,WAAW,CAAC;IAC9D,WAAW,EAAE,UAAU;IACvB,QAAQ,EAAE,SAAS;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,WAAW,CAAC;IACzD,QAAQ,EAAE,GAAG,iCAAiC,KAAK;IACnD,KAAK,EAAE,GAAG,iCAAiC,KAAK;IAChD,MAAM,EAAE,GAAG,iCAAiC,KAAK;CAClD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles } from '@fluentui/react';\n\n/** @private */\nexport const MESSAGE_STATUS_INDICATOR_SIZE_REM = 1;\n\n/**\n * ErrorIcon seems designed slightly smaller than other icons we try to match the size and then fix positioning here.\n *\n * @private\n */\nexport const MessageStatusIndicatorErrorIconStyle = mergeStyles({\n  marginRight: '-0.06rem',\n  fontSize: '1.06rem'\n});\n\n/**\n * @private\n */\nexport const MessageStatusIndicatorIconStyle = mergeStyles({\n  fontSize: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`,\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`,\n  height: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n"]}

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

@@ -108,12 +108,10 @@ export const defaultChatMessageContainer = (theme) => ({
     marginRight: '0rem',
     '& img': {
         maxWidth: '100% !important',
-        // Add !important to make sure it won't be overridden by style defined in element
         height: 'auto !important'
     },
     '& video': {
         maxWidth: '100% !important',
-        // Add !important to make sure it won't be overridden by style defined in element
         height: 'auto !important'
     },
     '& p': {
@@ -225,12 +223,8 @@ export const buttonWithIconStyles = {
 export const loadPreviousMessageButtonStyle = mergeStyles({
     border: 'none',
     minHeight: '1.5rem',
-    '&:hover': {
-        background: 'none'
-    },
-    '&:active': {
-        background: 'none'
-    }
+    '&:hover': { background: 'none' },
+    '&:active': { background: 'none' }
 });
 /**
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, mergeStyles, Theme } from '@fluentui/react';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MESSAGE_GAP_REM = 0.5;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.425;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const chatStyle: ComponentSlotStyle = {\n  paddingBottom: '0.5rem',\n  paddingTop: '0.8rem',\n  border: 'none',\n  overflow: 'auto',\n  // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n  // to prevent intermittent scrollbars when gifs are present in the chat.\n  height: '100%'\n};\n\n/**\n * @private\n */\nexport const newMessageButtonContainerStyle = mergeStyles({\n  position: 'absolute',\n  zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n  bottom: 0,\n  right: '1.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageStyle: CSSProperties = {\n  overflowY: 'hidden'\n};\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const defaultChatItemMessageContainer = (overlapAvatarAndMessage: boolean): ComponentSlotStyle => {\n  const messageAvatarGap = overlapAvatarAndMessage ? -MESSAGE_AVATAR_OVERLAP_REM : AVATAR_MESSAGE_GAP_REM;\n  return {\n    marginRight: '0rem',\n    marginLeft: `${messageAvatarGap}rem`,\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + messageAvatarGap}rem)`,\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    '& msft-mention': {\n      color: '#D83B01',\n      fontWeight: 600\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const defaultMyChatMessageContainer: ComponentSlotStyle = {\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginLeft: '0rem',\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n};\n\n/**\n * @private\n */\nexport const FailedMyChatMessageContainer: ComponentSlotStyle = {\n  ...defaultChatItemMessageContainer,\n  backgroundColor: 'rgba(168, 0, 0, 0.2)'\n};\n\n/**\n * @private\n */\nexport const defaultChatMessageContainer = (theme: Theme): ComponentSlotStyle => ({\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginRight: '0rem',\n  '& img': {\n    maxWidth: '100% !important',\n    // Add !important to make sure it won't be overridden by style defined in element\n    height: 'auto !important'\n  },\n  '& video': {\n    maxWidth: '100% !important',\n    // Add !important to make sure it won't be overridden by style defined in element\n    height: 'auto !important'\n  },\n  '& p': {\n    // Deal with awkward padding seen in messages from Teams.\n    // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n    marginBlock: '0.125rem'\n  },\n  '& blockquote': {\n    backgroundColor: theme.palette.white,\n    clear: 'left',\n    minHeight: '2.25rem',\n    width: 'fit-content',\n    margin: '7px 0px',\n    padding: '7px 15px',\n    border: 'solid',\n    borderRadius: '4px',\n    borderWidth: '1px',\n    borderColor: theme.palette.neutralQuaternary,\n    borderLeftWidth: '4px'\n  },\n  '& table': {\n    backgroundColor: theme.palette.white,\n    border: theme.palette.neutralQuaternary,\n    borderCollapse: 'collapse',\n    tableLayout: 'auto',\n    width: '100%',\n    '& tr': {\n      border: `1px solid ${theme.palette.neutralQuaternary}`,\n      '& td': {\n        border: `1px solid ${theme.palette.neutralQuaternary}`,\n        wordBreak: 'normal',\n        padding: '0px 5px'\n      }\n    }\n  },\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n});\n\n/**\n * @private\n * @conditional-compile-remove(data-loss-prevention)\n */\nexport const defaultBlockedMessageStyleContainer = (theme: Theme): ComponentSlotStyle => ({\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginRight: '0rem',\n  color: theme.palette.neutralSecondary,\n  '& i': {\n    paddingTop: '0.25rem'\n  },\n  '& p': {\n    // Deal with awkward padding seen in messages from Teams.\n    // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n    marginBlock: '0.125rem',\n    paddingRight: '0.75rem',\n    fontStyle: 'italic'\n  },\n  '& a': {\n    marginBlock: '0.125rem',\n    fontStyle: 'normal',\n    color: theme.palette.themePrimary,\n    textDecoration: 'none'\n  },\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  width: `${AVATAR_WIDTH_REM}rem`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const messageStatusContainerStyle = (mine: boolean): string => mergeStyles({\n  marginLeft: mine ? '0.25rem' : '0rem'\n});\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': {\n    background: 'none'\n  },\n  '&:active': {\n    background: 'none'\n  }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});"]}
+{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, mergeStyles, Theme } from '@fluentui/react';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MESSAGE_GAP_REM = 0.5;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.425;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const chatStyle: ComponentSlotStyle = {\n  paddingBottom: '0.5rem',\n  paddingTop: '0.8rem',\n  border: 'none',\n  overflow: 'auto',\n  // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n  // to prevent intermittent scrollbars when gifs are present in the chat.\n  height: '100%'\n};\n\n/**\n * @private\n */\nexport const newMessageButtonContainerStyle = mergeStyles({\n  position: 'absolute',\n  zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n  bottom: 0,\n  right: '1.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageStyle: CSSProperties = {\n  overflowY: 'hidden'\n};\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const defaultChatItemMessageContainer = (overlapAvatarAndMessage: boolean): ComponentSlotStyle => {\n  const messageAvatarGap = overlapAvatarAndMessage ? -MESSAGE_AVATAR_OVERLAP_REM : AVATAR_MESSAGE_GAP_REM;\n  return {\n    marginRight: '0rem',\n    marginLeft: `${messageAvatarGap}rem`,\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + messageAvatarGap}rem)`,\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    '& msft-mention': {\n      color: '#D83B01',\n      fontWeight: 600\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const defaultMyChatMessageContainer: ComponentSlotStyle = {\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginLeft: '0rem',\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n};\n\n/**\n * @private\n */\nexport const FailedMyChatMessageContainer: ComponentSlotStyle = {\n  ...defaultChatItemMessageContainer,\n  backgroundColor: 'rgba(168, 0, 0, 0.2)'\n};\n\n/**\n * @private\n */\nexport const defaultChatMessageContainer = (theme: Theme): ComponentSlotStyle => ({\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginRight: '0rem',\n  '& img': {\n    maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n    height: 'auto !important'\n  },\n  '& video': {\n    maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n    height: 'auto !important'\n  },\n  '& p': {\n    // Deal with awkward padding seen in messages from Teams.\n    // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n    marginBlock: '0.125rem'\n  },\n  '& blockquote': {\n    backgroundColor: theme.palette.white,\n    clear: 'left',\n    minHeight: '2.25rem',\n    width: 'fit-content',\n    margin: '7px 0px',\n    padding: '7px 15px',\n    border: 'solid',\n    borderRadius: '4px',\n    borderWidth: '1px',\n    borderColor: theme.palette.neutralQuaternary,\n    borderLeftWidth: '4px'\n  },\n  '& table': {\n    backgroundColor: theme.palette.white,\n    border: theme.palette.neutralQuaternary,\n    borderCollapse: 'collapse',\n    tableLayout: 'auto',\n    width: '100%',\n\n    '& tr': {\n      border: `1px solid ${theme.palette.neutralQuaternary}`,\n\n      '& td': {\n        border: `1px solid ${theme.palette.neutralQuaternary}`,\n        wordBreak: 'normal',\n        padding: '0px 5px'\n      }\n    }\n  },\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n});\n\n/**\n * @private\n * @conditional-compile-remove(data-loss-prevention)\n */\nexport const defaultBlockedMessageStyleContainer = (theme: Theme): ComponentSlotStyle => ({\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginRight: '0rem',\n  color: theme.palette.neutralSecondary,\n\n  '& i': {\n    paddingTop: '0.25rem'\n  },\n\n  '& p': {\n    // Deal with awkward padding seen in messages from Teams.\n    // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n    marginBlock: '0.125rem',\n    paddingRight: '0.75rem',\n    fontStyle: 'italic'\n  },\n\n  '& a': {\n    marginBlock: '0.125rem',\n    fontStyle: 'normal',\n    color: theme.palette.themePrimary,\n    textDecoration: 'none'\n  },\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  width: `${AVATAR_WIDTH_REM}rem`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const messageStatusContainerStyle = (mine: boolean): string =>\n  mergeStyles({\n    marginLeft: mine ? '0.25rem' : '0rem'\n  });\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n"]}

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

@@ -53,7 +53,6 @@ export const iconContainerStyle = {
 export const iconStyles = mergeStyles({
     display: 'flex',
     lineHeight: 0,
-    // ensure the icon center is on the center line and not slightly above it
     alignItems: 'center'
 });
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantItem.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/ParticipantItem.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,OAG7C,EAAU,EAAE;IACX,OAAO;QACL,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,OAAO,CAAC,gBAAgB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAC9E,UAAU,EAAE,QAAQ;KACrB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAC/C;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAW;IAClD,QAAQ,EAAE,wBAAwB;IAClC,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,CAAC;IACb,yEAAyE;IACzE,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,YAAY,EAAE,QAAQ;CACvB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const participantItemContainerStyle = (options: {\n  localparticipant: boolean | undefined;\n  clickable: boolean;\n}): IStyle => {\n  return {\n    paddingTop: '0.25rem',\n    paddingBottom: '0.25rem',\n    display: 'flex',\n    maxWidth: '100%',\n    minWidth: '8rem',\n    cursor: options.localparticipant || !options.clickable ? 'default' : 'pointer',\n    alignItems: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const menuButtonContainerStyle = {\n  width: '1.5rem'\n};\n\n/**\n * @private\n */\nexport const participantStateMaxWidth = '5rem';\n/**\n * @private\n */\nexport const participantStateStringStyles: IStyle = {\n  maxWidth: participantStateMaxWidth,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  lineHeight: 'normal',\n  paddingLeft: '1rem',\n  marginLeft: 'auto',\n  marginRight: 0\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle = {\n  display: 'flex',\n  alignItems: 'center',\n  height: '100%',\n  paddingTop: '0.2rem'\n};\n\n/**\n * @private\n */\nexport const iconStyles = mergeStyles({\n  display: 'flex',\n  lineHeight: 0,\n  // ensure the icon center is on the center line and not slightly above it\n  alignItems: 'center'\n});\n\n/**\n * @private\n */\nexport const meContainerStyle = {\n  paddingRight: '0.5rem'\n};"]}
+{"version":3,"file":"ParticipantItem.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ParticipantItem.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtD;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,OAG7C,EAAU,EAAE;IACX,OAAO;QACL,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,OAAO,CAAC,gBAAgB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAC9E,UAAU,EAAE,QAAQ;KACrB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAC/C;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAW;IAClD,QAAQ,EAAE,wBAAwB;IAClC,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,YAAY,EAAE,QAAQ;CACvB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IStyle, mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const participantItemContainerStyle = (options: {\n  localparticipant: boolean | undefined;\n  clickable: boolean;\n}): IStyle => {\n  return {\n    paddingTop: '0.25rem',\n    paddingBottom: '0.25rem',\n    display: 'flex',\n    maxWidth: '100%',\n    minWidth: '8rem',\n    cursor: options.localparticipant || !options.clickable ? 'default' : 'pointer',\n    alignItems: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const menuButtonContainerStyle = {\n  width: '1.5rem'\n};\n\n/**\n * @private\n */\nexport const participantStateMaxWidth = '5rem';\n/**\n * @private\n */\nexport const participantStateStringStyles: IStyle = {\n  maxWidth: participantStateMaxWidth,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  lineHeight: 'normal',\n  paddingLeft: '1rem',\n  marginLeft: 'auto',\n  marginRight: 0\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle = {\n  display: 'flex',\n  alignItems: 'center',\n  height: '100%',\n  paddingTop: '0.2rem'\n};\n\n/**\n * @private\n */\nexport const iconStyles = mergeStyles({\n  display: 'flex',\n  lineHeight: 0, // ensure the icon center is on the center line and not slightly above it\n  alignItems: 'center'\n});\n\n/**\n * @private\n */\nexport const meContainerStyle = {\n  paddingRight: '0.5rem'\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ParticipantList.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/ParticipantList.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,UAAU;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAA8B;IACjE,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE,MAAM;QACpB,gBAAgB,EAAE;YAChB,MAAM,EAAE,UAAU;SACnB;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles } from '@fluentui/react';\nimport { ParticipantListItemStyles } from '../ParticipantList';\n\n/**\n * @private\n */\nexport const participantListStyle = mergeStyles({\n  height: '100%',\n  padding: '0.125rem'\n});\n\n/**\n * @private\n */\nexport const participantListItemStyle: ParticipantListItemStyles = {\n  root: {\n    paddingLeft: '1rem',\n    paddingRight: '1rem',\n    ':focus-visible': {\n      margin: '0.125rem'\n    }\n  }\n};\n\n/**\n * @private\n */\nexport const iconStyles = mergeStyles({\n  display: 'flex',\n  lineHeight: 0,\n  alignItems: 'center'\n});"]}
+{"version":3,"file":"ParticipantList.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ParticipantList.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,UAAU;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAA8B;IACjE,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE,MAAM;QACpB,gBAAgB,EAAE;YAChB,MAAM,EAAE,UAAU;SACnB;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles } from '@fluentui/react';\nimport { ParticipantListItemStyles } from '../ParticipantList';\n\n/**\n * @private\n */\nexport const participantListStyle = mergeStyles({\n  height: '100%',\n  padding: '0.125rem'\n});\n\n/**\n * @private\n */\nexport const participantListItemStyle: ParticipantListItemStyles = {\n  root: {\n    paddingLeft: '1rem',\n    paddingRight: '1rem',\n    ':focus-visible': {\n      margin: '0.125rem'\n    }\n  }\n};\n\n/**\n * @private\n */\nexport const iconStyles = mergeStyles({\n  display: 'flex',\n  lineHeight: 0,\n  alignItems: 'center'\n});\n"]}

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

@@ -5,16 +5,8 @@ import { mergeStyles } from '@fluentui/react';
  * @private
  */
 export const suppressIconStyle = {
-    iconContainer: {
-        minHeight: '0',
-        minWidth: '0',
-        height: '0',
-        width: '0',
-        margin: '0'
-    },
-    icon: {
-        display: 'none'
-    }
+    iconContainer: { minHeight: '0', minWidth: '0', height: '0', width: '0', margin: '0' },
+    icon: { display: 'none' }
 };
 /**
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"SendBox.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/SendBox.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAiB,MAAM,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa,EAAE;QACb,SAAS,EAAE,GAAG;QACd,QAAQ,EAAE,GAAG;QACb,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;KACZ;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,QAAQ;IAClB;;OAEG;IACH,oBAAoB,EAAE;QACpB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC;IACzC,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC;IAC/C,MAAM,EAAE,2BAA2B;IACnC,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,SAAS;CACnB,CAAC,CAAC;AACH,MAAM,wCAAwC,GAAG,MAAM,CAAC;AACxD,MAAM,sCAAsC,GAAG,KAAK,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAIvC,EAAU,EAAE;IACX,MAAM,EACJ,KAAK,EACL,eAAe,EACf,QAAQ,EACT,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;IACtG,MAAM,iBAAiB,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;IACxG,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,wCAAwC,CAAC;IAChF,MAAM,qBAAqB,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sCAAsC,CAAC;IACpF,OAAO;QACL,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,MAAM,EAAE,GAAG,eAAe,aAAa,WAAW,EAAE;QACpD,mHAAmH;QACnH,uHAAuH;QACvH,MAAM,EAAE,GAAG,sCAAsC,GAAG,eAAe,KAAK;QACxE,wCAAwC,EAAE;YACxC,MAAM,EAAE,GAAG,qBAAqB,aAAa,iBAAiB,EAAE;YAChE,MAAM,EAAE,GAAG,sCAAsC,GAAG,qBAAqB,KAAK;SAC/E;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, IStyle, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const suppressIconStyle = {\n  iconContainer: {\n    minHeight: '0',\n    minWidth: '0',\n    height: '0',\n    width: '0',\n    margin: '0'\n  },\n  icon: {\n    display: 'none'\n  }\n};\n\n/**\n * @private\n */\nexport const sendBoxWrapperStyles = mergeStyles({\n  margin: '0.25rem',\n  overflow: 'hidden',\n  /**\n   * margin-top set for all the child components of sendbox except first\n   */\n  ':not(:first-child)': {\n    marginTop: '0.25rem'\n  }\n});\n\n/**\n * @private\n */\nexport const sendButtonStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem'\n});\n\n/**\n * @private\n */\nexport const sendIconStyle = mergeStyles({\n  width: '1.25rem',\n  height: '1.25rem',\n  margin: 'auto'\n});\n\n/**\n * @private\n */\nexport const fileUploadCardsStyles = mergeStyles({\n  margin: '0 0.25rem 0.25rem 0.25rem',\n  maxHeight: '12.5rem',\n  overflow: 'auto'\n});\n\n/**\n * @private\n */\nexport const fileCardBoxStyle = mergeStyles({\n  width: '100%',\n  padding: '0.50rem'\n});\nconst defaultSendBoxInactiveBorderThicknessREM = 0.0625;\nconst defaultSendBoxActiveBorderThicknessREM = 0.125;\n\n/**\n * @private\n */\nexport const borderAndBoxShadowStyle = (props: {\n  theme: Theme;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): IStyle => {\n  const {\n    theme,\n    hasErrorMessage,\n    disabled\n  } = props;\n  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.neutralSecondary;\n  const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;\n  const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;\n  const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;\n  return {\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${borderThickness}rem solid ${borderColor}`,\n    // The border thickness of the sendbox wrapper changes on hover, to prevent the border thickness change causing the\n    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.\n    margin: `${defaultSendBoxActiveBorderThicknessREM - borderThickness}rem`,\n    ':hover, :active, :focus, :focus-within': {\n      border: `${borderActiveThickness}rem solid ${borderColorActive}`,\n      margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`\n    }\n  };\n};"]}
+{"version":3,"file":"SendBox.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/SendBox.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAiB,MAAM,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IACtF,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,QAAQ;IAClB;;OAEG;IACH,oBAAoB,EAAE;QACpB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC;IACzC,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC;IAC/C,MAAM,EAAE,2BAA2B;IACnC,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,SAAS;CACnB,CAAC,CAAC;AAEH,MAAM,wCAAwC,GAAG,MAAM,CAAC;AACxD,MAAM,sCAAsC,GAAG,KAAK,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAIvC,EAAU,EAAE;IACX,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;IACtG,MAAM,iBAAiB,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;IAExG,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,wCAAwC,CAAC;IAChF,MAAM,qBAAqB,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sCAAsC,CAAC;IAEpF,OAAO;QACL,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,MAAM,EAAE,GAAG,eAAe,aAAa,WAAW,EAAE;QAEpD,mHAAmH;QACnH,uHAAuH;QACvH,MAAM,EAAE,GAAG,sCAAsC,GAAG,eAAe,KAAK;QAExE,wCAAwC,EAAE;YACxC,MAAM,EAAE,GAAG,qBAAqB,aAAa,iBAAiB,EAAE;YAChE,MAAM,EAAE,GAAG,sCAAsC,GAAG,qBAAqB,KAAK;SAC/E;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, IStyle, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const suppressIconStyle = {\n  iconContainer: { minHeight: '0', minWidth: '0', height: '0', width: '0', margin: '0' },\n  icon: { display: 'none' }\n};\n\n/**\n * @private\n */\nexport const sendBoxWrapperStyles = mergeStyles({\n  margin: '0.25rem',\n  overflow: 'hidden',\n  /**\n   * margin-top set for all the child components of sendbox except first\n   */\n  ':not(:first-child)': {\n    marginTop: '0.25rem'\n  }\n});\n\n/**\n * @private\n */\nexport const sendButtonStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem'\n});\n\n/**\n * @private\n */\nexport const sendIconStyle = mergeStyles({\n  width: '1.25rem',\n  height: '1.25rem',\n  margin: 'auto'\n});\n\n/**\n * @private\n */\nexport const fileUploadCardsStyles = mergeStyles({\n  margin: '0 0.25rem 0.25rem 0.25rem',\n  maxHeight: '12.5rem',\n  overflow: 'auto'\n});\n\n/**\n * @private\n */\nexport const fileCardBoxStyle = mergeStyles({\n  width: '100%',\n  padding: '0.50rem'\n});\n\nconst defaultSendBoxInactiveBorderThicknessREM = 0.0625;\nconst defaultSendBoxActiveBorderThicknessREM = 0.125;\n\n/**\n * @private\n */\nexport const borderAndBoxShadowStyle = (props: {\n  theme: Theme;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): IStyle => {\n  const { theme, hasErrorMessage, disabled } = props;\n  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.neutralSecondary;\n  const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;\n\n  const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;\n  const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;\n\n  return {\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${borderThickness}rem solid ${borderColor}`,\n\n    // The border thickness of the sendbox wrapper changes on hover, to prevent the border thickness change causing the\n    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.\n    margin: `${defaultSendBoxActiveBorderThicknessREM - borderThickness}rem`,\n\n    ':hover, :active, :focus, :focus-within': {\n      border: `${borderActiveThickness}rem solid ${borderColorActive}`,\n      margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`\n    }\n  };\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SitePermissions.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/SitePermissions.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiB;IAC/C,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM;QACjB,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAiB;IACrD,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM;KACtB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiB;IAC/C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC5C,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAe,EAAE;IACrE,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;SACrC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC5C,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,aAAa,EAAE,MAAM;KACtB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgB;IAC9C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,GAAG;QACf,aAAa,EAAE,QAAQ,CAAC,EAAE,CAAC;KAC5B;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAkB;IAChD,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,QAAQ;QACvB,YAAY,EAAE,QAAQ;QACtB,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;KAC3B;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, IIconStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @internal\n */\nexport const iconContainerStyles: IStackStyles = {\n  root: {\n    marginTop: 'auto',\n    marginBottom: 'auto',\n    position: 'relative'\n  }\n};\n\n/**\n * @internal\n */\nexport const iconBannerContainerStyles: IStackStyles = {\n  root: {\n    paddingBottom: '1rem'\n  }\n};\n\n/**\n * @internal\n */\nexport const textContainerStyles: IStackStyles = {\n  root: {\n    margin: 'auto',\n    textAlign: 'center'\n  }\n};\n\n/**\n * @internal\n */\nexport const iconPrimaryStyles: IIconStyles = {\n  root: {\n    zIndex: 1,\n    margin: 'auto'\n  }\n};\n\n/**\n * @internal\n */\nexport const sparkleIconBackdropStyles = (theme: Theme): IIconStyles => {\n  return {\n    root: {\n      color: theme.palette.themeLighterAlt\n    }\n  };\n};\n\n/**\n * @internal\n */\nexport const primaryTextStyles: ITextStyles = {\n  root: {\n    fontWeight: 600,\n    fontSize: _pxToRem(20),\n    lineHeight: _pxToRem(28),\n    paddingBottom: '1rem'\n  }\n};\n\n/**\n * @internal\n */\nexport const secondaryTextStyles: ITextStyles = {\n  root: {\n    margin: 'auto',\n    fontWeight: 400,\n    paddingBottom: _pxToRem(22)\n  }\n};\n\n/**\n * @internal\n */\nexport const linkTextStyles: ILinkStyles = {\n  root: {\n    margin: 'auto',\n    fontWeight: 600,\n    textAlign: 'inherit'\n  }\n};\n\n/**\n * @internal\n */\nexport const primaryButtonStyles: IButtonStyles = {\n  root: {\n    paddingTop: '1.5rem',\n    paddingBottom: '1.5rem',\n    borderRadius: '0.5rem',\n    marginBottom: _pxToRem(22)\n  }\n};\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"SitePermissions.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/SitePermissions.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiB;IAC/C,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM;QACjB,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAiB;IACrD,IAAI,EAAE;QACJ,aAAa,EAAE,MAAM;KACtB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiB;IAC/C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC5C,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAe,EAAE;IACrE,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe;SACrC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC5C,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,aAAa,EAAE,MAAM;KACtB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgB;IAC9C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,GAAG;QACf,aAAa,EAAE,QAAQ,CAAC,EAAE,CAAC;KAC5B;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,SAAS;KACrB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAkB;IAChD,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,QAAQ;QACvB,YAAY,EAAE,QAAQ;QACtB,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;KAC3B;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButtonStyles, IIconStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @internal\n */\nexport const iconContainerStyles: IStackStyles = {\n  root: {\n    marginTop: 'auto',\n    marginBottom: 'auto',\n    position: 'relative'\n  }\n};\n\n/**\n * @internal\n */\nexport const iconBannerContainerStyles: IStackStyles = {\n  root: {\n    paddingBottom: '1rem'\n  }\n};\n\n/**\n * @internal\n */\nexport const textContainerStyles: IStackStyles = {\n  root: {\n    margin: 'auto',\n    textAlign: 'center'\n  }\n};\n\n/**\n * @internal\n */\nexport const iconPrimaryStyles: IIconStyles = {\n  root: {\n    zIndex: 1,\n    margin: 'auto'\n  }\n};\n\n/**\n * @internal\n */\nexport const sparkleIconBackdropStyles = (theme: Theme): IIconStyles => {\n  return {\n    root: {\n      color: theme.palette.themeLighterAlt\n    }\n  };\n};\n\n/**\n * @internal\n */\nexport const primaryTextStyles: ITextStyles = {\n  root: {\n    fontWeight: 600,\n    fontSize: _pxToRem(20),\n    lineHeight: _pxToRem(28),\n    paddingBottom: '1rem'\n  }\n};\n\n/**\n * @internal\n */\nexport const secondaryTextStyles: ITextStyles = {\n  root: {\n    margin: 'auto',\n    fontWeight: 400,\n    paddingBottom: _pxToRem(22)\n  }\n};\n\n/**\n * @internal\n */\nexport const linkTextStyles: ILinkStyles = {\n  root: {\n    margin: 'auto',\n    fontWeight: 600,\n    textAlign: 'inherit'\n  }\n};\n\n/**\n * @internal\n */\nexport const primaryButtonStyles: IButtonStyles = {\n  root: {\n    paddingTop: '1.5rem',\n    paddingBottom: '1.5rem',\n    borderRadius: '0.5rem',\n    marginBottom: _pxToRem(22)\n  }\n};\n\"../../../../acs-ui-common/src\""]}

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

@@ -6,7 +6,6 @@ import { mergeStyles } from '@fluentui/react';
  */
 export const container = () => mergeStyles({
     position: 'relative',
-    // ensures child element's `position: absolute` is relative to this container
     display: 'contents'
 });
 /**
@@ -32,9 +31,7 @@ export const loadSpinnerStyles = {
         maxHeight: '5rem',
         height: '50%',
         width: 'unset',
-        // remove default width applied by fluent for spinners
         aspectRatio: '1 / 1',
-        // make height match width to ensure a circle shape
         borderWidth: '0.25em'
     }
 };