diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.ButtonOrder.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.ButtonOrder.Example.tsx
new file mode 100644
index 0000000000000..7de3eddadbeab
--- /dev/null
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.ButtonOrder.Example.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Shadow } from './ShadowHelper';
+import { TeachingBubbleButtonOrderExample } from '../TeachingBubble/TeachingBubble.ButtonOrder.Example';
+
+export const ShadowDOMTeachingBubbleButtonOrderExample: React.FunctionComponent = () => {
+  return (
+    <Shadow>
+      <TeachingBubbleButtonOrderExample />
+    </Shadow>
+  );
+};
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Condensed.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Condensed.Example.tsx
new file mode 100644
index 0000000000000..c18733f9fa47b
--- /dev/null
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Condensed.Example.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Shadow } from './ShadowHelper';
+import { TeachingBubbleCondensedExample } from '../TeachingBubble/TeachingBubble.Condensed.Example';
+
+export const ShadowDOMTeachingBubbleCondensedExample: React.FunctionComponent = () => {
+  return (
+    <Shadow>
+      <TeachingBubbleCondensedExample />
+    </Shadow>
+  );
+};
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Illustration.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Illustration.Example.tsx
new file mode 100644
index 0000000000000..02e00913b81d6
--- /dev/null
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Illustration.Example.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Shadow } from './ShadowHelper';
+import { TeachingBubbleIllustrationExample } from '../TeachingBubble/TeachingBubble.Illustration.Example';
+
+export const ShadowDOMTeachingBubbleIllustrationExample: React.FunctionComponent = () => {
+  return (
+    <Shadow>
+      <TeachingBubbleIllustrationExample />
+    </Shadow>
+  );
+};
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.MultiStep.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.MultiStep.Example.tsx
new file mode 100644
index 0000000000000..02563f559ba77
--- /dev/null
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.MultiStep.Example.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Shadow } from './ShadowHelper';
+import { TeachingBubbleMultiStepExample } from '../TeachingBubble/TeachingBubble.MultiStep.Example';
+
+export const ShadowDOMTeachingBubbleMultiStepExample: React.FunctionComponent = () => {
+  return (
+    <Shadow>
+      <TeachingBubbleMultiStepExample />
+    </Shadow>
+  );
+};
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.SmallHeadline.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.SmallHeadline.Example.tsx
new file mode 100644
index 0000000000000..aab31133a2e27
--- /dev/null
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.SmallHeadline.Example.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Shadow } from './ShadowHelper';
+import { TeachingBubbleSmallHeadlineExample } from '../TeachingBubble/TeachingBubble.SmallHeadline.Example';
+
+export const ShadowDOMTeachingBubbleSmallHeadlineExample: React.FunctionComponent = () => {
+  return (
+    <Shadow>
+      <TeachingBubbleSmallHeadlineExample />
+    </Shadow>
+  );
+};
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Wide.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Wide.Example.tsx
new file mode 100644
index 0000000000000..46aba3387b370
--- /dev/null
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Wide.Example.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Shadow } from './ShadowHelper';
+import { TeachingBubbleWideExample } from '../TeachingBubble/TeachingBubble.Wide.Example';
+
+export const ShadowDOMTeachingBubbleWideExample: React.FunctionComponent = () => {
+  return (
+    <Shadow>
+      <TeachingBubbleWideExample />
+    </Shadow>
+  );
+};
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.WideIllustration.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.WideIllustration.Example.tsx
new file mode 100644
index 0000000000000..262d81a154e2f
--- /dev/null
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.WideIllustration.Example.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Shadow } from './ShadowHelper';
+import { TeachingBubbleWideIllustrationExample } from '../TeachingBubble/TeachingBubble.WideIllustration.Example';
+
+export const ShadowDOMTeachingBubbleWideIllustrationExample: React.FunctionComponent = () => {
+  return (
+    <Shadow>
+      <TeachingBubbleWideIllustrationExample />
+    </Shadow>
+  );
+};
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.doc.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.doc.tsx
index ec1dfa52070fe..f3aef77f1987b 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.doc.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.doc.tsx
@@ -56,6 +56,13 @@ import { ShadowDOMSpinnerExample } from './ShadowDOM.Spinner.Example';
 import { ShadowDOMStackExample } from './ShadowDOM.Stack.Example';
 import { ShadowDOMSwatchColorPickerExample } from './ShadowDOM.SwatchColorPicker.Example';
 import { ShadowDOMTeachingBubbleExample } from './ShadowDOM.TeachingBubble.Example';
