@azure/communication-react 1.22.0 → 1.23.0-alpha-202412200016

package/dist/dist-esm/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.js

@@ -53,7 +53,7 @@ export function DelayedUpdateBanner(props) {
     if (visible.variant === 'NO_STATE') {
         return React.createElement(React.Fragment, null);
     }
-    return React.createElement(MessageBar, { messageBarType: MessageBarType.warning, onDismiss: () => {
+    return (React.createElement(MessageBar, { messageBarType: MessageBarType.warning, onDismiss: () => {
             // when closing the banner, change variant to nostate and change stopped state to off state.
             // Reason: on banner close, going back to the default state.
             setVisible({
@@ -62,6 +62,6 @@ export function DelayedUpdateBanner(props) {
             });
             props.onDismiss();
         }, dismissButtonAriaLabel: props.strings.close },
-        React.createElement(BannerMessage, { variant: visible.variant, strings: props.strings }));
+        React.createElement(BannerMessage, { variant: visible.variant, strings: props.strings })));
 }
 //# sourceMappingURL=DelayedUpdateBanner.js.map

package/dist/dist-esm/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DelayedUpdateBanner.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/DelayedUpdateBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,MAAM,yBAAyB,GAAG,IAAI,CAAC;AASvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAInC;IACC,MAAM,EACJ,OAAO,EACP,WAAW,EAAE,kBAAkB,EAChC,GAAG,KAAK,CAAC,OAAO,CAAC;IAElB,0DAA0D;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB;QACzD,OAAO;QACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAC/E,IAAI,OAAO,KAAK,OAAO,CAAC,OAAO,IAAI,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;QAC5E,gCAAgC;QAChC,4DAA4D;QAC5D,IAAI,mBAAmB,CAAC,OAAO,EAAE,CAAC;YAChC,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;QAC5C,CAAC;QACD,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,MAAM,gBAAgB,GAAG,yBAAyB,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QACjF,IAAI,OAAO,KAAK,UAAU,IAAI,gBAAgB,IAAI,CAAC,EAAE,CAAC;YACpD,UAAU,CAAC;gBACT,OAAO;gBACP,WAAW,EAAE,GAAG;aACjB,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,mBAAmB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5C,mFAAmF;gBACnF,oDAAoD;gBACpD,UAAU,CAAC;oBACT,OAAO;oBACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;iBACxB,CAAC,CAAC;YACL,CAAC,EAAE,gBAAgB,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IACD,IAAI,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;QACnC,OAAO,yCAAK,CAAC;IACf,CAAC;IACD,OAAO,oBAAC,UAAU,IAAC,cAAc,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;YACzE,4FAA4F;YAC5F,4DAA4D;YAC5D,UAAU,CAAC;gBACT,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;aACxB,CAAC,CAAC;YACH,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,CAAC,EAAE,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1C,oBAAC,aAAa,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACxD,CAAC;AAClB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { BannerMessage } from './BannerMessage';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\nconst BANNER_OVERWRITE_DELAY_MS = 3000;\n\n/** @private */\nexport interface TimestampedVariant {\n  variant: ComplianceBannerVariant;\n  // Milliseconds since epoch (i.e., return value of Date.now()).\n  lastUpdated: number;\n}\n\n/**\n * Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.\n *\n * This component delays and combines frequent updates to `variant` such that:\n * - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.\n * - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.\n *\n * This ensures that there is enough time for the user to see a banner message before it is overwritten.\n * In case of multiple delayed messages, the user always sees the final message as it reflects the final state\n * of recording and transcription.\n *\n * @private\n */\nexport function DelayedUpdateBanner(props: {\n  variant: TimestampedVariant;\n  onDismiss: () => void;\n  strings: _ComplianceBannerStrings;\n}): JSX.Element {\n  const {\n    variant,\n    lastUpdated: variantLastUpdated\n  } = props.variant;\n\n  // Tracks the variant that is currently visible in the UI.\n  const [visible, setVisible] = useState<TimestampedVariant>({\n    variant,\n    lastUpdated: Date.now()\n  });\n  const pendingUpdateHandle = useRef<ReturnType<typeof setTimeout> | null>(null);\n  if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {\n    // Always clear pending updates.\n    // We'll either update now, or schedule an update for later.\n    if (pendingUpdateHandle.current) {\n      clearTimeout(pendingUpdateHandle.current);\n    }\n    const now = Date.now();\n    const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);\n    if (variant === 'NO_STATE' || timeToNextUpdate <= 0) {\n      setVisible({\n        variant,\n        lastUpdated: now\n      });\n    } else {\n      pendingUpdateHandle.current = setTimeout(() => {\n        // Set the actual update time, not the computed time when the update should happen.\n        // The actual update might be later than we planned.\n        setVisible({\n          variant,\n          lastUpdated: Date.now()\n        });\n      }, timeToNextUpdate);\n    }\n  }\n  if (visible.variant === 'NO_STATE') {\n    return <></>;\n  }\n  return <MessageBar messageBarType={MessageBarType.warning} onDismiss={() => {\n    // when closing the banner, change variant to nostate and change stopped state to off state.\n    // Reason: on banner close, going back to the default state.\n    setVisible({\n      variant: 'NO_STATE',\n      lastUpdated: Date.now()\n    });\n    props.onDismiss();\n  }} dismissButtonAriaLabel={props.strings.close}>\n      <BannerMessage variant={visible.variant} strings={props.strings} />\n    </MessageBar>;\n}"]}
+{"version":3,"file":"DelayedUpdateBanner.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/DelayedUpdateBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,MAAM,yBAAyB,GAAG,IAAI,CAAC;AASvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAInC;IACC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC;IAEnE,0DAA0D;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB;QACzD,OAAO;QACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;KACxB,CAAC,CAAC;IACH,MAAM,mBAAmB,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAE/E,IAAI,OAAO,KAAK,OAAO,CAAC,OAAO,IAAI,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;QAC5E,gCAAgC;QAChC,4DAA4D;QAC5D,IAAI,mBAAmB,CAAC,OAAO,EAAE,CAAC;YAChC,YAAY,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;QAC5C,CAAC;QAED,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,MAAM,gBAAgB,GAAG,yBAAyB,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QACjF,IAAI,OAAO,KAAK,UAAU,IAAI,gBAAgB,IAAI,CAAC,EAAE,CAAC;YACpD,UAAU,CAAC;gBACT,OAAO;gBACP,WAAW,EAAE,GAAG;aACjB,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,mBAAmB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC5C,mFAAmF;gBACnF,oDAAoD;gBACpD,UAAU,CAAC;oBACT,OAAO;oBACP,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;iBACxB,CAAC,CAAC;YACL,CAAC,EAAE,gBAAgB,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,IAAI,OAAO,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;QACnC,OAAO,yCAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,oBAAC,UAAU,IACT,cAAc,EAAE,cAAc,CAAC,OAAO,EACtC,SAAS,EAAE,GAAG,EAAE;YACd,4FAA4F;YAC5F,4DAA4D;YAC5D,UAAU,CAAC;gBACT,OAAO,EAAE,UAAU;gBACnB,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE;aACxB,CAAC,CAAC;YACH,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,CAAC,EACD,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAE3C,oBAAC,aAAa,IAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACxD,CACd,CAAC;AACJ,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageBar, MessageBarType } from '@fluentui/react';\nimport React, { useRef, useState } from 'react';\nimport { BannerMessage } from './BannerMessage';\nimport { _ComplianceBannerStrings } from './types';\nimport { ComplianceBannerVariant } from './Utils';\n\nconst BANNER_OVERWRITE_DELAY_MS = 3000;\n\n/** @private */\nexport interface TimestampedVariant {\n  variant: ComplianceBannerVariant;\n  // Milliseconds since epoch (i.e., return value of Date.now()).\n  lastUpdated: number;\n}\n\n/**\n * Shows a {@link BannerMessage} in a {@link MessageBar} tracking `variant` internally.\n *\n * This component delays and combines frequent updates to `variant` such that:\n * - Updates that happen within {@link BANNER_OVERWRITE_DELAY_MS} are delayed.\n * - Once {@link BANNER_OVERWRITE_DELAY_MS} has passed since the last update, the _latest_ pending update is shown.\n *\n * This ensures that there is enough time for the user to see a banner message before it is overwritten.\n * In case of multiple delayed messages, the user always sees the final message as it reflects the final state\n * of recording and transcription.\n *\n * @private\n */\nexport function DelayedUpdateBanner(props: {\n  variant: TimestampedVariant;\n  onDismiss: () => void;\n  strings: _ComplianceBannerStrings;\n}): JSX.Element {\n  const { variant, lastUpdated: variantLastUpdated } = props.variant;\n\n  // Tracks the variant that is currently visible in the UI.\n  const [visible, setVisible] = useState<TimestampedVariant>({\n    variant,\n    lastUpdated: Date.now()\n  });\n  const pendingUpdateHandle = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  if (variant !== visible.variant && variantLastUpdated > visible.lastUpdated) {\n    // Always clear pending updates.\n    // We'll either update now, or schedule an update for later.\n    if (pendingUpdateHandle.current) {\n      clearTimeout(pendingUpdateHandle.current);\n    }\n\n    const now = Date.now();\n    const timeToNextUpdate = BANNER_OVERWRITE_DELAY_MS - (now - visible.lastUpdated);\n    if (variant === 'NO_STATE' || timeToNextUpdate <= 0) {\n      setVisible({\n        variant,\n        lastUpdated: now\n      });\n    } else {\n      pendingUpdateHandle.current = setTimeout(() => {\n        // Set the actual update time, not the computed time when the update should happen.\n        // The actual update might be later than we planned.\n        setVisible({\n          variant,\n          lastUpdated: Date.now()\n        });\n      }, timeToNextUpdate);\n    }\n  }\n\n  if (visible.variant === 'NO_STATE') {\n    return <></>;\n  }\n\n  return (\n    <MessageBar\n      messageBarType={MessageBarType.warning}\n      onDismiss={() => {\n        // when closing the banner, change variant to nostate and change stopped state to off state.\n        // Reason: on banner close, going back to the default state.\n        setVisible({\n          variant: 'NO_STATE',\n          lastUpdated: Date.now()\n        });\n        props.onDismiss();\n      }}\n      dismissButtonAriaLabel={props.strings.close}\n    >\n      <BannerMessage variant={visible.variant} strings={props.strings} />\n    </MessageBar>\n  );\n}\n"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/Utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/Utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAOlC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,eAAgC,EAAE,mBAAoC,EAA2B,EAAE;IAChI,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QAC7D,OAAO,qCAAqC,CAAC;IAC/C,CAAC;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,KAAK,EAAE,CAAC;QACrE,OAAO,mBAAmB,CAAC;IAC7B,CAAC;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QACrE,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;QACzE,OAAO,uCAAuC,CAAC;IACjD,CAAC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QACzE,OAAO,sCAAsC,CAAC;IAChD,CAAC;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;QAC1E,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,KAAK,EAAE,CAAC;QAC1E,OAAO,mBAAmB,CAAC;IAC7B,CAAC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;QAC9E,OAAO,qCAAqC,CAAC;IAC/C,CAAC;SAAM,CAAC;QACN,OAAO,UAAU,CAAC;IACpB,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @private\n */\nexport type ComplianceState = 'on' | 'off' | 'stopped';\n\n/**\n * Return different conditions based on the current and previous state of recording and transcribing\n *\n * @param callRecordState - The current call record state: on, off, stopped\n * @param callTranscribeState - The current call transcribe state: on, off, stopped\n *\n * @remarks - The stopped state means: previously on but currently off\n *\n * @private\n */\nexport const computeVariant = (callRecordState: ComplianceState, callTranscribeState: ComplianceState): ComplianceBannerVariant => {\n  if (callRecordState === 'on' && callTranscribeState === 'on') {\n    return 'RECORDING_AND_TRANSCRIPTION_STARTED';\n  } else if (callRecordState === 'on' && callTranscribeState === 'off') {\n    return 'RECORDING_STARTED';\n  } else if (callRecordState === 'off' && callTranscribeState === 'on') {\n    return 'TRANSCRIPTION_STARTED';\n  } else if (callRecordState === 'on' && callTranscribeState === 'stopped') {\n    return 'TRANSCRIPTION_STOPPED_STILL_RECORDING';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'on') {\n    return 'RECORDING_STOPPED_STILL_TRANSCRIBING';\n  } else if (callRecordState === 'off' && callTranscribeState === 'stopped') {\n    return 'TRANSCRIPTION_STOPPED';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'off') {\n    return 'RECORDING_STOPPED';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'stopped') {\n    return 'RECORDING_AND_TRANSCRIPTION_STOPPED';\n  } else {\n    return 'NO_STATE';\n  }\n};\n\n/**\n * @private\n */\nexport type ComplianceBannerVariant = 'NO_STATE' | 'TRANSCRIPTION_STOPPED_STILL_RECORDING' | 'RECORDING_STOPPED_STILL_TRANSCRIBING' | 'RECORDING_AND_TRANSCRIPTION_STOPPED' | 'RECORDING_AND_TRANSCRIPTION_STARTED' | 'TRANSCRIPTION_STARTED' | 'RECORDING_STOPPED' | 'RECORDING_STARTED' | 'TRANSCRIPTION_STOPPED';"]}
+{"version":3,"file":"Utils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/Utils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAOlC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,eAAgC,EAChC,mBAAoC,EACX,EAAE;IAC3B,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QAC7D,OAAO,qCAAqC,CAAC;IAC/C,CAAC;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,KAAK,EAAE,CAAC;QACrE,OAAO,mBAAmB,CAAC;IAC7B,CAAC;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QACrE,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,eAAe,KAAK,IAAI,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;QACzE,OAAO,uCAAuC,CAAC;IACjD,CAAC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QACzE,OAAO,sCAAsC,CAAC;IAChD,CAAC;SAAM,IAAI,eAAe,KAAK,KAAK,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;QAC1E,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,KAAK,EAAE,CAAC;QAC1E,OAAO,mBAAmB,CAAC;IAC7B,CAAC;SAAM,IAAI,eAAe,KAAK,SAAS,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;QAC9E,OAAO,qCAAqC,CAAC;IAC/C,CAAC;SAAM,CAAC;QACN,OAAO,UAAU,CAAC;IACpB,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * @private\n */\nexport type ComplianceState = 'on' | 'off' | 'stopped';\n\n/**\n * Return different conditions based on the current and previous state of recording and transcribing\n *\n * @param callRecordState - The current call record state: on, off, stopped\n * @param callTranscribeState - The current call transcribe state: on, off, stopped\n *\n * @remarks - The stopped state means: previously on but currently off\n *\n * @private\n */\nexport const computeVariant = (\n  callRecordState: ComplianceState,\n  callTranscribeState: ComplianceState\n): ComplianceBannerVariant => {\n  if (callRecordState === 'on' && callTranscribeState === 'on') {\n    return 'RECORDING_AND_TRANSCRIPTION_STARTED';\n  } else if (callRecordState === 'on' && callTranscribeState === 'off') {\n    return 'RECORDING_STARTED';\n  } else if (callRecordState === 'off' && callTranscribeState === 'on') {\n    return 'TRANSCRIPTION_STARTED';\n  } else if (callRecordState === 'on' && callTranscribeState === 'stopped') {\n    return 'TRANSCRIPTION_STOPPED_STILL_RECORDING';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'on') {\n    return 'RECORDING_STOPPED_STILL_TRANSCRIBING';\n  } else if (callRecordState === 'off' && callTranscribeState === 'stopped') {\n    return 'TRANSCRIPTION_STOPPED';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'off') {\n    return 'RECORDING_STOPPED';\n  } else if (callRecordState === 'stopped' && callTranscribeState === 'stopped') {\n    return 'RECORDING_AND_TRANSCRIPTION_STOPPED';\n  } else {\n    return 'NO_STATE';\n  }\n};\n\n/**\n * @private\n */\nexport type ComplianceBannerVariant =\n  | 'NO_STATE'\n  | 'TRANSCRIPTION_STOPPED_STILL_RECORDING'\n  | 'RECORDING_STOPPED_STILL_TRANSCRIBING'\n  | 'RECORDING_AND_TRANSCRIPTION_STOPPED'\n  | 'RECORDING_AND_TRANSCRIPTION_STARTED'\n  | 'TRANSCRIPTION_STARTED'\n  | 'RECORDING_STOPPED'\n  | 'RECORDING_STARTED'\n  | 'TRANSCRIPTION_STOPPED';\n"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/index.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './types';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/index.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport { _ComplianceBanner } from './ComplianceBanner';\nexport type { _ComplianceBannerProps, _ComplianceBannerStrings } from './types';\n"]}

package/dist/dist-esm/react-components/src/components/ComplianceBanner/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ComplianceBanner/types.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Subset of `CallCompositeStrings` needed by the ComplianceBanner component.\n * @internal\n */\nexport interface _ComplianceBannerStrings {\n  close: string;\n  complianceBannerNowOnlyRecording: string;\n  complianceBannerNowOnlyTranscription: string;\n  complianceBannerRecordingAndTranscriptionSaved: string;\n  complianceBannerRecordingAndTranscriptionStarted: string;\n  complianceBannerRecordingAndTranscriptionStopped: string;\n  complianceBannerRecordingSaving: string;\n  complianceBannerRecordingStarted: string;\n  complianceBannerRecordingStopped: string;\n  complianceBannerTranscriptionConsent: string;\n  complianceBannerTranscriptionSaving: string;\n  complianceBannerTranscriptionStarted: string;\n  complianceBannerTranscriptionStopped: string;\n  learnMore: string;\n  privacyPolicy: string;\n}\n\n/**\n * @internal\n */\nexport type _ComplianceBannerProps = {\n  callTranscribeState?: boolean;\n  callRecordState?: boolean;\n  strings: _ComplianceBannerStrings;\n};"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ComplianceBanner/types.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Subset of `CallCompositeStrings` needed by the ComplianceBanner component.\n * @internal\n */\nexport interface _ComplianceBannerStrings {\n  close: string;\n  complianceBannerNowOnlyRecording: string;\n  complianceBannerNowOnlyTranscription: string;\n  complianceBannerRecordingAndTranscriptionSaved: string;\n  complianceBannerRecordingAndTranscriptionStarted: string;\n  complianceBannerRecordingAndTranscriptionStopped: string;\n  complianceBannerRecordingSaving: string;\n  complianceBannerRecordingStarted: string;\n  complianceBannerRecordingStopped: string;\n  complianceBannerTranscriptionConsent: string;\n  complianceBannerTranscriptionSaving: string;\n  complianceBannerTranscriptionStarted: string;\n  complianceBannerTranscriptionStopped: string;\n  learnMore: string;\n  privacyPolicy: string;\n}\n\n/**\n * @internal\n */\nexport type _ComplianceBannerProps = {\n  callTranscribeState?: boolean;\n  callRecordState?: boolean;\n  strings: _ComplianceBannerStrings;\n};\n"]}

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

@@ -5,11 +5,7 @@ import React, { useMemo } from 'react';
 import { controlBarStyles } from './styles/ControlBar.styles';
 import { useTheme } from '../theming';
 import { isDarkThemed } from '../theming/themeUtils';
-const mainDivStyle = {
-    position: 'relative',
-    height: '100%',
-    width: '100%'
-};
+const mainDivStyle = { position: 'relative', height: '100%', width: '100%' };
 /**
  * A container for various buttons for call controls.
  *
@@ -27,18 +23,18 @@ export const ControlBar = (props) => {
         const backgroundStyle = {
             background: isDarkThemed(theme) && (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating')) ? theme.palette.neutralQuaternaryAlt : theme.palette.white
         };
-        const borderAndBoxShadowStyle = (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating')) ? {
-            boxShadow: theme.effects.elevation16,
-            borderRadius: theme.effects.roundedCorner6
-        } : {};
+        const borderAndBoxShadowStyle = (layout === null || layout === void 0 ? void 0 : layout.startsWith('floating'))
+            ? {
+                boxShadow: theme.effects.elevation16,
+                borderRadius: theme.effects.roundedCorner6
+            }
+            : {};
         // if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property
         // to translate 50% to right instead of the left
-        const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? {
-            transform: 'translateX(50%)'
-        } : {};
+        const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? { transform: 'translateX(50%)' } : {};
         return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     }, [layout, styles === null || styles === void 0 ? void 0 : styles.root, theme]);
-    return React.createElement("div", { className: mergeStyles(mainDivStyle) },
-        React.createElement(Stack, { className: controlBarClassName }, props.children));
+    return (React.createElement("div", { className: mergeStyles(mainDivStyle) },
+        React.createElement(Stack, { className: controlBarClassName }, props.children)));
 };
 //# sourceMappingURL=ControlBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBar.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,MAAM,YAAY,GAAW;IAC3B,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;CACd,CAAC;AAmCF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EACJ,MAAM,EACN,MAAM,EACP,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,YAAY,CAAC,CAAC;QACjE,iIAAiI;QACjI,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,YAAY,CAAC,KAAK,CAAC,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,CAAA,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;SAC7H,CAAC;QACF,MAAM,uBAAuB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,EAAC,CAAC,CAAC;YAC/D,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;YACpC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SAC3C,CAAC,CAAC,CAAC,EAAE,CAAC;QACP,0HAA0H;QAC1H,gDAAgD;QAChD,MAAM,sBAAsB,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,aAAa,IAAI,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC;YACtG,SAAS,EAAE,iBAAiB;SAC7B,CAAC,CAAC,CAAC,EAAE,CAAC;QACP,OAAO,WAAW,CAAC,eAAe,EAAE,eAAe,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IACtH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAClC,OAAO,6BAAK,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;QAC5C,oBAAC,KAAK,IAAC,SAAS,EAAE,mBAAmB,IAAG,KAAK,CAAC,QAAQ,CAAS,CAC3D,CAAC;AACX,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { controlBarStyles } from './styles/ControlBar.styles';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nconst mainDivStyle: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/**\n * Present layouts for the {@link ControlBar}.\n *\n * @public\n */\nexport type ControlBarLayout = 'horizontal' | 'vertical' | 'dockedTop' | 'dockedBottom' | 'dockedLeft' | 'dockedRight' | 'floatingTop' | 'floatingBottom' | 'floatingLeft' | 'floatingRight';\n\n/**\n * Props for {@link ControlBar}.\n *\n * @public\n */\nexport interface ControlBarProps {\n  /** React Child components. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ControlBar styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Changes the layout of the control bar.\n   * Available layouts are `horizontal`, `vertical`, `dockedTop`, `dockedBottom`,\n   * `dockedLeft`, `dockedRight`, `floatingTop`, `floatingBottom`, `floatingLeft`,\n   * `floatingRight`\n   * Defaults to a `horizontal` layout.\n   */\n  layout?: ControlBarLayout;\n}\n\n/**\n * A container for various buttons for call controls.\n *\n * Use with various call control buttons in this library, e.g., {@link CameraButton}, or your own instances of\n * {@link ControlBarButton} directly.\n *\n * @public\n */\nexport const ControlBar = (props: ControlBarProps): JSX.Element => {\n  const {\n    styles,\n    layout\n  } = props;\n  const theme = useTheme();\n  const controlBarClassName = useMemo(() => {\n    const controlBarStyle = controlBarStyles[layout ?? 'horizontal'];\n    // if theme is dark and layout is floating then use palette.neutralQuaternaryAlt as background, otherwise use theme.palette.white\n    const backgroundStyle = {\n      background: isDarkThemed(theme) && layout?.startsWith('floating') ? theme.palette.neutralQuaternaryAlt : theme.palette.white\n    };\n    const borderAndBoxShadowStyle = layout?.startsWith('floating') ? {\n      boxShadow: theme.effects.elevation16,\n      borderRadius: theme.effects.roundedCorner6\n    } : {};\n    // if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property\n    // to translate 50% to right instead of the left\n    const transformOverrideStyle = theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? {\n      transform: 'translateX(50%)'\n    } : {};\n    return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles?.root);\n  }, [layout, styles?.root, theme]);\n  return <div className={mergeStyles(mainDivStyle)}>\n      <Stack className={controlBarClassName}>{props.children}</Stack>\n    </div>;\n};"]}
+{"version":3,"file":"ControlBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAU,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,YAAY,GAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AA6CrF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAe,EAAE;IAChE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,YAAY,CAAC,CAAC;QACjE,iIAAiI;QACjI,MAAM,eAAe,GAAG;YACtB,UAAU,EACR,YAAY,CAAC,KAAK,CAAC,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC,CAAA,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;SACnH,CAAC;QACF,MAAM,uBAAuB,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,CAAC;YAC5D,CAAC,CAAC;gBACE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW;gBACpC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aAC3C;YACH,CAAC,CAAC,EAAE,CAAC;QACP,0HAA0H;QAC1H,gDAAgD;QAChD,MAAM,sBAAsB,GAC1B,KAAK,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,aAAa,IAAI,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACjH,OAAO,WAAW,CAAC,eAAe,EAAE,eAAe,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;IACtH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAClC,OAAO,CACL,6BAAK,SAAS,EAAE,WAAW,CAAC,YAAY,CAAC;QACvC,oBAAC,KAAK,IAAC,SAAS,EAAE,mBAAmB,IAAG,KAAK,CAAC,QAAQ,CAAS,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle, mergeStyles, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { BaseCustomStyles } from '../types';\nimport { controlBarStyles } from './styles/ControlBar.styles';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\n\nconst mainDivStyle: IStyle = { position: 'relative', height: '100%', width: '100%' };\n\n/**\n * Present layouts for the {@link ControlBar}.\n *\n * @public\n */\nexport type ControlBarLayout =\n  | 'horizontal'\n  | 'vertical'\n  | 'dockedTop'\n  | 'dockedBottom'\n  | 'dockedLeft'\n  | 'dockedRight'\n  | 'floatingTop'\n  | 'floatingBottom'\n  | 'floatingLeft'\n  | 'floatingRight';\n\n/**\n * Props for {@link ControlBar}.\n *\n * @public\n */\nexport interface ControlBarProps {\n  /** React Child components. */\n  children?: React.ReactNode;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <ControlBar styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Changes the layout of the control bar.\n   * Available layouts are `horizontal`, `vertical`, `dockedTop`, `dockedBottom`,\n   * `dockedLeft`, `dockedRight`, `floatingTop`, `floatingBottom`, `floatingLeft`,\n   * `floatingRight`\n   * Defaults to a `horizontal` layout.\n   */\n  layout?: ControlBarLayout;\n}\n\n/**\n * A container for various buttons for call controls.\n *\n * Use with various call control buttons in this library, e.g., {@link CameraButton}, or your own instances of\n * {@link ControlBarButton} directly.\n *\n * @public\n */\nexport const ControlBar = (props: ControlBarProps): JSX.Element => {\n  const { styles, layout } = props;\n  const theme = useTheme();\n  const controlBarClassName = useMemo(() => {\n    const controlBarStyle = controlBarStyles[layout ?? 'horizontal'];\n    // if theme is dark and layout is floating then use palette.neutralQuaternaryAlt as background, otherwise use theme.palette.white\n    const backgroundStyle = {\n      background:\n        isDarkThemed(theme) && layout?.startsWith('floating') ? theme.palette.neutralQuaternaryAlt : theme.palette.white\n    };\n    const borderAndBoxShadowStyle = layout?.startsWith('floating')\n      ? {\n          boxShadow: theme.effects.elevation16,\n          borderRadius: theme.effects.roundedCorner6\n        }\n      : {};\n    // if rtl is true and layout is either floatingTop or floatingBottom then we need to override the transform-style property\n    // to translate 50% to right instead of the left\n    const transformOverrideStyle =\n      theme.rtl && (layout === 'floatingTop' || layout === 'floatingBottom') ? { transform: 'translateX(50%)' } : {};\n    return mergeStyles(controlBarStyle, backgroundStyle, borderAndBoxShadowStyle, transformOverrideStyle, styles?.root);\n  }, [layout, styles?.root, theme]);\n  return (\n    <div className={mergeStyles(mainDivStyle)}>\n      <Stack className={controlBarClassName}>{props.children}</Stack>\n    </div>\n  );\n};\n"]}

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

@@ -5,7 +5,13 @@ import { DefaultButton, concatStyleSets, KeyCodes } from '@fluentui/react';
 import { controlButtonStyles } from './styles/ControlBar.styles';
 import { ControlButtonTooltip } from './ControlButtonTooltip';
 const DefaultRenderIcon = (props) => {
-    return (props === null || props === void 0 ? void 0 : props.checked) ? (props === null || props === void 0 ? void 0 : props.onRenderOnIcon) ? props === null || props === void 0 ? void 0 : props.onRenderOnIcon() : null : (props === null || props === void 0 ? void 0 : props.onRenderOffIcon) ? props === null || props === void 0 ? void 0 : props.onRenderOffIcon() : null;
+    return (props === null || props === void 0 ? void 0 : props.checked)
+        ? (props === null || props === void 0 ? void 0 : props.onRenderOnIcon)
+            ? props === null || props === void 0 ? void 0 : props.onRenderOnIcon()
+            : null
+        : (props === null || props === void 0 ? void 0 : props.onRenderOffIcon)
+            ? props === null || props === void 0 ? void 0 : props.onRenderOffIcon()
+            : null;
 };
 /**
  * Default button styled for the {@link ControlBar}.
@@ -18,9 +24,13 @@ export const ControlBarButton = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const componentStyles = concatStyleSets(controlButtonStyles, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     const labelText = (_d = (_b = props === null || props === void 0 ? void 0 : props.text) !== null && _b !== void 0 ? _b : (_c = props === null || props === void 0 ? void 0 : props.strings) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : ((props === null || props === void 0 ? void 0 : props.checked) ? (_e = props === null || props === void 0 ? void 0 : props.strings) === null || _e === void 0 ? void 0 : _e.onLabel : (_f = props === null || props === void 0 ? void 0 : props.strings) === null || _f === void 0 ? void 0 : _f.offLabel);
-    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled) ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent : (props === null || props === void 0 ? void 0 : props.checked) ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
+    const tooltipContent = (_h = (_g = props === null || props === void 0 ? void 0 : props.strings) === null || _g === void 0 ? void 0 : _g.tooltipContent) !== null && _h !== void 0 ? _h : ((props === null || props === void 0 ? void 0 : props.disabled)
+        ? (_j = props === null || props === void 0 ? void 0 : props.strings) === null || _j === void 0 ? void 0 : _j.tooltipDisabledContent
+        : (props === null || props === void 0 ? void 0 : props.checked)
+            ? (_k = props === null || props === void 0 ? void 0 : props.strings) === null || _k === void 0 ? void 0 : _k.tooltipOnContent
+            : (_l = props === null || props === void 0 ? void 0 : props.strings) === null || _l === void 0 ? void 0 : _l.tooltipOffContent);
     const tooltipId = ((_m = props.tooltipId) !== null && _m !== void 0 ? _m : props.labelKey) ? props.labelKey + '-tooltip' : undefined;
-    return React.createElement(ControlButtonTooltip, { hidden: props.disableTooltip, content: tooltipContent, id: tooltipId },
-        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : labelText) !== null && _r !== void 0 ? _r : tooltipContent, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, "aria-describedby": tooltipId, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null)));
+    return (React.createElement(ControlButtonTooltip, { hidden: props.disableTooltip, content: tooltipContent, id: tooltipId },
+        React.createElement(DefaultButton, Object.assign({}, props, { styles: componentStyles, onRenderText: props.showLabel && props.onRenderText ? props.onRenderText : undefined, onRenderIcon: (_o = props.onRenderIcon) !== null && _o !== void 0 ? _o : DefaultRenderIcon, ariaLabel: (_r = (_q = (_p = props.splitButtonAriaLabel) !== null && _p !== void 0 ? _p : props.ariaLabel) !== null && _q !== void 0 ? _q : labelText) !== null && _r !== void 0 ? _r : tooltipContent, allowDisabledFocus: (_s = props.allowDisabledFocus) !== null && _s !== void 0 ? _s : true, "aria-describedby": tooltipId, menuTriggerKeyCode: KeyCodes.down, text: undefined }), props.showLabel ? labelText : React.createElement(React.Fragment, null))));
 };
 //# sourceMappingURL=ControlBarButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { DefaultButton, IButtonProps, IRenderFunction, concatStyleSets, IButtonStyles, KeyCodes } from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Disable tooltip.\n   *\n   * @defaultValue 'false'\n   */\n  disableTooltip?: boolean;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked ? props?.onRenderOnIcon ? props?.onRenderOnIcon() : null : props?.onRenderOffIcon ? props?.onRenderOffIcon() : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n  const labelText = props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n  const tooltipContent = props?.strings?.tooltipContent ?? (props?.disabled ? props?.strings?.tooltipDisabledContent : props?.checked ? props?.strings?.tooltipOnContent : props?.strings?.tooltipOffContent);\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n  return <ControlButtonTooltip hidden={props.disableTooltip} content={tooltipContent} id={tooltipId}>\n      <DefaultButton {...props} styles={componentStyles} onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined} onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon} ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? labelText ?? tooltipContent} allowDisabledFocus={props.allowDisabledFocus ?? true} aria-describedby={tooltipId} menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n    text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n    >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>;\n};"]}
+{"version":3,"file":"ControlBarButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ControlBarButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,aAAa,EAGb,eAAe,EAEf,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAkG9D,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAsB,EAAE;IAC9E,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO;QACnB,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc;YACrB,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE;YACzB,CAAC,CAAC,IAAI;QACR,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe;YACtB,CAAC,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE;YAC1B,CAAC,CAAC,IAAI,CAAC;AACb,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;;IAC5E,MAAM,eAAe,GAAG,eAAe,CAAC,mBAAmB,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAC;IAEjF,MAAM,SAAS,GACb,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,KAAK,mCAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,EAAC,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,OAAO,CAAC,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ,CAAC,CAAC;IAEhH,MAAM,cAAc,GAClB,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,cAAc,mCAC9B,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ;QACd,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,sBAAsB;QACxC,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO;YACd,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,gBAAgB;YAClC,CAAC,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,iBAAiB,CAAC,CAAC;IAE3C,MAAM,SAAS,GAAG,CAAA,MAAA,KAAK,CAAC,SAAS,mCAAI,KAAK,CAAC,QAAQ,EAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9F,OAAO,CACL,oBAAC,oBAAoB,IAAC,MAAM,EAAE,KAAK,CAAC,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,SAAS;QACxF,oBAAC,aAAa,oBACR,KAAK,IACT,MAAM,EAAE,eAAe,EACvB,YAAY,EAAE,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACpF,YAAY,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,iBAAiB,EACrD,SAAS,EAAE,MAAA,MAAA,MAAA,KAAK,CAAC,oBAAoB,mCAAI,KAAK,CAAC,SAAS,mCAAI,SAAS,mCAAI,cAAc,EACvF,kBAAkB,EAAE,MAAA,KAAK,CAAC,kBAAkB,mCAAI,IAAI,sBAClC,SAAS,EAC3B,kBAAkB,EAAE,QAAQ,CAAC,IAAI,EACjC,IAAI,EAAE,SAAS,KAEd,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,yCAAK,CACtB,CACK,CACxB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  DefaultButton,\n  IButtonProps,\n  IRenderFunction,\n  concatStyleSets,\n  IButtonStyles,\n  KeyCodes\n} from '@fluentui/react';\nimport { controlButtonStyles } from './styles/ControlBar.styles';\nimport { ControlButtonTooltip } from './ControlButtonTooltip';\n\n/**\n * Strings of {@link ControlBarButton} that can be overridden.\n *\n * @public\n */\nexport interface ControlBarButtonStrings {\n  /**\n   * Label of the button. This supersedes onLabel or offLabel if used.\n   */\n  label?: string;\n  /**\n   * Label of the button shown when the button is checked.\n   */\n  onLabel?: string;\n  /**\n   * Label of the button shown when the button is not checked.\n   */\n  offLabel?: string;\n  /**\n   * Tooltip content of the button. This supersedes tooltipDisabledContent, tooltipOnContent and tooltipOffContent if used.\n   */\n  tooltipContent?: string;\n  /**\n   * Tooltip content when the button is disabled.\n   */\n  tooltipDisabledContent?: string;\n  /**\n   * Tooltip content when the button is in the checked state.\n   */\n  tooltipOnContent?: string;\n  /**\n   * Tooltip content when the button is in the unchecked state.\n   */\n  tooltipOffContent?: string;\n}\n\n/**\n * Styles for all {@link ControlBarButton} implementations.\n *\n * @public\n */\nexport type ControlBarButtonStyles = IButtonStyles;\n\n/**\n * Props for {@link ControlBarButton}.\n *\n * @public\n */\nexport interface ControlBarButtonProps extends IButtonProps {\n  /**\n   * Whether the label is displayed or not.\n   *\n   * @defaultValue `false`\n   */\n  showLabel?: boolean;\n\n  /**\n   * Key to use for the Label component\n   */\n  labelKey?: string;\n\n  /**\n   * Disable tooltip.\n   *\n   * @defaultValue 'false'\n   */\n  disableTooltip?: boolean;\n\n  /**\n   * Id to use for the tooltip host.\n   *\n   * @defaultValue This uses the labelKey and appends -tooltip by default\n   */\n  tooltipId?: string;\n\n  /**\n   * Optional strings to override in component.\n   */\n  strings?: ControlBarButtonStrings;\n\n  /**\n   * Icon to render when the button is checked.\n   */\n  onRenderOnIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Icon to render when the button is not checked.\n   */\n  onRenderOffIcon?: IRenderFunction<IButtonProps>;\n\n  /**\n   * Fluent styles, including extensions common to all {@link ControlBarButton}s.\n   */\n  styles?: ControlBarButtonStyles;\n}\n\nconst DefaultRenderIcon = (props?: ControlBarButtonProps): JSX.Element | null => {\n  return props?.checked\n    ? props?.onRenderOnIcon\n      ? props?.onRenderOnIcon()\n      : null\n    : props?.onRenderOffIcon\n      ? props?.onRenderOffIcon()\n      : null;\n};\n\n/**\n * Default button styled for the {@link ControlBar}.\n *\n * Use this component create custom buttons that are styled the same as other buttons provided by the UI Library.\n *\n * @public\n */\nexport const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {\n  const componentStyles = concatStyleSets(controlButtonStyles, props.styles ?? {});\n\n  const labelText =\n    props?.text ?? props?.strings?.label ?? (props?.checked ? props?.strings?.onLabel : props?.strings?.offLabel);\n\n  const tooltipContent =\n    props?.strings?.tooltipContent ??\n    (props?.disabled\n      ? props?.strings?.tooltipDisabledContent\n      : props?.checked\n        ? props?.strings?.tooltipOnContent\n        : props?.strings?.tooltipOffContent);\n\n  const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;\n\n  return (\n    <ControlButtonTooltip hidden={props.disableTooltip} content={tooltipContent} id={tooltipId}>\n      <DefaultButton\n        {...props}\n        styles={componentStyles}\n        onRenderText={props.showLabel && props.onRenderText ? props.onRenderText : undefined}\n        onRenderIcon={props.onRenderIcon ?? DefaultRenderIcon}\n        ariaLabel={props.splitButtonAriaLabel ?? props.ariaLabel ?? labelText ?? tooltipContent}\n        allowDisabledFocus={props.allowDisabledFocus ?? true}\n        aria-describedby={tooltipId}\n        menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.\n        text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.\n      >\n        {props.showLabel ? labelText : <></>}\n      </DefaultButton>\n    </ControlButtonTooltip>\n  );\n};\n"]}

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.
  *
@@ -19,22 +15,15 @@ const hostStyles = {
 export const ControlButtonTooltip = (props) => {
     const theme = useTheme();
     const calloutStyle = {
-        root: {
-            padding: 0
-        },
-        calloutMain: {
-            padding: '0.5rem'
-        },
-        beakCurtain: {
-            marginBottom: '-1rem',
-            backgroundColor: 'transparent'
-        }
+        root: { padding: 0 },
+        calloutMain: { padding: '0.5rem' },
+        beakCurtain: { marginBottom: '-1rem', backgroundColor: 'transparent' }
     };
     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;QACD,WAAW,EAAE;YACX,YAAY,EAAE,OAAO;YACrB,eAAe,EAAE,aAAa;SAC/B;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    beakCurtain: {\n      marginBottom: '-1rem',\n      backgroundColor: 'transparent'\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;QACnD,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;QACpB,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,WAAW,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE;KACvE,CAAC;IAEF,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> = {\n    root: { padding: 0 },\n    calloutMain: { padding: '0.5rem' },\n    beakCurtain: { marginBottom: '-1rem', backgroundColor: 'transparent' }\n  };\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.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { IButtonStyles, ILinkStyles } from '@fluentui/react';
+import { BaseCustomStyles } from '../../types';
+/**
+ * @beta
+ * Props for BrowserPermissionDenied component.
+ */
+export interface BrowserPermissionDeniedProps {
+    /**
+     * Action to be taken by the more help link. Possible to send to external page or show other modal.
+     */
+    onTroubleshootingClick?: () => void;
+    /**
+     * Action to be taken by the try again primary button.
+     */
+    onTryAgainClick?: () => void;
+    /**
+     * Localization strings for BrowserPermissionDenied component.
+     */
+    strings?: BrowserPermissionDeniedStrings;
+    /**
+     * Allows users to pass in an object contains custom CSS styles.
+     * @Example
+     * ```
+     * <BrowserPermissionDenied styles={{ primaryButton: { root: {backgroundColor: 'blue' }}}} />
+     * ```
+     */
+    styles?: BrowserPermissionDeniedStyles;
+}
+/**
+ * @beta
+ * Strings for BrowserPermissionDenied component
+ */
+export interface BrowserPermissionDeniedStrings {
+    /**
+     * Main button text string.
+     */
+    primaryButtonText: string;
+    /**
+     * Main text string.
+     */
+    primaryText: string;
+    /**
+     * Subtext string.
+     */
+    secondaryText: string;
+    /**
+     * More help link string.
+     */
+    linkText: string;
+}
+/**
+ * Fluent styles for {@link BrowserPermissionDenied}.
+ *
+ * @beta
+ */
+export interface BrowserPermissionDeniedStyles extends BaseCustomStyles {
+    /** Styles for the primary button. */
+    primaryButton?: IButtonStyles;
+    /** Styles for the help troubleshooting link text. */
+    troubleshootingLink?: ILinkStyles;
+}
+/**
+ * @beta
+ *
+ * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
+ */
+export declare const BrowserPermissionDenied: (props: BrowserPermissionDeniedProps) => JSX.Element;
+//# sourceMappingURL=BrowserPermissionDenied.d.ts.map

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

@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { Stack, Text, Link, Icon, PrimaryButton, mergeStyleSets } from '@fluentui/react';
+/* @conditional-compile-remove(call-readiness) */
+import { useLocale } from '../../localization';
+/* @conditional-compile-remove(call-readiness) */
+import { iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';
+/* @conditional-compile-remove(call-readiness) */
+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' },
+            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)))));
+};
+/**
+ * @beta
+ *
+ * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
+ */
+export const BrowserPermissionDenied = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
+    const locale = useLocale().strings.BrowserPermissionDenied;
+    /* @conditional-compile-remove(call-readiness) */
+    return React.createElement(BrowserPermissionDeniedContainer, Object.assign({}, props, { strings: props.strings ? props.strings : locale }));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=BrowserPermissionDenied.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="react" />
+import { BrowserPermissionDeniedProps, BrowserPermissionDeniedStrings } from './BrowserPermissionDenied';
+/**
+ * @beta
+ * Props for BrowserPermissionDeniedIOS component.
+ */
+export interface BrowserPermissionDeniedIOSProps extends BrowserPermissionDeniedProps {
+    /**
+     * Localization strings for BrowserPermissionDeniedIOS component.
+     */
+    strings?: BrowserPermissionDeniedIOSStrings;
+    /**
+     * Link to image source.
+     *
+     * Image is inserted into the top of the component.
+     */
+    imageSource?: string;
+}
+/**
+ * @beta
+ * Strings for BrowserPermissionDeniedIOS component
+ */
+export interface BrowserPermissionDeniedIOSStrings extends BrowserPermissionDeniedStrings {
+    /**
+     * Image alt text
+     */
+    imageAltText: string;
+    /**
+     * Main text string.
+     */
+    primaryText: string;
+    /**
+     * Subtext string.
+     */
+    secondaryText: string;
+    /**
+     * Step 1 string
+     */
+    step1Text: string;
+    /**
+     * Step 1 digit string
+     */
+    step1DigitText: string;
+    /**
+     * Step 2 string
+     */
+    step2Text: string;
+    /**
+     * Step 2 digit string
+     */
+    step2DigitText: string;
+    /**
+     * Step 3 string
+     */
+    step3Text: string;
+    /**
+     * Step 3 digit string
+     */
+    step3DigitText: string;
+    /**
+     * Step 4 string
+     */
+    step4Text: string;
+    /**
+     * Step 4 digit string
+     */
+    step4DigitText: string;
+}
+/**
+ * @beta
+ *
+ * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
+ */
+export declare const BrowserPermissionDeniedIOS: (props: BrowserPermissionDeniedIOSProps) => JSX.Element;
+//# sourceMappingURL=BrowserPermissionDeniedIOS.d.ts.map

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

