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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"StreamMedia.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/StreamMedia.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAkB,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC,WAAW,CAAC;IACjD,QAAQ,EAAE,UAAU;IACpB,6EAA6E;IAC7E,OAAO,EAAE,UAAU;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAW,EAAE,CAAC,WAAW,CAAC;IAC/D,6EAA6E;IAC7E,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,GAAG;IACV,SAAS,EAAE,uBAAuB;CACnC,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,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,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,sBAAsB,GAAG,GAAmB,EAAE,CAAC,iCACvD,iBAAiB,KACpB,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;KACf,EACD,MAAM,kCACA,iBAAiB,CAAC,MAAiB,KACvC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,OAAO,OAEtB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC;IAClE,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,MAAM;IACf,SAAS,EAAE;QACT,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAU,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;IAClG,oEAAoE;IACpE,iFAAiF;IACjF,kEAAkE;IAClE,EAAE;IACF,oCAAoC;IACpC,SAAS,EAAE,iBAAiB;IAC5B,wCAAwC;IACxC,qCAAqC;IACrC,uGAAuG;IACvG,4BAA4B,EAAE;QAC5B,SAAS,EAAE,iBAAiB;KAC7B;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ISpinnerStyles, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const container = (): string => mergeStyles({\n  position: 'relative',\n  // ensures child element's `position: absolute` is relative to this container\n  display: 'contents'\n});\n\n/**\n * @private\n */\nexport const loadingSpinnerContainer = (): string => mergeStyles({\n  // Position centrally on top of content. Parent must have position: relative.\n  position: 'absolute',\n  top: '50%',\n  bottom: '0',\n  left: '50%',\n  right: '0',\n  transform: 'translate(-50%, -50%)'\n});\n\n/**\n * @private\n */\nexport const 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 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 reconnectSpinnerStyles = (): ISpinnerStyles => ({\n  ...loadSpinnerStyles,\n  label: {\n    color: 'white'\n  },\n  circle: {\n    ...(loadSpinnerStyles.circle as object),\n    maxHeight: '2rem',\n    borderWidth: 'unset'\n  }\n});\n\n/**\n * @private\n */\nexport const mediaContainer = (theme: Theme): string => mergeStyles({\n  position: 'relative',\n  height: '100%',\n  width: '100%',\n  background: 'transparent',\n  display: 'flex',\n  '& video': {\n    borderRadius: theme.effects.roundedCorner4\n  }\n});\n\n/**\n * @private\n */\nexport const invertedVideoInPipStyle = (theme: Theme): string => mergeStyles(mediaContainer(theme), {\n  // The HTMLElement returned by the headless SDK is already inverted.\n  // But in picture-in-picture mode, we do not want to invert the host HTMLElement.\n  // Instead, we need to target the :picture-in-picture pseudoclass.\n  //\n  // First reset the host HTMLElement.\n  transform: 'rotateY(180deg)',\n  // This doesn't work yet on latest Edge.\n  // Probably just not implemented yet.\n  // picture-in-picture API is not yet stable: https://www.w3.org/TR/picture-in-picture/#css-pseudo-class\n  '& video:picture-in-picture': {\n    transform: 'rotateY(180deg)'\n  }\n});"]}
+{"version":3,"file":"StreamMedia.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/StreamMedia.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAkB,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAErE;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CACpC,WAAW,CAAC;IACV,QAAQ,EAAE,UAAU,EAAE,6EAA6E;IACnG,OAAO,EAAE,UAAU;CACpB,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAW,EAAE,CAClD,WAAW,CAAC;IACV,6EAA6E;IAC7E,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,GAAG;IACV,SAAS,EAAE,uBAAuB;CACnC,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,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,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,sBAAsB,GAAG,GAAmB,EAAE,CAAC,iCACvD,iBAAiB,KACpB,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;KACf,EACD,MAAM,kCACA,iBAAiB,CAAC,MAAiB,KACvC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,OAAO,OAEtB,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAY,EAAU,EAAE,CACrD,WAAW,CAAC;IACV,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,UAAU,EAAE,aAAa;IACzB,OAAO,EAAE,MAAM;IACf,SAAS,EAAE;QACT,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;KAC3C;CACF,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAU,EAAE,CAC9D,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;IACjC,oEAAoE;IACpE,iFAAiF;IACjF,kEAAkE;IAClE,EAAE;IACF,oCAAoC;IACpC,SAAS,EAAE,iBAAiB;IAC5B,wCAAwC;IACxC,qCAAqC;IACrC,uGAAuG;IACvG,4BAA4B,EAAE;QAC5B,SAAS,EAAE,iBAAiB;KAC7B;CACF,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ISpinnerStyles, mergeStyles, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const container = (): string =>\n  mergeStyles({\n    position: 'relative', // ensures child element's `position: absolute` is relative to this container\n    display: 'contents'\n  });\n\n/**\n * @private\n */\nexport const loadingSpinnerContainer = (): string =>\n  mergeStyles({\n    // Position centrally on top of content. Parent must have position: relative.\n    position: 'absolute',\n    top: '50%',\n    bottom: '0',\n    left: '50%',\n    right: '0',\n    transform: 'translate(-50%, -50%)'\n  });\n\n/**\n * @private\n */\nexport const 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 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 reconnectSpinnerStyles = (): ISpinnerStyles => ({\n  ...loadSpinnerStyles,\n  label: {\n    color: 'white'\n  },\n  circle: {\n    ...(loadSpinnerStyles.circle as object),\n    maxHeight: '2rem',\n    borderWidth: 'unset'\n  }\n});\n\n/**\n * @private\n */\nexport const mediaContainer = (theme: Theme): string =>\n  mergeStyles({\n    position: 'relative',\n    height: '100%',\n    width: '100%',\n    background: 'transparent',\n    display: 'flex',\n    '& video': {\n      borderRadius: theme.effects.roundedCorner4\n    }\n  });\n\n/**\n * @private\n */\nexport const invertedVideoInPipStyle = (theme: Theme): string =>\n  mergeStyles(mediaContainer(theme), {\n    // The HTMLElement returned by the headless SDK is already inverted.\n    // But in picture-in-picture mode, we do not want to invert the host HTMLElement.\n    // Instead, we need to target the :picture-in-picture pseudoclass.\n    //\n    // First reset the host HTMLElement.\n    transform: 'rotateY(180deg)',\n    // This doesn't work yet on latest Edge.\n    // Probably just not implemented yet.\n    // picture-in-picture API is not yet stable: https://www.w3.org/TR/picture-in-picture/#css-pseudo-class\n    '& video:picture-in-picture': {\n      transform: 'rotateY(180deg)'\n    }\n  });\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/SystemMessage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,eAAe,EAAE,UAAU;CAC5B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const systemMessageIconStyle = mergeStyles({\n  marginInlineEnd: '0.688rem'\n});"]}
+{"version":3,"file":"SystemMessage.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/SystemMessage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,eAAe,EAAE,UAAU;CAC5B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const systemMessageIconStyle = mergeStyles({\n  marginInlineEnd: '0.688rem'\n});\n"]}

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

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

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

