@azure/communication-react 1.13.0-beta.1 → 1.13.1-alpha-202402280012

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

@@ -162,12 +162,10 @@ export const useChatMessageStyles = makeStyles({
             color: tokens.colorStatusWarningBackground3,
             fontWeight: tokens.fontWeightSemibold
         }, '& img': {
-            maxWidth: '100% !important',
-            // Add !important to make sure it won't be overridden by style defined in element
+            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
+            maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element
             height: 'auto !important'
         }, '& p': Object.assign({}, shorthands.marginBlock('0.125rem')), '& blockquote': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: tokens.colorBrandBackgroundInverted, clear: 'left', minHeight: '2.25rem', width: 'fit-content', marginTop: '7px', marginRight: '0px', marginLeft: '0px', marginBottom: '7px', paddingTop: '7px', paddingRight: '15px', paddingLeft: '15px', paddingBottom: '7px' }, shorthands.border('solid')), shorthands.borderRadius('4px')), shorthands.borderWidth('1px')), shorthands.borderColor(tokens.colorNeutralStroke1Selected)), { borderLeftWidth: '4px' }), '& table': Object.assign(Object.assign({ backgroundColor: tokens.colorBrandBackgroundInverted }, shorthands.borderColor(tokens.colorNeutralStroke1Selected)), { borderCollapse: 'collapse', tableLayout: 'auto', width: '100%', '& tr': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`)), { '& td': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) }) }) }),
     bodyWithPlaceholderImage: {
@@ -253,12 +251,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 } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\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_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\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.925;\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 messageThreadWrapperContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  position: 'relative'\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 useChatStyles = makeStyles({\n  root: {\n    paddingTop: '0.8rem',\n    paddingBottom: '0.5rem',\n    paddingRight: '0.6rem',\n    paddingLeft: '0.6rem',\n    ...shorthands.border('none'),\n    ...shorthands.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    '& a:link': {\n      color: tokens.colorBrandForegroundLink\n    },\n    '& a:visited': {\n      color: tokens.colorBrandForegroundLinkHover\n    },\n    '& a:hover': {\n      color: tokens.colorBrandForegroundLinkHover\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageRenderStyles = makeStyles({\n  rootCommon: {\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  rootMessage: {\n    ...shorthands.padding('0'),\n    ...shorthands.margin('0'),\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  rootMyMessage: {\n    gridTemplateColumns: 'auto fit-content(0)',\n    gridTemplateAreas: `\n        \"body status\"\n      `,\n    columnGap: '0',\n    gridGap: '0',\n    ...shorthands.padding('0'),\n    marginTop: '0',\n    marginRight: '0',\n    marginBottom: '0',\n    marginLeft: '50px',\n    width: `calc(100% - 50px)`\n  },\n  bodyCommon: {\n    ...shorthands.padding('0'),\n    marginRight: '0',\n    marginBottom: '0',\n    backgroundColor: 'transparent',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n    marginTop: '0'\n  },\n  bodyWithAvatar: {\n    marginLeft: `0`,\n    marginTop: '0.75rem'\n  },\n  avatarNoOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n  },\n  avatarOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMyMessageStyles = makeStyles({\n  root: {\n    gridTemplateColumns: 'auto auto',\n    gridTemplateAreas: `\n        \". actions\"\n        \"body body\"\n      `,\n    gridGap: '0',\n    columnGap: '0',\n    paddingTop: '0',\n    marginLeft: '0',\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  body: {\n    paddingBottom: '10px',\n    marginTop: '1rem',\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    ...shorthands.border('1px', 'solid', 'transparent'),\n    '&:hover ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: 600\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    marginRight: '1px',\n    position: 'absolute',\n    top: '-2px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuAttached: {\n    top: '-18px'\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  }\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 chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const useChatMessageStyles = makeStyles({\n  root: {\n    paddingTop: '0',\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  body: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    paddingBottom: '10px',\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& > div:first-of-type': {\n      flexWrap: 'wrap'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: tokens.fontWeightSemibold\n    },\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      ...shorthands.marginBlock('0.125rem')\n    },\n    '& blockquote': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      clear: 'left',\n      minHeight: '2.25rem',\n      width: 'fit-content',\n      marginTop: '7px',\n      marginRight: '0px',\n      marginLeft: '0px',\n      marginBottom: '7px',\n      paddingTop: '7px',\n      paddingRight: '15px',\n      paddingLeft: '15px',\n      paddingBottom: '7px',\n      ...shorthands.border('solid'),\n      ...shorthands.borderRadius('4px'),\n      ...shorthands.borderWidth('1px'),\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderLeftWidth: '4px'\n    },\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`),\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      display: 'block',\n      position: 'relative',\n      marginBottom: '5px'\n    },\n    '& img[src=\"\"]:after': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n      backgroundSize: 'center',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      top: '0',\n      left: '0',\n      display: 'block'\n    }\n  },\n  bodyWithoutAvatar: {\n    marginTop: '0.125rem'\n  },\n  bodyWithAvatar: {\n    marginTop: `0.375rem`\n  },\n  avatarNoOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n  },\n  avatarOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  failed: {\n    //TODO: can we reuse a theme color here?\n    backgroundColor: 'rgba(168, 0, 0, 0.2)'\n  },\n  blocked: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    color: tokens.colorNeutralForeground2,\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\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      ...shorthands.marginBlock('0.125rem'),\n      paddingRight: '0.75rem',\n      fontStyle: 'italic'\n    },\n    '& a': {\n      ...shorthands.marginBlock('0.125rem'),\n      fontStyle: 'normal',\n      color: tokens.colorBrandForegroundLink,\n      ...shorthands.textDecoration('none')\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  paddingTop: '1.65rem',\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 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 } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\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_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\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.925;\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 messageThreadWrapperContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  position: 'relative'\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 useChatStyles = makeStyles({\n  root: {\n    paddingTop: '0.8rem',\n    paddingBottom: '0.5rem',\n    paddingRight: '0.6rem',\n    paddingLeft: '0.6rem',\n    ...shorthands.border('none'),\n    ...shorthands.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    '& a:link': {\n      color: tokens.colorBrandForegroundLink\n    },\n    '& a:visited': {\n      color: tokens.colorBrandForegroundLinkHover\n    },\n    '& a:hover': {\n      color: tokens.colorBrandForegroundLinkHover\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageRenderStyles = makeStyles({\n  rootCommon: {\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  rootMessage: {\n    ...shorthands.padding('0'),\n    ...shorthands.margin('0'),\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  rootMyMessage: {\n    gridTemplateColumns: 'auto fit-content(0)',\n    gridTemplateAreas: `\n        \"body status\"\n      `,\n    columnGap: '0',\n    gridGap: '0',\n    ...shorthands.padding('0'),\n    marginTop: '0',\n    marginRight: '0',\n    marginBottom: '0',\n    marginLeft: '50px',\n    width: `calc(100% - 50px)`\n  },\n  bodyCommon: {\n    ...shorthands.padding('0'),\n    marginRight: '0',\n    marginBottom: '0',\n    backgroundColor: 'transparent',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n    marginTop: '0'\n  },\n  bodyWithAvatar: {\n    marginLeft: `0`,\n    marginTop: '0.75rem'\n  },\n  avatarNoOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n  },\n  avatarOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMyMessageStyles = makeStyles({\n  root: {\n    gridTemplateColumns: 'auto auto',\n    gridTemplateAreas: `\n        \". actions\"\n        \"body body\"\n      `,\n    gridGap: '0',\n    columnGap: '0',\n    paddingTop: '0',\n    marginLeft: '0',\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  body: {\n    paddingBottom: '10px',\n    marginTop: '1rem',\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    ...shorthands.border('1px', 'solid', 'transparent'),\n\n    '&:hover ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: 600\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    marginRight: '1px',\n    position: 'absolute',\n    top: '-2px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuAttached: {\n    top: '-18px'\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  }\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 chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const useChatMessageStyles = makeStyles({\n  root: {\n    paddingTop: '0',\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  body: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    paddingBottom: '10px',\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& > div:first-of-type': {\n      flexWrap: 'wrap'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: tokens.fontWeightSemibold\n    },\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      ...shorthands.marginBlock('0.125rem')\n    },\n    '& blockquote': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      clear: 'left',\n      minHeight: '2.25rem',\n      width: 'fit-content',\n      marginTop: '7px',\n      marginRight: '0px',\n      marginLeft: '0px',\n      marginBottom: '7px',\n      paddingTop: '7px',\n      paddingRight: '15px',\n      paddingLeft: '15px',\n      paddingBottom: '7px',\n      ...shorthands.border('solid'),\n      ...shorthands.borderRadius('4px'),\n      ...shorthands.borderWidth('1px'),\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderLeftWidth: '4px'\n    },\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`),\n\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      display: 'block',\n      position: 'relative',\n      marginBottom: '5px'\n    },\n    '& img[src=\"\"]:after': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n      backgroundSize: 'center',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      top: '0',\n      left: '0',\n      display: 'block'\n    }\n  },\n  bodyWithoutAvatar: {\n    marginTop: '0.125rem'\n  },\n  bodyWithAvatar: {\n    marginTop: `0.375rem`\n  },\n  avatarNoOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n  },\n  avatarOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  failed: {\n    //TODO: can we reuse a theme color here?\n    backgroundColor: 'rgba(168, 0, 0, 0.2)'\n  },\n  blocked: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    color: tokens.colorNeutralForeground2,\n\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\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      ...shorthands.marginBlock('0.125rem'),\n      paddingRight: '0.75rem',\n      fontStyle: 'italic'\n    },\n\n    '& a': {\n      ...shorthands.marginBlock('0.125rem'),\n      fontStyle: 'normal',\n      color: tokens.colorBrandForegroundLink,\n      ...shorthands.textDecoration('none')\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  paddingTop: '1.65rem',\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 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

@@ -51,8 +51,7 @@ 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
+    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,UAAU,EAAE,QAAQ;IACpB,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  marginLeft: '0.5rem',\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,UAAU,EAAE,QAAQ;IACpB,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,EAAE,yEAAyE;IACxF,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  marginLeft: '0.5rem',\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/ReactionButton.styles.d.ts

@@ -0,0 +1,24 @@
+import { ITooltipHostStyles } from '@fluentui/react';
+import React from 'react';
+/**
+ * @private
+ */
+export declare const playFrames: () => string;
+/**
+ * @param backgroundImage - the uri for the reaction emoji resource
+ * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
+ *
+ * @private
+ */
+export declare const emojiStyles: (backgroundImage: string, animationPlayState: string) => React.CSSProperties;
+/**
+ *
+ * @private
+ */
+export declare const reactionEmojiMenuStyles: () => React.CSSProperties;
+/**
+ *
+ * @private
+ */
+export declare const reactionToolTipHostStyle: () => ITooltipHostStyles;
+//# sourceMappingURL=ReactionButton.styles.d.ts.map

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

@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(reaction) */
+import { keyframes, memoizeFunction } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const playFrames = memoizeFunction(() => keyframes({
+    from: {
+        backgroundPosition: '0px 8568px'
+    },
+    to: {
+        backgroundPosition: '0px 0px'
+    }
+}));
+/* @conditional-compile-remove(reaction) */
+/**
+ * @param backgroundImage - the uri for the reaction emoji resource
+ * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
+ *
+ * @private
+ */
+export const emojiStyles = (backgroundImage, animationPlayState) => {
+    const imageResourceUrl = `url(${backgroundImage})`;
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        backgroundImage: imageResourceUrl,
+        animationName: playFrames(),
+        animationDuration: '8.12s',
+        animationTimingFunction: `steps(102)`,
+        animationPlayState: animationPlayState,
+        animationIterationCount: 'infinite',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundPosition: 'center',
+        backgroundSize: `44px 2142px`,
+        transition: 'opacity 2s',
+        backgroundColor: 'transparent',
+        transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+export const reactionEmojiMenuStyles = () => {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        width: '220px',
+        height: '42px'
+    };
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+export const reactionToolTipHostStyle = () => {
+    return {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            width: '100%'
+        }
+    };
+};
+//# sourceMappingURL=ReactionButton.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionButton.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2CAA2C;AAC3C,OAAO,EAAsB,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAIjF,2CAA2C;AAC3C;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC,GAAG,EAAE,CAC7C,SAAS,CAAC;IACR,IAAI,EAAE;QACJ,kBAAkB,EAAE,YAAY;KACjC;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE,SAAS;KAC9B;CACF,CAAC,CACH,CAAC;AAEF,2CAA2C;AAC3C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,eAAuB,EAAE,kBAA0B,EAAuB,EAAE;IACtG,MAAM,gBAAgB,GAAG,OAAO,eAAe,GAAG,CAAC;IACnD,OAAO;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,gBAAgB;QACjC,aAAa,EAAE,UAAU,EAAE;QAC3B,iBAAiB,EAAE,OAAO;QAC1B,uBAAuB,EAAE,YAAY;QACrC,kBAAkB,EAAE,kBAAkB;QACtC,uBAAuB,EAAE,UAAU;QACnC,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,kBAAkB,EAAE,QAAQ;QAC5B,cAAc,EAAE,aAAa;QAC7B,UAAU,EAAE,YAAY;QACxB,eAAe,EAAE,aAAa;QAC9B,SAAS,EAAE,GAAG,kBAAkB,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAAE;KAC/E,CAAC;AACJ,CAAC,CAAC;AAEF,2CAA2C;AAC3C;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAwB,EAAE;IAC/D,OAAO;QACL,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,MAAM;KACf,CAAC;AACJ,CAAC,CAAC;AAEF,2CAA2C;AAC3C;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAuB,EAAE;IAC/D,OAAO;QACL,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport { ITooltipHostStyles, keyframes, memoizeFunction } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport React from 'react';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const playFrames = memoizeFunction(() =>\n  keyframes({\n    from: {\n      backgroundPosition: '0px 8568px'\n    },\n    to: {\n      backgroundPosition: '0px 0px'\n    }\n  })\n);\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const emojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '100%',\n    backgroundImage: imageResourceUrl,\n    animationName: playFrames(),\n    animationDuration: '8.12s',\n    animationTimingFunction: `steps(102)`,\n    animationPlayState: animationPlayState,\n    animationIterationCount: 'infinite',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundPosition: 'center',\n    backgroundSize: `44px 2142px`,\n    transition: 'opacity 2s',\n    backgroundColor: 'transparent',\n    transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionEmojiMenuStyles = (): React.CSSProperties => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '220px',\n    height: '42px'\n  };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionToolTipHostStyle = (): ITooltipHostStyles => {\n  return {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      height: '100%',\n      width: '100%'\n    }\n  };\n};\n"]}

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

@@ -0,0 +1,18 @@
+import { IButtonStyles, ICommandBarStyles, Theme } from '@fluentui/react';
+/**
+ * @private
+ */
+export declare const richTextEditorStyle: string;
+/**
+ * @private
+ */
+export declare const ribbonButtonStyle: (theme: Theme) => Partial<IButtonStyles>;
+/**
+ * @private
+ */
+export declare const ribbonDividerStyle: (theme: Theme) => Partial<IButtonStyles>;
+/**
+ * @private
+ */
+export declare const ribbonStyle: () => Partial<ICommandBarStyles>;
+//# sourceMappingURL=RichTextEditor.styles.d.ts.map

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

@@ -0,0 +1,128 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { mergeStyles } from '@fluentui/react';
+/**
+ * @private
+ */
+export const richTextEditorStyle = mergeStyles({
+    border: 'none',
+    overflow: 'auto',
+    padding: '10px',
+    outline: 'none',
+    bottom: '0',
+    minHeight: '2.25rem',
+    maxHeight: '8.25rem'
+});
+/**
+ * @private
+ */
+export const ribbonButtonStyle = (theme) => {
+    return {
+        icon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        root: { minWidth: 'auto', backgroundColor: 'transparent' },
+        rootChecked: {
+            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
+                }
+            }
+        },
+        rootHovered: {
+            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
+                }
+            }
+        },
+        rootCheckedHovered: {
+            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
+                }
+            }
+        },
+        rootCheckedPressed: {
+            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
+                }
+            }
+        },
+        rootPressed: {
+            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
+                }
+            }
+        },
+        rootExpanded: {
+            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
+                }
+            }
+        },
+        rootExpandedHovered: {
+            backgroundColor: 'transparent',
+            selectors: {
+                //icon color is not working here because of the specificity
+                '.ms-Button-icon': {
+                    color: theme.palette.themePrimary
+                },
+                '.ms-Button-menuIcon': {
+                    color: theme.palette.themePrimary
+                }
+            }
+        }
+    };
+};
+/**
+ * @private
+ */
+export const ribbonDividerStyle = (theme) => {
+    return {
+        icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },
+        root: { margin: '0', padding: '0', minWidth: 'auto' }
+    };
+};
+/**
+ * @private
+ */
+export const ribbonStyle = () => {
+    return {
+        // Override for the default white color of the Ribbon component
+        root: { backgroundColor: 'transparent' }
+    };
+};
+//# 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, Theme, mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const richTextEditorStyle = mergeStyles({\n  border: 'none',\n  overflow: 'auto',\n  padding: '10px',\n  outline: 'none',\n  bottom: '0',\n  minHeight: '2.25rem',\n  maxHeight: '8.25rem'\n});\n\n/**\n * @private\n */\nexport const ribbonButtonStyle = (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: {\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    rootHovered: {\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    rootCheckedHovered: {\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    rootCheckedPressed: {\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    rootPressed: {\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    rootExpanded: {\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    rootExpandedHovered: {\n      backgroundColor: 'transparent',\n      selectors: {\n        //icon color is not working 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/**\n * @private\n */\nexport const ribbonDividerStyle = (theme: Theme): Partial<IButtonStyles> => {\n  return {\n    icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },\n    root: { margin: '0', padding: '0', minWidth: 'auto' }\n  };\n};\n\n/**\n * @private\n */\nexport const ribbonStyle = (): Partial<ICommandBarStyles> => {\n  return {\n    // Override for the default white color of the Ribbon component\n    root: { backgroundColor: 'transparent' }\n  };\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,EAAU,WAAW,EAAS,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,CAAC,KAO7B,EAAU,EAAE;IACX,MAAM,EACJ,KAAK,EACL,OAAO;IACP,+CAA+C,CAAA,OAAO,EACtD,eAAe,EACf,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,YAAY,GAAG,CAAC,OAAO,IAAI,+CAA+C,CAAA,CAAC,OAAO,CAAC;IACzF,OAAO,WAAW,CAAC;QACjB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,eAAe,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;KACpG,EAAE,mBAAmB,CAAC,CAAC;AAC1B,CAAC,CAAC;AAEF;;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;;GAEG;AACH,MAAM,CAAC,MAAM,wCAAwC,GAAG,MAAM,CAAC;AAC/D;;GAEG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,KAAK,CAAC;AAE5D;;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,WAAW,CAAC;QACjB,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,CAAC;AACL,CAAC,CAAC","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  /* @conditional-compile-remove(file-sharing) */\n  hasFile: boolean;\n  hasErrorMessage: boolean;\n  customSendIconStyle?: IStyle;\n}): string => {\n  const {\n    theme,\n    hasText,\n    /* @conditional-compile-remove(file-sharing) */hasFile,\n    hasErrorMessage,\n    customSendIconStyle\n  } = props;\n  const hasNoContent = !hasText && /* @conditional-compile-remove(file-sharing) */!hasFile;\n  return mergeStyles({\n    width: '1.25rem',\n    height: '1.25rem',\n    margin: 'auto',\n    color: hasErrorMessage || hasNoContent ? theme.palette.neutralTertiary : theme.palette.themePrimary\n  }, customSendIconStyle);\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\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  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 mergeStyles({\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) */ hasFile: boolean;\n  hasErrorMessage: boolean;\n  customSendIconStyle?: IStyle;\n}): string => {\n  const {\n    theme,\n    hasText,\n    /* @conditional-compile-remove(file-sharing) */ hasFile,\n    hasErrorMessage,\n    customSendIconStyle\n  } = props;\n  const hasNoContent = !hasText && /* @conditional-compile-remove(file-sharing) */ !hasFile;\n  return mergeStyles(\n    {\n      width: '1.25rem',\n      height: '1.25rem',\n      margin: 'auto',\n      color: hasErrorMessage || hasNoContent ? theme.palette.neutralTertiary : theme.palette.themePrimary\n    },\n    customSendIconStyle\n  );\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\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  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 mergeStyles({\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};"]}
+{"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.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.style.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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});"]}
+{"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"]}

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

