@stella-source/stellasource-dsl 3.6.0 → 5.1.0

package/dist/esm/index.esm.js

@@ -941,7 +941,7 @@ const a$f = /* @__PURE__ */ new Map([
   ]
 ]);
 
-const H = /* @__PURE__ */ new Map([
+const H$1 = /* @__PURE__ */ new Map([
   [
     "bold",
     /* @__PURE__ */ a$n.createElement(a$n.Fragment, null, /* @__PURE__ */ a$n.createElement("path", { d: "M28,132a12,12,0,0,1,0-24H56a4,4,0,0,0,0-8H40a28,28,0,0,1-3.38-55.79A12,12,0,0,1,59.3,44H64a12,12,0,0,1,0,24H40a4,4,0,0,0,0,8H56a28,28,0,0,1,3.38,55.79A12,12,0,0,1,36.7,132ZM236,56V192a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V164a12,12,0,0,1,24,0v24H156V164H88a12,12,0,0,1,0-24h68V116H112a12,12,0,0,1,0-24H212V68H104a12,12,0,0,1,0-24H224A12,12,0,0,1,236,56Zm-56,84h32V116H180Zm32,48V164H180v24Z" }))
@@ -1553,6 +1553,33 @@ const e$j = /* @__PURE__ */ new Map([
   ]
 ]);
 
+const H = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ a$n.createElement(a$n.Fragment, null, /* @__PURE__ */ a$n.createElement("path", { d: "M224,44H32A12,12,0,0,0,20,56V192a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A12,12,0,0,0,224,44ZM44,116H76v24H44Zm56,0H212v24H100ZM212,68V92H44V68ZM44,164H76v24H44Zm56,24V164H212v24Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ a$n.createElement(a$n.Fragment, null, /* @__PURE__ */ a$n.createElement("path", { d: "M88,104v96H32V104Z", opacity: "0.2" }), /* @__PURE__ */ a$n.createElement("path", { d: "M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM40,112H80v32H40Zm56,0H216v32H96ZM216,64V96H40V64ZM40,160H80v32H40Zm176,32H96V160H216v32Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ a$n.createElement(a$n.Fragment, null, /* @__PURE__ */ a$n.createElement("path", { d: "M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM40,112H80v32H40Zm56,0H216v32H96ZM40,160H80v32H40Zm176,32H96V160H216v32Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ a$n.createElement(a$n.Fragment, null, /* @__PURE__ */ a$n.createElement("path", { d: "M224,50H32a6,6,0,0,0-6,6V192a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A6,6,0,0,0,224,50ZM38,110H82v36H38Zm56,0H218v36H94ZM218,62V98H38V62ZM38,192V158H82v36H40A2,2,0,0,1,38,192Zm178,2H94V158H218v34A2,2,0,0,1,216,194Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ a$n.createElement(a$n.Fragment, null, /* @__PURE__ */ a$n.createElement("path", { d: "M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM40,112H80v32H40Zm56,0H216v32H96ZM216,64V96H40V64ZM40,160H80v32H40Zm176,32H96V160H216v32Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ a$n.createElement(a$n.Fragment, null, /* @__PURE__ */ a$n.createElement("path", { d: "M224,52H32a4,4,0,0,0-4,4V192a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V56A4,4,0,0,0,224,52ZM36,108H84v40H36Zm56,0H220v40H92ZM220,60v40H36V60ZM36,192V156H84v40H40A4,4,0,0,1,36,192Zm180,4H92V156H220v36A4,4,0,0,1,216,196Z" }))
+  ]
+]);
+
 const e$i = /* @__PURE__ */ new Map([
   [
     "bold",
@@ -1826,7 +1853,7 @@ const a$5 = /* @__PURE__ */ new Map([
   ]
 ]);
 
-const o$m = createContext({
+const o$n = createContext({
   color: "currentColor",
   size: "1em",
   weight: "regular",
@@ -1850,7 +1877,7 @@ const p$2 = a$n.forwardRef(
       weight: f = "regular",
       mirrored: g = false,
       ...w
-    } = a$n.useContext(o$m);
+    } = a$n.useContext(o$n);
     return /* @__PURE__ */ a$n.createElement(
       "svg",
       {
@@ -1872,9 +1899,9 @@ const p$2 = a$n.forwardRef(
 );
 p$2.displayName = "IconBase";
 
-const o$l = a$n.forwardRef((e, c) => /* @__PURE__ */ a$n.createElement(p$2, { ref: c, ...e, weights: a$m }));
-o$l.displayName = "ArrowCircleUpIcon";
-const p$1 = o$l;
+const o$m = a$n.forwardRef((e, c) => /* @__PURE__ */ a$n.createElement(p$2, { ref: c, ...e, weights: a$m }));
+o$m.displayName = "ArrowCircleUpIcon";
+const p$1 = o$m;
 
 const r$7 = a$n.forwardRef((e, t) => /* @__PURE__ */ a$n.createElement(p$2, { ref: t, ...e, weights: a$l }));
 r$7.displayName = "ArrowUpIcon";
@@ -1891,9 +1918,9 @@ const e$d = a$n.forwardRef((o, t) => /* @__PURE__ */ a$n.createElement(p$2, { re
 e$d.displayName = "ArrowsOutLineVerticalIcon";
 const n$c = e$d;
 
-const o$k = a$n.forwardRef((r, s) => /* @__PURE__ */ a$n.createElement(p$2, { ref: s, ...r, weights: e$E }));
-o$k.displayName = "AsteriskIcon";
-const c$9 = o$k;
+const o$l = a$n.forwardRef((r, s) => /* @__PURE__ */ a$n.createElement(p$2, { ref: s, ...r, weights: e$E }));
+o$l.displayName = "AsteriskIcon";
+const c$9 = o$l;
 
 const a$4 = a$n.forwardRef((e, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...e, weights: e$D }));
 a$4.displayName = "BankIcon";
@@ -1929,16 +1956,16 @@ const c$6 = a$n.forwardRef((o, r) => /* @__PURE__ */ a$n.createElement(p$2, { re
 c$6.displayName = "CheckCircleIcon";
 const s$2 = c$6;
 
-const o$j = a$n.forwardRef((t, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...t, weights: l$6 }));
-o$j.displayName = "CheckFatIcon";
-const n$b = o$j;
+const o$k = a$n.forwardRef((t, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...t, weights: l$6 }));
+o$k.displayName = "CheckFatIcon";
+const n$b = o$k;
 
-const o$i = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: e$y }));
-o$i.displayName = "CheckSquareIcon";
+const o$j = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: e$y }));
+o$j.displayName = "CheckSquareIcon";
 
-const o$h = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: a$i }));
-o$h.displayName = "CircleHalfIcon";
-const l = o$h;
+const o$i = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: a$i }));
+o$i.displayName = "CircleHalfIcon";
+const l = o$i;
 
 const e$9 = a$n.forwardRef((o, c) => /* @__PURE__ */ a$n.createElement(p$2, { ref: c, ...o, weights: e$x }));
 e$9.displayName = "CurrencyCircleDollarIcon";
@@ -1954,21 +1981,21 @@ const n$a = t$3;
 const t$2 = a$n.forwardRef((m, e) => /* @__PURE__ */ a$n.createElement(p$2, { ref: e, ...m, weights: a$h }));
 t$2.displayName = "EmptyIcon";
 
-const o$g = a$n.forwardRef((r, t) => /* @__PURE__ */ a$n.createElement(p$2, { ref: t, ...r, weights: a$g }));
-o$g.displayName = "EyeIcon";
-const n$9 = o$g;
+const o$h = a$n.forwardRef((r, t) => /* @__PURE__ */ a$n.createElement(p$2, { ref: t, ...r, weights: a$g }));
+o$h.displayName = "EyeIcon";
+const n$9 = o$h;
 
-const o$f = a$n.forwardRef((a, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...a, weights: e$u }));
-o$f.displayName = "EyeSlashIcon";
-const n$8 = o$f;
+const o$g = a$n.forwardRef((a, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...a, weights: e$u }));
+o$g.displayName = "EyeSlashIcon";
+const n$8 = o$g;
 
-const o$e = a$n.forwardRef((n, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...n, weights: l$5 }));
-o$e.displayName = "FunnelIcon";
-const s$1 = o$e;
+const o$f = a$n.forwardRef((n, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...n, weights: l$5 }));
+o$f.displayName = "FunnelIcon";
+const s$1 = o$f;
 
-const o$d = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: l$4 }));
-o$d.displayName = "GearIcon";
-const n$7 = o$d;
+const o$e = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: l$4 }));
+o$e.displayName = "GearIcon";
+const n$7 = o$e;
 
 const e$8 = a$n.forwardRef((r, s) => /* @__PURE__ */ a$n.createElement(p$2, { ref: s, ...r, weights: l$3 }));
 e$8.displayName = "HourglassSimpleLowIcon";
