@stella-source/stellasource-dsl 1.5.3 → 3.0.0

package/dist/cjs/styles.css

@@ -21,7 +21,9 @@
   --pale-grey: #f5f5f5;
   --grey50: #e9edf5;
   --grey100: #d5dbe5;
+  --grey200: #bcc2ce;
   --grey500: #687182;
+  --grey700: #464f60;
   /* oranges */
   --orange: #ff7600;
   --light-orange: #ff9133;

package/dist/cjs/types/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableProps } from "./types";
-declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, onRowClick, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, }: TableProps<T>): React.JSX.Element;
+declare function Table<T>({ columns, data, isLoading, serverSide, onPageChange, onSortChange, onFilterChange, onRowSelect, onRowClick, rowStatuses, showSelection, showRowOptions, showPagination, variant, paginationDetails, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, }: TableProps<T>): React.JSX.Element;
 export default Table;

package/dist/cjs/types/components/Table/styles.d.ts

@@ -3,6 +3,9 @@ interface HeaderIconButtonProps {
     $active: boolean;
     $sort?: false | SortDirection;
 }
+interface PaginationProps {
+    $hasData?: boolean;
+}
 declare const HeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {
     $isPinnedLeft?: boolean;
     $isPinnedRight?: boolean;
@@ -41,7 +44,7 @@ declare const LoadingShimmer: import("styled-components/dist/types").IStyledComp
     $width?: string;
     $height?: string;
 }>> & string;
-declare const CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Pagination/types").PaginationProps, never>> & string & Omit<({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: import("../Pagination/types").PaginationProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const CustomPagination: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Pagination/types").PaginationProps, PaginationProps>> & string & Omit<({ isLoading, rowsPerPage, totalRows, ariaLabel, onPageChange, startingPage, id, className, htmlProps, }: import("../Pagination/types").PaginationProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 declare const KebabAlign: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const EmptyTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
 declare const EmptyTableSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {

package/dist/cjs/types/components/Table/types.d.ts

@@ -45,6 +45,14 @@ export interface TableProps<T> {
         showClearFilterButton?: boolean;
         onClearFilters?: () => void;
     };
+    defaultFilters?: {
+        id: string;
+        value: unknown;
+    }[];
+    staticFilters?: {
+        id: string;
+        value: unknown;
+    }[];
 }
 export interface CustomColumnMeta {
     headerAlign?: "left" | "right";
@@ -52,7 +60,7 @@ export interface CustomColumnMeta {
     dataType?: "string" | "number";
     pin?: "left" | "right";
     filterOptions?: string[] | number[];
-    singleSelect?: boolean;
+    filterMode?: "singleSelect" | "multiSelect" | "search";
 }
 export type RowStatus = "action-pending" | "completed";
 export {};

package/dist/cjs/types/components/Tabs/Styles.d.ts

@@ -1,2 +1,12 @@
-declare const TabsBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export { TabsBar };
+import { TabsVariant } from "./types";
+interface TabsStylesProps {
+    $variant: `${TabsVariant}`;
+    $isPill?: boolean;
+}
+interface NotificationBubbleProps {
+    $isActive?: boolean;
+}
+declare const TabsBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, TabsStylesProps>> & string;
+declare const TabButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TabsStylesProps>> & string;
+declare const NotificationBubble: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, NotificationBubbleProps>> & string;
+export { TabsBar, TabButton, NotificationBubble };

package/dist/cjs/types/components/Tabs/Tab.d.ts

@@ -1,10 +1,14 @@
 import React, { HTMLAttributes } from "react";
+import { TabsVariant } from "./types";
 interface TabProps {
     id?: string;
     className?: string;
     onClick?: (tabLabel: string) => void;
-    label: string;
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
+    active?: boolean;
+    variant?: `${TabsVariant}`;
+    notifications?: number;
+    label: string;
 }
-declare const Tab: ({ id, className, onClick, htmlProps, label }: TabProps) => React.JSX.Element;
+declare const Tab: ({ id, className, onClick, htmlProps, label, variant, active, notifications, }: TabProps) => React.JSX.Element;
 export default Tab;

package/dist/cjs/types/components/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TabsProps } from "./types";
-declare const Tabs: ({ id, className, tabs, activeTab, htmlProps, onTabClick, }: TabsProps) => React.JSX.Element;
+declare const Tabs: ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant, isPill, }: TabsProps) => React.JSX.Element;
 export default Tabs;

package/dist/cjs/types/components/Tabs/Tabs.stories.d.ts