+import { ShadowDOMTeachingBubbleButtonOrderExample } from './ShadowDOM.TeachingBubble.ButtonOrder.Example';
+import { ShadowDOMTeachingBubbleCondensedExample } from './ShadowDOM.TeachingBubble.Condensed.Example';
+import { ShadowDOMTeachingBubbleIllustrationExample } from './ShadowDOM.TeachingBubble.Illustration.Example';
+import { ShadowDOMTeachingBubbleMultiStepExample } from './ShadowDOM.TeachingBubble.MultiStep.Example';
+import { ShadowDOMTeachingBubbleSmallHeadlineExample } from './ShadowDOM.TeachingBubble.SmallHeadline.Example';
+import { ShadowDOMTeachingBubbleWideExample } from './ShadowDOM.TeachingBubble.Wide.Example';
+import { ShadowDOMTeachingBubbleWideIllustrationExample } from './ShadowDOM.TeachingBubble.WideIllustration.Example';
 import { ShadowDOMTextExample } from './ShadowDOM.Text.Example';
 import { ShadowDOMTextFieldExample } from './ShadowDOM.TextField.Example';
 import { ShadowDOMTimePickerExample } from './ShadowDOM.TimePicker.Example';
@@ -236,6 +243,27 @@ const ShadowDOMSwatchColorPickerExampleCode =
 const ShadowDOMTeachingBubbleExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Example.tsx') as string;
 
+const ShadowDOMTeachingBubbleButtonOrderExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.ButtonOrder.Example.tsx') as string;
+
+const ShadowDOMTeachingBubbleCondensedExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Condensed.Example.tsx') as string;
+
+const ShadowDOMTeachingBubbleIllustrationExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Illustration.Example.tsx') as string;
+
+const ShadowDOMTeachingBubbleMultiStepExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.MultiStep.Example.tsx') as string;
+
+const ShadowDOMTeachingBubbleSmallHeadlineExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.SmallHeadline.Example.tsx') as string;
+
+const ShadowDOMTeachingBubbleWideExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Wide.Example.tsx') as string;
+
+const ShadowDOMTeachingBubbleWideIllustrationExampleCode =
+  require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.WideIllustration.Example.tsx') as string;
+
 const ShadowDOMTextExampleCode =
   require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/ShadowDOM/ShadowDOM.Text.Example.tsx') as string;
 
@@ -551,6 +579,41 @@ export const ShadowDOMPageProps = (): IDocPageProps => ({
       code: ShadowDOMTeachingBubbleExampleCode,
       view: <ShadowDOMTeachingBubbleExample />,
     },
+    {
+      title: 'TeachingBubbleButtonOrder',
+      code: ShadowDOMTeachingBubbleButtonOrderExampleCode,
+      view: <ShadowDOMTeachingBubbleButtonOrderExample />,
+    },
+    {
+      title: 'TeachingBubbleCondensed',
+      code: ShadowDOMTeachingBubbleCondensedExampleCode,
+      view: <ShadowDOMTeachingBubbleCondensedExample />,
+    },
+    {
+      title: 'TeachingBubbleIllustration',
+      code: ShadowDOMTeachingBubbleIllustrationExampleCode,
+      view: <ShadowDOMTeachingBubbleIllustrationExample />,
+    },
+    {
+      title: 'TeachingBubbleMultiStep',
+      code: ShadowDOMTeachingBubbleMultiStepExampleCode,
+      view: <ShadowDOMTeachingBubbleMultiStepExample />,
+    },
+    {
+      title: 'TeachingBubbleSmallHeadline',
+      code: ShadowDOMTeachingBubbleSmallHeadlineExampleCode,
+      view: <ShadowDOMTeachingBubbleSmallHeadlineExample />,
+    },
+    {
+      title: 'TeachingBubbleWide',
+      code: ShadowDOMTeachingBubbleWideExampleCode,
+      view: <ShadowDOMTeachingBubbleWideExample />,
+    },
+    {
+      title: 'TeachingBubbleWideIllustration',
+      code: ShadowDOMTeachingBubbleWideIllustrationExampleCode,
+      view: <ShadowDOMTeachingBubbleWideIllustrationExample />,
+    },
     {
       title: 'Text',
       code: ShadowDOMTextExampleCode,
diff --git a/packages/utilities/package.json b/packages/utilities/package.json
index 149d74be0fede..dc50a68194862 100644
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
@@ -43,7 +43,7 @@
     "@fluentui/dom-utilities": "^2.2.13",
     "@fluentui/merge-styles": "^8.5.14",
     "@fluentui/set-version": "^8.2.13",
-    "@fluentui/react-window-provider": "^2.2.16",
+    "@fluentui/react-window-provider": "^2.2.17",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {