Improve Tabs hover state

package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.134",
+  "version": "1.0.135",
   "description": "Formation is a comprehensive component library powered by React, Styled Components, and CSS variables for creating apps and websites that demand responsive, unified cross-platform experiences.",
   "resolutions": {
     "string-width": "^4",

src/components/Button/Button.tsx

@@ -199,6 +199,7 @@ export const Button: FC<ButtonProps> = React.memo(({
                 hero={hero}
                 icon={icon}
                 compact={compact}
+                off={off}
               >
                 {
                   children
@@ -253,6 +254,7 @@ interface TextProps {
   hero?: boolean,
   icon?: string,
   compact?: boolean
+  off?: boolean
 }
 
 const calculateWidth = (props: ContainerProps) => {
@@ -411,12 +413,12 @@ const S = {
     height: ${props => calculateHeight(props)};
     max-width: ${props => calculateWidth(props)};
     width: ${props => calculateWidth(props)};
-    opacity: ${props => props.off ? '.5' : '1'};
     display: flex;
     align-items: center;
     a {
       height: 100%;
     }
+   
   `),
   Text: React.memo(styled.div<TextProps>`
     font-size: ${props => 
@@ -428,6 +430,7 @@ const S = {
     };
     display: flex;
     flex-shrink: 0;
+    opacity: ${props => props.off ? '.5' : '1'};
   `),
   Button: React.memo(styled.button.attrs({
     type: 'submit',

src/components/Tabs/Tabs.tsx

@@ -65,8 +65,9 @@ export const Tabs = React.memo(({
 
   const Content = () => <>
    {
-      tabs.map(({ name, icon, onClick, prefix, suffix, iconPrefix }) => 
-        <Button
+      tabs.map(({ name, icon, onClick, prefix, suffix, iconPrefix }) => {
+        const active = name === localActiveTab
+        return <Button
           key={name}
           text={`${prefix ? prefix : ''}${name}${suffix ? suffix : ''}`} 
           icon={icon} 
@@ -77,10 +78,13 @@ export const Tabs = React.memo(({
               ? onClick(e)
               : null
           }} 
-          secondary={name !== localActiveTab}
+          secondary={!active}
+          off={!active}
           tab={true}
           compact={compact}
         /> 
+      }
+
       )
     }
   </>