@rebasepro/ui 0.0.1-canary.892f711 → 0.0.1-canary.a6becfb

package/dist/components/FilterChip.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+export interface FilterChipProps {
+    /**
+     * The text label displayed on the chip.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the chip is currently in an active/selected state.
+     */
+    active?: boolean;
+    /**
+     * Callback when the chip is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Optional icon rendered before the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Size variant.
+     * @default "medium"
+     */
+    size?: "small" | "medium";
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Whether the chip is disabled.
+     */
+    disabled?: boolean;
+}
+/**
+ * A toggle chip used for filter presets and similar multi-select controls.
+ *
+ * Uses an inset box-shadow for the active ring instead of `border` so the
+ * chip size stays stable across states and the ring cannot be clipped by
+ * parent `overflow-hidden` containers.
+ *
+ * @group Interactive components
+ */
+export declare function FilterChip({ children, active, onClick, icon, size, className, disabled }: FilterChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchBar.d.ts

@@ -17,6 +17,10 @@ interface SearchBarProps {
     disabled?: boolean;
     loading?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Optional initial value for the search input, e.g. from URL params.
+     */
+    initialValue?: string;
 }
-export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, innerClassName, className, autoFocus, disabled, loading, inputRef }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, innerClassName, className, autoFocus, disabled, loading, inputRef, initialValue }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/index.d.ts

@@ -22,6 +22,7 @@ export * from "./DialogContent";
 export * from "./DialogTitle";
 export * from "./ExpandablePanel";
 export * from "./FileUpload";
+export * from "./FilterChip";
 export * from "./IconButton";
 export * from "./InputLabel";
 export * from "./InfoLabel";

package/dist/index.css

@@ -50,8 +50,8 @@
     --color-surface-accent-600: #475569;
     --color-surface-accent-700: #334155;
     --color-surface-accent-800: #1e293b;
-    --color-surface-accent-900: #0f172a;
-    --color-surface-accent-950: #020617;
+    --color-surface-accent-900: #172033;
+    --color-surface-accent-950: #0f172a;
 }
 
 /* Chrome, Safari and Opera */

package/dist/index.es.js

@@ -964,18 +964,18 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
         "border border-primary bg-primary focus:ring-primary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": t8,
         "border border-secondary bg-secondary focus:ring-secondary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": t9,
         "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 shadow-sm hover:shadow-md text-white hover:text-white": t10,
-        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow-sm hover:shadow-md text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t11,
-        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t12,
+        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow-sm hover:shadow-md text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": t11,
+        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t12,
         "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t13,
         "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t14,
         "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10 hover:bg-red-500/10": t15,
-        "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": t16,
-        "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-700": t17,
+        "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t16,
+        "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-800": t17,
         "border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": t18,
         "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": t19,
         "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": t20,
-        "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": t21,
-        "border border-surface-300 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": t22,
+        "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:border-surface-accent-600 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t21,
+        "border border-surface-300 text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-800": t22,
         "text-text-disabled dark:text-text-disabled-dark": disabled,
         "border border-transparent opacity-50": t23,
         "border border-surface-500 opacity-50": t24,
@@ -1573,7 +1573,7 @@ class ErrorBoundary extends React__default.Component {
     return this.props.children;
   }
 }
