@gobolt/genesis 0.4.26 → 0.4.27

package/dist/components/Table/TableControls/SecondaryTableControlsRow.d.ts

@@ -8,6 +8,7 @@ export interface SecondaryTableControlsRowProps {
     totalRecords: number | null;
     onChange?: Change;
     infiniteScrollData?: InfiniteScrollChangeEvent;
+    intialRowTotal?: number;
 }
-declare const SecondaryTableControlsRow: ({ groups, totalRecords, onChange, infiniteScrollData, }: SecondaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const SecondaryTableControlsRow: ({ groups, totalRecords, onChange, infiniteScrollData, intialRowTotal, }: SecondaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
 export default SecondaryTableControlsRow;

package/dist/index.cjs

@@ -81144,41 +81144,41 @@ const Notification = ({
   ] });
 };
 const slideDown = styled.keyframes`
-  from {
+  0% {
     opacity: 0;
-    transform: translateY(-4px) scale(0.98);
+    transform: translateY(-6px) scale(0.96);
   }
-  to {
+  100% {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 `;
 const slideUp = styled.keyframes`
-  from {
+  0% {
     opacity: 0;
-    transform: translateY(4px) scale(0.98);
+    transform: translateY(6px) scale(0.96);
   }
-  to {
+  100% {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 `;
 const slideLeft = styled.keyframes`
-  from {
+  0% {
     opacity: 0;
-    transform: translateX(4px) scale(0.98);
+    transform: translateX(6px) scale(0.96);
   }
-  to {
+  100% {
     opacity: 1;
     transform: translateX(0) scale(1);
   }
 `;
 const slideRight = styled.keyframes`
-  from {
+  0% {
     opacity: 0;
-    transform: translateX(-4px) scale(0.98);
+    transform: translateX(-6px) scale(0.96);
   }
-  to {
+  100% {
     opacity: 1;
     transform: translateX(0) scale(1);
   }
@@ -81208,7 +81208,7 @@ const OverflowMenuContainer = styled.div`
   margin: 0;
   padding: 0;
 
