@azure/communication-react 1.14.0-beta.2 → 1.14.1-alpha-202403210013

package/dist/dist-esm/react-components/src/components/ControlButtonTooltip.js

@@ -6,11 +6,7 @@ import { isDarkThemed } from '../theming/themeUtils';
 // The TooltipHost root uses display: inline by default.
 // To prevent sizing issues or tooltip positioning issues, we override to inline-block.
 // For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
-const hostStyles = {
-    root: {
-        display: 'inline-block'
-    }
-};
+const hostStyles = { root: { display: 'inline-block' } };
 /**
  * Tooltip that should wrap control bar buttons.
  *
@@ -18,19 +14,12 @@ const hostStyles = {
  */
 export const ControlButtonTooltip = (props) => {
     const theme = useTheme();
-    const calloutStyle = {
-        root: {
-            padding: 0
-        },
-        calloutMain: {
-            padding: '0.5rem'
-        }
-    };
+    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
     const calloutProps = {
         gapSpace: 4,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    return React.createElement(TooltipHost, Object.assign({}, props, { "data-ui-id": props.id, calloutProps: Object.assign(Object.assign({}, calloutProps), props.calloutProps), styles: mergeStyleSets(hostStyles, props.styles) }), props.children);
+    return (React.createElement(TooltipHost, Object.assign({}, props, { "data-ui-id": props.id, calloutProps: Object.assign(Object.assign({}, calloutProps), props.calloutProps), styles: mergeStyleSets(hostStyles, props.styles) }), props.children));
 };
 //# sourceMappingURL=ControlButtonTooltip.js.map

package/dist/dist-esm/react-components/src/components/ControlButtonTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAgE,cAAc,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtI,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,wDAAwD;AACxD,uFAAuF;AACvF,yHAAyH;AACzH,MAAM,UAAU,GAAgC;IAC9C,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;KACxB;CACF,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC;QACnD,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC;SACX;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;KACF,CAAC;IACF,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,oBAAC,WAAW,oBAAK,KAAK,kBAAc,KAAK,CAAC,EAAE,EAAE,YAAY,kCAC5D,YAAY,GACZ,KAAK,CAAC,YAAY,GACpB,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAC9C,KAAK,CAAC,QAAQ,CACH,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { TooltipHost, ITooltipHostStyles, ITooltipHostProps, ICalloutContentStyles, mergeStyleSets, useTheme } from '@fluentui/react';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = {\n  root: {\n    display: 'inline-block'\n  }\n};\n\n/**\n * Tooltip that should wrap control bar buttons.\n *\n * @private\n */\nexport const ControlButtonTooltip = (props: ITooltipHostProps): JSX.Element => {\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n  const calloutProps = {\n    gapSpace: 4,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return <TooltipHost {...props} data-ui-id={props.id} calloutProps={{\n    ...calloutProps,\n    ...props.calloutProps\n  }} styles={mergeStyleSets(hostStyles, props.styles)}>\n      {props.children}\n    </TooltipHost>;\n};"]}
+{"version":3,"file":"ControlButtonTooltip.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlButtonTooltip.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,WAAW,EAIX,cAAc,EACd,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,wDAAwD;AACxD,uFAAuF;AACvF,yHAAyH;AACzH,MAAM,UAAU,GAAgC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAwB,EAAe,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAmC,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;IAElH,MAAM,YAAY,GAAG;QACnB,QAAQ,EAAE,CAAC;QACX,MAAM,EAAE,YAAY;QACpB,eAAe,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACzE,CAAC;IACF,OAAO,CACL,oBAAC,WAAW,oBACN,KAAK,kBACG,KAAK,CAAC,EAAE,EACpB,YAAY,kCAAO,YAAY,GAAK,KAAK,CAAC,YAAY,GACtD,MAAM,EAAE,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,KAE/C,KAAK,CAAC,QAAQ,CACH,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  TooltipHost,\n  ITooltipHostStyles,\n  ITooltipHostProps,\n  ICalloutContentStyles,\n  mergeStyleSets,\n  useTheme\n} from '@fluentui/react';\nimport { isDarkThemed } from '../theming/themeUtils';\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };\n\n/**\n * Tooltip that should wrap control bar buttons.\n *\n * @private\n */\nexport const ControlButtonTooltip = (props: ITooltipHostProps): JSX.Element => {\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  const calloutProps = {\n    gapSpace: 4,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost\n      {...props}\n      data-ui-id={props.id}\n      calloutProps={{ ...calloutProps, ...props.calloutProps }}\n      styles={mergeStyleSets(hostStyles, props.styles)}\n    >\n      {props.children}\n    </TooltipHost>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.js

@@ -12,21 +12,15 @@ import { isValidString } from '../utils';
 /* @conditional-compile-remove(call-readiness) */
 const BrowserPermissionDeniedContainer = (props) => {
     const { onTroubleshootingClick, onTryAgainClick, strings, styles } = props;
-    return React.createElement(Stack, { style: {
-            padding: '2rem',
-            paddingTop: '2.5rem',
-            maxWidth: '25.375rem'
-        } },
-        React.createElement(Stack, { horizontal: true, style: {
-                paddingBottom: '1.5rem'
-            }, horizontalAlign: 'space-between' },
+    return (React.createElement(Stack, { style: { padding: '2rem', paddingTop: '2.5rem', maxWidth: '25.375rem' } },
+        React.createElement(Stack, { horizontal: true, style: { paddingBottom: '1.5rem' }, horizontalAlign: 'space-between' },
             React.createElement(Stack, { styles: iconContainerStyles, horizontalAlign: 'center' },
                 React.createElement(Icon, { styles: iconPrimaryStyles, iconName: 'BrowserPermissionDeniedError' }))),
         React.createElement(Stack, { styles: textContainerStyles },
             isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && React.createElement(Text, { styles: primaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
             isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText),
-            onTryAgainClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, styles === null || styles === void 0 ? void 0 : styles.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onTryAgainClick }),
-            onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, styles === null || styles === void 0 ? void 0 : styles.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText)));
+            onTryAgainClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && (React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, styles === null || styles === void 0 ? void 0 : styles.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onTryAgainClick })),
+            onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && (React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, styles === null || styles === void 0 ? void 0 : styles.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText)))));
 };
 /**
  * @beta

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrowserPermissionDenied.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/BrowserPermissionDenied.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,iDAAiD;AACjD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACzF,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,iDAAiD;AACjD,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,cAAc,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AAEtM,iDAAiD;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAgEzC,iDAAiD;AACjD,MAAM,gCAAgC,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC5F,MAAM,EACJ,sBAAsB,EACtB,eAAe,EACf,OAAO,EACP,MAAM,EACP,GAAG,KAAK,CAAC;IACV,OAAO,oBAAC,KAAK,IAAC,KAAK,EAAE;YACnB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,WAAW;SACtB;QACG,oBAAC,KAAK,IAAC,UAAU,QAAC,KAAK,EAAE;gBACzB,aAAa,EAAE,QAAQ;aACxB,EAAE,eAAe,EAAE,eAAe;YAC/B,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,QAAQ;gBAC3D,oBAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,8BAA8B,GAAS,CAC5E,CACF;QACR,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB;YAC/B,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAQ;YACrG,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAQ;YAE3G,eAAe,IAAI,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,IAAI,oBAAC,aAAa,IAAC,MAAM,EAAE,cAAc,CAAC,mBAAmB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EAAE,OAAO,EAAE,eAAe,GAAI;YAEjN,sBAAsB,IAAI,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,CAAC,cAAc,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CAAC,EAAE,OAAO,EAAE,sBAAsB,IACpK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CACb,CACH,CACF,CAAC;AACb,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC1F,iDAAiD;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC;IAC3D,iDAAiD;IACjD,OAAO,oBAAC,gCAAgC,oBAAK,KAAK,IAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC;IACxG,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IButtonStyles, ILinkStyles } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { Stack, Text, Link, Icon, PrimaryButton, mergeStyleSets } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(call-readiness) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(call-readiness) */\nimport { iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';\nimport { BaseCustomStyles } from '../../types';\n/* @conditional-compile-remove(call-readiness) */\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDenied component.\n */\nexport interface BrowserPermissionDeniedProps {\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action to be taken by the try again primary button.\n   */\n  onTryAgainClick?: () => void;\n  /**\n   * Localization strings for BrowserPermissionDenied component.\n   */\n  strings?: BrowserPermissionDeniedStrings;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <BrowserPermissionDenied styles={{ primaryButton: { root: {backgroundColor: 'blue' }}}} />\n   * ```\n   */\n  styles?: BrowserPermissionDeniedStyles;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDenied component\n */\nexport interface BrowserPermissionDeniedStrings {\n  /**\n   * Main button text string.\n   */\n  primaryButtonText: string;\n  /**\n   * Main text string.\n   */\n  primaryText: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText: string;\n  /**\n   * More help link string.\n   */\n  linkText: string;\n}\n\n/**\n * Fluent styles for {@link BrowserPermissionDenied}.\n *\n * @beta\n */\nexport interface BrowserPermissionDeniedStyles extends BaseCustomStyles {\n  /** Styles for the primary button. */\n  primaryButton?: IButtonStyles;\n  /** Styles for the help troubleshooting link text. */\n  troubleshootingLink?: ILinkStyles;\n}\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDeniedContainer = (props: BrowserPermissionDeniedProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    onTryAgainClick,\n    strings,\n    styles\n  } = props;\n  return <Stack style={{\n    padding: '2rem',\n    paddingTop: '2.5rem',\n    maxWidth: '25.375rem'\n  }}>\n      <Stack horizontal style={{\n      paddingBottom: '1.5rem'\n    }} horizontalAlign={'space-between'}>\n        <Stack styles={iconContainerStyles} horizontalAlign={'center'}>\n          <Icon styles={iconPrimaryStyles} iconName={'BrowserPermissionDeniedError'}></Icon>\n        </Stack>\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n        {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n\n        {onTryAgainClick && isValidString(strings?.primaryButtonText) && <PrimaryButton styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)} text={strings?.primaryButtonText} onClick={onTryAgainClick} />}\n\n        {onTroubleshootingClick && isValidString(strings?.linkText) && <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n            {strings?.linkText}\n          </Link>}\n      </Stack>\n    </Stack>;\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDenied = (props: BrowserPermissionDeniedProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings.BrowserPermissionDenied;\n  /* @conditional-compile-remove(call-readiness) */\n  return <BrowserPermissionDeniedContainer {...props} strings={props.strings ? props.strings : locale} />;\n  return <></>;\n};"]}
+{"version":3,"file":"BrowserPermissionDenied.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/BrowserPermissionDenied.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IButtonStyles, ILinkStyles } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { Stack, Text, Link, Icon, PrimaryButton, mergeStyleSets } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(call-readiness) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  iconContainerStyles,\n  iconPrimaryStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  textContainerStyles\n} from './../styles/BrowserPermissionDenied.styles';\nimport { BaseCustomStyles } from '../../types';\n/* @conditional-compile-remove(call-readiness) */\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDenied component.\n */\nexport interface BrowserPermissionDeniedProps {\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action to be taken by the try again primary button.\n   */\n  onTryAgainClick?: () => void;\n  /**\n   * Localization strings for BrowserPermissionDenied component.\n   */\n  strings?: BrowserPermissionDeniedStrings;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <BrowserPermissionDenied styles={{ primaryButton: { root: {backgroundColor: 'blue' }}}} />\n   * ```\n   */\n  styles?: BrowserPermissionDeniedStyles;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDenied component\n */\nexport interface BrowserPermissionDeniedStrings {\n  /**\n   * Main button text string.\n   */\n  primaryButtonText: string;\n  /**\n   * Main text string.\n   */\n  primaryText: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText: string;\n  /**\n   * More help link string.\n   */\n  linkText: string;\n}\n\n/**\n * Fluent styles for {@link BrowserPermissionDenied}.\n *\n * @beta\n */\nexport interface BrowserPermissionDeniedStyles extends BaseCustomStyles {\n  /** Styles for the primary button. */\n  primaryButton?: IButtonStyles;\n  /** Styles for the help troubleshooting link text. */\n  troubleshootingLink?: ILinkStyles;\n}\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDeniedContainer = (props: BrowserPermissionDeniedProps): JSX.Element => {\n  const { onTroubleshootingClick, onTryAgainClick, strings, styles } = props;\n  return (\n    <Stack style={{ padding: '2rem', paddingTop: '2.5rem', maxWidth: '25.375rem' }}>\n      <Stack horizontal style={{ paddingBottom: '1.5rem' }} horizontalAlign={'space-between'}>\n        <Stack styles={iconContainerStyles} horizontalAlign={'center'}>\n          <Icon styles={iconPrimaryStyles} iconName={'BrowserPermissionDeniedError'}></Icon>\n        </Stack>\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n        {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n\n        {onTryAgainClick && isValidString(strings?.primaryButtonText) && (\n          <PrimaryButton\n            styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)}\n            text={strings?.primaryButtonText}\n            onClick={onTryAgainClick}\n          />\n        )}\n\n        {onTroubleshootingClick && isValidString(strings?.linkText) && (\n          <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n            {strings?.linkText}\n          </Link>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDenied = (props: BrowserPermissionDeniedProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings.BrowserPermissionDenied;\n  /* @conditional-compile-remove(call-readiness) */\n  return <BrowserPermissionDeniedContainer {...props} strings={props.strings ? props.strings : locale} />;\n  return <></>;\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.js

@@ -16,49 +16,32 @@ const BrowserPermissionDeniedIOSContainer = (props) => {
     const { imageSource, onTroubleshootingClick, onTryAgainClick, strings, styles } = props;
     const theme = useTheme();
     const stepsCircleStyle = useMemo(() => {
-        return mergeStyleSets(iOSStepsCircleStyles, {
-            root: {
-                background: theme.palette.neutralLighter
-            }
-        });
+        return mergeStyleSets(iOSStepsCircleStyles, { root: { background: theme.palette.neutralLighter } });
     }, [theme]);
-    return React.createElement(Stack, { styles: browserPermissionContainerStyles },
-        imageSource && React.createElement(Stack, { styles: mergeStyleSets(iOSImageContainer, {
-                root: {
-                    background: theme.palette.neutralLighter
-                }
-            }) }, isValidString(strings === null || strings === void 0 ? void 0 : strings.imageAltText) && React.createElement(Image, { src: imageSource !== null && imageSource !== void 0 ? imageSource : '', alt: strings === null || strings === void 0 ? void 0 : strings.imageAltText, imageFit: ImageFit.centerContain, style: {
-                padding: '1.5rem'
-            } })),
-        React.createElement(Stack, { style: {
-                padding: '1rem',
-                paddingBottom: '1.25rem'
-            } },
+    return (React.createElement(Stack, { styles: browserPermissionContainerStyles },
+        imageSource && (React.createElement(Stack, { styles: mergeStyleSets(iOSImageContainer, { root: { background: theme.palette.neutralLighter } }) }, isValidString(strings === null || strings === void 0 ? void 0 : strings.imageAltText) && (React.createElement(Image, { src: imageSource !== null && imageSource !== void 0 ? imageSource : '', alt: strings === null || strings === void 0 ? void 0 : strings.imageAltText, imageFit: ImageFit.centerContain, style: { padding: '1.5rem' } })))),
+        React.createElement(Stack, { style: { padding: '1rem', paddingBottom: '1.25rem' } },
             React.createElement(Stack, { styles: textContainerStyles },
                 isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && React.createElement(Text, { styles: primaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
                 isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.step1Text) && React.createElement(Stack, { styles: iOSStepsContainerStyles },
+                isValidString(strings === null || strings === void 0 ? void 0 : strings.step1Text) && (React.createElement(Stack, { styles: iOSStepsContainerStyles },
                     React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
                         React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step1DigitText)),
-                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step1Text)),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.step2Text) && React.createElement(Stack, { styles: iOSStepsContainerStyles },
+                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step1Text))),
+                isValidString(strings === null || strings === void 0 ? void 0 : strings.step2Text) && (React.createElement(Stack, { styles: iOSStepsContainerStyles },
                     React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
                         React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step2DigitText)),
-                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step2Text)),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.step3Text) && React.createElement(Stack, { styles: iOSStepsContainerStyles },
+                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step2Text))),
+                isValidString(strings === null || strings === void 0 ? void 0 : strings.step3Text) && (React.createElement(Stack, { styles: iOSStepsContainerStyles },
                     React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
                         React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step3DigitText)),
-                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step3Text)),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.step4Text) && React.createElement(Stack, { styles: mergeStyleSets(iOSStepsContainerStyles, {
-                        root: {
-                            paddingBottom: '1.5rem'
-                        }
-                    }) },
+                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step3Text))),
+                isValidString(strings === null || strings === void 0 ? void 0 : strings.step4Text) && (React.createElement(Stack, { styles: mergeStyleSets(iOSStepsContainerStyles, { root: { paddingBottom: '1.5rem' } }) },
                     React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
                         React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step4DigitText)),
