@l3mpire/ui 2.21.0 → 2.22.0

package/dist/index.js

@@ -850,7 +850,7 @@ var containerStyle = [
   "bg-dropdown-bg",
   "border border-dropdown-border",
   "rounded-md",
-  "p-base",
+  "p-xs",
   "shadow-lg"
 ];
 var DropdownMenu = React4.forwardRef(
@@ -4088,7 +4088,7 @@ var StatusCell = ({
   label,
   variant = "light",
   type = "primary",
-  size = "sm",
+  size = "md",
   className
 }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("flex items-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { variant, type, size, children: label }) });
 StatusCell.displayName = "StatusCell";
@@ -5103,6 +5103,7 @@ SidePanelContent.displayName = "SidePanelContent";
 
 // src/components/ui/filter/filter-chip-segment.tsx
 var React36 = __toESM(require("react"));
+var TooltipPrimitive3 = __toESM(require("@radix-ui/react-tooltip"));
 var import_class_variance_authority19 = require("class-variance-authority");
 var import_icons23 = require("@l3mpire/icons");
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -5128,6 +5129,43 @@ var filterChipSegmentVariants = (0, import_class_variance_authority19.cva)(
     }
   }
 );
+function TruncatedLabel({
+  label,
+  truncate,
+  className
+}) {
+  const textRef = React36.useRef(null);
+  const [isTruncated, setIsTruncated] = React36.useState(false);
+  React36.useEffect(() => {
+    const el = textRef.current;
+    if (el && truncate) {
+      setIsTruncated(el.scrollWidth > el.clientWidth);
+    }
+  }, [label, truncate]);
+  const span = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "span",
+    {
+      ref: textRef,
+      className: cn(className, truncate && "max-w-[160px] truncate"),
+      children: label
+    }
+  );
+  if (!isTruncated) return span;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive3.Provider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(TooltipPrimitive3.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive3.Trigger, { asChild: true, children: span }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      TooltipPrimitive3.Content,
+      {
+        sideOffset: 4,
+        className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
+        children: [
+          label,
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+        ]
+      }
+    ) })
+  ] }) });
+}
 var FilterChipSegment = React36.forwardRef(
   ({
     className,
@@ -5189,13 +5227,14 @@ var FilterChipSegment = React36.forwardRef(
             }
           ),
           label && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            "span",
+            TruncatedLabel,
             {
+              label,
+              truncate: segmentType === "value",
               className: cn(
                 "text-sm font-medium leading-sm whitespace-nowrap",
                 segmentType === "placeholder" ? "text-filter-chip-segment-placeholder" : "text-filter-chip-segment-text"
-              ),
-              children: label
+              )
             }
           ),
           badgeCount != null && badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
@@ -5583,10 +5622,10 @@ var SortButton = ({
         className: cn(
           "flex items-center gap-xs",
           "min-h-[32px] max-h-[32px]",
-          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+          "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
+          "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
           "cursor-pointer transition-colors",
-          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
+          "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
           iconOnly ? "size-8 justify-center p-0" : "px-md py-sm min-w-[80px]",
           className
         ),
@@ -5596,15 +5635,15 @@ var SortButton = ({
             {
               icon: direction === "asc" ? import_icons25.faArrowUpSmallBigOutline : import_icons25.faArrowDownBigSmallOutline,
               size: "sm",
-              className: "shrink-0 text-[var(--color-foreground)]"
+              className: "shrink-0 text-foreground"
             }
           ),
           !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "text-[var(--color-muted-foreground)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "text-muted-foreground", children: [
               "Sort by",
               " "
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-[var(--color-foreground)]", children: activeLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-foreground", children: activeLabel })
           ] })
         ]
       }
