fix: prevent warning about invalid nesting of button in DOM

Original error: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

libs/shared/lib/components/tabs/Tab.tsx

@@ -30,7 +30,6 @@ export const Tabs = (props: { children: React.ReactNode; tabType?: TabTypes }) =
 export const Tab = ({
   activeTab,
   text,
-  variant = 'ghost',
   className = '',
   ...props
 }: ButtonProps & {
@@ -43,7 +42,7 @@ export const Tab = ({
   if (context.tabType === 'inline') {
     className += ` pl-2 pr-1 gap-1 relative h-full text-secondary-500 border-secondary-200 before:content-[''] 
     before:absolute before:left-0 before:bottom-0 before:h-[2px] before:w-full
-    ${activeTab ? 'before:bg-primary-500' : 'before:bg-transparent hover:before:bg-secondary-300 hover:bg-secondary-200'}`;
+    ${activeTab ? 'before:bg-primary-500 hover:bg-inherit' : 'before:bg-transparent hover:before:bg-secondary-300 hover:text-dark hover:bg-secondary-200'}`;
   } else if (context.tabType === 'rounded') {
     className += ` -mb-px py-4 px-4 text-sm  text-secondary-500 text-center border rounded-t-lg rounded-b-none 
     ${activeTab ? 'active text-secondary-950 border-l-secondary-300 border-r-secondary-300 border-t-secondary-300 border-b-white' : ''} 
@@ -53,10 +52,10 @@ export const Tab = ({
   }
 
   return (
-    <Button className={className} label={text} variant={variant} size="xs" {...props}>
-      {/* <p className={`text-xs font-semibold ${activeTab && 'text-secondary-950'}`}>{text}</p> */}
+    <div className={`btn btn-ghost btn-xs rounded-none ${className}`} {...props}>
+      <span>{text}</span>
 
       {props.children}
-    </Button>
+    </div>
   );
 };