@azure/communication-react 1.20.0-alpha-202410170016 → 1.20.0

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

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

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

@@ -1 +1 @@
-{"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"]}
+{"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});"]}

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

@@ -115,7 +115,9 @@ 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":["../../../../../../../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 {\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"]}
+{"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};"]}

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":["../../../../../../../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"]}
+{"version":3,"file":"ReactionOverlay.style.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/ReactionOverlay.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE7D;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,QAAgB,EAAE,QAAgB;IAC/D,OAAO,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC;AAC1D,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,QAAgB,EAAE,QAAgB;IAC7D,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC;AAC5D,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,yBAAyB,CAAC,KAAa,EAAE,eAAuB,EAAE,yBAAkC,IAAI;IACtH,MAAM,kBAAkB,GAAG,sBAAsB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAExE,4FAA4F;IAC5F,8EAA8E;IAC9E,wFAAwF;IACxF,+CAA+C;IAC/C,MAAM,SAAS,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACtD,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,kBAAkB,CAAC;IAC5B,CAAC;IAED,qDAAqD;IACrD,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,kBAAkB,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,CAAC;AACvE,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAwB;IACvD,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,KAAK;IACb,aAAa,EAAE,MAAM;IACrB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,wBAAwB,CAAC,cAAsB;IAC7D,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,GAAG,cAAc,IAAI;KAC5B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAS,aAAa,CAAC,KAAa;IAClC,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,CAAC,CAAC;QACP,KAAK,CAAC;YACJ,OAAO,GAAG,CAAC;QACb,KAAK,CAAC,CAAC;QACP,KAAK,CAAC;YACJ,OAAO,GAAG,CAAC;QACb,KAAK,CAAC,CAAC;QACP,KAAK,CAAC;YACJ,OAAO,GAAG,CAAC;QACb,KAAK,CAAC,CAAC;QACP,KAAK,CAAC;YACJ,OAAO,IAAI,CAAC;QACd,KAAK,CAAC,CAAC;QACP,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,IAAI,CAAC;QACd,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,IAAI,CAAC;QACd,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf,KAAK,EAAE,CAAC;QACR,KAAK,EAAE;YACL,OAAO,KAAK,CAAC;QACf;YACE,OAAO,CAAC,CAAC;IACb,CAAC;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,mBAAmB,GAAyB;IAChD,SAAS,EAAE,GAAG;IACd,cAAc,EAAE,GAAG,GAAG,IAAI;IAC1B,UAAU,EAAE,GAAG;CAChB,CAAC;AAYF;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB;IACpC,gGAAgG;IAChG,wDAAwD;IACxD,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,SAAS,EAAE,YAAY,EAAE,EAAE,CAAC,SAAS,CAAC;IAC/E,IAAI,EAAE;QACJ,SAAS,EAAE,cAAc,SAAS,KAAK;KACxC;IACD,MAAM,EAAE;QACN,SAAS,EAAE,cAAc,YAAY,KAAK;KAC3C;CACF,CAAC,CAAC,CAAC;AAEJ;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,SAAiB,EAAE,YAAoB,EAAuB,EAAE;IAClG,OAAO;QACL,aAAa,EAAE,UAAU,CAAC,SAAS,EAAE,YAAY,CAAC;QAClD,iBAAiB,EAAE,UAAU;QAC7B,iBAAiB,EAAE,QAAQ;QAC3B,uBAAuB,EAAE,mCAAmC;KAC7D,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC,UAAU,CAAC,EAAE,CAAC,SAAS,CAAC;IACvE,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;KACX;IACD,OAAO,EAAE;QACP,OAAO,EAAE,UAAU;KACpB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,UAAU;KACpB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;CACF,CAAC,CAAC,CAAC;AAEJ;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,UAAkB,EAAuB,EAAE;IAChF,OAAO;QACL,aAAa,EAAE,iBAAiB,CAAC,UAAU,CAAC;QAC5C,iBAAiB,EAAE,UAAU;QAC7B,iBAAiB,EAAE,QAAQ;KAC5B,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,WAAW,EAAE,aAAa,EAAE,EAAE,CAAC,SAAS,CAAC;IACpF,IAAI,EAAE;QACJ,kBAAkB,EAAE,SAAS;KAC9B;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE,QAAQ,WAAW,GAAG,aAAa,IAAI;KAC5D;CACF,CAAC,CAAC,CAAC;AAEJ;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,WAAmB,EAAE,aAAqB,EAAE,QAAgB,EAAuB,EAAE;IACzH,OAAO;QACL,MAAM,EAAE,GAAG,aAAa,IAAI;QAC5B,KAAK,EAAE,GAAG,aAAa,IAAI;QAC3B,eAAe,EAAE,OAAO,QAAQ,GAAG;QACnC,gBAAgB,EAAE,WAAW;QAC7B,aAAa,EAAE,YAAY,CAAC,WAAW,EAAE,aAAa,CAAC;QACvD,iBAAiB,EAAE,GAAG,WAAW,GAAG,EAAE,GAAG;QACzC,iBAAiB,EAAE,UAAU;QAC7B,uBAAuB,EAAE,UAAU;QACnC,uBAAuB,EAAE,SAAS,WAAW,GAAG;QAChD,cAAc,EAAE,GAAG,aAAa,MAAM,WAAW,GAAG,aAAa,IAAI;QACrE,SAAS,EAAE,SAAS,aAAa,OAAO;KACzC,CAAC;AACJ,CAAC,CAAC","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};"]}

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

