diff --git a/packages/core/package.json b/packages/core/package.json
index a7f3b8347..519ba9af2 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -19,12 +19,13 @@
     },
     "./prime.css": "./prime.css",
     "./plugins": "./plugins.ts",
-    "./theme": "./theme.ts"
+    "./theme": "./src/lib/theme.ts"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "src/lib/theme.ts",
     "theme.ts",
     "plugins.ts",
     "prime.css",
@@ -86,6 +87,7 @@
     "publint": "^0.2.6",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",
+    "svelte-select": "^5.8.3",
     "tailwindcss": "^3.3.7",
     "tslib": "^2.6.2",
     "type-fest": "^4.8.3",
diff --git a/packages/core/src/lib/select/__tests__/searchable-select.spec.ts b/packages/core/src/lib/select/__tests__/autocomplete-input.spec.ts
similarity index 86%
rename from packages/core/src/lib/select/__tests__/searchable-select.spec.ts
rename to packages/core/src/lib/select/__tests__/autocomplete-input.spec.ts
index fb21a22f7..947ce5c1f 100644
--- a/packages/core/src/lib/select/__tests__/searchable-select.spec.ts
+++ b/packages/core/src/lib/select/__tests__/autocomplete-input.spec.ts
@@ -3,10 +3,9 @@ import { act, render, screen, within } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import type { ComponentProps } from 'svelte';
 
-import { SearchableSelect as Subject, InputStates } from '$lib';
+import { AutocompleteInput as Subject, InputStates } from '$lib';
 
 const onChange = vi.fn();