-                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step4Text)),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, styles === null || styles === void 0 ? void 0 : styles.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onTryAgainClick }),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, styles === null || styles === void 0 ? void 0 : styles.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText))));
+                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step4Text))),
+                isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && (React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, styles === null || styles === void 0 ? void 0 : styles.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onTryAgainClick })),
+                isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && (React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, styles === null || styles === void 0 ? void 0 : styles.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText))))));
 };
 /**
  * @beta

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrowserPermissionDeniedIOS.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { Stack, Text, Link, PrimaryButton, mergeStyleSets, useTheme, Image, ImageFit } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(call-readiness) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(call-readiness) */\nimport { browserPermissionContainerStyles, iOSImageContainer, iOSStepsCircleStyles, iOSStepsContainerStyles, iOSStepsDigitTextStyles, iOSStepsTextStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';\nimport { BrowserPermissionDeniedProps, BrowserPermissionDeniedStrings } from './BrowserPermissionDenied';\n/* @conditional-compile-remove(call-readiness) */\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDeniedIOS component.\n */\nexport interface BrowserPermissionDeniedIOSProps extends BrowserPermissionDeniedProps {\n  /**\n   * Localization strings for BrowserPermissionDeniedIOS component.\n   */\n  strings?: BrowserPermissionDeniedIOSStrings;\n  /**\n   * Link to image source.\n   *\n   * Image is inserted into the top of the component.\n   */\n  imageSource?: string;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDeniedIOS component\n */\nexport interface BrowserPermissionDeniedIOSStrings extends BrowserPermissionDeniedStrings {\n  /**\n   * Image alt text\n   */\n  imageAltText: string;\n  /**\n   * Main text string.\n   */\n  primaryText: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText: string;\n  /**\n   * Step 1 string\n   */\n  step1Text: string;\n  /**\n   * Step 1 digit string\n   */\n  step1DigitText: string;\n  /**\n   * Step 2 string\n   */\n  step2Text: string;\n  /**\n   * Step 2 digit string\n   */\n  step2DigitText: string;\n  /**\n   * Step 3 string\n   */\n  step3Text: string;\n  /**\n   * Step 3 digit string\n   */\n  step3DigitText: string;\n  /**\n   * Step 4 string\n   */\n  step4Text: string;\n  /**\n   * Step 4 digit string\n   */\n  step4DigitText: string;\n}\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDeniedIOSContainer = (props: BrowserPermissionDeniedIOSProps): JSX.Element => {\n  const {\n    imageSource,\n    onTroubleshootingClick,\n    onTryAgainClick,\n    strings,\n    styles\n  } = props;\n  const theme = useTheme();\n  const stepsCircleStyle = useMemo(() => {\n    return mergeStyleSets(iOSStepsCircleStyles, {\n      root: {\n        background: theme.palette.neutralLighter\n      }\n    });\n  }, [theme]);\n  return <Stack styles={browserPermissionContainerStyles}>\n      {imageSource && <Stack styles={mergeStyleSets(iOSImageContainer, {\n      root: {\n        background: theme.palette.neutralLighter\n      }\n    })}>\n          {isValidString(strings?.imageAltText) && <Image src={imageSource ?? ''} alt={strings?.imageAltText} imageFit={ImageFit.centerContain} style={{\n        padding: '1.5rem'\n      }} />}\n        </Stack>}\n      <Stack style={{\n      padding: '1rem',\n      paddingBottom: '1.25rem'\n    }}>\n        <Stack styles={textContainerStyles}>\n          {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n          {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n          {isValidString(strings?.step1Text) && <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step1DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step1Text}</Text>\n            </Stack>}\n          {isValidString(strings?.step2Text) && <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step2DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step2Text}</Text>\n            </Stack>}\n          {isValidString(strings?.step3Text) && <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step3DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step3Text}</Text>\n            </Stack>}\n          {isValidString(strings?.step4Text) && <Stack styles={mergeStyleSets(iOSStepsContainerStyles, {\n          root: {\n            paddingBottom: '1.5rem'\n          }\n        })}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step4DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step4Text}</Text>\n            </Stack>}\n          {isValidString(strings?.primaryButtonText) && <PrimaryButton styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)} text={strings?.primaryButtonText} onClick={onTryAgainClick} />}\n          {isValidString(strings?.linkText) && <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n              {strings?.linkText}\n            </Link>}\n        </Stack>\n      </Stack>\n    </Stack>;\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDeniedIOS = (props: BrowserPermissionDeniedIOSProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings.BrowserPermissionDeniedIOS;\n  /* @conditional-compile-remove(call-readiness) */\n  return <BrowserPermissionDeniedIOSContainer {...props} strings={props.strings ? props.strings : locale} />;\n  return <></>;\n};"]}
+{"version":3,"file":"BrowserPermissionDeniedIOS.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { Stack, Text, Link, PrimaryButton, mergeStyleSets, useTheme, Image, ImageFit } from '@fluentui/react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\n/* @conditional-compile-remove(call-readiness) */\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  browserPermissionContainerStyles,\n  iOSImageContainer,\n  iOSStepsCircleStyles,\n  iOSStepsContainerStyles,\n  iOSStepsDigitTextStyles,\n  iOSStepsTextStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  textContainerStyles\n} from './../styles/BrowserPermissionDenied.styles';\nimport { BrowserPermissionDeniedProps, BrowserPermissionDeniedStrings } from './BrowserPermissionDenied';\n/* @conditional-compile-remove(call-readiness) */\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDeniedIOS component.\n */\nexport interface BrowserPermissionDeniedIOSProps extends BrowserPermissionDeniedProps {\n  /**\n   * Localization strings for BrowserPermissionDeniedIOS component.\n   */\n  strings?: BrowserPermissionDeniedIOSStrings;\n  /**\n   * Link to image source.\n   *\n   * Image is inserted into the top of the component.\n   */\n  imageSource?: string;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDeniedIOS component\n */\nexport interface BrowserPermissionDeniedIOSStrings extends BrowserPermissionDeniedStrings {\n  /**\n   * Image alt text\n   */\n  imageAltText: string;\n  /**\n   * Main text string.\n   */\n  primaryText: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText: string;\n  /**\n   * Step 1 string\n   */\n  step1Text: string;\n  /**\n   * Step 1 digit string\n   */\n  step1DigitText: string;\n  /**\n   * Step 2 string\n   */\n  step2Text: string;\n  /**\n   * Step 2 digit string\n   */\n  step2DigitText: string;\n  /**\n   * Step 3 string\n   */\n  step3Text: string;\n  /**\n   * Step 3 digit string\n   */\n  step3DigitText: string;\n  /**\n   * Step 4 string\n   */\n  step4Text: string;\n  /**\n   * Step 4 digit string\n   */\n  step4DigitText: string;\n}\n\n/* @conditional-compile-remove(call-readiness) */\nconst BrowserPermissionDeniedIOSContainer = (props: BrowserPermissionDeniedIOSProps): JSX.Element => {\n  const { imageSource, onTroubleshootingClick, onTryAgainClick, strings, styles } = props;\n  const theme = useTheme();\n\n  const stepsCircleStyle = useMemo(() => {\n    return mergeStyleSets(iOSStepsCircleStyles, { root: { background: theme.palette.neutralLighter } });\n  }, [theme]);\n\n  return (\n    <Stack styles={browserPermissionContainerStyles}>\n      {imageSource && (\n        <Stack styles={mergeStyleSets(iOSImageContainer, { root: { background: theme.palette.neutralLighter } })}>\n          {isValidString(strings?.imageAltText) && (\n            <Image\n              src={imageSource ?? ''}\n              alt={strings?.imageAltText}\n              imageFit={ImageFit.centerContain}\n              style={{ padding: '1.5rem' }}\n            />\n          )}\n        </Stack>\n      )}\n      <Stack style={{ padding: '1rem', paddingBottom: '1.25rem' }}>\n        <Stack styles={textContainerStyles}>\n          {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n          {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n          {isValidString(strings?.step1Text) && (\n            <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step1DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step1Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.step2Text) && (\n            <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step2DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step2Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.step3Text) && (\n            <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step3DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step3Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.step4Text) && (\n            <Stack styles={mergeStyleSets(iOSStepsContainerStyles, { root: { paddingBottom: '1.5rem' } })}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step4DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step4Text}</Text>\n            </Stack>\n          )}\n          {isValidString(strings?.primaryButtonText) && (\n            <PrimaryButton\n              styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)}\n              text={strings?.primaryButtonText}\n              onClick={onTryAgainClick}\n            />\n          )}\n          {isValidString(strings?.linkText) && (\n            <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n              {strings?.linkText}\n            </Link>\n          )}\n        </Stack>\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDeniedIOS = (props: BrowserPermissionDeniedIOSProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings.BrowserPermissionDeniedIOS;\n  /* @conditional-compile-remove(call-readiness) */\n  return <BrowserPermissionDeniedIOSContainer {...props} strings={props.strings ? props.strings : locale} />;\n  return <></>;\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.js

@@ -10,21 +10,18 @@ import React from 'react';
 export const _DevicePermissionDropdown = (props) => {
     const { icon, askDevicePermission, onClick, constrain, strings, options, styles } = props;
     const onRenderPlaceholder = () => {
-        return React.createElement(Stack, { horizontal: true, verticalAlign: "center" },
+        return (React.createElement(Stack, { horizontal: true, verticalAlign: "center" },
             icon,
-            React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.placeHolderText));
+            React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.placeHolderText)));
     };
     const onRenderCaretDown = () => {
         return React.createElement(Text, null, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent);
     };
-    return React.createElement(Dropdown, { "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: onRenderCaretDown, onClick: () => {
+    return (React.createElement(Dropdown, { "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: onRenderCaretDown, onClick: () => {
             if (askDevicePermission) {
-                askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : {
-                    video: true,
-                    audio: true
-                });
+                askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : { video: true, audio: true });
             }
             onClick === null || onClick === void 0 ? void 0 : onClick();
-        }, options: options !== null && options !== void 0 ? options : [], styles: styles });
+        }, options: options !== null && options !== void 0 ? options : [], styles: styles }));
 };
 //# sourceMappingURL=DevicePermissionDropdown.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/DevicePermissionDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,KAAK,MAAM,OAAO,CAAC;AA8D1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,IAAI,EACJ,mBAAmB,EACnB,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ;YAC1C,IAAI;YACL,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CACjC,CAAC;IACb,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAAC;IACrD,CAAC,CAAC;IACF,OAAO,oBAAC,QAAQ,kBAAa,qBAAqB,EAAE,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EAAE,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE;YAC9M,IAAI,mBAAmB,EAAE,CAAC;gBACxB,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI;oBAC/B,KAAK,EAAE,IAAI;oBACX,KAAK,EAAE,IAAI;iBACZ,CAAC,CAAC;YACL,CAAC;YACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QACd,CAAC,EAAE,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAChD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Dropdown, IDropdownOption, IDropdownStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Strings of {@link DevicePermissionDropdown} that can be overridden.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownStrings {\n  /**\n   * dropdown label\n   */\n\n  label?: string;\n  /**\n   * dropdown placeholder\n   */\n  placeHolderText: string;\n  /** string for action button  */\n  actionButtonContent?: string;\n}\n\n/**\n * Props for {@link _DevicePermissionDropdown}.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownProps {\n  /**\n   * icon shown in dropdown placeholder\n   */\n  icon?: JSX.Element;\n  /**\n   * Dropdown content\n   */\n  options?: IDropdownOption[];\n  /**\n   * Ask for permissions of devices.\n   *\n   * @remarks\n   * Browser permission window will pop up if permissions are not granted yet\n   *\n   * @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n   */\n  askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: () => void;\n  /**\n   * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n   */\n  constrain?: _PermissionConstraints;\n  /**\n   * Strings for devicepermissiondropdown\n   */\n  strings?: _DevicePermissionDropdownStrings;\n  /**\n   * Styles for devicepermissiondropdown\n   */\n  styles?: Partial<IDropdownStyles>;\n}\n\n/**\n * A dropdown to trigger device permission prompt\n *\n * @internal\n */\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n  const {\n    icon,\n    askDevicePermission,\n    onClick,\n    constrain,\n    strings,\n    options,\n    styles\n  } = props;\n  const onRenderPlaceholder = (): JSX.Element => {\n    return <Stack horizontal verticalAlign=\"center\">\n        {icon}\n        <Text>{strings?.placeHolderText}</Text>\n      </Stack>;\n  };\n  const onRenderCaretDown = (): JSX.Element => {\n    return <Text>{strings?.actionButtonContent}</Text>;\n  };\n  return <Dropdown data-ui-id={'permission-dropdown'} placeholder={strings?.placeHolderText} label={strings?.label} onRenderPlaceholder={onRenderPlaceholder} onRenderCaretDown={onRenderCaretDown} onClick={() => {\n    if (askDevicePermission) {\n      askDevicePermission(constrain ?? {\n        video: true,\n        audio: true\n      });\n    }\n    onClick?.();\n  }} options={options ?? []} styles={styles} />;\n};\n\n/**\n * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n *\n * @internal\n */\nexport type _PermissionConstraints = {\n  audio: boolean;\n  video: boolean;\n};"]}
