diff --git a/packages/bbui/src/DropdownMenu/DropdownMenu.svelte b/packages/bbui/src/DropdownMenu/DropdownMenu.svelte
deleted file mode 100644
index f0079d845e..0000000000
--- a/packages/bbui/src/DropdownMenu/DropdownMenu.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-  import "@spectrum-css/popover/dist/index-vars.css"
-  import Portal from "svelte-portal"
-  import { createEventDispatcher } from "svelte"
-  import positionDropdown from "../Actions/position_dropdown"
-  import clickOutside from "../Actions/click_outside"
-
-  const dispatch = createEventDispatcher()
-
-  export let anchor
-  export let align = "right"
-
-  export const show = () => {
-    dispatch("open")
-    open = true
-  }
-
-  export const hide = () => {
-    dispatch("close")
-    open = false
-  }
-
-  let open = null
-
-  function handleEscape(e) {
-    if (open && e.key === "Escape") {
-      hide()
-    }
-  }
-</script>
-
-{#if open}
-  <Portal>
-    <div
-      tabindex="0"
-      use:positionDropdown={{ anchor, align }}
-      use:clickOutside={hide}
-      on:keydown={handleEscape}
-      class="spectrum-Popover is-open"
-      role="presentation">
-      <slot />
-    </div>
-  </Portal>
-{/if}
diff --git a/packages/bbui/src/DropdownMenu/DropdownMenu.svench b/packages/bbui/src/DropdownMenu/DropdownMenu.svench
deleted file mode 100644
index af4e32db2e..0000000000
--- a/packages/bbui/src/DropdownMenu/DropdownMenu.svench
+++ /dev/null
@@ -1,161 +0,0 @@
-<script>
-  import { View } from "svench";
-  import DropdownMenu from "./DropdownMenu.svelte";
-  import Button from "../Button/Button.svelte";
-  import Icon from "../Icons/Icon.svelte";
-
-  let anchorRight;
-  let anchorLeft;
-  let dropdownRight;
-  let dropdownLeft;
-</script>
-
-<style>
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
-</style>
-
-<View name="Right Align (default)">
-  <div bind:this={anchorRight}>
-    <Button primary on:click={dropdownRight.show}>Right Align</Button>
-  </div>
-  <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
-    <ul>
-      <li>Item 1</li>
-      <li>Item 2</li>
-      <li>Item 3</li>
-    </ul>
-  </DropdownMenu>
-</View>
-
-<View name="Left Align">
-  <div bind:this={anchorLeft}>
-    <Button primary on:click={dropdownLeft.show}>Left Align</Button>
-  </div>
-  <DropdownMenu bind:this={dropdownLeft} anchor={anchorLeft} align="left">
-    <ul>
-      <li>Item 1</li>
-      <li>Item 2</li>
-      <li>Item 3</li>
-    </ul>
-  </DropdownMenu>
-</View>
-
-<View name="Left Align, TextButton, Small, Icons">
-  <div bind:this={anchorLeft}>
-    <Button text on:click={dropdownLeft.show}>
-      Field Name
-      <Icon name="arrowdown" />
-    </Button>
-  </div>
-  <DropdownMenu bind:this={dropdownLeft} anchor={anchorLeft} align="left">
-    <ul>
-      <li>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li>
-        <Icon name="delete" />
-        Delete
-      </li>
-      <li>
-        <Icon name="sortascending" />
-        Sort A - Z
-      </li>
-      <li>
-        <Icon name="sortdescending" />
-        Sort Z - A
-      </li>
-    </ul>
-  </DropdownMenu>
-</View>
-<View name="Dropdown menu with slim menu and border color">
-  <div bind:this={anchorLeft}>
-    <Button primary on:click={dropdownLeft.show}>
-      Field Name
-      <Icon name="arrowdown" />
-    </Button>
-  </div>
-  <DropdownMenu
-    bind:this={dropdownLeft}
-    width="175px"
-    borderColor="#d1d1d1ff"
-    anchor={anchorLeft}
-    align="left">
-    <ul>
-      <li>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li>
-        <Icon name="delete" />
-        Delete
-      </li>
-      <li>
-        <Icon name="sortascending" />
-        Sort A - Z
-      </li>
-      <li>
-        <Icon name="sortdescending" />
-        Sort Z - A
-      </li>
-    </ul>
-  </DropdownMenu>
-</View>
-<View name="Dropdown on close event example">
-  <div bind:this={anchorLeft}>
-    <Button primary on:click={dropdownLeft.show}>
-      Field Name
-      <Icon name="arrowdown" />
-    </Button>
-  </div>
-  <DropdownMenu
-    on:close={() => alert('Closed!')}
-    bind:this={dropdownLeft}
-    width="175px"
-    borderColor="#d1d1d1ff"
-    anchor={anchorLeft}
-    align="left">
-    <ul>
-      <li>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li>
-        <Icon name="delete" />
-        Delete
-      </li>
-      <li>
-        <Icon name="sortascending" />
-        Sort A - Z
-      </li>
-      <li>
-        <Icon name="sortdescending" />
-        Sort Z - A
-      </li>
-    </ul>
-  </DropdownMenu>
-</View>
\ No newline at end of file