@azure/communication-react 1.17.0 → 1.18.0-alpha-202406110013

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

@@ -0,0 +1,284 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { mergeStyles } from '@fluentui/react';
+import { editorTextBoxButtonStyle } from './SendBox.styles';
+/**
+ * @private
+ */
+export const richTextEditorStyle = (props) => {
+    return mergeStyles({
+        border: 'none',
+        overflow: 'auto',
+        outline: 'none',
+        minHeight: props.minHeight,
+        maxHeight: props.maxHeight,
+        maxWidth: '100%',
+        // this is needed to fix an issue when text has some indentation, indentation uses blockquote tag and
+        // it gets both horizontal margins because of the user agent stylesheet
+        // remove this code when RoosterJS content model packages are used as they use different approach for indentation
+        '& blockquote': {
+            marginInlineEnd: '0'
+        }
+    });
+};
+/**
+ * @private
+ */
+export const richTextEditorWrapperStyle = (theme, addTopOffset) => {
+    return mergeStyles({
+        paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,
+        paddingInlineStart: `0.75rem`,
+        paddingInlineEnd: `0.75rem`,
+        maxWidth: '100%',
+        color: theme.palette.neutralPrimary,
+        '& table': {
+            background: 'transparent',
+            borderCollapse: 'collapse',
+            width: '100%',
+            borderSpacing: '0',
+            tableLayout: 'auto',
+            '& tr': {
+                background: 'transparent',
+                border: `1px solid ${theme.palette.neutralTertiaryAlt}`,
+                '& td': {
+                    background: 'transparent',
+                    border: `1px solid ${theme.palette.neutralTertiaryAlt}`,
+                    wordBreak: 'normal',
+                    padding: '0.125rem 0.25rem',
+                    verticalAlign: 'top'
+                }
+            }
+        }
+    });
+};
+/**
+ * @private
+ */
+export const richTextActionButtonsStackStyle = mergeStyles({
+    paddingRight: `0.125rem`
+});
+/**
+ * @private
+ */
+export const richTextActionButtonsStyle = mergeStyles({
+    height: '2.25rem',
+    width: '2.25rem',
+    margin: 'auto'
+});
+/**
+ * @private
+ */
+export const richTextActionButtonsDividerStyle = (theme) => {
+    return mergeStyles({
+        color: theme.palette.neutralQuaternaryAlt,
+        margin: '0.375rem -0.5rem 0 -0.5rem',
+        backgroundColor: 'transparent'
+    });
+};
+/**
+ * @private
+ */
+export const ribbonOverflowButtonStyle = (theme) => {
+    return {
+        subComponentStyles: {
+            menuItem: {
+                icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },
+                root: ribbonOverflowButtonRootStyles(theme)
+            },
+            callout: {}
+        }
+    };
+};
+const ribbonOverflowButtonRootStyles = (theme) => {
+    return {
+        selectors: {
+            // Icon's color doesn't work here because of the specificity
+            '&:hover': {
+                selectors: {
+                    '.ms-ContextualMenu-icon': {
+                        color: theme.palette.neutralPrimary
+                    }
+                }
+            },
+            '.ribbon-table-button-regular-icon': {
+                display: 'inline-block',
+                margin: '-0.25rem 0.25rem 0 0.25rem',
+                width: '1.25rem',
+                height: '1.25rem'
+            },
+            '.ribbon-table-button-filled-icon': {
+                display: 'none'
+            }
+        }
+    };
+};
+const ribbonButtonRootStyles = (theme) => {
+    return {
+        backgroundColor: 'transparent',
+        selectors: {
+            // Icon's color doesn't work here because of the specificity
+            '.ms-Button-icon': {
+                color: theme.palette.themePrimary
+            },
+            '.ms-Button-menuIcon': {
+                color: theme.palette.themePrimary
+            }
+        }
+    };
+};
+/**
+ * @private
+ */
+export const toolbarButtonStyle = (theme) => {
+    return {
+        icon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        root: { minWidth: 'auto', backgroundColor: 'transparent' },
+        rootChecked: ribbonButtonRootStyles(theme),
+        rootHovered: ribbonButtonRootStyles(theme),
+        rootCheckedHovered: ribbonButtonRootStyles(theme),
+        rootCheckedPressed: ribbonButtonRootStyles(theme),
+        rootPressed: ribbonButtonRootStyles(theme),
+        rootExpanded: ribbonButtonRootStyles(theme),
+        rootExpandedHovered: ribbonButtonRootStyles(theme)
+    };
+};
+const rootRibbonTableButtonStyle = (theme) => {
+    // merge IStyles props
+    return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));
+};
+/**
+ * @private
+ */
+export const toolbarTableButtonStyle = (theme) => {
+    return {
+        icon: { height: 'auto' },
+        menuIcon: { height: 'auto' },
+        root: rootRibbonTableButtonStyle(theme),
+        rootChecked: ribbonTableButtonRootStyles(theme, true),
+        rootHovered: ribbonTableButtonRootStyles(theme, true),
+        rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),
+        rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),
+        rootPressed: ribbonTableButtonRootStyles(theme, true),
+        rootExpanded: ribbonTableButtonRootStyles(theme, true),
+        rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)
+    };
+};
+const ribbonTableButtonRootStyles = (theme, isSelected) => {
+    return {
+        backgroundColor: 'transparent',
+        selectors: {
+            '.ribbon-table-button-regular-icon': {
+                width: '1.25rem',
+                height: '1.25rem',
+                margin: '-0.25rem 0.25rem 0 0.25rem',
+                color: theme.palette.neutralPrimary,
+                display: isSelected ? 'none' : 'inline-block'
+            },
+            '.ribbon-table-button-filled-icon': {
+                width: '1.25rem',
+                height: '1.25rem',
+                margin: '-0.25rem 0.25rem 0 0.25rem',
+                color: theme.palette.themePrimary,
+                display: isSelected ? 'inline-block' : 'none'
+            }
+        }
+    };
+};
+/**
+ * @private
+ */
+export const ribbonDividerStyle = (theme) => {
+    return mergeStyles({
+        color: theme.palette.neutralQuaternaryAlt,
+        margin: '0 -0.5rem',
+        paddingTop: '0.5rem'
+    });
+};
+/**
+ * @private
+ */
+export const richTextToolbarStyle = {
+    // Override for the default white color of the Ribbon component
+    root: { backgroundColor: 'transparent', padding: '0px' }
+};
+/**
+ * @private
+ */
+export const richTextFormatButtonIconStyle = (theme, isSelected) => {
+    return mergeStyles(editorTextBoxButtonStyle, {
+        color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary
+    });
+};
+/**
+ * @private
+ */
+export const editBoxRichTextEditorStyle = () => {
+    return {
+        minHeight: '2.25rem',
+        maxHeight: '8rem'
+    };
+};
+/**
+ * @private
+ */
+export const sendBoxRichTextEditorStyle = (isExpanded) => {
+    return {
+        minHeight: isExpanded ? '4rem' : '1.25rem',
+        maxHeight: '8rem'
+    };
+};
+/**
+ * @private
+ */
+export const insertTableMenuCellButtonStyles = (theme) => {
+    return {
+        width: '16px',
+        height: '16px',
+        border: `solid 1px ${theme.palette.neutralTertiaryAlt}`,
+        cursor: 'pointer',
+        background: 'transparent'
+    };
+};
+/**
+ * @private
+ */
+export const insertTableMenuCellButtonSelectedStyles = (theme) => {
+    return {
+        background: theme.palette.themePrimary
+    };
+};
+/**
+ * @private
+ */
+export const insertTableMenuTablePane = mergeStyles({
+    padding: '8px 10px 12px 10px',
+    boxSizing: 'content-box',
+    minWidth: 'auto'
+});
+/**
+ * @private
+ */
+export const insertTableMenuFocusZone = (theme) => {
+    return mergeStyles({
+        display: 'inline-grid',
+        gridTemplateColumns: 'auto auto auto auto auto',
+        border: `solid 1px ${theme.palette.neutralTertiaryAlt}`
+    });
+};
+/**
+ * @private
+ */
+export const insertTableMenuTitleStyles = mergeStyles({
+    width: '100%',
+    height: '1rem',
+    fontSize: '0.75rem',
+    marginBottom: '0.5rem'
+});
+/**
+ * @private
+ */
+export const tableContextMenuIconStyles = mergeStyles({
+    marginTop: '0.375rem'
+});
+//# sourceMappingURL=RichTextEditor.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextEditor.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport { editorTextBoxButtonStyle } from './SendBox.styles';\nimport { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';\n\n/**\n * @private\n */\nexport const richTextEditorStyle = (props: { minHeight: string; maxHeight: string }): string => {\n  return mergeStyles({\n    border: 'none',\n    overflow: 'auto',\n    outline: 'none',\n    minHeight: props.minHeight,\n    maxHeight: props.maxHeight,\n    maxWidth: '100%',\n    // this is needed to fix an issue when text has some indentation, indentation uses blockquote tag and\n    // it gets both horizontal margins because of the user agent stylesheet\n    // remove this code when RoosterJS content model packages are used as they use different approach for indentation\n    '& blockquote': {\n      marginInlineEnd: '0'\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const richTextEditorWrapperStyle = (theme: Theme, addTopOffset: boolean): string => {\n  return mergeStyles({\n    paddingTop: `${addTopOffset ? '0.5rem' : '0'}`,\n    paddingInlineStart: `0.75rem`,\n    paddingInlineEnd: `0.75rem`,\n    maxWidth: '100%',\n    color: theme.palette.neutralPrimary,\n\n    '& table': {\n      background: 'transparent',\n      borderCollapse: 'collapse',\n      width: '100%',\n      borderSpacing: '0',\n      tableLayout: 'auto',\n\n      '& tr': {\n        background: 'transparent',\n        border: `1px solid ${theme.palette.neutralTertiaryAlt}`,\n\n        '& td': {\n          background: 'transparent',\n          border: `1px solid ${theme.palette.neutralTertiaryAlt}`,\n          wordBreak: 'normal',\n          padding: '0.125rem 0.25rem',\n          verticalAlign: 'top'\n        }\n      }\n    }\n  });\n};\n\n/**\n * @private\n */\nexport const richTextActionButtonsStackStyle = mergeStyles({\n  paddingRight: `0.125rem`\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem',\n  margin: 'auto'\n});\n\n/**\n * @private\n */\nexport const richTextActionButtonsDividerStyle = (theme: Theme): string => {\n  return mergeStyles({\n    color: theme.palette.neutralQuaternaryAlt,\n    margin: '0.375rem -0.5rem 0 -0.5rem',\n    backgroundColor: 'transparent'\n  });\n};\n\n/**\n * @private\n */\nexport const ribbonOverflowButtonStyle = (theme: Theme): Partial<IContextualMenuStyles> => {\n  return {\n    subComponentStyles: {\n      menuItem: {\n        icon: { color: theme.palette.neutralPrimary, paddingTop: '0.5rem' },\n        root: ribbonOverflowButtonRootStyles(theme)\n      },\n      callout: {}\n    }\n  };\n};\n\nconst ribbonOverflowButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '&:hover': {\n        selectors: {\n          '.ms-ContextualMenu-icon': {\n            color: theme.palette.neutralPrimary\n          }\n        }\n      },\n      '.ribbon-table-button-regular-icon': {\n        display: 'inline-block',\n        margin: '-0.25rem 0.25rem 0 0.25rem',\n        width: '1.25rem',\n        height: '1.25rem'\n      },\n      '.ribbon-table-button-filled-icon': {\n        display: 'none'\n      }\n    }\n  };\n};\n\nconst ribbonButtonRootStyles = (theme: Theme): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      // Icon's color doesn't work here because of the specificity\n      '.ms-Button-icon': {\n        color: theme.palette.themePrimary\n      },\n      '.ms-Button-menuIcon': {\n        color: theme.palette.themePrimary\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const toolbarButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },\n    root: { minWidth: 'auto', backgroundColor: 'transparent' },\n    rootChecked: ribbonButtonRootStyles(theme),\n    rootHovered: ribbonButtonRootStyles(theme),\n    rootCheckedHovered: ribbonButtonRootStyles(theme),\n    rootCheckedPressed: ribbonButtonRootStyles(theme),\n    rootPressed: ribbonButtonRootStyles(theme),\n    rootExpanded: ribbonButtonRootStyles(theme),\n    rootExpandedHovered: ribbonButtonRootStyles(theme)\n  };\n};\n\nconst rootRibbonTableButtonStyle = (theme: Theme): IStyle => {\n  // merge IStyles props\n  return Object.assign({ minWidth: 'auto' }, ribbonTableButtonRootStyles(theme, false));\n};\n\n/**\n * @private\n */\nexport const toolbarTableButtonStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { height: 'auto' },\n    menuIcon: { height: 'auto' },\n    root: rootRibbonTableButtonStyle(theme),\n    rootChecked: ribbonTableButtonRootStyles(theme, true),\n    rootHovered: ribbonTableButtonRootStyles(theme, true),\n    rootCheckedHovered: ribbonTableButtonRootStyles(theme, true),\n    rootCheckedPressed: ribbonTableButtonRootStyles(theme, true),\n    rootPressed: ribbonTableButtonRootStyles(theme, true),\n    rootExpanded: ribbonTableButtonRootStyles(theme, true),\n    rootExpandedHovered: ribbonTableButtonRootStyles(theme, true)\n  };\n};\nconst ribbonTableButtonRootStyles = (theme: Theme, isSelected: boolean): IStyle => {\n  return {\n    backgroundColor: 'transparent',\n    selectors: {\n      '.ribbon-table-button-regular-icon': {\n        width: '1.25rem',\n        height: '1.25rem',\n        margin: '-0.25rem 0.25rem 0 0.25rem',\n        color: theme.palette.neutralPrimary,\n        display: isSelected ? 'none' : 'inline-block'\n      },\n      '.ribbon-table-button-filled-icon': {\n        width: '1.25rem',\n        height: '1.25rem',\n        margin: '-0.25rem 0.25rem 0 0.25rem',\n        color: theme.palette.themePrimary,\n        display: isSelected ? 'inline-block' : 'none'\n      }\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonDividerStyle = (theme: Theme): string => {\n  return mergeStyles({\n    color: theme.palette.neutralQuaternaryAlt,\n    margin: '0 -0.5rem',\n    paddingTop: '0.5rem'\n  });\n};\n\n/**\n * @private\n */\nexport const richTextToolbarStyle: Partial<ICommandBarStyles> = {\n  // Override for the default white color of the Ribbon component\n  root: { backgroundColor: 'transparent', padding: '0px' }\n};\n\n/**\n * @private\n */\nexport const richTextFormatButtonIconStyle = (theme: Theme, isSelected: boolean): string => {\n  return mergeStyles(editorTextBoxButtonStyle, {\n    color: isSelected ? theme.palette.themePrimary : theme.palette.neutralSecondary\n  });\n};\n\n/**\n * @private\n */\nexport const editBoxRichTextEditorStyle = (): RichTextEditorStyleProps => {\n  return {\n    minHeight: '2.25rem',\n    maxHeight: '8rem'\n  };\n};\n\n/**\n * @private\n */\nexport const sendBoxRichTextEditorStyle = (isExpanded: boolean): RichTextEditorStyleProps => {\n  return {\n    minHeight: isExpanded ? '4rem' : '1.25rem',\n    maxHeight: '8rem'\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuCellButtonStyles = (theme: Theme): IStyle => {\n  return {\n    width: '16px',\n    height: '16px',\n    border: `solid 1px ${theme.palette.neutralTertiaryAlt}`,\n    cursor: 'pointer',\n    background: 'transparent'\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuCellButtonSelectedStyles = (theme: Theme): IStyle => {\n  return {\n    background: theme.palette.themePrimary\n  };\n};\n\n/**\n * @private\n */\nexport const insertTableMenuTablePane = mergeStyles({\n  padding: '8px 10px 12px 10px',\n  boxSizing: 'content-box',\n  minWidth: 'auto'\n});\n\n/**\n * @private\n */\nexport const insertTableMenuFocusZone = (theme: Theme): string => {\n  return mergeStyles({\n    display: 'inline-grid',\n    gridTemplateColumns: 'auto auto auto auto auto',\n    border: `solid 1px ${theme.palette.neutralTertiaryAlt}`\n  });\n};\n\n/**\n * @private\n */\nexport const insertTableMenuTitleStyles = mergeStyles({\n  width: '100%',\n  height: '1rem',\n  fontSize: '0.75rem',\n  marginBottom: '0.5rem'\n});\n\n/**\n * @private\n */\nexport const tableContextMenuIconStyles = mergeStyles({\n  marginTop: '0.375rem'\n});\n"]}

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

