From 2ab26021b7b85e836d8c20b22e6c687648328e44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20W=C3=B3jcik?= <maciej@defguard.net>
Date: Mon, 2 Mar 2026 13:51:49 +0100
Subject: [PATCH 1/4] update CounterLabel styling

---
 components/CounterLabel/style.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/CounterLabel/style.scss b/components/CounterLabel/style.scss
index 6864cf1..a2881f8 100644
--- a/components/CounterLabel/style.scss
+++ b/components/CounterLabel/style.scss
@@ -9,13 +9,10 @@
   pointer-events: none;
   box-sizing: border-box;
   padding: 0 var(--spacing-xs);
-  min-width: 20px;
+  min-width: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex-flow: row;
-  flex: none;
-  height: auto;
 
   &.variant-neutral {
     --color: var(--fg-neutral);
@@ -39,7 +36,10 @@
   }
 
   span {
-    font: var(--t-body-xxs-600);
+    font-size: var(--body-micro-11, 11px);
+    font-style: normal;
+    font-weight: var(--font-weight-medium-500, 500);
+    line-height: var(--line-height-sm-14, 14px);
     color: inherit;
     text-align: center;
   }

From 969fa97ab63ee8a97730539ba2bd633c923586f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20W=C3=B3jcik?= <maciej@defguard.net>
Date: Mon, 2 Mar 2026 14:23:18 +0100
Subject: [PATCH 2/4] add optional icon to Tab component

---
 components/Tabs/Tab.tsx    | 9 +++++++--
 components/Tabs/style.scss | 4 ++++
 components/Tabs/types.ts   | 3 +++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/Tabs/Tab.tsx b/components/Tabs/Tab.tsx
index 0c6e6d9..3520308 100644
--- a/components/Tabs/Tab.tsx
+++ b/components/Tabs/Tab.tsx
@@ -1,7 +1,9 @@
 import clsx from 'clsx';
+import { ThemeVariable } from '../../types';
+import { Icon } from '../Icon';
 import type { TabProps } from './types';
 
-export const Tab = ({ onClick, title, active }: TabProps) => {
+export const Tab = ({ onClick, title, active, icon }: TabProps) => {
   return (
     <div
       className={clsx('tab', {
@@ -10,7 +12,10 @@ export const Tab = ({ onClick, title, active }: TabProps) => {
       onClick={onClick}
     >
       <div className="line"></div>
-      <p className="title">{title}</p>
+      <p className="title">
+        {icon && <Icon icon={icon} size={18} staticColor={ThemeVariable.FgAttention} />}
+        {title}
+      </p>
     </div>
   );
 };
diff --git a/components/Tabs/style.scss b/components/Tabs/style.scss
index ee34130..06c1eb7 100644
--- a/components/Tabs/style.scss
+++ b/components/Tabs/style.scss
@@ -49,6 +49,10 @@
     font: var(--t-body-sm-500);
     color: var(--color);
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: var(--spacing-xs);
 
     @include animate(color);
   }
diff --git a/components/Tabs/types.ts b/components/Tabs/types.ts
index c98a821..2182118 100644
--- a/components/Tabs/types.ts
+++ b/components/Tabs/types.ts
@@ -1,3 +1,5 @@
+import type { IconKindValue } from '../Icon';
+
 export type TabProps = TabsItem;
 
 export interface TabsItem {
@@ -5,6 +7,7 @@ export interface TabsItem {
   active?: boolean;
   hidden?: boolean;
   onClick: () => void;
+  icon?: IconKindValue;
 }
 
 export interface TabsProps {

From 0c2c53f2b6faa5cd9e257acd5c1c598f409a1a98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20W=C3=B3jcik?= <maciej@defguard.net>
Date: Mon, 2 Mar 2026 14:30:32 +0100
Subject: [PATCH 3/4] pix react error

---
 components/Tabs/Tab.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/Tabs/Tab.tsx b/components/Tabs/Tab.tsx
index 3520308..54e8fae 100644
--- a/components/Tabs/Tab.tsx
+++ b/components/Tabs/Tab.tsx
@@ -12,10 +12,10 @@ export const Tab = ({ onClick, title, active, icon }: TabProps) => {
       onClick={onClick}
     >
       <div className="line"></div>
-      <p className="title">
-        {icon && <Icon icon={icon} size={18} staticColor={ThemeVariable.FgAttention} />}
+      <div className="title">
+        {icon && <Icon icon={icon} size={16} staticColor={ThemeVariable.FgAttention} />}
         {title}
-      </p>
+      </div>
     </div>
   );
 };

From 8c6e982f25468270b938a9e8145b928b5ffa7fca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20W=C3=B3jcik?= <maciej@defguard.net>
Date: Tue, 3 Mar 2026 08:22:23 +0100
Subject: [PATCH 4/4] review fixes

---
 components/CounterLabel/style.scss | 5 +----
 components/Tabs/Tab.tsx            | 7 +++++--
 components/Tabs/style.scss         | 3 ++-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/CounterLabel/style.scss b/components/CounterLabel/style.scss
index a2881f8..d8fca93 100644
--- a/components/CounterLabel/style.scss
+++ b/components/CounterLabel/style.scss
@@ -36,10 +36,7 @@
   }
 
   span {
-    font-size: var(--body-micro-11, 11px);
-    font-style: normal;
-    font-weight: var(--font-weight-medium-500, 500);
-    line-height: var(--line-height-sm-14, 14px);
+    font: var(--t-body-xs-500);
     color: inherit;
     text-align: center;
   }
diff --git a/components/Tabs/Tab.tsx b/components/Tabs/Tab.tsx
index 54e8fae..13c812b 100644
--- a/components/Tabs/Tab.tsx
+++ b/components/Tabs/Tab.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { ThemeVariable } from '../../types';
+import { isPresent } from '../../utils/isPresent';
 import { Icon } from '../Icon';
 import type { TabProps } from './types';
 
@@ -13,8 +14,10 @@ export const Tab = ({ onClick, title, active, icon }: TabProps) => {
     >
       <div className="line"></div>
       <div className="title">
-        {icon && <Icon icon={icon} size={16} staticColor={ThemeVariable.FgAttention} />}
-        {title}
+        {isPresent(icon) && (
+          <Icon icon={icon} size={16} staticColor={ThemeVariable.FgAttention} />
+        )}
+        <span>{title}</span>
       </div>
     </div>
   );
diff --git a/components/Tabs/style.scss b/components/Tabs/style.scss
index 06c1eb7..9cf04fd 100644
--- a/components/Tabs/style.scss
+++ b/components/Tabs/style.scss
@@ -50,8 +50,9 @@
     color: var(--color);
     text-align: center;
     display: flex;
+    flex-wrap: nowrap;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     column-gap: var(--spacing-xs);
 
     @include animate(color);