+{"version":3,"file":"DevicePermissionDropdown.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/DevicePermissionDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,QAAQ,EAAoC,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC1F,OAAO,KAAK,MAAM,OAAO,CAAC;AA8D1B;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE1F,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ;YACrC,IAAI;YACL,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,CAAQ,CACjC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAgB,EAAE;QAC1C,OAAO,oBAAC,IAAI,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,CAAQ,CAAC;IACrD,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,kBACK,qBAAqB,EACjC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,EACrC,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EACrB,mBAAmB,EAAE,mBAAmB,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,mBAAmB,EAAE,CAAC;gBACxB,mBAAmB,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;YACjE,CAAC;YACD,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;QACd,CAAC,EACD,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Dropdown, IDropdownOption, IDropdownStyles, Stack, Text } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Strings of {@link DevicePermissionDropdown} that can be overridden.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownStrings {\n  /**\n   * dropdown label\n   */\n\n  label?: string;\n  /**\n   * dropdown placeholder\n   */\n  placeHolderText: string;\n  /** string for action button  */\n  actionButtonContent?: string;\n}\n\n/**\n * Props for {@link _DevicePermissionDropdown}.\n *\n * @internal\n */\nexport interface _DevicePermissionDropdownProps {\n  /**\n   * icon shown in dropdown placeholder\n   */\n  icon?: JSX.Element;\n  /**\n   * Dropdown content\n   */\n  options?: IDropdownOption[];\n  /**\n   * Ask for permissions of devices.\n   *\n   * @remarks\n   * Browser permission window will pop up if permissions are not granted yet\n   *\n   * @param constrain - Define constraints for accessing local devices {@link @azure/communication-calling#PermissionConstraints }\n   */\n  askDevicePermission?(constrain: _PermissionConstraints): Promise<void>;\n  /**\n   * Optional callback when component is clicked\n   */\n  onClick?: () => void;\n  /**\n   * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n   */\n  constrain?: _PermissionConstraints;\n  /**\n   * Strings for devicepermissiondropdown\n   */\n  strings?: _DevicePermissionDropdownStrings;\n  /**\n   * Styles for devicepermissiondropdown\n   */\n  styles?: Partial<IDropdownStyles>;\n}\n\n/**\n * A dropdown to trigger device permission prompt\n *\n * @internal\n */\nexport const _DevicePermissionDropdown = (props: _DevicePermissionDropdownProps): JSX.Element => {\n  const { icon, askDevicePermission, onClick, constrain, strings, options, styles } = props;\n\n  const onRenderPlaceholder = (): JSX.Element => {\n    return (\n      <Stack horizontal verticalAlign=\"center\">\n        {icon}\n        <Text>{strings?.placeHolderText}</Text>\n      </Stack>\n    );\n  };\n\n  const onRenderCaretDown = (): JSX.Element => {\n    return <Text>{strings?.actionButtonContent}</Text>;\n  };\n\n  return (\n    <Dropdown\n      data-ui-id={'permission-dropdown'}\n      placeholder={strings?.placeHolderText}\n      label={strings?.label}\n      onRenderPlaceholder={onRenderPlaceholder}\n      onRenderCaretDown={onRenderCaretDown}\n      onClick={() => {\n        if (askDevicePermission) {\n          askDevicePermission(constrain ?? { video: true, audio: true });\n        }\n        onClick?.();\n      }}\n      options={options ?? []}\n      styles={styles}\n    />\n  );\n};\n\n/**\n * Define constraints for accessing local devices  {@link @azure/communication-calling#PermissionConstraints }\n *\n * @internal\n */\nexport type _PermissionConstraints = {\n  audio: boolean;\n  video: boolean;\n};\n"]}

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