@@ -5616,7 +5655,7 @@ var SortButton = ({
         align: "start",
         className: cn(
           "z-50 flex flex-col gap-xs overflow-clip p-xs",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
@@ -5633,8 +5672,8 @@ var SortButton = ({
               },
               className: cn(
                 "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors",
-                "hover:bg-[var(--color-dropdown-item-hover)]",
-                field.id === activeField ? "bg-[var(--color-dropdown-item-hover)]" : ""
+                "hover:bg-dropdown-item-hover",
+                field.id === activeField ? "bg-dropdown-item-hover" : ""
               ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -5644,7 +5683,7 @@ var SortButton = ({
                     size: "sm",
                     className: cn(
                       "shrink-0",
-                      field.id === activeField ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                      field.id === activeField ? "text-foreground" : "text-dropdown-item-icon"
                     )
                   }
                 ),
@@ -5653,7 +5692,7 @@ var SortButton = ({
                   {
                     className: cn(
                       "flex-1 text-sm font-regular leading-sm text-left truncate",
-                      field.id === activeField ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                      field.id === activeField ? "text-foreground" : "text-dropdown-item-icon"
                     ),
                     children: field.label
                   }
@@ -5662,7 +5701,7 @@ var SortButton = ({
             },
             field.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-px bg-[var(--color-border)]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-px bg-border" }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col", children: [
             /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
               "button",
@@ -5674,8 +5713,8 @@ var SortButton = ({
                 },
                 className: cn(
                   "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors",
-                  "hover:bg-[var(--color-dropdown-item-hover)]",
-                  direction === "asc" ? "bg-[var(--color-dropdown-item-hover)]" : ""
+                  "hover:bg-dropdown-item-hover",
+                  direction === "asc" ? "bg-dropdown-item-hover" : ""
                 ),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -5685,7 +5724,7 @@ var SortButton = ({
                       size: "sm",
                       className: cn(
                         "shrink-0",
-                        direction === "asc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                        direction === "asc" ? "text-foreground" : "text-dropdown-item-icon"
                       )
                     }
                   ),
@@ -5694,7 +5733,7 @@ var SortButton = ({
                     {
                       className: cn(
                         "flex-1 text-sm font-regular leading-sm text-left",
-                        direction === "asc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                        direction === "asc" ? "text-foreground" : "text-dropdown-item-icon"
                       ),
                       children: "Ascending"
                     }
@@ -5712,8 +5751,8 @@ var SortButton = ({
                 },
                 className: cn(
                   "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors",
-                  "hover:bg-[var(--color-dropdown-item-hover)]",
-                  direction === "desc" ? "bg-[var(--color-dropdown-item-hover)]" : ""
+                  "hover:bg-dropdown-item-hover",
+                  direction === "desc" ? "bg-dropdown-item-hover" : ""
                 ),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -5723,7 +5762,7 @@ var SortButton = ({
                       size: "sm",
                       className: cn(
                         "shrink-0",
-                        direction === "desc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                        direction === "desc" ? "text-foreground" : "text-dropdown-item-icon"
                       )
                     }
                   ),
@@ -5732,7 +5771,7 @@ var SortButton = ({
                     {
                       className: cn(
                         "flex-1 text-sm font-regular leading-sm text-left",
-                        direction === "desc" ? "text-[var(--color-foreground)]" : "text-[var(--color-dropdown-item-icon)]"
+                        direction === "desc" ? "text-foreground" : "text-dropdown-item-icon"
                       ),
                       children: "Descending"
                     }
@@ -5760,10 +5799,10 @@ var FilterBarButton = React40.forwardRef(({ className, count, iconOnly = false,
     className: cn(
       "shrink-0 flex items-center gap-sm overflow-hidden",
       "min-h-[32px] max-h-[32px]",
-      "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-      "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+      "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
+      "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
       "cursor-pointer transition-colors",
-      "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
+      "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
       iconOnly ? count ? "px-sm justify-center" : "size-8 justify-center p-0" : "px-base py-sm min-w-[80px]",
       className
     ),
@@ -5774,10 +5813,10 @@ var FilterBarButton = React40.forwardRef(({ className, count, iconOnly = false,
         {
           icon: import_icons26.faFilterOutline,
           size: "sm",
-          className: "shrink-0 text-[var(--color-foreground)]"
+          className: "shrink-0 text-foreground"
         }
       ),
-      !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
+      !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: children ?? "Filters" }),
       count != null && count > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
     ]
   }
@@ -5793,10 +5832,10 @@ var SaveViewButton = React41.forwardRef(
     const sharedStyle = [
       "relative flex items-center justify-center",
       "min-h-[32px] max-h-[32px]",
-      "bg-gradient-to-t from-[var(--color-btn-solid-brand-bg-default)] from-[10%] to-[var(--color-btn-solid-brand-bg-gradient-to-default)]",
-      "border border-[var(--color-btn-solid-brand-border-default)]",
+      "bg-gradient-to-t from-btn-solid-brand-bg-default from-[10%] to-btn-solid-brand-bg-gradient-to-default",
+      "border border-btn-solid-brand-border-default",
       "shadow-sm cursor-pointer transition-colors",
-      "hover:from-[var(--color-btn-solid-brand-bg-hover)] hover:to-[var(--color-btn-solid-brand-bg-gradient-to-hover)]"
+      "hover:from-btn-solid-brand-bg-hover hover:to-btn-solid-brand-bg-gradient-to-hover"
     ];
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
@@ -5816,8 +5855,8 @@ var SaveViewButton = React41.forwardRef(
                 "rounded-l-md -mr-px"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-btn-solid-brand-text-default)]", children: label }),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "absolute inset-0 rounded-l-[11px] border border-[var(--color-btn-solid-brand-inner-border-default)] shadow-sm pointer-events-none" })
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-btn-solid-brand-text-default", children: label }),
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "absolute inset-0 rounded-l-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           ),
@@ -5837,10 +5876,10 @@ var SaveViewButton = React41.forwardRef(
                   {
                     icon: import_icons27.faChevronDownOutline,
                     size: "sm",
-                    className: "text-[var(--color-btn-solid-brand-text-default)]"
+                    className: "text-btn-solid-brand-text-default"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "absolute inset-0 rounded-r-[11px] border border-[var(--color-btn-solid-brand-inner-border-default)] shadow-sm pointer-events-none" })
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "absolute inset-0 rounded-r-[11px] border border-btn-solid-brand-inner-border-default shadow-sm pointer-events-none" })
               ]
             }
           )
@@ -5872,7 +5911,7 @@ var OperatorSelector = ({
         align: "start",
         className: cn(
           "z-50 flex flex-col p-xs overflow-clip",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
@@ -5885,8 +5924,8 @@ var OperatorSelector = ({
             onClick: () => onSelect(op),
             className: cn(
               "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-              "hover:bg-[var(--color-dropdown-item-hover)]",
-              op === activeOperator && "bg-[var(--color-dropdown-item-hover)]"
+              "hover:bg-dropdown-item-hover",
+              op === activeOperator && "bg-dropdown-item-hover"
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
@@ -5894,12 +5933,12 @@ var OperatorSelector = ({
                 {
                   className: cn(
                     "text-sm font-regular leading-sm",
-                    op === activeOperator ? "text-[var(--color-foreground)] font-medium" : "text-[var(--color-dropdown-item-text)]"
+                    op === activeOperator ? "text-foreground font-medium" : "text-dropdown-item-text"
                   ),
                   children: op
                 }
               ),
-              isNoValueOperator(op) && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ml-auto text-xs text-[var(--color-muted-foreground)]", children: "instant" })
+              isNoValueOperator(op) && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ml-auto text-xs text-muted-foreground", children: "instant" })
             ]
           },
           op
@@ -5922,15 +5961,15 @@ var OperatorList = ({
       onClick: () => onSelect(op),
       className: cn(
         "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-        "hover:bg-[var(--color-dropdown-item-hover)]",
-        op === activeOperator && "bg-[var(--color-dropdown-item-hover)]"
+        "hover:bg-dropdown-item-hover",
+        op === activeOperator && "bg-dropdown-item-hover"
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "span",
         {
           className: cn(
             "text-sm font-regular leading-sm",
-            op === activeOperator ? "text-[var(--color-foreground)] font-medium" : "text-[var(--color-dropdown-item-text)]"
+            op === activeOperator ? "text-foreground font-medium" : "text-dropdown-item-text"
           ),
           children: op
         }
@@ -5943,17 +5982,16 @@ OperatorList.displayName = "OperatorList";
 
 // src/components/ui/filter/value-inputs/shared.ts
 var inputClasses = [
-  "w-full px-base py-sm rounded-base border border-[var(--color-input)]",
-  "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-  "placeholder:text-[var(--color-muted-foreground)]",
-  "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-0"
+  "w-full px-base py-sm rounded-base border border-input",
+  "bg-background text-sm font-regular leading-sm text-foreground",
+  "placeholder:text-muted-foreground",
+  "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0"
 ].join(" ");
 var halfInputClasses = [
-  "flex-1 px-base py-sm rounded-base border border-[var(--color-input)]",
-  "bg-[var(--color-background)] text-sm font-regular leading-sm text-[var(--color-foreground)]",
-  "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
+  "flex-1 px-base py-sm rounded-base border border-input",
+  "bg-background text-sm font-regular leading-sm text-foreground",
+  "focus:outline-none focus:ring-2 focus:ring-ring"
 ].join(" ");
-var applyBtnClasses = "self-end px-md py-sm text-sm font-medium leading-sm text-[var(--color-primary-foreground)] bg-[var(--color-primary)] rounded-base cursor-pointer hover:opacity-90 transition-opacity";
 
 // src/components/ui/filter/value-inputs/text-value-input.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
@@ -5966,7 +6004,7 @@ var TextValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "input",
       {
@@ -5979,7 +6017,7 @@ var TextValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 TextValueInput.displayName = "TextValueInput";
@@ -5995,7 +6033,7 @@ var NumberValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "input",
       {
@@ -6008,7 +6046,7 @@ var NumberValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 NumberValueInput.displayName = "NumberValueInput";
@@ -6019,7 +6057,7 @@ var NumberRangeValueInput = ({
   className
 }) => {
   const rangeVal = value ?? [0, 0];
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-base", children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "input",
@@ -6032,7 +6070,7 @@ var NumberRangeValueInput = ({
           className: halfInputClasses
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "and" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm text-muted-foreground", children: "and" }),
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "input",
         {
@@ -6044,7 +6082,7 @@ var NumberRangeValueInput = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 NumberRangeValueInput.displayName = "NumberRangeValueInput";
@@ -6600,7 +6638,7 @@ var DateCalendarValueInput = ({
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DatePickerCalendar, {}),
         isRange && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(DatePickerFooter, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", onClick: onSubmit, children: "Apply" })
         ] })
       ]
     }
@@ -6612,8 +6650,8 @@ var PresetTagsValueInput = ({
   onChange,
   onSubmit,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("flex flex-col gap-base p-base max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col gap-xs", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
+}) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("flex flex-col gap-base p-xs max-w-[280px]", className), children: RELATIVE_DATE_PRESETS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground uppercase px-xs", children: group.group }),
   /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "button",
     {
@@ -6624,7 +6662,7 @@ var PresetTagsValueInput = ({
       },
       className: cn(
         "px-base py-2xs rounded-base border cursor-pointer transition-colors text-sm font-regular leading-sm",
-        value === preset ? "border-[var(--color-ring)] bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "border-[var(--color-input)] bg-[var(--color-background)] text-[var(--color-foreground)] hover:bg-[var(--color-accent)]"
+        value === preset ? "border-ring bg-primary text-primary-foreground" : "border-input bg-background text-foreground hover:bg-accent"
       ),
       children: preset
     },
@@ -6647,8 +6685,8 @@ var DynamicOptionRow = ({
     onClick,
     className: cn(
       "flex items-start gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-      "hover:bg-[var(--color-dropdown-item-hover)]",
-      selected && "bg-[var(--color-dropdown-item-hover)]"
+      "hover:bg-dropdown-item-hover",
+      selected && "bg-dropdown-item-hover"
     ),
     children: [
       multi && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -6656,7 +6694,7 @@ var DynamicOptionRow = ({
         {
           className: cn(
             "mt-[2px] flex items-center justify-center size-4 rounded-xs border transition-colors shrink-0",
-            selected ? "bg-[var(--color-primary)] border-[var(--color-primary)]" : "border-[var(--color-input)] bg-[var(--color-background)]"
+            selected ? "bg-primary border-primary" : "border-input bg-background"
           ),
           children: selected && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "path",
@@ -6671,8 +6709,8 @@ var DynamicOptionRow = ({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "flex-1 flex flex-col gap-2xs min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] truncate", children: option.label }),
-        option.description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: option.description })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground truncate", children: option.label }),
+        option.description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: option.description })
       ] })
     ]
   }
@@ -6693,7 +6731,7 @@ var SingleSelectValueInput = ({
     "div",
     {
       className: cn(
-        "flex flex-col gap-xs p-base max-h-[280px] overflow-y-auto",
+        "flex flex-col gap-xs p-xs max-h-[280px] overflow-y-auto",
         className
       ),
       children: [
@@ -6714,10 +6752,10 @@ var SingleSelectValueInput = ({
             onClick: () => pick(opt),
             className: cn(
               "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-              "hover:bg-[var(--color-dropdown-item-hover)]",
-              value === opt && "bg-[var(--color-dropdown-item-hover)]"
+              "hover:bg-dropdown-item-hover",
+              value === opt && "bg-dropdown-item-hover"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground", children: opt })
           },
           opt
         ))
@@ -6739,7 +6777,7 @@ var MultiSelectValueInput = ({
     const next = selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v];
     onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("flex flex-col gap-xs p-xs", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col max-h-[240px] overflow-y-auto", children: [
       dynamicOptions?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         DynamicOptionRow,
@@ -6760,7 +6798,7 @@ var MultiSelectValueInput = ({
             onClick: () => toggle(opt),
             className: cn(
               "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-              "hover:bg-[var(--color-dropdown-item-hover)]"
+              "hover:bg-dropdown-item-hover"
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -6768,7 +6806,7 @@ var MultiSelectValueInput = ({
                 {
                   className: cn(
                     "flex items-center justify-center size-4 rounded-xs border transition-colors",
-                    isSelected ? "bg-[var(--color-primary)] border-[var(--color-primary)]" : "border-[var(--color-input)] bg-[var(--color-background)]"
+                    isSelected ? "bg-primary border-primary" : "border-input bg-background"
                   ),
                   children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     "path",
@@ -6782,14 +6820,14 @@ var MultiSelectValueInput = ({
                   ) })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground", children: opt })
             ]
           },
           opt
         );
       })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 MultiSelectValueInput.displayName = "MultiSelectValueInput";
@@ -6805,7 +6843,7 @@ var RelationValueInput = ({
   const handleKeyDown = (e) => {
     if (e.key === "Enter") onSubmit?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("flex flex-col gap-base p-xs", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "input",
       {
@@ -6818,7 +6856,7 @@ var RelationValueInput = ({
         className: inputClasses
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { appearance: "solid", intent: "brand", size: "sm", className: "self-end", onClick: onSubmit, children: "Apply" })
   ] });
 };
 RelationValueInput.displayName = "RelationValueInput";
@@ -6894,26 +6932,26 @@ var React44 = __toESM(require("react"));
 var PopoverPrimitive6 = __toESM(require("@radix-ui/react-popover"));
 var import_icons29 = require("@l3mpire/icons");
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "h-px bg-[var(--color-dropdown-border)] mx-xs" }),
+var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "shrink-0 flex flex-col", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "h-px bg-dropdown-border mx-xs" }),
   /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "button",
     {
       type: "button",
       onPointerDown: (e) => e.preventDefault(),
       onClick,
-      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           import_icons29.Icon,
           {
             icon: import_icons29.faFilterOutline,
             size: "sm",
-            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+            className: "shrink-0 text-dropdown-item-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: "Advanced filter" }),
-        count > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: "Advanced filter" }),
+        count > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: [
           count,
           " ",
           count === 1 ? "rule" : "rules"
@@ -6945,9 +6983,21 @@ var PropertySelector = ({
       setSearch("");
     }
   }, [open]);
+  const pinnedGroupIds = React44.useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const p of properties) {
+      if (p.groupPinned) set.add(p.group);
+    }
+    return set;
+  }, [properties]);
+  const pinnedProperties = React44.useMemo(
+    () => properties.filter((p) => pinnedGroupIds.has(p.group)),
+    [properties, pinnedGroupIds]
+  );
   const groups = React44.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const prop of properties) {
+      if (pinnedGroupIds.has(prop.group)) continue;
       const existing = map.get(prop.group);
       if (existing) {
         existing.count++;
@@ -6961,12 +7011,14 @@ var PropertySelector = ({
       }
     }
     return Array.from(map.values());
-  }, [properties]);
-  const globalSearchResults = React44.useMemo(() => {
-    if (!search || activeGroup) return [];
+  }, [properties, pinnedGroupIds]);
+  const filteredPinnedProperties = React44.useMemo(() => {
+    if (!search || activeGroup) return pinnedProperties;
     const lower = search.toLowerCase();
-    return properties.filter((p) => p.label.toLowerCase().includes(lower));
-  }, [properties, search, activeGroup]);
+    return pinnedProperties.filter(
+      (p) => p.label.toLowerCase().includes(lower)
+    );
+  }, [pinnedProperties, search, activeGroup]);
   const filteredGroups = React44.useMemo(() => {
     if (!search || activeGroup) return groups;
     const lower = search.toLowerCase();
@@ -6984,7 +7036,13 @@ var PropertySelector = ({
     return groupProps.filter((p) => p.label.toLowerCase().includes(lower));
   }, [properties, activeGroup, search]);
   const activeGroupInfo = groups.find((g) => g.group === activeGroup);
-  const showGlobalResults = search.length > 0 && !activeGroup && globalSearchResults.length > 0;
+  const nonPinnedSearchResults = React44.useMemo(() => {
+    if (!search || activeGroup) return [];
+    const lower = search.toLowerCase();
+    return properties.filter(
+      (p) => !pinnedGroupIds.has(p.group) && p.label.toLowerCase().includes(lower)
+    );
+  }, [properties, search, activeGroup, pinnedGroupIds]);
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PopoverPrimitive6.Root, { open, onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive6.Trigger, { asChild: true, children }),
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
@@ -6994,24 +7052,24 @@ var PropertySelector = ({
         align: "start",
         onCloseAutoFocus: (e) => e.preventDefault(),
         className: cn(
-          "z-50 flex flex-col gap-xs overflow-clip p-xs",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "z-50 flex flex-col gap-xs overflow-hidden p-xs",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
-          "min-w-[230px]"
+          "min-w-[230px] max-h-[360px]"
         ),
         children: [
           activeGroup === null ? (
-            /* ── Level 1: Search + Categories ───────────────────────── */
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+            /* ── Level 1: Search + (pinned props) + Categories ──────── */
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   import_icons29.Icon,
                   {
                     icon: import_icons29.faMagnifyingGlassOutline,
                     size: "sm",
-                    className: "shrink-0 text-[var(--color-muted-foreground)]"
+                    className: "shrink-0 text-muted-foreground"
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
@@ -7022,13 +7080,12 @@ var PropertySelector = ({
                     onChange: (e) => setSearch(e.target.value),
                     placeholder: "Search...",
                     autoFocus: true,
-                    className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
+                    className: "flex-1 text-sm font-regular leading-sm text-foreground bg-transparent outline-none placeholder:text-muted-foreground"
                   }
                 )
               ] }),
-              showGlobalResults ? (
-                /* ── Global search results (flat property list) ─────── */
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: globalSearchResults.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
+                filteredPinnedProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -7036,25 +7093,49 @@ var PropertySelector = ({
                       onSelect(prop);
                       onOpenChange?.(false);
                     },
-                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                         import_icons29.Icon,
                         {
                           icon: prop.icon,
                           size: "sm",
-                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                          className: "shrink-0 text-dropdown-item-icon"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: prop.groupLabel })
+                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label })
                     ]
                   },
                   prop.id
-                )) })
-              ) : (
-                /* ── Group list ─────────────────────────────────────── */
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col", children: [
+                )),
+                search ? (
+                  /* ── Flat matches across non-pinned groups ────────── */
+                  nonPinnedSearchResults.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        onSelect(prop);
+                        onOpenChange?.(false);
+                      },
+                      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                          import_icons29.Icon,
+                          {
+                            icon: prop.icon,
+                            size: "sm",
+                            className: "shrink-0 text-dropdown-item-icon"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label }),
+                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-xs font-regular leading-xs text-muted-foreground", children: prop.groupLabel })
+                      ]
+                    },
+                    prop.id
+                  ))
+                ) : (
+                  /* ── Category list ────────────────────────────────── */
                   filteredGroups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                     "button",
                     {
@@ -7063,37 +7144,37 @@ var PropertySelector = ({
                         setActiveGroup(g.group);
                         setSearch("");
                       },
-                      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                      className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                           import_icons29.Icon,
                           {
                             icon: g.groupIcon,
                             size: "sm",
-                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                            className: "shrink-0 text-dropdown-item-icon"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: g.groupLabel }),
-                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
+                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: g.groupLabel }),
+                        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: g.count }),
                         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                           import_icons29.Icon,
                           {
                             icon: import_icons29.faChevronRightOutline,
                             size: "xs",
-                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                            className: "shrink-0 text-dropdown-item-icon"
                           }
                         )
                       ]
                     },
                     g.group
-                  )),
-                  filteredGroups.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
-                ] })
-              )
+                  ))
+                ),
+                filteredPinnedProperties.length === 0 && (search ? nonPinnedSearchResults.length === 0 : filteredGroups.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
+              ] })
             ] })
           ) : (
             /* ── Level 2: Properties ─────────────────────────────────── */
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-xs flex-1 min-h-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                 "button",
                 {
@@ -7102,27 +7183,27 @@ var PropertySelector = ({
                     setActiveGroup(null);
                     setSearch("");
                   },
-                  className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                  className: "shrink-0 flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                       import_icons29.Icon,
                       {
                         icon: import_icons29.faChevronLeftOutline,
                         size: "sm",
-                        className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                        className: "shrink-0 text-dropdown-item-icon"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-[var(--color-muted-foreground)] text-left truncate", children: activeGroupInfo?.groupLabel })
+                    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-muted-foreground text-left truncate", children: activeGroupInfo?.groupLabel })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "shrink-0 flex items-center gap-base px-md py-base border border-input rounded-md", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   import_icons29.Icon,
                   {
                     icon: import_icons29.faMagnifyingGlassOutline,
                     size: "sm",
-                    className: "shrink-0 text-[var(--color-muted-foreground)]"
+                    className: "shrink-0 text-muted-foreground"
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
@@ -7133,11 +7214,11 @@ var PropertySelector = ({
                     onChange: (e) => setSearch(e.target.value),
                     placeholder: "Search...",
                     autoFocus: true,
-                    className: "flex-1 text-sm font-regular leading-sm text-[var(--color-foreground)] bg-transparent outline-none placeholder:text-[var(--color-muted-foreground)]"
+                    className: "flex-1 text-sm font-regular leading-sm text-foreground bg-transparent outline-none placeholder:text-muted-foreground"
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col flex-1 min-h-0 overflow-y-auto", children: [
                 filteredProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                   "button",
                   {
@@ -7146,22 +7227,22 @@ var PropertySelector = ({
                       onSelect(prop);
                       onOpenChange?.(false);
                     },
-                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+                    className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                         import_icons29.Icon,
                         {
                           icon: prop.icon,
                           size: "sm",
-                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                          className: "shrink-0 text-dropdown-item-icon"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label })
+                      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-dropdown-item-text text-left truncate", children: prop.label })
                     ]
                   },
                   prop.id
                 )),
-                filteredProperties.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+                filteredProperties.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "p-base text-sm text-muted-foreground", children: "No results" })
               ] })
             ] })
           ),
