@azure/communication-react 1.23.0 → 1.24.0-alpha-202501282341

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';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\nimport { BROKEN_IMAGE_SVG_DATA } from './Common.style';\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    // chat components sets max width value to 1056px, override it to 100%\n    maxWidth: '100%',\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  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    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n    marginTop: '0'\n  },\n  bodyHiddenAvatar: {\n    marginLeft: 0,\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    // The first column's width should be set to  1fr\n    // because otherwise rich text editor's width will grow indefinitely\n    gridTemplateColumns: '1fr auto',\n    gridTemplateAreas: `\n        \". actions\"\n        \"body body\"\n      `,\n    gridGap: '0',\n    columnGap: '0',\n    paddingTop: '0',\n    marginLeft: '0'\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    '&:focus-visible': {\n      outlineStyle: 'auto'\n    },\n    '& img': {\n      maxWidth: '100%',\n      height: 'auto'\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  multipleAttachmentsInViewing: {\n    width: '100%',\n    maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  },\n  multipleAttachmentsInEditing: {\n    // when in editing state, the chat message width should not be\n    // limited by content length but occupying the full width instead\n    width: '100%',\n    float: 'right'\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  },\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    '& code': {\n      whiteSpace: 'pre-wrap'\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\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  multipleAttachments: {\n    width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  body: {\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      // this ensures safari won't have default rendering when image source\n      // becomes invalid such as empty string in this case\n      fontSize: '0',\n      position: 'relative',\n      clipPath: 'inset(0.3px)',\n      display: 'flex'\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    '& .broken-image-wrapper': {\n      width: '12rem',\n      height: '12rem',\n      marginTop: '0.75rem',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      ...shorthands.outline('1px', 'solid', tokens.colorNeutralForegroundDisabled),\n      backgroundColor: tokens.colorNeutralBackground2\n    },\n    '& .broken-image-wrapper:after': {\n      content: `''`,\n      maskImage: `url(\"${BROKEN_IMAGE_SVG_DATA}\");`,\n      width: '3rem',\n      height: '3rem',\n      backgroundColor: `${tokens.colorNeutralForeground2}`\n    }\n  },\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});\n\n/** @private */\nexport const dataLossIconStyle = mergeStyles({\n  width: '1.25rem',\n  height: '1.25rem'\n});\n\n/** @private */\nexport const messageTextContentStyles = mergeStyles({\n  whiteSpace: 'pre-wrap'\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';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\nimport { BROKEN_IMAGE_SVG_DATA } from './Common.style';\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 chatMyMessageActionMenuClassName = 'ChatMyMessage__actions';\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    // chat components sets max width value to 1056px, override it to 100%\n    maxWidth: '100%',\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  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    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n    marginTop: '0'\n  },\n  bodyHiddenAvatar: {\n    marginLeft: 0,\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',\n    gridTemplateAreas: `\n        \"body\"\n      `,\n    gridGap: '0',\n    paddingTop: '0',\n    marginLeft: '0'\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 .ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus .ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: 600\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    },\n    '& img': {\n      maxWidth: '100%',\n      height: 'auto'\n    }\n  },\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  bodyWithPlaceholderImage: {\n    // Adding width and height to the placeholder image only for myMessages\n    // because inline images sent from ACS doesn't have width and height in the image tag\n    '& img[src=\"\"]': {\n      width: '12rem',\n      height: '12rem'\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    position: 'absolute',\n    top: '-19px',\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  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  },\n  multipleAttachmentsInViewing: {\n    width: '100%',\n    maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  },\n  multipleAttachmentsInEditing: {\n    // when in editing state, the chat message width should not be\n    // limited by content length but occupying the full width instead\n    width: '100%',\n    float: 'right'\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  },\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    '& code': {\n      whiteSpace: 'pre-wrap'\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\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  multipleAttachments: {\n    width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  body: {\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      // this ensures safari won't have default rendering when image source\n      // becomes invalid such as empty string in this case\n      fontSize: '0',\n      position: 'relative',\n      clipPath: 'inset(0.3px)',\n      display: 'flex'\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    '& .broken-image-wrapper': {\n      width: '12rem',\n      height: '12rem',\n      marginTop: '0.75rem',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      ...shorthands.outline('1px', 'solid', tokens.colorNeutralForegroundDisabled),\n      backgroundColor: tokens.colorNeutralBackground2\n    },\n    '& .broken-image-wrapper:after': {\n      content: `''`,\n      maskImage: `url(\"${BROKEN_IMAGE_SVG_DATA}\");`,\n      width: '3rem',\n      height: '3rem',\n      backgroundColor: `${tokens.colorNeutralForeground2}`\n    }\n  },\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\n/** @private */\nexport const dataLossIconStyle = mergeStyles({\n  width: '1.25rem',\n  height: '1.25rem'\n});\n\n/** @private */\nexport const messageTextContentStyles = mergeStyles({\n  whiteSpace: 'pre-wrap'\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/Notification.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAoC,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAgB,EAAE,CAAC,CAAC;IAChE,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;QACrC,SAAS,EAAE,SAAS;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAiB,EAAE,CAAC,CAAC;IAClD,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAgB,EAAE,CAAC,CAAC;IAC9D,IAAI,EAAE;QACJ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;QACnC,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KACrC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IACzE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;IACnC,KAAK,EAAE,SAAS;IAChB,YAAY,EAAE,SAAS;IACvB,SAAS,EAAE,UAAU;IACrB,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAgB,EAAE,CAAC,CAAC;IACxD,IAAI,EAAE;QACJ,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,QAAQ;QACnB,WAAW,EAAE,QAAQ;QACrB,GAAG,EAAE;YACH,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;SAClB;KACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAgB,EAAE,CAAC,CAAC;IACrE,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACjC,UAAU,EAAE,KAAK;QACjB,WAAW,EAAE,SAAS;KACvB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconStyles, IStackStyles, Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const messageTextStyles = (theme: Theme): IStackStyles => ({\n  root: {\n    fontWeight: 400,\n    fontSize: _pxToRem(14),\n    lineHeight: _pxToRem(16),\n    color: theme.palette.neutralSecondary,\n    marginTop: '0.25rem'\n  }\n});\n\n/**\n * @private\n */\nexport const titleTextStyles = (): IStackStyles => ({\n  root: {\n    fontWeight: 400,\n    fontSize: _pxToRem(14),\n    lineHeight: _pxToRem(16),\n    alignSelf: 'center'\n  }\n});\n\n/**\n * @private\n */\nexport const containerStyles = (theme: Theme): IStackStyles => ({\n  root: {\n    boxShadow: theme.effects.elevation8,\n    width: '20rem',\n    padding: '0.75rem',\n    borderRadius: '0.25rem',\n    position: 'relative',\n    backgroundColor: theme.palette.white\n  }\n});\n\n/**\n * @private\n */\nexport const hiddenContainerStyles = (theme: Theme): string => mergeStyles({\n  boxShadow: theme.effects.elevation8,\n  width: '19.5rem',\n  borderRadius: '0.25rem',\n  marginTop: '-0.65rem',\n  height: '1rem'\n});\n\n/**\n * @private\n */\nexport const notificationIconStyles = (): IIconStyles => ({\n  root: {\n    fontSize: '1.25rem',\n    alignSelf: 'center',\n    marginRight: '0.5rem',\n    svg: {\n      width: '1.25rem',\n      height: '1.25rem'\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const notificationLinkStyles = (theme: Theme): IStackStyles => ({\n  root: {\n    color: theme.palette.themePrimary,\n    fontWeight: '600',\n    paddingLeft: '0.25rem'\n  }\n});"]}
+{"version":3,"file":"Notification.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Notification.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAoC,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAY,EAAgB,EAAE,CAAC,CAAC;IAChE,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB;QACrC,SAAS,EAAE,SAAS;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAiB,EAAE,CAAC,CAAC;IAClD,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAY,EAAgB,EAAE,CAAC,CAAC;IAC9D,IAAI,EAAE;QACJ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;QACnC,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KACrC;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE,CAC5D,WAAW,CAAC;IACV,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;IACnC,KAAK,EAAE,SAAS;IAChB,YAAY,EAAE,SAAS;IACvB,SAAS,EAAE,UAAU;IACrB,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAgB,EAAE,CAAC,CAAC;IACxD,IAAI,EAAE;QACJ,QAAQ,EAAE,SAAS;QACnB,SAAS,EAAE,QAAQ;QACnB,WAAW,EAAE,QAAQ;QACrB,GAAG,EAAE;YACH,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;SAClB;KACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAY,EAAgB,EAAE,CAAC,CAAC;IACrE,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACjC,UAAU,EAAE,KAAK;QACjB,WAAW,EAAE,SAAS;KACvB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconStyles, IStackStyles, Theme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const messageTextStyles = (theme: Theme): IStackStyles => ({\n  root: {\n    fontWeight: 400,\n    fontSize: _pxToRem(14),\n    lineHeight: _pxToRem(16),\n    color: theme.palette.neutralSecondary,\n    marginTop: '0.25rem'\n  }\n});\n\n/**\n * @private\n */\nexport const titleTextStyles = (): IStackStyles => ({\n  root: {\n    fontWeight: 400,\n    fontSize: _pxToRem(14),\n    lineHeight: _pxToRem(16),\n    alignSelf: 'center'\n  }\n});\n\n/**\n * @private\n */\nexport const containerStyles = (theme: Theme): IStackStyles => ({\n  root: {\n    boxShadow: theme.effects.elevation8,\n    width: '20rem',\n    padding: '0.75rem',\n    borderRadius: '0.25rem',\n    position: 'relative',\n    backgroundColor: theme.palette.white\n  }\n});\n\n/**\n * @private\n */\nexport const hiddenContainerStyles = (theme: Theme): string =>\n  mergeStyles({\n    boxShadow: theme.effects.elevation8,\n    width: '19.5rem',\n    borderRadius: '0.25rem',\n    marginTop: '-0.65rem',\n    height: '1rem'\n  });\n\n/**\n * @private\n */\nexport const notificationIconStyles = (): IIconStyles => ({\n  root: {\n    fontSize: '1.25rem',\n    alignSelf: 'center',\n    marginRight: '0.5rem',\n    svg: {\n      width: '1.25rem',\n      height: '1.25rem'\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const notificationLinkStyles = (theme: Theme): IStackStyles => ({\n  root: {\n    color: theme.palette.themePrimary,\n    fontWeight: '600',\n    paddingLeft: '0.25rem'\n  }\n});\n"]}

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