@@ -18,7 +18,13 @@ export const CameraAndMicrophoneSitePermissions = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const locale = useLocale().strings;
     /* @conditional-compile-remove(call-readiness) */
-    const strings = useShallowMerge(props.kind === 'denied' ? props.browserHint === 'safari' ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari : locale.CameraAndMicrophoneSitePermissionsDenied : props.kind === 'request' ? locale.CameraAndMicrophoneSitePermissionsRequest : locale.CameraAndMicrophoneSitePermissionsCheck, props.strings);
+    const strings = useShallowMerge(props.kind === 'denied'
+        ? props.browserHint === 'safari'
+            ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari
+            : locale.CameraAndMicrophoneSitePermissionsDenied
+        : props.kind === 'request'
+            ? locale.CameraAndMicrophoneSitePermissionsRequest
+            : locale.CameraAndMicrophoneSitePermissionsCheck, props.strings);
     /* @conditional-compile-remove(call-readiness) */
     const cameraIconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.kind === 'denied') ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';
     /* @conditional-compile-remove(call-readiness) */
@@ -26,7 +32,7 @@ export const CameraAndMicrophoneSitePermissions = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const connectorIconName = (_c = props.microphoneIconName) !== null && _c !== void 0 ? _c : 'SitePermissionsSparkle';
     /* @conditional-compile-remove(call-readiness) */
