@gobolt/genesis 0.4.25 → 0.4.27

package/dist/components/Message/Message.d.ts

@@ -9,6 +9,7 @@ export interface MessageProps {
     message: string;
     action?: MessageAction;
     size?: Extract<keyof typeof SIZE, "small" | "standard">;
+    isFullWidth?: boolean;
 }
-declare const Message: ({ state, message, action, size, }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const Message: ({ state, message, action, size, isFullWidth, }: MessageProps) => import("react/jsx-runtime").JSX.Element;
 export default Message;

package/dist/components/Message/styles.d.ts

@@ -1,9 +1,11 @@
 export declare const MessageRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     state: string;
     size: string;
+    isFullWidth: boolean;
 }>> & string;
 export declare const MessageContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     size?: string;
     action?: unknown;
+    isFullWidth?: boolean;
 }>> & string;
 export declare const ActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

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

@@ -78958,7 +78958,7 @@ const MessageRow = styled.div`
   gap: ${({ theme }) => theme.sizing.Size4}px;
   padding: ${({ theme }) => theme.sizing.Size3}px;
   background-color: ${({ theme, state }) => theme.colors.status[state].surface};
-  width: ${({ theme, state, size }) => size === "standard" ? "320px" : "240px"};
+  width: ${({ theme, state, size, isFullWidth }) => isFullWidth ? "100%" : size === "standard" ? "320px" : "240px"};
   pointer-events: none;
   cursor: default;
   border-radius: ${({ theme }) => theme.borderRadius.BorderRadiusSm}px;
@@ -78968,7 +78968,7 @@ const MessageContent = styled.div`
   align-items: center;
   gap: ${({ theme }) => theme.sizing.Size2}px;
   flex: 1;