@@ -5,8 +5,7 @@ import { mergeStyles } from '@fluentui/react';
  * @private
  */
 export const container = () => mergeStyles({
-    position: 'relative',
-    // ensures child element's `position: absolute` is relative to this container
+    position: 'relative', // ensures child element's `position: absolute` is relative to this container
     display: 'contents'
 });
 /**
@@ -31,10 +30,8 @@ export const loadSpinnerStyles = {
     circle: {
         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
+        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'
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"StreamMedia.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/StreamMedia.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAkB,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC,WAAW,CAAC;IACjD,QAAQ,EAAE,UAAU;IACpB,6EAA6E;IAC7E,OAAO,EAAE,UAAU;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAW,EAAE,CAAC,WAAW,CAAC;IAC/D,6EAA6E;IAC7E,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,GAAG;IACV,SAAS,EAAE,uBAAuB;CACnC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAmB;IAC/C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM,CAAC,gCAAgC;KAChD;IACD,MAAM,EAAE;QACN,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,OAAO;QACd,sDAAsD;QACtD,WAAW,EAAE,OAAO;QACpB,mDAAmD;QACnD,WAAW,EAAE,QAAQ;KACtB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IAClE,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,MAAM;IACf,SAAS,EAAE;QACT,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;IAClG,oEAAoE;IACpE,iFAAiF;IACjF,kEAAkE;IAClE,EAAE;IACF,oCAAoC;IACpC,SAAS,EAAE,iBAAiB;IAC5B,wCAAwC;IACxC,qCAAqC;IACrC,uGAAuG;IACvG,4BAA4B,EAAE;QAC5B,SAAS,EAAE,iBAAiB;KAC7B;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ISpinnerStyles, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const container = (): string => mergeStyles({\n  position: 'relative',\n  // ensures child element's `position: absolute` is relative to this container\n  display: 'contents'\n});\n\n/**\n * @private\n */\nexport const loadingSpinnerContainer = (): string => mergeStyles({\n  // Position centrally on top of content. Parent must have position: relative.\n  position: 'absolute',\n  top: '50%',\n  bottom: '0',\n  left: '50%',\n  right: '0',\n  transform: 'translate(-50%, -50%)'\n});\n\n/**\n * @private\n */\nexport const loadSpinnerStyles: ISpinnerStyles = {\n  root: {\n    height: '100%' // ensure height fills container\n  },\n  circle: {\n    maxHeight: '5rem',\n    height: '50%',\n    width: 'unset',\n    // remove default width applied by fluent for spinners\n    aspectRatio: '1 / 1',\n    // make height match width to ensure a circle shape\n    borderWidth: '0.25em'\n  }\n};\n\n/**\n * @private\n */\nexport const mediaContainer = (theme: Theme): string => mergeStyles({\n  position: 'relative',\n  height: '100%',\n  width: '100%',\n  background: 'transparent',\n  display: 'flex',\n  '& video': {\n    borderRadius: theme.effects.roundedCorner4\n  }\n});\n\n/**\n * @private\n */\nexport const invertedVideoInPipStyle = (theme: Theme): string => mergeStyles(mediaContainer(theme), {\n  // The HTMLElement returned by the headless SDK is already inverted.\n  // But in picture-in-picture mode, we do not want to invert the host HTMLElement.\n  // Instead, we need to target the :picture-in-picture pseudoclass.\n  //\n  // First reset the host HTMLElement.\n  transform: 'rotateY(180deg)',\n  // This doesn't work yet on latest Edge.\n  // Probably just not implemented yet.\n  // picture-in-picture API is not yet stable: https://www.w3.org/TR/picture-in-picture/#css-pseudo-class\n  '& video:picture-in-picture': {\n    transform: 'rotateY(180deg)'\n  }\n});"]}
+{"version":3,"file":"StreamMedia.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/StreamMedia.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAkB,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CACpC,WAAW,CAAC;IACV,QAAQ,EAAE,UAAU,EAAE,6EAA6E;IACnG,OAAO,EAAE,UAAU;CACpB,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAW,EAAE,CAClD,WAAW,CAAC;IACV,6EAA6E;IAC7E,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,GAAG;IACV,SAAS,EAAE,uBAAuB;CACnC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAmB;IAC/C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM,CAAC,gCAAgC;KAChD;IACD,MAAM,EAAE;QACN,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,OAAO,EAAE,sDAAsD;QACtE,WAAW,EAAE,OAAO,EAAE,mDAAmD;QACzE,WAAW,EAAE,QAAQ;KACtB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAAU,EAAE,CACrD,WAAW,CAAC;IACV,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,MAAM;IACf,SAAS,EAAE;QACT,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C;CACF,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAU,EAAE,CAC9D,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;IACjC,oEAAoE;IACpE,iFAAiF;IACjF,kEAAkE;IAClE,EAAE;IACF,oCAAoC;IACpC,SAAS,EAAE,iBAAiB;IAC5B,wCAAwC;IACxC,qCAAqC;IACrC,uGAAuG;IACvG,4BAA4B,EAAE;QAC5B,SAAS,EAAE,iBAAiB;KAC7B;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ISpinnerStyles, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const container = (): string =>\n  mergeStyles({\n    position: 'relative', // ensures child element's `position: absolute` is relative to this container\n    display: 'contents'\n  });\n\n/**\n * @private\n */\nexport const loadingSpinnerContainer = (): string =>\n  mergeStyles({\n    // Position centrally on top of content. Parent must have position: relative.\n    position: 'absolute',\n    top: '50%',\n    bottom: '0',\n    left: '50%',\n    right: '0',\n    transform: 'translate(-50%, -50%)'\n  });\n\n/**\n * @private\n */\nexport const loadSpinnerStyles: ISpinnerStyles = {\n  root: {\n    height: '100%' // ensure height fills container\n  },\n  circle: {\n    maxHeight: '5rem',\n    height: '50%',\n    width: 'unset', // remove default width applied by fluent for spinners\n    aspectRatio: '1 / 1', // make height match width to ensure a circle shape\n    borderWidth: '0.25em'\n  }\n};\n\n/**\n * @private\n */\nexport const mediaContainer = (theme: Theme): string =>\n  mergeStyles({\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    background: 'transparent',\n    display: 'flex',\n    '& video': {\n      borderRadius: theme.effects.roundedCorner4\n    }\n  });\n\n/**\n * @private\n */\nexport const invertedVideoInPipStyle = (theme: Theme): string =>\n  mergeStyles(mediaContainer(theme), {\n    // The HTMLElement returned by the headless SDK is already inverted.\n    // But in picture-in-picture mode, we do not want to invert the host HTMLElement.\n    // Instead, we need to target the :picture-in-picture pseudoclass.\n    //\n    // First reset the host HTMLElement.\n    transform: 'rotateY(180deg)',\n    // This doesn't work yet on latest Edge.\n    // Probably just not implemented yet.\n    // picture-in-picture API is not yet stable: https://www.w3.org/TR/picture-in-picture/#css-pseudo-class\n    '& video:picture-in-picture': {\n      transform: 'rotateY(180deg)'\n    }\n  });\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/SystemMessage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,eAAe,EAAE,UAAU;CAC5B,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 systemMessageIconStyle = mergeStyles({\n  marginInlineEnd: '0.688rem'\n});"]}
+{"version":3,"file":"SystemMessage.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/SystemMessage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,eAAe,EAAE,UAAU;CAC5B,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 systemMessageIconStyle = mergeStyles({\n  marginInlineEnd: '0.688rem'\n});\n"]}

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