-    return React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: cameraIconName, connectorIconName: connectorIconName, microphoneIconName: microphoneIconName, onPrimaryButtonClick: props.onContinueAnywayClick }));
+    return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: cameraIconName, connectorIconName: connectorIconName, microphoneIconName: microphoneIconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
     return React.createElement(React.Fragment, null);
 };
 /**
@@ -40,11 +46,17 @@ export const MicrophoneSitePermissions = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const locale = useLocale().strings;
     /* @conditional-compile-remove(call-readiness) */
-    const strings = useShallowMerge(props.kind === 'denied' ? props.browserHint === 'safari' ? locale.MicrophoneSitePermissionsDeniedSafari : locale.MicrophoneSitePermissionsDenied : props.kind === 'request' ? locale.MicrophoneSitePermissionsRequest : locale.MicrophoneSitePermissionsCheck, props.strings);
+    const strings = useShallowMerge(props.kind === 'denied'
+        ? props.browserHint === 'safari'
+            ? locale.MicrophoneSitePermissionsDeniedSafari
+            : locale.MicrophoneSitePermissionsDenied
+        : props.kind === 'request'
+            ? locale.MicrophoneSitePermissionsRequest
+            : locale.MicrophoneSitePermissionsCheck, props.strings);
     /* @conditional-compile-remove(call-readiness) */
     const iconName = ((_a = props.microphoneIconName) !== null && _a !== void 0 ? _a : props.kind === 'denied') ? 'SitePermissionMicDenied' : 'SitePermissionMic';
     /* @conditional-compile-remove(call-readiness) */
-    return React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick }));
+    return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, cameraIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
     return React.createElement(React.Fragment, null);
 };
 /**
@@ -58,11 +70,17 @@ export const CameraSitePermissions = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const locale = useLocale().strings;
     /* @conditional-compile-remove(call-readiness) */
-    const strings = useShallowMerge(props.kind === 'denied' ? props.browserHint === 'safari' ? locale.CameraSitePermissionsDeniedSafari : locale.CameraSitePermissionsDenied : props.kind === 'request' ? locale.CameraSitePermissionsRequest : locale.CameraSitePermissionsCheck, props.strings);
+    const strings = useShallowMerge(props.kind === 'denied'
+        ? props.browserHint === 'safari'
+            ? locale.CameraSitePermissionsDeniedSafari
+            : locale.CameraSitePermissionsDenied
+        : props.kind === 'request'
+            ? locale.CameraSitePermissionsRequest
+            : locale.CameraSitePermissionsCheck, props.strings);
     /* @conditional-compile-remove(call-readiness) */
     const iconName = ((_a = props.cameraIconName) !== null && _a !== void 0 ? _a : props.kind === 'denied') ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';
     /* @conditional-compile-remove(call-readiness) */