@@ -6,8 +6,16 @@ import { makeStyles } from '@fluentui/react-components';
  * @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":["../../../../../../../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';\nimport { makeStyles } from '@fluentui/react-components';\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  isSendBoxButtonDisabled: boolean;\n  customSendIconStyle?: IStyle;\n  defaultTextColor?: string;\n}): string => {\n  const {\n    theme,\n    isSendBoxButtonDisabled,\n    customSendIconStyle,\n    defaultTextColor = theme.palette.neutralTertiary\n  } = props;\n  return mergeStyles(\n    editorTextBoxButtonStyle,\n    {\n      color: isSendBoxButtonDisabled ? defaultTextColor : theme.palette.themePrimary\n    },\n    customSendIconStyle\n  );\n};\n\n/**\n * @private\n */\nexport const editorTextBoxButtonStyle: IStyle = {\n  width: '1.25rem',\n  height: '1.25rem',\n  margin: 'auto'\n};\n\n/**\n * @private\n */\nexport const attachmentUploadCardsStyles = mergeStyles({\n  margin: '0 0.25rem 0.25rem 0.25rem',\n  overflow: 'auto'\n});\n\n/**\n * @private\n */\nexport const useV9CustomStyles = makeStyles({\n  clearBackground: {\n    backgroundColor: 'transparent'\n  }\n});\n\n/**\n * @private\n */\nexport const attachmentCardBoxStyle = mergeStyles({\n  width: '100%',\n  padding: '0.50rem'\n});\n\n/**\n * @private\n */\nexport const defaultSendBoxInactiveBorderThicknessREM = 0.0625;\n/**\n * @private\n */\nexport const defaultSendBoxActiveBorderThicknessREM = 0.125;\n\n/**\n * @private\n */\nexport const borderAndBoxShadowStyle = (props: {\n  theme: Theme;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): string => {\n  return mergeStyles(borderEditBoxStyle({ ...props, defaultBorderColor: props.theme.palette.neutralSecondary }));\n};\n\n/**\n * @private\n */\nexport const borderEditBoxStyle = (props: {\n  theme: Theme;\n  defaultBorderColor?: string;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): IStyle => {\n  const { theme, hasErrorMessage, disabled, defaultBorderColor } = props;\n  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : defaultBorderColor;\n  const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;\n\n  const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;\n  const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;\n\n  return {\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${borderThickness}rem solid ${borderColor}`,\n\n    // The border thickness of the sendbox wrapper changes on hover, to prevent the border thickness change causing the\n    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.\n    margin: `${defaultSendBoxActiveBorderThicknessREM - borderThickness}rem`,\n\n    ':hover, :active, :focus, :focus-within': {\n      border: `${borderActiveThickness}rem solid ${borderColorActive}`,\n      margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`\n    }\n  };\n};\n"]}
+{"version":3,"file":"SendBox.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/SendBox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, Theme } from '@fluentui/react';\nimport { makeStyles } from '@fluentui/react-components';\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  isSendBoxButtonDisabled: boolean;\n  customSendIconStyle?: IStyle;\n  defaultTextColor?: string;\n}): string => {\n  const {\n    theme,\n    isSendBoxButtonDisabled,\n    customSendIconStyle,\n    defaultTextColor = theme.palette.neutralTertiary\n  } = props;\n  return mergeStyles(editorTextBoxButtonStyle, {\n    color: isSendBoxButtonDisabled ? defaultTextColor : theme.palette.themePrimary\n  }, customSendIconStyle);\n};\n\n/**\n * @private\n */\nexport const editorTextBoxButtonStyle: IStyle = {\n  width: '1.25rem',\n  height: '1.25rem',\n  margin: 'auto'\n};\n\n/**\n * @private\n */\nexport const attachmentUploadCardsStyles = mergeStyles({\n  margin: '0 0.25rem 0.25rem 0.25rem',\n  overflow: 'auto'\n});\n\n/**\n * @private\n */\nexport const useV9CustomStyles = makeStyles({\n  clearBackground: {\n    backgroundColor: 'transparent'\n  }\n});\n\n/**\n * @private\n */\nexport const attachmentCardBoxStyle = mergeStyles({\n  width: '100%',\n  padding: '0.50rem'\n});\n\n/**\n * @private\n */\nexport const defaultSendBoxInactiveBorderThicknessREM = 0.0625;\n/**\n * @private\n */\nexport const defaultSendBoxActiveBorderThicknessREM = 0.125;\n\n/**\n * @private\n */\nexport const borderAndBoxShadowStyle = (props: {\n  theme: Theme;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): string => {\n  return mergeStyles(borderEditBoxStyle({\n    ...props,\n    defaultBorderColor: props.theme.palette.neutralSecondary\n  }));\n};\n\n/**\n * @private\n */\nexport const borderEditBoxStyle = (props: {\n  theme: Theme;\n  defaultBorderColor?: string;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): IStyle => {\n  const {\n    theme,\n    hasErrorMessage,\n    disabled,\n    defaultBorderColor\n  } = props;\n  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : defaultBorderColor;\n  const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;\n  const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;\n  const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;\n  return {\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${borderThickness}rem solid ${borderColor}`,\n    // The border thickness of the sendbox wrapper changes on hover, to prevent the border thickness change causing the\n    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.\n    margin: `${defaultSendBoxActiveBorderThicknessREM - borderThickness}rem`,\n    ':hover, :active, :focus, :focus-within': {\n      border: `${borderActiveThickness}rem solid ${borderColorActive}`,\n      margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`\n    }\n  };\n};"]}

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

