🚸 Add a better select input

Also improves other inputs behavior

apps/builder/src/features/theme/components/CustomCssSettings/CustomCssSettings.tsx

@@ -1,4 +1,4 @@
-import { CodeEditor } from '@/components/CodeEditor'
+import { CodeEditor } from '@/components/inputs/CodeEditor'
 import React from 'react'
 
 type Props = {

apps/builder/src/features/theme/components/GeneralSettings/FontSelector/FontSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { Text, HStack } from '@chakra-ui/react'
-import { SearchableDropdown } from '@/components/SearchableDropdown'
 import { env, isEmpty } from 'utils'
+import { AutocompleteInput } from '@/components/inputs/AutocompleteInput'
 
 type FontSelectorProps = {
   activeFont?: string
@@ -32,7 +32,7 @@ export const FontSelector = ({
   }
 
   const handleFontSelected = (nextFont: string) => {
-    if (nextFont == currentFont) return
+    if (nextFont === currentFont) return
     setCurrentFont(nextFont)
     onSelectFont(nextFont)
   }
@@ -40,10 +40,11 @@ export const FontSelector = ({
   return (
     <HStack justify="space-between" align="center">
       <Text>Font</Text>
-      <SearchableDropdown
-        selectedItem={activeFont}
+      <AutocompleteInput
+        defaultValue={activeFont}
         items={googleFonts}
-        onValueChange={handleFontSelected}
+        onChange={handleFontSelected}
+        withVariableButton={false}
       />
     </HStack>
   )

apps/builder/src/features/theme/theme.spec.ts

@@ -19,7 +19,7 @@ test.describe.parallel('Theme page', () => {
       await expect(page.locator('button >> text="Go"')).toBeVisible()
 
       // Font
-      await page.fill('input[type="text"]', 'Roboto Slab')
+      await page.getByRole('textbox').fill('Roboto Slab')
       await expect(page.locator('.typebot-container')).toHaveCSS(
         'font-family',
         /"Roboto Slab"/