-    return React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, microphoneIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick }));
+    return (React.createElement(SitePermissionsContainer, Object.assign({}, props, { strings: strings, microphoneIconName: iconName, onPrimaryButtonClick: props.onContinueAnywayClick })));
     return React.createElement(React.Fragment, null);
 };
 //# sourceMappingURL=SitePermissions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SitePermissions.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/SitePermissions.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\nimport { SitePermissionsStrings, SitePermissionsStyles } from './SitePermissionsScaffolding';\n/* @conditional-compile-remove(call-readiness) */\nimport { SitePermissionsContainer } from './SitePermissionsScaffolding';\n/* @conditional-compile-remove(call-readiness) */\nimport { useShallowMerge } from '../utils/merge';\n\n/**\n * @beta\n * Props for SitePermissions components.\n */\nexport interface CommonSitePermissionsProps {\n  /**\n   * Name of application calling experience is in.\n   */\n  appName: string;\n  /**\n   * Kind of the Site Permissions component.\n   */\n  kind: 'request' | 'denied' | 'check';\n  /**\n   * Type of the browser used, the Site permission component will show different guidance text based on the browser type\n   */\n  browserHint?: 'safari' | 'unset';\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   * If this is not provided the button will not be shown.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action that is taken when the user clicks the continue anyway button.\n   * If this is not provided the button will not be shown.\n   */\n  onContinueAnywayClick?: () => void;\n  /**\n   * Styles for SitePermissions component.\n   */\n  styles?: SitePermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for CameraAndMicrophoneSitePermissions component.\n */\nexport type CameraAndMicrophoneSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for CameraAndMicrophoneSitePermissions component.\n */\nexport interface CameraAndMicrophoneSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the camera icon */\n  cameraIconName?: string;\n  /** Icon name for the microphone icon */\n  microphoneIconName?: string;\n  /** Icon name for the central icon between the camera and microphone icons */\n  connectorIconName?: string;\n  /** Strings for use with the {@link CameraAndMicrophoneSitePermissions} */\n  strings?: CameraAndMicrophoneSitePermissionsStrings;\n}\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n */\nexport const CameraAndMicrophoneSitePermissions = (props: CameraAndMicrophoneSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(props.kind === 'denied' ? props.browserHint === 'safari' ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari : locale.CameraAndMicrophoneSitePermissionsDenied : props.kind === 'request' ? locale.CameraAndMicrophoneSitePermissionsRequest : locale.CameraAndMicrophoneSitePermissionsCheck, props.strings);\n\n  /* @conditional-compile-remove(call-readiness) */\n  const cameraIconName = props.microphoneIconName ?? props.kind === 'denied' ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';\n  /* @conditional-compile-remove(call-readiness) */\n  const microphoneIconName = props.microphoneIconName ?? props.kind === 'denied' ? 'SitePermissionMicDenied' : 'SitePermissionMic';\n  /* @conditional-compile-remove(call-readiness) */\n  const connectorIconName = props.microphoneIconName ?? 'SitePermissionsSparkle';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return <SitePermissionsContainer {...props} strings={strings} cameraIconName={cameraIconName} connectorIconName={connectorIconName} microphoneIconName={microphoneIconName} onPrimaryButtonClick={props.onContinueAnywayClick} />;\n  return <></>;\n};\n\n/**\n * @beta\n * Strings for MicrophoneSitePermissions component.\n */\nexport type MicrophoneSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for MicrophoneSitePermissions component.\n */\nexport interface MicrophoneSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the microphone icon */\n  microphoneIconName?: string;\n  /** Strings for use with the {@link MicrophoneSitePermissions} */\n  strings?: MicrophoneSitePermissionsStrings;\n}\n\n/**\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n *\n * @beta\n */\nexport const MicrophoneSitePermissions = (props: MicrophoneSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(props.kind === 'denied' ? props.browserHint === 'safari' ? locale.MicrophoneSitePermissionsDeniedSafari : locale.MicrophoneSitePermissionsDenied : props.kind === 'request' ? locale.MicrophoneSitePermissionsRequest : locale.MicrophoneSitePermissionsCheck, props.strings);\n\n  /* @conditional-compile-remove(call-readiness) */\n  const iconName = props.microphoneIconName ?? props.kind === 'denied' ? 'SitePermissionMicDenied' : 'SitePermissionMic';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return <SitePermissionsContainer {...props} strings={strings} cameraIconName={iconName} onPrimaryButtonClick={props.onContinueAnywayClick} />;\n  return <></>;\n};\n\n/**\n * @beta\n * Strings for CameraSitePermissions component.\n */\nexport type CameraSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for CameraSitePermissions component.\n */\nexport interface CameraSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the camera icon */\n  cameraIconName?: string;\n  /** Strings for use with the {@link CameraSitePermissions} */\n  strings?: CameraSitePermissionsStrings;\n}\n\n/**\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n *\n * @beta\n */\nexport const CameraSitePermissions = (props: CameraSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(props.kind === 'denied' ? props.browserHint === 'safari' ? locale.CameraSitePermissionsDeniedSafari : locale.CameraSitePermissionsDenied : props.kind === 'request' ? locale.CameraSitePermissionsRequest : locale.CameraSitePermissionsCheck, props.strings);\n\n  /* @conditional-compile-remove(call-readiness) */\n  const iconName = props.cameraIconName ?? props.kind === 'denied' ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return <SitePermissionsContainer {...props} strings={strings} microphoneIconName={iconName} onPrimaryButtonClick={props.onContinueAnywayClick} />;\n  return <></>;\n};"]}
