From 09944c7265e7b4e2a77a2754fc660537559a1ceb Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 13 Jun 2024 09:38:00 -0400
Subject: [PATCH 1/5] chore(sandbox): remove figma links

---
 sandbox/pages/SandboxAlert.vue              |  6 ------
 sandbox/pages/SandboxBadge.vue              | 12 +-----------
 sandbox/pages/SandboxBreadcrumbs.vue        |  6 ------
 sandbox/pages/SandboxButton.vue             |  9 ---------
 sandbox/pages/SandboxCard.vue               | 10 ----------
 sandbox/pages/SandboxCheckbox.vue           | 11 -----------
 sandbox/pages/SandboxCodeBlock.vue          |  9 ---------
 sandbox/pages/SandboxCollapse.vue           | 13 ++-----------
 sandbox/pages/SandboxDateTimePicker.vue     |  6 ------
 sandbox/pages/SandboxDropdown.vue           |  9 ---------
 sandbox/pages/SandboxEmptyState.vue         |  6 ------
 sandbox/pages/SandboxFileUpload.vue         |  6 ------
 sandbox/pages/SandboxInput.vue              | 15 +--------------
 sandbox/pages/SandboxInputSwitch.vue        | 17 ++---------------
 sandbox/pages/SandboxLabel.vue              | 19 +++----------------
 sandbox/pages/SandboxModals.vue             |  6 ------
 sandbox/pages/SandboxPagination.vue         |  9 ---------
 sandbox/pages/SandboxPop.vue                |  6 ------
 sandbox/pages/SandboxRadio.vue              | 11 -----------
 sandbox/pages/SandboxSegmentedControl.vue   |  6 ------
 sandbox/pages/SandboxSelect.vue             |  4 ----
 sandbox/pages/SandboxSkeleton.vue           |  6 ------
 sandbox/pages/SandboxSlideout.vue           |  6 ------
 sandbox/pages/SandboxStepper.vue            |  6 ------
 sandbox/pages/SandboxTable/SandboxTable.vue |  6 ------
 sandbox/pages/SandboxTabs.vue               |  6 ------
 sandbox/pages/SandboxTextarea.vue           |  9 ---------
 sandbox/pages/SandboxToaster.vue            |  6 ------
 sandbox/pages/SandboxTreeList.vue           |  6 ------
 29 files changed, 9 insertions(+), 238 deletions(-)

diff --git a/sandbox/pages/SandboxAlert.vue b/sandbox/pages/SandboxAlert.vue
index 03d6a1bdaf..40e8b29bfc 100644
--- a/sandbox/pages/SandboxAlert.vue
+++ b/sandbox/pages/SandboxAlert.vue
@@ -4,12 +4,6 @@
     title="KAlert"
   >
     <div class="kalert-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1105%3A733&mode=dev&t=6zTR9N7eIIoXGsX7-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxBadge.vue b/sandbox/pages/SandboxBadge.vue
index 63af90b628..a805851603 100644
--- a/sandbox/pages/SandboxBadge.vue
+++ b/sandbox/pages/SandboxBadge.vue
@@ -1,19 +1,9 @@
 <template>
   <SandboxLayout
     :links="inject('app-links', [])"
-    title="KButton"
+    title="KBadge"
   >
     <div class="kbadge-sandbox">
-      <SandboxTitleComponent
-        title="KBadge"
-      >
-        <template #description>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=467%3A10283&mode=dev">
-            Figma
-          </KExternalLink>
-        </template>
-      </SandboxTitleComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxBreadcrumbs.vue b/sandbox/pages/SandboxBreadcrumbs.vue
index d5076d6127..0a3c61dcc6 100644
--- a/sandbox/pages/SandboxBreadcrumbs.vue
+++ b/sandbox/pages/SandboxBreadcrumbs.vue
@@ -4,12 +4,6 @@
     title="KBreadcrumbs"
   >
     <div class="kbreadcrumbs-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=470%3A22444&mode=dev&t=tS1kk3tqkOVTlZ8a-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxButton.vue b/sandbox/pages/SandboxButton.vue