@@ -20,8 +20,7 @@ export const dismissButtonStyle = (theme) => ({
  */
 export const messageBarStyle = (theme, errorType) => ({
     innerText: {
-        paddingTop: errorType === MessageBarType.warning ? '0.15rem' : '0.1rem',
-        // to move the inner text of the message bar down to be centered
+        paddingTop: errorType === MessageBarType.warning ? '0.15rem' : '0.1rem', // to move the inner text of the message bar down to be centered
         lineHeight: 'none',
         alignSelf: 'center',
         whiteSpace: 'normal'

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

@@ -1 +1 @@
-{"version":3,"file":"TroubleshootingGuideErrorBar.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/TroubleshootingGuideErrorBar.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA4C,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE3F;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAiB,EAAE,CAAC,CAAC;IACnE,IAAI,EAAE;QACJ,OAAO,EAAE,kBAAkB;QAC3B,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;QACzD,YAAY,EAAE,UAAU;QACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC3B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,SAAyB,EAAqB,EAAE,CAAC,CAAC;IAC/F,SAAS,EAAE;QACT,UAAU,EAAE,SAAS,KAAK,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;QACvE,gEAAgE;QAChE,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,QAAQ;KACrB;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU;QACrB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,SAAS;KACtB;IACD,OAAO,EAAE;QACP,UAAU,EAAE,SAAS;KACtB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IMessageBarStyles, ITheme, MessageBarType } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const dismissButtonStyle = (theme: ITheme): IButtonStyles => ({\n  root: {\n    padding: '0.375rem 1.25rem',\n    width: '3.75rem',\n    height: '2rem',\n    background: theme.palette.white,\n    border: `1px solid ${theme.palette.neutralQuaternaryAlt}`,\n    borderRadius: '0.063rem',\n    color: theme.palette.black\n  }\n});\n\n/**\n * @private\n */\nexport const messageBarStyle = (theme: ITheme, errorType: MessageBarType): IMessageBarStyles => ({\n  innerText: {\n    paddingTop: errorType === MessageBarType.warning ? '0.15rem' : '0.1rem',\n    // to move the inner text of the message bar down to be centered\n    lineHeight: 'none',\n    alignSelf: 'center',\n    whiteSpace: 'normal'\n  },\n  icon: {\n    marginTop: '0.375rem',\n    marginBottom: '0.375rem',\n    paddingTop: '0.25rem'\n  },\n  content: {\n    lineHeight: 'inherit'\n  },\n  dismissal: {\n    height: 0,\n    paddingTop: '0.8rem'\n  }\n});"]}
+{"version":3,"file":"TroubleshootingGuideErrorBar.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/TroubleshootingGuideErrorBar.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA4C,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE3F;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAiB,EAAE,CAAC,CAAC;IACnE,IAAI,EAAE;QACJ,OAAO,EAAE,kBAAkB;QAC3B,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE;QACzD,YAAY,EAAE,UAAU;QACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC3B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,SAAyB,EAAqB,EAAE,CAAC,CAAC;IAC/F,SAAS,EAAE;QACT,UAAU,EAAE,SAAS,KAAK,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,gEAAgE;QACzI,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,QAAQ;KACrB;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU;QACrB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,SAAS;KACtB;IACD,OAAO,EAAE;QACP,UAAU,EAAE,SAAS;KACtB;IACD,SAAS,EAAE;QACT,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IMessageBarStyles, ITheme, MessageBarType } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const dismissButtonStyle = (theme: ITheme): IButtonStyles => ({\n  root: {\n    padding: '0.375rem 1.25rem',\n    width: '3.75rem',\n    height: '2rem',\n    background: theme.palette.white,\n    border: `1px solid ${theme.palette.neutralQuaternaryAlt}`,\n    borderRadius: '0.063rem',\n    color: theme.palette.black\n  }\n});\n\n/**\n * @private\n */\nexport const messageBarStyle = (theme: ITheme, errorType: MessageBarType): IMessageBarStyles => ({\n  innerText: {\n    paddingTop: errorType === MessageBarType.warning ? '0.15rem' : '0.1rem', // to move the inner text of the message bar down to be centered\n    lineHeight: 'none',\n    alignSelf: 'center',\n    whiteSpace: 'normal'\n  },\n  icon: {\n    marginTop: '0.375rem',\n    marginBottom: '0.375rem',\n    paddingTop: '0.25rem'\n  },\n  content: {\n    lineHeight: 'inherit'\n  },\n  dismissal: {\n    height: 0,\n    paddingTop: '0.8rem'\n  }\n});\n"]}