+{"version":3,"file":"SitePermissions.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/SitePermissions.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport { useLocale } from '../../localization';\nimport { SitePermissionsStrings, SitePermissionsStyles } from './SitePermissionsScaffolding';\n/* @conditional-compile-remove(call-readiness) */\nimport { SitePermissionsContainer } from './SitePermissionsScaffolding';\n/* @conditional-compile-remove(call-readiness) */\nimport { useShallowMerge } from '../utils/merge';\n\n/**\n * @beta\n * Props for SitePermissions components.\n */\nexport interface CommonSitePermissionsProps {\n  /**\n   * Name of application calling experience is in.\n   */\n  appName: string;\n  /**\n   * Kind of the Site Permissions component.\n   */\n  kind: 'request' | 'denied' | 'check';\n  /**\n   * Type of the browser used, the Site permission component will show different guidance text based on the browser type\n   */\n  browserHint?: 'safari' | 'unset';\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   * If this is not provided the button will not be shown.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action that is taken when the user clicks the continue anyway button.\n   * If this is not provided the button will not be shown.\n   */\n  onContinueAnywayClick?: () => void;\n  /**\n   * Styles for SitePermissions component.\n   */\n  styles?: SitePermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for CameraAndMicrophoneSitePermissions component.\n */\nexport type CameraAndMicrophoneSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for CameraAndMicrophoneSitePermissions component.\n */\nexport interface CameraAndMicrophoneSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the camera icon */\n  cameraIconName?: string;\n  /** Icon name for the microphone icon */\n  microphoneIconName?: string;\n  /** Icon name for the central icon between the camera and microphone icons */\n  connectorIconName?: string;\n  /** Strings for use with the {@link CameraAndMicrophoneSitePermissions} */\n  strings?: CameraAndMicrophoneSitePermissionsStrings;\n}\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n */\nexport const CameraAndMicrophoneSitePermissions = (props: CameraAndMicrophoneSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(\n    props.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.CameraAndMicrophoneSitePermissionsDeniedSafari\n        : locale.CameraAndMicrophoneSitePermissionsDenied\n      : props.kind === 'request'\n      ? locale.CameraAndMicrophoneSitePermissionsRequest\n      : locale.CameraAndMicrophoneSitePermissionsCheck,\n    props.strings\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const cameraIconName =\n    props.microphoneIconName ?? props.kind === 'denied' ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';\n  /* @conditional-compile-remove(call-readiness) */\n  const microphoneIconName =\n    props.microphoneIconName ?? props.kind === 'denied' ? 'SitePermissionMicDenied' : 'SitePermissionMic';\n  /* @conditional-compile-remove(call-readiness) */\n  const connectorIconName = props.microphoneIconName ?? 'SitePermissionsSparkle';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return (\n    <SitePermissionsContainer\n      {...props}\n      strings={strings}\n      cameraIconName={cameraIconName}\n      connectorIconName={connectorIconName}\n      microphoneIconName={microphoneIconName}\n      onPrimaryButtonClick={props.onContinueAnywayClick}\n    />\n  );\n  return <></>;\n};\n\n/**\n * @beta\n * Strings for MicrophoneSitePermissions component.\n */\nexport type MicrophoneSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for MicrophoneSitePermissions component.\n */\nexport interface MicrophoneSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the microphone icon */\n  microphoneIconName?: string;\n  /** Strings for use with the {@link MicrophoneSitePermissions} */\n  strings?: MicrophoneSitePermissionsStrings;\n}\n\n/**\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n *\n * @beta\n */\nexport const MicrophoneSitePermissions = (props: MicrophoneSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(\n    props.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.MicrophoneSitePermissionsDeniedSafari\n        : locale.MicrophoneSitePermissionsDenied\n      : props.kind === 'request'\n      ? locale.MicrophoneSitePermissionsRequest\n      : locale.MicrophoneSitePermissionsCheck,\n    props.strings\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const iconName =\n    props.microphoneIconName ?? props.kind === 'denied' ? 'SitePermissionMicDenied' : 'SitePermissionMic';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return (\n    <SitePermissionsContainer\n      {...props}\n      strings={strings}\n      cameraIconName={iconName}\n      onPrimaryButtonClick={props.onContinueAnywayClick}\n    />\n  );\n  return <></>;\n};\n\n/**\n * @beta\n * Strings for CameraSitePermissions component.\n */\nexport type CameraSitePermissionsStrings = SitePermissionsStrings;\n\n/**\n * @beta\n * Props for CameraSitePermissions component.\n */\nexport interface CameraSitePermissionsProps extends CommonSitePermissionsProps {\n  /** Icon name for the camera icon */\n  cameraIconName?: string;\n  /** Strings for use with the {@link CameraSitePermissions} */\n  strings?: CameraSitePermissionsStrings;\n}\n\n/**\n * Component to allow Contoso to help their end user with their devices should their permissions be blocked\n * by their browsers settings.\n *\n * @beta\n */\nexport const CameraSitePermissions = (props: CameraSitePermissionsProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const locale = useLocale().strings;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const strings = useShallowMerge(\n    props.kind === 'denied'\n      ? props.browserHint === 'safari'\n        ? locale.CameraSitePermissionsDeniedSafari\n        : locale.CameraSitePermissionsDenied\n      : props.kind === 'request'\n      ? locale.CameraSitePermissionsRequest\n      : locale.CameraSitePermissionsCheck,\n    props.strings\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  const iconName =\n    props.cameraIconName ?? props.kind === 'denied' ? 'SitePermissionCameraDenied' : 'SitePermissionCamera';\n\n  /* @conditional-compile-remove(call-readiness) */\n  return (\n    <SitePermissionsContainer\n      {...props}\n      strings={strings}\n      microphoneIconName={iconName}\n      onPrimaryButtonClick={props.onContinueAnywayClick}\n    />\n  );\n  return <></>;\n};\n"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.js

@@ -8,32 +8,24 @@ import { isValidString } from '../utils';
 /**
  * spacing for the icons in the banner.
  */
-const tokens = {
-    childrenGap: '2rem'
-};
+const tokens = { childrenGap: '2rem' };
 /** @private */
 export const SitePermissionsContainer = (props) => {
     var _a, _b;
     const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;
     const theme = useTheme();
-    return React.createElement(Stack, { style: {
-            padding: '2rem',
-            maxWidth: '25.375rem',
-            alignSelf: 'center'
-        }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
+    return (React.createElement(Stack, { style: { padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }, "aria-label": strings === null || strings === void 0 ? void 0 : strings.ariaLabel },
         React.createElement(Stack, { styles: iconBannerContainerStyles, horizontal: true, horizontalAlign: 'center', verticalFill: true, tokens: tokens },
-            props.cameraIconName && React.createElement(Stack, null,
-                React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.cameraIconName })),
-            props.connectorIconName && React.createElement(Stack, { styles: iconContainerStyles, horizontal: true },
-                React.createElement(Icon, { styles: sparkleIconBackdropStyles(theme), iconName: props.connectorIconName })),
-            props.microphoneIconName && React.createElement(Stack, null,
-                React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.microphoneIconName }))),
+            props.cameraIconName && (React.createElement(Stack, null,
+                React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.cameraIconName }))),
+            props.connectorIconName && (React.createElement(Stack, { styles: iconContainerStyles, horizontal: true },
+                React.createElement(Icon, { styles: sparkleIconBackdropStyles(theme), iconName: props.connectorIconName }))),
+            props.microphoneIconName && (React.createElement(Stack, null,
+                React.createElement(Icon, { styles: iconPrimaryStyles, iconName: props.microphoneIconName })))),
         React.createElement(Stack, { styles: textContainerStyles },
-            strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && React.createElement(Text, { styles: primaryTextStyles }, appName ? _formatString(strings.primaryText, {
-                appName: appName
-            }) : strings.primaryText),
-            strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText),
-            onPrimaryButtonClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onPrimaryButtonClick }),
-            onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText)));
+            strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && (React.createElement(Text, { styles: primaryTextStyles }, appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText)),
+            strings && isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && (React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText)),
+            onPrimaryButtonClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && (React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onPrimaryButtonClick })),
+            onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && (React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText)))));
 };
 //# sourceMappingURL=SitePermissionsScaffolding.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.js.map