@@ -7199,7 +7280,7 @@ var KebabMenu = ({
       align: "end",
       className: cn(
         "z-50 flex flex-col p-xs overflow-clip",
-        "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+        "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:slide-in-from-top-2",
@@ -7214,21 +7295,21 @@ var KebabMenu = ({
               onConvertToAdvanced();
               onOpenChange?.(false);
             },
-            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 import_icons30.Icon,
                 {
                   icon: import_icons30.faArrowRightOutline,
                   size: "sm",
-                  className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                  className: "shrink-0 text-dropdown-item-icon"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: hasAdvancedFilters ? "Add to advanced filters" : "Convert to advanced" })
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text", children: hasAdvancedFilters ? "Add to advanced filters" : "Convert to advanced" })
             ]
           }
         ),
-        onConvertToAdvanced && onDelete && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
+        onConvertToAdvanced && onDelete && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "h-px mx-base my-xs bg-border" }),
         onDelete && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           "button",
           {
@@ -7237,17 +7318,17 @@ var KebabMenu = ({
               onDelete();
               onOpenChange?.(false);
             },
-            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
+            className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-dropdown-item-hover",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                 import_icons30.Icon,
                 {
                   icon: import_icons30.faTrashOutline,
                   size: "sm",
-                  className: "shrink-0 text-[var(--color-destructive)]"
+                  className: "shrink-0 text-destructive"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-regular leading-sm text-destructive", children: "Delete filter" })
             ]
           }
         )