@@ -0,0 +1,21 @@
+import { Theme } from '@fluentui/react';
+/**
+ * @private
+ */
+export declare const inputBoxRichTextStackStyle: string;
+/**
+ * @private
+ */
+export declare const inputBoxRichTextStackItemStyle: string;
+/**
+ * @private
+ */
+export declare const inputBoxContentStackStyle: string;
+/**
+ * @private
+ */
+export declare const richTextBorderBoxStyle: (props: {
+    theme: Theme;
+    disabled: boolean;
+}) => string;
+//# sourceMappingURL=RichTextInputBoxComponent.styles.d.ts.map

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

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { mergeStyles } from '@fluentui/react';
+import { borderEditBoxStyle, defaultSendBoxActiveBorderThicknessREM, defaultSendBoxInactiveBorderThicknessREM } from './SendBox.styles';
+/**
+ * @private
+ */
+export const inputBoxRichTextStackStyle = mergeStyles({ overflow: 'hidden' });
+/**
+ * @private
+ */
+export const inputBoxRichTextStackItemStyle = mergeStyles({ paddingBottom: '0.25rem' });
+/**
+ * @private
+ */
+export const inputBoxContentStackStyle = mergeStyles({ overflow: 'hidden' });
+/**
+ * @private
+ */
+export const richTextBorderBoxStyle = (props) => {
+    const disabledStyles = {
+        pointerEvents: 'none',
+        backgroundColor: props.theme.palette.neutralLighter,
+        borderRadius: props.theme.effects.roundedCorner4,
+        border: `${defaultSendBoxInactiveBorderThicknessREM}rem solid transparent`,
+        margin: `${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`
+    };
+    return mergeStyles(props.disabled
+        ? disabledStyles
+        : borderEditBoxStyle(Object.assign(Object.assign({}, props), { 
+            // should always be false as we don't want to show the border when there is an error
+            hasErrorMessage: false, defaultBorderColor: props.theme.palette.neutralQuaternaryAlt })));
+};
+//# sourceMappingURL=RichTextInputBoxComponent.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextInputBoxComponent.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RichTextInputBoxComponent.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAiB,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EACL,kBAAkB,EAClB,sCAAsC,EACtC,wCAAwC,EACzC,MAAM,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AAE9E;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,WAAW,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC;AAExF;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AAE7E;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAA0C,EAAU,EAAE;IAC3F,MAAM,cAAc,GAAW;QAC7B,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QACnD,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QAChD,MAAM,EAAE,GAAG,wCAAwC,uBAAuB;QAC1E,MAAM,EAAE,GAAG,sCAAsC,GAAG,wCAAwC,KAAK;KAClG,CAAC;IACF,OAAO,WAAW,CAChB,KAAK,CAAC,QAAQ;QACZ,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,kBAAkB,iCACb,KAAK;YACR,oFAAoF;YACpF,eAAe,EAAE,KAAK,EACtB,kBAAkB,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,IAC5D,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { IStyle, Theme, mergeStyles } from '@fluentui/react';\nimport {\n  borderEditBoxStyle,\n  defaultSendBoxActiveBorderThicknessREM,\n  defaultSendBoxInactiveBorderThicknessREM\n} from './SendBox.styles';\n\n/**\n * @private\n */\nexport const inputBoxRichTextStackStyle = mergeStyles({ overflow: 'hidden' });\n\n/**\n * @private\n */\nexport const inputBoxRichTextStackItemStyle = mergeStyles({ paddingBottom: '0.25rem' });\n\n/**\n * @private\n */\nexport const inputBoxContentStackStyle = mergeStyles({ overflow: 'hidden' });\n\n/**\n * @private\n */\nexport const richTextBorderBoxStyle = (props: { theme: Theme; disabled: boolean }): string => {\n  const disabledStyles: IStyle = {\n    pointerEvents: 'none',\n    backgroundColor: props.theme.palette.neutralLighter,\n    borderRadius: props.theme.effects.roundedCorner4,\n    border: `${defaultSendBoxInactiveBorderThicknessREM}rem solid transparent`,\n    margin: `${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`\n  };\n  return mergeStyles(\n    props.disabled\n      ? disabledStyles\n      : borderEditBoxStyle({\n          ...props,\n          // should always be false as we don't want to show the border when there is an error\n          hasErrorMessage: false,\n          defaultBorderColor: props.theme.palette.neutralQuaternaryAlt\n        })\n  );\n};\n"]}

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