@@ -1 +1 @@
-{"version":3,"file":"SitePermissionsScaffolding.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/SitePermissionsScaffolding.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { Stack, Text, Link, Icon, useTheme, PrimaryButton, ILinkStyles, IButtonStyles, mergeStyleSets } from '@fluentui/react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport { iconBannerContainerStyles, iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, sparkleIconBackdropStyles, textContainerStyles } from '../styles/SitePermissions.styles';\nimport { isValidString } from '../utils';\nimport { BaseCustomStyles } from '../../types';\n\n/**\n * @private\n * Props for SitePermissions component.\n */\nexport interface SitePermissionsContainerProps {\n  /**\n   * Name of application calling experience is in.\n   */\n  appName?: string;\n  /**\n   * Name of icon to be used for the camera icon.\n   * If this is not provided the icon will not be shown.\n   */\n  cameraIconName?: string;\n  /**\n   * Name of icon to be used for the sparkle icon.\n   * If this is not provided the icon will not be shown.\n   */\n  connectorIconName?: string;\n  /**\n   * Name of icon to be used for the mic icon.\n   * If this is not provided the icon will not be shown.\n   */\n  microphoneIconName?: string;\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   * If this is not provided the button will not be shown.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action that is taken when the user clicks an optional primary button.\n   * If this is not provided the button will not be shown.\n   */\n  onPrimaryButtonClick?: () => void;\n  /**\n   * Localization strings for SitePermissions component.\n   */\n  strings?: SitePermissionsStrings;\n  /**\n   * Styles for SitePermissions component.\n   */\n  styles?: SitePermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for SitePermissions component\n */\nexport type SitePermissionsStrings = {\n  /**\n   * Main text string.\n   */\n  primaryText?: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText?: string;\n  /**\n   * More help link string.\n   */\n  linkText?: string;\n  /**\n   * Primary button text string.\n   */\n  primaryButtonText?: string;\n  /**\n   * Aria label describing the content of the container\n   */\n  ariaLabel?: string;\n};\n\n/**\n * Fluent styles for {@link SitePermissionsContainer}.\n *\n * @beta\n */\nexport interface SitePermissionsStyles extends BaseCustomStyles {\n  /** Styles for the primary button. */\n  primaryButton?: IButtonStyles;\n  /** Styles for the help troubleshooting link text. */\n  troubleshootingLink?: ILinkStyles;\n}\n\n/**\n * spacing for the icons in the banner.\n */\nconst tokens = {\n  childrenGap: '2rem'\n};\n\n/** @private */\nexport const SitePermissionsContainer = (props: SitePermissionsContainerProps): JSX.Element => {\n  const {\n    appName,\n    onTroubleshootingClick,\n    onPrimaryButtonClick,\n    strings\n  } = props;\n  const theme = useTheme();\n  return <Stack style={{\n    padding: '2rem',\n    maxWidth: '25.375rem',\n    alignSelf: 'center'\n  }} aria-label={strings?.ariaLabel}>\n      <Stack styles={iconBannerContainerStyles} horizontal horizontalAlign={'center'} verticalFill tokens={tokens}>\n        {props.cameraIconName && <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.cameraIconName}></Icon>\n          </Stack>}\n        {props.connectorIconName && <Stack styles={iconContainerStyles} horizontal>\n            <Icon styles={sparkleIconBackdropStyles(theme)} iconName={props.connectorIconName}></Icon>\n          </Stack>}\n        {props.microphoneIconName && <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.microphoneIconName}></Icon>\n          </Stack>}\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {strings && isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>\n            {appName ? _formatString(strings.primaryText, {\n          appName: appName\n        }) : strings.primaryText}\n          </Text>}\n        {strings && isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n\n        {onPrimaryButtonClick && isValidString(strings?.primaryButtonText) && <PrimaryButton styles={mergeStyleSets(primaryButtonStyles, props.styles?.primaryButton)} text={strings?.primaryButtonText} onClick={onPrimaryButtonClick} />}\n        {onTroubleshootingClick && isValidString(strings?.linkText) && <Link styles={mergeStyleSets(linkTextStyles, props.styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n            {strings?.linkText}\n          </Link>}\n      </Stack>\n    </Stack>;\n};"]}
+{"version":3,"file":"SitePermissionsScaffolding.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/DevicePermissions/SitePermissionsScaffolding.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  Stack,\n  Text,\n  Link,\n  Icon,\n  useTheme,\n  PrimaryButton,\n  ILinkStyles,\n  IButtonStyles,\n  mergeStyleSets\n} from '@fluentui/react';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport {\n  iconBannerContainerStyles,\n  iconContainerStyles,\n  iconPrimaryStyles,\n  linkTextStyles,\n  primaryButtonStyles,\n  primaryTextStyles,\n  secondaryTextStyles,\n  sparkleIconBackdropStyles,\n  textContainerStyles\n} from '../styles/SitePermissions.styles';\nimport { isValidString } from '../utils';\nimport { BaseCustomStyles } from '../../types';\n\n/**\n * @private\n * Props for SitePermissions component.\n */\nexport interface SitePermissionsContainerProps {\n  /**\n   * Name of application calling experience is in.\n   */\n  appName?: string;\n  /**\n   * Name of icon to be used for the camera icon.\n   * If this is not provided the icon will not be shown.\n   */\n  cameraIconName?: string;\n  /**\n   * Name of icon to be used for the sparkle icon.\n   * If this is not provided the icon will not be shown.\n   */\n  connectorIconName?: string;\n  /**\n   * Name of icon to be used for the mic icon.\n   * If this is not provided the icon will not be shown.\n   */\n  microphoneIconName?: string;\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   * If this is not provided the button will not be shown.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action that is taken when the user clicks an optional primary button.\n   * If this is not provided the button will not be shown.\n   */\n  onPrimaryButtonClick?: () => void;\n  /**\n   * Localization strings for SitePermissions component.\n   */\n  strings?: SitePermissionsStrings;\n  /**\n   * Styles for SitePermissions component.\n   */\n  styles?: SitePermissionsStyles;\n}\n\n/**\n * @beta\n * Strings for SitePermissions component\n */\nexport type SitePermissionsStrings = {\n  /**\n   * Main text string.\n   */\n  primaryText?: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText?: string;\n  /**\n   * More help link string.\n   */\n  linkText?: string;\n  /**\n   * Primary button text string.\n   */\n  primaryButtonText?: string;\n  /**\n   * Aria label describing the content of the container\n   */\n  ariaLabel?: string;\n};\n\n/**\n * Fluent styles for {@link SitePermissionsContainer}.\n *\n * @beta\n */\nexport interface SitePermissionsStyles extends BaseCustomStyles {\n  /** Styles for the primary button. */\n  primaryButton?: IButtonStyles;\n  /** Styles for the help troubleshooting link text. */\n  troubleshootingLink?: ILinkStyles;\n}\n\n/**\n * spacing for the icons in the banner.\n */\nconst tokens = { childrenGap: '2rem' };\n\n/** @private */\nexport const SitePermissionsContainer = (props: SitePermissionsContainerProps): JSX.Element => {\n  const { appName, onTroubleshootingClick, onPrimaryButtonClick, strings } = props;\n  const theme = useTheme();\n\n  return (\n    <Stack style={{ padding: '2rem', maxWidth: '25.375rem', alignSelf: 'center' }} aria-label={strings?.ariaLabel}>\n      <Stack styles={iconBannerContainerStyles} horizontal horizontalAlign={'center'} verticalFill tokens={tokens}>\n        {props.cameraIconName && (\n          <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.cameraIconName}></Icon>\n          </Stack>\n        )}\n        {props.connectorIconName && (\n          <Stack styles={iconContainerStyles} horizontal>\n            <Icon styles={sparkleIconBackdropStyles(theme)} iconName={props.connectorIconName}></Icon>\n          </Stack>\n        )}\n        {props.microphoneIconName && (\n          <Stack>\n            <Icon styles={iconPrimaryStyles} iconName={props.microphoneIconName}></Icon>\n          </Stack>\n        )}\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {strings && isValidString(strings?.primaryText) && (\n          <Text styles={primaryTextStyles}>\n            {appName ? _formatString(strings.primaryText, { appName: appName }) : strings.primaryText}\n          </Text>\n        )}\n        {strings && isValidString(strings?.secondaryText) && (\n          <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>\n        )}\n\n        {onPrimaryButtonClick && isValidString(strings?.primaryButtonText) && (\n          <PrimaryButton\n            styles={mergeStyleSets(primaryButtonStyles, props.styles?.primaryButton)}\n            text={strings?.primaryButtonText}\n            onClick={onPrimaryButtonClick}\n          />\n        )}\n        {onTroubleshootingClick && isValidString(strings?.linkText) && (\n          <Link\n            styles={mergeStyleSets(linkTextStyles, props.styles?.troubleshootingLink)}\n            onClick={onTroubleshootingClick}\n          >\n            {strings?.linkText}\n          </Link>\n        )}\n      </Stack>\n    </Stack>\n  );\n};\n"]}