-  /* Animation based on placement */
+  /* Animation based on placement with enhanced smoothness */
   animation: ${({ $placement, $isAnimating }) => {
   if (!$isAnimating) return "none";
   switch ($placement) {
@@ -81229,21 +81229,33 @@ const OverflowMenuContainer = styled.div`
     }
   }
 }}
-    0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 
-  /* Ensure smooth transitions and prevent jank */
+  /* Ensure ultra-smooth transitions without filter */
   transition:
-    opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
-  /* Hardware acceleration for smoother animations */
+  /* Hardware acceleration and performance optimizations */
   will-change: transform, opacity;
   backface-visibility: hidden;
   transform: translateZ(0);
+  transform-style: preserve-3d;
+
+  /* Initial hidden state to prevent flash */
+  ${({ $isAnimating }) => !$isAnimating && `
+    opacity: 0;
+    transform: scale(0.96) translateY(-6px);
+    pointer-events: none;
+  `}
 
   /* Prevent layout shifts and ensure smooth rendering */
   contain: layout style paint;
   isolation: isolate;
+
+  /* Smooth font rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 `;
 const OverflowMenuItem$1 = styled.div`
   padding: 8px 12px;
@@ -81262,12 +81274,12 @@ const OverflowMenuItem = ({ children: children2, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(OverflowMenuItem$1, { onClick, children: children2 });
 };
 const DefaultTrigger = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(HiDotsHorizontal, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(UtilityButton, { isIconButton: true, size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(HiDotsHorizontal, { size: 24 }) });
 };
 const DefaultTriggerWithOverrideTextColor = ({
   overrideTextColor
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(HiDotsHorizontal, { style: { color: overrideTextColor } }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(UtilityButton, { isIconButton: true, size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(HiDotsHorizontal, { style: { color: overrideTextColor }, size: 24 }) });
 };
 const OverflowMenu = React.forwardRef(
   ({
@@ -84224,6 +84236,11 @@ const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizin
       border-radius: 0 !important;
     }
 
+    .ant-table-header {
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+
     .ant-table {
       // Add your custom table styles here
       border-radius: 0 !important;
@@ -85683,8 +85700,10 @@ const SecondaryTableControlsRow = ({
   groups,
   totalRecords,
   onChange,
-  infiniteScrollData
+  infiniteScrollData,
+  intialRowTotal = 40
 }) => {
+  const [hasChanged, setHasChanged] = React__namespace.useState(false);
   const onGroupItemClick = (title, item) => {
     const groupItemClickEvent = {
       event: "groupItemClick",
@@ -85692,19 +85711,71 @@ const SecondaryTableControlsRow = ({
     };
     onChange?.(groupItemClickEvent);
   };
+  const handleClearFilters = () => {
+    const clearFiltersEvent = {
+      event: "clearFilters",
+      payload: {}
+    };
+    onChange?.(clearFiltersEvent);
+  };
+  React__namespace.useEffect(() => {
+    if (infiniteScrollData && infiniteScrollData?.resultsShown > intialRowTotal) {
+      setHasChanged(true);
+    }
+    if (groups) {
+      setHasChanged(true);
+    }
+    return () => {
+      setHasChanged(false);
+    };
+  }, [infiniteScrollData, groups]);
+  const isGroupsEmpty = groups ? Object.values(groups).every((items) => items.length === 0) : true;
+  const isMoreThanInitial = infiniteScrollData && Number(infiniteScrollData?.resultsShown) > intialRowTotal || !isGroupsEmpty;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       style: {
         display: "flex",
-        justifyContent: groups ? "space-between" : "flex-end",
+        justifyContent: "space-between",
         alignItems: "flex-end",
         marginTop: 8
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(GroupsRow, { groups, onGroupItemClick }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minWidth: 100 }, children: /* @__PURE__ */ jsxRuntime.jsx(GroupsRow, { groups, onGroupItemClick }) }),
         (totalRecords ?? 0) > 0 && !infiniteScrollData ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null,
-        infiniteScrollData ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${infiniteScrollData.resultsShown} results` }) : null
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 16,
+              marginRight: 16
+            },
+            children: [
+              isMoreThanInitial && hasChanged ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", color: "#6C6C6C", children: `${infiniteScrollData?.resultsShown ?? intialRowTotal} results` }) : null,
+              !isGroupsEmpty ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handleClearFilters,
+                  style: {
+                    background: "none",
+                    border: "none",
+                    padding: 0,
+                    margin: 0,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", color: "#30606B;", children: "Clear Filters" })
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 100, height: 0 } })
       ]
     }
   );
