From 0eaaafd57e211657ae26da446f7cf86c38acf516 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Fri, 5 Jul 2024 03:17:37 +0300
Subject: [PATCH 01/36] Added popup to the Playground

---
 codex-ui/dev/Playground.vue                 |  5 ++++
 codex-ui/dev/pages/components/Popup.vue     | 18 +++++++++++
 codex-ui/dev/routes.ts                      |  5 ++++
 codex-ui/src/vue/components/popup/Popup.vue | 33 +++++++++++++++++++++
 codex-ui/src/vue/components/popup/index.ts  |  3 ++
 codex-ui/src/vue/index.ts                   |  1 +
 6 files changed, 65 insertions(+)
 create mode 100644 codex-ui/dev/pages/components/Popup.vue
 create mode 100644 codex-ui/src/vue/components/popup/Popup.vue
 create mode 100644 codex-ui/src/vue/components/popup/index.ts

diff --git a/codex-ui/dev/Playground.vue b/codex-ui/dev/Playground.vue
index bb3b584d..9940daa8 100644
--- a/codex-ui/dev/Playground.vue
+++ b/codex-ui/dev/Playground.vue
@@ -190,6 +190,11 @@ const pages = computed(() => [
         onActivate: () => router.push('/components/fieldset'),
         isActive: route.path === '/components/fieldset',
       },
+      {
+        title: 'Popup',
+        onActivate: () => router.push('/components/popup'),
+        isActive: route.path === '/components/popup',
+      },
       {
         title: 'Editor',
         onActivate: () => router.push('/components/editor'),
diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
new file mode 100644
index 00000000..362b6cb7
--- /dev/null
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -0,0 +1,18 @@
+<template>
+  <PageHeader>
+    Popup
+    <template #description>
+      A component that appears on top of other components
+    </template>
+  </PageHeader>
+  <Popup />
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { Popup } from '../../../src/vue';
+
+</script>
+
+<style scoped>
+</style>
diff --git a/codex-ui/dev/routes.ts b/codex-ui/dev/routes.ts
index 1c7234a8..4ad70a45 100644
--- a/codex-ui/dev/routes.ts
+++ b/codex-ui/dev/routes.ts
@@ -28,6 +28,7 @@ import VerticalMenu from './pages/components/VerticalMenu.vue';
 import ContextMenu from './pages/components/ContextMenu.vue';
 import Editor from './pages/components/Editor.vue';
 import ThemePreview from './pages/components/ThemePreview.vue';
+import Popup from './pages/components/Popup.vue';
 
 /**
  * Vue router routes list
@@ -145,6 +146,10 @@ const routes: RouteRecordRaw[] = [
     path: '/components/theme-preview',
     component: ThemePreview as Component,
   },
+  {
+    path: '/components/popup',
+    component: Popup as Component,
+  },
 ];
 
 export default routes;
diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
new file mode 100644
index 00000000..4cb522bc
--- /dev/null
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -0,0 +1,33 @@
+<template>
+  <div :class="$style['popup']" />
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /**
+     * If true, a button to close the popup appears
+     */
+    hasCloseButton?: boolean;
+  }>(),
+  {
+    hasCloseButton: true,
+  }
+);
+</script>
+
+<style module>
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  gap: 10px;
+  background-color: rgba(0, 0, 0, 0.49);
+  z-index: 100;
+  &__container {
+
+  }
+}
+</style>
diff --git a/codex-ui/src/vue/components/popup/index.ts b/codex-ui/src/vue/components/popup/index.ts
new file mode 100644
index 00000000..05d66861
--- /dev/null
+++ b/codex-ui/src/vue/components/popup/index.ts
@@ -0,0 +1,3 @@
+import Popup from './Popup.vue';
+
+export { Popup };
diff --git a/codex-ui/src/vue/index.ts b/codex-ui/src/vue/index.ts
index c3f65749..a11473c8 100644
--- a/codex-ui/src/vue/index.ts
+++ b/codex-ui/src/vue/index.ts
@@ -15,4 +15,5 @@ export * from './components/context-menu';
 export * from './components/vertical-menu';
 export * from './components/picture';
 export * from './components/theme-preview';
+export * from './components/popup';
 export * from './composables/useTheme';

From 030c3a0600081ba385945280b054ce8f8dabeddc Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Fri, 5 Jul 2024 04:17:15 +0300
Subject: [PATCH 02/36] Added popup container

---
 codex-ui/dev/pages/components/Popup.vue     |  4 +++-
 codex-ui/src/vue/components/popup/Popup.vue | 21 +++++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 362b6cb7..0b432af4 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -5,7 +5,9 @@
       A component that appears on top of other components
     </template>
   </PageHeader>
-  <Popup />
+  <Popup>
+    {{ 'Hello World!' }}
+  </Popup>
 </template>
 
 <script setup lang="ts">
diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 4cb522bc..77324beb 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -1,5 +1,9 @@
 <template>
-  <div :class="$style['popup']" />
+  <div :class="$style['popup']">
+    <div :class="$style['container']">
+      <slot />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -23,11 +27,20 @@ withDefaults(
   left: 0;
   bottom: 0;
   right: 0;
-  gap: 10px;
+  gap: var(--spacing-ms);
   background-color: rgba(0, 0, 0, 0.49);
   z-index: 100;
-  &__container {
+}
 
-  }
+.container {
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  gap: var(--spacing-ml);
+  padding: var(--spacing-l);
+  border-radius: var(--radius-ml);
+  border-color: var(--base--border);
+  border-width: var(--delimiter-height);
+  background-color: var(--base--bg-primary);
 }
 </style>

From 7db598886ef964ec73904a44e672234d3ee5fc7e Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Fri, 5 Jul 2024 05:02:16 +0300
Subject: [PATCH 03/36] Added close button

---
 codex-ui/src/vue/components/popup/Popup.vue | 24 +++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 77324beb..d6725525 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -3,10 +3,15 @@
     <div :class="$style['container']">
       <slot />
     </div>