@@ -0,0 +1,58 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { useMemo } from 'react';
+/* @conditional-compile-remove(call-readiness) */
+import { Stack, Text, Link, PrimaryButton, mergeStyleSets, useTheme, Image, ImageFit } from '@fluentui/react';
+/* @conditional-compile-remove(call-readiness) */
+import { useLocale } from '../../localization';
+/* @conditional-compile-remove(call-readiness) */
+import { browserPermissionContainerStyles, iOSImageContainer, iOSStepsCircleStyles, iOSStepsContainerStyles, iOSStepsDigitTextStyles, iOSStepsTextStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';
+/* @conditional-compile-remove(call-readiness) */
+import { isValidString } from '../utils';
+/* @conditional-compile-remove(call-readiness) */
+const BrowserPermissionDeniedIOSContainer = (props) => {
+    const { imageSource, onTroubleshootingClick, onTryAgainClick, strings, styles } = props;
+    const theme = useTheme();
+    const stepsCircleStyle = useMemo(() => {
+        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' } },
+            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 },
+                    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(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(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(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))))));
+};
+/**
+ * @beta
+ *
+ * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
+ */
+export const BrowserPermissionDeniedIOS = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
+    const locale = useLocale().strings.BrowserPermissionDeniedIOS;
+    /* @conditional-compile-remove(call-readiness) */
+    return React.createElement(BrowserPermissionDeniedIOSContainer, Object.assign({}, props, { strings: props.strings ? props.strings : locale }));
+    return React.createElement(React.Fragment, null);
+};
+//# sourceMappingURL=BrowserPermissionDeniedIOS.js.map

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

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