From 168e55b8b664acb148a2fb6a8b5c703ce8ee0e5a Mon Sep 17 00:00:00 2001
From: Daniel Sil <daniel.sil@kiwi.com>
Date: Fri, 12 Jan 2024 17:06:12 +0100
Subject: [PATCH] docs: fix Popover example

---
 docs/src/__examples__/Popover/DEFAULT.tsx | 61 ++++++++++++---------
 docs/src/__examples__/Popover/TRIGGER.tsx | 65 +++++++++++++----------
 2 files changed, 72 insertions(+), 54 deletions(-)

diff --git a/docs/src/__examples__/Popover/DEFAULT.tsx b/docs/src/__examples__/Popover/DEFAULT.tsx
index 81ab67c77f..0cdf60be50 100644
--- a/docs/src/__examples__/Popover/DEFAULT.tsx
+++ b/docs/src/__examples__/Popover/DEFAULT.tsx
@@ -1,34 +1,43 @@
 import React from "react";
-import { Popover, Button, ButtonLink, Stack } from "@kiwicom/orbit-components";
+import {
+  Popover,
+  Button,
+  ButtonLink,
+  Stack,
+  OrbitProvider,
+  defaultTheme,
+} from "@kiwicom/orbit-components";
 import { QuestionCircle } from "@kiwicom/orbit-components/icons";
 
 export default {
   Example: () => (
-    <Popover
-      renderInPortal={false}
-      content={
-        <Stack spacing="small">
-          <ButtonLink
-            external
-            type="secondary"
-            fullWidth
-            href="https://orbit.kiwi/components/popover/react/"
-          >
-            Reference
-          </ButtonLink>
-          <ButtonLink
-            external
-            type="secondary"
-            fullWidth
-            href="https://orbit.kiwi/components/popover/"
-          >
-            Guidelines
-          </ButtonLink>
-        </Stack>
-      }
-    >
-      <Button circled title="Help" iconLeft={<QuestionCircle />} />
-    </Popover>
+    <OrbitProvider theme={defaultTheme} useId={React.useId}>
+      <Popover
+        renderInPortal={false}
+        content={
+          <Stack spacing="small">
+            <ButtonLink
+              external
+              type="secondary"
+              fullWidth
+              href="https://orbit.kiwi/components/popover/react/"
+            >
+              Reference
+            </ButtonLink>
+            <ButtonLink
+              external
+              type="secondary"
+              fullWidth
+              href="https://orbit.kiwi/components/popover/"
+            >
+              Guidelines
+            </ButtonLink>
+          </Stack>
+        }
+      >
+        <Button circled title="Help" iconLeft={<QuestionCircle />} />
+      </Popover>
+    </OrbitProvider>
   ),
   exampleKnobs: [
     {
diff --git a/docs/src/__examples__/Popover/TRIGGER.tsx b/docs/src/__examples__/Popover/TRIGGER.tsx
index 0115f5ffe7..fc45ddaec6 100644
--- a/docs/src/__examples__/Popover/TRIGGER.tsx
+++ b/docs/src/__examples__/Popover/TRIGGER.tsx
@@ -1,35 +1,44 @@
 import React from "react";
-import { Popover, Button, ButtonLink, Stack } from "@kiwicom/orbit-components";
+import {
+  Popover,
+  Button,
+  ButtonLink,
+  Stack,
+  OrbitProvider,
+  defaultTheme,
+} from "@kiwicom/orbit-components";
 import { ChevronDown } from "@kiwicom/orbit-components/icons";
 
 export default {
   Example: () => (
-    <Popover
-      renderInPortal={false}
-      content={
-        <Stack spacing="small">
-          <ButtonLink
-            external
-            type="secondary"
-            fullWidth
-            href="https://orbit.kiwi/components/popover/react/"
-          >
-            Reference
-          </ButtonLink>
-          <ButtonLink
-            external
-            type="secondary"
-            fullWidth
-            href="https://orbit.kiwi/components/popover/"
-          >
-            Guidelines
-          </ButtonLink>
-        </Stack>
-      }
-    >
-      <Button iconRight={<ChevronDown />} type="secondary">
-        Learn more
-      </Button>
-    </Popover>
+    <OrbitProvider theme={defaultTheme} useId={React.useId}>
+      <Popover
+        renderInPortal={false}
+        content={
+          <Stack spacing="small">
+            <ButtonLink
+              external
+              type="secondary"
+              fullWidth
+              href="https://orbit.kiwi/components/popover/react/"
+            >
+              Reference
+            </ButtonLink>
+            <ButtonLink
+              external
+              type="secondary"
+              fullWidth
+              href="https://orbit.kiwi/components/popover/"
+            >
+              Guidelines
+            </ButtonLink>
+          </Stack>
+        }
+      >
+        <Button iconRight={<ChevronDown />} type="secondary">
+          Learn more
+        </Button>
+      </Popover>
+    </OrbitProvider>
   ),
 };