index 6b985e2fb0..847b0a1c84 100644
--- a/sandbox/pages/SandboxButton.vue
+++ b/sandbox/pages/SandboxButton.vue
@@ -4,15 +4,6 @@
     title="KButton"
   >
     <div class="kbutton-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=0%3A1&mode=dev">
-        Figma
-      </KExternalLink>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
index 7f39d78ce2..3751877deb 100644
--- a/sandbox/pages/SandboxCard.vue
+++ b/sandbox/pages/SandboxCard.vue
@@ -4,16 +4,6 @@
     title="KCard"
   >
     <div class="kcard-sandbox">
-      <SandboxTitleComponent
-        title="KCard"
-      >
-        <template #description>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1152%3A19831&mode=dev">
-            Figma
-          </KExternalLink>
-        </template>
-      </SandboxTitleComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxCheckbox.vue b/sandbox/pages/SandboxCheckbox.vue
index 891cc4cbd6..84ec8703f6 100644
--- a/sandbox/pages/SandboxCheckbox.vue
+++ b/sandbox/pages/SandboxCheckbox.vue
@@ -4,18 +4,7 @@
     title="KCheckbox"
   >
     <div class="kcheckbox-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
       <SandboxSectionComponent>
-        <div>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=283%3A2899&mode=dev">
-            Figma
-          </KExternalLink>
-        </div>
-
         <div class="grid-container standalone-container">
           <div class="vertical-spacing">
             <KCheckbox
diff --git a/sandbox/pages/SandboxCodeBlock.vue b/sandbox/pages/SandboxCodeBlock.vue
index 58cd0c6b38..7a8cee785f 100644
--- a/sandbox/pages/SandboxCodeBlock.vue
+++ b/sandbox/pages/SandboxCodeBlock.vue
@@ -4,15 +4,6 @@
     title="KCodeBlock"
   >
     <div class="kcodeblock-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A11253&mode=dev&t=wfYkBJZ5Ry0OUS2m-1">
-        Figma
-      </KExternalLink>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxCollapse.vue b/sandbox/pages/SandboxCollapse.vue
index d3821a7c34..328330f1f1 100644
--- a/sandbox/pages/SandboxCollapse.vue
+++ b/sandbox/pages/SandboxCollapse.vue
@@ -1,18 +1,9 @@
 <template>
   <SandboxLayout
     :links="inject('app-links', [])"
-    title="KPagination"
+    title="KCollapse"
   >
-    <div class="kpagination-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A11254&mode=dev&t=z4m6LiZVAeHHwxSH-1">
-        Figma
-      </KExternalLink>
-
+    <div class="kcollapse-sandbox">
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxDateTimePicker.vue b/sandbox/pages/SandboxDateTimePicker.vue
index b4c0bf6290..47b3f36586 100644
--- a/sandbox/pages/SandboxDateTimePicker.vue
+++ b/sandbox/pages/SandboxDateTimePicker.vue
@@ -4,12 +4,6 @@
     title="KDateTimePicker"
   >
     <div class="kdatetimepicker-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A11255&mode=dev&t=7C3HUCeWQiS7AhA7-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxDropdown.vue b/sandbox/pages/SandboxDropdown.vue
index 89b30f9337..ed44d87531 100644
--- a/sandbox/pages/SandboxDropdown.vue
+++ b/sandbox/pages/SandboxDropdown.vue
@@ -4,15 +4,6 @@
     title="KDropdown"
   >
     <div class="kdropdown-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=466%3A9443&mode=dev">
-        Figma
-      </KExternalLink>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxEmptyState.vue b/sandbox/pages/SandboxEmptyState.vue
index 2ad50807df..5be6afbaea 100644
--- a/sandbox/pages/SandboxEmptyState.vue
+++ b/sandbox/pages/SandboxEmptyState.vue
@@ -4,12 +4,6 @@
     title="KEmptyState"
   >
     <div class="kemptystate-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A11252&mode=dev&t=oHjbEUosoGUvnzuN-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxFileUpload.vue b/sandbox/pages/SandboxFileUpload.vue