@@ -0,0 +1,89 @@
+import { VideoGalleryTogetherModeSeatingInfo } from '../../types/TogetherModeTypes';
+import { IStackStyles } from '@fluentui/react';
+import { CSSProperties } from 'react';
+/**
+ * Multiplier to convert rem units to pixels.
+ */
+export declare const REM_TO_PX_MULTIPLIER = 16;
+/**
+ * The travel height for reactions in Together Mode.
+ * The reaction move overlay uses pixel units, so the seat position height, defined in rem, needs to be converted to pixels
+ */
+export declare const REACTION_TRAVEL_HEIGHT: number;
+/**
+ * Defines the maximum travel height for reactions in Together Mode.
+ * Ensures the reaction animation does not exceed the center point from the top.
+ * Since the reaction move overlay uses pixel units, the seat position height (defined in rem) must be converted to pixels.
+ */
+export declare const REACTION_MAX_TRAVEL_HEIGHT: number;
+/**
+ * Interface for defining the coordinates of a seat in Together Mode.
+ */
+export interface TogetherModeParticipantSeatPosition {
+    height: string;
+    width: string;
+    left: string;
+    top: string;
+}
+/**
+ * Interface for defining the style of a seat position in Together Mode.
+ */
+export interface TogetherModeSeatStyle {
+    seatPosition: TogetherModeParticipantSeatPosition;
+}
+/**
+ * Sets the seating position for a participant in Together Mode.
+ *
+ * @param seatingPosition - The seating position information.
+ * @returns The style object for the seating position.
+ */
+export declare function setParticipantSeatingPosition(seatingPosition: VideoGalleryTogetherModeSeatingInfo): TogetherModeParticipantSeatPosition;
+/**
+ * Return a style bucket based on the number of active sprites.
+ * For example, the first three reactions should appear at maximum
+ * height, width, and opacity.
+ * @private
+ */
+export declare function setTogetherModeSeatPositionStyle(seatingPosition: VideoGalleryTogetherModeSeatingInfo): TogetherModeSeatStyle;
+/**
+ * The style for the Together Mode meeting overlay.
+ */
+export declare const togetherModeMeetingOverlayStyle: CSSProperties;
+/**
+ * Generates the overlay style for a participant in Together Mode.
+ *
+ * @param seatingPosition - The seating position information.
+ * @returns The style object for the participant overlay.
+ */
+export declare function getTogetherModeParticipantOverlayStyle(seatingPositionStyle: TogetherModeSeatStyle): CSSProperties;
+/**
+ * Calculate the reaction emoji scaled size based on width and height of the participant seat width and height.
+ * This is needed when the browser is resized and the participant seat width and height changes.
+ *
+ * @param width - The width of the element.
+ * @param height - The height of the element.
+ * @returns The scaled size.
+ */
+export declare const calculateScaledSize: (width: number, height: number) => number;
+/**
+ * @private
+ */
+export declare const togetherModeStreamRootStyle: IStackStyles;
+/**
+ * @private
+ */
+export declare const togetherModeIconStyle: () => CSSProperties;
+/**
+ * The style for the container holding the display name, raiseHand, spotlight and mute icons.
+ * @private
+ */
+export declare const togetherModeParticipantStatusContainer: (backgroundColor: string, borderRadius: string) => CSSProperties;
+/**
+ * @private
+ */
+export declare const togetherModeParticipantDisplayName: (isParticipantHovered: boolean, participantSeatingWidth: number, color: string) => CSSProperties;
+/**
+ * @private
+ */
+export declare const togetherModeParticipantEmojiSpriteStyle: (emojiSize: number, emojiScaledSize: number, participantSeatWidth: string) => CSSProperties;
+//# sourceMappingURL=TogetherMode.styles.d.ts.map

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

