🎨 Use Interactive wrapper for search option buttons

styles/src/styleTree/search.ts

@@ -2,23 +2,6 @@ import Theme from "../themes/theme";
 import { backgroundColor, border, player, text } from "./components";
 
 export default function search(theme: Theme) {
-  const optionButton = {
-    ...text(theme, "mono", "secondary"),
-    background: backgroundColor(theme, "on500"),
-    cornerRadius: 4,
-    border: border(theme, "secondary"),
-    margin: {
-      left: 2,
-      right: 2,
-    },
-    padding: {
-      bottom: 3,
-      left: 8,
-      right: 8,
-      top: 3,
-    },
-  };
-
   const editor = {
     background: backgroundColor(theme, 500),
     cornerRadius: 8,
@@ -43,24 +26,33 @@ export default function search(theme: Theme) {
     matchBackground: theme.editor.highlight.match.value,
     tabIconSpacing: 8,
     tabIconWidth: 14,
-    activeHoveredOptionButton: {
-      ...optionButton,
-      ...text(theme, "mono", "active"),
-      background: backgroundColor(theme, "on500", "active"),
-      border: border(theme, "muted"),
-    },
-    activeOptionButton: {
-      ...optionButton,
-      ...text(theme, "mono", "active"),
-      background: backgroundColor(theme, "on500", "active"),
-      border: border(theme, "muted"),
+    optionButton: {
+      ...text(theme, "mono", "secondary"),
+      background: backgroundColor(theme, "on500"),
+      cornerRadius: 4,
+      border: border(theme, "secondary"),
+      margin: {
+        left: 2,
+        right: 2,
+      },
+      padding: {
+        bottom: 3,
+        left: 8,
+        right: 8,
+        top: 3,
+      },
+      active: {
+        ...text(theme, "mono", "active"),
+        background: backgroundColor(theme, "on500", "active"),
+        border: border(theme, "muted"),
+      },
+      hover: {
+        ...text(theme, "mono", "active"),
+        background: backgroundColor(theme, "on500", "hovered"),
+        border: border(theme, "muted"),
+      }
     },
     editor,
-    hoveredOptionButton: {
-      ...optionButton,
-      ...text(theme, "mono", "active"),
-      border: border(theme, "muted"),
-    },
     invalidEditor: {
       ...editor,
       border: border(theme, "error"),
@@ -69,7 +61,6 @@ export default function search(theme: Theme) {
       ...text(theme, "mono", "muted"),
       padding: 6,
     },
-    optionButton,
     optionButtonGroup: {
       padding: {
         left: 4,