@@ -28,6 +28,7 @@ export declare const sendButtonStyle: string;
 export declare const sendIconStyle: (props: {
     theme: Theme;
     hasText: boolean;
+    hasAttachment: boolean;
     disabled?: boolean;
     hasErrorMessage: boolean;
     customSendIconStyle?: IStyle;

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
@@ -40,8 +32,9 @@ export const sendButtonStyle = mergeStyles({
  * @private
  */
 export const sendIconStyle = (props) => {
-    const { theme, hasText, disabled = false, hasErrorMessage, customSendIconStyle, defaultTextColor = theme.palette.neutralTertiary } = props;
-    const hasNoContent = !hasText;
+    const { theme, hasText, disabled = false, 
+    /* @conditional-compile-remove(file-sharing-acs) */ hasAttachment, hasErrorMessage, customSendIconStyle, defaultTextColor = theme.palette.neutralTertiary } = props;
+    const hasNoContent = !hasText && /* @conditional-compile-remove(file-sharing-acs) */ !hasAttachment;
     return mergeStyles(editorTextBoxButtonStyle, {
         color: disabled || hasErrorMessage || hasNoContent ? defaultTextColor : theme.palette.themePrimary
     }, customSendIconStyle);

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":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, 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 = (props: {\n  theme: Theme;\n  hasText: boolean;\n  disabled?: boolean;\n  hasErrorMessage: boolean;\n  customSendIconStyle?: IStyle;\n  defaultTextColor?: string;\n}): string => {\n  const {\n    theme,\n    hasText,\n    disabled = false,\n    hasErrorMessage,\n    customSendIconStyle,\n    defaultTextColor = theme.palette.neutralTertiary\n  } = props;\n  const hasNoContent = !hasText;\n  return mergeStyles(editorTextBoxButtonStyle, {\n    color: disabled || hasErrorMessage || hasNoContent ? defaultTextColor : theme.palette.themePrimary\n  }, customSendIconStyle);\n};\n\n/**\n * @private\n */\nexport const editorTextBoxButtonStyle: IStyle = {\n  width: '1.25rem',\n  height: '1.25rem',\n  margin: 'auto'\n};\n\n/**\n * @private\n */\nexport const attachmentUploadCardsStyles = mergeStyles({\n  margin: '0 0.25rem 0.25rem 0.25rem',\n  overflow: 'auto'\n});\n\n/**\n * @private\n */\nexport const attachmentCardBoxStyle = mergeStyles({\n  width: '100%',\n  padding: '0.50rem'\n});\n\n/**\n * @private\n */\nexport const defaultSendBoxInactiveBorderThicknessREM = 0.0625;\n/**\n * @private\n */\nexport const defaultSendBoxActiveBorderThicknessREM = 0.125;\n\n/**\n * @private\n */\nexport const borderAndBoxShadowStyle = (props: {\n  theme: Theme;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): string => {\n  return mergeStyles(borderEditBoxStyle({\n    ...props,\n    defaultBorderColor: props.theme.palette.neutralSecondary\n  }));\n};\n\n/**\n * @private\n */\nexport const borderEditBoxStyle = (props: {\n  theme: Theme;\n  defaultBorderColor?: string;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): IStyle => {\n  const {\n    theme,\n    hasErrorMessage,\n    disabled,\n    defaultBorderColor\n  } = props;\n  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : defaultBorderColor;\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":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, 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 = (props: {\n  theme: Theme;\n  hasText: boolean;\n  /* @conditional-compile-remove(file-sharing-acs) */ hasAttachment: boolean;\n  disabled?: boolean;\n  hasErrorMessage: boolean;\n  customSendIconStyle?: IStyle;\n  defaultTextColor?: string;\n}): string => {\n  const {\n    theme,\n    hasText,\n    disabled = false,\n    /* @conditional-compile-remove(file-sharing-acs) */ hasAttachment,\n    hasErrorMessage,\n    customSendIconStyle,\n    defaultTextColor = theme.palette.neutralTertiary\n  } = props;\n  const hasNoContent = !hasText && /* @conditional-compile-remove(file-sharing-acs) */ !hasAttachment;\n  return mergeStyles(\n    editorTextBoxButtonStyle,\n    {\n      color: disabled || hasErrorMessage || hasNoContent ? defaultTextColor : theme.palette.themePrimary\n    },\n    customSendIconStyle\n  );\n};\n\n/**\n * @private\n */\nexport const editorTextBoxButtonStyle: IStyle = {\n  width: '1.25rem',\n  height: '1.25rem',\n  margin: 'auto'\n};\n\n/**\n * @private\n */\nexport const attachmentUploadCardsStyles = mergeStyles({\n  margin: '0 0.25rem 0.25rem 0.25rem',\n  overflow: 'auto'\n});\n\n/**\n * @private\n */\nexport const attachmentCardBoxStyle = mergeStyles({\n  width: '100%',\n  padding: '0.50rem'\n});\n\n/**\n * @private\n */\nexport const defaultSendBoxInactiveBorderThicknessREM = 0.0625;\n/**\n * @private\n */\nexport const defaultSendBoxActiveBorderThicknessREM = 0.125;\n\n/**\n * @private\n */\nexport const borderAndBoxShadowStyle = (props: {\n  theme: Theme;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): string => {\n  return mergeStyles(borderEditBoxStyle({ ...props, defaultBorderColor: props.theme.palette.neutralSecondary }));\n};\n\n/**\n * @private\n */\nexport const borderEditBoxStyle = (props: {\n  theme: Theme;\n  defaultBorderColor?: string;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): IStyle => {\n  const { theme, hasErrorMessage, disabled, defaultBorderColor } = props;\n  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : defaultBorderColor;\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.d.ts

@@ -0,0 +1,38 @@
+import { IButtonStyles, IIconStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';
+/**
+ * @internal
+ */
+export declare const iconContainerStyles: IStackStyles;
+/**
+ * @internal
+ */
+export declare const iconBannerContainerStyles: IStackStyles;
+/**
+ * @internal
+ */
+export declare const textContainerStyles: IStackStyles;
+/**
+ * @internal
+ */
+export declare const iconPrimaryStyles: IIconStyles;
+/**
+ * @internal
+ */
+export declare const sparkleIconBackdropStyles: (theme: Theme) => IIconStyles;
+/**
+ * @internal
+ */
+export declare const primaryTextStyles: ITextStyles;
+/**
+ * @internal
+ */
+export declare const secondaryTextStyles: ITextStyles;
+/**
+ * @internal
+ */
+export declare const linkTextStyles: ILinkStyles;
+/**
+ * @internal
+ */
+export declare const primaryButtonStyles: IButtonStyles;
+//# sourceMappingURL=SitePermissions.styles.d.ts.map

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

@@ -0,0 +1,92 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { _pxToRem } from "../../../../acs-ui-common/src";
+/**
+ * @internal
+ */
+export const iconContainerStyles = {
+    root: {
+        marginTop: 'auto',
+        marginBottom: 'auto',
+        position: 'relative'
+    }
+};
+/**
+ * @internal
+ */
+export const iconBannerContainerStyles = {
+    root: {
+        paddingBottom: '1rem'
+    }
+};
+/**
+ * @internal
+ */
+export const textContainerStyles = {
+    root: {
+        margin: 'auto',
+        textAlign: 'center'
+    }
+};
+/**
+ * @internal
+ */
+export const iconPrimaryStyles = {
+    root: {
+        zIndex: 1,
+        margin: 'auto'
+    }
+};
+/**
+ * @internal
+ */
+export const sparkleIconBackdropStyles = (theme) => {
+    return {
+        root: {
+            color: theme.palette.themeLighterAlt
+        }
+    };
+};
+/**
+ * @internal
+ */
+export const primaryTextStyles = {
+    root: {
+        fontWeight: 600,
+        fontSize: _pxToRem(20),
+        lineHeight: _pxToRem(28),
+        paddingBottom: '1rem'
+    }
+};
+/**
+ * @internal
+ */
+export const secondaryTextStyles = {
+    root: {
+        margin: 'auto',
+        fontWeight: 400,
+        paddingBottom: _pxToRem(22)
+    }
+};
+/**
+ * @internal
+ */
+export const linkTextStyles = {
+    root: {
+        margin: 'auto',
+        fontWeight: 600,
+        textAlign: 'inherit'
+    }
+};
+/**
+ * @internal
+ */
+export const primaryButtonStyles = {
+    root: {
+        paddingTop: '1.5rem',
+        paddingBottom: '1.5rem',
+        borderRadius: '0.5rem',
+        marginBottom: _pxToRem(22)
+    }
+};
+//# sourceMappingURL=SitePermissions.styles.js.map

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

@@ -0,0 +1 @@
+{"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"]}

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

@@ -0,0 +1,5 @@
+/**
+ * @private
+ */
+export declare const useDefaultStackStyles: () => Record<"root", string>;
+//# sourceMappingURL=Stack.style.d.ts.map

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

@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { makeStyles } from '@fluentui/react-components';
+// These are styles that should be used during the migration from FluentUI v8 Stack component to flex.
+// https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-flex-stack--page
+/**
+ * @private
+ */
+export const useDefaultStackStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'nowrap',
+        width: 'auto',
+        height: 'auto',
+        boxSizing: 'border-box',
+        '> *': {
+            textOverflow: 'ellipsis'
+        }
+        // As per CSS props, these two styles are not in the original Stack styles
+        // (and they have higher specificity that just classes and will be applied instead of rules in classes).
+        // They also break a layout for the first selected item in MentionPopover if applied.
+        // Please check that component, if you want to apply these styles
+        // '> :not(:first-child)': {
+        //   marginTop: '0px'
+        // },
+        // '> *:not(.ms-StackItem)': {
+        //   flexShrink: 1
+        // }
+    }
+});
+//# sourceMappingURL=Stack.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Stack.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,sGAAsG;AACtG,gGAAgG;AAEhG;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAAC;IAC9C,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,YAAY;QACvB,KAAK,EAAE;YACL,YAAY,EAAE,UAAU;SACzB;QACD,0EAA0E;QAC1E,wGAAwG;QACxG,qFAAqF;QACrF,iEAAiE;QACjE,4BAA4B;QAC5B,qBAAqB;QACrB,KAAK;QACL,8BAA8B;QAC9B,kBAAkB;QAClB,IAAI;KACL;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { makeStyles } from '@fluentui/react-components';\n\n// These are styles that should be used during the migration from FluentUI v8 Stack component to flex.\n// https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-flex-stack--page\n\n/**\n * @private\n */\nexport const useDefaultStackStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    flexWrap: 'nowrap',\n    width: 'auto',\n    height: 'auto',\n    boxSizing: 'border-box',\n    '> *': {\n      textOverflow: 'ellipsis'\n    }\n    // As per CSS props, these two styles are not in the original Stack styles\n    // (and they have higher specificity that just classes and will be applied instead of rules in classes).\n    // They also break a layout for the first selected item in MentionPopover if applied.\n    // Please check that component, if you want to apply these styles\n    // '> :not(:first-child)': {\n    //   marginTop: '0px'\n    // },\n    // '> *:not(.ms-StackItem)': {\n    //   flexShrink: 1\n    // }\n  }\n});\n"]}