@@ -6,7 +6,8 @@ import { isDarkThemed } from '../../theming/themeUtils';
  * @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'
 });
 /**
@@ -60,8 +61,10 @@ 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":["../../../../../../../react-components/src/components/styles/StreamMedia.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAkB,WAAW,EAAS,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD;;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,qBAAqB,GAAG,GAAW,EAAE,CAChD,WAAW,CAAC;IACV,6EAA6E;IAC7E,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,GAAG;IACR,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,UAAU,EAAE,qBAAqB;IACjC,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAU,EAAE,CACvD,WAAW,CAAC;IACV,6EAA6E;IAC7E,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;IACpB,6FAA6F;IAC7F,uDAAuD;IACvD,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;IACrF,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;CACrC,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';\nimport { isDarkThemed } from '../../theming/themeUtils';\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 reconnectingContainer = (): string =>\n  mergeStyles({\n    // Position centrally on top of content. Parent must have position: relative.\n    position: 'absolute',\n    top: '0',\n    bottom: '0',\n    left: '0',\n    right: '0',\n    background: 'rgba(0, 0, 0, 0.55)',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center'\n  });\n\n/**\n * @private\n */\nexport const reconnectingText = (theme: Theme): string =>\n  mergeStyles({\n    // Position centrally on top of content. Parent must have position: relative.\n    height: '3rem',\n    lineHeight: '3rem',\n    justifyContent: 'center',\n    alignItems: 'center',\n    // DarkTheme check is done cause the text color should be light in both dark and light themes\n    // due to background overlay being dark in both themes.\n    color: isDarkThemed(theme) ? theme.palette.themeDarker : theme.palette.neutralLighter,\n    fontSize: theme.fonts.large.fontSize\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"]}
+{"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;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD;;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,qBAAqB,GAAG,GAAW,EAAE,CAAC,WAAW,CAAC;IAC7D,6EAA6E;IAC7E,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,GAAG;IACR,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,UAAU,EAAE,qBAAqB;IACjC,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IACpE,6EAA6E;IAC7E,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;IACpB,6FAA6F;IAC7F,uDAAuD;IACvD,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;IACrF,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;CACrC,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';\nimport { isDarkThemed } from '../../theming/themeUtils';\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 reconnectingContainer = (): string => mergeStyles({\n  // Position centrally on top of content. Parent must have position: relative.\n  position: 'absolute',\n  top: '0',\n  bottom: '0',\n  left: '0',\n  right: '0',\n  background: 'rgba(0, 0, 0, 0.55)',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center'\n});\n\n/**\n * @private\n */\nexport const reconnectingText = (theme: Theme): string => mergeStyles({\n  // Position centrally on top of content. Parent must have position: relative.\n  height: '3rem',\n  lineHeight: '3rem',\n  justifyContent: 'center',\n  alignItems: 'center',\n  // DarkTheme check is done cause the text color should be light in both dark and light themes\n  // due to background overlay being dark in both themes.\n  color: isDarkThemed(theme) ? theme.palette.themeDarker : theme.palette.neutralLighter,\n  fontSize: theme.fonts.large.fontSize\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});"]}

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

@@ -1 +1 @@
-{"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"]}
+{"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});"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TeamsMeetingConferenceInfo.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/TeamsMeetingConferenceInfo.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAS,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AACnD;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IACjF,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC;QACrB,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;QACpB,MAAM,EAAE,aAAa;QACrB,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC;IACxC,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,aAAa,EAAE,QAAQ,CAAC,EAAE,CAAC;CAC5B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC;IAC5C,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,UAAU,EAAE,WAAW,CAAC,QAAQ;CACjC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAY,EAAU,EAAE;IACpD,OAAO,WAAW,CAAC;QACjB,UAAU,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QAC3C,MAAM,EAAE,QAAQ,CAAC,EAAE,CAAC;QACpB,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC;QACnB,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC;QACzB,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;KAC3B,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;CAC3B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,SAAS,EAAE,OAAO;CACnB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAY,EAAU,EAAE;IACzD,OAAO,WAAW,CAAC;QACjB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;QACpB,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QACtC,MAAM,EAAE,CAAC;KACV,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC9D,OAAO,WAAW,CAAC;QACjB,UAAU,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QAC3C,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;QAClB,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC;QAClB,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC;QACjB,MAAM,EAAE,CAAC;KACV,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IModalStyles, mergeStyles, Theme, FontWeights } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n/**\n * @private\n */\nexport const themedPhoneInfoModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n  main: {\n    borderRadius: theme.effects.roundedCorner6,\n    padding: _pxToRem(24),\n    width: _pxToRem(600),\n    height: 'fit-content',\n    overflow: 'hidden'\n  }\n});\n\n/**\n * @private\n */\nexport const titleClassName = mergeStyles({\n  fontWeight: 600,\n  fontSize: _pxToRem(20),\n  lineHeight: _pxToRem(28)\n});\n\n/**\n * @private\n */\nexport const titleContainerClassName = mergeStyles({\n  paddingBottom: _pxToRem(30)\n});\n\n/**\n * @private\n */\nexport const stepTextStyle = mergeStyles({\n  fontSize: _pxToRem(14),\n  lineHeight: _pxToRem(40)\n});\n\n/**\n * @private\n */\nexport const phoneInfoTextStyle = mergeStyles({\n  fontSize: _pxToRem(14),\n  lineHeight: _pxToRem(40),\n  fontWeight: FontWeights.semibold\n});\n\n/**\n * @private\n */\nexport const phoneInfoIcon = (theme: Theme): string => {\n  return mergeStyles({\n    background: `${theme.palette.themeLighter}`,\n    height: _pxToRem(36),\n    width: _pxToRem(36),\n    marginRight: _pxToRem(12),\n    borderRadius: _pxToRem(18)\n  });\n};\n\n/**\n * @private\n */\nexport const phoneInfoInctructionLine = mergeStyles({\n  marginBottom: _pxToRem(20)\n});\n\n/**\n * @private\n */\nexport const phoneInfoStep = mergeStyles({\n  textAlign: 'right'\n});\n\n/**\n * @private\n */\nexport const phoneInfoIconStyle = (theme: Theme): string => {\n  return mergeStyles({\n    padding: _pxToRem(8),\n    color: `${theme.palette.themePrimary}`,\n    zIndex: 2\n  });\n};\n\n/**\n * @private\n */\nexport const infoConnectionLinkStyle = (theme: Theme): string => {\n  return mergeStyles({\n    background: `${theme.palette.themeLighter}`,\n    width: _pxToRem(2),\n    position: 'relative',\n    left: _pxToRem(19),\n    top: _pxToRem(20),\n    zIndex: 1\n  });\n};\n"]}
+{"version":3,"file":"TeamsMeetingConferenceInfo.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/TeamsMeetingConferenceInfo.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,WAAW,EAAS,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AACnD;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAyB,EAAE,CAAC,CAAC;IACjF,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC;QACrB,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;QACpB,MAAM,EAAE,aAAa;QACrB,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAC;IACxC,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,aAAa,EAAE,QAAQ,CAAC,EAAE,CAAC;CAC5B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC;IAC5C,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;IACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;IACxB,UAAU,EAAE,WAAW,CAAC,QAAQ;CACjC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAY,EAAU,EAAE;IACpD,OAAO,WAAW,CAAC;QACjB,UAAU,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QAC3C,MAAM,EAAE,QAAQ,CAAC,EAAE,CAAC;QACpB,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC;QACnB,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC;QACzB,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;KAC3B,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAClD,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;CAC3B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,SAAS,EAAE,OAAO;CACnB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAY,EAAU,EAAE;IACzD,OAAO,WAAW,CAAC;QACjB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;QACpB,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QACtC,MAAM,EAAE,CAAC;KACV,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC9D,OAAO,WAAW,CAAC;QACjB,UAAU,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;QAC3C,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;QAClB,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,QAAQ,CAAC,EAAE,CAAC;QAClB,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC;QACjB,MAAM,EAAE,CAAC;KACV,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IModalStyles, mergeStyles, Theme, FontWeights } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n/**\n * @private\n */\nexport const themedPhoneInfoModalStyle = (theme: Theme): Partial<IModalStyles> => ({\n  main: {\n    borderRadius: theme.effects.roundedCorner6,\n    padding: _pxToRem(24),\n    width: _pxToRem(600),\n    height: 'fit-content',\n    overflow: 'hidden'\n  }\n});\n\n/**\n * @private\n */\nexport const titleClassName = mergeStyles({\n  fontWeight: 600,\n  fontSize: _pxToRem(20),\n  lineHeight: _pxToRem(28)\n});\n\n/**\n * @private\n */\nexport const titleContainerClassName = mergeStyles({\n  paddingBottom: _pxToRem(30)\n});\n\n/**\n * @private\n */\nexport const stepTextStyle = mergeStyles({\n  fontSize: _pxToRem(14),\n  lineHeight: _pxToRem(40)\n});\n\n/**\n * @private\n */\nexport const phoneInfoTextStyle = mergeStyles({\n  fontSize: _pxToRem(14),\n  lineHeight: _pxToRem(40),\n  fontWeight: FontWeights.semibold\n});\n\n/**\n * @private\n */\nexport const phoneInfoIcon = (theme: Theme): string => {\n  return mergeStyles({\n    background: `${theme.palette.themeLighter}`,\n    height: _pxToRem(36),\n    width: _pxToRem(36),\n    marginRight: _pxToRem(12),\n    borderRadius: _pxToRem(18)\n  });\n};\n\n/**\n * @private\n */\nexport const phoneInfoInctructionLine = mergeStyles({\n  marginBottom: _pxToRem(20)\n});\n\n/**\n * @private\n */\nexport const phoneInfoStep = mergeStyles({\n  textAlign: 'right'\n});\n\n/**\n * @private\n */\nexport const phoneInfoIconStyle = (theme: Theme): string => {\n  return mergeStyles({\n    padding: _pxToRem(8),\n    color: `${theme.palette.themePrimary}`,\n    zIndex: 2\n  });\n};\n\n/**\n * @private\n */\nexport const infoConnectionLinkStyle = (theme: Theme): string => {\n  return mergeStyles({\n    background: `${theme.palette.themeLighter}`,\n    width: _pxToRem(2),\n    position: 'relative',\n    left: _pxToRem(19),\n    top: _pxToRem(20),\n    zIndex: 1\n  });\n};"]}

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