-const sizeClasses$1 = {
+const sizeClasses$2 = {
   large: "w-6 h-6 rounded flex items-center justify-center",
   medium: "w-5 h-5 rounded flex items-center justify-center",
   small: "w-4 h-4 rounded flex items-center justify-center",
@@ -1632,7 +1632,7 @@ const Checkbox = React__default.memo((t0) => {
   } else {
     t12 = $[4];
   }
-  const t13 = sizeClasses$1[size];
+  const t13 = sizeClasses$2[size];
   const t14 = disabled ? indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-white dark:bg-surface-900";
   const t15 = indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "";
   const t16 = disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500";
@@ -1776,7 +1776,7 @@ function Chip(t0) {
   return t11;
 }
 const Tooltip = (t0) => {
-  const $ = c(28);
+  const $ = c(30);
   const {
     open,
     defaultOpen,
@@ -1824,61 +1824,72 @@ const Tooltip = (t0) => {
   }
   const trigger = t4;
   let t5;
-  if ($[7] !== tooltipClassName) {
-    t5 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
-    $[7] = tooltipClassName;
-    $[8] = t5;
+  if ($[7] !== onOpenChange || $[8] !== open) {
+    t5 = open !== void 0 ? {
+      open,
+      onOpenChange
+    } : {};
+    $[7] = onOpenChange;
+    $[8] = open;
+    $[9] = t5;
   } else {
-    t5 = $[8];
+    t5 = $[9];
   }
-  const t6 = sideOffset === void 0 ? 4 : sideOffset;
-  let t7;
-  if ($[9] !== align || $[10] !== side || $[11] !== t5 || $[12] !== t6 || $[13] !== title || $[14] !== tooltipStyle) {
-    t7 = /* @__PURE__ */ jsx(TooltipPrimitive.Content, { className: t5, style: tooltipStyle, sideOffset: t6, align, side, children: title });
-    $[9] = align;
-    $[10] = side;
-    $[11] = t5;
-    $[12] = t6;
-    $[13] = title;
-    $[14] = tooltipStyle;
-    $[15] = t7;
+  let t6;
+  if ($[10] !== tooltipClassName) {
+    t6 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
+    $[10] = tooltipClassName;
+    $[11] = t6;
   } else {
-    t7 = $[15];
+    t6 = $[11];
   }
+  const t7 = sideOffset === void 0 ? 4 : sideOffset;
   let t8;
-  if ($[16] !== finalContainer || $[17] !== t7) {
-    t8 = /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: finalContainer, children: t7 });
-    $[16] = finalContainer;
-    $[17] = t7;
+  if ($[12] !== align || $[13] !== side || $[14] !== t6 || $[15] !== t7 || $[16] !== title || $[17] !== tooltipStyle) {
+    t8 = /* @__PURE__ */ jsx(TooltipPrimitive.Content, { className: t6, style: tooltipStyle, sideOffset: t7, align, side, children: title });
+    $[12] = align;
+    $[13] = side;
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = title;
+    $[17] = tooltipStyle;
     $[18] = t8;
   } else {
     t8 = $[18];
   }
   let t9;
-  if ($[19] !== defaultOpen || $[20] !== onOpenChange || $[21] !== open || $[22] !== t8 || $[23] !== trigger) {
-    t9 = /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, onOpenChange, defaultOpen, children: [
+  if ($[19] !== finalContainer || $[20] !== t8) {
+    t9 = /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: finalContainer, children: t8 });
+    $[19] = finalContainer;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== defaultOpen || $[23] !== t5 || $[24] !== t9 || $[25] !== trigger) {
+    t10 = /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { ...t5, defaultOpen, children: [
       trigger,
-      t8
+      t9
     ] });
-    $[19] = defaultOpen;
-    $[20] = onOpenChange;
-    $[21] = open;
-    $[22] = t8;
-    $[23] = trigger;
+    $[22] = defaultOpen;
+    $[23] = t5;
     $[24] = t9;
+    $[25] = trigger;
+    $[26] = t10;
   } else {
-    t9 = $[24];
+    t10 = $[26];
   }
-  let t10;
-  if ($[25] !== delayDuration || $[26] !== t9) {
-    t10 = /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: t9 });
-    $[25] = delayDuration;
-    $[26] = t9;
-    $[27] = t10;
+  let t11;
+  if ($[27] !== delayDuration || $[28] !== t10) {
+    t11 = /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: t10 });
+    $[27] = delayDuration;
+    $[28] = t10;
+    $[29] = t11;
   } else {
-    t10 = $[27];
+    t11 = $[29];
   }
-  return t10;
+  return t11;
 };
 const styles$2 = `
 
@@ -2026,7 +2037,7 @@ function ColorPicker(t0) {
 const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 transition-transform";
 const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
 const colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
-const sizeClasses = {
+const sizeClasses$1 = {
   medium: "w-10 !h-10 min-w-10 min-h-10",
   small: "w-8 !h-8 min-w-8 min-h-8",
   smallest: "w-6 !h-6 min-w-6 min-h-6",
@@ -2093,7 +2104,7 @@ const IconButtonInner = (t0, ref) => {
   const t8 = disabled ? "opacity-50 pointer-events-none" : "cursor-pointer";
   const t9 = toggled ? "outline outline-2 outline-primary" : "";
   const t10 = shapeClasses[shape];
-  const t11 = sizeClasses[size];
+  const t11 = sizeClasses$1[size];
   let t12;
   if ($[10] !== bgClasses || $[11] !== className || $[12] !== t10 || $[13] !== t11 || $[14] !== t8 || $[15] !== t9) {
     t12 = cls(t8, t9, "text-inherit dark:text-inherit", colorClasses$1, bgClasses, baseClasses, buttonClasses, t10, t11, className);
@@ -2334,7 +2345,7 @@ const DateTimeField = ({
       /* @__PURE__ */ jsx(IconButton, { onClick: (e_2) => {
         e_2.stopPropagation();
         inputRef.current?.showPicker();
-      }, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-surface-accent-500!", children: /* @__PURE__ */ jsx(CalendarIcon, { color: "disabled" }) }),
+      }, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-surface-accent-500!", children: /* @__PURE__ */ jsx(CalendarIcon, {}) }),
       clearable && value && /* @__PURE__ */ jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsx(XIcon, {}) })
     ] }),
     invalidValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center m-2", children: [
@@ -3054,6 +3065,53 @@ function FileUpload(t0) {
   }
   return t16;
 }
+const sizeClasses = {
+  small: "px-2 py-0.5 text-xs",
+  medium: "px-2.5 py-1 text-xs"
+};
+function FilterChip(t0) {
+  const $ = c(11);
+  const {
+    children,
+    active: t1,
+    onClick,
+    icon,
+    size: t2,
+    className,
+    disabled: t3
+  } = t0;
+  const active = t1 === void 0 ? false : t1;
+  const size = t2 === void 0 ? "medium" : t2;
+  const disabled = t3 === void 0 ? false : t3;
+  const t4 = sizeClasses[size];
+  let t5;
+  if ($[0] !== active || $[1] !== className || $[2] !== disabled || $[3] !== t4) {
+    t5 = cls("inline-flex items-center gap-1 rounded-full", "font-medium whitespace-nowrap select-none shrink-0", "transition-all duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", t4, active ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]" : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "cursor-pointer hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"), disabled && "opacity-50 cursor-not-allowed", className);
+    $[0] = active;
+    $[1] = className;
+    $[2] = disabled;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] !== children || $[6] !== disabled || $[7] !== icon || $[8] !== onClick || $[9] !== t5) {
+    t6 = /* @__PURE__ */ jsxs("button", { type: "button", onClick, disabled, className: t5, children: [
+      icon,
+      children
+    ] });
+    $[5] = children;
+    $[6] = disabled;
+    $[7] = icon;
+    $[8] = onClick;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  return t6;
+}
 const colorClasses = {
   info: "bg-sky-200 dark:bg-teal-900",
   warn: "bg-orange-200 dark:bg-yellow-950"
@@ -5046,12 +5104,13 @@ function SearchBar(t0) {
     autoFocus,
     disabled,
     loading,
-    inputRef
+    inputRef,
+    initialValue
   } = t0;
   const placeholder = t1 === void 0 ? "Search" : t1;
   const expandable = t2 === void 0 ? false : t2;
   const size = t3 === void 0 ? "medium" : t3;
-  const [searchText, setSearchText] = useState("");
+  const [searchText, setSearchText] = useState(initialValue ?? "");
   const [active, setActive] = useState(false);
   const deferredValues = useDebounceValue(searchText, 200);
   let t4;
@@ -7405,7 +7464,7 @@ const VirtualTableHeader = React__default.memo(function VirtualTableHeader2(t0)
   const thisColumnIsResizing = isResizingIndex === columnIndex;
   const anotherColumnIsResizing = isResizingIndex !== columnIndex && isResizingIndex > 0;
   const hovered = !anotherColumnIsResizing && (onHover || thisColumnIsResizing);
-  const t3 = isDragging ? "bg-primary-bg dark:bg-primary-bg-dark" : "bg-surface-50 dark:bg-surface-800";
+  const t3 = isDragging ? "bg-primary-bg dark:bg-primary-bg-dark" : "bg-surface-50 dark:bg-surface-900";
   const t4 = !isDragging && "hover:bg-surface-100 dark:hover:bg-surface-900 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-900/50";
   const t5 = column.frozen ? "sticky left-0 z-10" : "relative z-0";
   const t6 = isDraggable && "cursor-grab";
@@ -7496,7 +7555,7 @@ const VirtualTableHeader = React__default.memo(function VirtualTableHeader2(t0)
   }
   let t18;
   if ($[28] !== column.key || $[29] !== column.sortable || $[30] !== hovered || $[31] !== onColumnSort || $[32] !== onHover || $[33] !== openFilter || $[34] !== sort) {
-    t18 = column.sortable && (sort || hovered || openFilter) && /* @__PURE__ */ jsx(Badge, { color: "secondary", invisible: !sort, children: /* @__PURE__ */ jsxs(IconButton, { size: "small", className: onHover || openFilter ? "bg-white dark:bg-surface-800" : void 0, onClick: () => {
+    t18 = column.sortable && (sort || hovered || openFilter) && /* @__PURE__ */ jsx(Badge, { color: "secondary", invisible: !sort, children: /* @__PURE__ */ jsxs(IconButton, { size: "small", className: onHover || openFilter ? "bg-white dark:bg-surface-900" : void 0, onClick: () => {
       onColumnSort(column.key);
     }, children: [
       !sort && /* @__PURE__ */ jsx(ArrowUpIcon, {}),
@@ -7528,7 +7587,7 @@ const VirtualTableHeader = React__default.memo(function VirtualTableHeader2(t0)
   }
   let t20;
   if ($[39] !== column || $[40] !== createFilterField || $[41] !== filter || $[42] !== hidden || $[43] !== onHover || $[44] !== openFilter || $[45] !== update) {
-    t20 = column.filter && createFilterField && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { color: "secondary", invisible: !filter, children: /* @__PURE__ */ jsx(Popover, { open: openFilter, onOpenChange: setOpenFilter, className: hidden ? "hidden" : void 0, modal: true, trigger: /* @__PURE__ */ jsx(IconButton, { className: onHover || openFilter ? "bg-white dark:bg-surface-800" : void 0, size: "small", onClick: handleSettingsClick, children: /* @__PURE__ */ jsx(FilterIcon, { size: iconSize.small }) }), children: /* @__PURE__ */ jsx(FilterForm, { column, filter, onHover, onFilterUpdate: update, createFilterField, hidden, setHidden }) }) }) });
+    t20 = column.filter && createFilterField && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { color: "secondary", invisible: !filter, children: /* @__PURE__ */ jsx(Popover, { open: openFilter, onOpenChange: setOpenFilter, className: hidden ? "hidden" : void 0, modal: true, trigger: /* @__PURE__ */ jsx(IconButton, { className: onHover || openFilter ? "bg-white dark:bg-surface-900" : void 0, size: "small", onClick: handleSettingsClick, children: /* @__PURE__ */ jsx(FilterIcon, { size: iconSize.small }) }), children: /* @__PURE__ */ jsx(FilterForm, { column, filter, onHover, onFilterUpdate: update, createFilterField, hidden, setHidden }) }) }) });
     $[39] = column;
     $[40] = createFilterField;
     $[41] = filter;
@@ -7957,7 +8016,7 @@ const VirtualTableHeaderRow = ({
     setIsResizing(index_0);
     setCursorDocument(true);
   }, [setCursorDocument]);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-50 dark:bg-surface-800"), style: {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-50 dark:bg-surface-900"), style: {
     height: headerHeight
   }, children: [
     columns.map((column_0, columnIndex) => {
@@ -8002,7 +8061,7 @@ const VirtualTableRow = React__default.memo(function VirtualTableRow2(t0) {
   const onClick = t1;
   let t2;
   if ($[4] !== hoverRow || $[5] !== onRowClick || $[6] !== rowClassName || $[7] !== rowData) {
-    t2 = cls("flex min-w-full text-sm border-b border-surface-200/60 dark:border-surface-700/60 dark:bg-surface-900", rowClassName ? rowClassName(rowData) : "", {
+    t2 = cls("flex min-w-full text-sm border-b border-surface-200/60 dark:border-surface-700/60 dark:bg-surface-800", rowClassName ? rowClassName(rowData) : "", {
       "hover:!bg-surface-50/75 dark:hover:!bg-surface-800/75": hoverRow,
       "cursor-pointer ": onRowClick
     });
@@ -8098,7 +8157,7 @@ const innerElementType = forwardRef((t0, ref) => {
           /* @__PURE__ */ jsx("div", { style: {
             position: "sticky",
             top: 0,
-            zIndex: 10
+            zIndex: 20
           }, children: /* @__PURE__ */ jsx(VirtualTableHeaderRow, { ...virtualTableProps }) }),
           !customView && children
         ] }) }),
@@ -8291,7 +8350,7 @@ const VirtualTable = React__default.memo(function VirtualTable2({
   const customView = error ? /* @__PURE__ */ jsxs(CenteredView, { maxWidth: "2xl", className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Error" }),
     error?.message && /* @__PURE__ */ jsx(SafeLinkRenderer, { text: error.message })
-  ] }) : empty ? loading ? /* @__PURE__ */ jsx(CircularProgressCenter, {}) : /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-auto items-center justify-center p-8 h-full", children: emptyComponent }) : void 0;
+  ] }) : empty ? loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12 px-8", children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-auto items-center justify-center py-12 px-8", children: emptyComponent }) : void 0;
   const virtualListController = useMemo(() => ({
     data,
     rowHeight,
@@ -8386,7 +8445,7 @@ const SortableCellWrapper = (t0) => {
     t5 = $[8];
   }
   const style = t5;
-  const t6 = frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800";
+  const t6 = frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900";
   let t7;
   if ($[9] !== t6) {
     t7 = cls("flex-shrink-0", t6);
@@ -8467,7 +8526,7 @@ function MemoizedList({
               columnIndex,
               extraData
             }
-          ) }, `cell_wrapper_${column.key}`) : /* @__PURE__ */ jsx("div", { className: cls("flex-shrink-0 relative", column.frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800"), style: {
+          ) }, `cell_wrapper_${column.key}`) : /* @__PURE__ */ jsx("div", { className: cls("flex-shrink-0 relative", column.frozen && "sticky left-0 z-10 bg-white dark:bg-surface-900"), style: {
             minWidth: column.width,
             maxWidth: column.width,
             width: column.width
@@ -8608,6 +8667,7 @@ export {
   ErrorBoundary,
   ExpandablePanel,
   FileUpload,
+  FilterChip,
   GitHubIcon,
   HandleIcon,
   IconButton,