@@ -1,10 +1,17 @@
-import { TabsProps } from "./types";
+import { TabsProps, TabsVariant } from "./types";
 declare const _default: {
     title: string;
-    component: ({ id, className, tabs, activeTab, htmlProps, onTabClick, }: TabsProps) => import("react").JSX.Element;
+    component: ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant, isPill, }: TabsProps) => import("react").JSX.Element;
     tags: string[];
     parameters: {};
-    argTypes: {};
+    argTypes: {
+        variant: {
+            options: TabsVariant[];
+            control: {
+                type: string;
+            };
+        };
+    };
     args: TabsProps;
 };
 export default _default;

package/dist/cjs/types/components/Tabs/types.d.ts

@@ -1,9 +1,29 @@
 import { HTMLAttributes } from "react";
-export interface TabsProps {
+export declare enum TabsVariant {
+    LIGHT = "light",
+    DARK = "dark"
+}
+interface TabsBaseProps {
     id?: string;
     className?: string;
     activeTab?: string;
     htmlProps?: HTMLAttributes<HTMLElement>;
-    tabs: string[];
+    defaultActiveTab?: string;
+    isPill?: boolean;
+    variant?: `${TabsVariant}`;
+    tabs: {
+        label: string;
+        notifications?: number;
+    }[];
     onTabClick: (label?: string) => void;
 }
+interface TabsPropsLight {
+    variant?: `${TabsVariant.LIGHT}`;
+    isPill?: boolean;
+}
+interface TabsPropsDark {
+    variant?: `${TabsVariant.DARK}`;
+    isPill?: never;
+}
+export type TabsProps = TabsBaseProps & (TabsPropsLight | TabsPropsDark);
+export {};

package/dist/cjs/types/shared/tokens/index.d.ts

@@ -20,7 +20,9 @@ declare const Styles: {
             pale: string;
             50: string;
             100: string;
+            200: string;
             500: string;
+            700: string;
         };
         blue: {
             darkNavy: string;

package/dist/cjs/types/shared/tokens/storybook/color.d.ts

@@ -34,8 +34,12 @@ declare const colorTokens: {
         50: string;
         /** #d5dbe5 */
         100: string;
+        /** #BCC2CE */
+        200: string;
         /** #687182 */
         500: string;
+        /** #464F60 */
+        700: string;
     };
     blue: {
         /** #1f4168 */

package/dist/cjs/types/shared/utils/useDebounceCallback.d.ts

@@ -0,0 +1,10 @@
+type DebouncedCallback<T extends (...args: any[]) => any> = (...args: Parameters<T>) => void;
+type DebounceControls<T extends (...args: any[]) => any> = {
+    flush: () => void;
+    cancel: () => void;
+};
+/**
+ * Returns a debounced version of a callback, along with flush and cancel methods.
+ */
+export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback: T, delay: number): [DebouncedCallback<T>, DebounceControls<T>];
+export {};

package/dist/esm/index.esm.js

@@ -1,5 +1,5 @@
 import * as a$l from 'react';
-import a__default, { createContext, useMemo as useMemo$1, isValidElement, version as version$1, useContext, useRef, useLayoutEffect as useLayoutEffect$1, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import a__default, { createContext, useMemo as useMemo$1, isValidElement, version as version$1, useContext, useRef, useLayoutEffect as useLayoutEffect$1, useEffect, useState, forwardRef, useImperativeHandle, useCallback } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import ReactDOM, { createPortal } from 'react-dom';
 
@@ -38,8 +38,12 @@ const colorTokens = {
         50: "var(--grey50)",
         /** #d5dbe5 */
         100: "var(--grey100)",
+        /** #BCC2CE */
+        200: "var(--grey200)",
         /** #687182 */
         500: "var(--grey500)",
+        /** #464F60 */
+        700: "var(--grey700)",
     },
     blue: {
         /** #1f4168 */
@@ -21001,17 +21005,14 @@ const StyledTable = styled.table `
   border-collapse: collapse;
 `;
 const CustomIconButton$1 = styled(IconButton) `
-  opacity: ${({ $active }) => ($active ? 1 : 0)};
-  transition: opacity 0.2s ease;
   padding: 0px;
   & > svg {
-    max-width: ${({ $active }) => !$active && "0px"};
-    fill: ${({ $active }) => $active ? Styles.color.grey.charcoal : Styles.color.grey.smoke};
+    fill: ${({ $active }) => $active ? Styles.color.grey.charcoal : Styles.color.grey.medium};
   }
   &:hover:not(:disabled) {
     background-color: transparent;
     & > svg {
-      fill: ${Styles.color.grey.charcoal};
+      fill: ${Styles.color.grey.smoke};
     }
   }
 `;
@@ -21056,9 +21057,20 @@ const Checkbox = styled.input.attrs({ type: "checkbox" }) `
   cursor: pointer;
 `;
 const MenuItemGroup = styled.div `
-  max-height: 150px;
+  --menu-options-max-height: 136px;
+  max-height: var(--menu-options-max-height);
   overflow-y: auto;
   overflow-x: hidden;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(var(--menu-options-max-height) + 6px);
+    pointer-events: none;
+    background: linear-gradient(to bottom, transparent 94%, white);
+  }
 `;
 const BodyCell = styled.td `
   box-shadow: ${({ $isPinnedLeft, $columnInfo, $isPinnedRight }) => $isPinnedLeft && $columnInfo.getIsLastColumn("left")
@@ -21082,7 +21094,7 @@ const BodyCell = styled.td `
   padding: 0px 12px;
   font-size: 12px;
   color: ${Styles.color.grey.charcoal};
-  border-bottom: ${({ $isLastRow }) => $isLastRow ? "none" : `1px solid ${Styles.color.grey.light}`};
+  border-bottom: 1px solid ${Styles.color.grey.light};
   transition: box-shadow 0.3s ease-out;
 `;
 const MenuButton = styled.button `
@@ -21168,7 +21180,7 @@ const MenuItemOption = styled.button `
     background: #f5f5f5;
   }
 
-  background-color: ${({ $applied }) => $applied ? Styles.color.blue.light : "none"};
+  background-color: ${({ $applied }) => $applied ? Styles.color.blue.light : "transparent"};
 `;
 const FilterLabelTransparent = styled.div `
   font-size: 12px;
@@ -21230,7 +21242,7 @@ const LoadingShimmer = styled.div `
   }
 `;
 const CustomPagination = styled(Pagination) `
-  border-top: 1px solid ${Styles.color.grey.light};
+  border-top: ${({ $hasData }) => $hasData ? "0px" : `1px solid ${Styles.color.grey.light}`};
 `;
 const KebabAlign = styled.div `
   display: flex;
@@ -21291,6 +21303,38 @@ const IndeterminateCheckbox = ({ isIndeterminate, isChecked, onChange, }) => {
     return (a__default.createElement(Checkbox, { ref: ref, checked: isChecked, onChange: (e) => onChange?.(e) }));
 };
 
+/**
+ * Returns a debounced version of a callback, along with flush and cancel methods.
+ */
+function useDebounceCallback(callback, delay) {
+    const timeoutRef = useRef(null);
+    const lastArgsRef = useRef(null);
+    const debounced = useCallback((...args) => {
+        lastArgsRef.current = args;
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            if (lastArgsRef.current)
+                callback(...lastArgsRef.current);
+            timeoutRef.current = null;
+        }, delay);
+    }, [callback, delay]);
+    const flush = useCallback(() => {
+        if (timeoutRef.current && lastArgsRef.current) {
+            clearTimeout(timeoutRef.current);
+            callback(...lastArgsRef.current);
+            timeoutRef.current = null;
+        }
+    }, [callback]);
+    const cancel = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    return [debounced, { flush, cancel }];
+}
+
 const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition, onFilterMenuInteraction, onFilterApply, }) => {
     const column = header.column;
     const columnDef = column.columnDef;
@@ -21300,10 +21344,17 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
     const buttonRef = useRef(null);
     const [showFilter, setShowFilter] = useState(false);
     const [coords, setCoords] = useState({ top: 0, left: 0 });
+    const [searchValue, setSearchValue] = useState();
     const [tempFilters, setTempFilters] = useState([]);
     const [currentAppliedFilters, setCurrentAppliedFilters] = useState([]);
     const [filterOptions, setFilterOptions] = useState([]);
     const [textAlign, setTextAlign] = useState("left");
+    const [handleSave, { flush }] = useDebounceCallback((value) => {
+        column?.setFilterValue([value]);
+        if (value === "")
+            column?.setFilterValue([]);
+        onFilterApply?.();
+    }, 300);
     useEffect(() => {
         setFilterOptions(meta?.filterOptions || []);
     }, [meta]);
@@ -21377,7 +21428,13 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                             position: "absolute",
                         }, ref: menuRef },
                         a__default.createElement(MenuItemGroup, null,
-                            !meta?.singleSelect && (a__default.createElement(MenuItem, { key: "select-all" },
+                            meta?.filterMode === "search" && (a__default.createElement("div", { style: { padding: "4px 10px" } },
+                                a__default.createElement(TextInput, { id: `${columnDef.header}-search`, label: `${columnDef.header} search`, placeholder: "Search", hideLabel: true, onChange: (value) => {
+                                        setSearchValue(value);
+                                        handleSave(value);
+                                    }, onBlur: () => flush(), endIcon: "search", value: searchValue }))),
+                            (meta?.filterMode === "multiSelect" ||
+                                !meta?.filterMode) && (a__default.createElement(MenuItem, { key: "select-all" },
                                 a__default.createElement(Checkbox, { id: "all-checkbox", name: "all-checkbox", checked: meta?.filterOptions?.every((item) => tempFilters?.includes(item)), onChange: () => {
                                         setTempFilters((prev) => {
                                             if (prev?.length === meta?.filterOptions?.length) {
@@ -21392,7 +21449,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                             (serverSide
                                 ? filterOptions
                                 : Array.from(header.column.getFacetedUniqueValues().keys()))?.map((item) => {
-                                if (meta?.singleSelect) {
+                                if (meta?.filterMode === "singleSelect") {
                                     return (a__default.createElement(MenuItemOption, { key: item, id: `${item}-button`, onClick: () => {
                                             setCurrentAppliedFilters([item]);
                                             column?.setFilterValue([item]);
@@ -21400,21 +21457,25 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                             onFilterApply?.();
                                         }, "$applied": tempFilters?.includes(item) }, item));
                                 }
-                                return (a__default.createElement(MenuItem, { key: item },
-                                    a__default.createElement(Checkbox, { id: `${item}-checkbox`, name: `${item}-checkbox`, checked: tempFilters?.includes(item), onChange: () => {
-                                            setTempFilters((prev) => {
-                                                if (prev?.includes(item)) {
-                                                    return prev.filter((i) => i !== item);
-                                                }
-                                                else {
-                                                    return [...prev, item];
-                                                }
-                                            });
-                                        } }),
-                                    a__default.createElement(FilterLabelTransparent, null, item),
-                                    a__default.createElement(FilterBoxLabel, { htmlFor: `${item}-checkbox` }, item)));
+                                if (meta?.filterMode === "multiSelect" ||
+                                    !meta?.filterMode) {
+                                    return (a__default.createElement(MenuItem, { key: item },
+                                        a__default.createElement(Checkbox, { id: `${item}-checkbox`, name: `${item}-checkbox`, checked: tempFilters?.includes(item), onChange: () => {
+                                                setTempFilters((prev) => {
+                                                    if (prev?.includes(item)) {
+                                                        return prev.filter((i) => i !== item);
+                                                    }
+                                                    else {
+                                                        return [...prev, item];
+                                                    }
+                                                });
+                                            } }),
+                                        a__default.createElement(FilterLabelTransparent, null, item),
+                                        a__default.createElement(FilterBoxLabel, { htmlFor: `${item}-checkbox` }, item)));
+                                }
                             })),
-                        !meta?.singleSelect && (a__default.createElement(MenuButton, { key: "apply", onClick: () => {
+                        (meta?.filterMode === "multiSelect" ||
+                            !meta?.filterMode) && (a__default.createElement(MenuButton, { key: "apply", onClick: () => {
                                 setCurrentAppliedFilters(tempFilters);
                                 column?.setFilterValue(tempFilters?.length > 0 ? tempFilters : []);
                                 showFilterMenu(false);
@@ -21425,6 +21486,7 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                                 showFilterMenu(false);
                                 setTempFilters([]);
                                 setCurrentAppliedFilters([]);
+                                setSearchValue("");
                                 onFilterApply?.();
                             } }, "Clear Filter"))), document.body))),
             header.column.getCanSort() && (a__default.createElement(SortButton, { className: "icon", iconName: "sort", ariaLabel: "Sort Button", variant: "tertiary", "$active": sorting.some((s) => s.id === header.column.id), "$sort": column.getIsSorted(), onClick: (e) => header.column.getToggleSortingHandler()?.(e) })),
@@ -21486,7 +21548,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     startingPage: 1,
     rowsPerPage: 10,
     totalRows: data.length,
-}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, }) {
+}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, }) {
     const [rowSelection, setRowSelection] = useState({});
     const [selectedRows] = useState({});
     const [pageIndex, setPageIndex] = useState(paginationDetails?.startingPage);
@@ -21500,7 +21562,26 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     const [sorting, setSorting] = useState([]);
     const [filters, setFilters] = useState({});
     const [rowState, setRowState] = useState({});
-    const [columnFilters, setColumnFilters] = useState([]);
+    const [columnFilters, setColumnFilters] = useState(() => {
+        const base = defaultFilters ?? [];
+        if (!staticFilters?.length)
+            return base;
+        const merged = [...base];
+        staticFilters.forEach((sf) => {
+            const existing = merged.find((f) => f.id === sf.id);
+            if (existing) {
+                const staticValues = new Set(sf.value);
+                existing.value = [
+                    ...sf.value,
+                    ...existing.value.filter((v) => !staticValues.has(v)),
+                ];
+            }
+            else {
+                merged.push(sf);
+            }
+        });
+        return merged;
+    });
     const [columnPinning, setColumnPinning] = useState({ left: ["select"], right: ["options"] });
     const scrollRef = useRef(null);
     const [scrollState, setScrollState] = useState({
@@ -21634,9 +21715,31 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         },
         onColumnFiltersChange: (updaterOrValue) => {
             // TanStack passes either updater function or new filters array
-            const next = typeof updaterOrValue === "function"
+            let next = typeof updaterOrValue === "function"
                 ? updaterOrValue(columnFilters)
                 : updaterOrValue;
+            // Re-apply static filters so they can never be removed
+            if (staticFilters?.length) {
+                next = next.map((f) => {
+                    const staticFilter = staticFilters.find((sf) => sf.id === f.id);
+                    if (!staticFilter)
+                        return f;
+                    const staticValues = new Set(staticFilter.value);
+                    const userValues = f.value;
+                    // Keep all static values locked in, plus whatever the user freely toggled
+                    const merged = [
+                        ...staticFilter.value,
+                        ...userValues.filter((v) => !staticValues.has(v)),
+                    ];
+                    return { ...f, value: merged };
+                });
+                // Ensure static filters are always present even if column wasn't touched
+                const nextIds = new Set(next.map((f) => f.id));
+                staticFilters.forEach((sf) => {
+                    if (!nextIds.has(sf.id))
+                        next = [...next, sf];
+                });
+            }
             setColumnFilters(next);
             // Also keep your simple `filters` map in sync (optional)
             const map = {};
@@ -21649,7 +21752,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             number: (row, columnId, filterValue) => {
                 if (!filterValue?.length)
                     return true;
-                return filterValue.includes(Number(row.getValue(columnId)));
+                return filterValue.some((val) => Number(row.getValue(columnId)).toString().includes(val.toString()));
             },
         },
     });
@@ -21661,11 +21764,16 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             onRowSelect?.(selectedData);
         }
     }, [rowSelection]);
+    const isMounted = useRef(false);
     useEffect(() => {
+        if (!isMounted.current) {
+            isMounted.current = true;
+            return;
+        }
         resetTable();
     }, [resetTrigger]);
     const resetTable = () => {
-        setColumnFilters([]);
+        setColumnFilters(staticFilters ?? []);
         setFilters({});
         setSorting([]);
         setPageIndex(1);
@@ -21755,7 +21863,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
                                 pagination.pageSize * pagination.pageIndex ===
                                 table.getRowModel().rows.length - 1 }, value));
                 })))))))),