@@ -1977,41 +2004,41 @@ const e$7 = a$n.forwardRef((r, t) => /* @__PURE__ */ a$n.createElement(p$2, { re
 e$7.displayName = "InfoIcon";
 const c$4 = e$7;
 
-const e$6 = a$n.forwardRef((c, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...c, weights: H }));
+const e$6 = a$n.forwardRef((c, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...c, weights: H$1 }));
 e$6.displayName = "InvoiceIcon";
 const m$8 = e$6;
 
-const o$c = a$n.forwardRef((r, t) => /* @__PURE__ */ a$n.createElement(p$2, { ref: t, ...r, weights: a$e }));
-o$c.displayName = "KeyholeIcon";
-const n$6 = o$c;
+const o$d = a$n.forwardRef((r, t) => /* @__PURE__ */ a$n.createElement(p$2, { ref: t, ...r, weights: a$e }));
+o$d.displayName = "KeyholeIcon";
+const n$6 = o$d;
 
-const o$b = a$n.forwardRef((s, t) => /* @__PURE__ */ a$n.createElement(p$2, { ref: t, ...s, weights: l$2 }));
-o$b.displayName = "ListChecksIcon";
+const o$c = a$n.forwardRef((s, t) => /* @__PURE__ */ a$n.createElement(p$2, { ref: t, ...s, weights: l$2 }));
+o$c.displayName = "ListChecksIcon";
 
-const o$a = a$n.forwardRef((m, p) => /* @__PURE__ */ a$n.createElement(p$2, { ref: p, ...m, weights: e$t }));
-o$a.displayName = "LockSimpleOpenIcon";
-const a = o$a;
+const o$b = a$n.forwardRef((m, p) => /* @__PURE__ */ a$n.createElement(p$2, { ref: p, ...m, weights: e$t }));
+o$b.displayName = "LockSimpleOpenIcon";
+const a = o$b;
 
-const o$9 = a$n.forwardRef((s, n) => /* @__PURE__ */ a$n.createElement(p$2, { ref: n, ...s, weights: a$d }));
-o$9.displayName = "MagnifyingGlassIcon";
-const f = o$9;
+const o$a = a$n.forwardRef((s, n) => /* @__PURE__ */ a$n.createElement(p$2, { ref: n, ...s, weights: a$d }));
+o$a.displayName = "MagnifyingGlassIcon";
+const f = o$a;
 
-const o$8 = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: e$s }));
-o$8.displayName = "MinusSquareIcon";
+const o$9 = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: e$s }));
+o$9.displayName = "MinusSquareIcon";
 
 const e$5 = a$n.forwardRef((a, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...a, weights: e$r }));
 e$5.displayName = "MoneyWavyIcon";
 
-const o$7 = a$n.forwardRef((t, c) => /* @__PURE__ */ a$n.createElement(p$2, { ref: c, ...t, weights: e$q }));
-o$7.displayName = "NotePencilIcon";
+const o$8 = a$n.forwardRef((t, c) => /* @__PURE__ */ a$n.createElement(p$2, { ref: c, ...t, weights: e$q }));
+o$8.displayName = "NotePencilIcon";
 
 const t$1 = a$n.forwardRef((o, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...o, weights: e$p }));
 t$1.displayName = "PaletteIcon";
 const n$5 = t$1;
 
-const o$6 = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: e$o }));
-o$6.displayName = "PaperclipIcon";
-const m$7 = o$6;
+const o$7 = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: e$o }));
+o$7.displayName = "PaperclipIcon";
+const m$7 = o$7;
 
 const e$4 = a$n.forwardRef((r, s) => /* @__PURE__ */ a$n.createElement(p$2, { ref: s, ...r, weights: a$c }));
 e$4.displayName = "PlusIcon";
