From b76014db0b372f1dc4cac8e4b936da2957cc9e08 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sun, 30 Jun 2024 23:00:04 +0900
Subject: [PATCH] fix: fix build-time errors with latest Popover compatibility
 issues

---
 src/MainLayout.tsx                                        | 3 ++-
 .../components/PopoverBlocks/Examples/ThemeSelector.tsx   | 7 ++++++-
 .../components/PopoverBlocks/Examples/UserControl.tsx     | 8 ++++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/MainLayout.tsx b/src/MainLayout.tsx
index 83698af..c105e44 100644
--- a/src/MainLayout.tsx
+++ b/src/MainLayout.tsx
@@ -62,7 +62,8 @@ function ThemeButton() {
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        anchor="bottomLeft"
+        anchor={"end"}
+        align={"end"}
         className="w-32"
       >
         <Button
diff --git a/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx b/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx
index 1111f09..8163c76 100644
--- a/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx
+++ b/src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx
@@ -51,7 +51,12 @@ export const ThemeSelector = () => {
           {theme === "light" ? <LightIcon /> : <DarkIcon />}
         </Button>
       </PopoverTrigger>
-      <PopoverContent anchor={"bottomCenter"}>
+      <PopoverContent
+        direction={"col"}
+        position={"end"}
+        anchor={"middle"}
+        align={"middle"}
+      >
         <Button
           onClick={() => setTheme("dark")}
           preset={"ghost"}
diff --git a/src/docs/components/PopoverBlocks/Examples/UserControl.tsx b/src/docs/components/PopoverBlocks/Examples/UserControl.tsx
index c070658..e6c3b6c 100644
--- a/src/docs/components/PopoverBlocks/Examples/UserControl.tsx
+++ b/src/docs/components/PopoverBlocks/Examples/UserControl.tsx
@@ -77,7 +77,8 @@ const SignInForm = () => {
 
   return (
     <PopoverContent
-      anchor={"bottomLeft"}
+      anchor={"end"}
+      align={"end"}
       className={"p-4 space-y-3"}
     >
       <Label>
@@ -127,7 +128,10 @@ const UserControlContent = () => {
   }
 
   return (
-    <PopoverContent anchor={"bottomLeft"}>
+    <PopoverContent
+      anchor={"end"}
+      align={"end"}
+    >
       <Button preset={"ghost"}>Dashboard</Button>
       <Button
         preset={"ghost"}