Add new common components for dropdown styles

packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte

@@ -0,0 +1,13 @@
+<div class="dropdown-container">
+  <slot />
+</div>
+
+<style>
+  .dropdown-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: var(--spacing-s) 0;
+  }
+</style>

packages/builder/src/components/common/Dropdowns/DropdownItem.svelte

@@ -0,0 +1,57 @@
+<script>
+  export let icon
+  export let title
+  export let subtitle
+</script>
+
+<div class="dropdown-item" on:click>
+  {#if icon}<i class={icon} />{/if}
+  <div class="content">
+    <div class="title">{title}</div>
+    {#if subtitle}
+      <div class="subtitle">{subtitle}</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .dropdown-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+    padding: var(--spacing-s) var(--spacing-l);
+  }
+  .dropdown-item:hover {
+    background-color: var(--grey-2);
+    cursor: pointer;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .title,
+  .subtitle {
+    font-size: var(--font-size-xs);
+  }
+
+  .title {
+    font-weight: 500;
+    color: var(--ink);
+  }
+
+  .subtitle {
+    color: var(--grey-7);
+    font-weight: 400;
+  }
+
+  i {
+    font-size: 16px;
+    color: var(--ink);
+  }
+</style>

packages/builder/src/components/common/Dropdowns/index.js

@@ -0,0 +1,2 @@
+export { default as DropdownContainer } from "./DropdownContainer.svelte"
+export { default as DropdownItem } from "./DropdownItem.svelte"