-  max-width: ${({ size, action }) => size === "standard" || !action ? "320px" : "240px"};
+  max-width: ${({ size, action, isFullWidth }) => isFullWidth ? "100%" : size === "standard" || !action ? "320px" : "240px"};
 
   .ant-typography {
     display: -webkit-box;
@@ -79035,7 +79035,8 @@ const Message = ({
   state = STATE.info,
   message: message2,
   action,
-  size = SIZE.standard
+  size = SIZE.standard,
+  isFullWidth = false
 }) => {
   const theme = styled.useTheme();
   const color2 = getIconColor$1(state, theme);
@@ -79043,8 +79044,8 @@ const Message = ({
   const [linkColor, setLinkColor] = React.useState(
     theme.colors.interactive.link.active
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(MessageRow, { state, size, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { action, size, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(MessageRow, { state, size, isFullWidth, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MessageContent, { action, size, isFullWidth, children: [
       getIcon(state, color2),
       /* @__PURE__ */ jsxRuntime.jsx(
         Typography,
@@ -81143,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);
   }
@@ -81207,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) {
@@ -81228,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;
@@ -81261,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(
   ({
@@ -81612,7 +81625,7 @@ const Progress = ({
     ] });
   }
   if (isProgressCombined) {
-    const combinedPercent = getCombinedPercent(firstBarData, secondBarData);
+    const combinedPercent = getCombinedPercent(firstBarData, secondBarData || null);
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
     const adjustedFirstBar = secondBarData?.value === 100 ? 100 : firstBarData?.value || 0;
     const firstBarStrokeColor = theme?.colors?.inputs?.progress?.[firstBarData?.status || "info"];
@@ -84223,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;
@@ -85682,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",
@@ -85691,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 } })
       ]
     }
   );
@@ -85719,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,
@@ -86718,11 +86797,6 @@ const startCase = (string_) => {
   return string_;
 };
 const mockColumns = [
-  {
-    key: "number",
-    title: "Id",
-    dataIndex: "number"
-  },
   {
     key: "timeslot",
     title: "Timeslot",
@@ -86753,7 +86827,7 @@ const mockColumns = [
       const textColor = record.isSelected ? "white" : "#6c6c6c";
       return React.createElement(Typography, {
         variant: "body2",
-        children: address,
+        children: typeof address === "string" ? address : JSON.stringify(address),
         color: `${textColor}`
       });
     }
@@ -87042,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;
@@ -87072,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;
 
@@ -87092,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

@@ -78940,7 +78940,7 @@ const MessageRow = styled.div`
   gap: ${({ theme }) => theme.sizing.Size4}px;
   padding: ${({ theme }) => theme.sizing.Size3}px;
   background-color: ${({ theme, state }) => theme.colors.status[state].surface};
-  width: ${({ theme, state, size }) => size === "standard" ? "320px" : "240px"};
+  width: ${({ theme, state, size, isFullWidth }) => isFullWidth ? "100%" : size === "standard" ? "320px" : "240px"};
   pointer-events: none;
   cursor: default;
   border-radius: ${({ theme }) => theme.borderRadius.BorderRadiusSm}px;
@@ -78950,7 +78950,7 @@ const MessageContent = styled.div`
   align-items: center;
   gap: ${({ theme }) => theme.sizing.Size2}px;
   flex: 1;
-  max-width: ${({ size, action }) => size === "standard" || !action ? "320px" : "240px"};
+  max-width: ${({ size, action, isFullWidth }) => isFullWidth ? "100%" : size === "standard" || !action ? "320px" : "240px"};
 
   .ant-typography {
     display: -webkit-box;
@@ -79017,7 +79017,8 @@ const Message = ({
   state = STATE.info,
   message: message2,
   action,
-  size = SIZE.standard
+  size = SIZE.standard,
+  isFullWidth = false
 }) => {
   const theme = useTheme$1();
   const color2 = getIconColor$1(state, theme);
@@ -79025,8 +79026,8 @@ const Message = ({
   const [linkColor, setLinkColor] = useState(
     theme.colors.interactive.link.active
   );
-  return /* @__PURE__ */ jsxs(MessageRow, { state, size, children: [
-    /* @__PURE__ */ jsxs(MessageContent, { action, size, children: [
+  return /* @__PURE__ */ jsxs(MessageRow, { state, size, isFullWidth, children: [
+    /* @__PURE__ */ jsxs(MessageContent, { action, size, isFullWidth, children: [
       getIcon(state, color2),
       /* @__PURE__ */ jsx(
         Typography,
@@ -81125,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);
   }
@@ -81189,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) {
@@ -81210,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;
@@ -81243,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(
   ({
@@ -81594,7 +81607,7 @@ const Progress = ({
     ] });
   }
   if (isProgressCombined) {
-    const combinedPercent = getCombinedPercent(firstBarData, secondBarData);
+    const combinedPercent = getCombinedPercent(firstBarData, secondBarData || null);
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
     const adjustedFirstBar = secondBarData?.value === 100 ? 100 : firstBarData?.value || 0;
     const firstBarStrokeColor = theme?.colors?.inputs?.progress?.[firstBarData?.status || "info"];
@@ -84205,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;
@@ -85664,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",
@@ -85673,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 } })
       ]
     }
   );
@@ -85701,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,
@@ -86700,11 +86779,6 @@ const startCase = (string_) => {
   return string_;
 };
 const mockColumns = [
-  {
-    key: "number",
-    title: "Id",
-    dataIndex: "number"
-  },
   {
     key: "timeslot",
     title: "Timeslot",
@@ -86735,7 +86809,7 @@ const mockColumns = [
       const textColor = record.isSelected ? "white" : "#6c6c6c";
       return React__default.createElement(Typography, {
         variant: "body2",
-        children: address,
+        children: typeof address === "string" ? address : JSON.stringify(address),
         color: `${textColor}`
       });
     }
@@ -87024,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;
@@ -87054,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;
 
@@ -87074,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.25",
+  "version": "0.4.27",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",