index 034f08bdd6..73faba551e 100644
--- a/sandbox/pages/SandboxFileUpload.vue
+++ b/sandbox/pages/SandboxFileUpload.vue
@@ -4,12 +4,6 @@
     title="KFileUpload"
   >
     <div class="kfileupload-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=285%3A2601&mode=dev">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxInput.vue b/sandbox/pages/SandboxInput.vue
index 7f8a228ec3..039b07b8e9 100644
--- a/sandbox/pages/SandboxInput.vue
+++ b/sandbox/pages/SandboxInput.vue
@@ -4,21 +4,8 @@
     title="KInput"
   >
     <div class="kinput-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
       <SandboxSectionComponent>
-        <div>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=218%3A646&mode=dev">
-            Figma
-          </KExternalLink>
-        </div>
-
-        <div>
-          <KInput />
-        </div>
+        <KInput />
       </SandboxSectionComponent>
 
       <!-- Props -->
diff --git a/sandbox/pages/SandboxInputSwitch.vue b/sandbox/pages/SandboxInputSwitch.vue
index 33c20e8d43..7a7c42915e 100644
--- a/sandbox/pages/SandboxInputSwitch.vue
+++ b/sandbox/pages/SandboxInputSwitch.vue
@@ -1,24 +1,11 @@
 <template>
   <SandboxLayout
     :links="inject('app-links', [])"
-    title="KLabel"
+    title="KInputSwitch"
   >
     <div class="kinputswitch-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
       <SandboxSectionComponent>
-        <div>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=624%3A12900&mode=dev">
-            Figma
-          </KExternalLink>
-        </div>
-
-        <div>
-          <KInputSwitch v-model="vModel0" />
-        </div>
+        <KInputSwitch v-model="vModel0" />
       </SandboxSectionComponent>
 
       <!-- Props -->
diff --git a/sandbox/pages/SandboxLabel.vue b/sandbox/pages/SandboxLabel.vue
index e33b1e9776..7f57da7566 100644
--- a/sandbox/pages/SandboxLabel.vue
+++ b/sandbox/pages/SandboxLabel.vue
@@ -4,23 +4,10 @@
     title="KLabel"
   >
     <div class="klabel-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
       <SandboxSectionComponent>
-        <div>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=418%3A15878&mode=dev">
-            Figma
-          </KExternalLink>
-        </div>
-
-        <div>
-          <KLabel>
-            This is a label
-          </KLabel>
-        </div>
+        <KLabel>
+          This is a label
+        </KLabel>
       </SandboxSectionComponent>
 
       <!-- Props -->
diff --git a/sandbox/pages/SandboxModals.vue b/sandbox/pages/SandboxModals.vue
index b67c394983..c0d637f1c0 100644
--- a/sandbox/pages/SandboxModals.vue
+++ b/sandbox/pages/SandboxModals.vue
@@ -4,12 +4,6 @@
     title="KModal & KPrompt"
   >
     <div class="kmodals-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1292%3A5056&mode=dev&t=7C3HUCeWQiS7AhA7-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxPagination.vue b/sandbox/pages/SandboxPagination.vue
index b80811db82..2e11495611 100644
--- a/sandbox/pages/SandboxPagination.vue
+++ b/sandbox/pages/SandboxPagination.vue
@@ -4,15 +4,6 @@
     title="KPagination"
   >
     <div class="kpagination-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A12478&mode=dev">
-        Figma
-      </KExternalLink>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxPop.vue b/sandbox/pages/SandboxPop.vue
index 7def908661..bd8bd5efc7 100644
--- a/sandbox/pages/SandboxPop.vue
+++ b/sandbox/pages/SandboxPop.vue
@@ -4,12 +4,6 @@
     title="KPop"
   >
     <div class="kpop-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1470%3A3448&mode=dev&t=qJAFUBmW2m9dkFvT-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxRadio.vue b/sandbox/pages/SandboxRadio.vue