@@ -85720,30 +85791,37 @@ const TableControls = ({
   const onSecondaryChange = (actionEvent) => {
     onChange(actionEvent);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "TableControls", style: { margin: "16px 0px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PrimaryTableControlsRow,
-      {
-        sortOptions: primaryTableRowData.sortOptions,
-        searchByPlaceholder: primaryTableRowData.searchByPlaceholder,
-        isSortedAscending: primaryTableRowData.isSortedAscending,
-        onChange: onPrimaryChange,
-        searchValue: primaryTableRowData.searchValue,
-        selectedSortOption: primaryTableRowData.selectedSortOption,
-        hasSettings: primaryTableRowData.hasSettings,
-        hasFilter: primaryTableRowData.hasFilter
-      }
-    ),
-    secondaryTableRowData ? /* @__PURE__ */ jsxRuntime.jsx(
-      SecondaryTableControlsRow,
-      {
-        groups: secondaryTableRowData.groups,
-        totalRecords: secondaryTableRowData.totalRecords,
-        onChange: onSecondaryChange,
-        infiniteScrollData: secondaryTableRowData.infiniteScrollData
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "TableControls",
+      style: { paddingLeft: 20, paddingTop: 18, marginBottom: 16 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PrimaryTableControlsRow,
+          {
+            sortOptions: primaryTableRowData.sortOptions,
+            searchByPlaceholder: primaryTableRowData.searchByPlaceholder,
+            isSortedAscending: primaryTableRowData.isSortedAscending,
+            onChange: onPrimaryChange,
+            searchValue: primaryTableRowData.searchValue,
+            selectedSortOption: primaryTableRowData.selectedSortOption,
+            hasSettings: primaryTableRowData.hasSettings,
+            hasFilter: primaryTableRowData.hasFilter
+          }
+        ),
+        secondaryTableRowData ? /* @__PURE__ */ jsxRuntime.jsx(
+          SecondaryTableControlsRow,
+          {
+            groups: secondaryTableRowData.groups,
+            totalRecords: secondaryTableRowData.totalRecords,
+            onChange: onSecondaryChange,
+            infiniteScrollData: secondaryTableRowData.infiniteScrollData
+          }
+        ) : null
+      ]
+    }
+  );
 };
 const TableWithControls = ({
   tableData,
@@ -86719,11 +86797,6 @@ const startCase = (string_) => {
   return string_;
 };
 const mockColumns = [
-  {
-    key: "number",
-    title: "Id",
-    dataIndex: "number"
-  },
   {
     key: "timeslot",
     title: "Timeslot",
@@ -87043,13 +87116,14 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
       float: none; /* Prevent default float behavior */
       position: relative;
       
+      
       /* Use single side borders to prevent double borders */
       border-left: 1px solid ${colors2.surface.border};
 
       margin-right: -2px;
       user-select: none;
       color: ${colors2.onsurface.copy};
-      font-family: Inter;
+      font-family: 'Inter' !important;
       font-size: 14px;
       font-style: normal;
       font-weight: 500;
@@ -87073,7 +87147,8 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
       }
 
       .ant-tabs-tab-btn {
-        color: #3E3E3E;
+        color: ${colors2.onsurface["copy"]} !important;
+        font-weight: 500 !important;
         user-select: none;
         background: transparent;
 
@@ -87093,9 +87168,13 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
       &.ant-tabs-tab-active {
         background: ${colors2.interactive.utility?.active}; 
         user-select: none;
+        font-weight: 500;
+        font-size: 14px;
+        font-family: 'Inter' !important;
         
         .ant-tabs-tab-btn {
-          color: #222222;
+          color: ${colors2.onsurface["copy-dark"]} !important;
+          font-weight: 500 !important;
         }
 
         &:hover {

package/dist/index.js

@@ -81126,41 +81126,41 @@ const Notification = ({
   ] });
 };
 const slideDown = keyframes`
-  from {
+  0% {
     opacity: 0;
-    transform: translateY(-4px) scale(0.98);
+    transform: translateY(-6px) scale(0.96);
   }
-  to {
+  100% {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 `;
 const slideUp = keyframes`
-  from {
+  0% {
     opacity: 0;
-    transform: translateY(4px) scale(0.98);
+    transform: translateY(6px) scale(0.96);
   }
-  to {
+  100% {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 `;
 const slideLeft = keyframes`
-  from {
+  0% {
     opacity: 0;
-    transform: translateX(4px) scale(0.98);
+    transform: translateX(6px) scale(0.96);
   }
-  to {
+  100% {
     opacity: 1;
     transform: translateX(0) scale(1);
   }
 `;
 const slideRight = keyframes`
-  from {
+  0% {
     opacity: 0;
-    transform: translateX(-4px) scale(0.98);
+    transform: translateX(-6px) scale(0.96);
   }
-  to {
+  100% {
     opacity: 1;
     transform: translateX(0) scale(1);
   }
@@ -81190,7 +81190,7 @@ const OverflowMenuContainer = styled.div`
   margin: 0;
   padding: 0;
 
-  /* Animation based on placement */
+  /* Animation based on placement with enhanced smoothness */
   animation: ${({ $placement, $isAnimating }) => {
   if (!$isAnimating) return "none";
   switch ($placement) {
@@ -81211,21 +81211,33 @@ const OverflowMenuContainer = styled.div`
     }
   }
 }}
-    0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 
-  /* Ensure smooth transitions and prevent jank */
+  /* Ensure ultra-smooth transitions without filter */
   transition:
-    opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1),
-    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
-  /* Hardware acceleration for smoother animations */
+  /* Hardware acceleration and performance optimizations */
   will-change: transform, opacity;
   backface-visibility: hidden;
   transform: translateZ(0);
+  transform-style: preserve-3d;
+
+  /* Initial hidden state to prevent flash */
+  ${({ $isAnimating }) => !$isAnimating && `
+    opacity: 0;
+    transform: scale(0.96) translateY(-6px);
+    pointer-events: none;
+  `}
 
   /* Prevent layout shifts and ensure smooth rendering */
   contain: layout style paint;
   isolation: isolate;
+
+  /* Smooth font rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 `;
 const OverflowMenuItem$1 = styled.div`
   padding: 8px 12px;
@@ -81244,12 +81256,12 @@ const OverflowMenuItem = ({ children: children2, onClick }) => {
   return /* @__PURE__ */ jsx(OverflowMenuItem$1, { onClick, children: children2 });
 };
 const DefaultTrigger = () => {
-  return /* @__PURE__ */ jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsx(HiDotsHorizontal, {}) });
+  return /* @__PURE__ */ jsx(UtilityButton, { isIconButton: true, size: "small", children: /* @__PURE__ */ jsx(HiDotsHorizontal, { size: 24 }) });
 };
 const DefaultTriggerWithOverrideTextColor = ({
   overrideTextColor
 }) => {
-  return /* @__PURE__ */ jsx(Button$1, { isIconButton: true, themeType: "secondary", size: "small", children: /* @__PURE__ */ jsx(HiDotsHorizontal, { style: { color: overrideTextColor } }) });
+  return /* @__PURE__ */ jsx(UtilityButton, { isIconButton: true, size: "small", children: /* @__PURE__ */ jsx(HiDotsHorizontal, { style: { color: overrideTextColor }, size: 24 }) });
 };
 const OverflowMenu = forwardRef(
   ({
@@ -84206,6 +84218,11 @@ const getGenesisClass$1 = ({ colors: colors2, borderRadius: borderRadius2, sizin
       border-radius: 0 !important;
     }
 
+    .ant-table-header {
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+
     .ant-table {
       // Add your custom table styles here
       border-radius: 0 !important;
@@ -85665,8 +85682,10 @@ const SecondaryTableControlsRow = ({
   groups,
   totalRecords,
   onChange,
-  infiniteScrollData
+  infiniteScrollData,
+  intialRowTotal = 40
 }) => {
+  const [hasChanged, setHasChanged] = React.useState(false);
   const onGroupItemClick = (title, item) => {
     const groupItemClickEvent = {
       event: "groupItemClick",
@@ -85674,19 +85693,71 @@ const SecondaryTableControlsRow = ({
     };
     onChange?.(groupItemClickEvent);
   };
+  const handleClearFilters = () => {
+    const clearFiltersEvent = {
+      event: "clearFilters",
+      payload: {}
+    };
+    onChange?.(clearFiltersEvent);
+  };
+  React.useEffect(() => {
+    if (infiniteScrollData && infiniteScrollData?.resultsShown > intialRowTotal) {
+      setHasChanged(true);
+    }
+    if (groups) {
+      setHasChanged(true);
+    }
+    return () => {
+      setHasChanged(false);
+    };
+  }, [infiniteScrollData, groups]);
+  const isGroupsEmpty = groups ? Object.values(groups).every((items) => items.length === 0) : true;
+  const isMoreThanInitial = infiniteScrollData && Number(infiniteScrollData?.resultsShown) > intialRowTotal || !isGroupsEmpty;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
         display: "flex",
-        justifyContent: groups ? "space-between" : "flex-end",
+        justifyContent: "space-between",
         alignItems: "flex-end",
         marginTop: 8
       },
       children: [
-        /* @__PURE__ */ jsx(GroupsRow, { groups, onGroupItemClick }),
+        /* @__PURE__ */ jsx("div", { style: { minWidth: 100 }, children: /* @__PURE__ */ jsx(GroupsRow, { groups, onGroupItemClick }) }),
         (totalRecords ?? 0) > 0 && !infiniteScrollData ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` }) : null,
-        infiniteScrollData ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${infiniteScrollData.resultsShown} results` }) : null
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 16,
+              marginRight: 16
+            },
+            children: [
+              isMoreThanInitial && hasChanged ? /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "#6C6C6C", children: `${infiniteScrollData?.resultsShown ?? intialRowTotal} results` }) : null,
+              !isGroupsEmpty ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleClearFilters,
+                  style: {
+                    background: "none",
+                    border: "none",
+                    padding: 0,
+                    margin: 0,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4
+                  },
+                  children: /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "#30606B;", children: "Clear Filters" })
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { width: 100, height: 0 } })
       ]
     }
   );
@@ -85702,30 +85773,37 @@ const TableControls = ({
   const onSecondaryChange = (actionEvent) => {
     onChange(actionEvent);
   };
-  return /* @__PURE__ */ jsxs("div", { "data-testid": "TableControls", style: { margin: "16px 0px" }, children: [
-    /* @__PURE__ */ jsx(
-      PrimaryTableControlsRow,
-      {
-        sortOptions: primaryTableRowData.sortOptions,
-        searchByPlaceholder: primaryTableRowData.searchByPlaceholder,
-        isSortedAscending: primaryTableRowData.isSortedAscending,
-        onChange: onPrimaryChange,
-        searchValue: primaryTableRowData.searchValue,
-        selectedSortOption: primaryTableRowData.selectedSortOption,
-        hasSettings: primaryTableRowData.hasSettings,
-        hasFilter: primaryTableRowData.hasFilter
-      }
-    ),
-    secondaryTableRowData ? /* @__PURE__ */ jsx(
-      SecondaryTableControlsRow,
-      {
-        groups: secondaryTableRowData.groups,
-        totalRecords: secondaryTableRowData.totalRecords,
-        onChange: onSecondaryChange,
-        infiniteScrollData: secondaryTableRowData.infiniteScrollData
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "TableControls",
+      style: { paddingLeft: 20, paddingTop: 18, marginBottom: 16 },
+      children: [
+        /* @__PURE__ */ jsx(
+          PrimaryTableControlsRow,
+          {
+            sortOptions: primaryTableRowData.sortOptions,
+            searchByPlaceholder: primaryTableRowData.searchByPlaceholder,
+            isSortedAscending: primaryTableRowData.isSortedAscending,
+            onChange: onPrimaryChange,
+            searchValue: primaryTableRowData.searchValue,
+            selectedSortOption: primaryTableRowData.selectedSortOption,
+            hasSettings: primaryTableRowData.hasSettings,
+            hasFilter: primaryTableRowData.hasFilter
+          }
+        ),
+        secondaryTableRowData ? /* @__PURE__ */ jsx(
+          SecondaryTableControlsRow,
+          {
+            groups: secondaryTableRowData.groups,
+            totalRecords: secondaryTableRowData.totalRecords,
+            onChange: onSecondaryChange,
+            infiniteScrollData: secondaryTableRowData.infiniteScrollData
+          }
+        ) : null
+      ]
+    }
+  );
 };
 const TableWithControls = ({
   tableData,
@@ -86701,11 +86779,6 @@ const startCase = (string_) => {
   return string_;
 };
 const mockColumns = [
-  {
-    key: "number",
-    title: "Id",
-    dataIndex: "number"
-  },
   {
     key: "timeslot",
     title: "Timeslot",
@@ -87025,13 +87098,14 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
       float: none; /* Prevent default float behavior */
       position: relative;
       
+      
       /* Use single side borders to prevent double borders */
       border-left: 1px solid ${colors2.surface.border};
 
       margin-right: -2px;
       user-select: none;
       color: ${colors2.onsurface.copy};
-      font-family: Inter;
+      font-family: 'Inter' !important;
       font-size: 14px;
       font-style: normal;
       font-weight: 500;
@@ -87055,7 +87129,8 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
       }
 
       .ant-tabs-tab-btn {
-        color: #3E3E3E;
+        color: ${colors2.onsurface["copy"]} !important;
+        font-weight: 500 !important;
         user-select: none;
         background: transparent;
 
@@ -87075,9 +87150,13 @@ const getGenesisClass = ({ colors: colors2, borderRadius: borderRadius2, sizing:
       &.ant-tabs-tab-active {
         background: ${colors2.interactive.utility?.active}; 
         user-select: none;
+        font-weight: 500;
+        font-size: 14px;
+        font-family: 'Inter' !important;
         
         .ant-tabs-tab-btn {
-          color: #222222;
+          color: ${colors2.onsurface["copy-dark"]} !important;
+          font-weight: 500 !important;
         }
 
         &:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.4.26",
+  "version": "0.4.27",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",