@@ -2021,24 +2048,24 @@ const e$3 = a$n.forwardRef((t, r) => /* @__PURE__ */ a$n.createElement(p$2, { re
 e$3.displayName = "QuestionIcon";
 const m$6 = e$3;
 
-const o$5 = a$n.forwardRef((c, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...c, weights: e$n }));
-o$5.displayName = "ShieldCheckIcon";
-const h = o$5;
+const o$6 = a$n.forwardRef((c, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...c, weights: e$n }));
+o$6.displayName = "ShieldCheckIcon";
+const h = o$6;
 
 const p = a$n.forwardRef((e, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...e, weights: e$m }));
 p.displayName = "ShoppingCartSimpleIcon";
 const n$3 = p;
 
-const o$4 = a$n.forwardRef((r, s) => /* @__PURE__ */ a$n.createElement(p$2, { ref: s, ...r, weights: e$l }));
-o$4.displayName = "SlidersIcon";
-const c$3 = o$4;
+const o$5 = a$n.forwardRef((r, s) => /* @__PURE__ */ a$n.createElement(p$2, { ref: s, ...r, weights: e$l }));
+o$5.displayName = "SlidersIcon";
+const c$3 = o$5;
 
-const o$3 = a$n.forwardRef((r, n) => /* @__PURE__ */ a$n.createElement(p$2, { ref: n, ...r, weights: e$k }));
-o$3.displayName = "SpinnerGapIcon";
-const m$5 = o$3;
+const o$4 = a$n.forwardRef((r, n) => /* @__PURE__ */ a$n.createElement(p$2, { ref: n, ...r, weights: e$k }));
+o$4.displayName = "SpinnerGapIcon";
+const m$5 = o$4;
 
-const o$2 = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: a$a }));
-o$2.displayName = "SquareIcon";
+const o$3 = a$n.forwardRef((r, a) => /* @__PURE__ */ a$n.createElement(p$2, { ref: a, ...r, weights: a$a }));
+o$3.displayName = "SquareIcon";
 
 const t = a$n.forwardRef((a, c) => /* @__PURE__ */ a$n.createElement(p$2, { ref: c, ...a, weights: a$9 }));
 t.displayName = "StackIcon";
