🎨 update

web/components/src/index.ts

@@ -14,6 +14,5 @@ export * from './Accordion'
 export * from './Menu'
 export * from './Heading'
 export * from './Table'
-export * from './Tabs'
 export * from './Form'
 export * from './Breadcrumbs'

web/core/Tabs/Tab.tsx

@@ -15,17 +15,15 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab({ childr
         py-2
         pl-3
         pr-8
-        border-b
+        border-0
         hover:underline
-        hover:underline-offset-4
+        underline-offset-2
+        decoration-1
         border-slate-80
         dark:border-white-100
         hover:cursor-pointer
         data-active:font-medium
-        data-active:border-l
-        data-active:border-r
-        data-active:border-b-0
-        data-active:first:border-l-0
+        data-active:border-b-2
         focus:envis-outline
         dark:focus:envis-outline-invert
     `,

web/pageComponents/search/SearchResults.tsx

@@ -54,13 +54,25 @@ const SearchResults = (props: SearchResultsProps) => {
         return TopicHit
     }
   }
+  const handleTabChange = (value: string) => {
+    setUserClicked(true)
+    const activeIndex = options.find((option) => option.label === value)
+    if (activeIndex) {
+      refine(activeIndex.value)
+    }
+  }
+
   const activeTab = options.findIndex((it) => it.value === currentRefinement)
   const hasQuery = results && results.query !== ''
   return (
     <>
       {hasQuery && (
         <div ref={resultsRef} className="dark mt-10">
-          <Tabs value={options[activeTab].label || options[0].label}>
+          <Tabs
+            value={options[activeTab].label || options[0].label}
+            activationMode="manual"
+            onValueChange={handleTabChange}
+          >
             <TabList>
               {options.map((item) => (
                 <Tab key={item.label} value={item.label} className="text-sm flex gap-2">