-        showPagination && paginationDetails?.totalRows > 0 && (a__default.createElement(CustomPagination, { totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
+        showPagination && paginationDetails?.totalRows > 0 && (a__default.createElement(CustomPagination, { "$hasData": table.getRowModel().rows.length > 0, totalRows: serverSide ? totalData : table.getFilteredRowModel().rows.length, isLoading: isLoading, rowsPerPage: paginationDetails?.rowsPerPage, startingPage: pageIndex, onPageChange: (page, pageSize) => {
                 table.toggleAllRowsSelected(false);
                 setPageIndex(page);
                 setPagination((prev) => ({
@@ -21925,17 +22033,113 @@ const PaymentStatus = ({ variant, id, className }) => {
         a__default.createElement(PaymentStatusLabel, null, label)));
 };
 
-const Tab = ({ id, className, onClick, htmlProps, label }) => {
-    return (a__default.createElement("button", { id: id, className: className, onClick: () => onClick?.(label), ...htmlProps }, label));
+const tabButtonVariantSelector = (variant) => {
+    switch (variant) {
+        case "light":
+            return css `
+        border-image: linear-gradient(
+            to bottom,
+            transparent 20%,
+            ${Styles.color.grey[200]} 20% 80%,
+            transparent 80% 100%
+          )
+          1;
+        border-right: 2px solid;
+        &:has(+ .active) {
+          border-image: none;
+          border-right: 2px solid ${Styles.color.grey.light};
+        }
+        &.active {
+          border: none;
+          margin-right: 2px;
+          box-shadow:
+            0 0 0 0.5px rgba(0, 0, 0, 0.08),
+            0 2px 6px 0 rgba(0, 0, 0, 0.25);
+          border-radius: 4px;
+          color: ${Styles.color.core.primary};
+          background-color: ${Styles.color.white};
+        }
+        &:hover:not(.active) {
+          color: ${Styles.color.core.primary};
+        }
+      `;
+        case "dark":
+            return css `
+        &.active {
+          border: none;
+          box-shadow:
+            0 0 0 0.5px rgba(0, 0, 0, 0.08),
+            0 2px 6px 0 rgba(0, 0, 0, 0.25);
+          border-radius: 10px;
+          color: ${Styles.color.white};
+          background-color: ${Styles.color.grey[700]};
+        }
+        &:hover:not(.active) {
+          color: ${Styles.color.grey[700]};
+        }
+      `;
+        default:
+            return css ``;
+    }
+};
+const tabsVariantSelector = (variant) => {
+    switch (variant) {
+        case "light":
+            return `${Styles.color.grey.light}`;
+        case "dark":
+            return "transparent";
+        default:
+            return `${Styles.color.grey.light}`;
+    }
 };
-
 const TabsBar = styled.nav `
   display: flex;
-  gap: 2px;
+  width: fit-content;
+  padding: 2px;
+  background-color: ${({ $variant }) => tabsVariantSelector($variant)};
+  border-radius: ${({ $isPill }) => ($isPill ? "6px" : "6px 6px 0px 0px")};
+  :last-child {
+    border: none;
+    &.active {
+      margin: 0;
+    }
+  }
+`;
+const TabButton = styled.button `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  color: ${Styles.color.grey.charcoal};
+  padding: 4px 10px;
+  line-height: 20px;
+  font-size: 14px;
+  ${({ $variant }) => tabButtonVariantSelector($variant)};
+`;
+const NotificationBubble = styled.span `
+  margin-left: 5px;
+  background-color: ${({ $isActive }) => $isActive ? Styles.color.transparent : Styles.color.core.accent};
+  border-radius: 100%;
+  padding: ${({ $isActive }) => ($isActive ? "1px 4px 1px 3px" : "1px 4px")};
+  font-size: ${({ $isActive }) => ($isActive ? "12px" : "10px")};
+  line-height: 12px;
+  color: ${({ $isActive }) => $isActive ? Styles.color.core.primary : Styles.color.white};
 `;
 
-const Tabs = ({ id, className, tabs, activeTab, htmlProps, onTabClick, }) => {
-    return (a__default.createElement(TabsBar, { id: id, className: className, ...htmlProps }, tabs.map((tab) => (a__default.createElement(Tab, { key: `${id}-${tab}`, id: `${id}-${tab}`, label: tab, onClick: () => onTabClick(tab) })))));
+const Tab = ({ id, className, onClick, htmlProps, label, variant = "light", active = false, notifications, }) => {
+    return (a__default.createElement(TabButton, { id: id, "$variant": variant, className: `${className} ${active && "active"}`, onClick: () => onClick?.(label), ...htmlProps },
+        label,
+        notifications && notifications > 0 && (a__default.createElement(NotificationBubble, { "$isActive": active }, notifications))));
+};
+
+const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, variant = "light", isPill, }) => {
+    const [activeTab, setActiveTab] = useState(defaultActiveTab ?? tabs[0]);
+    const handleClick = (label) => {
+        setActiveTab(label);
+        onTabClick(label);
+    };
+    return (a__default.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a__default.createElement(Tab, { key: `${id}-${tab.label}`, id: `${id}-${tab.label}`, label: tab.label, active: tab.label === activeTab, variant: variant, onClick: () => handleClick(tab.label), notifications: tab.notifications })))));
 };
 
 export { HelperText, IconButton, Label, Loader, NumberInput, Pagination, PasswordInput, PaymentStatus, StellaButton, StellaButtonVariant, StellaIcon, Styles, Sync, Table, TableUnitsAndTotals, Tabs, TextInput, Tooltip };