@@ -62,12 +62,14 @@ export const iconContainerStyle = {
 /**
  * @private
  */
-export const iconStyles = mergeStyles([menuIconClass, {
+export const iconStyles = mergeStyles([
+    menuIconClass,
+    {
         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'
-    }]);
+    }
+]);
 /**
  * @private
  */

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,EAAS,MAAM,iBAAiB,CAAC;AAC7D,MAAM,aAAa,GAAG,mCAAmC,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,OAE7C,EAAE,KAAY,EAAU,EAAE;IACzB,OAAO;QACL,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAClD,UAAU,EAAE,QAAQ;QACpB,gBAAgB,EAAE;YAChB,CAAC,KAAK,aAAa,EAAE,CAAC,EAAE;gBACtB,OAAO,EAAE,MAAM;aAChB;YACD,OAAO,EAAE,gBAAgB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;SACtD;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAW;IACtC,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,KAAK,EAAE,MAAM;CACd,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,CAAC,aAAa,EAAE;QACpD,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,CAAC;QACb,yEAAyE;QACzE,UAAU,EAAE,QAAQ;KACrB,CAAC,CAAC,CAAC;AAEJ;;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, Theme } from '@fluentui/react';\nconst menuIconClass = 'ms-acs-participant-item-menu-icon';\n\n/**\n * @private\n */\nexport const participantItemContainerStyle = (options: {\n  clickable: boolean;\n}, theme: Theme): IStyle => {\n  return {\n    paddingTop: '0.25rem',\n    paddingBottom: '0.25rem',\n    display: 'flex',\n    maxWidth: '100%',\n    minWidth: '8rem',\n    cursor: !options.clickable ? 'default' : 'pointer',\n    alignItems: 'center',\n    ':focus-visible': {\n      [` .${menuIconClass}`]: {\n        display: 'flex'\n      },\n      outline: `0.1rem solid ${theme.palette.themePrimary}`\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const displayNoneStyle: IStyle = {\n  display: 'none'\n};\n\n/**\n * @private\n */\nexport const menuButtonContainerStyle = {\n  width: 'auto'\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([menuIconClass, {\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,EAAS,MAAM,iBAAiB,CAAC;AAE7D,MAAM,aAAa,GAAG,mCAAmC,CAAC;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,OAA+B,EAAE,KAAY,EAAU,EAAE;IACrG,OAAO;QACL,UAAU,EAAE,SAAS;QACrB,aAAa,EAAE,SAAS;QACxB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAClD,UAAU,EAAE,QAAQ;QACpB,gBAAgB,EAAE;YAChB,CAAC,KAAK,aAAa,EAAE,CAAC,EAAE;gBACtB,OAAO,EAAE,MAAM;aAChB;YACD,OAAO,EAAE,gBAAgB,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;SACtD;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAW;IACtC,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,KAAK,EAAE,MAAM;CACd,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,aAAa;IACb;QACE,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,CAAC,EAAE,yEAAyE;QACxF,UAAU,EAAE,QAAQ;KACrB;CACF,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, Theme } from '@fluentui/react';\n\nconst menuIconClass = 'ms-acs-participant-item-menu-icon';\n\n/**\n * @private\n */\nexport const participantItemContainerStyle = (options: { clickable: boolean }, theme: Theme): IStyle => {\n  return {\n    paddingTop: '0.25rem',\n    paddingBottom: '0.25rem',\n    display: 'flex',\n    maxWidth: '100%',\n    minWidth: '8rem',\n    cursor: !options.clickable ? 'default' : 'pointer',\n    alignItems: 'center',\n    ':focus-visible': {\n      [` .${menuIconClass}`]: {\n        display: 'flex'\n      },\n      outline: `0.1rem solid ${theme.palette.themePrimary}`\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const displayNoneStyle: IStyle = {\n  display: 'none'\n};\n\n/**\n * @private\n */\nexport const menuButtonContainerStyle = {\n  width: 'auto'\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  menuIconClass,\n  {\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/**\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/RTTDisclosureBanner.styles.d.ts

@@ -0,0 +1,10 @@
+import { IIconStyles, IStackStyles, Theme } from '@fluentui/react';
+/**
+ * @private
+ */
+export declare const rttContainerStyles: (theme: Theme) => IStackStyles;
+/**
+ * @private
+ */
+export declare const rttIconStyles: () => IIconStyles;
+//# sourceMappingURL=RTTDisclosureBanner.styles.d.ts.map

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

@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(rtt) */
+/**
+ * @private
+ */
+export const rttContainerStyles = (theme) => ({
+    root: {
+        boxShadow: theme.effects.elevation8,
+        width: 'fit-content',
+        padding: '0.75rem',
+        borderRadius: '0.25rem',
+        position: 'relative',
+        backgroundColor: theme.palette.white
+    }
+});
+/* @conditional-compile-remove(rtt) */
+/**
+ * @private
+ */
+export const rttIconStyles = () => ({
+    root: {
+        fontSize: '1.5rem',
+        paddingRight: '0.5rem'
+    }
+});
+//# sourceMappingURL=RTTDisclosureBanner.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RTTDisclosureBanner.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/RTTDisclosureBanner.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAOlC,sCAAsC;AACtC;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAY,EAAgB,EAAE,CAAC,CAAC;IACjE,IAAI,EAAE;QACJ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;QACnC,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,SAAS;QAClB,YAAY,EAAE,SAAS;QACvB,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KACrC;CACF,CAAC,CAAC;AAEH,sCAAsC;AACtC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAgB,EAAE,CAAC,CAAC;IAC/C,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,QAAQ;KACvB;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(rtt) */\nimport { IIconStyles, IStackStyles, Theme } from '@fluentui/react';\n/* @conditional-compile-remove(rtt) */\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const rttContainerStyles = (theme: Theme): IStackStyles => ({\n  root: {\n    boxShadow: theme.effects.elevation8,\n    width: 'fit-content',\n    padding: '0.75rem',\n    borderRadius: '0.25rem',\n    position: 'relative',\n    backgroundColor: theme.palette.white\n  }\n});\n\n/* @conditional-compile-remove(rtt) */\n/**\n * @private\n */\nexport const rttIconStyles = (): IIconStyles => ({\n  root: {\n    fontSize: '1.5rem',\n    paddingRight: '0.5rem'\n  }\n});\n"]}

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

@@ -115,9 +115,7 @@ export const reactionButtonStyles = (theme) => ({
         background: theme.palette.themePrimary,
         color: theme.palette.white
     },
-    labelChecked: {
-        color: theme.palette.white
-    }
+    labelChecked: { color: theme.palette.white }
 });
 /**
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/ReactionButton.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ITooltipHostStyles, keyframes, memoizeFunction, IStyle, IButtonStyles, Theme, ICalloutContentStyles } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction(() => keyframes({\n  from: {\n    backgroundPosition: '0px 8568px'\n  },\n  to: {\n    backgroundPosition: '0px 0px'\n  }\n}));\n\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, frameCount: number): IStyle => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  const steps = frameCount ?? 51;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '100%',\n    backgroundImage: imageResourceUrl,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundSize: `2.75rem 133.875rem`,\n    transition: 'opacity 2s',\n    minWidth: '2.75rem',\n    backgroundColor: 'transparent',\n    transform: 'scale(0.6)',\n    ':hover': {\n      transform: 'scale(0.8)',\n      animationName: playFrames(),\n      animationDuration: '8.12s',\n      animationTimingFunction: `steps(${steps})`,\n      animationIterationCount: 'infinite',\n      backgroundColor: 'transparent'\n    },\n    ':active': {\n      backgroundColor: 'transparent'\n    }\n  };\n};\n\n/**\n *\n * @private\n */\nexport const reactionToolTipHostStyle = (): ITooltipHostStyles => {\n  return {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      height: '100%',\n      width: '2.75rem'\n    }\n  };\n};\n\n/**\n *\n * @private\n */\nexport const mobileViewMenuItemStyle = (): React.CSSProperties => {\n  return {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '100%',\n    height: '2.625rem'\n  };\n};\n\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 mobileViewEmojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '2.75rem',\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: `2.75rem 133.875rem`,\n    transition: 'opacity 2s',\n    backgroundColor: 'transparent',\n    transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n  };\n};\n/**\n * @private\n */\nexport const reactionButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.palette.themePrimary,\n    color: theme.palette.white\n  },\n  rootCheckedHovered: {\n    background: theme.palette.themePrimary,\n    color: theme.palette.white\n  },\n  labelChecked: {\n    color: theme.palette.white\n  }\n});\n\n/**\n * @private\n */\nexport const reactionItemButtonStyles: IButtonStyles = {\n  root: {\n    border: 'none',\n    height: '2.75rem',\n    width: '2.75rem'\n  }\n};\n\n/**\n * @private\n */\nexport const reactionButtonCalloutStyles: ICalloutContentStyles = {\n  container: {},\n  root: {},\n  beak: {},\n  beakCurtain: {},\n  calloutMain: {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '13.75rem',\n    height: '2.625rem',\n    // Ensure that when one emoji is hovered, the other emojis are partially faded out\n    ':hover > :not(:hover)': {\n      opacity: '0.5'\n    }\n  }\n};"]}
+{"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionButton.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAEL,SAAS,EACT,eAAe,EAKhB,MAAM,iBAAiB,CAAC;AAGzB;;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;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,eAAuB,EAAE,UAAkB,EAAU,EAAE;IACjF,MAAM,gBAAgB,GAAG,OAAO,eAAe,GAAG,CAAC;IACnD,MAAM,KAAK,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,EAAE,CAAC;IAC/B,OAAO;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,gBAAgB;QACjC,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,oBAAoB;QACpC,UAAU,EAAE,YAAY;QACxB,QAAQ,EAAE,SAAS;QACnB,eAAe,EAAE,aAAa;QAC9B,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE;YACR,SAAS,EAAE,YAAY;YACvB,aAAa,EAAE,UAAU,EAAE;YAC3B,iBAAiB,EAAE,OAAO;YAC1B,uBAAuB,EAAE,SAAS,KAAK,GAAG;YAC1C,uBAAuB,EAAE,UAAU;YACnC,eAAe,EAAE,aAAa;SAC/B;QACD,SAAS,EAAE;YACT,eAAe,EAAE,aAAa;SAC/B;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;;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,SAAS;SACjB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAwB,EAAE;IAC/D,OAAO;QACL,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,eAAe;QAC/B,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,UAAU;KACnB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,eAAuB,EAAE,kBAA0B,EAAuB,EAAE;IAChH,MAAM,gBAAgB,GAAG,OAAO,eAAe,GAAG,CAAC;IACnD,OAAO;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,SAAS;QAChB,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,oBAAoB;QACpC,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;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAY,EAAiB,EAAE,CAAC,CAAC;IACpE,WAAW,EAAE;QACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC3B;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC3B;IACD,YAAY,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE;CAC7C,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAkB;IACrD,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAA0B;IAChE,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,WAAW,EAAE,EAAE;IACf,WAAW,EAAE;QACX,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,UAAU;QAClB,kFAAkF;QAClF,uBAAuB,EAAE;YACvB,OAAO,EAAE,KAAK;SACf;KACF;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  ITooltipHostStyles,\n  keyframes,\n  memoizeFunction,\n  IStyle,\n  IButtonStyles,\n  Theme,\n  ICalloutContentStyles\n} from '@fluentui/react';\nimport React from 'react';\n\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/**\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, frameCount: number): IStyle => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  const steps = frameCount ?? 51;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '100%',\n    backgroundImage: imageResourceUrl,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundSize: `2.75rem 133.875rem`,\n    transition: 'opacity 2s',\n    minWidth: '2.75rem',\n    backgroundColor: 'transparent',\n    transform: 'scale(0.6)',\n    ':hover': {\n      transform: 'scale(0.8)',\n      animationName: playFrames(),\n      animationDuration: '8.12s',\n      animationTimingFunction: `steps(${steps})`,\n      animationIterationCount: 'infinite',\n      backgroundColor: 'transparent'\n    },\n    ':active': {\n      backgroundColor: 'transparent'\n    }\n  };\n};\n\n/**\n *\n * @private\n */\nexport const reactionToolTipHostStyle = (): ITooltipHostStyles => {\n  return {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      height: '100%',\n      width: '2.75rem'\n    }\n  };\n};\n\n/**\n *\n * @private\n */\nexport const mobileViewMenuItemStyle = (): React.CSSProperties => {\n  return {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '100%',\n    height: '2.625rem'\n  };\n};\n\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 mobileViewEmojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {\n  const imageResourceUrl = `url(${backgroundImage})`;\n  return {\n    display: 'flex',\n    flexDirection: 'column',\n    height: '100%',\n    width: '2.75rem',\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: `2.75rem 133.875rem`,\n    transition: 'opacity 2s',\n    backgroundColor: 'transparent',\n    transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n  };\n};\n/**\n * @private\n */\nexport const reactionButtonStyles = (theme: Theme): IButtonStyles => ({\n  rootChecked: {\n    background: theme.palette.themePrimary,\n    color: theme.palette.white\n  },\n  rootCheckedHovered: {\n    background: theme.palette.themePrimary,\n    color: theme.palette.white\n  },\n  labelChecked: { color: theme.palette.white }\n});\n\n/**\n * @private\n */\nexport const reactionItemButtonStyles: IButtonStyles = {\n  root: {\n    border: 'none',\n    height: '2.75rem',\n    width: '2.75rem'\n  }\n};\n\n/**\n * @private\n */\nexport const reactionButtonCalloutStyles: ICalloutContentStyles = {\n  container: {},\n  root: {},\n  beak: {},\n  beakCurtain: {},\n  calloutMain: {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '13.75rem',\n    height: '2.625rem',\n    // Ensure that when one emoji is hovered, the other emojis are partially faded out\n    ':hover > :not(:hover)': {\n      opacity: '0.5'\n    }\n  }\n};\n"]}

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

@@ -25,7 +25,7 @@ export function generateStartPositionWave(index, halfCanvasWidth, isOriginAtCanv
     // Otherwise, every other reaction goes right, left in alternating directions.
     // To get alternating sequence, we take n % 2 (which gives 0 or 1), multiple result by 2
     // and subtract 1, which will result in -1 or 1
-    const direction = index === 0 ? 0 : index % 2 * 2 - 1;
+    const direction = index === 0 ? 0 : (index % 2) * 2 - 1;
     if (direction === 0) {
         return midPointCoordinate;
     }
@@ -147,7 +147,7 @@ export const moveAnimationStyles = (maxHeight, travelHeight) => {
 /**
  * @private
  */
-export const opacityTransition = memoizeFunction(maxOpacity => keyframes({
+export const opacityTransition = memoizeFunction((maxOpacity) => keyframes({
     '0%': {
         opacity: 0
     },

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionOverlay.style.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/ReactionOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { keyframes, memoizeFunction } from '@fluentui/react';\n\n/**\n * Generate random float between two numbers, including min and max\n * @private\n */\nexport function getRandomFloat(minValue: number, maxValue: number): number {\n  return minValue + Math.random() * (maxValue - minValue);\n}\n\n/**\n * Generate random int between two numbers, including min and max\n * @private\n */\nexport function getRandomInt(minValue: number, maxValue: number): number {\n  return Math.floor(getRandomFloat(minValue, maxValue + 1));\n}\n\n/**\n * Calculate the start position for a new reaction in the prescriptive wave pattern\n * @private\n */\nexport function generateStartPositionWave(index: number, halfCanvasWidth: number, isOriginAtCanvasCenter: boolean = true): number {\n  const midPointCoordinate = isOriginAtCanvasCenter ? halfCanvasWidth : 0;\n\n  // If the # of reactions on the screen is 0 or a multiple of 25, then we set direction to 0.\n  // Otherwise, every other reaction goes right, left in alternating directions.\n  // To get alternating sequence, we take n % 2 (which gives 0 or 1), multiple result by 2\n  // and subtract 1, which will result in -1 or 1\n  const direction = index === 0 ? 0 : index % 2 * 2 - 1;\n  if (direction === 0) {\n    return midPointCoordinate;\n  }\n\n  // Now we get how far the reaction starts from center\n  const adjustment = scaleStartPos(index);\n  return midPointCoordinate + direction * adjustment * halfCanvasWidth;\n}\n\n/**\n * @private\n */\nexport const reactionOverlayStyle: React.CSSProperties = {\n  bottom: '0',\n  height: '50%',\n  pointerEvents: 'none',\n  position: 'absolute',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport function getReactionMovementStyle(reactionXPoint: number): React.CSSProperties {\n  return {\n    position: 'absolute',\n    left: `${reactionXPoint}px`\n  };\n}\n\n/**\n * Scale metric to determine the start position of a reaction in presentation mode to avoid overlap.\n * @private\n */\nfunction scaleStartPos(index: number): number {\n  switch (index) {\n    case 1:\n    case 2:\n      return 0.3;\n    case 3:\n    case 4:\n      return 0.6;\n    case 5:\n    case 6:\n      return 0.9;\n    case 7:\n    case 8:\n      return 0.75;\n    case 9:\n    case 18:\n      return 0.375;\n    case 10:\n    case 23:\n      return 0.525;\n    case 11:\n    case 16:\n      return 0.15;\n    case 12:\n    case 15:\n      return 0.225;\n    case 13:\n    case 14:\n      return 0.075;\n    case 17:\n    case 24:\n      return 0.45;\n    case 19:\n    case 20:\n      return 0.675;\n    case 21:\n    case 22:\n      return 0.825;\n    default:\n      return 0;\n  }\n}\n\n/**\n * We have only one bucket item for presentation style of the reaction animation.\n * We are choosing to keep the array so that, in future, with styles needed to get updated, one\n * can add new styles and apply from here, rather than updating over the same style. Later we can remove\n * the old ones.\n * It is for the ease of testing and implementation.\n * @private\n */\nconst ReactionStyleBucket: IReactionStyleBucket = {\n  sizeScale: 0.9,\n  heightMaxScale: 0.7 * 0.95,\n  opacityMax: 0.9\n};\n\n/**\n * @private\n */\nexport interface IReactionStyleBucket {\n  sizeScale: number;\n  opacityMax: number;\n  heightMaxScale: number;\n  heightMinScale?: number;\n}\n\n/**\n * Return a style bucket based on the number of active sprites.\n * For example, the first three reactions should appear at maximum\n * height, width, and opacity.\n * @private\n */\nexport function getReactionStyleBucket(): IReactionStyleBucket {\n  // Having dynamic emoji size on rendering animation impacts performance of the animation itself.\n  // So we are choosing to use a fixed size for all cases.\n  return ReactionStyleBucket;\n}\n\n/**\n * @private\n */\nexport const moveFrames = memoizeFunction((maxHeight, travelHeight) => keyframes({\n  '0%': {\n    transform: `translateY(${maxHeight}px)`\n  },\n  '100%': {\n    transform: `translateY(${travelHeight}px)`\n  }\n}));\n\n/**\n * @private\n */\nexport const moveAnimationStyles = (maxHeight: number, travelHeight: number): React.CSSProperties => {\n  return {\n    animationName: moveFrames(maxHeight, travelHeight),\n    animationFillMode: 'forwards',\n    animationDuration: `4.133s`,\n    animationTimingFunction: 'cubic-bezier(0, 0.83, 0.19, 1.09)'\n  };\n};\n\n/**\n * @private\n */\nexport const opacityTransition = memoizeFunction(maxOpacity => keyframes({\n  '0%': {\n    opacity: 0\n  },\n  '31.2%': {\n    opacity: maxOpacity\n  },\n  '67.2%': {\n    opacity: maxOpacity\n  },\n  '100%': {\n    opacity: 0,\n    display: 'none',\n    visibility: 'hidden'\n  }\n}));\n\n/**\n * @private\n */\nexport const opacityAnimationStyles = (maxOpacity: number): React.CSSProperties => {\n  return {\n    animationName: opacityTransition(maxOpacity),\n    animationFillMode: 'forwards',\n    animationDuration: `4.133s`\n  };\n};\n\n/**\n * @private\n */\nexport const spriteFrames = memoizeFunction((numOfFrames, displaySizePx) => keyframes({\n  from: {\n    backgroundPosition: '0px 0px'\n  },\n  to: {\n    backgroundPosition: `0px -${numOfFrames * displaySizePx}px`\n  }\n}));\n\n/**\n * @private\n */\nexport const spriteAnimationStyles = (numOfFrames: number, displaySizePx: number, imageUrl: string): React.CSSProperties => {\n  return {\n    height: `${displaySizePx}px`,\n    width: `${displaySizePx}px`,\n    backgroundImage: `url(${imageUrl})`,\n    backgroundRepeat: 'no-repeat',\n    animationName: spriteFrames(numOfFrames, displaySizePx),\n    animationDuration: `${numOfFrames / 24}s`,\n    animationFillMode: `forwards`,\n    animationIterationCount: 'infinite',\n    animationTimingFunction: `steps(${numOfFrames})`,\n    backgroundSize: `${displaySizePx}px ${numOfFrames * displaySizePx}px`,\n    transform: `scale(${displaySizePx}/128)`\n  };\n};"]}
+{"version":3,"file":"ReactionOverlay.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionOverlay.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { keyframes, memoizeFunction } from '@fluentui/react';\n\n/**\n * Generate random float between two numbers, including min and max\n * @private\n */\nexport function getRandomFloat(minValue: number, maxValue: number): number {\n  return minValue + Math.random() * (maxValue - minValue);\n}\n\n/**\n * Generate random int between two numbers, including min and max\n * @private\n */\nexport function getRandomInt(minValue: number, maxValue: number): number {\n  return Math.floor(getRandomFloat(minValue, maxValue + 1));\n}\n\n/**\n * Calculate the start position for a new reaction in the prescriptive wave pattern\n * @private\n */\nexport function generateStartPositionWave(\n  index: number,\n  halfCanvasWidth: number,\n  isOriginAtCanvasCenter: boolean = true\n): number {\n  const midPointCoordinate = isOriginAtCanvasCenter ? halfCanvasWidth : 0;\n\n  // If the # of reactions on the screen is 0 or a multiple of 25, then we set direction to 0.\n  // Otherwise, every other reaction goes right, left in alternating directions.\n  // To get alternating sequence, we take n % 2 (which gives 0 or 1), multiple result by 2\n  // and subtract 1, which will result in -1 or 1\n  const direction = index === 0 ? 0 : (index % 2) * 2 - 1;\n  if (direction === 0) {\n    return midPointCoordinate;\n  }\n\n  // Now we get how far the reaction starts from center\n  const adjustment = scaleStartPos(index);\n  return midPointCoordinate + direction * adjustment * halfCanvasWidth;\n}\n\n/**\n * @private\n */\nexport const reactionOverlayStyle: React.CSSProperties = {\n  bottom: '0',\n  height: '50%',\n  pointerEvents: 'none',\n  position: 'absolute',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport function getReactionMovementStyle(reactionXPoint: number): React.CSSProperties {\n  return {\n    position: 'absolute',\n    left: `${reactionXPoint}px`\n  };\n}\n\n/**\n * Scale metric to determine the start position of a reaction in presentation mode to avoid overlap.\n * @private\n */\nfunction scaleStartPos(index: number): number {\n  switch (index) {\n    case 1:\n    case 2:\n      return 0.3;\n    case 3:\n    case 4:\n      return 0.6;\n    case 5:\n    case 6:\n      return 0.9;\n    case 7:\n    case 8:\n      return 0.75;\n    case 9:\n    case 18:\n      return 0.375;\n    case 10:\n    case 23:\n      return 0.525;\n    case 11:\n    case 16:\n      return 0.15;\n    case 12:\n    case 15:\n      return 0.225;\n    case 13:\n    case 14:\n      return 0.075;\n    case 17:\n    case 24:\n      return 0.45;\n    case 19:\n    case 20:\n      return 0.675;\n    case 21:\n    case 22:\n      return 0.825;\n    default:\n      return 0;\n  }\n}\n\n/**\n * We have only one bucket item for presentation style of the reaction animation.\n * We are choosing to keep the array so that, in future, with styles needed to get updated, one\n * can add new styles and apply from here, rather than updating over the same style. Later we can remove\n * the old ones.\n * It is for the ease of testing and implementation.\n * @private\n */\nconst ReactionStyleBucket: IReactionStyleBucket = {\n  sizeScale: 0.9,\n  heightMaxScale: 0.7 * 0.95,\n  opacityMax: 0.9\n};\n\n/**\n * @private\n */\nexport interface IReactionStyleBucket {\n  sizeScale: number;\n  opacityMax: number;\n  heightMaxScale: number;\n  heightMinScale?: number;\n}\n\n/**\n * Return a style bucket based on the number of active sprites.\n * For example, the first three reactions should appear at maximum\n * height, width, and opacity.\n * @private\n */\nexport function getReactionStyleBucket(): IReactionStyleBucket {\n  // Having dynamic emoji size on rendering animation impacts performance of the animation itself.\n  // So we are choosing to use a fixed size for all cases.\n  return ReactionStyleBucket;\n}\n\n/**\n * @private\n */\nexport const moveFrames = memoizeFunction((maxHeight, travelHeight) =>\n  keyframes({\n    '0%': {\n      transform: `translateY(${maxHeight}px)`\n    },\n    '100%': {\n      transform: `translateY(${travelHeight}px)`\n    }\n  })\n);\n\n/**\n * @private\n */\nexport const moveAnimationStyles = (maxHeight: number, travelHeight: number): React.CSSProperties => {\n  return {\n    animationName: moveFrames(maxHeight, travelHeight),\n    animationFillMode: 'forwards',\n    animationDuration: `4.133s`,\n    animationTimingFunction: 'cubic-bezier(0, 0.83, 0.19, 1.09)'\n  };\n};\n\n/**\n * @private\n */\nexport const opacityTransition = memoizeFunction((maxOpacity) =>\n  keyframes({\n    '0%': {\n      opacity: 0\n    },\n    '31.2%': {\n      opacity: maxOpacity\n    },\n    '67.2%': {\n      opacity: maxOpacity\n    },\n    '100%': {\n      opacity: 0,\n      display: 'none',\n      visibility: 'hidden'\n    }\n  })\n);\n\n/**\n * @private\n */\nexport const opacityAnimationStyles = (maxOpacity: number): React.CSSProperties => {\n  return {\n    animationName: opacityTransition(maxOpacity),\n    animationFillMode: 'forwards',\n    animationDuration: `4.133s`\n  };\n};\n\n/**\n * @private\n */\nexport const spriteFrames = memoizeFunction((numOfFrames, displaySizePx) =>\n  keyframes({\n    from: {\n      backgroundPosition: '0px 0px'\n    },\n    to: {\n      backgroundPosition: `0px -${numOfFrames * displaySizePx}px`\n    }\n  })\n);\n\n/**\n * @private\n */\nexport const spriteAnimationStyles = (\n  numOfFrames: number,\n  displaySizePx: number,\n  imageUrl: string\n): React.CSSProperties => {\n  return {\n    height: `${displaySizePx}px`,\n    width: `${displaySizePx}px`,\n    backgroundImage: `url(${imageUrl})`,\n    backgroundRepeat: 'no-repeat',\n    animationName: spriteFrames(numOfFrames, displaySizePx),\n    animationDuration: `${numOfFrames / 24}s`,\n    animationFillMode: `forwards`,\n    animationIterationCount: 'infinite',\n    animationTimingFunction: `steps(${numOfFrames})`,\n    backgroundSize: `${displaySizePx}px ${numOfFrames * displaySizePx}px`,\n    transform: `scale(${displaySizePx}/128)`\n  };\n};\n"]}

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

@@ -0,0 +1,82 @@
+import { IButtonStyles, ICommandBarStyles, IContextualMenuStyles, IStyle, Theme } from '@fluentui/react';
+import { RichTextEditorStyleProps } from '../RichTextEditor/RichTextEditor';
+/**
+ * @private
+ */
+export declare const richTextEditorStyle: (props: {
+    minHeight: string;
+    maxHeight: string;
+}) => string;
+/**
+ * @private
+ */
+export declare const richTextEditorWrapperStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const richTextActionButtonsStackStyle: string;
+/**
+ * @private
+ */
+export declare const richTextActionButtonsStyle: string;
+/**
+ * @private
+ */
+export declare const richTextActionButtonsDividerStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const ribbonOverflowButtonStyle: (theme: Theme) => Partial<IContextualMenuStyles>;
+/**
+ * @private
+ */
+export declare const toolbarButtonStyle: (theme: Theme) => Partial<IButtonStyles>;
+/**
+ * @private
+ */
+export declare const toolbarTableButtonStyle: (theme: Theme) => Partial<IButtonStyles>;
+/**
+ * @private
+ */
+export declare const ribbonDividerStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const richTextToolbarStyle: Partial<ICommandBarStyles>;
+/**
+ * @private
+ */
+export declare const richTextFormatButtonIconStyle: (theme: Theme, isSelected: boolean) => string;
+/**
+ * @private
+ */
+export declare const editBoxRichTextEditorStyle: () => RichTextEditorStyleProps;
+/**
+ * @private
+ */
+export declare const sendBoxRichTextEditorStyle: (isExpanded: boolean) => RichTextEditorStyleProps;
+/**
+ * @private
+ */
+export declare const insertTableMenuCellButtonStyles: (theme: Theme) => IStyle;
+/**
+ * @private
+ */
+export declare const insertTableMenuCellButtonSelectedStyles: (theme: Theme) => IStyle;
+/**
+ * @private
+ */
+export declare const insertTableMenuTablePane: string;
+/**
+ * @private
+ */
+export declare const insertTableMenuFocusZone: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const insertTableMenuTitleStyles: string;
+/**
+ * @private
+ */
+export declare const tableContextMenuIconStyles: string;
+//# sourceMappingURL=RichTextEditor.styles.d.ts.map