@@ -7315,29 +7396,29 @@ var FilterEditor = ({
         align: "start",
         className: cn(
           "z-50 flex flex-col overflow-clip",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
           "min-w-[240px]"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-[var(--color-border)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-base px-base pt-base pb-xs border-b border-border", children: [
             /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               import_icons31.Icon,
               {
                 icon: propertyDef.icon,
                 size: "sm",
-                className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                className: "shrink-0 text-dropdown-item-icon"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-sm font-medium leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-sm font-medium leading-sm text-foreground", children: propertyDef.label }),
             localOperator && view === "value" && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
               "button",
               {
                 type: "button",
                 onClick: () => setView("operator"),
-                className: "ml-auto text-xs font-regular text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] cursor-pointer transition-colors",
+                className: "ml-auto text-xs font-regular text-muted-foreground hover:text-foreground cursor-pointer transition-colors",
                 children: [
                   localOperator,
                   " \u25BE"
@@ -7391,7 +7472,7 @@ var SegmentPopover = ({
       align,
       className: cn(
         "z-50 flex flex-col overflow-clip",
-        "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+        "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:slide-in-from-top-2"
@@ -7598,10 +7679,10 @@ var import_jsx_runtime54 = require("react/jsx-runtime");
 var btnBase = [
   "flex items-center justify-center",
   "min-h-[32px] max-h-[32px]",
-  "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-  "border border-[var(--color-btn-outlined-neutral-border-default)] shadow-sm",
+  "bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default",
+  "border border-btn-outlined-neutral-border-default shadow-sm",
   "cursor-pointer transition-colors",
-  "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+  "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
 ];
 var AdvancedChip = React47.forwardRef(
   ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("inline-flex items-center", className), children: [
@@ -7623,10 +7704,10 @@ var AdvancedChip = React47.forwardRef(
             {
               icon: import_icons32.faFilterOutline,
               size: "sm",
-              className: "shrink-0 text-[var(--color-foreground)]"
+              className: "shrink-0 text-foreground"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Advanced filters" }),
           count > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
@@ -7645,7 +7726,7 @@ var AdvancedChip = React47.forwardRef(
           "rounded-r-md -ml-px"
         ),
         "aria-label": "Clear all advanced filters",
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons32.Icon, { icon: import_icons32.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons32.Icon, { icon: import_icons32.faXmarkOutline, size: "sm", className: "text-foreground" })
       }
     )
   ] })
@@ -7660,7 +7741,7 @@ var import_icons36 = require("@l3mpire/icons");
 // src/components/ui/filter/advanced-row.tsx
 var React49 = __toESM(require("react"));
 var PopoverPrimitive11 = __toESM(require("@radix-ui/react-popover"));
-var TooltipPrimitive3 = __toESM(require("@radix-ui/react-tooltip"));
+var TooltipPrimitive4 = __toESM(require("@radix-ui/react-tooltip"));
 var import_icons34 = require("@l3mpire/icons");
 
 // src/components/ui/filter/filter-node-actions.tsx
@@ -7698,14 +7779,14 @@ var FilterNodeActions = ({
       "button",
       {
         type: "button",
-        className: "shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
+        className: "shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-accent",
         "aria-label": "More actions",
         children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           import_icons33.Icon,
           {
             icon: import_icons33.faEllipsisOutline,
             size: "sm",
-            className: "text-[var(--color-foreground)]"
+            className: "text-foreground"
           }
         )
       }
@@ -7717,7 +7798,7 @@ var FilterNodeActions = ({
         align: "end",
         className: cn(
           "z-50 flex flex-col p-xs overflow-clip",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "min-w-[180px]"
@@ -7732,8 +7813,8 @@ var FilterNodeActions = ({
             },
             className: cn(
               "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-              "hover:bg-[var(--color-dropdown-item-hover)]",
-              item.destructive && "text-[var(--color-destructive,#ef4444)]"
+              "hover:bg-dropdown-item-hover",
+              item.destructive && "text-destructive"
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -7743,7 +7824,7 @@ var FilterNodeActions = ({
                   size: "sm",
                   className: cn(
                     "shrink-0",
-                    item.destructive ? "text-[var(--color-destructive,#ef4444)]" : "text-[var(--color-dropdown-item-icon)]"
+                    item.destructive ? "text-destructive" : "text-dropdown-item-icon"
                   )
                 }
               ),
@@ -7752,7 +7833,7 @@ var FilterNodeActions = ({
                 {
                   className: cn(
                     "text-sm font-regular leading-sm",
-                    item.destructive ? "text-[var(--color-destructive,#ef4444)]" : "text-[var(--color-dropdown-item-text)]"
+                    item.destructive ? "text-destructive" : "text-dropdown-item-text"
                   ),
                   children: item.label
                 }
@@ -7772,10 +7853,10 @@ var import_jsx_runtime56 = require("react/jsx-runtime");
 var selectBtnStyle = [
   "flex items-center gap-base",
   "px-base py-sm",
-  "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-  "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+  "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
+  "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
   "cursor-pointer transition-colors",
-  "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+  "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
 ];
 var AdvancedRow = ({
   connector,
@@ -7792,6 +7873,19 @@ var AdvancedRow = ({
   const [operatorOpen, setOperatorOpen] = React49.useState(false);
   const [propertyOpen, setPropertyOpen] = React49.useState(false);
   const [valueOpen, setValueOpen] = React49.useState(false);
+  const { pinnedProperties, unpinnedProperties } = React49.useMemo(() => {
+    const pinnedGroups = /* @__PURE__ */ new Set();
+    for (const p of properties) {
+      if (p.groupPinned) pinnedGroups.add(p.group);
+    }
+    const pinned = [];
+    const unpinned = [];
+    for (const p of properties) {
+      if (pinnedGroups.has(p.group)) pinned.push(p);
+      else unpinned.push(p);
+    }
+    return { pinnedProperties: pinned, unpinnedProperties: unpinned };
+  }, [properties]);
   const handleOperatorSelect = (op) => {
     if (isNoValueOperator(op)) {
       onUpdate({ ...condition, operator: op, value: null });
@@ -7808,65 +7902,88 @@ var AdvancedRow = ({
   const badgeCount = getBadgeCount(condition.value);
   const hasValue = displayValue != null;
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(TooltipPrimitive3.Root, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)] cursor-default", children: connector }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-        TooltipPrimitive3.Content,
+    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(TooltipPrimitive4.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+        TooltipPrimitive4.Content,
         {
           sideOffset: 4,
           className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
           children: [
             '"Or" operator coming soon',
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
           ]
         }
       ) })
     ] }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(PopoverPrimitive11.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: propertyDef.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: import_icons34.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate", children: propertyDef.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: import_icons34.faChevronDownOutline, size: "xs", className: "shrink-0 text-foreground" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         PopoverPrimitive11.Content,
         {
           sideOffset: 4,
           align: "start",
           className: cn(
             "z-50 flex flex-col p-xs overflow-clip max-h-[300px] overflow-y-auto",
-            "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+            "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[200px]"
           ),
-          children: properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                onPropertyChange(p);
-                setPropertyOpen(false);
+          children: [
+            pinnedProperties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onPropertyChange(p);
+                  setPropertyOpen(false);
+                },
+                className: cn(
+                  "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+                  "hover:bg-dropdown-item-hover",
+                  p.id === condition.propertyId && "bg-dropdown-item-hover"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label })
+                ]
               },
-              className: cn(
-                "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-                "hover:bg-[var(--color-dropdown-item-hover)]",
-                p.id === condition.propertyId && "bg-[var(--color-dropdown-item-hover)]"
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
-              ]
-            },
-            p.id
-          ))
+              p.id
+            )),
+            unpinnedProperties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onPropertyChange(p);
+                  setPropertyOpen(false);
+                },
+                className: cn(
+                  "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
+                  "hover:bg-dropdown-item-hover",
+                  p.id === condition.propertyId && "bg-dropdown-item-hover"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-dropdown-item-icon" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-dropdown-item-text truncate", children: p.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ml-auto text-xs font-regular leading-xs text-muted-foreground", children: p.groupLabel })
+                ]
+              },
+              p.id
+            ))
+          ]
         }
       ) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(PopoverPrimitive11.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: import_icons34.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-regular leading-sm text-foreground whitespace-nowrap truncate text-left", children: condition.operator ?? "Select" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: import_icons34.faChevronDownOutline, size: "xs", className: "shrink-0 text-foreground" })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         PopoverPrimitive11.Content,
@@ -7875,7 +7992,7 @@ var AdvancedRow = ({
           align: "start",
           className: cn(
             "z-50 flex flex-col p-xs overflow-clip",
-            "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+            "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[160px]"
@@ -7906,10 +8023,10 @@ var AdvancedRow = ({
             placeholder: "Enter value...",
             className: cn(
               "flex-1 min-w-[80px] px-base py-sm",
-              "bg-[var(--color-background)] border border-[var(--color-input)] rounded-base",
-              "text-sm font-regular leading-sm text-[var(--color-foreground)]",
-              "placeholder:text-[var(--color-muted-foreground)]",
-              "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-0"
+              "bg-background border border-input rounded-base",
+              "text-sm font-regular leading-sm text-foreground",
+              "placeholder:text-muted-foreground",
+              "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0"
             )
           }
         );
@@ -7932,7 +8049,7 @@ var AdvancedRow = ({
                 {
                   className: cn(
                     "text-sm font-regular leading-sm whitespace-nowrap truncate text-left",
-                    hasValue ? "text-[var(--color-foreground)]" : "text-[var(--color-muted-foreground)]"
+                    hasValue ? "text-foreground" : "text-muted-foreground"
                   ),
                   title: hasValue ? displayValue : void 0,
                   children: hasValue ? displayValue : "Select a value"
@@ -7943,7 +8060,7 @@ var AdvancedRow = ({
                 {
                   icon: import_icons34.faChevronDownOutline,
                   size: "xs",
-                  className: "shrink-0 text-[var(--color-foreground)]"
+                  className: "shrink-0 text-foreground"
                 }
               )
             ]
@@ -7956,7 +8073,7 @@ var AdvancedRow = ({
             align: "start",
             className: cn(
               "z-50 flex flex-col overflow-clip",
-              "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+              "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
               "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
               "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
             ),
@@ -8046,19 +8163,19 @@ function ValueTagRow({ tags }) {
     ),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ref: containerRef, className: "flex flex-1 items-center gap-xs overflow-hidden", children: [
       tags.slice(0, visibleCount).map((t) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: tagChip, children: t }, t)),
-      overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(TooltipPrimitive3.Root, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: cn(tagChip, "cursor-default bg-filter-chip-badge-bg text-filter-chip-badge-text"), children: [
+      overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(TooltipPrimitive4.Root, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: cn(tagChip, "cursor-default bg-filter-chip-badge-bg text-filter-chip-badge-text"), children: [
           "+",
           overflowCount
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-          TooltipPrimitive3.Content,
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+          TooltipPrimitive4.Content,
           {
             sideOffset: 4,
             className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-xs font-regular leading-xs flex flex-col gap-xs data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
             children: [
               overflowTags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: t }, t)),
-              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive3.Arrow, { className: "fill-tooltip-default-bg" })
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
             ]
           }
         ) })
@@ -8069,7 +8186,7 @@ function ValueTagRow({ tags }) {
 
 // src/components/ui/filter/advanced-group.tsx
 var React50 = __toESM(require("react"));
-var TooltipPrimitive4 = __toESM(require("@radix-ui/react-tooltip"));
+var TooltipPrimitive5 = __toESM(require("@radix-ui/react-tooltip"));
 var import_icons35 = require("@l3mpire/icons");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var AdvancedGroup = ({
@@ -8084,21 +8201,21 @@ var AdvancedGroup = ({
 }) => {
   const [addOpen, setAddOpen] = React50.useState(false);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-start gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive4.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(TooltipPrimitive4.Root, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)] cursor-default", children: connector }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-        TooltipPrimitive4.Content,
+    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end pt-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive5.Provider, { delayDuration: 200, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(TooltipPrimitive5.Root, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground cursor-default", children: connector }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+        TooltipPrimitive5.Content,
         {
           sideOffset: 4,
           className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
           children: [
             '"Or" operator coming soon',
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive4.Arrow, { className: "fill-tooltip-default-bg" })
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
           ]
         }
       ) })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-[var(--color-border)] rounded-md bg-[var(--color-secondary,var(--color-accent))]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col gap-base p-base border border-border rounded-md bg-secondary", children: [
       children,
       onAddFilter && properties && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         PropertySelector,
@@ -8114,7 +8231,7 @@ var AdvancedGroup = ({
             "button",
             {
               type: "button",
-              className: "flex items-center gap-sm px-base py-sm text-sm font-medium leading-sm text-[var(--color-muted-foreground)] cursor-pointer transition-colors rounded-md hover:bg-[var(--color-accent)] hover:text-[var(--color-foreground)] w-fit",
+              className: "flex items-center gap-sm px-base py-sm text-sm font-medium leading-sm text-muted-foreground cursor-pointer transition-colors rounded-md hover:bg-accent hover:text-foreground w-fit",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.faPlusOutline, size: "sm" }),
                 "Add filter"
@@ -8146,7 +8263,7 @@ var ghostBtn = [
   "flex items-center gap-sm px-base py-sm",
   "min-h-[32px]",
   "cursor-pointer transition-colors text-sm font-medium leading-sm",
-  "rounded-md hover:bg-[var(--color-accent)]"
+  "rounded-md hover:bg-accent"
 ];
 var AdvancedPopover = ({
   filters,
@@ -8307,7 +8424,7 @@ var AdvancedPopover = ({
         onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col",
-          "bg-[var(--color-background)] rounded-md shadow-lg",
+          "bg-background rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
@@ -8323,7 +8440,7 @@ var AdvancedPopover = ({
               onOpenChange: setDraftPickerOpen
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
             /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-sm", children: [
               /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 PropertySelector,
@@ -8332,8 +8449,8 @@ var AdvancedPopover = ({
                   onSelect: handleAddFilter,
                   open: addSelectorOpen,
                   onOpenChange: setAddSelectorOpen,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("button", { type: "button", className: cn(ghostBtn, "text-[var(--color-foreground)]"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons36.Icon, { icon: import_icons36.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("button", { type: "button", className: cn(ghostBtn, "text-foreground"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons36.Icon, { icon: import_icons36.faPlusOutline, size: "sm", className: "text-foreground" }),
                     "Add filter"
                   ] })
                 }
@@ -8343,9 +8460,9 @@ var AdvancedPopover = ({
                 {
                   type: "button",
                   onClick: handleAddGroup,
-                  className: cn(ghostBtn, "text-[var(--color-foreground)]"),
+                  className: cn(ghostBtn, "text-foreground"),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons36.Icon, { icon: import_icons36.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons36.Icon, { icon: import_icons36.faPlusOutline, size: "sm", className: "text-foreground" }),
                     "Add filters group"
                   ]
                 }
@@ -8356,9 +8473,9 @@ var AdvancedPopover = ({
               {
                 type: "button",
                 onClick: handleClearAll,
-                className: cn(ghostBtn, "text-[var(--color-destructive,#ef4444)]"),
+                className: cn(ghostBtn, "text-destructive"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons36.Icon, { icon: import_icons36.faXmarkOutline, size: "sm", className: "text-[var(--color-destructive,#ef4444)]" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons36.Icon, { icon: import_icons36.faXmarkOutline, size: "sm", className: "text-destructive" }),
                   "Clear filters"
                 ]
               }
@@ -8384,7 +8501,7 @@ var DraftRow = ({
     onOpenChange?.(v);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       PropertySelector,
       {
@@ -8401,19 +8518,19 @@ var DraftRow = ({
             type: "button",
             className: cn(
               "flex items-center gap-base px-base py-sm min-w-0",
-              "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-              "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+              "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
+              "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
               "cursor-pointer transition-colors",
-              "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+              "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
               /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
                 import_icons36.Icon,
                 {
                   icon: import_icons36.faChevronDownOutline,
                   size: "xs",
-                  className: "shrink-0 text-[var(--color-foreground)]"
+                  className: "shrink-0 text-foreground"
                 }
               )
             ]
@@ -8427,14 +8544,14 @@ var DraftRow = ({
 // src/components/ui/filter/summary-chip.tsx
 var React52 = __toESM(require("react"));
 var PopoverPrimitive13 = __toESM(require("@radix-ui/react-popover"));
-var TooltipPrimitive5 = __toESM(require("@radix-ui/react-tooltip"));
+var TooltipPrimitive6 = __toESM(require("@radix-ui/react-tooltip"));
 var import_icons37 = require("@l3mpire/icons");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var ghostBtn2 = [
   "flex items-center gap-sm px-base py-sm",
   "min-h-[32px]",
   "cursor-pointer transition-colors text-sm font-medium leading-sm",
-  "rounded-md hover:bg-[var(--color-accent)]"
+  "rounded-md hover:bg-accent"
 ];
 var SummaryChip = ({
   count,
@@ -8595,30 +8712,30 @@ var SummaryChip = ({
       className: cn(
         "inline-flex items-center gap-sm px-base py-sm",
         "min-h-[32px] max-h-[32px]",
-        "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-        "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm",
+        "bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default",
+        "border border-btn-outlined-neutral-border-default rounded-md shadow-sm",
         "cursor-pointer transition-colors",
-        "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
+        "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faFilterOutline, size: "sm", className: "shrink-0 text-[var(--color-foreground)]" }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faFilterOutline, size: "sm", className: "shrink-0 text-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-foreground", children: "Filters" }),
         count > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
       ]
     }
   );
   const hasTooltip = tooltipContent && !open;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Provider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
-    hasTooltip && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-      TooltipPrimitive5.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive6.Provider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive6.Root, { open: hasTooltip ? void 0 : false, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PopoverPrimitive13.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive6.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PopoverPrimitive13.Trigger, { asChild: true, children: trigger }) }),
+    hasTooltip && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      TooltipPrimitive6.Content,
       {
         sideOffset: 4,
         className: "z-50 px-base py-sm rounded-md shadow-lg bg-tooltip-default-bg text-tooltip-default-text text-sm font-regular leading-sm max-w-[320px] data-[state=delayed-open]:animate-[tooltip-in_150ms_ease-out] data-[state=closed]:animate-[tooltip-out_100ms_ease-in]",
         children: [
           tooltipContent,
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive5.Arrow, { className: "fill-tooltip-default-bg" })
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TooltipPrimitive6.Arrow, { className: "fill-tooltip-default-bg" })
         ]
       }
     ) }),
@@ -8632,7 +8749,7 @@ var SummaryChip = ({
         onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col overflow-clip",
-          "bg-[var(--color-dropdown-bg)] border border-[var(--color-dropdown-border)] rounded-md shadow-lg",
+          "bg-dropdown-bg border border-dropdown-border rounded-md shadow-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2",
@@ -8648,7 +8765,7 @@ var SummaryChip = ({
               onOpenChange: setDraftPickerOpen
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-border", children: [
             /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-sm", children: [
               /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 PropertySelector,
@@ -8657,14 +8774,14 @@ var SummaryChip = ({
                   onSelect: handleAddFilter,
                   open: addSelectorOpen,
                   onOpenChange: setAddSelectorOpen,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { type: "button", className: cn(ghostBtn2, "text-[var(--color-foreground)]"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { type: "button", className: cn(ghostBtn2, "text-foreground"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faPlusOutline, size: "sm", className: "text-foreground" }),
                     "Add filter"
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { type: "button", onClick: handleAddGroup, className: cn(ghostBtn2, "text-[var(--color-foreground)]"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { type: "button", onClick: handleAddGroup, className: cn(ghostBtn2, "text-foreground"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faPlusOutline, size: "sm", className: "text-foreground" }),
                 "Add filters group"
               ] })
             ] }),
@@ -8676,9 +8793,9 @@ var SummaryChip = ({
                   onClearAll();
                   setOpen(false);
                 },
-                className: cn(ghostBtn2, "text-[var(--color-destructive,#ef4444)]"),
+                className: cn(ghostBtn2, "text-destructive"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faXmarkOutline, size: "sm", className: "text-[var(--color-destructive,#ef4444)]" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faXmarkOutline, size: "sm", className: "text-destructive" }),
                   "Clear filters"
                 ]
               }
@@ -8699,7 +8816,7 @@ var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
     onOpenChange?.(v);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-xs font-medium leading-xs text-muted-foreground", children: "Where" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(PropertySelector, { properties, onSelect: (p) => {
       onSelect(p);
       setOpen(false);
@@ -8709,13 +8826,13 @@ var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
         type: "button",
         className: cn(
           "flex items-center gap-base px-base py-sm min-w-0",
-          "bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)]",
-          "border border-[var(--color-btn-outlined-neutral-border-default)] rounded-md shadow-sm cursor-pointer transition-colors",
-          "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
+          "bg-gradient-to-t from-btn-outlined-neutral-bg-default to-btn-outlined-neutral-bg-gradient-to-default",
+          "border border-btn-outlined-neutral-border-default rounded-md shadow-sm cursor-pointer transition-colors",
+          "hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "text-sm font-regular leading-sm text-muted-foreground whitespace-nowrap", children: "Select property" }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faChevronDownOutline, size: "xs", className: "shrink-0 text-foreground" })
         ]
       }
     ) })
@@ -8942,8 +9059,8 @@ var FilterSystem = ({
                 "button",
                 {
                   type: "button",
-                  className: "shrink-0 inline-flex items-center justify-center size-8 rounded-md border border-[var(--color-btn-outlined-neutral-border-default)] bg-gradient-to-t from-[var(--color-btn-outlined-neutral-bg-default)] from-[10%] to-[var(--color-btn-outlined-neutral-bg-gradient-to-default)] shadow-sm cursor-pointer transition-colors hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons38.Icon, { icon: import_icons38.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" })
+                  className: "shrink-0 inline-flex items-center justify-center size-8 rounded-md border border-btn-outlined-neutral-border-default bg-gradient-to-t from-btn-outlined-neutral-bg-default from-[10%] to-btn-outlined-neutral-bg-gradient-to-default shadow-sm cursor-pointer transition-colors hover:from-btn-outlined-neutral-bg-hover hover:to-btn-outlined-neutral-bg-gradient-to-hover",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons38.Icon, { icon: import_icons38.faPlusOutline, size: "sm", className: "text-foreground" })
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FilterBarButton, {})
             }