@@ -2052,6 +2079,9 @@ const e$2 = a$n.forwardRef((o, r) => /* @__PURE__ */ a$n.createElement(p$2, { re
 e$2.displayName = "StudentIcon";
 const s = e$2;
 
+const o$2 = a$n.forwardRef((a, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...a, weights: H }));
+o$2.displayName = "TableIcon";
+
 const m$4 = a$n.forwardRef((e, r) => /* @__PURE__ */ a$n.createElement(p$2, { ref: r, ...e, weights: e$i }));
 m$4.displayName = "ThumbsDownIcon";
 const c$2 = m$4;
@@ -2195,7 +2225,7 @@ const selectIcon = (iconName) => {
         case "sync":
             return { icon: r$6, color: Styles.color.blue.primary };
         case "check-square":
-            return { icon: o$i, color: Styles.color.blue.primary };
+            return { icon: o$j, color: Styles.color.blue.primary };
         case "empty":
             return { icon: t$2, color: Styles.color.states.error };
         case "money":
@@ -2214,9 +2244,11 @@ const selectIcon = (iconName) => {
         case "truck":
             return { icon: r$2, color: Styles.color.grey.shadow };
         case "list-checks":
-            return { icon: o$b, color: Styles.color.blue.primary };
+            return { icon: o$c, color: Styles.color.blue.primary };
         case "note-pencil":
-            return { icon: o$7, color: Styles.color.grey.charcoal };
+            return { icon: o$8, color: Styles.color.grey.charcoal };
+        case "table":
+            return { icon: o$2, color: Styles.color.grey.charcoal };
         default:
             return {
                 icon: ({ size, color, id, className, dataTestId }) => (a__default.createElement(StellaIcon$1, { size: size, color: color, id: id, className: className, "data-testid": dataTestId })),
@@ -2261,6 +2293,7 @@ const getFill = (iconName) => {
         "list-checks",
         "broadcast",
         "eye",
+        "table",
     ];
     if (boldIcons.includes(iconName)) {
         return "bold";
@@ -21768,6 +21801,54 @@ function useReactTable(options) {
   return tableRef.current;
 }
 
+const TABLE_STORAGE_PREFIX = "ds-table-state";
+function loadTableState(tableId) {
+    try {
+        const raw = localStorage.getItem(`${TABLE_STORAGE_PREFIX}:${tableId}`);
+        return raw ? JSON.parse(raw) : {};
+    }
+    catch {
+        return {};
+    }
+}
+function saveTableState(tableId, state) {
+    try {
+        localStorage.setItem(`${TABLE_STORAGE_PREFIX}:${tableId}`, JSON.stringify(state));
+    }
+    catch { }
+}
+function usePersistTableState(tableId, state, sizingDebounceMs = 300) {
+    const debounceTimer = useRef(null);
+    const latestSizing = useRef(state.columnSizing);
+    useEffect(() => {
+        latestSizing.current = state.columnSizing;
+    }, [state.columnSizing]);
+    // Persist visibility and sorting immediately
+    useEffect(() => {
+        saveTableState(tableId, {
+            columnVisibility: state.columnVisibility,
+            columnSizing: latestSizing.current,
+            sorting: state.sorting,
+        });
+    }, [tableId, state.columnVisibility, state.sorting]);
+    // Persist sizing debounced
+    useEffect(() => {
+        if (debounceTimer.current)
+            clearTimeout(debounceTimer.current);
+        debounceTimer.current = setTimeout(() => {
+            saveTableState(tableId, {
+                columnVisibility: state.columnVisibility,
+                columnSizing: latestSizing.current,
+                sorting: state.sorting,
+            });
+        }, sizingDebounceMs);
+        return () => {
+            if (debounceTimer.current)
+                clearTimeout(debounceTimer.current);
+        };
+    }, [tableId, state.columnSizing]);
+}
+
 const getSelectWidth = (digits) => {
     if (digits >= 10 && digits <= 99)
         return "36px";
@@ -22277,6 +22358,49 @@ const ClearFilterButtonRow = styled.div `
   align-items: "center";
   text-align: "center";
 `;
+const ExpandedContentRow = styled.tr `
+  background-color: ${Styles.color.grey.pale};
+`;
+const ExpandedContentCell = styled.td `
+  padding: 12px 16px;
+  border-bottom: 1px solid ${Styles.color.grey.light};
+  background-color: ${Styles.color.grey.pale};
+`;
+const ExpandChevronButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition:
+    transform 0.2s ease,
+    background-color 0.15s ease;
+
+  & > svg {
+    transition: transform 0.2s ease;
+    transform: ${({ $expanded }) => $expanded ? "rotate(90deg)" : "rotate(0deg)"};
+    fill: ${Styles.color.grey.charcoal};
+  }
+
+  &:hover {
+    background-color: ${Styles.color.grey.light};
+  }
+`;
+const ActionBar = styled.div `
+  display: flex;
+  justify-content: space-between;
+  height: fit-content;
+  width: 100%;
+`;
+const GlobalActionWrapper = styled.div `
+  display: flex;
+  gap: 10px;
+  width: fit-content;
+  padding-bottom: 5px;
+`;
 
 const IndeterminateCheckbox = ({ isIndeterminate, isChecked, onChange, }) => {
     const ref = useRef(null);
@@ -22319,6 +22443,40 @@ function useDebounceCallback(callback, delay) {
     return [debounced, { flush, cancel }];
 }
 
+const CheckboxDropdownMenu = ({ options, selected, mode = "multiSelect", coords, menuRef, onApply, onClear, showSelectAll = true, showClear = false, searchInputId = "search", searchInputLabel = "Search", onSearch, onSearchBlur, serverSide = false, }) => {
+    const [tempSelected, setTempSelected] = useState(selected);
+    const toggleItem = (key) => {
+        setTempSelected((prev) => prev.includes(key) ? prev.filter((i) => i !== key) : [...prev, key]);
+    };
+    const toggleAll = () => {
+        setTempSelected((prev) => prev.length === options.length ? [] : options.map((o) => o.key));
+    };
+    const showApplyButton = mode === "multiSelect" || (mode === "search" && serverSide);
+    return createPortal(a__default.createElement(FilterMenu, { style: { top: coords.top, left: coords.left, position: "absolute" }, ref: menuRef },
+        a__default.createElement(MenuItemGroup, null,
+            mode === "search" && (a__default.createElement("div", { style: { padding: "4px 10px" } },
+                a__default.createElement(TextInput, { id: searchInputId, label: searchInputLabel, placeholder: "Search", hideLabel: true, onChange: (value) => {
+                        setTempSelected(value === "" ? [] : [value]);
+                        if (!serverSide)
+                            onSearch?.(value);
+                    }, onBlur: () => !serverSide && onSearchBlur?.(), endIcon: "search", value: tempSelected?.[0] }))),
+            mode === "multiSelect" && showSelectAll && (a__default.createElement(MenuItem, { key: "select-all" },
+                a__default.createElement(Checkbox, { id: "all-checkbox", name: "all-checkbox", checked: options.every((opt) => tempSelected.includes(opt.key)), onChange: toggleAll }),
+                a__default.createElement(FilterBoxLabel, { htmlFor: "all-checkbox" }, "Select All"))),
+            mode !== "search" &&
+                options.map(({ key, value }, index) => {
+                    if (mode === "singleSelect") {
+                        return (a__default.createElement(MenuItemOption, { key: `${key}-${index}`, id: `${key}-button`, onClick: () => onApply([key]), "$applied": selected.includes(key) }, value));
+                    }
+                    return (a__default.createElement(MenuItem, { key: key },
+                        a__default.createElement(Checkbox, { id: `${key}-checkbox`, name: `${key}-checkbox`, checked: tempSelected.includes(key), onChange: () => toggleItem(key) }),
+                        a__default.createElement(FilterLabelTransparent, null, value),
+                        a__default.createElement(FilterBoxLabel, { htmlFor: `${key}-checkbox` }, value)));
+                })),
+        showApplyButton && (a__default.createElement(MenuButton, { onClick: () => onApply(tempSelected) }, "Apply Selection")),
+        showClear && a__default.createElement(MenuButton, { onClick: onClear }, "Clear Filter")), document.body);
+};
+
 const normalizeOptions = (raw) => {
     return raw
         .map((item) => {
@@ -22335,27 +22493,29 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
     const column = header.column;
     const columnDef = column.columnDef;
     const meta = columnDef.meta;
-    // Filter dropdown logic
     const menuRef = useRef(null);
     const buttonRef = useRef(null);
     const [showFilter, setShowFilter] = useState(false);
     const [coords, setCoords] = useState({ top: 0, left: 0 });
-    const [tempFilters, setTempFilters] = useState([]);
-    const [currentAppliedFilters, setCurrentAppliedFilters] = useState([]);
     const [filterOptions, setFilterOptions] = useState([]);
-    const displayOptions = serverSide
-        ? filterOptions
-        : normalizeOptions(Array.from(header.column.getFacetedUniqueValues().keys()));
     const [textAlign, setTextAlign] = useState("left");
     const [handleSave, { flush }] = useDebounceCallback((value) => {
-        column?.setFilterValue([value]);
-        if (value === "")
-            column?.setFilterValue([]);
+        column?.setFilterValue(value === "" ? [] : [value]);
         onFilterApply?.();
     }, 300);
+    const displayOptions = serverSide
+        ? filterOptions
+        : normalizeOptions(Array.from(header.column.getFacetedUniqueValues().keys()));
     useEffect(() => {
         setFilterOptions(normalizeOptions(meta?.filterOptions || []));
     }, [meta]);
+    useEffect(() => {
+        setTextAlign(meta?.headerAlign || (meta?.dataType === "number" ? "right" : "left"));
+    }, [meta]);
+    useEffect(() => {
+        if (meta?.pin)
+            column.pin(meta.pin);
+    }, []);
     const toggleMenu = (e) => {
         e.stopPropagation();
         if (buttonRef.current) {
@@ -22365,11 +22525,13 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                 left: rect.right + window.scrollX - 25,
             });
         }
-        showFilterMenu(!showFilter);
+        const next = !showFilter;
+        onFilterMenuInteraction?.(column.id, next);
+        setShowFilter(next);
     };
-    const showFilterMenu = (active) => {
-        onFilterMenuInteraction?.(column.id, active);
-        setShowFilter(active);
+    const closeMenu = () => {
+        onFilterMenuInteraction?.(column.id, false);
+        setShowFilter(false);
     };
     // Close on outside click
     useEffect(() => {
@@ -22377,28 +22539,14 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
             return;
         const handleClickOutside = (e) => {
             const target = e.target;
-            const insideButton = !!buttonRef.current?.contains(target);
-            const insideMenu = !!menuRef.current?.contains(target);
-            if (!insideButton && !insideMenu) {
-                setTempFilters(filters?.[header.id] || currentAppliedFilters);
-                showFilterMenu(false);
+            if (!buttonRef.current?.contains(target) && !menuRef.current?.contains(target)) {
+                closeMenu();
             }
         };
         document.addEventListener("click", handleClickOutside, true);
         return () => document.removeEventListener("click", handleClickOutside, true);
     }, [showFilter]);
-    useEffect(() => {
-        setTextAlign(meta?.headerAlign || (meta?.dataType === "number" ? "right" : "left"));
-    }, [meta]);
-    useEffect(() => {
-        const currentFilters = filters?.[header.id];
-        setTempFilters(currentFilters ? currentFilters : []);
-    }, [filters]);
-    useEffect(() => {
-        if (meta?.pin) {
-            column.pin(meta?.pin);
-        }
-    }, []);
+    const appliedFilters = filters?.[header.id] ?? [];
     return (a__default.createElement(HeaderCell, { "$isPinnedLeft": column.getIsPinned() === "left", "$isPinnedRight": column.getIsPinned() === "right", "$columnInfo": column, "$filterMenuOpen": showFilter, style: {
             textAlign: meta?.headerAlign || (meta?.dataType === "number" ? "right" : "left"),
             width: header.getSize(),
@@ -22409,82 +22557,19 @@ const TableHeaderCell = ({ header, serverSide, filters, sorting, scrollPosition,
                     ? "none"
                     : undefined,
         } },
-        a__default.createElement(HeaderCellPosition, { style: {
-                justifyContent: textAlign === "left" ? "start" : "end",
-            } },
+        a__default.createElement(HeaderCellPosition, { style: { justifyContent: textAlign === "left" ? "start" : "end" } },
             textAlign === "left" && (a__default.createElement("span", { style: { fontWeight: 600 } }, flexRender(columnDef.header, header.getContext()))),
-            header.column.getCanFilter() && (a__default.createElement("div", { style: {
-                    display: "flex",
-                    alignItems: "center",
-                    position: "relative",
-                } },
-                a__default.createElement(CustomIconButton$1, { className: "icon", iconName: "filter", ariaLabel: "Filter Button", variant: "tertiary", "$active": filters[header.id]?.length > 0 || showFilter, onClick: (e) => toggleMenu(e), ref: buttonRef }),
-                showFilter &&
-                    createPortal(a__default.createElement(FilterMenu, { style: {
-                            top: coords.top,
-                            left: coords.left,
-                            position: "absolute",
-                        }, ref: menuRef },
-                        a__default.createElement(MenuItemGroup, null,
-                            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) => {
-                                        value === ""
-                                            ? setTempFilters([])
-                                            : setTempFilters([value]);
-                                        !serverSide && handleSave(value);
-                                    }, onBlur: () => !serverSide && flush(), endIcon: "search", value: tempFilters?.[0] }))),
-                            (meta?.filterMode === "multiSelect" ||
-                                !meta?.filterMode) && (a__default.createElement(MenuItem, { key: "select-all" },
-                                a__default.createElement(Checkbox, { id: "all-checkbox", name: "all-checkbox", checked: displayOptions?.every((opt) => tempFilters?.includes(opt.key)), onChange: () => {
-                                        setTempFilters((prev) => {
-                                            if (prev?.length === displayOptions?.length) {
-                                                return [];
-                                            }
-                                            else {
-                                                return displayOptions.map((opt) => opt.key);
-                                            }
-                                        });
-                                    } }),
-                                a__default.createElement(FilterBoxLabel, { htmlFor: "all-checkbox" }, "Select All"))),
-                            displayOptions?.map(({ key, value }, index) => {
-                                if (meta?.filterMode === "singleSelect") {
-                                    return (a__default.createElement(MenuItemOption, { key: `${key}-${index}`, id: `${key}-button`, onClick: () => {
-                                            setCurrentAppliedFilters([key]);
-                                            column?.setFilterValue([key]);
-                                            showFilterMenu(false);
-                                            onFilterApply?.();
-                                        }, "$applied": tempFilters?.includes(key) }, value));
-                                }
-                                if (meta?.filterMode === "multiSelect" ||
-                                    !meta?.filterMode) {
-                                    return (a__default.createElement(MenuItem, { key: key },
-                                        a__default.createElement(Checkbox, { id: `${key}-checkbox`, name: `${key}-checkbox`, checked: tempFilters?.includes(key), onChange: () => {
-                                                setTempFilters((prev) => {
-                                                    if (prev?.includes(key))
-                                                        return prev.filter((i) => i !== key);
-                                                    else
-                                                        return [...prev, key];
-                                                });
-                                            } }),
-                                        a__default.createElement(FilterLabelTransparent, null, value),
-                                        a__default.createElement(FilterBoxLabel, { htmlFor: `${key}-checkbox` }, value)));
-                                }
-                            })),
-                        (meta?.filterMode === "multiSelect" ||
-                            (meta?.filterMode === "search" && serverSide) ||
-                            !meta?.filterMode) && (a__default.createElement(MenuButton, { key: "apply", onClick: () => {
-                                setCurrentAppliedFilters(tempFilters);
-                                column?.setFilterValue(tempFilters?.length > 0 ? tempFilters : []);
-                                showFilterMenu(false);
-                                onFilterApply?.();
-                            } }, "Apply Selection")),
-                        filters?.[header.id]?.length > 0 && (a__default.createElement(MenuButton, { key: "clear", onClick: () => {
-                                column?.setFilterValue([]);
-                                showFilterMenu(false);
-                                setTempFilters([]);
-                                setCurrentAppliedFilters([]);
-                                onFilterApply?.();
-                            } }, "Clear Filter"))), document.body))),
+            header.column.getCanFilter() && (a__default.createElement("div", { style: { display: "flex", alignItems: "center", position: "relative" } },
+                a__default.createElement(CustomIconButton$1, { className: "icon", iconName: "filter", ariaLabel: "Filter Button", variant: "tertiary", "$active": appliedFilters.length > 0 || showFilter, onClick: (e) => toggleMenu(e), ref: buttonRef }),
+                showFilter && (a__default.createElement(CheckboxDropdownMenu, { options: displayOptions, selected: appliedFilters, mode: meta?.filterMode ?? "multiSelect", coords: coords, menuRef: menuRef, showSelectAll: meta?.filterMode !== "singleSelect", showClear: appliedFilters.length > 0, onApply: (selected) => {
+                        column?.setFilterValue(selected.length > 0 ? selected : []);
+                        closeMenu();
+                        onFilterApply?.();
+                    }, onClear: () => {
+                        column?.setFilterValue([]);
+                        closeMenu();
+                        onFilterApply?.();
+                    }, serverSide: serverSide, onSearch: handleSave, onSearchBlur: flush, searchInputId: `${String(columnDef.header)}-search`, searchInputLabel: `${String(columnDef.header)} search` })))),
             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) })),
             textAlign === "right" && (a__default.createElement("span", { style: { fontWeight: 600 } }, flexRender(columnDef.header, header.getContext()))))));
 };
@@ -22544,7 +22629,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, defaultFilters, staticFilters, }) {
+}, selectionMenuItems, dataAuto, dataTestId, id, className, htmlProps, resetTrigger, emptyTableState, defaultFilters, staticFilters, enableShowHide, globalActions, showExpandedRowToggle = false, renderExpandedRow, }) {
     const [rowSelection, setRowSelection] = useState({});
     const [selectedRows] = useState({});
     const [pageIndex, setPageIndex] = useState(paginationDetails?.startingPage);
@@ -22555,9 +22640,20 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     const [localData, setLocalData] = useState(data);
     const [localColumns, setLocalColumns] = useState(columns);
     const [totalData, setTotalData] = useState(paginationDetails?.totalRows);
-    const [sorting, setSorting] = useState([]);
+    const [sorting, setSorting] = useState(() => loadTableState(id).sorting ?? []);
     const [filters, setFilters] = useState({});
     const [rowState, setRowState] = useState({});
+    const [columnVisibility, setColumnVisibility] = useState(() => {
+        const persisted = loadTableState(id);
+        if (persisted.columnVisibility)
+            return persisted.columnVisibility;
+        return Object.fromEntries(columns
+            .filter((col) => col.meta?.defaultHidden)
+            .map((col) => [
+            "accessorKey" in col ? col.accessorKey : col.id,
+            false,
+        ]));
+    });
     const [columnFilters, setColumnFilters] = useState(() => {
         const base = defaultFilters ?? [];
         if (!staticFilters?.length)
@@ -22580,12 +22676,27 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     });
     const [columnPinning, setColumnPinning] = useState({ left: ["select"], right: ["options"] });
     const scrollRef = useRef(null);
+    const visibilityButtonRef = useRef(null);
+    const visibilityMenuRef = useRef(null);
+    const [showVisibilityMenu, setShowVisibilityMenu] = useState(false);
+    const [visibilityMenuCoords, setVisibilityMenuCoords] = useState({
+        top: 0,
+        left: 0,
+    });
     const [scrollState, setScrollState] = useState({
         atLeft: true,
         atRight: false,
     });
     const [rowStatusesState, setRowStatusesState] = useState(rowStatuses || {});
     const [filterMenuOpen, setFilterMenuOpen] = useState({});
+    const [expandedRows, setExpandedRows] = useState(new Set());
+    const toggleRowExpanded = (rowId) => {
+        setExpandedRows((prev) => {
+            const next = new Set(prev);
+            next.has(rowId) ? next.delete(rowId) : next.add(rowId);
+            return next;
+        });
+    };
     useEffect(() => {
         setRowStatusesState(rowStatuses || {});
     }, [rowStatuses]);
@@ -22600,6 +22711,19 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         if (paginationDetails && paginationDetails.startingPage !== pageIndex)
             setPageIndex(paginationDetails?.startingPage);
     }, [paginationDetails, data, columns]);
+    useEffect(() => {
+        if (!showVisibilityMenu)
+            return;
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (!visibilityButtonRef.current?.contains(target) &&
+                !visibilityMenuRef.current?.contains(target)) {
+                setShowVisibilityMenu(false);
+            }
+        };
+        document.addEventListener("click", handleClickOutside, true);
+        return () => document.removeEventListener("click", handleClickOutside, true);
+    }, [showVisibilityMenu]);
     useLayoutEffect$1(() => {
         const el = scrollRef.current;
         if (!el)
@@ -22646,6 +22770,18 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
     };
     const enhancedColumns = useMemo$1(() => {
         const cols = [];
+        if (showExpandedRowToggle) {
+            cols.push({
+                id: "expand",
+                header: "",
+                cell: ({ row }) => !!renderExpandedRow?.(row) ? (a__default.createElement(ExpandChevronButton, { "$expanded": expandedRows.has(row.id), onClick: (e) => {
+                        e.stopPropagation();
+                        toggleRowExpanded(row.id);
+                    }, "aria-label": expandedRows.has(row.id) ? "Collapse row" : "Expand row" },
+                    a__default.createElement(StellaIcon, { iconName: "chevron-right", size: 14 }))) : (a__default.createElement(a__default.Fragment, null)),
+                size: 36,
+            });
+        }
         if (showSelection) {
             cols.push({
                 id: "select",
@@ -22677,11 +22813,13 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         onRowSelect,
         showSelection,
         showRowOptions,
+        expandedRows,
     ]);
     const table = useReactTable({
         data: localData,
         columns: enhancedColumns,
         state: {
+            columnVisibility,
             pagination,
             sorting,
             columnFilters,
@@ -22697,6 +22835,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         enableRowSelection: showSelection,
         rowCount: serverSide ? paginationDetails?.totalRows : undefined,
         enableColumnPinning: true,
+        onColumnVisibilityChange: setColumnVisibility,
         getCoreRowModel: getCoreRowModel(),
         getFacetedRowModel: !serverSide ? getFacetedRowModel() : undefined,
         getFacetedUniqueValues: !serverSide ? getFacetedUniqueValues() : undefined,
@@ -22750,6 +22889,7 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
             },
         },
     });
+    usePersistTableState(id, { columnVisibility, sorting });
     useEffect(() => {
         if (onRowSelect) {
             const selectedData = table
@@ -22777,95 +22917,145 @@ function Table({ columns, data, isLoading, serverSide = false, onPageChange, onS
         });
         table.toggleAllRowsSelected(false);
     };
-    return (a__default.createElement(TableWrapper, { className: className, id: id, "data-testid": dataTestId, "data-auto": dataAuto },
-        a__default.createElement(TableWrapperScroll, { "$stopScroll": Object.values(filterMenuOpen).some((value) => value), ref: scrollRef }, isLoading ? (a__default.createElement("div", null,
-            a__default.createElement("div", { style: {
-                    width: "100%",
-                    maxWidth: "100%",
-                    height: "100%",
-                    marginBottom: "4px",
-                    backgroundColor: "#f9f9f9",
-                    display: "flex",
-                    flexDirection: "column",
-                    overflow: "hidden",
-                    boxSizing: "border-box",
-                } }, Array.from({
-                length: pagination?.pageSize,
-            }).map((_, index) => (a__default.createElement("div", { style: {
-                    position: "relative",
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: "90px",
-                    padding: "10px 25px",
-                    backgroundColor: index === 0 ? "#ededed" : "transparent",
-                    borderBottom: "1px solid #e0e0e0",
-                    alignItems: "center",
-                    height: "50px",
-                    minHeight: "50px",
-                }, key: index + "loading-row" }, Array.from({
-                length: 10,
-            }).map((_, i) => (a__default.createElement(LoadingShimmer, { key: `${i}-loading`, "$width": "110px", "$height": "25px" }))))))))) : (a__default.createElement(StyledTable, { id: `${id}-table`, ...htmlProps },
-            a__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a__default.createElement(HeaderRow, { key: headerGroup.id }, headerGroup.headers.map((header, i) => {
-                return (a__default.createElement(TableHeaderCell, { key: header.id, serverSide: serverSide, header: header, filters: filters, sorting: sorting, scrollPosition: scrollState, onFilterMenuInteraction: (id, active) => {
-                        setFilterMenuOpen((prev) => ({
-                            ...prev,
-                            [id]: active,
-                        }));
-                    }, onFilterApply: () => {
-                        setPageIndex(1);
-                        setPagination((prev) => ({
-                            ...prev,
-                            pageIndex: 0,
-                        }));
-                    } }));
-            }))))),
-            a__default.createElement("tbody", null,
-                table.getRowModel().rows.length === 0 && (a__default.createElement(EmptyTableState, { header: emptyTableState?.header || "No data available.", subHeader: emptyTableState?.subHeader, showClearFilterButton: emptyTableState?.showClearFilterButton, onClearFilters: resetTable, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
-                table.getRowModel().rows.map((row) => (a__default.createElement(CellRow, { key: row.id, onClick: () => onRowClick?.(row.original), "$isClickable": !!onRowClick }, row.getVisibleCells().map((cell) => {
-                    const value = flexRender(cell.column.columnDef.cell, {
-                        ...cell.getContext(),
-                        localValue: rowState[row.id]?.[cell.column.id],
-                        onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
-                    });
-                    const meta = cell.column.columnDef.meta;
-                    return (a__default.createElement(BodyCell, { key: cell.id, style: {
-                            width: cell.column.getSize(),
-                            textAlign: meta?.cellAlign ||
-                                (typeof cell.getValue() === "number" ||
-                                    meta?.dataType === "number"
-                                    ? "right"
-                                    : "left"),
-                            boxShadow: scrollState.atLeft &&
-                                cell.column.getIsPinned() === "left"
-                                ? "none"
-                                : scrollState.atRight &&
-                                    cell.column.getIsPinned() === "right"
-                                    ? "none"
-                                    : undefined,
-                            backgroundColor: table
-                                .getSelectedRowModel()
-                                .rows.find((r) => r.id === row.id)
-                                ? "#EBF0FA"
-                                : rowStatusesState?.[row.id] === "action-pending"
-                                    ? "#FFFDEB"
-                                    : rowStatusesState?.[row.id] === "completed"
-                                        ? "#F5F5F5"
-                                        : "",
-                        }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": serverSide
-                            ? row.index === table.getRowModel().rows.length - 1
-                            : row.index -
-                                pagination.pageSize * pagination.pageIndex ===
-                                table.getRowModel().rows.length - 1 }, value));
-                })))))))),
-        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) => ({
-                    ...prev,
-                    pageIndex: page - 1,
-                }));
-                onPageChange?.(page, pageSize);
-            }, resetTrigger: resetTrigger }))));
+    return (a__default.createElement(a__default.Fragment, null,
+        !isLoading && (a__default.createElement(ActionBar, null,
+            a__default.createElement(GlobalActionWrapper, null, globalActions?.(table)),
+            a__default.createElement(GlobalActionWrapper, null, enableShowHide && (a__default.createElement(a__default.Fragment, null,
+                a__default.createElement(IconButton, { ref: visibilityButtonRef, ariaLabel: "Column show hide button", variant: "tertiary", iconName: "table", onClick: () => {
+                        const rect = visibilityButtonRef.current?.getBoundingClientRect();
+                        if (rect) {
+                            setVisibilityMenuCoords({
+                                top: rect.bottom + window.scrollY + 4,
+                                left: rect.right + window.scrollX - 140,
+                            });
+                        }
+                        setShowVisibilityMenu((prev) => !prev);
+                    } }),
+                showVisibilityMenu && (a__default.createElement(CheckboxDropdownMenu, { options: table
+                        .getAllLeafColumns()
+                        .filter((col) => col.id !== "select" && col.id !== "options")
+                        .map((col) => ({
+                        key: col.id,
+                        value: typeof col.columnDef.header === "string"
+                            ? col.columnDef.header
+                            : col.id,
+                    })), selected: table
+                        .getAllLeafColumns()
+                        .filter((col) => col.getIsVisible())
+                        .map((col) => col.id), mode: "multiSelect", coords: visibilityMenuCoords, menuRef: visibilityMenuRef, showSelectAll: true, showClear: false, onApply: (selected) => {
+                        const next = {};
+                        table
+                            .getAllLeafColumns()
+                            .filter((col) => col.id !== "select" && col.id !== "options")
+                            .forEach((col) => {
+                            next[col.id] = selected.includes(col.id);
+                        });
+                        setColumnVisibility(next);
+                        setShowVisibilityMenu(false);
+                    }, onClear: () => { } }))))))),
+        a__default.createElement(TableWrapper, { className: className, id: id, "data-testid": dataTestId, "data-auto": dataAuto },
+            a__default.createElement(TableWrapperScroll, { "$stopScroll": Object.values(filterMenuOpen).some((value) => value), ref: scrollRef }, isLoading ? (a__default.createElement("div", null,
+                a__default.createElement("div", { style: {
+                        width: "100%",
+                        maxWidth: "100%",
+                        height: "100%",
+                        marginBottom: "4px",
+                        backgroundColor: "#f9f9f9",
+                        display: "flex",
+                        flexDirection: "column",
+                        overflow: "hidden",
+                        boxSizing: "border-box",
+                    } }, Array.from({
+                    length: pagination?.pageSize,
+                }).map((_, index) => (a__default.createElement("div", { style: {
+                        position: "relative",
+                        display: "flex",
+                        flexDirection: "row",
+                        gap: "90px",
+                        padding: "10px 25px",
+                        backgroundColor: index === 0 ? "#ededed" : "transparent",
+                        borderBottom: "1px solid #e0e0e0",
+                        alignItems: "center",
+                        height: "50px",
+                        minHeight: "50px",
+                    }, key: index + "loading-row" }, Array.from({
+                    length: 10,
+                }).map((_, i) => (a__default.createElement(LoadingShimmer, { key: `${i}-loading`, "$width": "110px", "$height": "25px" }))))))))) : (a__default.createElement(StyledTable, { id: `${id}-table`, ...htmlProps },
+                a__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (a__default.createElement(HeaderRow, { key: headerGroup.id }, headerGroup.headers.map((header, i) => {
+                    return (a__default.createElement(TableHeaderCell, { key: header.id, serverSide: serverSide, header: header, filters: filters, sorting: sorting, scrollPosition: scrollState, onFilterMenuInteraction: (id, active) => {
+                            setFilterMenuOpen((prev) => ({
+                                ...prev,
+                                [id]: active,
+                            }));
+                        }, onFilterApply: () => {
+                            setPageIndex(1);
+                            setPagination((prev) => ({
+                                ...prev,
+                                pageIndex: 0,
+                            }));
+                        } }));
+                }))))),
+                a__default.createElement("tbody", null,
+                    table.getRowModel().rows.length === 0 && (a__default.createElement(EmptyTableState, { header: emptyTableState?.header || "No data available.", subHeader: emptyTableState?.subHeader, showClearFilterButton: emptyTableState?.showClearFilterButton, onClearFilters: resetTable, colSpan: table.getVisibleLeafColumns().length, size: "large" })),
+                    table.getRowModel().rows.map((row) => (a__default.createElement(a__default.Fragment, { key: row.id },
+                        a__default.createElement(CellRow, { onClick: () => {
+                                if (!showExpandedRowToggle &&
+                                    !!renderExpandedRow?.(row))
+                                    toggleRowExpanded(row.id);
+                                onRowClick?.(row.original);
+                            }, "$isClickable": !!onRowClick }, row.getVisibleCells().map((cell) => {
+                            const value = flexRender(cell.column.columnDef.cell, {
+                                ...cell.getContext(),
+                                localValue: rowState[row.id]?.[cell.column.id],
+                                onLocalChange: (val) => handleInputChange(row.id, cell.column.id, val),
+                            });
+                            const meta = cell.column.columnDef
+                                .meta;
+                            return (a__default.createElement(BodyCell, { key: cell.id, style: {
+                                    width: cell.column.getSize(),
+                                    textAlign: meta?.cellAlign ||
+                                        (typeof cell.getValue() === "number" ||
+                                            meta?.dataType === "number"
+                                            ? "right"
+                                            : "left"),
+                                    boxShadow: scrollState.atLeft &&
+                                        cell.column.getIsPinned() === "left"
+                                        ? "none"
+                                        : scrollState.atRight &&
+                                            cell.column.getIsPinned() === "right"
+                                            ? "none"
+                                            : undefined,
+                                    backgroundColor: table
+                                        .getSelectedRowModel()
+                                        .rows.find((r) => r.id === row.id)
+                                        ? "#EBF0FA"
+                                        : rowStatusesState?.[row.id] ===
+                                            "action-pending"
+                                            ? "#FFFDEB"
+                                            : rowStatusesState?.[row.id] === "completed"
+                                                ? "#F5F5F5"
+                                                : "",
+                                }, "$isPinnedLeft": cell.column.getIsPinned() === "left", "$isPinnedRight": cell.column.getIsPinned() === "right", "$columnInfo": cell.column, "$isLastRow": serverSide
+                                    ? row.index ===
+                                        table.getRowModel().rows.length - 1
+                                    : row.index -
+                                        pagination.pageSize *
+                                            pagination.pageIndex ===
+                                        table.getRowModel().rows.length - 1 }, value));
+                        })),
+                        expandedRows.has(row.id) &&
+                            renderExpandedRow &&
+                            !!renderExpandedRow(row) && (a__default.createElement(ExpandedContentRow, null,
+                            a__default.createElement(ExpandedContentCell, { colSpan: table.getVisibleLeafColumns().length }, renderExpandedRow(row))))))))))),
+            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) => ({
+                        ...prev,
+                        pageIndex: page - 1,
+                    }));
+                    onPageChange?.(page, pageSize);
+                }, resetTrigger: resetTrigger })))));
 }
 
 const SyncContainer = styled.div `
@@ -22946,7 +23136,7 @@ const HeaderText = styled.span `
   color: #4d4d4d;
   text-align: right;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -22955,7 +23145,7 @@ const SubHeaderText = styled.span `
   color: #9f9f9f;
   text-align: right;
   font-family: Inter;
-  font-size: 12px;
+  font-size: 11px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -23415,10 +23605,10 @@ const CheckBox = ({ id, className, label, checked, indeterminate = false, disabl
             ? Styles.color.grey.medium
             : Styles.color.core.primary;
         if (isIndeterminate)
-            return (a__default.createElement(o$8, { "data-testid": "indeterminate-icon", className: "checkbox-icon", size: 18, weight: "fill", color: color }));
+            return (a__default.createElement(o$9, { "data-testid": "indeterminate-icon", className: "checkbox-icon", size: 18, weight: "fill", color: color }));
         if (isChecked)
-            return (a__default.createElement(o$i, { "data-testid": "check-icon", className: "checkbox-icon", size: 18, weight: "fill", color: color }));
-        return (a__default.createElement(o$2, { "data-testid": "square-icon", className: "checkbox-icon", size: 18, weight: "regular", color: color }));
+            return (a__default.createElement(o$j, { "data-testid": "check-icon", className: "checkbox-icon", size: 18, weight: "fill", color: color }));
+        return (a__default.createElement(o$3, { "data-testid": "square-icon", className: "checkbox-icon", size: 18, weight: "regular", color: color }));
     };
     return (a__default.createElement(CheckBoxWrapper, { id: `${id}-label`, className: className, "$disabled": disabled, "$align": align, "$fontSize": fontSize },
         a__default.createElement(HiddenInput, { id: id, ref: inputRef, checked: isChecked, disabled: disabled, onChange: handleChange, ...htmlProps }),