@@ -20,7 +20,8 @@ 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":["../../../../../../../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"]}
+{"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});"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TypingIndicator.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/TypingIndicator.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,WAAW,CAAC;IACvD,SAAS,EAAE,UAAU;IACrB,kFAAkF;IAClF,QAAQ,EAAE,gBAAgB;CAC3B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACpD,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,YAAY;CACxB,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 typingIndicatorContainerStyle = mergeStyles({\n  minHeight: '2.125rem',\n  // flexFlow set to column-reverse to align the text to the bottom of the container\n  flexFlow: 'column-reverse'\n});\n\n/**\n * @private\n */\nexport const typingIndicatorStringStyle = mergeStyles({\n  fontWeight: 400,\n  width: '100%',\n  alignSelf: 'center',\n  wordBreak: 'break-word'\n});\n"]}
+{"version":3,"file":"TypingIndicator.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/TypingIndicator.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,WAAW,CAAC;IACvD,SAAS,EAAE,UAAU;IACrB,kFAAkF;IAClF,QAAQ,EAAE,gBAAgB;CAC3B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACpD,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,YAAY;CACxB,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 typingIndicatorContainerStyle = mergeStyles({\n  minHeight: '2.125rem',\n  // flexFlow set to column-reverse to align the text to the bottom of the container\n  flexFlow: 'column-reverse'\n});\n\n/**\n * @private\n */\nexport const typingIndicatorStringStyle = mergeStyles({\n  fontWeight: 400,\n  width: '100%',\n  alignSelf: 'center',\n  wordBreak: 'break-word'\n});"]}

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

@@ -21,7 +21,8 @@ export const childrenContainerStyle = (pageControlBarHeight) => {
  */
 export const rootStyle = {
     height: '100%',
-    width: 'inherit', // this needs to inherit its parent's width otherwise will collapse if there are no children.
+    width: 'inherit',
+    // this needs to inherit its parent's width otherwise will collapse if there are no children.
     gap: `${VERTICAL_GALLERY_GAP}rem`,
     position: 'relative'
 };

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,oBAA4B,EAAU,EAAE;IAC7E,OAAO;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,eAAe,oBAAoB,GAAG,oBAAoB,MAAM;QACxE,GAAG,EAAE,GAAG,oBAAoB,KAAK;KAClC,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,SAAS,EAAE,6FAA6F;IAC/G,GAAG,EAAE,GAAG,oBAAoB,KAAK;IACjC,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAW;IAC5D,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAgB;IACxC,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;KAChB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconStyles, IStyle, Theme } from '@fluentui/react';\n\n/**\n * Vertical Gallery gap size in rem between tiles and buttons\n *\n * @private\n */\nexport const VERTICAL_GALLERY_GAP = 0.5;\n\n/**\n * @private\n */\nexport const childrenContainerStyle = (pageControlBarHeight: number): IStyle => {\n  return {\n    width: '100%',\n    height: `calc(100% - ${pageControlBarHeight + VERTICAL_GALLERY_GAP}rem)`,\n    gap: `${VERTICAL_GALLERY_GAP}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const rootStyle: IStyle = {\n  height: '100%',\n  width: 'inherit', // this needs to inherit its parent's width otherwise will collapse if there are no children.\n  gap: `${VERTICAL_GALLERY_GAP}rem`,\n  position: 'relative'\n};\n\n/**\n * @private\n */\nexport const pageNavigationControlBarContainerStyle: IStyle = {\n  height: '2rem',\n  width: '100%',\n  position: 'absolute',\n  bottom: '0'\n};\n\n/**\n * @private\n */\nexport const leftRightButtonStyles = (theme: Theme): IStyle => {\n  return {\n    background: 'none',\n    padding: 0,\n    height: 'auto',\n    borderRadius: theme.effects.roundedCorner4,\n    border: 'none',\n    minWidth: '2rem'\n  };\n};\n\n/**\n * @private\n */\nexport const participantPageCounter: IStyle = {\n  lineHeight: '2rem',\n  width: '100%',\n  textAlign: 'center'\n};\n\n/**\n * @private\n */\nexport const navIconStyles: IIconStyles = {\n  root: {\n    lineHeight: '0'\n  }\n};\n"]}
+{"version":3,"file":"VerticalGallery.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/VerticalGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAExC;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,oBAA4B,EAAU,EAAE;IAC7E,OAAO;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,eAAe,oBAAoB,GAAG,oBAAoB,MAAM;QACxE,GAAG,EAAE,GAAG,oBAAoB,KAAK;KAClC,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW;IAC/B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,SAAS;IAChB,6FAA6F;IAC7F,GAAG,EAAE,GAAG,oBAAoB,KAAK;IACjC,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAW;IAC5D,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAY,EAAU,EAAE;IAC5D,OAAO;QACL,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAgB;IACxC,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;KAChB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IIconStyles, IStyle, Theme } from '@fluentui/react';\n\n/**\n * Vertical Gallery gap size in rem between tiles and buttons\n *\n * @private\n */\nexport const VERTICAL_GALLERY_GAP = 0.5;\n\n/**\n * @private\n */\nexport const childrenContainerStyle = (pageControlBarHeight: number): IStyle => {\n  return {\n    width: '100%',\n    height: `calc(100% - ${pageControlBarHeight + VERTICAL_GALLERY_GAP}rem)`,\n    gap: `${VERTICAL_GALLERY_GAP}rem`\n  };\n};\n\n/**\n * @private\n */\nexport const rootStyle: IStyle = {\n  height: '100%',\n  width: 'inherit',\n  // this needs to inherit its parent's width otherwise will collapse if there are no children.\n  gap: `${VERTICAL_GALLERY_GAP}rem`,\n  position: 'relative'\n};\n\n/**\n * @private\n */\nexport const pageNavigationControlBarContainerStyle: IStyle = {\n  height: '2rem',\n  width: '100%',\n  position: 'absolute',\n  bottom: '0'\n};\n\n/**\n * @private\n */\nexport const leftRightButtonStyles = (theme: Theme): IStyle => {\n  return {\n    background: 'none',\n    padding: 0,\n    height: 'auto',\n    borderRadius: theme.effects.roundedCorner4,\n    border: 'none',\n    minWidth: '2rem'\n  };\n};\n\n/**\n * @private\n */\nexport const participantPageCounter: IStyle = {\n  lineHeight: '2rem',\n  width: '100%',\n  textAlign: 'center'\n};\n\n/**\n * @private\n */\nexport const navIconStyles: IIconStyles = {\n  root: {\n    lineHeight: '0'\n  }\n};"]}

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

@@ -5,12 +5,21 @@ import { _pxToRem } from "../../../../acs-ui-common/src";
 /**
  * @private
  */
-export const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });
+export const videoGalleryOuterDivStyle = mergeStyles({
+    position: 'relative',
+    width: '100%',
+    height: '100%'
+});
 /**
  * @private
  */
 export const videoGalleryContainerStyle = {
-    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
+    root: {
+        position: 'relative',
+        height: '100%',
+        width: '100%',
+        padding: '0.5rem'
+    }
 };
 /**
  * @private
@@ -23,8 +32,10 @@ export const localVideoCameraCycleButtonStyles = (theme, size) => {
             height: size === 'large' ? _pxToRem(40) : _pxToRem(32),
             right: '0rem',
             top: '0rem',
-            color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.
-            zIndex: 2, // shows the button directly over the local video feed.
+            color: '#FFFFFF',
+            // only shows up on running video feed to we want to force specific colours.
+            zIndex: 2,
+            // shows the button directly over the local video feed.
             background: 'rgba(0,0,0,0.4)',
             borderRadius: theme.effects.roundedCorner2
         },
@@ -52,6 +63,9 @@ export const localVideoCameraCycleButtonStyles = (theme, size) => {
  * @private
  */
 export const localVideoTileContainerStyles = {
-    root: { width: '100%', height: '100%' }
+    root: {
+        width: '100%',
+        height: '100%'
+    }
 };
 //# sourceMappingURL=VideoGallery.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VideoGallery.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA+B,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAE9G;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAiB;IACtD,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE;CACjF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAY,EAAE,IAAwB,EAAiB,EAAE;IACzG,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;YACrD,MAAM,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;YACtD,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,SAAS,EAAE,4EAA4E;YAC9F,MAAM,EAAE,CAAC,EAAE,uDAAuD;YAClE,UAAU,EAAE,iBAAiB;YAC7B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SAC3C;QACD,WAAW,EAAE;YACX,yFAAyF;YACzF,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,iBAAiB,CAAC,6EAA6E;SAC5G;QACD,YAAY,EAAE;YACZ,mIAAmI;YACnI,QAAQ,EAAE,UAAU;SACrB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;YACxB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;YACzB,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE;YACb,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;YAC1B,MAAM,EAAE,OAAO;SAChB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAiB;IACzD,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;CACxC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, mergeStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({ position: 'relative', width: '100%', height: '100%' });\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme, size?: 'small' | 'large'): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: size === 'large' ? _pxToRem(40) : _pxToRem(32),\n      height: size === 'large' ? _pxToRem(40) : _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF', // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2, // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    rootDisabled: {\n      // In the disabled state, FluentUI sets the position to relative. We need to override this to keep the button correctly positioned.\n      position: 'absolute'\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8),\n      height: 'unset'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyles: IStackStyles = {\n  root: { width: '100%', height: '100%' }\n};\n"]}
+{"version":3,"file":"VideoGallery.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/VideoGallery.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAA+B,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC;IACnD,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAiB;IACtD,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAAY,EAAE,IAAwB,EAAiB,EAAE;IACzG,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;YACrD,MAAM,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC;YACtD,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,SAAS;YAChB,4EAA4E;YAC5E,MAAM,EAAE,CAAC;YACT,uDAAuD;YACvD,UAAU,EAAE,iBAAiB;YAC7B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SAC3C;QACD,WAAW,EAAE;YACX,yFAAyF;YACzF,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,iBAAiB,CAAC,6EAA6E;SAC5G;QACD,YAAY,EAAE;YACZ,mIAAmI;YACnI,QAAQ,EAAE,UAAU;SACrB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;YACxB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;YACzB,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE;YACb,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;YAC1B,MAAM,EAAE,OAAO;SAChB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAiB;IACzD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStackStyles, mergeStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const videoGalleryOuterDivStyle = mergeStyles({\n  position: 'relative',\n  width: '100%',\n  height: '100%'\n});\n\n/**\n * @private\n */\nexport const videoGalleryContainerStyle: IStackStyles = {\n  root: {\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    padding: '0.5rem'\n  }\n};\n\n/**\n * @private\n */\nexport const localVideoCameraCycleButtonStyles = (theme: Theme, size?: 'small' | 'large'): IButtonStyles => {\n  return {\n    root: {\n      position: 'absolute',\n      width: size === 'large' ? _pxToRem(40) : _pxToRem(32),\n      height: size === 'large' ? _pxToRem(40) : _pxToRem(32),\n      right: '0rem',\n      top: '0rem',\n      color: '#FFFFFF',\n      // only shows up on running video feed to we want to force specific colours.\n      zIndex: 2,\n      // shows the button directly over the local video feed.\n      background: 'rgba(0,0,0,0.4)',\n      borderRadius: theme.effects.roundedCorner2\n    },\n    rootFocused: {\n      // styles to remove the unwanted white highlight and blue colour after tapping on button.\n      color: '#FFFFFF',\n      background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.\n    },\n    rootDisabled: {\n      // In the disabled state, FluentUI sets the position to relative. We need to override this to keep the button correctly positioned.\n      position: 'absolute'\n    },\n    icon: {\n      paddingLeft: _pxToRem(3),\n      paddingRight: _pxToRem(3),\n      margin: 0\n    },\n    flexContainer: {\n      paddingBottom: _pxToRem(8),\n      height: 'unset'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const localVideoTileContainerStyles: IStackStyles = {\n  root: {\n    width: '100%',\n    height: '100%'\n  }\n};"]}

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

@@ -203,7 +203,7 @@ export const loadSpinnerStyles = (theme, isOverLay) => {
         },
         label: {
             fontSize: '1rem',
-            color: isOverLay ? (isDarkThemed(theme) ? theme.palette.black : theme.palette.white) : theme.palette.themeDarkAlt
+            color: isOverLay ? isDarkThemed(theme) ? theme.palette.black : theme.palette.white : theme.palette.themeDarkAlt
         }
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStyle, mergeStyles, Theme, ITheme, ISpinnerStyles } from '@fluentui/react';\nimport { keyframes, memoizeFunction } from '@fluentui/react';\nimport { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0',\n  left: '0',\n  padding: '0.5rem',\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const pinIconStyle: IStyle = {\n  padding: '0.125rem'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  margin: 'auto',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block',\n    // Similar to text color, icon color will be inherited from parent container\n    color: 'inherit'\n  }\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (theme: Theme): IStyle => {\n  return {\n    minWidth: 'max-content',\n    color: theme.palette.black,\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.1rem'\n  };\n};\n\n/**\n * @private\n */\nexport const moreButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      // To ensure that the button is clickable when there is a floating video tile\n      zIndex: 1,\n      top: '-0.125rem',\n      height: '100%',\n      padding: '0rem'\n    },\n    rootHovered: {\n      background: 'none'\n    },\n    rootPressed: {\n      background: 'none'\n    },\n    icon: {\n      color: theme.palette.neutralPrimary\n    },\n    iconExpanded: {\n      background: 'none',\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const raiseHandContainerStyles = (theme: ITheme, limitedSpace: boolean): string =>\n  mergeStyles(\n    {\n      alignItems: 'center',\n      padding: '0.2rem 0.3rem',\n      backgroundColor: theme.palette.white,\n      opacity: 0.9,\n      borderRadius: '1rem',\n      margin: '0.5rem',\n      width: 'fit-content',\n      position: 'absolute',\n      top: 0,\n      height: 'fit-content'\n    },\n    limitedSpace && raiseHandLimitedSpaceStyles\n  );\n\n/**\n * @private\n */\nexport const raiseHandLimitedSpaceStyles: IStyle = {\n  // position centrally\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  left: 0,\n  right: 0,\n  // position at the bottom\n  bottom: 0\n};\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction((frameHightPx: number, frameCount: number) =>\n  keyframes({\n    from: {\n      backgroundPosition: `0px 0px`\n    },\n    to: {\n      backgroundPosition: `0px ${frameCount * -frameHightPx}px`\n    }\n  })\n);\n\n/**\n * @private\n */\nexport const reactionRenderingStyle = (args: {\n  spriteImageUrl: string;\n  emojiSize: number;\n  rawFrameSize: number;\n  frameCount: number;\n}): string => {\n  const imageUrl = `url(${args.spriteImageUrl})`;\n  const steps = args.frameCount ?? 0;\n  const frameSizePx = args.rawFrameSize;\n  return mergeStyles({\n    height: `${frameSizePx}px`,\n    width: `${frameSizePx}px`,\n    overflow: 'hidden',\n    animationName: playFrames(frameSizePx, steps),\n    backgroundImage: imageUrl,\n    animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,\n    animationTimingFunction: `steps(${steps})`,\n    animationPlayState: 'running',\n    animationIterationCount: 'infinite',\n\n    // Scale the emoji to fit the parent container\n    transform: `scale(${args.emojiSize / frameSizePx})`,\n    transformOrigin: 'top left'\n  });\n};\n\n/**\n * @private\n */\nexport const loadSpinnerStyles = (theme: ITheme, isOverLay: boolean): ISpinnerStyles => {\n  return {\n    circle: {\n      width: '2rem',\n      height: '2rem'\n    },\n    label: {\n      fontSize: '1rem',\n      color: isOverLay ? (isDarkThemed(theme) ? theme.palette.black : theme.palette.white) : theme.palette.themeDarkAlt\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.3)'\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStylesTransparent = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center'\n  };\n};\n"]}
+{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAyB,WAAW,EAAiC,MAAM,iBAAiB,CAAC;AACpG,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,uCAAuC,EAAE,MAAM,qCAAqC,CAAC;AAC9F,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAW;IAChC,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAW;IAC1C,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,OAAO;IAClB,MAAM,EAAE,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAW;IAC5C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,MAAM;CACd,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC;IAC3C,eAAe,EAAE,SAAS;IAC1B,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAW;IACtC,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,GAAG;IACf,kHAAkH;IAClH,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAW;IAClC,OAAO,EAAE,UAAU;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE;QACP,OAAO,EAAE,OAAO;QAChB,4EAA4E;QAC5E,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAY,EAAU,EAAE;IACnE,OAAO;QACL,QAAQ,EAAE,aAAa;QACvB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,QAAQ;KAClB,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAY,EAAiB,EAAE;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,6EAA6E;YAC7E,MAAM,EAAE,CAAC;YACT,GAAG,EAAE,WAAW;YAChB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;SAChB;QACD,WAAW,EAAE;YACX,UAAU,EAAE,MAAM;SACnB;QACD,WAAW,EAAE;YACX,UAAU,EAAE,MAAM;SACnB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACpC;QACD,YAAY,EAAE;YACZ,UAAU,EAAE,MAAM;YAClB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;SAClC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAa,EAAE,YAAqB,EAAU,EAAE,CAAC,WAAW,CAAC;IACpG,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,eAAe;IACxB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;IACpC,OAAO,EAAE,GAAG;IACZ,YAAY,EAAE,MAAM;IACpB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,aAAa;CACtB,EAAE,YAAY,IAAI,2BAA2B,CAAC,CAAC;AAEhD;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAW;IACjD,qBAAqB;IACrB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,MAAM;IACnB,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,yBAAyB;IACzB,MAAM,EAAE,CAAC;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC,CAAC,YAAoB,EAAE,UAAkB,EAAE,EAAE,CAAC,SAAS,CAAC;IAChG,IAAI,EAAE;QACJ,kBAAkB,EAAE,SAAS;KAC9B;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE,OAAO,UAAU,GAAG,CAAC,YAAY,IAAI;KAC1D;CACF,CAAC,CAAC,CAAC;AAEJ;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,IAKtC,EAAU,EAAE;;IACX,MAAM,QAAQ,GAAG,OAAO,IAAI,CAAC,cAAc,GAAG,CAAC;IAC/C,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,UAAU,mCAAI,CAAC,CAAC;IACnC,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC;IACtC,OAAO,WAAW,CAAC;QACjB,MAAM,EAAE,GAAG,WAAW,IAAI;QAC1B,KAAK,EAAE,GAAG,WAAW,IAAI;QACzB,QAAQ,EAAE,QAAQ;QAClB,aAAa,EAAE,UAAU,CAAC,WAAW,EAAE,KAAK,CAAC;QAC7C,eAAe,EAAE,QAAQ;QACzB,iBAAiB,EAAE,GAAG,uCAAuC,GAAG,IAAI,GAAG;QACvE,uBAAuB,EAAE,SAAS,KAAK,GAAG;QAC1C,kBAAkB,EAAE,SAAS;QAC7B,uBAAuB,EAAE,UAAU;QACnC,8CAA8C;QAC9C,SAAS,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG;QACnD,eAAe,EAAE,UAAU;KAC5B,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,SAAkB,EAAkB,EAAE;IACrF,OAAO;QACL,MAAM,EAAE;YACN,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,KAAK,EAAE;YACL,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;SAChH;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAW,EAAE;IACxC,OAAO;QACL,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,oBAAoB;KACtC,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAW,EAAE;IACnD,OAAO;QACL,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStyle, mergeStyles, Theme, ITheme, ISpinnerStyles } from '@fluentui/react';\nimport { keyframes, memoizeFunction } from '@fluentui/react';\nimport { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0',\n  left: '0',\n  padding: '0.5rem',\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const pinIconStyle: IStyle = {\n  padding: '0.125rem'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  margin: 'auto',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block',\n    // Similar to text color, icon color will be inherited from parent container\n    color: 'inherit'\n  }\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (theme: Theme): IStyle => {\n  return {\n    minWidth: 'max-content',\n    color: theme.palette.black,\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.1rem'\n  };\n};\n\n/**\n * @private\n */\nexport const moreButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      // To ensure that the button is clickable when there is a floating video tile\n      zIndex: 1,\n      top: '-0.125rem',\n      height: '100%',\n      padding: '0rem'\n    },\n    rootHovered: {\n      background: 'none'\n    },\n    rootPressed: {\n      background: 'none'\n    },\n    icon: {\n      color: theme.palette.neutralPrimary\n    },\n    iconExpanded: {\n      background: 'none',\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const raiseHandContainerStyles = (theme: ITheme, limitedSpace: boolean): string => mergeStyles({\n  alignItems: 'center',\n  padding: '0.2rem 0.3rem',\n  backgroundColor: theme.palette.white,\n  opacity: 0.9,\n  borderRadius: '1rem',\n  margin: '0.5rem',\n  width: 'fit-content',\n  position: 'absolute',\n  top: 0,\n  height: 'fit-content'\n}, limitedSpace && raiseHandLimitedSpaceStyles);\n\n/**\n * @private\n */\nexport const raiseHandLimitedSpaceStyles: IStyle = {\n  // position centrally\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  left: 0,\n  right: 0,\n  // position at the bottom\n  bottom: 0\n};\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction((frameHightPx: number, frameCount: number) => keyframes({\n  from: {\n    backgroundPosition: `0px 0px`\n  },\n  to: {\n    backgroundPosition: `0px ${frameCount * -frameHightPx}px`\n  }\n}));\n\n/**\n * @private\n */\nexport const reactionRenderingStyle = (args: {\n  spriteImageUrl: string;\n  emojiSize: number;\n  rawFrameSize: number;\n  frameCount: number;\n}): string => {\n  const imageUrl = `url(${args.spriteImageUrl})`;\n  const steps = args.frameCount ?? 0;\n  const frameSizePx = args.rawFrameSize;\n  return mergeStyles({\n    height: `${frameSizePx}px`,\n    width: `${frameSizePx}px`,\n    overflow: 'hidden',\n    animationName: playFrames(frameSizePx, steps),\n    backgroundImage: imageUrl,\n    animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,\n    animationTimingFunction: `steps(${steps})`,\n    animationPlayState: 'running',\n    animationIterationCount: 'infinite',\n    // Scale the emoji to fit the parent container\n    transform: `scale(${args.emojiSize / frameSizePx})`,\n    transformOrigin: 'top left'\n  });\n};\n\n/**\n * @private\n */\nexport const loadSpinnerStyles = (theme: ITheme, isOverLay: boolean): ISpinnerStyles => {\n  return {\n    circle: {\n      width: '2rem',\n      height: '2rem'\n    },\n    label: {\n      fontSize: '1rem',\n      color: isOverLay ? isDarkThemed(theme) ? theme.palette.black : theme.palette.white : theme.palette.themeDarkAlt\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.3)'\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStylesTransparent = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center'\n  };\n};"]}

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

@@ -1 +1 @@
-{"version":3,"file":"v8StyleShim.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/v8StyleShim.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CACpC,OAAmD;IAEnD,MAAM,MAAM,GAAuD,EAAE,CAAC;IACtE,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAC7G,OAAO,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvC,4BAA4B;QAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC7B,IAAI,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;gBACxC,yCAAyC;gBACzC,MAAM,QAAQ,GAAG,IAAI,CAAC;gBACtB,IAAI,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAChC,mFAAmF;oBACnF,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;oBACvG,MAAM,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACtC,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,MAAM,CAAC,GAAG,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IRawStyle } from '@fluentui/react';\nimport { ComponentSlotStyle } from '../../types';\n\n/**\n * Function to create a React.CSSProperties object from a v8 style object.\n * This function is still not ideal\n * as v8Style can use pseudo-class selectors that style objects can't process correctly.\n *\n * @private\n */\nexport function createStyleFromV8Style(\n  v8Style: IRawStyle | ComponentSlotStyle | undefined\n): React.CSSProperties | undefined {\n  const result: { [key: string]: React.CSSProperties | undefined } = {};\n  if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {\n    return undefined;\n  } else if (typeof v8Style === 'object') {\n    // v8Style is a style object\n    for (const record in v8Style) {\n      if (typeof v8Style[record] === 'string') {\n        // v8Style[record] is just a simple style\n        const msSuffix = 'MS';\n        if (record.startsWith(msSuffix)) {\n          // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase\n          const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);\n          result[newRecord] = v8Style[record];\n        } else {\n          result[record] = v8Style[record];\n        }\n      } else {\n        result[record] = createStyleFromV8Style(v8Style[record]);\n      }\n    }\n  }\n\n  return result;\n}\n"]}
+{"version":3,"file":"v8StyleShim.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/v8StyleShim.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAmD;IACxF,MAAM,MAAM,GAER,EAAE,CAAC;IACP,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAC7G,OAAO,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvC,4BAA4B;QAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC7B,IAAI,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;gBACxC,yCAAyC;gBACzC,MAAM,QAAQ,GAAG,IAAI,CAAC;gBACtB,IAAI,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAChC,mFAAmF;oBACnF,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;oBACvG,MAAM,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACtC,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,MAAM,CAAC,GAAG,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IRawStyle } from '@fluentui/react';\nimport { ComponentSlotStyle } from '../../types';\n\n/**\n * Function to create a React.CSSProperties object from a v8 style object.\n * This function is still not ideal\n * as v8Style can use pseudo-class selectors that style objects can't process correctly.\n *\n * @private\n */\nexport function createStyleFromV8Style(v8Style: IRawStyle | ComponentSlotStyle | undefined): React.CSSProperties | undefined {\n  const result: {\n    [key: string]: React.CSSProperties | undefined;\n  } = {};\n  if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {\n    return undefined;\n  } else if (typeof v8Style === 'object') {\n    // v8Style is a style object\n    for (const record in v8Style) {\n      if (typeof v8Style[record] === 'string') {\n        // v8Style[record] is just a simple style\n        const msSuffix = 'MS';\n        if (record.startsWith(msSuffix)) {\n          // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase\n          const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);\n          result[newRecord] = v8Style[record];\n        } else {\n          result[record] = v8Style[record];\n        }\n      } else {\n        result[record] = createStyleFromV8Style(v8Style[record]);\n      }\n    }\n  }\n  return result;\n}"]}

package/dist/dist-esm/react-components/src/components/utils/ChatMessageComponentAsEditBoxUtils.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-import { AttachmentMetadata } from "../../../../acs-ui-common/src";
-import { ChatMessage } from '../../types';
 /**
  * @private
  */
@@ -13,40 +11,6 @@ type MessageState = 'OK' | 'too short' | 'too long';
 /**
  * @private
  */
-export declare function getMessageState(messageText: string, attachments: AttachmentMetadata[]): MessageState;
-/**
- * @private
- * @TODO: Remove when file-sharing feature becomes stable.
- */
-export declare function getMessageWithAttachmentMetadata(message: ChatMessage): AttachmentMetadata[] | undefined;
-/**
- * @private
- */
-interface Action {
-    type: string;
-}
-/**
- * Currently `Actions` only have one action which is to remove.
- * But in the future, we may have more actions like `add`, `update`, etc.
- * And this action would be a uinon of all those actions.
- * i.e. `type Actions = RemoveAction | AddAction | UpdateAction;`
- * @private
- */
-type Actions = RemoveAction;
-/**
- * @private
- */
-interface RemoveAction extends Action {
-    type: 'remove';
-    id: string;
-}
-/**
- * @internal
- */
-export declare const attachmentMetadataReducer: (state: AttachmentMetadata[], action: Actions) => AttachmentMetadata[];
-/**
- * @internal
- */
-export declare const doesMessageContainMultipleAttachments: (message: ChatMessage) => boolean;
+export declare function getMessageState(messageText: string): MessageState;
 export {};
 //# sourceMappingURL=ChatMessageComponentAsEditBoxUtils.d.ts.map