index 0352aee01b..6b5de061bc 100644
--- a/sandbox/pages/SandboxRadio.vue
+++ b/sandbox/pages/SandboxRadio.vue
@@ -4,18 +4,7 @@
     title="KRadio"
   >
     <div class="kradio-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
       <SandboxSectionComponent>
-        <div>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=763%3A12969&mode=dev">
-            Figma
-          </KExternalLink>
-        </div>
-
         <div class="grid-container standalone-container">
           <div class="vertical-spacing">
             <KRadio
diff --git a/sandbox/pages/SandboxSegmentedControl.vue b/sandbox/pages/SandboxSegmentedControl.vue
index af61871eea..b00537e9ac 100644
--- a/sandbox/pages/SandboxSegmentedControl.vue
+++ b/sandbox/pages/SandboxSegmentedControl.vue
@@ -4,12 +4,6 @@
     title="KSegmentedControl"
   >
     <div class="ksegmentedcontrol-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1244%3A14989&mode=dev">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxSelect.vue b/sandbox/pages/SandboxSelect.vue
index 76e6959b43..67ae78b41e 100644
--- a/sandbox/pages/SandboxSelect.vue
+++ b/sandbox/pages/SandboxSelect.vue
@@ -4,10 +4,6 @@
     title="KSelect"
   >
     <div class="kselect-sandbox">
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=283%3A2898&mode=dev">
-        Figma
-      </KExternalLink>
-
       <!-- Examples -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxSkeleton.vue b/sandbox/pages/SandboxSkeleton.vue
index 73367294bb..2facdb4292 100644
--- a/sandbox/pages/SandboxSkeleton.vue
+++ b/sandbox/pages/SandboxSkeleton.vue
@@ -4,12 +4,6 @@
     title="KSkeleton"
   >
     <div class="kskeleton-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A12479&mode=dev&t=uQGBuUCQfJdk9Uab-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <SandboxSectionComponent title="default">
         <KSkeleton />
       </SandboxSectionComponent>
diff --git a/sandbox/pages/SandboxSlideout.vue b/sandbox/pages/SandboxSlideout.vue
index 2478caeaa5..47928329b3 100644
--- a/sandbox/pages/SandboxSlideout.vue
+++ b/sandbox/pages/SandboxSlideout.vue
@@ -4,12 +4,6 @@
     title="KSlideout"
   >
     <div class="kslideout-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A9543&mode=dev&t=USFhEkebi5cmYxaK-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxStepper.vue b/sandbox/pages/SandboxStepper.vue
index 580c522230..c62d7f438d 100644
--- a/sandbox/pages/SandboxStepper.vue
+++ b/sandbox/pages/SandboxStepper.vue
@@ -4,12 +4,6 @@
     title="KStepper"
   >
     <div class="kstepper-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2760%3A12829&mode=dev&t=m6UqtRoz81rfy7Vk-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxTable/SandboxTable.vue b/sandbox/pages/SandboxTable/SandboxTable.vue
index b62a474d09..f416f02694 100644
--- a/sandbox/pages/SandboxTable/SandboxTable.vue
+++ b/sandbox/pages/SandboxTable/SandboxTable.vue
@@ -4,12 +4,6 @@
     title="KTable"
   >
     <div class="ktable-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=418%3A12464&mode=dev&t=qJAFUBmW2m9dkFvT-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxTabs.vue b/sandbox/pages/SandboxTabs.vue
index 8ed14c5f98..a75c2c7e47 100644
--- a/sandbox/pages/SandboxTabs.vue
+++ b/sandbox/pages/SandboxTabs.vue
@@ -4,12 +4,6 @@
     title="KTabs"
   >
     <div class="ktabs-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=297%3A3525&mode=dev">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxTextarea.vue b/sandbox/pages/SandboxTextarea.vue