+    <div :class="$style['popup__icon']">
+      <Icon name="Cross" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Icon from '../icon/Icon.vue';
+
 withDefaults(
   defineProps<{
     /**
@@ -25,11 +30,23 @@ withDefaults(
   position: fixed;
   top: 0;
   left: 0;
-  bottom: 0;
   right: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
   gap: var(--spacing-ms);
   background-color: rgba(0, 0, 0, 0.49);
-  z-index: 100;
+
+  &__icon {
+  position: absolute;
+  top: 50%;
+  color: var(--base--text-secondary);
+  right: calc(50% + var(--spacing-very-x));
+  transform: translateY(-50%);
+  padding: var(--spacing-very-x);
+  border: var(--delimiter-height) solid;
+  border-radius: var(--radius-l);
+}
 }
 
 .container {
@@ -38,9 +55,8 @@ withDefaults(
   position: absolute;
   gap: var(--spacing-ml);
   padding: var(--spacing-l);
+  border: var(--delimiter-height) solid var(--base--border);
   border-radius: var(--radius-ml);
-  border-color: var(--base--border);
-  border-width: var(--delimiter-height);
   background-color: var(--base--bg-primary);
 }
 </style>

From 8a17f3e9f76af5a69121df9c3d5528e511f7aa52 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Fri, 5 Jul 2024 22:41:15 +0300
Subject: [PATCH 04/36] Fix border

---
 codex-ui/dev/pages/components/Popup.vue     |  7 ++-
 codex-ui/src/vue/components/popup/Popup.vue | 57 +++++++++++----------
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 0b432af4..9af3f39d 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -5,14 +5,17 @@
       A component that appears on top of other components
     </template>
   </PageHeader>
+  <Button secondary>
+    Popup
+  </Button>
   <Popup>
-    {{ 'Hello World!' }}
+    Hello World!
   </Popup>
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { Popup } from '../../../src/vue';
+import { Popup, Button } from '../../../src/vue';
 
 </script>
 
diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index d6725525..11a10aaa 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -1,11 +1,12 @@
 <template>
   <div :class="$style['popup']">
-    <div :class="$style['container']">
+    <div :class="$style['popup__container']">
       <slot />
     </div>
-    <div :class="$style['popup__icon']">
-      <Icon name="Cross" />
-    </div>
+    <Icon
+      name="Cross"
+      :class="$style['popup__icon']"
+    />
   </div>
 </template>
 
@@ -26,37 +27,37 @@ withDefaults(
 </script>
 
 <style module>
+
 .popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 100;
   display: flex;
+  position: fixed;
+  align-items: center;
   gap: var(--spacing-ms);
+  justify-content: center;
   background-color: rgba(0, 0, 0, 0.49);
 
+  &__container {
+    z-index: 101;
+    gap: var(--spacing-ml);
+    padding: var(--spacing-l);
+    box-sizing: content-box;
+    border-radius: var(--radius-ml);
+    background-color: var(--base--bg-primary);
+    box-shadow: inset 0 0 0 var(--delimiter-height) var(--base--border);
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
   &__icon {
-  position: absolute;
-  top: 50%;
-  color: var(--base--text-secondary);
-  right: calc(50% + var(--spacing-very-x));
-  transform: translateY(-50%);
-  padding: var(--spacing-very-x);
-  border: var(--delimiter-height) solid;
-  border-radius: var(--radius-l);
-}
+    z-index: 101;
+    color: var(--base--text-secondary);
+    padding: var(--spacing-very-x);
+    box-shadow: inset 0 0 0 var(--delimiter-height);
+    border-radius: var(--radius-l);
+    align-self: center;
+  }
 }
 
-.container {
-  top: 50%;
-  left: 50%;
-  position: absolute;
-  gap: var(--spacing-ml);
-  padding: var(--spacing-l);
-  border: var(--delimiter-height) solid var(--base--border);
-  border-radius: var(--radius-ml);
-  background-color: var(--base--bg-primary);
-}
 </style>

From 524df3c378badaf7154254d31778269bfeac24d5 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sat, 6 Jul 2024 14:30:48 +0300
Subject: [PATCH 05/36] Added trigger component what can show popup

---
 codex-ui/dev/pages/components/Popup.vue     | 12 ++++++++----
 codex-ui/src/vue/components/popup/Popup.vue | 18 ++++++++++++++++--
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 9af3f39d..cbcbacab 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -5,11 +5,15 @@
       A component that appears on top of other components
     </template>
   </PageHeader>
-  <Button secondary>
-    Popup
-  </Button>
   <Popup>
-    Hello World!
+    <template #trigger>
+      <Button secondary>
+        Popup
+      </Button>
+    </template>
+    <template #content>
+      Hello World!
+    </template>
   </Popup>
 </template>
 
diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 11a10aaa..e0cfd026 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -1,7 +1,13 @@
 <template>
-  <div :class="$style['popup']">
+  <div @click="trigger">
+    <slot name="trigger" />
+  </div>
+  <div
+    v-show="showPopup"
+    :class="$style['popup']"
+  >
     <div :class="$style['popup__container']">
-      <slot />
+      <slot name="content" />
     </div>
     <Icon
       name="Cross"
@@ -12,6 +18,9 @@
 
 <script setup lang="ts">
 import Icon from '../icon/Icon.vue';
+import { ref } from 'vue';
+
+const showPopup = ref(false);
 
 withDefaults(
   defineProps<{
@@ -24,6 +33,11 @@ withDefaults(
     hasCloseButton: true,
   }
 );
+
+const trigger = () => {
+  showPopup.value = true;
+};
+
 </script>
 
 <style module>

From c7a1a82778c0e764e2f47c8dee2d4f93f243c6c5 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sat, 6 Jul 2024 15:39:20 +0300
Subject: [PATCH 06/36] Added close button

---
 codex-ui/dev/pages/components/Popup.vue     |  7 ++++++-
 codex-ui/src/vue/components/popup/Popup.vue | 13 ++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index cbcbacab..3f0543e2 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -12,7 +12,12 @@
       </Button>
     </template>
     <template #content>
-      Hello World!
+      <div>
+        Hello World!
+      </div>
+      <div>
+        Hello World!
+      </div>
     </template>
   </Popup>
 </template>
diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index e0cfd026..3caae60b 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -10,8 +10,10 @@
       <slot name="content" />
     </div>
     <Icon
-      name="Cross"
+      v-if="hasCloseButton"
       :class="$style['popup__icon']"
+      name="Cross"
+      @click="close"
     />
   </div>
 </template>
@@ -38,6 +40,10 @@ const trigger = () => {
   showPopup.value = true;
 };
 
+const close = () => {
+  showPopup.value = false;
+};
+
 </script>
 
 <style module>
@@ -56,21 +62,18 @@ const trigger = () => {
     z-index: 101;
     gap: var(--spacing-ml);
     padding: var(--spacing-l);
-    box-sizing: content-box;
     border-radius: var(--radius-ml);
     background-color: var(--base--bg-primary);
     box-shadow: inset 0 0 0 var(--delimiter-height) var(--base--border);
-    flex-direction: row;
-    justify-content: flex-end;
   }
 
   &__icon {
     z-index: 101;
+    cursor: pointer;
     color: var(--base--text-secondary);
     padding: var(--spacing-very-x);
     box-shadow: inset 0 0 0 var(--delimiter-height);
     border-radius: var(--radius-l);
-    align-self: center;
   }
 }
 

From 36c01de47495d5276e7788e7cb21afda21976067 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sat, 6 Jul 2024 15:56:30 +0300
Subject: [PATCH 07/36] Added teleport

---
 codex-ui/src/vue/components/popup/Popup.vue | 31 +++++++++++----------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 3caae60b..75834da2 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -2,20 +2,24 @@
   <div @click="trigger">
     <slot name="trigger" />
   </div>
-  <div
-    v-show="showPopup"
-    :class="$style['popup']"
+  <Teleport
+    to="body"
   >
-    <div :class="$style['popup__container']">
-      <slot name="content" />
+    <div
+      v-show="showPopup"
+      :class="$style['popup']"
+    >
+      <div :class="$style['popup__container']">
+        <slot name="content" />
+      </div>
+      <Icon
+        v-if="hasCloseButton"
+        :class="$style['popup__icon']"
+        name="Cross"
+        @click="close"
+      />
     </div>
-    <Icon
-      v-if="hasCloseButton"
-      :class="$style['popup__icon']"
-      name="Cross"
-      @click="close"
-    />
-  </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
@@ -50,7 +54,6 @@ const close = () => {
 
 .popup {
   inset: 0;
-  z-index: 100;
   display: flex;
   position: fixed;
   align-items: center;
@@ -59,7 +62,6 @@ const close = () => {
   background-color: rgba(0, 0, 0, 0.49);
 
   &__container {
-    z-index: 101;
     gap: var(--spacing-ml);
     padding: var(--spacing-l);
     border-radius: var(--radius-ml);
@@ -68,7 +70,6 @@ const close = () => {
   }
 
   &__icon {
-    z-index: 101;
     cursor: pointer;
     color: var(--base--text-secondary);
     padding: var(--spacing-very-x);

From 246848f80bfaf549920350cd8532f388d328be39 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sat, 6 Jul 2024 18:07:01 +0300
Subject: [PATCH 08/36] Added confirm component

---
 codex-ui/dev/pages/components/Popup.vue       | 23 +++---
 codex-ui/src/vue/components/popup/Confirm.vue | 80 +++++++++++++++++++
 codex-ui/src/vue/components/popup/Popup.vue   | 10 ++-
 codex-ui/src/vue/components/popup/index.ts    |  3 +-
 4 files changed, 102 insertions(+), 14 deletions(-)
 create mode 100644 codex-ui/src/vue/components/popup/Confirm.vue

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 3f0543e2..07308e36 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -1,30 +1,33 @@
 <template>
   <PageHeader>
-    Popup
+    Popup with Confirm
     <template #description>
       A component that appears on top of other components
     </template>
   </PageHeader>
   <Popup>
     <template #trigger>
-      <Button secondary>
-        Popup
+      <Button
+        secondary
+        data-dimensions="large"
+      >
+        Press here to open popup
       </Button>
     </template>
     <template #content>
-      <div>
-        Hello World!
-      </div>
-      <div>
-        Hello World!
-      </div>
+      <Confirm
+        title="CodeX"
+        body="Are you sure you want to delete the page?"
+        left-button="Button"
+        right-button="Confirm"
+      />
     </template>
   </Popup>
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { Popup, Button } from '../../../src/vue';
+import { Popup, Button, Confirm } from '../../../src/vue';
 
 </script>
 
diff --git a/codex-ui/src/vue/components/popup/Confirm.vue b/codex-ui/src/vue/components/popup/Confirm.vue
new file mode 100644
index 00000000..17249fcc
--- /dev/null
+++ b/codex-ui/src/vue/components/popup/Confirm.vue
@@ -0,0 +1,80 @@
+<template>
+  <div
+    :class="$style['confirm']"
+    data-dimensions="large"
+  >
+    <div :class="[$style['confirm__title'], 'text-ui-base-bold']">
+      {{ title }}
+    </div>
+    <div :class="[$style['confirm__body'], 'text-ui-base-medium']">
+      {{ body }}
+    </div>
+    <div :class="$style['confirm__controls']">
+      <Button secondary>
+        <div :class="$style['confirm__button-inner']">
+          {{ leftButton }}
+        </div>
+      </Button>
+      <Button primary>
+        <div :class="$style['confirm__button-inner']">
+          {{ rightButton }}
+        </div>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '../button/Button.vue';
+
+defineProps<{
+  /**
+   * Text that will be displayed at the top of comfirm container
+   */
+  title: string;
+
+  /**
+   * Text that will be displayed in the middle part of the confirm container
+   */
+  body: string;
+
+  /**
+   * Text that will be displayed in the left button
+   */
+  leftButton: string;
+
+  /**
+   * Text that will be displayed in the right button
+   */
+  rightButton: string;
+}>();
+</script>
+
+<style module>
+.confirm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--v-padding);
+  text-align: center;
+  width: min-content;
+
+  &__title {
+  }
+
+  &__body {
+    padding: 0 var(--spacing-ml) 0 var(--spacing-ml);
+    word-wrap: break-word;
+  }
+
+  &__controls {
+    display: flex;
+    padding: var(--v-padding) 0 0 0;
+    gap: var(--spacing-m);
+  }
+
+  &__button-inner {
+    width: 84px;
+  }
+}
+
+</style>
diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 75834da2..3dc720f6 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -54,12 +54,16 @@ const close = () => {
 
 .popup {
   inset: 0;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto;
   position: fixed;
-  align-items: center;
-  gap: var(--spacing-ms);
+  align-content: center;
+  gap: var(--spacing-l);
   justify-content: center;
+  align-items: start;
   background-color: rgba(0, 0, 0, 0.49);
+  align-items: baseline;
+  color: var(--base--text);
 
   &__container {
     gap: var(--spacing-ml);
diff --git a/codex-ui/src/vue/components/popup/index.ts b/codex-ui/src/vue/components/popup/index.ts
index 05d66861..9ca4fca3 100644
--- a/codex-ui/src/vue/components/popup/index.ts
+++ b/codex-ui/src/vue/components/popup/index.ts
@@ -1,3 +1,4 @@
 import Popup from './Popup.vue';
+import Confirm from './Confirm.vue';
 
-export { Popup };
+export { Popup, Confirm };

From 56a0795213f39e0f00789164235c91f0ecb31465 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sat, 6 Jul 2024 18:08:33 +0300
Subject: [PATCH 09/36] Remove useless style

---
 codex-ui/src/vue/components/popup/Confirm.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/codex-ui/src/vue/components/popup/Confirm.vue b/codex-ui/src/vue/components/popup/Confirm.vue
index 17249fcc..8c143503 100644
--- a/codex-ui/src/vue/components/popup/Confirm.vue
+++ b/codex-ui/src/vue/components/popup/Confirm.vue
@@ -3,7 +3,7 @@
     :class="$style['confirm']"
     data-dimensions="large"
   >
-    <div :class="[$style['confirm__title'], 'text-ui-base-bold']">
+    <div :class="['text-ui-base-bold']">
       {{ title }}
     </div>
     <div :class="[$style['confirm__body'], 'text-ui-base-medium']">
@@ -58,9 +58,6 @@ defineProps<{
   text-align: center;
   width: min-content;
 
-  &__title {
-  }
-
   &__body {
     padding: 0 var(--spacing-ml) 0 var(--spacing-ml);
     word-wrap: break-word;

From 3e3d8c3c24cd5e1a84d8f69eac770d06bfc02679 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sat, 6 Jul 2024 18:18:44 +0300
Subject: [PATCH 10/36] Added functions to the buttons

---
 codex-ui/dev/pages/components/Popup.vue       | 12 +++++++++++
 codex-ui/src/vue/components/popup/Confirm.vue | 20 +++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 07308e36..dafa6786 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -20,6 +20,8 @@
         body="Are you sure you want to delete the page?"
         left-button="Button"
         right-button="Confirm"
+        :on-left-activate="onLeftFunction"
+        :on-right-activate="onRightFunction"
       />
     </template>
   </Popup>
@@ -29,6 +31,16 @@
 import PageHeader from '../../components/PageHeader.vue';
 import { Popup, Button, Confirm } from '../../../src/vue';
 
+function onLeftFunction(): void {
+  // eslint-disable-next-line no-console
+  console.log('The left button was pressed');
+}
+
+function onRightFunction(): void {
+  // eslint-disable-next-line no-console
+  console.log('The right button was pressed');
+}
+
 </script>
 
 <style scoped>
diff --git a/codex-ui/src/vue/components/popup/Confirm.vue b/codex-ui/src/vue/components/popup/Confirm.vue
index 8c143503..dff14e8f 100644
--- a/codex-ui/src/vue/components/popup/Confirm.vue
+++ b/codex-ui/src/vue/components/popup/Confirm.vue
@@ -10,12 +10,18 @@
       {{ body }}
     </div>
     <div :class="$style['confirm__controls']">
-      <Button secondary>
+      <Button
+        secondary
+        @click="onLeftActivate"
+      >
         <div :class="$style['confirm__button-inner']">
           {{ leftButton }}
         </div>
       </Button>
-      <Button primary>
+      <Button
+        primary
+        @click="onRightActivate"
+      >
         <div :class="$style['confirm__button-inner']">
           {{ rightButton }}
         </div>
@@ -47,6 +53,16 @@ defineProps<{
    * Text that will be displayed in the right button
    */
   rightButton: string;
+
+  /**
+   * The function that is called when click on the left button
+   */
+  onLeftActivate: () => void;
+
+  /**
+   * The function that is called when click on the right button
+   */
+  onRightActivate: () => void;
 }>();
 </script>
 

From 243279a5703754e598868a63f12b53d676ae7f2a Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Mon, 8 Jul 2024 00:21:01 +0300
Subject: [PATCH 11/36] Fix component description

---
 codex-ui/dev/pages/components/Popup.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index dafa6786..9e0edbda 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -1,8 +1,8 @@
 <template>
   <PageHeader>
-    Popup with Confirm
+    Popup
     <template #description>
-      A component that appears on top of other components
+      A component that appears on top of other components. Can include any other component.
     </template>
   </PageHeader>
   <Popup>

From aa750f45b41f4731f28d4b95d35b44af59b6acf5 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Mon, 8 Jul 2024 00:26:01 +0300
Subject: [PATCH 12/36] Fix naming of the buttons

---
 codex-ui/dev/pages/components/Popup.vue       | 14 +++++------
 codex-ui/src/vue/components/popup/Confirm.vue | 25 ++++++++-----------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 9e0edbda..589d2fbd 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -19,9 +19,9 @@
         title="CodeX"
         body="Are you sure you want to delete the page?"
         left-button="Button"
-        right-button="Confirm"
-        :on-left-activate="onLeftFunction"
-        :on-right-activate="onRightFunction"
+        confirm-button="Confirm"
+        :on-cancel="onCancelFunction"
+        :on-confirm="onConfirmFunction"
       />
     </template>
   </Popup>
@@ -31,14 +31,14 @@
 import PageHeader from '../../components/PageHeader.vue';
 import { Popup, Button, Confirm } from '../../../src/vue';
 
-function onLeftFunction(): void {
+function onCancelFunction(): void {
   // eslint-disable-next-line no-console
-  console.log('The left button was pressed');
+  console.log('The cancel button was pressed');
 }
 
-function onRightFunction(): void {
+function onConfirmFunction(): void {
   // eslint-disable-next-line no-console
-  console.log('The right button was pressed');
+  console.log('The confirm button was pressed');
 }
 
 </script>
diff --git a/codex-ui/src/vue/components/popup/Confirm.vue b/codex-ui/src/vue/components/popup/Confirm.vue
index dff14e8f..7bf281d3 100644
--- a/codex-ui/src/vue/components/popup/Confirm.vue
+++ b/codex-ui/src/vue/components/popup/Confirm.vue
@@ -12,18 +12,18 @@
     <div :class="$style['confirm__controls']">
       <Button
         secondary
-        @click="onLeftActivate"
+        @click="onCancel"
       >
         <div :class="$style['confirm__button-inner']">
-          {{ leftButton }}
+          Cancel
         </div>
       </Button>
       <Button
         primary
-        @click="onRightActivate"
+        @click="onConfirm"
       >
         <div :class="$style['confirm__button-inner']">
-          {{ rightButton }}
+          {{ confirmButton }}
         </div>
       </Button>
     </div>
@@ -45,24 +45,19 @@ defineProps<{
   body: string;
 
   /**
-   * Text that will be displayed in the left button
+   * Text that will be displayed in the confirm button
    */
-  leftButton: string;
+  confirmButton: string;
 
   /**
-   * Text that will be displayed in the right button
+   * The function that is called when click on the cancel button
    */
-  rightButton: string;
+  onCancel: () => void;
 
   /**
-   * The function that is called when click on the left button
+   * The function that is called when click on the confirm button
    */
-  onLeftActivate: () => void;
-
-  /**
-   * The function that is called when click on the right button
-   */
-  onRightActivate: () => void;
+  onConfirm: () => void;
 }>();
 </script>
 

From 9ab7986fdeb36d811b79dae3a91fb39d0b7bddbb Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Mon, 8 Jul 2024 00:43:56 +0300
Subject: [PATCH 13/36] Move popup to the bottom of Playground

---
 codex-ui/dev/Playground.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/codex-ui/dev/Playground.vue b/codex-ui/dev/Playground.vue
index 9940daa8..99f41d26 100644
--- a/codex-ui/dev/Playground.vue
+++ b/codex-ui/dev/Playground.vue
@@ -190,16 +190,16 @@ const pages = computed(() => [
         onActivate: () => router.push('/components/fieldset'),
         isActive: route.path === '/components/fieldset',
       },
-      {
-        title: 'Popup',
-        onActivate: () => router.push('/components/popup'),
-        isActive: route.path === '/components/popup',
-      },
       {
         title: 'Editor',
         onActivate: () => router.push('/components/editor'),
         isActive: route.path === '/components/editor',
       },
+      {
+        title: 'Popup',
+        onActivate: () => router.push('/components/popup'),
+        isActive: route.path === '/components/popup',
+      },
     ],
   },
 ]);

From 8ed65a19ea929318b195707ed2b52c6db2d12485 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Mon, 8 Jul 2024 02:22:57 +0300
Subject: [PATCH 14/36] Added usePopup function

---
 codex-ui/dev/pages/components/Popup.vue       | 43 +++++++-------
 codex-ui/src/vue/components/popup/Confirm.vue | 49 +++++++++-------
 .../src/vue/components/popup/Popup.types.ts   | 14 +++++
 codex-ui/src/vue/components/popup/Popup.vue   | 29 +++++-----
 codex-ui/src/vue/components/popup/index.ts    |  2 +
 codex-ui/src/vue/components/popup/usePopup.ts | 58 +++++++++++++++++++
 6 files changed, 136 insertions(+), 59 deletions(-)
 create mode 100644 codex-ui/src/vue/components/popup/Popup.types.ts
 create mode 100644 codex-ui/src/vue/components/popup/usePopup.ts

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 589d2fbd..ba62855e 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -5,31 +5,18 @@
       A component that appears on top of other components. Can include any other component.
     </template>
   </PageHeader>
-  <Popup>
-    <template #trigger>
-      <Button
-        secondary
-        data-dimensions="large"
-      >
-        Press here to open popup
-      </Button>
-    </template>
-    <template #content>
-      <Confirm
-        title="CodeX"
-        body="Are you sure you want to delete the page?"
-        left-button="Button"
-        confirm-button="Confirm"
-        :on-cancel="onCancelFunction"
-        :on-confirm="onConfirmFunction"
-      />
-    </template>
-  </Popup>
+  <Button
+    secondary
+    data-dimensions="large"
+    @click="show()"
+  >
+    Press here to open popup
+  </Button>
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { Popup, Button, Confirm } from '../../../src/vue';
+import { Button, Confirm, usePopup } from '../../../src/vue';
 
 function onCancelFunction(): void {
   // eslint-disable-next-line no-console
@@ -41,6 +28,20 @@ function onConfirmFunction(): void {
   console.log('The confirm button was pressed');
 }
 
+const { showPopup } = usePopup();
+
+function show() {
+  showPopup({
+    component: Confirm,
+    props: {
+      title: 'CodeX',
+      body: 'Are you sure you want to delete the page?',
+      onCancel: onCancelFunction,
+      onConfirm: onConfirmFunction,
+    },
+  });
+}
+
 </script>
 
 <style scoped>
diff --git a/codex-ui/src/vue/components/popup/Confirm.vue b/codex-ui/src/vue/components/popup/Confirm.vue
index 7bf281d3..0f8bbfbd 100644
--- a/codex-ui/src/vue/components/popup/Confirm.vue
+++ b/codex-ui/src/vue/components/popup/Confirm.vue
@@ -33,32 +33,37 @@
 <script setup lang="ts">
 import Button from '../button/Button.vue';
 
-defineProps<{
-  /**
-   * Text that will be displayed at the top of comfirm container
-   */
-  title: string;
+withDefaults(
+  defineProps<{
+    /**
+     * Text that will be displayed at the top of comfirm container
+     */
+    title: string;
 
-  /**
-   * Text that will be displayed in the middle part of the confirm container
-   */
-  body: string;
+    /**
+     * Text that will be displayed in the middle part of the confirm container
+     */
+    body: string;
 
-  /**
-   * Text that will be displayed in the confirm button
-   */
-  confirmButton: string;
+    /**
+     * Text that will be displayed in the confirm button
+     */
+    confirmButton?: string;
 
-  /**
-   * The function that is called when click on the cancel button
-   */
-  onCancel: () => void;
+    /**
+     * The function that is called when click on the cancel button
+     */
+    onCancel: () => void;
 
-  /**
-   * The function that is called when click on the confirm button
-   */
-  onConfirm: () => void;
-}>();
+    /**
+     * The function that is called when click on the confirm button
+     */
+    onConfirm: () => void;
+  }>(),
+  {
+    confirmButton: 'Confirm',
+  }
+);
 </script>
 
 <style module>
diff --git a/codex-ui/src/vue/components/popup/Popup.types.ts b/codex-ui/src/vue/components/popup/Popup.types.ts
new file mode 100644
index 00000000..e46fbb32
--- /dev/null
+++ b/codex-ui/src/vue/components/popup/Popup.types.ts
@@ -0,0 +1,14 @@
+import type { Component } from 'vue';
+
+export interface PopupContent {
+  /**
+   * Component to render in the popup
+   */
+  component: Component;
+
+  /**
+   * Props to pass to the component
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  props: Record<string, any>;
+}
diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 3dc720f6..6de571e2 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -1,22 +1,23 @@
 <template>
-  <div @click="trigger">
-    <slot name="trigger" />
-  </div>
   <Teleport
     to="body"
   >
     <div
-      v-show="showPopup"
+      v-show="isActive"
       :class="$style['popup']"
     >
       <div :class="$style['popup__container']">
-        <slot name="content" />
+        <component
+          :is="content.component"
+          v-if="content"
+          v-bind="content.props"
+        />
       </div>
       <Icon
         v-if="hasCloseButton"
         :class="$style['popup__icon']"
         name="Cross"
-        @click="close"
+        @click="hidePopup"
       />
     </div>
   </Teleport>
@@ -24,9 +25,13 @@
 
 <script setup lang="ts">
 import Icon from '../icon/Icon.vue';
-import { ref } from 'vue';
+import { usePopup } from './usePopup';
 
-const showPopup = ref(false);
+const {
+  isActive,
+  hidePopup,
+  content,
+} = usePopup();
 
 withDefaults(
   defineProps<{
@@ -40,14 +45,6 @@ withDefaults(
   }
 );
 
-const trigger = () => {
-  showPopup.value = true;
-};
-
-const close = () => {
-  showPopup.value = false;
-};
-
 </script>
 
 <style module>
diff --git a/codex-ui/src/vue/components/popup/index.ts b/codex-ui/src/vue/components/popup/index.ts
index 9ca4fca3..9cc4b83b 100644
--- a/codex-ui/src/vue/components/popup/index.ts
+++ b/codex-ui/src/vue/components/popup/index.ts
@@ -1,4 +1,6 @@
 import Popup from './Popup.vue';
 import Confirm from './Confirm.vue';
+export * from './usePopup';
+export * from './Popup.types';
 
 export { Popup, Confirm };
diff --git a/codex-ui/src/vue/components/popup/usePopup.ts b/codex-ui/src/vue/components/popup/usePopup.ts
new file mode 100644
index 00000000..d32620d2
--- /dev/null
+++ b/codex-ui/src/vue/components/popup/usePopup.ts
@@ -0,0 +1,58 @@
+import { createSharedComposable } from '@vueuse/core';
+import { ref, shallowRef } from 'vue';
+import type { PopupContent } from './Popup.types';
+
+export const usePopup = createSharedComposable(() => {
+  /**
+   * Popup active state
+   */
+  const isActive = ref(false);
+
+  /**
+   * Popup content: component and props
+   */
+  const content = shallowRef<PopupContent | null>(null);
+
+  /**
+   * Method for attaching a component to the popup
+   * @param component - component to attach
+   * @param props - props to pass to the component
+   */
+  function mountComponent(component: PopupContent['component'], props: PopupContent['props']): void {
+    content.value = {
+      component,
+      props,
+    };
+  }
+
+  /**
+   * Show popup
+   */
+  function show(): void {
+    isActive.value = true;
+  }
+
+  /**
+   * Mount component into popup and show it
+   * @param params - popup showing configuration
+   */
+  function showPopup(params: PopupContent): void {
+    mountComponent(params.component, params.props);
+    show();
+  }
+
+  /**
+   * Сlear the content inside the popup and hide popup
+   */
+  function hidePopup(): void {
+    content.value = null;
+    isActive.value = false;
+  }
+
+  return {
+    isActive,
+    showPopup,
+    hidePopup,
+    content,
+  };
+});

From 3b27cf0b5abe3108e9474789a85cbc124bf9a44b Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Mon, 15 Jul 2024 23:43:38 +0300
Subject: [PATCH 15/36] Remove vue teleport

---
 codex-ui/src/vue/components/popup/Popup.vue | 35 ++++++++++-----------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 6de571e2..68174910 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -1,26 +1,22 @@
 <template>
-  <Teleport
-    to="body"
+  <div
+    v-show="isActive"
+    :class="$style['popup']"
   >
-    <div
-      v-show="isActive"
-      :class="$style['popup']"
-    >
-      <div :class="$style['popup__container']">
-        <component
-          :is="content.component"
-          v-if="content"
-          v-bind="content.props"
-        />
-      </div>
-      <Icon
-        v-if="hasCloseButton"
-        :class="$style['popup__icon']"
-        name="Cross"
-        @click="hidePopup"
+    <div :class="$style['popup__container']">
+      <component
+        :is="content.component"
+        v-if="content"
+        v-bind="content.props"
       />
     </div>
-  </Teleport>
+    <Icon
+      v-if="hasCloseButton"
+      :class="$style['popup__icon']"
+      name="Cross"
+      @click="hidePopup"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -50,6 +46,7 @@ withDefaults(
 <style module>
 
 .popup {
+  z-index: var(--z-popover);
   inset: 0;
   display: grid;
   grid-template-columns: auto auto;

From bdd791cf692cfb911d620446ab3cec54d09edd75 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Tue, 16 Jul 2024 00:06:55 +0300
Subject: [PATCH 16/36] Added Popup to the playground

---
 codex-ui/dev/Playground.vue | 4 +++-
 src/App.vue                 | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/codex-ui/dev/Playground.vue b/codex-ui/dev/Playground.vue
index 99f41d26..8d66fbd8 100644
--- a/codex-ui/dev/Playground.vue
+++ b/codex-ui/dev/Playground.vue
@@ -29,6 +29,7 @@
         <router-view />
       </div>
     </div>
+    <Popup />
   </div>
 </template>
 
@@ -36,7 +37,8 @@
 import { computed } from 'vue';
 import {
   VerticalMenu,
-  Tabbar
+  Tabbar,
+  Popup
 } from '../src/vue';
 import { useTheme } from '../src/vue/composables/useTheme';
 
diff --git a/src/App.vue b/src/App.vue
index a15070aa..ba528b6e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,14 @@
 <template>
   <Header />
   <router-view />
+  <Popup />
 </template>
 
 <script lang="ts" setup>
 import Header from '@/presentation/components/header/Header.vue';
 import { onErrorCaptured } from 'vue';
 import { useTheme } from 'codex-ui/vue';
+import { Popup } from '../codex-ui/src';
 
 /**
  * Read theme from local storage and apply it

From 74d557f73ae68b6edbda73c0f9a973654d0b5a1e Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Tue, 16 Jul 2024 00:14:53 +0300
Subject: [PATCH 17/36] Fix export

---
 src/App.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 987131e5..f90a7158 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,9 +8,8 @@
 <script lang="ts" setup>
 import Header from '@/presentation/components/header/Header.vue';
 import { onErrorCaptured } from 'vue';
-import { useTheme, Popover } from 'codex-ui/vue';
+import { useTheme, Popover, Popup } from 'codex-ui/vue';
 import useAuthRequired from '@/application/services/useAuthRequired';
-import { Popup } from '../codex-ui/src';
 
 /**
  * Read theme from local storage and apply it

From e5efa9aad1a2597a35ec01294dadd6b3023f6b0b Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Thu, 18 Jul 2024 00:47:02 +0300
Subject: [PATCH 18/36] Fix naming

---
 codex-ui/src/vue/components/popup/Confirm.vue | 16 +++++++++++-----
 codex-ui/src/vue/components/popup/Popup.vue   |  4 ++--
 codex-ui/src/vue/components/popup/usePopup.ts | 10 +++++-----
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/codex-ui/src/vue/components/popup/Confirm.vue b/codex-ui/src/vue/components/popup/Confirm.vue
index 0f8bbfbd..7f3477c0 100644
--- a/codex-ui/src/vue/components/popup/Confirm.vue
+++ b/codex-ui/src/vue/components/popup/Confirm.vue
@@ -3,7 +3,7 @@
     :class="$style['confirm']"
     data-dimensions="large"
   >
-    <div :class="['text-ui-base-bold']">
+    <div class="text-ui-base-bold">
       {{ title }}
     </div>
     <div :class="[$style['confirm__body'], 'text-ui-base-medium']">
@@ -15,7 +15,7 @@
         @click="onCancel"
       >
         <div :class="$style['confirm__button-inner']">
-          Cancel
+          {{ cancelText }}
         </div>
       </Button>
       <Button
@@ -23,7 +23,7 @@
         @click="onConfirm"
       >
         <div :class="$style['confirm__button-inner']">
-          {{ confirmButton }}
+          {{ confirmText }}
         </div>
       </Button>
     </div>
@@ -48,7 +48,12 @@ withDefaults(
     /**
      * Text that will be displayed in the confirm button
      */
-    confirmButton?: string;
+    confirmText?: string;
+
+    /**
+     * Text that will be displayed in the cancel button
+     */
+    cancelText?: string;
 
     /**
      * The function that is called when click on the cancel button
@@ -61,7 +66,8 @@ withDefaults(
     onConfirm: () => void;
   }>(),
   {
-    confirmButton: 'Confirm',
+    confirmText: 'Confirm',
+    cancelText: 'Cancel',
   }
 );
 </script>
diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 68174910..645003d9 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-show="isActive"
+    v-show="isOpen"
     :class="$style['popup']"
   >
     <div :class="$style['popup__container']">
@@ -24,7 +24,7 @@ import Icon from '../icon/Icon.vue';
 import { usePopup } from './usePopup';
 
 const {
-  isActive,
+  isOpen,
   hidePopup,
   content,
 } = usePopup();
diff --git a/codex-ui/src/vue/components/popup/usePopup.ts b/codex-ui/src/vue/components/popup/usePopup.ts
index d32620d2..493dc587 100644
--- a/codex-ui/src/vue/components/popup/usePopup.ts
+++ b/codex-ui/src/vue/components/popup/usePopup.ts
@@ -4,9 +4,9 @@ import type { PopupContent } from './Popup.types';
 
 export const usePopup = createSharedComposable(() => {
   /**
-   * Popup active state
+   * Popup open state
    */
-  const isActive = ref(false);
+  const isOpen = ref(false);
 
   /**
    * Popup content: component and props
@@ -29,7 +29,7 @@ export const usePopup = createSharedComposable(() => {
    * Show popup
    */
   function show(): void {
-    isActive.value = true;
+    isOpen.value = true;
   }
 
   /**
@@ -46,11 +46,11 @@ export const usePopup = createSharedComposable(() => {
    */
   function hidePopup(): void {
     content.value = null;
-    isActive.value = false;
+    isOpen.value = false;
   }
 
   return {
-    isActive,
+    isOpen,
     showPopup,
     hidePopup,
     content,

From baea33742e0f34f7bedad3e5effed507645085e5 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sat, 20 Jul 2024 23:22:46 +0300
Subject: [PATCH 19/36] Added missed comment

---
 codex-ui/src/vue/components/popup/usePopup.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/codex-ui/src/vue/components/popup/usePopup.ts b/codex-ui/src/vue/components/popup/usePopup.ts
index 493dc587..2234a97c 100644
--- a/codex-ui/src/vue/components/popup/usePopup.ts
+++ b/codex-ui/src/vue/components/popup/usePopup.ts
@@ -2,6 +2,23 @@ import { createSharedComposable } from '@vueuse/core';
 import { ref, shallowRef } from 'vue';
 import type { PopupContent } from './Popup.types';
 
+/**
+ * Shared composable for the Popup component
+ *
+ * Popup is component empty container that appears on top of other components and contain any component
+ * @example
+ * function show() {
+ *  showPopup({
+ *  component: Confirm,
+ *    props: {
+ *      title: 'CodeX',
+ *      body: 'Are you sure you want to delete the page?',
+ *      onCancel: onCancelFunction,
+ *      onConfirm: onConfirmFunction,
+ *    },
+ *  });
+ * }
+ */
 export const usePopup = createSharedComposable(() => {
   /**
    * Popup open state

From 382694b0ebb42b990d5e0d9e5db444b9984bb083 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sun, 21 Jul 2024 00:03:25 +0300
Subject: [PATCH 20/36] Added close on click outside the popup container

---
 codex-ui/src/vue/components/popup/Popup.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 645003d9..00d12901 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -3,7 +3,10 @@
     v-show="isOpen"
     :class="$style['popup']"
   >
-    <div :class="$style['popup__container']">
+    <div
+      ref="popupEl"
+      :class="$style['popup__container']"
+    >
       <component
         :is="content.component"
         v-if="content"
@@ -20,8 +23,16 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import Icon from '../icon/Icon.vue';
 import { usePopup } from './usePopup';
+import { onClickOutside } from '@vueuse/core';
+
+/**
+ * Reference to the popup element
+ * Used to bind click-outside event
+ */
+const popupEl = ref<HTMLDivElement | null>(null);
 
 const {
   isOpen,
@@ -29,6 +40,11 @@ const {
   content,
 } = usePopup();
 
+/**
+ * Close the popup when clicking outside of popup container
+ */
+onClickOutside(popupEl, hidePopup);
+
 withDefaults(
   defineProps<{
     /**

From 1a8764fe2fa3d17e53a2554c46481211a09d8f35 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sun, 21 Jul 2024 00:21:51 +0300
Subject: [PATCH 21/36] Added close on esc button

---
 codex-ui/src/vue/components/popup/Popup.vue | 22 ++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 00d12901..4d76e166 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import Icon from '../icon/Icon.vue';
 import { usePopup } from './usePopup';
 import { onClickOutside } from '@vueuse/core';
@@ -45,6 +45,18 @@ const {
  */
 onClickOutside(popupEl, hidePopup);
 
+/**
+ * Close the popup when esc was pressed
+ *
+ * @param event - the event object representing the keyboard event
+ * @param event.key - the property of the event object that holds the value of the pressed key
+ */
+const closeOnEsc = (event: { key: string }) => {
+  if (event.key === 'Escape') {
+    hidePopup();
+  }
+};
+
 withDefaults(
   defineProps<{
     /**
@@ -57,6 +69,14 @@ withDefaults(
   }
 );
 
+onMounted(() => {
+  document.addEventListener('keydown', closeOnEsc);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', closeOnEsc);
+});
+
 </script>
 
 <style module>

From 01a94eeaf7391026caad8fcb46525eb58800de18 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sun, 21 Jul 2024 01:30:00 +0300
Subject: [PATCH 22/36] Change z-index level and rename body to text

---
 codex-ui/src/styles/z-axis.pcss               | 1 +
 codex-ui/src/vue/components/popup/Confirm.vue | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/codex-ui/src/styles/z-axis.pcss b/codex-ui/src/styles/z-axis.pcss
index 0e7ac9c8..b818278f 100644
--- a/codex-ui/src/styles/z-axis.pcss
+++ b/codex-ui/src/styles/z-axis.pcss
@@ -1,3 +1,4 @@
 :root {
   --z-popover: 3;
+  --z-popup: calc(var(--z-popover) + 1);
 }
diff --git a/codex-ui/src/vue/components/popup/Confirm.vue b/codex-ui/src/vue/components/popup/Confirm.vue
index 7f3477c0..223fffd8 100644
--- a/codex-ui/src/vue/components/popup/Confirm.vue
+++ b/codex-ui/src/vue/components/popup/Confirm.vue
@@ -7,7 +7,7 @@
       {{ title }}
     </div>
     <div :class="[$style['confirm__body'], 'text-ui-base-medium']">
-      {{ body }}
+      {{ text }}
     </div>
     <div :class="$style['confirm__controls']">
       <Button
@@ -43,7 +43,7 @@ withDefaults(
     /**
      * Text that will be displayed in the middle part of the confirm container
      */
-    body: string;
+    text: string;
 
     /**
      * Text that will be displayed in the confirm button

From 3f2bb38716d1e691888311c56d327404e0a47348 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sun, 21 Jul 2024 01:52:18 +0300
Subject: [PATCH 23/36] Added support enter button for confirm

---
 codex-ui/dev/pages/components/Popup.vue       |  2 +-
 codex-ui/src/vue/components/popup/Confirm.vue | 24 ++++++++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index ba62855e..752cfb42 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -35,7 +35,7 @@ function show() {
     component: Confirm,
     props: {
       title: 'CodeX',
-      body: 'Are you sure you want to delete the page?',
+      text: 'Are you sure you want to delete the page?',
       onCancel: onCancelFunction,
       onConfirm: onConfirmFunction,
     },
diff --git a/codex-ui/src/vue/components/popup/Confirm.vue b/codex-ui/src/vue/components/popup/Confirm.vue
index 223fffd8..30f006a1 100644
--- a/codex-ui/src/vue/components/popup/Confirm.vue
+++ b/codex-ui/src/vue/components/popup/Confirm.vue
@@ -32,8 +32,9 @@
 
 <script setup lang="ts">
 import Button from '../button/Button.vue';
+import { onMounted, onUnmounted } from 'vue';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     /**
      * Text that will be displayed at the top of comfirm container
@@ -70,6 +71,27 @@ withDefaults(
     cancelText: 'Cancel',
   }
 );
+
+/**
+ * Call onConfirm when enter was pressed
+ *
+ * @param event - the event object representing the keyboard event
+ * @param event.key - the property of the event object that holds the value of the pressed key
+ */
+const confirmOnEnter = (event: { key: string }) => {
+  if (event.key === 'Enter') {
+    props.onConfirm();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('keydown', confirmOnEnter);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', confirmOnEnter);
+});
+
 </script>
 
 <style module>

From 1da827717041142a5b5f187eb9523ac353360f38 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sun, 21 Jul 2024 01:53:50 +0300
Subject: [PATCH 24/36] Change popup z-index

---
 codex-ui/src/vue/components/popup/Popup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 4d76e166..142d0b78 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -82,7 +82,7 @@ onUnmounted(() => {
 <style module>
 
 .popup {
-  z-index: var(--z-popover);
+  z-index: var(--z-popup);
   inset: 0;
   display: grid;
   grid-template-columns: auto auto;

From 9698e0a6cfe7bd1b54f635803446de7563b577c0 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sun, 21 Jul 2024 15:23:05 +0300
Subject: [PATCH 25/36] Move confirm to separate folder

---
 codex-ui/src/vue/components/{popup => confirm}/Confirm.vue | 0
 codex-ui/src/vue/components/confirm/index.ts               | 3 +++
 codex-ui/src/vue/components/popup/index.ts                 | 3 +--
 codex-ui/src/vue/index.ts                                  | 1 +
 4 files changed, 5 insertions(+), 2 deletions(-)
 rename codex-ui/src/vue/components/{popup => confirm}/Confirm.vue (100%)
 create mode 100644 codex-ui/src/vue/components/confirm/index.ts

diff --git a/codex-ui/src/vue/components/popup/Confirm.vue b/codex-ui/src/vue/components/confirm/Confirm.vue
similarity index 100%
rename from codex-ui/src/vue/components/popup/Confirm.vue
rename to codex-ui/src/vue/components/confirm/Confirm.vue
diff --git a/codex-ui/src/vue/components/confirm/index.ts b/codex-ui/src/vue/components/confirm/index.ts
new file mode 100644
index 00000000..95fe55aa
--- /dev/null
+++ b/codex-ui/src/vue/components/confirm/index.ts
@@ -0,0 +1,3 @@
+import Confirm from './Confirm.vue';
+
+export { Confirm };
diff --git a/codex-ui/src/vue/components/popup/index.ts b/codex-ui/src/vue/components/popup/index.ts
index 9cc4b83b..fcb3b2b0 100644
--- a/codex-ui/src/vue/components/popup/index.ts
+++ b/codex-ui/src/vue/components/popup/index.ts
@@ -1,6 +1,5 @@
 import Popup from './Popup.vue';
-import Confirm from './Confirm.vue';
 export * from './usePopup';
 export * from './Popup.types';
 
-export { Popup, Confirm };
+export { Popup };
diff --git a/codex-ui/src/vue/index.ts b/codex-ui/src/vue/index.ts
index 9e1ec312..38b8786c 100644
--- a/codex-ui/src/vue/index.ts
+++ b/codex-ui/src/vue/index.ts
@@ -17,4 +17,5 @@ export * from './components/colorShemeIcons';
 export * from './components/theme-preview';
 export * from './components/popover';
 export * from './components/popup';
+export * from './components/confirm';
 export * from './composables/useTheme';

From 87fac03122ce92b98b3f4622d403bfd847c38d08 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sun, 21 Jul 2024 16:28:05 +0300
Subject: [PATCH 26/36] Added useConfirm

---
 .../src/vue/components/confirm/Confirm.vue    |  3 +++
 codex-ui/src/vue/components/confirm/index.ts  |  1 +
 .../src/vue/components/confirm/useConfirm.ts  | 22 +++++++++++++++++++
 3 files changed, 26 insertions(+)
 create mode 100644 codex-ui/src/vue/components/confirm/useConfirm.ts

diff --git a/codex-ui/src/vue/components/confirm/Confirm.vue b/codex-ui/src/vue/components/confirm/Confirm.vue
index 30f006a1..6294e18f 100644
--- a/codex-ui/src/vue/components/confirm/Confirm.vue
+++ b/codex-ui/src/vue/components/confirm/Confirm.vue
@@ -33,6 +33,9 @@
 <script setup lang="ts">
 import Button from '../button/Button.vue';
 import { onMounted, onUnmounted } from 'vue';
+import { useConfirm } from './useConfirm';
+
+const { confirm } = useConfirm();
 
 const props = withDefaults(
   defineProps<{
diff --git a/codex-ui/src/vue/components/confirm/index.ts b/codex-ui/src/vue/components/confirm/index.ts
index 95fe55aa..fa42cc59 100644
--- a/codex-ui/src/vue/components/confirm/index.ts
+++ b/codex-ui/src/vue/components/confirm/index.ts
@@ -1,3 +1,4 @@
 import Confirm from './Confirm.vue';
+export * from './useConfirm';
 
 export { Confirm };
diff --git a/codex-ui/src/vue/components/confirm/useConfirm.ts b/codex-ui/src/vue/components/confirm/useConfirm.ts
new file mode 100644
index 00000000..2733272c
--- /dev/null
+++ b/codex-ui/src/vue/components/confirm/useConfirm.ts
@@ -0,0 +1,22 @@
+import { createSharedComposable } from '@vueuse/core';
+import { ref } from 'vue';
+
+export const useConfirm = createSharedComposable(() => {
+  /**
+   * Text to be displayed in the confirm text block
+   */
+  const text = ref('');
+
+  const confirm = (content: string): Promise<boolean> => {
+    text.value = content;
+
+    return new Promise((resolve) => {
+      resolve(true);
+    });
+  };
+
+  return {
+    text,
+    confirm,
+  };
+});

From 6d1fcba769dc4c372e4dc609cac708f506bbc51b Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Sun, 21 Jul 2024 17:34:03 +0300
Subject: [PATCH 27/36] Move onCancel and onConfirm logic

---
 codex-ui/dev/pages/components/Popup.vue       | 17 +++------
 .../src/vue/components/confirm/Confirm.vue    | 16 ++-------
 .../src/vue/components/confirm/useConfirm.ts  | 35 +++++++++++++++++--
 3 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 752cfb42..10e18240 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -16,19 +16,12 @@
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { Button, Confirm, usePopup } from '../../../src/vue';
-
-function onCancelFunction(): void {
-  // eslint-disable-next-line no-console
-  console.log('The cancel button was pressed');
-}
-
-function onConfirmFunction(): void {
-  // eslint-disable-next-line no-console
-  console.log('The confirm button was pressed');
-}
+import { Button, Confirm, usePopup, useConfirm } from '../../../src/vue';
 
 const { showPopup } = usePopup();
+const { confirm } = useConfirm();
+
+confirm('Are you sure you want to delete the page?');
 
 function show() {
   showPopup({
@@ -36,8 +29,6 @@ function show() {
     props: {
       title: 'CodeX',
       text: 'Are you sure you want to delete the page?',
-      onCancel: onCancelFunction,
-      onConfirm: onConfirmFunction,
     },
   });
 }
diff --git a/codex-ui/src/vue/components/confirm/Confirm.vue b/codex-ui/src/vue/components/confirm/Confirm.vue
index 6294e18f..cf6758f5 100644
--- a/codex-ui/src/vue/components/confirm/Confirm.vue
+++ b/codex-ui/src/vue/components/confirm/Confirm.vue
@@ -35,9 +35,9 @@ import Button from '../button/Button.vue';
 import { onMounted, onUnmounted } from 'vue';
 import { useConfirm } from './useConfirm';
 
-const { confirm } = useConfirm();
+const { onCancel, onConfirm } = useConfirm();
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     /**
      * Text that will be displayed at the top of comfirm container
@@ -58,16 +58,6 @@ const props = withDefaults(
      * Text that will be displayed in the cancel button
      */
     cancelText?: string;
-
-    /**
-     * The function that is called when click on the cancel button
-     */
-    onCancel: () => void;
-
-    /**
-     * The function that is called when click on the confirm button
-     */
-    onConfirm: () => void;
   }>(),
   {
     confirmText: 'Confirm',
@@ -83,7 +73,7 @@ const props = withDefaults(
  */
 const confirmOnEnter = (event: { key: string }) => {
   if (event.key === 'Enter') {
-    props.onConfirm();
+    onConfirm();
   }
 };
 
diff --git a/codex-ui/src/vue/components/confirm/useConfirm.ts b/codex-ui/src/vue/components/confirm/useConfirm.ts
index 2733272c..97cb66b5 100644
--- a/codex-ui/src/vue/components/confirm/useConfirm.ts
+++ b/codex-ui/src/vue/components/confirm/useConfirm.ts
@@ -7,16 +7,45 @@ export const useConfirm = createSharedComposable(() => {
    */
   const text = ref('');
 
-  const confirm = (content: string): Promise<boolean> => {
+  /**
+   * Represents the result of the user's selection: false - Cancel button was pressed,
+   * true - Confirm button was pressed, undefined - no selection has been made yet
+   */
+  const result = ref<boolean | undefined>();
+
+  /**
+   * Confirm button was pressed
+   */
+  function onCancel(): void {
+    result.value = false;
+    console.log('The cancel button was pressed');
+  }
+
+  /**
+   * Cancel button was pressed
+   */
+  function onConfirm(): void {
+    result.value = true;
+    console.log('The confirm button was pressed');
+  }
+
+  /**
+   *
+   * @param content - message to be displayed in confirm window
+   * @returns user selection result
+   */
+  async function confirm(content: string): Promise<boolean | undefined> {
     text.value = content;
 
-    return new Promise((resolve) => {
-      resolve(true);
+    return new Promise<boolean | undefined>((resolve) => {
+      resolve(result.value);
     });
   };
 
   return {
     text,
     confirm,
+    onCancel,
+    onConfirm,
   };
 });

From 8ef117c9f23e5c84e3228945a335284bd3d8af31 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Mon, 22 Jul 2024 00:36:25 +0300
Subject: [PATCH 28/36] move usePopup logic to the useConfirm

---
 codex-ui/dev/pages/components/Popup.vue       | 19 +++++--------
 .../src/vue/components/confirm/useConfirm.ts  | 27 ++++++++++++-------
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 10e18240..4910a803 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -16,21 +16,16 @@
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { Button, Confirm, usePopup, useConfirm } from '../../../src/vue';
+import { Button, useConfirm } from '../../../src/vue';
 
-const { showPopup } = usePopup();
+// const { showPopup } = usePopup();
 const { confirm } = useConfirm();
 
-confirm('Are you sure you want to delete the page?');
-
-function show() {
-  showPopup({
-    component: Confirm,
-    props: {
-      title: 'CodeX',
-      text: 'Are you sure you want to delete the page?',
-    },
-  });
+async function show() {
+  await confirm(
+    'CodeX',
+    'Are you sure you want to delete the page?'
+  );
 }
 
 </script>
diff --git a/codex-ui/src/vue/components/confirm/useConfirm.ts b/codex-ui/src/vue/components/confirm/useConfirm.ts
index 97cb66b5..a7dc714f 100644
--- a/codex-ui/src/vue/components/confirm/useConfirm.ts
+++ b/codex-ui/src/vue/components/confirm/useConfirm.ts
@@ -1,18 +1,20 @@
 import { createSharedComposable } from '@vueuse/core';
+import { usePopup } from '../popup';
 import { ref } from 'vue';
+import { Confirm } from '.';
 
 export const useConfirm = createSharedComposable(() => {
-  /**
-   * Text to be displayed in the confirm text block
-   */
-  const text = ref('');
-
   /**
    * Represents the result of the user's selection: false - Cancel button was pressed,
    * true - Confirm button was pressed, undefined - no selection has been made yet
    */
   const result = ref<boolean | undefined>();
 
+  /**
+   * Used to create a Popup component that will display the current Confirm
+   */
+  const { showPopup } = usePopup();
+
   /**
    * Confirm button was pressed
    */
@@ -31,11 +33,19 @@ export const useConfirm = createSharedComposable(() => {
 
   /**
    *
-   * @param content - message to be displayed in confirm window
+   * @param title - title of the confirm window
+   * @param text - message to be displayed in confirm window
    * @returns user selection result
    */
-  async function confirm(content: string): Promise<boolean | undefined> {
-    text.value = content;
+  async function confirm(title: string, text: string): Promise<boolean | undefined> {
+    showPopup({
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      component: Confirm,
+      props: {
+        title: title,
+        text: text,
+      },
+    });
 
     return new Promise<boolean | undefined>((resolve) => {
       resolve(result.value);
@@ -43,7 +53,6 @@ export const useConfirm = createSharedComposable(() => {
   };
 
   return {
-    text,
     confirm,
     onCancel,
     onConfirm,

From c85ec6558d3989dd237f16c56b12c1edbd709e60 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Mon, 22 Jul 2024 01:03:15 +0300
Subject: [PATCH 29/36] Fix await logic

---
 codex-ui/dev/pages/components/Popup.vue       | 11 +++++++++--
 .../src/vue/components/confirm/useConfirm.ts  | 19 +++++++++++++------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 4910a803..9a92a87f 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -18,14 +18,21 @@
 import PageHeader from '../../components/PageHeader.vue';
 import { Button, useConfirm } from '../../../src/vue';
 
-// const { showPopup } = usePopup();
 const { confirm } = useConfirm();
 
 async function show() {
-  await confirm(
+  const res = await confirm(
     'CodeX',
     'Are you sure you want to delete the page?'
   );
+
+  if (res) {
+    // eslint-disable-next-line no-console
+    console.log('The confirm button was pressed');
+  } else {
+    // eslint-disable-next-line no-console
+    console.log('The cancel button was pressed');
+  }
 }
 
 </script>
diff --git a/codex-ui/src/vue/components/confirm/useConfirm.ts b/codex-ui/src/vue/components/confirm/useConfirm.ts
index a7dc714f..ef1dd81f 100644
--- a/codex-ui/src/vue/components/confirm/useConfirm.ts
+++ b/codex-ui/src/vue/components/confirm/useConfirm.ts
@@ -8,7 +8,7 @@ export const useConfirm = createSharedComposable(() => {
    * Represents the result of the user's selection: false - Cancel button was pressed,
    * true - Confirm button was pressed, undefined - no selection has been made yet
    */
-  const result = ref<boolean | undefined>();
+  const result = ref<boolean>();
 
   /**
    * Used to create a Popup component that will display the current Confirm
@@ -20,7 +20,6 @@ export const useConfirm = createSharedComposable(() => {
    */
   function onCancel(): void {
     result.value = false;
-    console.log('The cancel button was pressed');
   }
 
   /**
@@ -28,7 +27,6 @@ export const useConfirm = createSharedComposable(() => {
    */
   function onConfirm(): void {
     result.value = true;
-    console.log('The confirm button was pressed');
   }
 
   /**
@@ -37,7 +35,7 @@ export const useConfirm = createSharedComposable(() => {
    * @param text - message to be displayed in confirm window
    * @returns user selection result
    */
-  async function confirm(title: string, text: string): Promise<boolean | undefined> {
+  async function confirm(title: string, text: string): Promise<boolean> {
     showPopup({
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       component: Confirm,
@@ -47,8 +45,17 @@ export const useConfirm = createSharedComposable(() => {
       },
     });
 
-    return new Promise<boolean | undefined>((resolve) => {
-      resolve(result.value);
+    /**
+     * Check every 100 ms to see if the user has pressed the button
+     */
+    return new Promise<boolean>((resolve) => {
+      const interval = setInterval(() => {
+        if (result.value !== undefined) {
+          clearInterval(interval);
+          resolve(result.value);
+        }
+      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+      }, 100);
     });
   };
 

From bffc40a024d12dad1cdd07ab3979907d19c79d10 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Wed, 24 Jul 2024 23:27:20 +0300
Subject: [PATCH 30/36] Remove interval

---
 codex-ui/src/vue/components/confirm/useConfirm.ts | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/codex-ui/src/vue/components/confirm/useConfirm.ts b/codex-ui/src/vue/components/confirm/useConfirm.ts
index ef1dd81f..cc0fe0bb 100644
--- a/codex-ui/src/vue/components/confirm/useConfirm.ts
+++ b/codex-ui/src/vue/components/confirm/useConfirm.ts
@@ -46,16 +46,12 @@ export const useConfirm = createSharedComposable(() => {
     });
 
     /**
-     * Check every 100 ms to see if the user has pressed the button
+     * Check if the user has pressed the confirm or close button
      */
     return new Promise<boolean>((resolve) => {
-      const interval = setInterval(() => {
-        if (result.value !== undefined) {
-          clearInterval(interval);
-          resolve(result.value);
-        }
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      }, 100);
+      if (result.value !== undefined) {
+        resolve(result.value);
+      }
     });
   };
 

From 97dae48a4b9f47d4664f697a7f1f7aed852bf40d Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Wed, 4 Sep 2024 22:30:16 +0300
Subject: [PATCH 31/36] Removed reduant onConfirm and onCancel fuctions

---
 .../src/vue/components/confirm/Confirm.vue    | 17 ++++++++++----
 .../src/vue/components/confirm/useConfirm.ts  | 23 +++++--------------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/codex-ui/src/vue/components/confirm/Confirm.vue b/codex-ui/src/vue/components/confirm/Confirm.vue
index cf6758f5..7dabeda1 100644
--- a/codex-ui/src/vue/components/confirm/Confirm.vue
+++ b/codex-ui/src/vue/components/confirm/Confirm.vue
@@ -33,11 +33,8 @@
 <script setup lang="ts">
 import Button from '../button/Button.vue';
 import { onMounted, onUnmounted } from 'vue';
-import { useConfirm } from './useConfirm';
 
-const { onCancel, onConfirm } = useConfirm();
-
-withDefaults(
+const props = withDefaults(
   defineProps<{
     /**
      * Text that will be displayed at the top of comfirm container
@@ -58,6 +55,16 @@ withDefaults(
      * Text that will be displayed in the cancel button
      */
     cancelText?: string;
+
+    /**
+     * Function that is executed after pressing the Cancel button
+     */
+    onCancel: () => void;
+
+    /**
+     * Function that is executed after pressing the Confirm button
+     */
+    onConfirm: () => void;
   }>(),
   {
     confirmText: 'Confirm',
@@ -73,7 +80,7 @@ withDefaults(
  */
 const confirmOnEnter = (event: { key: string }) => {
   if (event.key === 'Enter') {
-    onConfirm();
+    props.onConfirm;
   }
 };
 
diff --git a/codex-ui/src/vue/components/confirm/useConfirm.ts b/codex-ui/src/vue/components/confirm/useConfirm.ts
index cc0fe0bb..937291f1 100644
--- a/codex-ui/src/vue/components/confirm/useConfirm.ts
+++ b/codex-ui/src/vue/components/confirm/useConfirm.ts
@@ -16,21 +16,6 @@ export const useConfirm = createSharedComposable(() => {
   const { showPopup } = usePopup();
 
   /**
-   * Confirm button was pressed
-   */
-  function onCancel(): void {
-    result.value = false;
-  }
-
-  /**
-   * Cancel button was pressed
-   */
-  function onConfirm(): void {
-    result.value = true;
-  }
-
-  /**
-   *
    * @param title - title of the confirm window
    * @param text - message to be displayed in confirm window
    * @returns user selection result
@@ -42,6 +27,12 @@ export const useConfirm = createSharedComposable(() => {
       props: {
         title: title,
         text: text,
+        onCancel: () => {
+          result.value = false;
+        },
+        onConfirm: () => {
+          result.value = true;
+        },
       },
     });
 
@@ -57,7 +48,5 @@ export const useConfirm = createSharedComposable(() => {
 
   return {
     confirm,
-    onCancel,
-    onConfirm,
   };
 });

From ee91e7c2453c954eb6cd8cadac0e0654a1d6c57a Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Fri, 6 Sep 2024 21:51:42 +0300
Subject: [PATCH 32/36] Added separate page for Confirm

---
 codex-ui/dev/Playground.vue               |  5 +++
 codex-ui/dev/pages/components/Confirm.vue | 41 +++++++++++++++++++++++
 codex-ui/dev/routes.ts                    |  5 +++
 3 files changed, 51 insertions(+)
 create mode 100644 codex-ui/dev/pages/components/Confirm.vue

diff --git a/codex-ui/dev/Playground.vue b/codex-ui/dev/Playground.vue
index 7281962e..a171bef5 100644
--- a/codex-ui/dev/Playground.vue
+++ b/codex-ui/dev/Playground.vue
@@ -204,6 +204,11 @@ const pages = computed(() => [
         onActivate: () => router.push('/components/popup'),
         isActive: route.path === '/components/popup',
       },
+      {
+        title: 'Confirm',
+        onActivate: () => router.push('/components/confirm'),
+        isActive: route.path === '/components/confirm',
+      },
     ],
   },
 ]);
diff --git a/codex-ui/dev/pages/components/Confirm.vue b/codex-ui/dev/pages/components/Confirm.vue
new file mode 100644
index 00000000..caefff8a
--- /dev/null
+++ b/codex-ui/dev/pages/components/Confirm.vue
@@ -0,0 +1,41 @@
+<template>
+  <PageHeader>
+    Confirm
+    <template #description>
+      A component that allows you to accept or reject a message that appears
+    </template>
+  </PageHeader>
+  <Button
+    secondary
+    data-dimensions="large"
+    @click="show()"
+  >
+    Press here to open confirm window
+  </Button>
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { Button, useConfirm } from '../../../src/vue';
+
+const { confirm } = useConfirm();
+
+async function show() {
+  const res = await confirm(
+    'CodeX',
+    'Are you sure you want to delete the page?'
+  );
+
+  if (res) {
+    // eslint-disable-next-line no-console
+    console.log('The confirm button was pressed');
+  } else {
+    // eslint-disable-next-line no-console
+    console.log('The cancel button was pressed');
+  }
+}
+
+</script>
+
+<style scoped>
+</style>
diff --git a/codex-ui/dev/routes.ts b/codex-ui/dev/routes.ts
index 72221f22..8334a2c2 100644
--- a/codex-ui/dev/routes.ts
+++ b/codex-ui/dev/routes.ts
@@ -29,6 +29,7 @@ import ContextMenu from './pages/components/ContextMenu.vue';
 import Editor from './pages/components/Editor.vue';
 import ThemePreview from './pages/components/ThemePreview.vue';
 import Popup from './pages/components/Popup.vue';
+import Confirm from './pages/components/Confirm.vue';
 
 /**
  * Vue router routes list
@@ -150,6 +151,10 @@ const routes: RouteRecordRaw[] = [
     path: '/components/popup',
     component: Popup as Component,
   },
+  {
+    path: '/components/confirm',
+    component: Confirm as Component,
+  },
 ];
 
 export default routes;

From 28bd1c333100351d37ef7efadb136c602542566f Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Fri, 6 Sep 2024 22:40:35 +0300
Subject: [PATCH 33/36] Added stub text component

---
 codex-ui/dev/pages/components/Popup.vue       | 22 ++++++-------------
 .../src/vue/components/popup/StubText.vue     | 12 ++++++++++
 codex-ui/src/vue/components/popup/index.ts    |  4 +++-
 3 files changed, 22 insertions(+), 16 deletions(-)
 create mode 100644 codex-ui/src/vue/components/popup/StubText.vue

diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
index 9a92a87f..5c37f983 100644
--- a/codex-ui/dev/pages/components/Popup.vue
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -16,23 +16,15 @@
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { Button, useConfirm } from '../../../src/vue';
+import { StubText, Button, usePopup } from '../../../src/vue';
 
-const { confirm } = useConfirm();
+const { showPopup } = usePopup();
 
-async function show() {
-  const res = await confirm(
-    'CodeX',
-    'Are you sure you want to delete the page?'
-  );
-
-  if (res) {
-    // eslint-disable-next-line no-console
-    console.log('The confirm button was pressed');
-  } else {
-    // eslint-disable-next-line no-console
-    console.log('The cancel button was pressed');
-  }
+function show(): void {
+  showPopup({
+    component: StubText,
+    props: {},
+  });
 }
 
 </script>
diff --git a/codex-ui/src/vue/components/popup/StubText.vue b/codex-ui/src/vue/components/popup/StubText.vue
new file mode 100644
index 00000000..3d0f6518
--- /dev/null
+++ b/codex-ui/src/vue/components/popup/StubText.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    Popup can include any component
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+</style>
diff --git a/codex-ui/src/vue/components/popup/index.ts b/codex-ui/src/vue/components/popup/index.ts
index fcb3b2b0..a92dccf4 100644
--- a/codex-ui/src/vue/components/popup/index.ts
+++ b/codex-ui/src/vue/components/popup/index.ts
@@ -1,5 +1,7 @@
 import Popup from './Popup.vue';
+import StubText from './StubText.vue';
+
 export * from './usePopup';
 export * from './Popup.types';
 
-export { Popup };
+export { Popup, StubText };

From fb7215fa20f4695984ef389589721f1e03e06f30 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Fri, 6 Sep 2024 23:08:12 +0300
Subject: [PATCH 34/36] get rid of result ref

---
 .../src/vue/components/confirm/useConfirm.ts  | 44 +++++++------------
 1 file changed, 15 insertions(+), 29 deletions(-)

diff --git a/codex-ui/src/vue/components/confirm/useConfirm.ts b/codex-ui/src/vue/components/confirm/useConfirm.ts
index 937291f1..18aed3ea 100644
--- a/codex-ui/src/vue/components/confirm/useConfirm.ts
+++ b/codex-ui/src/vue/components/confirm/useConfirm.ts
@@ -1,15 +1,8 @@
 import { createSharedComposable } from '@vueuse/core';
 import { usePopup } from '../popup';
-import { ref } from 'vue';
 import { Confirm } from '.';
 
 export const useConfirm = createSharedComposable(() => {
-  /**
-   * Represents the result of the user's selection: false - Cancel button was pressed,
-   * true - Confirm button was pressed, undefined - no selection has been made yet
-   */
-  const result = ref<boolean>();
-
   /**
    * Used to create a Popup component that will display the current Confirm
    */
@@ -21,30 +14,23 @@ export const useConfirm = createSharedComposable(() => {
    * @returns user selection result
    */
   async function confirm(title: string, text: string): Promise<boolean> {
-    showPopup({
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      component: Confirm,
-      props: {
-        title: title,
-        text: text,
-        onCancel: () => {
-          result.value = false;
-        },
-        onConfirm: () => {
-          result.value = true;
-        },
-      },
-    });
-
-    /**
-     * Check if the user has pressed the confirm or close button
-     */
     return new Promise<boolean>((resolve) => {
-      if (result.value !== undefined) {
-        resolve(result.value);
-      }
+      showPopup({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        component: Confirm,
+        props: {
+          title: title,
+          text: text,
+          onCancel: () => {
+            resolve(false);
+          },
+          onConfirm: () => {
+            resolve(true);
+          },
+        },
+      });
     });
-  };
+  }
 
   return {
     confirm,

From 34ef9e1dfc09eeeeab38e4e4ab56539fd8883df4 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Fri, 6 Sep 2024 23:15:42 +0300
Subject: [PATCH 35/36] Move on Escape reaction in usePopup

---
 codex-ui/src/vue/components/popup/Popup.vue   | 22 +------------------
 codex-ui/src/vue/components/popup/usePopup.ts | 21 +++++++++++++++++-
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 142d0b78..2d04d139 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref } from 'vue';
 import Icon from '../icon/Icon.vue';
 import { usePopup } from './usePopup';
 import { onClickOutside } from '@vueuse/core';
@@ -45,18 +45,6 @@ const {
  */
 onClickOutside(popupEl, hidePopup);
 
-/**
- * Close the popup when esc was pressed
- *
- * @param event - the event object representing the keyboard event
- * @param event.key - the property of the event object that holds the value of the pressed key
- */
-const closeOnEsc = (event: { key: string }) => {
-  if (event.key === 'Escape') {
-    hidePopup();
-  }
-};
-
 withDefaults(
   defineProps<{
     /**
@@ -69,14 +57,6 @@ withDefaults(
   }
 );
 
-onMounted(() => {
-  document.addEventListener('keydown', closeOnEsc);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', closeOnEsc);
-});
-
 </script>
 
 <style module>
diff --git a/codex-ui/src/vue/components/popup/usePopup.ts b/codex-ui/src/vue/components/popup/usePopup.ts
index 2234a97c..6d2a731a 100644
--- a/codex-ui/src/vue/components/popup/usePopup.ts
+++ b/codex-ui/src/vue/components/popup/usePopup.ts
@@ -1,5 +1,5 @@
 import { createSharedComposable } from '@vueuse/core';
-import { ref, shallowRef } from 'vue';
+import { ref, shallowRef, onMounted, onUnmounted } from 'vue';
 import type { PopupContent } from './Popup.types';
 
 /**
@@ -66,6 +66,25 @@ export const usePopup = createSharedComposable(() => {
     isOpen.value = false;
   }
 
+  /**
+   * Close the popup when esc was pressed
+   * @param event - the event object representing the keyboard event
+   * @param event.key - the property of the event object that holds the value of the pressed key
+   */
+  const closeOnEsc = (event: { key: string }): void => {
+    if (event.key === 'Escape') {
+      hidePopup();
+    }
+  };
+
+  onMounted(() => {
+    document.addEventListener('keydown', closeOnEsc);
+  });
+
+  onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEsc);
+  });
+
   return {
     isOpen,
     showPopup,

From 84d5273f40e7a2fa048980935f2a0b507d45b627 Mon Sep 17 00:00:00 2001
From: elizachi <chigvintseva.elizaveta@gmail.com>
Date: Fri, 6 Sep 2024 23:44:20 +0300
Subject: [PATCH 36/36] Added hover to close button

---
 codex-ui/src/vue/components/popup/Popup.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
index 2d04d139..f5aa7cc3 100644
--- a/codex-ui/src/vue/components/popup/Popup.vue
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -89,6 +89,10 @@ withDefaults(
     padding: var(--spacing-very-x);
     box-shadow: inset 0 0 0 var(--delimiter-height);
     border-radius: var(--radius-l);
+
+    &:hover {
+      color: var(--base--text);
+    }
   }
 }