@@ -0,0 +1,173 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(together-mode) */
+import { _pxToRem } from "../../../../acs-ui-common/src";
+/* @conditional-compile-remove(together-mode) */
+/**
+ * Multiplier to convert rem units to pixels.
+ */
+export const REM_TO_PX_MULTIPLIER = 16;
+/* @conditional-compile-remove(together-mode) */
+/**
+ * The travel height for reactions in Together Mode.
+ * The reaction move overlay uses pixel units, so the seat position height, defined in rem, needs to be converted to pixels
+ */
+export const REACTION_TRAVEL_HEIGHT = 0.35 * REM_TO_PX_MULTIPLIER;
+/* @conditional-compile-remove(together-mode) */
+/**
+ * Defines the maximum travel height for reactions in Together Mode.
+ * Ensures the reaction animation does not exceed the center point from the top.
+ * Since the reaction move overlay uses pixel units, the seat position height (defined in rem) must be converted to pixels.
+ */
+export const REACTION_MAX_TRAVEL_HEIGHT = 0.5 * REM_TO_PX_MULTIPLIER;
+/* @conditional-compile-remove(together-mode) */
+/**
+ * Sets the seating position for a participant in Together Mode.
+ *
+ * @param seatingPosition - The seating position information.
+ * @returns The style object for the seating position.
+ */
+export function setParticipantSeatingPosition(seatingPosition) {
+    return {
+        width: _pxToRem(seatingPosition.width),
+        height: _pxToRem(seatingPosition.height),
+        left: _pxToRem(seatingPosition.left),
+        top: _pxToRem(seatingPosition.top)
+    };
+}
+/* @conditional-compile-remove(together-mode) */
+/**
+ * Return a style bucket based on the number of active sprites.
+ * For example, the first three reactions should appear at maximum
+ * height, width, and opacity.
+ * @private
+ */
+export function setTogetherModeSeatPositionStyle(seatingPosition) {
+    return {
+        seatPosition: setParticipantSeatingPosition(seatingPosition)
+    };
+}
+/* @conditional-compile-remove(together-mode) */
+/**
+ * The style for the Together Mode meeting overlay.
+ */
+export const togetherModeMeetingOverlayStyle = {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: '0',
+    left: '0'
+};
+/* @conditional-compile-remove(together-mode) */
+/**
+ * Generates the overlay style for a participant in Together Mode.
+ *
+ * @param seatingPosition - The seating position information.
+ * @returns The style object for the participant overlay.
+ */
+export function getTogetherModeParticipantOverlayStyle(seatingPositionStyle) {
+    return Object.assign(Object.assign({}, seatingPositionStyle.seatPosition), { position: 'absolute' });
+}
+/* @conditional-compile-remove(together-mode) */
+// Function to map a value from one range to another
+const mapRange = (value, inMin, inMax, outMin, outMax) => {
+    return outMin + ((value - inMin) * (outMax - outMin)) / (inMax - inMin);
+};
+/* @conditional-compile-remove(together-mode) */
+/**
+ * Calculate the reaction emoji scaled size based on width and height of the participant seat width and height.
+ * This is needed when the browser is resized and the participant seat width and height changes.
+ *
+ * @param width - The width of the element.
+ * @param height - The height of the element.
+ * @returns The scaled size.
+ */
+export const calculateScaledSize = (width, height) => {
+    // Maximum participant seat width and height
+    const maxSize = 600;
+    // Minimum participant seat width and height
+    const minSize = 200;
+    // Minimum scaled width and height of the reaction emoji
+    const minScaledSize = 35;
+    // Maximum scaled width and height of the reaction emoji
+    const maxScaledSize = 70;
+    // Use width or height to determine scaling factor
+    const size = Math.min(width, height);
+    // Map the size to the desired range
+    return mapRange(size, minSize, maxSize, minScaledSize, maxScaledSize);
+};
+/* @conditional-compile-remove(together-mode) */
+/**
+ * @private
+ */
+export const togetherModeStreamRootStyle = {
+    root: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 0,
+        left: 0
+    }
+};
+/* @conditional-compile-remove(together-mode) */
+/**
+ * @private
+ */
+export const togetherModeIconStyle = () => {
+    return {
+        width: _pxToRem(20),
+        flexShrink: 0
+    };
+};
+/* @conditional-compile-remove(together-mode) */
+/**
+ * The style for the container holding the display name, raiseHand, spotlight and mute icons.
+ * @private
+ */
+export const togetherModeParticipantStatusContainer = (backgroundColor, borderRadius) => {
+    return {
+        backgroundColor,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: _pxToRem(2),
+        margin: '0 auto', // Centers the container
+        padding: `0 ${_pxToRem(5)}`,
+        borderRadius,
+        width: 'fit-content'
+    };
+};
+/* @conditional-compile-remove(together-mode) */
+/**
+ * @private
+ */
+export const togetherModeParticipantDisplayName = (isParticipantHovered, participantSeatingWidth, color) => {
+    const MIN_DISPLAY_NAME_WIDTH = 100;
+    return {
+        textOverflow: 'ellipsis',
+        flexGrow: 1, // Allow text to grow within available space
+        overflow: isParticipantHovered ? 'visible' : 'hidden',
+        whiteSpace: 'nowrap',
+        textAlign: 'center',
+        color,
+        display: isParticipantHovered || participantSeatingWidth > MIN_DISPLAY_NAME_WIDTH ? 'inline-block' : 'none' // Completely remove the element when hidden
+    };
+};
+/* @conditional-compile-remove(together-mode) */
+/**
+ * @private
+ */
+export const togetherModeParticipantEmojiSpriteStyle = (emojiSize, emojiScaledSize, participantSeatWidth) => {
+    const participantSeatWidthInPixel = parseFloat(participantSeatWidth) * REM_TO_PX_MULTIPLIER;
+    const emojiScaledSizeInPercent = (emojiScaledSize / participantSeatWidthInPixel) * 100;
+    return {
+        width: `${emojiSize}`,
+        position: 'absolute',
+        // Center the emoji sprite within the participant seat
+        left: `${emojiScaledSizeInPercent / 2}%`
+    };
+};
+//# sourceMappingURL=TogetherMode.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TogetherMode.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/TogetherMode.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n/* @conditional-compile-remove(together-mode) */\nimport { _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(together-mode) */\nimport { VideoGalleryTogetherModeSeatingInfo } from '../../types/TogetherModeTypes';\n/* @conditional-compile-remove(together-mode) */\nimport { IStackStyles } from '@fluentui/react';\n/* @conditional-compile-remove(together-mode) */\nimport { CSSProperties } from 'react';\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Multiplier to convert rem units to pixels.\n */\nexport const REM_TO_PX_MULTIPLIER = 16;\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * The travel height for reactions in Together Mode.\n * The reaction move overlay uses pixel units, so the seat position height, defined in rem, needs to be converted to pixels\n */\nexport const REACTION_TRAVEL_HEIGHT = 0.35 * REM_TO_PX_MULTIPLIER;\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Defines the maximum travel height for reactions in Together Mode.\n * Ensures the reaction animation does not exceed the center point from the top.\n * Since the reaction move overlay uses pixel units, the seat position height (defined in rem) must be converted to pixels.\n */\nexport const REACTION_MAX_TRAVEL_HEIGHT = 0.5 * REM_TO_PX_MULTIPLIER;\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface for defining the coordinates of a seat in Together Mode.\n */\nexport interface TogetherModeParticipantSeatPosition {\n  height: string;\n  width: string;\n  left: string;\n  top: string;\n}\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Interface for defining the style of a seat position in Together Mode.\n */\nexport interface TogetherModeSeatStyle {\n  seatPosition: TogetherModeParticipantSeatPosition;\n}\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Sets the seating position for a participant in Together Mode.\n *\n * @param seatingPosition - The seating position information.\n * @returns The style object for the seating position.\n */\nexport function setParticipantSeatingPosition(\n  seatingPosition: VideoGalleryTogetherModeSeatingInfo\n): TogetherModeParticipantSeatPosition {\n  return {\n    width: _pxToRem(seatingPosition.width),\n    height: _pxToRem(seatingPosition.height),\n    left: _pxToRem(seatingPosition.left),\n    top: _pxToRem(seatingPosition.top)\n  };\n}\n\n/* @conditional-compile-remove(together-mode) */\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 setTogetherModeSeatPositionStyle(\n  seatingPosition: VideoGalleryTogetherModeSeatingInfo\n): TogetherModeSeatStyle {\n  return {\n    seatPosition: setParticipantSeatingPosition(seatingPosition)\n  };\n}\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * The style for the Together Mode meeting overlay.\n */\nexport const togetherModeMeetingOverlayStyle: CSSProperties = {\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: '0',\n  left: '0'\n};\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Generates the overlay style for a participant in Together Mode.\n *\n * @param seatingPosition - The seating position information.\n * @returns The style object for the participant overlay.\n */\nexport function getTogetherModeParticipantOverlayStyle(seatingPositionStyle: TogetherModeSeatStyle): CSSProperties {\n  return {\n    ...seatingPositionStyle.seatPosition,\n    position: 'absolute'\n  };\n}\n\n/* @conditional-compile-remove(together-mode) */\n// Function to map a value from one range to another\nconst mapRange = (value: number, inMin: number, inMax: number, outMin: number, outMax: number): number => {\n  return outMin + ((value - inMin) * (outMax - outMin)) / (inMax - inMin);\n};\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * Calculate the reaction emoji scaled size based on width and height of the participant seat width and height.\n * This is needed when the browser is resized and the participant seat width and height changes.\n *\n * @param width - The width of the element.\n * @param height - The height of the element.\n * @returns The scaled size.\n */\nexport const calculateScaledSize = (width: number, height: number): number => {\n  // Maximum participant seat width and height\n  const maxSize = 600;\n  // Minimum participant seat width and height\n  const minSize = 200;\n  // Minimum scaled width and height of the reaction emoji\n  const minScaledSize = 35;\n  // Maximum scaled width and height of the reaction emoji\n  const maxScaledSize = 70;\n\n  // Use width or height to determine scaling factor\n  const size = Math.min(width, height);\n\n  // Map the size to the desired range\n  return mapRange(size, minSize, maxSize, minScaledSize, maxScaledSize);\n};\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * @private\n */\nexport const togetherModeStreamRootStyle: IStackStyles = {\n  root: {\n    width: '100%',\n    height: '100%',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    position: 'absolute',\n    top: 0,\n    left: 0\n  }\n};\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * @private\n */\nexport const togetherModeIconStyle = (): CSSProperties => {\n  return {\n    width: _pxToRem(20),\n    flexShrink: 0\n  };\n};\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * The style for the container holding the display name, raiseHand, spotlight and mute icons.\n * @private\n */\nexport const togetherModeParticipantStatusContainer = (\n  backgroundColor: string,\n  borderRadius: string\n): CSSProperties => {\n  return {\n    backgroundColor,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    gap: _pxToRem(2),\n    margin: '0 auto', // Centers the container\n    padding: `0 ${_pxToRem(5)}`,\n    borderRadius,\n    width: 'fit-content'\n  };\n};\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * @private\n */\nexport const togetherModeParticipantDisplayName = (\n  isParticipantHovered: boolean,\n  participantSeatingWidth: number,\n  color: string\n): CSSProperties => {\n  const MIN_DISPLAY_NAME_WIDTH = 100;\n  return {\n    textOverflow: 'ellipsis',\n    flexGrow: 1, // Allow text to grow within available space\n    overflow: isParticipantHovered ? 'visible' : 'hidden',\n    whiteSpace: 'nowrap',\n    textAlign: 'center',\n    color,\n    display: isParticipantHovered || participantSeatingWidth > MIN_DISPLAY_NAME_WIDTH ? 'inline-block' : 'none' // Completely remove the element when hidden\n  };\n};\n\n/* @conditional-compile-remove(together-mode) */\n/**\n * @private\n */\nexport const togetherModeParticipantEmojiSpriteStyle = (\n  emojiSize: number,\n  emojiScaledSize: number,\n  participantSeatWidth: string\n): CSSProperties => {\n  const participantSeatWidthInPixel = parseFloat(participantSeatWidth) * REM_TO_PX_MULTIPLIER;\n  const emojiScaledSizeInPercent = (emojiScaledSize / participantSeatWidthInPixel) * 100;\n  return {\n    width: `${emojiSize}`,\n    position: 'absolute',\n    // Center the emoji sprite within the participant seat\n    left: `${emojiScaledSizeInPercent / 2}%`\n  };\n};\n"]}

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

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { IButtonStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';
+/**
+ * @internal
+ */
+export declare const mainTextStyles: ITextStyles;
+/**
+ * @internal
+ */
+export declare const secondaryTextStyles: ITextStyles;
+/**
+ * @internal
+ */
+export declare const testContainerStyles: IStackStyles;
+/**
+ * @internal
+ */
+export declare const linkTextStyles: ILinkStyles;
+/**
+ * @internal
+ */
+export declare const containerStyles: IStackStyles;
+/**
+ * @internal
+ */
+export declare const continueAnywayButtonStyles: (theme: Theme) => IButtonStyles;
+//# sourceMappingURL=UnsupportedEnvironment.styles.d.ts.map

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

@@ -0,0 +1,69 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { _pxToRem } from "../../../../acs-ui-common/src";
+/**
+ * @internal
+ */
+export const mainTextStyles = {
+    root: {
+        fontWeight: 600,
+        fontSize: _pxToRem(20),
+        lineHeight: _pxToRem(28),
+        margin: 'auto',
+        textAlign: 'center',
+        padding: '0.5rem'
+    }
+};
+/**
+ * @internal
+ */
+export const secondaryTextStyles = {
+    root: {
+        margin: 'auto',
+        fontWeight: 400,
+        textAlign: 'center'
+    }
+};
+/**
+ * @internal
+ */
+export const testContainerStyles = {
+    root: {
+        margin: 'auto'
+    }
+};
+/**
+ * @internal
+ */
+export const linkTextStyles = {
+    root: {
+        margin: 'auto',
+        fontWeight: 600,
+        textAlign: 'center'
+    }
+};
+/**
+ * @internal
+ */
+export const containerStyles = {
+    root: {
+        maxWidth: _pxToRem(375),
+        padding: '2rem'
+    }
+};
+/**
+ * @internal
+ */
+export const continueAnywayButtonStyles = (theme) => {
+    return {
+        root: {
+            backgroundColor: '#C4314B',
+            borderColor: theme.palette.neutralLight,
+            color: theme.palette.white,
+            padding: '1rem',
+            // copy value previously set in FluentUI
+            height: '32px'
+        }
+    };
+};
+//# sourceMappingURL=UnsupportedEnvironment.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnsupportedEnvironment.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/UnsupportedEnvironment.styles.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,IAAI,EAAE;QACJ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;QACtB,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC;QACxB,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgB;IAC9C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAiB;IAC/C,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgB;IACzC,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,GAAG;QACf,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAiB;IAC3C,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC;QACvB,OAAO,EAAE,MAAM;KAChB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAAY,EAAiB,EAAE;IACxE,OAAO;QACL,IAAI,EAAE;YACJ,eAAe,EAAE,SAAS;YAC1B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;YACvC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC1B,OAAO,EAAE,MAAM;YACf,wCAAwC;YACxC,MAAM,EAAE,MAAM;SACf;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, ILinkStyles, IStackStyles, ITextStyles, Theme } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @internal\n */\nexport const mainTextStyles: ITextStyles = {\n  root: {\n    fontWeight: 600,\n    fontSize: _pxToRem(20),\n    lineHeight: _pxToRem(28),\n    margin: 'auto',\n    textAlign: 'center',\n    padding: '0.5rem'\n  }\n};\n\n/**\n * @internal\n */\nexport const secondaryTextStyles: ITextStyles = {\n  root: {\n    margin: 'auto',\n    fontWeight: 400,\n    textAlign: 'center'\n  }\n};\n\n/**\n * @internal\n */\nexport const testContainerStyles: IStackStyles = {\n  root: {\n    margin: 'auto'\n  }\n};\n\n/**\n * @internal\n */\nexport const linkTextStyles: ILinkStyles = {\n  root: {\n    margin: 'auto',\n    fontWeight: 600,\n    textAlign: 'center'\n  }\n};\n\n/**\n * @internal\n */\nexport const containerStyles: IStackStyles = {\n  root: {\n    maxWidth: _pxToRem(375),\n    padding: '2rem'\n  }\n};\n\n/**\n * @internal\n */\nexport const continueAnywayButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      backgroundColor: '#C4314B',\n      borderColor: theme.palette.neutralLight,\n      color: theme.palette.white,\n      padding: '1rem',\n      // copy value previously set in FluentUI\n      height: '32px'\n    }\n  };\n};\n"]}

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

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

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

@@ -5,21 +5,12 @@ 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
@@ -32,10 +23,8 @@ 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
         },
@@ -63,9 +52,6 @@ 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":["../../../../../../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};"]}
+{"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"]}

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

@@ -209,7 +209,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
         }
     };
 };