index b3456e8bbd..2e861a3e47 100644
--- a/sandbox/pages/SandboxTextarea.vue
+++ b/sandbox/pages/SandboxTextarea.vue
@@ -4,15 +4,6 @@
     title="KTextarea"
   >
     <div class="ktextarea-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=737%3A10936&mode=dev">
-        Figma
-      </KExternalLink>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxToaster.vue b/sandbox/pages/SandboxToaster.vue
index f1a7b8e6a7..351955ca66 100644
--- a/sandbox/pages/SandboxToaster.vue
+++ b/sandbox/pages/SandboxToaster.vue
@@ -4,12 +4,6 @@
     title="KToaster"
   >
     <div class="ktoaster-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=497%3A9761&mode=dev&t=lcG4fMxcpZoeYwsC-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
diff --git a/sandbox/pages/SandboxTreeList.vue b/sandbox/pages/SandboxTreeList.vue
index 792f051e2f..e34f9fc627 100644
--- a/sandbox/pages/SandboxTreeList.vue
+++ b/sandbox/pages/SandboxTreeList.vue
@@ -4,12 +4,6 @@
     title="KTreeList"
   >
     <div class="ktreelist-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A12779&mode=dev&t=sqzAn4PCrvEoYpdz-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

From ec74f57b03b264a6d086a8f3836494b8f79c6152 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 13 Jun 2024 09:39:55 -0400
Subject: [PATCH 2/5] fix(kdropdown): update dropdown popover selector

---
 docs/guide/migrating-to-version-9.md     | 2 +-
 src/components/KDropdown/KDropdown.cy.ts | 4 ++--
 src/components/KDropdown/KDropdown.vue   | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 2b200f13aa..dc171c0bf2 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -361,7 +361,7 @@ Component has been renamed to `KDropdown`
 #### Structure
 
 * `k-dropdown-menu` class has been removed (`k-dropdown` class remains)
-* `k-dropdown-menu-popover` `data-testid` attribute has been renamed to `k-dropdown-popover`
+* `k-dropdown-menu-popover` `data-testid` attribute has been renamed to `dropdown-popover`
 * `k-dropdown-trigger` class has been removed
 * `k-dropdown-trigger` `data-testid` attribute has been renamed to `dropdown-trigger`
 * `k-dropdown-btn` class has been renamed to `dropdown-trigger-button`