-const onMultiChange = vi.fn();
 const onFocus = vi.fn();
 const onBlur = vi.fn();
 const detailedOptions = [
@@ -29,7 +28,6 @@ const renderSubject = (props: Partial<ComponentProps<Subject>> = {}) => {
   return render(Subject, {
     options: stringOptions,
     onChange,
-    onMultiChange,
     onFocus,
     onBlur,
     ...props,
@@ -175,7 +173,7 @@ describe('SearchableSelect', () => {
 
   it('closes the listbox if no options', async () => {
     const user = userEvent.setup();
-    renderSubject({ exclusive: true, sort: 'reduce' });
+    renderSubject();
 
     const { search } = getResults();
     await user.type(search, 'asdf');
@@ -362,7 +360,7 @@ describe('SearchableSelect', () => {
 
     // Define new options
     const newOptions = [
-      { value: 'New Option 1' },
+      'New Option 1',
       { value: 'opt1', label: 'New Option 2' },
       { value: 'opt3', label: 'New Option 3', icon: 'apple' as const },
     ];
@@ -386,7 +384,6 @@ describe('SearchableSelect', () => {
     const user = userEvent.setup();
     renderSubject({
       options: detailedOptions,
-      exclusive: true,
     });
 
     const { search } = getResults();
@@ -411,7 +408,6 @@ describe('SearchableSelect', () => {
     const user = userEvent.setup();
     renderSubject({
       options: detailedOptions,
-      exclusive: true,
     });
 
     const { search } = getResults();
@@ -464,24 +460,10 @@ describe('SearchableSelect', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
-  it('keeps last selected value if menu is closed with escape (non exclusive)', async () => {
+  it('keeps last selected value if menu is closed with escape', async () => {
     const user = userEvent.setup();
     renderSubject();
 
-    const { search } = getResults();
-    await user.type(search, 'testFoo{Enter}');
-    expect(onChange).toHaveBeenCalledWith('testFoo');
-    expect(search).toHaveValue('testFoo');
-    onChange.mockReset();
-    await user.type(search, 'ohNoIMeantToClickElsewhereOops{Escape}{Tab}');
-    expect(search).toHaveValue('testFoo');
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  it('keeps last selected value if menu is closed with escape (exclusive)', async () => {
-    const user = userEvent.setup();
-    renderSubject({ exclusive: true });
-
     const { search } = getResults();
     await user.type(search, 'the other{Enter}');
     expect(onChange).toHaveBeenCalledWith('the other side');
@@ -492,89 +474,6 @@ describe('SearchableSelect', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
-  it('has an "other" option when not exclusive', async () => {
-    const user = userEvent.setup();
-    renderSubject();
-
-    const { search } = getResults();
-    await user.type(search, 'hello');
-    const { options } = getResults();
-
-    expect(options).toHaveLength(3);
-    expect(options[0]).toHaveAccessibleName('hello from');
-    expect(options[1]).toHaveAccessibleName('the other side');
-    expect(options[2]).toHaveAccessibleName('hello');
-    expect(options[2]).toHaveAttribute('aria-selected', 'false');
-  });
-
-  it('sets an "other" option as active when no search matches', async () => {
-    const user = userEvent.setup();
-    renderSubject();
-
-    const { search } = getResults();
-    await user.type(search, 'asdf');
-    const { options } = getResults();
-
-    expect(options[2]).toHaveAccessibleName('asdf');
-    expect(options[2]).toHaveAttribute('aria-selected', 'true');
-    expect(search).toHaveAttribute('aria-activedescendant', options[2]?.id);
-  });
-
-  it('has no "other" option when value empty', async () => {
-    const user = userEvent.setup();
-    renderSubject();
-
-    const { search } = getResults();
-    await user.click(search);
-    const { options } = getResults();
-
-    expect(options).toHaveLength(2);
-  });
-
-  it('has no "other" option when value matches', async () => {
-    const user = userEvent.setup();
-    renderSubject();
-
-    const { search } = getResults();
-    await user.type(search, 'hello from');
-    const { options } = getResults();
-
-    expect(options).toHaveLength(2);
-  });
-
-  it('has no "other" option when exclusive', async () => {
-    const user = userEvent.setup();
-    renderSubject({ exclusive: true });
-
-    const { search } = getResults();
-    await user.type(search, 'hello');
-    const { options } = getResults();
-
-    expect(options).toHaveLength(2);
-  });
-
-  it('has an "other" option when value matches exclusivity function', async () => {
-    const user = userEvent.setup();
-    renderSubject({ exclusive: (value: string) => value === 'hello' });
-
-    const { search } = getResults();
-    await user.type(search, 'hello');
-    const { options } = getResults();
-
-    expect(options).toHaveLength(3);
-  });
-
-  it('adds a prefix to the "other" option display text', async () => {
-    const user = userEvent.setup();
-    renderSubject({ otherOptionPrefix: 'You said:' });
-
-    const { search } = getResults();
-    await user.type(search, 'hello');
-    const { options } = getResults();
-
-    expect(options[2]).toHaveAccessibleName('You said: hello');
-  });
-
   it('closes listbox on escape', async () => {
     const user = userEvent.setup();
     renderSubject();
@@ -755,7 +654,7 @@ describe('SearchableSelect', () => {
     expect(search).toHaveAttribute('aria-expanded', 'false');
   });
 
-  describe('multiple mode', () => {
+  describe.skip('multiple mode', () => {
     it('can select multiple options without closing', async () => {
       const user = userEvent.setup();
       renderSubject({ multiple: true });
diff --git a/packages/core/src/lib/select/autocomplete-input.svelte b/packages/core/src/lib/select/autocomplete-input.svelte
new file mode 100644
index 000000000..669ca8dc6
--- /dev/null
+++ b/packages/core/src/lib/select/autocomplete-input.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+import cx from 'classnames';
+import Select from 'svelte-select';
+import type { ComponentProps, ComponentEvents } from 'svelte';
+import { theme } from '../theme';
+import type { IconName } from '../icon/icons';
+import { InputStates, type InputState } from '../input';
+import Progress from '../progress/progress.svelte';
+import Icon from '../icon/icon.svelte';
+
+type Events = ComponentEvents<Select>;
+
+interface SelectItem {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  group?: string;
+}
+
+type Option = SelectItem | string;
+
+type DisallowedProps = 'items' | 'showChevron' | 'hideEmptyState' | 'hasError';
+
+interface $$Props extends Omit<ComponentProps<Select>, DisallowedProps> {
+  value?: string | string[];
+  options: Option[];
+  state?: InputState;
+  cx?: cx.Argument;
+  onBlur?: (event: Events['blur']['detail']) => void;
+  onChange?: (event: Events['change']) => void;
+  onClear?: (event: Events['clear']) => void;
+  onFilter?: (event: Events['filter']) => void;
+  onFocus?: (event: Events['focus']) => void;
+  onInput?: (event: Events['focus']) => void;
+  onSelect?: (event: Events['select']) => void;
+}
+
+export let options: $$Props['options'];
+export let inputAttributes: $$Props['inputAttributes'] = undefined;
+export let containerStyles: $$Props['containerStyles'] = '';
+export let state: $$Props['state'] = InputStates.NONE;
+export let onBlur: $$Props['onBlur'] = undefined;
+export let onChange: $$Props['onChange'] = undefined;
+export let onClear: $$Props['onClear'] = undefined;
+export let onFilter: $$Props['onFilter'] = undefined;
+export let onFocus: $$Props['onFocus'] = undefined;
+export let onInput: $$Props['onInput'] = undefined;
+export let onSelect: $$Props['onSelect'] = undefined;
+
+let cxArgument: $$Props['cx'] = '';
+export { cxArgument as cx };
+
+let className: $$Props['class'] = '';
+export { className as class };
+
+$: normalizedOptions = options.map((option) => {
+  if (typeof option === 'string') {
+    return { value: option, label: option };
+  }
+
+  return option;
+});
+
+$: icons = normalizedOptions.map((option) => option.icon) as (
+  | IconName
+  | undefined
+)[];
+
+$: warnClasses = state === InputStates.WARN ? 'border-warning-bright' : '';
+
+const { colors, borderColor } = theme.extend;
+</script>
+
+<Select
+  showChevron
+  hideEmptyState
+  containerStyles="padding-left: 0.375rem {containerStyles}"
+  class="{cx(cxArgument)} {className} {warnClasses}"
+  items={normalizedOptions}
+  inputAttributes={{ autocomplete: 'off', ...inputAttributes }}
+  hasError={state === InputStates.ERROR}
+  --border="1px solid {state === InputStates.WARN
+    ? colors['warning-medium']
+    : borderColor.light}"
+  --border-hover="1px solid {colors['gray-6']}"
+  --border-focused="1px solid {colors['gray-9']}"
+  --background="#ffffff"
+  --border-radius="0"
+  --font-size="0.75rem"
+  --height="1.875rem"
+  --padding-left="0.5rem"
+  --padding-right="0.5rem"
+  --padding-top="0.375rem"
+  --padding-bottom="0.375rem"
+  --chevron-height="1rem"
+  --chevron-icon-colour={colors['gray-6']}
+  --chevron-icon-width="1rem"
+  --clear-icon-color={colors['gray-6']}
+  --clear-icon-width="1rem"
+  --item-height="auto"
+  --item-line-height="auto"
+  --item-first-border-radius="0"
+  --item-is-active-bg={colors['gray-8']}
+  --item-is-active-color="#fff"
+  --item-active-background="#f7f7f8"
+  --item-hover-bg="#f7f7f8"
+  --item-padding="0.5rem"
+  --disabled-border-color={colors['disabled-light']}
+  --disabled-background={colors['disabled-light']}
+  --error-border="1px solid {colors['danger-dark']}"
+  --list-shadow="none"
+  --list-border="1px solid {colors['gray-9']}"
+  --list-border-radius="0"
+  {...$$restProps}
+  on:blur={onBlur}
+  on:change={onChange}
+  on:clear={onClear}
+  on:filter={onFilter}
+  on:focus={onFocus}
+  on:input={onInput}
+  on:select={onSelect}
+>
+  <div
+    slot="item"
+    let:item
+    let:index
+  >
+    {@const icon = icons[index]}
+    <div class="flex items-center gap-2">
+      {#if icon}
+        <Icon
+          cx="flex-shrink-0"
+          name={icon}
+        />
+      {/if}
+      <div class="flex w-full flex-col flex-wrap overflow-x-hidden">
+        <div class="w-full min-w-0 text-wrap break-words">{item.label}</div>
+        {#if item.description}
+          <div class="break-word w-full min-w-0 text-wrap text-[0.6rem]">
+            {item.description}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+  <Icon
+    slot="chevron-icon"
+    name="chevron-down"
+    cx="text-gray-6"
+  />
+  <Icon
+    slot="clear-icon"
+    name="close"
+    cx="text-gray-6"
+  />
+  <Progress slot="loading-icon" />
+</Select>
diff --git a/packages/core/src/lib/select/index.ts b/packages/core/src/lib/select/index.ts
index 83c03a00a..06cb55fc0 100644
--- a/packages/core/src/lib/select/index.ts
+++ b/packages/core/src/lib/select/index.ts
@@ -1,5 +1,5 @@
 export { SortOptions, type SortOption } from './search';
-export { default as SearchableSelect } from './searchable-select.svelte';
+export { default as AutocompleteInput } from './autocomplete-input.svelte';
 export { default as Multiselect } from './multiselect.svelte';
 export { default as Select } from './select.svelte';
 export { default as SelectInput } from './select-input.svelte';
diff --git a/packages/core/src/lib/select/searchable-select.svelte b/packages/core/src/lib/select/searchable-select.svelte
deleted file mode 100644
index 6ae7df9d4..000000000
--- a/packages/core/src/lib/select/searchable-select.svelte
+++ /dev/null
@@ -1,437 +0,0 @@
-<!--
-@component
-
-Select an option from a list, with search
-
-Guided by https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
-
-```svelte
-<SearchableSelect
-  options={["Option 1", "Option 2", "Option 3"]}
-  bind:value
-/>
-```
--->
-<script lang="ts">
-import cx from 'classnames';
-import { Floating, matchWidth } from '$lib/floating';
-import { Icon } from '$lib/icon';
-import { InputStates, type InputState } from '$lib/input';
-import { createHandleKey } from '$lib/keyboard';
-import { uniqueId } from '$lib/unique-id';
-import { useNextFrame } from '$lib/use-next-frame';
-
-import {
-  SortOptions,
-  getSearchResults,
-  optionDisplayValue,
-  optionsToDetailedOptions,
-  type SortOption,
-  type DetailedOption,
-} from './search';
-
-import SelectInput from './select-input.svelte';
-
-/** The options the user should be allowed to search and select from. */
-export let options: (string | DetailedOption)[];
-
-/** The value of the search input or the currently selected option, if any. */
-export let value = '';
-
-/** All selected values, if `multiple` is `true`. */
-export let values: string[] = [];
-
-/** The placeholder of the input. */
-export let placeholder = '';
-
-/** Optional id used in parent label `for` attribute */
-export let id: string | undefined = undefined;
-
-/**
- * Whether value must be constrained to `options` on change.
- * - `false` (Default) - any value may be selected
- * - `true` - value must be in `options`
- * - `Function` - value must be in `options` or pass the test function
- */
-export let exclusive: boolean | ((value: string) => boolean) = false;
-
-/** Multiple selections allowed. */
-export let multiple: boolean | undefined = undefined;
-
-/** Input is disabled. */
-export let disabled = false;
-
-/** The state of the select (info, warn, error, success), if any. */
-export let state: InputState = InputStates.NONE;
-
-/** Option sorting behavior. */
-export let sort: SortOption = SortOptions.DEFAULT;
-
-/** Prefix to display with the arbitrary text option, if non-exclusive. */
-export let otherOptionPrefix = '';
-
-/** Error message ID, if any. */
-export let errorID = '';
-
-/** ID of the element that describes the SearchableSelect. */
-export let describedBy: string | undefined = undefined;
-
-/**
- * Notify the parent of a value change, after Enter key or blur.
- *
- * Only used if `multiple` is `false` (default)
- */
-export let onChange: ((value: string) => unknown) | undefined = undefined;
-
-/** Notify the parent of a value change, if `multiple` is `true` */
-export let onMultiChange: ((values: string[]) => unknown) | undefined =
-  undefined;
-
-/** Notify the parent of focus. */
-export let onFocus: ((event: FocusEvent) => unknown) | undefined = undefined;
-
-/** Notify the parent of blur. */
-export let onBlur: ((event: FocusEvent) => unknown) | undefined = undefined;
-
-/** Additional CSS classes to pass to the input container. */
-let inputCx: cx.Argument = '';
-export { inputCx as cx };
-
-const LIST_ID = uniqueId('combobox-list');
-const SELECTED_ID = uniqueId('combobox-list-selected-item');
-const CLOSED = 'closed';
-const FOCUS_SEARCH = 'focus-search';
-const FOCUS_ITEM = 'focus-item';
-const onNextFrame = useNextFrame();
-
-type MenuState = typeof CLOSED | typeof FOCUS_SEARCH | typeof FOCUS_ITEM;
-
-$: detailedOptions = optionsToDetailedOptions(options);
-$: detailedOptionsMap = Object.fromEntries(
-  detailedOptions.map((opt) => [opt.value, opt])
-);
-
-const optionElements: Record<string, HTMLElement> = {};
-
-let inputElement: HTMLInputElement | undefined;
-let autoSelectIndex = -1;
-let menuState: MenuState | undefined;
-
-// searchValue is the value stored inside the search input field
-// it is primarily updated reactively through a call to resetSearchValue when
-// value changes (in handleSelect)
-//
-// It is also manually updated in edge cases like Escape or Blur
-let searchValue = '';
-const resetSearchValue = (
-  valueParam: string,
-  detailedOptionsMapParam: Record<string, DetailedOption>
-) => {
-  searchValue = optionDisplayValue(
-    detailedOptionsMapParam[valueParam] ?? { value: valueParam }
-  );
-};
-$: resetSearchValue(value, detailedOptionsMap);
-
-// selectedSearchOption represents the value that was last selected (or the initial value)
-$: selectedSearchOption = detailedOptionsMap[value];
-
-$: searchResults = getSearchResults(detailedOptions, searchValue, sort);
-$: valueInSearch = searchResults.some(
-  ({ option }) => optionDisplayValue(option) === searchValue
-);
-$: getOtherIsAllowed =
-  typeof exclusive === 'function' ? exclusive : () => !exclusive;
-
-$: otherOption =
-  searchValue !== '' && !valueInSearch && getOtherIsAllowed(searchValue)
-    ? {
-        option: { value: searchValue, icon: 'plus' } as DetailedOption,
-        priority: -1,
-        highlight: undefined,
-      }
-    : undefined;
-
-$: allOptions = otherOption ? [...searchResults, otherOption] : searchResults;
-$: menuState = !menuState || allOptions.length === 0 ? CLOSED : menuState;
-
-$: if (menuState === undefined || menuState === FOCUS_SEARCH) {
-  let nextAutoSelectIndex = allOptions.findIndex(
-    ({ priority }) => priority !== -1
-  );
-  // if we don't find any options with a non negative priority,
-  // we set the nextAutoSelectIndex to the option that matches
-  // the current search value. This is used so that when we blur
-  // with a valid searchValue, we autoSelect the correct option
-  if (nextAutoSelectIndex === -1) {
-    nextAutoSelectIndex = allOptions.findIndex(
-      ({ option }) => optionDisplayValue(option) === searchValue
-    );
-  }
-  autoSelectIndex = nextAutoSelectIndex;
-} else if (menuState === CLOSED) {
-  autoSelectIndex = -1;
-}
-
-$: autoSelectOption = allOptions[autoSelectIndex] ?? otherOption;
-$: isExpanded = menuState === FOCUS_SEARCH || menuState === FOCUS_ITEM;
-$: activeOption = isExpanded ? autoSelectOption : undefined;
-$: activeID = activeOption ? SELECTED_ID : undefined;
-$: activeElement = activeOption
-  ? optionElements[activeOption.option.value]
-  : undefined;
-
-const scrollIntoView = (element: HTMLElement | undefined): void => {
-  if (typeof element?.scrollIntoView === 'function') {
-    // NOTE(mc, 2024-06-17): do not scroll right away, or else we can accidentally
-    // scroll the whole document instead of the element's containing `<ul>`
-    onNextFrame(() => {
-      element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-    });
-  }
-};
-
-$: scrollIntoView(activeElement);
-
-const handleSingleSelect = (selectedOption: DetailedOption | undefined) => {
-  // if we are exclusive && it is not in the search, we should fallback to an empty value option
-  // otherwise, we should populate the value with whatever exists in the search field
-  const fallback =
-    exclusive && !valueInSearch ? { value: '' } : { value: searchValue };
-  const nextOption = selectedOption ?? fallback;
-
-  // we always set the menu state to closed even if the value is equal to the previous value
-  // but we don't call onChange
-  setMenuState(CLOSED);
-  if (nextOption.value !== value) {
-    value = nextOption.value;
-    onChange?.(nextOption.value);
-  }
-};
-
-// inputValue is the value of option that was selected (not the value in the search field)
-const handleMultiSelect = (selectedOption: DetailedOption | undefined) => {
-  if (!selectedOption) {
-    return;
-  }
-
-  values = values.includes(selectedOption.value)
-    ? values.filter((val) => val !== selectedOption.value)
-    : [...values, selectedOption.value];
-
-  value = '';
-  searchValue = '';
-  onMultiChange?.(values);
-};
-
-$: handleSelect = multiple ? handleMultiSelect : handleSingleSelect;
-
-const setMenuState = (nextMenuState: MenuState) => {
-  menuState = disabled ? CLOSED : nextMenuState;
-};
-
-const handleInput = (event: Event) => {
-  // update the searchValue on inputs to the search field
-  const element = event.target as HTMLInputElement;
-  searchValue = element.value;
-  setMenuState(FOCUS_SEARCH);
-};
-
-const handleFocus = (event: FocusEvent) => {
-  setMenuState(FOCUS_SEARCH);
-  onFocus?.(event);
-};
-
-const handleBlur = (event: FocusEvent) => {
-  // blur can still be triggered if the input is disabled or the menu is closed,
-  // but we shouldn't select anything if so
-  if (!disabled && menuState !== CLOSED) {
-    handleSelect(autoSelectOption?.option);
-    setMenuState(CLOSED);
-  }
-  // we reset the search value here to the last selected option to ensure there is no mismatch
-  // between what was actually selected vs what is in the search input
-  resetSearchValue(value, detailedOptionsMap);
-  onBlur?.(event);
-};
-
-const handleButtonClick = () => {
-  setMenuState(isExpanded ? CLOSED : FOCUS_SEARCH);
-  inputElement?.focus();
-};
-
-const handleKeydown = createHandleKey({
-  Enter: () => {
-    if (menuState !== CLOSED) {
-      handleSelect(autoSelectOption?.option);
-    }
-  },
-  ' ': {
-    handler: (event) => {
-      if (menuState === FOCUS_ITEM) {
-        handleSelect(autoSelectOption?.option);
-        event.preventDefault();
-      }
-    },
-    preventDefault: false,
-  },
-  Escape: () => {
-    // WAI: Dismisses the popup if it is visible. Optionally, if the popup is hidden before Escape is pressed, clears the combobox.
-    if (menuState === CLOSED) {
-      searchValue = '';
-      handleSelect(undefined);
-    } else {
-      setMenuState(CLOSED);
-    }
-  },
-  ArrowDown: (event) => {
-    if (event.altKey) {
-      setMenuState(menuState === CLOSED ? FOCUS_SEARCH : FOCUS_ITEM);
-    } else {
-      setMenuState(FOCUS_ITEM);
-      autoSelectIndex =
-        autoSelectIndex < allOptions.length - 1 ? autoSelectIndex + 1 : 0;
-    }
-  },
-  ArrowUp: () => {
-    setMenuState(FOCUS_ITEM);
-    autoSelectIndex =
-      autoSelectIndex > 0 ? autoSelectIndex - 1 : allOptions.length - 1;
-  },
-  ArrowRight: {
-    handler: () => setMenuState(FOCUS_SEARCH),
-    preventDefault: false,
-  },
-  ArrowLeft: {
-    handler: () => setMenuState(FOCUS_SEARCH),
-    preventDefault: false,
-  },
-  Home: () => {
-    setMenuState(FOCUS_SEARCH);
-    inputElement?.setSelectionRange(0, 0);
-  },
-  End: () => {
-    setMenuState(FOCUS_SEARCH);
-    inputElement?.setSelectionRange(searchValue.length, searchValue.length);
-  },
-});
-</script>
-
-<SelectInput
-  {state}
-  {disabled}
-  {placeholder}
-  menuId={LIST_ID}
-  isOpen={isExpanded}
-  isFocused={menuState === FOCUS_ITEM ? false : undefined}
-  {id}
-  cx={[{ 'caret-transparent': menuState === FOCUS_ITEM }, inputCx]}
-  icon={selectedSearchOption?.icon}
-  aria-autocomplete="list"
-  aria-multiselectable={multiple}
-  aria-activedescendant={activeID}
-  aria-errormessage={errorID}
-  aria-describedby={describedBy}
-  on:focus={handleFocus}
-  on:blur={handleBlur}
-  on:keydown={handleKeydown}
-  on:input={handleInput}
-  on:click={handleButtonClick}
-  bind:inputElement
-  value={searchValue}
-/>
-{#if isExpanded}
-  <Floating
-    offset={4}
-    referenceElement={inputElement}
-    size={matchWidth}
-    flip={{}}
-    auto
-  >
-    <ul
-      id={LIST_ID}
-      role="listbox"
-      class="max-h-36 flex-col overflow-y-auto border border-gray-9 bg-white py-1 shadow-sm"
-    >
-      {#each allOptions as { option, highlight } (option.value)}
-        {@const isActive = activeOption?.option === option}
-        {@const isSelected = multiple ? false : isActive}
-        {@const isChecked = multiple
-          ? values.includes(option.value)
-          : undefined}
-        {@const isOther = otherOption?.option === option}
-        {@const descriptionID = uniqueId('combobox-list-item-description')}
-
-        {#if isOther && allOptions.length > 1}
-          <li
-            role="none"
-            class="mb-0.5 mt-[3px] border-b border-light"
-          />
-        {/if}
-        <!--
-        Focus stays on combobox per WAI; key handlers on options not needed.
-        svelte-ignore a11y-click-events-have-key-events
-      -->
-        <li
-          role="option"
-          id={isActive ? activeID : undefined}
-          aria-selected={isSelected}
-          aria-checked={isChecked}
-          aria-describedby={descriptionID}
-          aria-label={isOther
-            ? [otherOptionPrefix, optionDisplayValue(option)]
-                .filter(Boolean)
-                .join(' ')
-            : optionDisplayValue(option)}
-          class={cx(
-            'flex cursor-pointer items-center justify-start px-2.5 py-1.5',
-            multiple ? 'pl-2 pr-2.5' : 'px-2.5',
-            isActive ? 'bg-light' : 'hover:bg-light'
-          )}
-          on:pointerdown|preventDefault
-          on:mousedown|preventDefault
-          on:click={() => handleSelect(option)}
-          bind:this={optionElements[option.value]}
-        >
-          <div class="flex flex-row gap-2">
-            <!-- In all real cases, only one of these icons should should be active at once-->
-            <!-- (multi with icon is not a designed use case yet) -->
-            {#if multiple}
-              <Icon
-                cx={['my-0.5 shrink-0', !isChecked && 'text-gray-6']}
-                name={isChecked ? 'checkbox-marked' : 'checkbox-blank-outline'}
-              />
-            {/if}
-            {#if option.icon}
-              <Icon
-                cx={['my-0.5 shrink-0 text-gray-6']}
-                name={option.icon}
-              />
-            {/if}
-            <div class="flex flex-col text-xs [overflow-wrap:anywhere]">
-              <p>
-                {#if highlight !== undefined}
-                  {@const [prefix, match, suffix] = highlight}
-                  {prefix}<span class="bg-yellow-100">{match}</span>{suffix}
-                {:else if isOther && otherOptionPrefix}
-                  {otherOptionPrefix} {optionDisplayValue(option)}
-                {:else}
-                  {optionDisplayValue(option)}
-                {/if}
-              </p>
-              {#if option.description}
-                <p
-                  id={descriptionID}
-                  class=" text-subtle-2"
-                >
-                  {option.description}
-                </p>
-              {/if}
-            </div>
-          </div>
-        </li>
-      {/each}
-      <slot />
-    </ul>
-  </Floating>
-{/if}
diff --git a/packages/core/theme.ts b/packages/core/src/lib/theme.ts
similarity index 100%
rename from packages/core/theme.ts
rename to packages/core/src/lib/theme.ts
diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
index 3fbe6f95f..487bb0772 100644
--- a/packages/core/src/routes/+page.svelte
+++ b/packages/core/src/routes/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import {
+  AutocompleteInput,
   Badge,
   Breadcrumbs,
   Button,
@@ -37,7 +38,6 @@ import {
   ToastVariant,
   ToggleButtons,
   Select,
-  SearchableSelect,
   Multiselect,
   NotificationContainer,
   provideNotify,
@@ -1085,30 +1085,26 @@ const onHoverDelayMsInput = (event: Event) => {
         for="targetID"
         cx="whitespace-nowrap"
       >
-        For attribute example with SearchableSelect
+        For attribute example with Autocomplete Input
       </Label>
-      <div class="max-w-fit">
-        <SearchableSelect
-          id="targetID"
-          exclusive
-          options={[
-            { value: 'First Option', description: 'First option' },
-            'Option 2',
-            { value: 'C.) Option', description: 'second' },
-            'A really long forth option just in case you need it',
-            {
-              value: 'Option with a long description',
-              description:
-                'usb-Generic_Laptop_Camera_200901010001-video-index0',
-            },
-          ]}
-          placeholder="Select an option"
-          onChange={(value) => {
-            // eslint-disable-next-line no-console
-            console.log('Selected', value);
-          }}
-        />
-      </div>
+      <AutocompleteInput
+        id="targetID"
+        options={[
+          { value: 'First Option', label: 'First option' },
+          'Option 2',
+          { value: 'C.) Option', label: 'second' },
+          'A really long forth option just in case you need it',
+          {
+            value: 'Option with a long description',
+            label: 'usb-Generic_Laptop_Camera_200901010001-video-index0',
+          },
+        ]}
+        placeholder="Select an option"
+        onChange={(value) => {
+          // eslint-disable-next-line no-console
+          console.log('Selected', value);
+        }}
+      />
     </div>
   </div>
 
@@ -1334,34 +1330,34 @@ const onHoverDelayMsInput = (event: Event) => {
     </Select>
   </div>
 
-  <!-- Searchable Select -->
-  <h2 class="text-xl">Searchable Select</h2>
+  <!-- Autocomplete Input -->
+  <h2 class="text-xl">Autocomplete Input</h2>
 
   <div class="flex gap-4">
-    <SearchableSelect
-      exclusive
+    <AutocompleteInput
       options={[
-        { value: 'First Option', description: 'First option' },
+        { value: 'First Option', label: 'First option' },
         'Option 2',
-        { value: 'C.) Option', description: 'second' },
+        { value: 'C.) Option', label: 'second' },
         'A really long forth option just in case you need it',
       ]}
       placeholder="Select an option"
-      onChange={(value) => {
-        // eslint-disable-next-line no-console
-        console.log('Selected', value);
-      }}
-    />
-    <SearchableSelect
-      exclusive
+      onBlur={(event) => console.log('blur', event)}
+      onClear={(event) => console.log('clear', event)}
+      onChange={(event) => console.log('change', event)}
+      onFilter={(event) => console.log('filter', event)}
+      onFocus={(event) => console.log('focus', event)}
+      onInput={(event) => console.log('input', event)}
+      onSelect={(event) => console.log('select', event)}
+    />
+    <AutocompleteInput
       options={['First Option', 'Disabled select', 'C.) Option']}
       value="Disabled select"
       disabled
     />
   </div>
   <div class="flex gap-4">
-    <SearchableSelect
-      exclusive
+    <AutocompleteInput
       options={[
         {
           value: 'opt-1',
@@ -1396,63 +1392,62 @@ const onHoverDelayMsInput = (event: Event) => {
           description: 'Seconary Text',
         },
       ]}
-      placeholder="Select an option (exclusive)"
+      placeholder="Select an option"
       onChange={(value) => {
         // eslint-disable-next-line no-console
         console.log('Selected', value);
       }}
     />
-    <SearchableSelect
+    <AutocompleteInput
       options={[
         {
           value: 'opt-1',
           label: 'Option 1',
-          description: 'Seconary Text',
+          description: 'Secondary Text',
           icon: 'twitter',
         },
         {
           value: 'opt-2',
           label: 'Option 2',
-          description: 'Seconary Text',
+          description: 'Secondary Text',
           icon: 'instagram',
         },
         {
           value: 'opt-3',
           label: 'Option 3',
-          description: 'Seconary Text',
+          description: 'usb-Generic_Laptop_Camera_200901010001-video-index0',
           icon: 'magnet',
         },
         {
           value: 'opt-4',
-          label: 'Option 4',
+          label: 'usb-Generic_Laptop_Camera_200901010001-video-index0',
           icon: 'apple',
           description:
-            'Seconary Text. This is an example where the seconary text is really long',
+            'Secondary Text. This is an example where the secondary text is really long',
         },
         { value: 'opt-5', label: 'Option 5', icon: 'earth' },
         { value: 'opt-6', label: 'Option 6 (no icon or desc)' },
         {
           value: 'opt-7',
           label: 'Option 7 (no icon)',
-          description: 'Seconary Text',
+          description: 'Secondary Text',
         },
       ]}
-      placeholder="Select an option (non-exclusive)"
+      placeholder="Select an option"
       onChange={(value) => {
         // eslint-disable-next-line no-console
         console.log('Selected', value);
       }}
     />
-    <SearchableSelect
-      exclusive
+    <AutocompleteInput
       options={[
         {
           value: '1',
           label: 'Disabled Select with Icon',
-          description: 'Seconary Text',
+          description: 'Secondary Text',
           icon: 'twitter',
         },
-        { value: 'Option 2', description: 'Seconary Text', icon: 'instagram' },
+        { value: 'Option 2', label: 'Secondary Text', icon: 'instagram' },
       ]}
       placeholder="Select an option"
       value="1"
@@ -1460,45 +1455,25 @@ const onHoverDelayMsInput = (event: Event) => {
     />
   </div>
 
+  <AutocompleteInput
+    options={['First Option', 'First Option', 'First Option']}
+    placeholder="Duplicate options"
+    state="error"
+  />
+
   <div class="flex gap-4">
-    <SearchableSelect
-      exclusive
+    <AutocompleteInput
       options={['First Option', 'Option 2', 'C.) Option']}
       placeholder="Warn state"
       state="warn"
     />
-    <SearchableSelect
-      exclusive
+    <AutocompleteInput
       options={['First Option', 'Option 2', 'C.) Option']}
       placeholder="Error state"
       state="error"
     />
   </div>
 
-  <div class="flex gap-4">
-    <SearchableSelect
-      options={['First Option', 'Option 2', 'C.) Option']}
-      placeholder="With arbitrary input"
-      otherOptionPrefix="Arbitrary:"
-    />
-    <SearchableSelect
-      exclusive
-      options={[
-        'First Option',
-        'Option 2',
-        'C.) Option',
-        'So',
-        'Many',
-        'More',
-        'Options',
-        'With A Whole Lot Of Spaces',
-      ]}
-      placeholder="Reducing Select"
-      sort="reduce"
-      multiple
-    />
-  </div>
-
   <!-- Multiselect -->
   <h2>Multiselect</h2>
   <div class="flex gap-4">
diff --git a/packages/core/tailwind.config.ts b/packages/core/tailwind.config.ts
index 02fa121f5..d2fafd1c4 100644
--- a/packages/core/tailwind.config.ts
+++ b/packages/core/tailwind.config.ts
@@ -1,5 +1,5 @@
 import type { Config } from 'tailwindcss';
-import { theme } from './theme';
+import { theme } from './src/lib/theme';
 import { plugins } from './plugins';
 
 export default {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 98c72ab08..b4ca64c18 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -251,6 +251,9 @@ importers:
       svelte-check:
         specifier: ^3.6.2
         version: 3.6.2(@babel/core@7.24.6)(less@4.2.0)(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@4.2.17)
+      svelte-select:
+        specifier: ^5.8.3
+        version: 5.8.3
       tailwindcss:
         specifier: ^3.3.7
         version: 3.4.3
@@ -4621,11 +4624,13 @@ packages:
   eslint@8.4.1:
     resolution: {integrity: sha512-TxU/p7LB1KxQ6+7aztTnO7K0i+h0tDi81YRY9VzB6Id71kNz+fFYnf5HD5UOQmxkzcoa0TlVZf9dpMtUv0GpWg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
   eslint@8.56.0:
     resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
   esm-env@1.0.0:
@@ -7437,6 +7442,9 @@ packages:
       svelte:
         optional: true
 
+  svelte-floating-ui@1.5.8:
+    resolution: {integrity: sha512-dVvJhZ2bT+kQDHlE4Lep8t+sgEc0XD96fXLzAi2DDI2bsaegBbClxXVNMma0C2WsG+n9GJSYx292dTvA8CYRtw==}
+
   svelte-hmr@0.15.3:
     resolution: {integrity: sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
@@ -7480,6 +7488,9 @@ packages:
       typescript:
         optional: true
 
+  svelte-select@5.8.3:
+    resolution: {integrity: sha512-nQsvflWmTCOZjssdrNptzfD1Ok45hHVMTL5IHay5DINk7dfu5Er+8KsVJnZMJdSircqtR0YlT4YkCFlxOUhVPA==}
+
   svelte2tsx@0.6.27:
     resolution: {integrity: sha512-E1uPW1o6VsbRz+nUk3fznZ2lSmCITAJoNu8AYefWSvIwE2pSB01i5sId4RMbWNzfcwCQl1DcgGShCPcldl4rvg==}
     peerDependencies:
@@ -16857,6 +16868,11 @@ snapshots:
     optionalDependencies:
       svelte: 4.2.17
 
+  svelte-floating-ui@1.5.8:
+    dependencies:
+      '@floating-ui/core': 1.5.2
+      '@floating-ui/dom': 1.5.3
+
   svelte-hmr@0.15.3(svelte@4.2.17):
     dependencies:
       svelte: 4.2.17
@@ -16876,6 +16892,10 @@ snapshots:
       postcss-load-config: 4.0.2(postcss@8.4.38)
       typescript: 5.4.5
 
+  svelte-select@5.8.3:
+    dependencies:
+      svelte-floating-ui: 1.5.8
+
   svelte2tsx@0.6.27(svelte@4.2.17)(typescript@5.4.5):
     dependencies:
       dedent-js: 1.0.1