@l3mpire/ui 2.16.2 → 2.16.4

package/USAGE.md

@@ -963,7 +963,7 @@ import {
 
 **Advanced filter shortcut:** the PropertySelector footer shows an "Advanced filter · N rule(s)" item. Clicking it closes the property selector and opens the advanced popover directly in its initial empty state — where the user picks the first property inline via a "Where | [Select property ▾]" draft row. When no advanced filters exist yet, clicking this shortcut makes the AdvancedChip appear with the popover already open; closing without adding a filter removes the chip automatically.
 
-**Dynamic options ("Me", "Unassigned", …):** enum/tags/relation properties accept a `dynamicOptions` array. Each entry is `{ value, label, description?, icon? }` and is rendered at the top of the SingleSelect / MultiSelect dropdown with a divider separating it from the regular options. The `value` is a sentinel string stored on `FilterCondition.value` — the DS only renders, the consuming app resolves it at query time (e.g. `"__me__"` → `currentUser.id`). This keeps session/business logic out of the DS while still getting a consistent visual treatment.
+**Dynamic options ("Me", "Unassigned", …):** enum/tags/relation properties accept a `dynamicOptions` array. Each entry is `{ value, label, description? }` and is rendered inline with regular options in the SingleSelect / MultiSelect dropdown. The `value` is a sentinel string stored on `FilterCondition.value` — the DS renders the `label` in the filter chip (not the raw sentinel) and the consuming app resolves it at query time (e.g. `"__me__"` → `currentUser.id`). This keeps session/business logic out of the DS while still getting a consistent visual treatment.
 
 ```tsx
 {
@@ -979,9 +979,8 @@ import {
       value: "__me__",
       label: "Me",
       description: "This value is dynamically applied to the current user",
-      icon: faBoltOutline,
     },
-    { value: "__deactivated__", label: "All deactivated and removed owners", icon: faBoltOutline },
+    { value: "__deactivated__", label: "All deactivated and removed owners" },
   ],
 }
 ```
@@ -993,7 +992,7 @@ import {
 | `createFilterWithDefaults(propertyId, type)` | Creates FilterCondition with default operator |
 | `isNoValueOperator(op)` | True for is empty / is not empty / is true / is false |
 | `getValueInputType(type, op)` | Returns the input component name for a type+operator combo |
-| `formatFilterValue(value)` | Stringifies a `FilterValue` for display (handles Date, ranges, arrays, booleans) |
+| `formatFilterValue(value, dynamicOptions?)` | Stringifies a `FilterValue` for display — resolves sentinel values via `dynamicOptions` labels |
 | `getBadgeCount(value)` | Returns `+N` count for multi-value selections, `undefined` otherwise |
 | `createEmptyGroup()` / `isFilterGroup(node)` | Tree helpers for nested groups |
 | `wrapInGroup(condition)` / `unwrapGroup(group)` | Convert between condition and single-child group |

package/dist/index.d.mts

@@ -168,6 +168,7 @@ interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimit
     alt?: string;
     initials?: string;
     badge?: React.ReactNode;
+    /** `"rounded"` (circle) for people/users, `"squared"` for companies/orgs. */
     shape?: "rounded" | "squared";
 }
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
@@ -715,16 +716,14 @@ type OperatorType = TextOperator | NumberOperator | DateOperator | EnumOperator
  * (e.g. "Me", "My team", "Unassigned"). The value is a sentinel string that
  * the consuming app resolves at query time (e.g. `__me__` → `currentUser.id`).
  *
- * The design system only handles the rendering (icon + label + description +
- * divider above the regular options). Resolving the sentinels is an app
- * concern.
+ * The design system renders label + optional description inline with regular
+ * options. Resolving the sentinels is an app concern.
  */
 interface DynamicOption {
     /** Sentinel value stored on FilterCondition.value (e.g. "__me__"). */
     value: string;
     label: string;
     description?: string;
-    icon?: _l3mpire_icons.IconDefinition;
 }
 interface PropertyDefinition {
     id: string;

package/dist/index.d.ts

@@ -168,6 +168,7 @@ interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimit
     alt?: string;
     initials?: string;
     badge?: React.ReactNode;
+    /** `"rounded"` (circle) for people/users, `"squared"` for companies/orgs. */
     shape?: "rounded" | "squared";
 }
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
@@ -715,16 +716,14 @@ type OperatorType = TextOperator | NumberOperator | DateOperator | EnumOperator
  * (e.g. "Me", "My team", "Unassigned"). The value is a sentinel string that
  * the consuming app resolves at query time (e.g. `__me__` → `currentUser.id`).
  *
- * The design system only handles the rendering (icon + label + description +
- * divider above the regular options). Resolving the sentinels is an app
- * concern.
+ * The design system renders label + optional description inline with regular
+ * options. Resolving the sentinels is an app concern.
  */
 interface DynamicOption {
     /** Sentinel value stored on FilterCondition.value (e.g. "__me__"). */
     value: string;
     label: string;
     description?: string;
-    icon?: _l3mpire_icons.IconDefinition;
 }
 interface PropertyDefinition {
     id: string;

package/dist/index.js

@@ -5360,7 +5360,7 @@ function getValueInputType(type, operator) {
     return ["is any of", "is none of"].includes(operator) ? "MultiRelationPicker" : "RelationPicker";
   return null;
 }
-function formatFilterValue(value) {
+function formatFilterValue(value, dynamicOptions) {
   if (value == null) return void 0;
   if (typeof value === "boolean") return value ? "Yes" : "No";
   if (value instanceof Date) {
@@ -5379,9 +5379,17 @@ function formatFilterValue(value) {
       const fmt = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
       return `${fmt(value[0])} \u2013 ${value[1] instanceof Date ? fmt(value[1]) : "\u2026"}`;
     }
-    return String(value[0]);
+    const resolved = resolveDynamic(String(value[0]), dynamicOptions);
+    return resolved;
   }
-  return String(value);
+  return resolveDynamic(String(value), dynamicOptions);
+}
+function resolveDynamic(raw, dynamicOptions) {
+  if (dynamicOptions) {
+    const match = dynamicOptions.find((o) => o.value === raw);
+    if (match) return match.label;
+  }
+  return raw;
 }
 function getBadgeCount(value) {
   if (Array.isArray(value) && value.length > 1 && typeof value[0] === "string") {
@@ -6606,7 +6614,6 @@ var PresetTagsValueInput = ({
 PresetTagsValueInput.displayName = "PresetTagsValueInput";
 
 // src/components/ui/filter/value-inputs/select-value-input.tsx
-var import_icons29 = require("@l3mpire/icons");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var DynamicOptionRow = ({
   option,
@@ -6643,14 +6650,6 @@ var DynamicOptionRow = ({
           ) })
         }
       ),
-      option.icon && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        import_icons29.Icon,
-        {
-          icon: option.icon,
-          size: "sm",
-          className: "shrink-0 mt-[1px] text-[var(--color-interactive-text-primary-dark-default,var(--color-primary))]"
-        }
-      ),
       /* @__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 })
@@ -6658,7 +6657,6 @@ var DynamicOptionRow = ({
     ]
   }
 );
-var DynamicOptionsDivider = () => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "h-px bg-[var(--color-dropdown-border)] mx-xs my-xs" });
 var SingleSelectValueInput = ({
   value,
   onChange,
@@ -6689,7 +6687,6 @@ var SingleSelectValueInput = ({
           },
           opt.value
         )),
-        dynamicOptions && dynamicOptions.length > 0 && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DynamicOptionsDivider, {}),
         options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "button",
           {
@@ -6876,7 +6873,7 @@ ValueInput.displayName = "ValueInput";
 // src/components/ui/filter/property-selector.tsx
 var React44 = __toESM(require("react"));
 var PopoverPrimitive6 = __toESM(require("@radix-ui/react-popover"));
-var import_icons30 = require("@l3mpire/icons");
+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" }),
@@ -6889,9 +6886,9 @@ var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_js
       className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-          import_icons30.Icon,
+          import_icons29.Icon,
           {
-            icon: import_icons30.faFilterOutline,
+            icon: import_icons29.faFilterOutline,
             size: "sm",
             className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
           }
@@ -6991,9 +6988,9 @@ var PropertySelector = ({
             /* @__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: [
                 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                  import_icons30.Icon,
+                  import_icons29.Icon,
                   {
-                    icon: import_icons30.faMagnifyingGlassOutline,
+                    icon: import_icons29.faMagnifyingGlassOutline,
                     size: "sm",
                     className: "shrink-0 text-[var(--color-muted-foreground)]"
                   }
@@ -7023,7 +7020,7 @@ var PropertySelector = ({
                     className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                        import_icons30.Icon,
+                        import_icons29.Icon,
                         {
                           icon: prop.icon,
                           size: "sm",
@@ -7050,7 +7047,7 @@ var PropertySelector = ({
                       className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                          import_icons30.Icon,
+                          import_icons29.Icon,
                           {
                             icon: g.groupIcon,
                             size: "sm",
@@ -7060,9 +7057,9 @@ var PropertySelector = ({
                         /* @__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-semibold leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
                         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                          import_icons30.Icon,
+                          import_icons29.Icon,
                           {
-                            icon: import_icons30.faChevronRightOutline,
+                            icon: import_icons29.faChevronRightOutline,
                             size: "xs",
                             className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                           }
@@ -7089,9 +7086,9 @@ var PropertySelector = ({
                   className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                      import_icons30.Icon,
+                      import_icons29.Icon,
                       {
-                        icon: import_icons30.faChevronLeftOutline,
+                        icon: import_icons29.faChevronLeftOutline,
                         size: "sm",
                         className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                       }
@@ -7102,9 +7099,9 @@ var PropertySelector = ({
               ),
               /* @__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.jsx)(
-                  import_icons30.Icon,
+                  import_icons29.Icon,
                   {
-                    icon: import_icons30.faMagnifyingGlassOutline,
+                    icon: import_icons29.faMagnifyingGlassOutline,
                     size: "sm",
                     className: "shrink-0 text-[var(--color-muted-foreground)]"
                   }
@@ -7133,7 +7130,7 @@ var PropertySelector = ({
                     className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                        import_icons30.Icon,
+                        import_icons29.Icon,
                         {
                           icon: prop.icon,
                           size: "sm",
@@ -7165,7 +7162,7 @@ PropertySelector.displayName = "PropertySelector";
 
 // src/components/ui/filter/kebab-menu.tsx
 var PopoverPrimitive7 = __toESM(require("@radix-ui/react-popover"));
-var import_icons31 = require("@l3mpire/icons");
+var import_icons30 = require("@l3mpire/icons");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var KebabMenu = ({
   onConvertToAdvanced,
@@ -7200,9 +7197,9 @@ var KebabMenu = ({
             className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                import_icons31.Icon,
+                import_icons30.Icon,
                 {
-                  icon: import_icons31.faArrowRightOutline,
+                  icon: import_icons30.faArrowRightOutline,
                   size: "sm",
                   className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                 }
@@ -7223,9 +7220,9 @@ var KebabMenu = ({
             className: "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors hover:bg-[var(--color-dropdown-item-hover)]",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                import_icons31.Icon,
+                import_icons30.Icon,
                 {
-                  icon: import_icons31.faTrashOutline,
+                  icon: import_icons30.faTrashOutline,
                   size: "sm",
                   className: "shrink-0 text-[var(--color-destructive)]"
                 }
@@ -7243,7 +7240,7 @@ KebabMenu.displayName = "KebabMenu";
 // src/components/ui/filter/filter-editor.tsx
 var React45 = __toESM(require("react"));
 var PopoverPrimitive8 = __toESM(require("@radix-ui/react-popover"));
-var import_icons32 = require("@l3mpire/icons");
+var import_icons31 = require("@l3mpire/icons");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var FilterEditor = ({
   propertyDef,
@@ -7307,7 +7304,7 @@ var FilterEditor = ({
         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.jsx)(
-              import_icons32.Icon,
+              import_icons31.Icon,
               {
                 icon: propertyDef.icon,
                 size: "sm",
@@ -7434,7 +7431,7 @@ var InteractiveFilterChip = ({
     setValueOpen(false);
   };
   const hasOperator = !!condition.operator;
-  const displayValue = formatFilterValue(condition.value);
+  const displayValue = formatFilterValue(condition.value, propertyDef.dynamicOptions);
   const hasValue = hasOperator && displayValue != null;
   const badgeCount = getBadgeCount(condition.value);
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
@@ -7570,11 +7567,11 @@ InteractiveFilterChip.displayName = "InteractiveFilterChip";
 
 // src/components/ui/filter/filter-system.tsx
 var React54 = __toESM(require("react"));
-var import_icons39 = require("@l3mpire/icons");
+var import_icons38 = require("@l3mpire/icons");
 
 // src/components/ui/filter/advanced-chip.tsx
 var React47 = __toESM(require("react"));
-var import_icons33 = require("@l3mpire/icons");
+var import_icons32 = require("@l3mpire/icons");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var btnBase = [
   "flex items-center justify-center",
@@ -7600,9 +7597,9 @@ var AdvancedChip = React47.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-            import_icons33.Icon,
+            import_icons32.Icon,
             {
-              icon: import_icons33.faFilterOutline,
+              icon: import_icons32.faFilterOutline,
               size: "sm",
               className: "shrink-0 text-[var(--color-foreground)]"
             }
@@ -7626,7 +7623,7 @@ var AdvancedChip = React47.forwardRef(
           "rounded-r-md -ml-px"
         ),
         "aria-label": "Clear all advanced filters",
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons33.Icon, { icon: import_icons33.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-[var(--color-foreground)]" })
       }
     )
   ] })
@@ -7636,17 +7633,17 @@ AdvancedChip.displayName = "AdvancedChip";
 // src/components/ui/filter/advanced-popover.tsx
 var React51 = __toESM(require("react"));
 var PopoverPrimitive12 = __toESM(require("@radix-ui/react-popover"));
-var import_icons37 = require("@l3mpire/icons");
+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 import_icons35 = require("@l3mpire/icons");
+var import_icons34 = require("@l3mpire/icons");
 
 // src/components/ui/filter/filter-node-actions.tsx
 var React48 = __toESM(require("react"));
 var PopoverPrimitive10 = __toESM(require("@radix-ui/react-popover"));
-var import_icons34 = require("@l3mpire/icons");
+var import_icons33 = require("@l3mpire/icons");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var FilterNodeActions = ({
   nodeType,
@@ -7658,17 +7655,17 @@ var FilterNodeActions = ({
   const items = [
     {
       label: "Duplicate",
-      icon: import_icons34.faCopyOutline,
+      icon: import_icons33.faCopyOutline,
       action: onDuplicate
     },
     {
       label: nodeType === "condition" ? "Turn into group" : "Turn into filter",
-      icon: nodeType === "condition" ? import_icons34.faFolderOutline : import_icons34.faFilterOutline,
+      icon: nodeType === "condition" ? import_icons33.faFolderOutline : import_icons33.faFilterOutline,
       action: onConvert
     },
     {
       label: "Delete",
-      icon: import_icons34.faTrashOutline,
+      icon: import_icons33.faTrashOutline,
       action: onDelete,
       destructive: true
     }
@@ -7681,9 +7678,9 @@ var FilterNodeActions = ({
         className: "shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
         "aria-label": "More actions",
         children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-          import_icons34.Icon,
+          import_icons33.Icon,
           {
-            icon: import_icons34.faEllipsisOutline,
+            icon: import_icons33.faEllipsisOutline,
             size: "sm",
             className: "text-[var(--color-foreground)]"
           }
@@ -7717,7 +7714,7 @@ var FilterNodeActions = ({
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-                import_icons34.Icon,
+                import_icons33.Icon,
                 {
                   icon: item.icon,
                   size: "sm",
@@ -7784,7 +7781,7 @@ var AdvancedRow = ({
   const handleValueChange = (val) => {
     onUpdate({ ...condition, value: val });
   };
-  const displayValue = formatFilterValue(condition.value);
+  const displayValue = formatFilterValue(condition.value, propertyDef.dynamicOptions);
   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: [
@@ -7803,15 +7800,15 @@ var AdvancedRow = ({
         ),
         children: [
           connector,
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons35.Icon, { icon: import_icons35.faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons34.Icon, { icon: import_icons34.faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
         ]
       }
     ),
     /* @__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_icons35.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
+        /* @__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_icons35.Icon, { icon: import_icons35.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+        /* @__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)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         PopoverPrimitive11.Content,
@@ -7839,7 +7836,7 @@ var AdvancedRow = ({
                 p.id === condition.propertyId && "bg-[var(--color-dropdown-item-hover)]"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_icons35.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
+                /* @__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 })
               ]
             },
@@ -7851,7 +7848,7 @@ var AdvancedRow = ({
     /* @__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_icons35.Icon, { icon: import_icons35.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+        /* @__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)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         PopoverPrimitive11.Content,
@@ -7902,9 +7899,9 @@ var AdvancedRow = ({
                   badgeCount - 1
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-                  import_icons35.Icon,
+                  import_icons34.Icon,
                   {
-                    icon: import_icons35.faChevronDownOutline,
+                    icon: import_icons34.faChevronDownOutline,
                     size: "xs",
                     className: "text-[var(--color-foreground)]"
                   }
@@ -7958,7 +7955,7 @@ AdvancedRow.displayName = "AdvancedRow";
 
 // src/components/ui/filter/advanced-group.tsx
 var React50 = __toESM(require("react"));
-var import_icons36 = require("@l3mpire/icons");
+var import_icons35 = require("@l3mpire/icons");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var AdvancedGroup = ({
   connector,
@@ -7987,7 +7984,7 @@ var AdvancedGroup = ({
         ),
         children: [
           connector,
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons36.Icon, { icon: import_icons36.faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
         ]
       }
     ) }),
@@ -8009,7 +8006,7 @@ var AdvancedGroup = ({
               type: "button",
               className: "flex items-center gap-sm px-base py-sm text-sm font-semibold 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",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons36.Icon, { icon: import_icons36.faPlusOutline, size: "sm" }),
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.faPlusOutline, size: "sm" }),
                 "Add filter"
               ]
             }
@@ -8229,7 +8226,7 @@ var AdvancedPopover = ({
                   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_icons37.Icon, { icon: import_icons37.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-[var(--color-foreground)]" }),
                     "Add filter"
                   ] })
                 }
@@ -8241,7 +8238,7 @@ var AdvancedPopover = ({
                   onClick: handleAddGroup,
                   className: cn(ghostBtn, "text-[var(--color-foreground)]"),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons37.Icon, { icon: import_icons37.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-[var(--color-foreground)]" }),
                     "Add filters group"
                   ]
                 }
@@ -8254,7 +8251,7 @@ var AdvancedPopover = ({
                 onClick: handleClearAll,
                 className: cn(ghostBtn, "text-[var(--color-destructive,#ef4444)]"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_icons37.Icon, { icon: import_icons37.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-[var(--color-destructive,#ef4444)]" }),
                   "Clear filters"
                 ]
               }
@@ -8305,9 +8302,9 @@ var DraftRow = ({
             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)(
-                import_icons37.Icon,
+                import_icons36.Icon,
                 {
-                  icon: import_icons37.faChevronDownOutline,
+                  icon: import_icons36.faChevronDownOutline,
                   size: "xs",
                   className: "shrink-0 text-[var(--color-foreground)]"
                 }
@@ -8323,7 +8320,7 @@ var DraftRow = ({
 // src/components/ui/filter/summary-chip.tsx
 var React52 = __toESM(require("react"));
 var PopoverPrimitive13 = __toESM(require("@radix-ui/react-popover"));
-var import_icons38 = require("@l3mpire/icons");
+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",
@@ -8501,7 +8498,7 @@ var SummaryChip = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons38.Icon, { icon: import_icons38.faFilterOutline, size: "sm", className: "shrink-0 text-[var(--color-foreground)]" }),
+          /* @__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-semibold leading-sm whitespace-nowrap text-[var(--color-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-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
@@ -8542,13 +8539,13 @@ var SummaryChip = ({
                   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_icons38.Icon, { icon: import_icons38.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faPlusOutline, size: "sm", className: "text-[var(--color-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_icons38.Icon, { icon: import_icons38.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
                 "Add filters group"
               ] })
             ] }),
@@ -8562,7 +8559,7 @@ var SummaryChip = ({
                 },
                 className: cn(ghostBtn2, "text-[var(--color-destructive,#ef4444)]"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons38.Icon, { icon: import_icons38.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-[var(--color-destructive,#ef4444)]" }),
                   "Clear filters"
                 ]
               }
@@ -8599,7 +8596,7 @@ var DraftRow2 = ({ properties, onSelect, open: openProp, onOpenChange }) => {
         ),
         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_icons38.Icon, { icon: import_icons38.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_icons37.Icon, { icon: import_icons37.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
         ]
       }
     ) })
@@ -8828,7 +8825,7 @@ var FilterSystem = ({
                 {
                   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_icons39.Icon, { icon: import_icons39.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons38.Icon, { icon: import_icons38.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" })
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FilterBarButton, {})
             }
@@ -8841,7 +8838,7 @@ var FilterSystem = ({
           type: "button",
           onClick: handleClearAll,
           className: "shrink-0 flex items-center gap-sm px-base py-sm min-h-[32px] max-h-[32px] rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
-          children: isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons39.Icon, { icon: import_icons39.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
+          children: isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_icons38.Icon, { icon: import_icons38.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
         }
       )
     ] }),