diff --git a/src/components/KDropdown/KDropdown.cy.ts b/src/components/KDropdown/KDropdown.cy.ts
index be7a3911d6..424e1bb088 100644
--- a/src/components/KDropdown/KDropdown.cy.ts
+++ b/src/components/KDropdown/KDropdown.cy.ts
@@ -50,7 +50,7 @@ describe('KDropdown', () => {
 
     cy.getTestId('dropdown-trigger').click({ force: true })
 
-    cy.get('.k-dropdown-popover .popover-container').invoke('width').should('eq', width)
+    cy.get('.dropdown-popover .popover-container').invoke('width').should('eq', width)
   })
 
   it('renders disabled props when passed', () => {
@@ -119,7 +119,7 @@ describe('KDropdown', () => {
     cy.getTestId('dropdown-list').should('be.visible')
 
     cy.getTestId('dropdown-trigger').should('contain.html', triggerSlotContent)
-    cy.get('.k-dropdown-popover').should('contain.html', itemSlotContent)
+    cy.get('.dropdown-popover').should('contain.html', itemSlotContent)
   })
 
   it('correctly renders all item types and dividers', () => {
diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue
index fc204661dd..499acc2f1a 100644
--- a/src/components/KDropdown/KDropdown.vue
+++ b/src/components/KDropdown/KDropdown.vue
@@ -8,7 +8,7 @@
         ref="kPop"
         v-bind="boundKPopAttributes"
         close-on-popover-click
-        data-testid="k-dropdown-popover"
+        data-testid="dropdown-popover"
         hide-close-icon
         @close="() => handleTriggerToggle(isToggled, toggle, false)"
         @open="() => handleTriggerToggle(isToggled, toggle, true)"
@@ -160,7 +160,7 @@ const tooltipComponent = computed(() => props.disabledTooltip ? KTooltip : 'div'
 const kPop = ref<InstanceType<typeof KPop> | null>(null)
 const defaultKPopAttributes = {
   hideCaret: true,
-  popoverClasses: 'k-dropdown-popover',
+  popoverClasses: 'dropdown-popover',
   popoverTimeout: 0,
   placement: 'bottom-start' as PopPlacements,
 }
@@ -223,7 +223,7 @@ onMounted(() => {
     width: 100%;
   }
 
-  :deep(.popover.k-dropdown-popover > .popover-container) {
+  :deep(.popover.dropdown-popover > .popover-container) {
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
     margin-top: var(--kui-space-30, $kui-space-30);

From aad6cfaf282bec2c4b162546e4de932315571c1a Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 13 Jun 2024 09:46:29 -0400
Subject: [PATCH 3/5] docs: move style overrides

---
 docs/.vitepress/theme/_overrides.scss | 12 ++++++++++++
 docs/components/alert.md              |  9 ---------
 docs/components/empty-state.md        |  9 ---------
 3 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/docs/.vitepress/theme/_overrides.scss b/docs/.vitepress/theme/_overrides.scss
index 97b55752b8..92da5974d6 100644
--- a/docs/.vitepress/theme/_overrides.scss
+++ b/docs/.vitepress/theme/_overrides.scss
@@ -36,4 +36,16 @@
       }
     }
   }
+
+  .k-alert {
+    p {
+      line-height: $kui-line-height-30; // .alert-message line-height
+    }
+  }
+
+  .k-empty-state {
+    p {
+      line-height: $kui-line-height-30; // .empty-state-message line-height
+    }
+  }
 }
diff --git a/docs/components/alert.md b/docs/components/alert.md
index e4467527ce..e03cb3c433 100644
--- a/docs/components/alert.md
+++ b/docs/components/alert.md
@@ -255,12 +255,3 @@ const showAlert = ref<boolean>(true)
   gap: $kui-space-50;
 }
 </style>
-
-<style lang="scss">
-// overwrite vitepress styles
-.k-alert {
-  p {
-    line-height: $kui-line-height-30; // .alert-message line-height
-  }
-}
-</style>
diff --git a/docs/components/empty-state.md b/docs/components/empty-state.md
index c3ffff595b..3a8a7be4e8 100644
--- a/docs/components/empty-state.md
+++ b/docs/components/empty-state.md
@@ -319,12 +319,3 @@ const onActionClick = (): void => {
   alert('Action button clicked!')
 }
 </script>
-
-<style lang="scss">
-// overwrite vitepress styles
-.k-empty-state {
-  p {
-    line-height: $kui-line-height-30; // .empty-state-message line-height
-  }
-}
-</style>

From 33c488ccf0e1ffddcdb27f38daf6228f1f58bcb6 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 13 Jun 2024 13:40:23 -0400
Subject: [PATCH 4/5] chore(docs): focs index page tweaks

---
 docs/index.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/index.md b/docs/index.md
index a7f7f5338c..4d7ab4deee 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -38,11 +38,16 @@ features:
     linkText: View changes
 ---
 
-<style>
+<style lang="scss">
 /* Homepage Components button */
 .VPContent.is-home .VPButton.medium.alt[href^="/components/"] {
   color: #fff;
   border-color: #07a88d;
   background-color: #07a88d;
+
+  &:hover {
+    border-color: #06977E;
+    background-color: #06977E;
+  }
 }
 </style>

From b29a4a90efb3aec0c81551ab5fde6e8851ee3d09 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 14 Jun 2024 12:19:18 -0400
Subject: [PATCH 5/5] fix(kselect): custom element with to account for caret

---
 sandbox/pages/SandboxSelect.vue    | 42 +++++++++++++++++++++++-------
 src/components/KSelect/KSelect.vue |  6 +++--
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/sandbox/pages/SandboxSelect.vue b/sandbox/pages/SandboxSelect.vue
index 67ae78b41e..c63f1af79a 100644
--- a/sandbox/pages/SandboxSelect.vue
+++ b/sandbox/pages/SandboxSelect.vue
@@ -120,16 +120,21 @@
           :items="selectItems"
         />
       </SandboxSectionComponent>
-      <SandboxSectionComponent
-        title="reuseItemTemplate"
-      >
+      <SandboxSectionComponent title="reuseItemTemplate">
         <KSelect
           :items="selectItems"
           reuse-item-template
         >
           <template #item-template="{ item }">
-            <KongIcon />
-            {{ item?.label }}!
+            <div class="custom-selected-item-container">
+              <div class="title">
+                <KongIcon />
+                {{ item?.label }}
+              </div>
+              <KBadge v-if="item.label.toLocaleLowerCase() === 'cats' || item.label.toLocaleLowerCase() === 'dogs'">
+                {{ item.label.toLocaleLowerCase() === 'cats' ? 'Feline' : 'Canine' }}
+              </KBadge>
+            </div>
           </template>
         </KSelect>
       </SandboxSectionComponent>
@@ -178,9 +183,7 @@
           </template>
         </KSelect>
       </SandboxSectionComponent>
-      <SandboxSectionComponent
-        title="itemTemplate"
-      >
+      <SandboxSectionComponent title="itemTemplate">
         <KSelect
           :items="selectItems"
         >
@@ -199,12 +202,20 @@
         title="selectedItemTemplate"
       >
         <KSelect
+          clearable
           enable-filtering
           :items="selectItems"
         >
           <template #selected-item-template="{ item }">
-            <KongIcon />
-            {{ item?.label }}
+            <div class="custom-selected-item-container">
+              <div class="title">
+                <KongIcon />
+                {{ item?.label }}
+              </div>
+              <KBadge v-if="item?.label.toLocaleLowerCase() === 'cats' || item?.label.toLocaleLowerCase() === 'dogs'">
+                {{ item?.label.toLocaleLowerCase() === 'cats' ? 'Feline' : 'Canine' }}
+              </KBadge>
+            </div>
           </template>
         </KSelect>
         <p>Truncation of long content is NOT handled by the component.</p>
@@ -431,5 +442,16 @@ onMounted(() => {
       font-size: $kui-font-size-20;
     }
   }
+
+  .custom-selected-item-container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    .title {
+      display: flex;
+      gap: $kui-space-30;
+    }
+  }
 }
 </style>
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index 131f7ebc24..52e14aa60e 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -738,6 +738,8 @@ $kSelectInputHelpTextHeight: calc(var(--kui-line-height-20, $kui-line-height-20)
     box-sizing: border-box;
     inset: 0;
     margin-left: $kSelectInputPaddingX;
+    // accommodate for the caret
+    max-width: calc(v-bind('actualElementWidth') - $kSelectInputPaddingX - $kSelectInputIconSize - ($kSelectInputSlotSpacing * 2));
     overflow: hidden;
     padding: var(--kui-space-0, $kui-space-0); // override mixin
     pointer-events: none;
@@ -752,8 +754,8 @@ $kSelectInputHelpTextHeight: calc(var(--kui-line-height-20, $kui-line-height-20)
     }
 
     &.clearable {
-      // accommodate for the clear icon
-      max-width: calc(v-bind('actualElementWidth') - ($kSelectInputPaddingX * 2) - ($kSelectInputIconSize * 2) - ($kSelectInputSlotSpacing * 2));
+      // accommodate for the clear icon and caret
+      max-width: calc(v-bind('actualElementWidth') - ($kSelectInputPaddingX * 2) - ($kSelectInputIconSize * 2) - $kSelectInputSlotSpacing);
     }
   }