@l3mpire/ui 2.10.0 → 2.12.0

package/dist/index.js

@@ -206,7 +206,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority.cva)(
   [
     "inline-flex items-center justify-center whitespace-nowrap",
-    "font-medium",
+    "font-semibold",
     "border border-transparent"
   ],
   {
@@ -295,7 +295,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority2.cva)(
   [
     "inline-flex items-center justify-center whitespace-nowrap",
-    "font-medium transition-colors",
+    "font-semibold transition-colors",
     "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
     "disabled:pointer-events-none",
     "border",
@@ -328,7 +328,7 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
       },
       size: {
         sm: [
-          "h-6 p-xs gap-xs",
+          "h-6 py-xs gap-xs",
           "text-xs",
           "min-w-16 rounded-base"
         ],
@@ -423,13 +423,13 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
         appearance: "ghost",
         intent: "brand",
         class: [
-          "bg-btn-ghost-neutral-bg-default",
-          "text-btn-ghost-neutral-text-default",
-          "border-btn-ghost-neutral-border-default",
-          "hover:bg-btn-ghost-neutral-bg-hover",
-          "hover:text-btn-ghost-neutral-text-hover",
-          "active:bg-btn-ghost-neutral-bg-pressed",
-          "active:text-btn-ghost-neutral-text-pressed"
+          "bg-btn-ghost-brand-bg-default",
+          "text-btn-ghost-brand-text-default",
+          "border-btn-ghost-brand-border-default",
+          "hover:bg-btn-ghost-brand-bg-hover",
+          "hover:text-btn-ghost-brand-text-hover",
+          "active:bg-btn-ghost-brand-bg-pressed",
+          "active:text-btn-ghost-brand-text-pressed"
         ]
       },
       // ── Ghost + Alert ──────────────────────────────────────────────────
@@ -487,13 +487,17 @@ var Button = React2.forwardRef(
     const isDisabled = disabled || loading;
     const isIconOnly = iconOnlyProp ?? !children;
     const iconSize = iconSizeMap[size ?? "md"];
+    const smPadding = size === "sm" && !isIconOnly ? cn(
+      leftIcon || loading ? "pl-xs" : "pl-sm",
+      rightIcon ? "pr-xs" : "pr-sm"
+    ) : "";
     const variantClasses = buttonVariants({
       appearance,
       intent,
       size,
       iconOnly: isIconOnly || void 0,
       fullWidth,
-      className
+      className: cn(smPadding, className)
     });
     if (asChild) {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_slot.Slot, { ref, className: cn(variantClasses), ...props, children });
@@ -595,7 +599,7 @@ var BrowserTabItem = React3.forwardRef(
               },
               onClick: (e) => e.stopPropagation(),
               className: cn(
-                "text-sm font-medium leading-sm bg-transparent outline-none p-0 m-0",
+                "text-sm font-semibold leading-sm bg-transparent outline-none p-0 m-0",
                 "border-b border-browser-tab-item-border border-dashed border-t-0 border-l-0 border-r-0",
                 isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
               ),
@@ -605,7 +609,7 @@ var BrowserTabItem = React3.forwardRef(
             "span",
             {
               className: cn(
-                "text-sm font-medium leading-sm whitespace-nowrap",
+                "text-sm font-semibold leading-sm whitespace-nowrap",
                 isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
               ),
               onDoubleClick: (e) => {
@@ -794,7 +798,7 @@ var BrowserTab = React3.forwardRef(
                         "span",
                         {
                           className: cn(
-                            "text-sm font-medium leading-sm whitespace-nowrap",
+                            "text-sm font-semibold leading-sm whitespace-nowrap",
                             item.isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
                           ),
                           children: item.label
@@ -897,7 +901,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var linkVariants = (0, import_class_variance_authority4.cva)(
   [
     "inline-flex items-center",
-    "font-medium",
+    "font-semibold",
     "transition-colors cursor-pointer",
     "disabled:pointer-events-none",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0"
@@ -1029,7 +1033,7 @@ var InputLabel = React6.forwardRef(({ className, type = "default", disabled, inf
       className: cn(
         "inline-flex items-center gap-xs",
         "text-xs",
-        "font-medium",
+        "font-semibold",
         "leading-xs",
         textColor2,
         className
@@ -1101,7 +1105,7 @@ var typeIconMap = {
   warning: { icon: import_icons6.faTriangleExclamationSolid, color: "text-info-message-warning-icon" },
   empty: { icon: import_icons6.faCircleInfoSolid, color: "text-info-message-empty-icon" }
 };
-var titleStyle = "text-sm font-medium leading-sm text-info-message-title";
+var titleStyle = "text-sm font-semibold leading-sm text-info-message-title";
 var descriptionStyle = "text-xs font-regular leading-xs text-info-message-description";
 var closeButtonStyle = "inline-flex shrink-0 items-center justify-center p-xs rounded-base text-info-message-close hover:bg-black/5 transition-colors";
 var typeLinkIntentMap = {
@@ -1199,7 +1203,7 @@ var typeIconMap2 = {
   alert: { icon: import_icons7.faCircleExclamationSolid, color: "text-toast-alert-icon" },
   warning: { icon: import_icons7.faTriangleExclamationSolid, color: "text-toast-warning-icon" }
 };
-var titleStyle2 = "text-sm font-medium leading-sm text-toast-title";
+var titleStyle2 = "text-sm font-semibold leading-sm text-toast-title";
 var subtitleStyle = "text-sm font-regular leading-sm text-toast-subtitle";
 var closeButtonStyle2 = "inline-flex shrink-0 items-center justify-center self-start p-sm rounded-md text-toast-close hover:bg-black/5 transition-colors";
 var ToastProvider = ToastPrimitive.Provider;
@@ -1274,7 +1278,7 @@ var trackStyles = {
   ]
 };
 var thumbStyle = "pointer-events-none block rounded-full size-3 translate-x-0.5 bg-switch-thumb-bg shadow-md transition-transform data-[state=checked]:translate-x-[13px]";
-var labelBase = "cursor-pointer select-none text-sm font-medium leading-sm";
+var labelBase = "cursor-pointer select-none text-sm font-semibold leading-sm";
 var labelColor = {
   default: "text-switch-label-text",
   disabled: "pointer-events-none text-switch-label-disabled"
@@ -1819,7 +1823,7 @@ var Avatar = React13.forwardRef(({ className, size = "xl", shape = "rounded", sr
             {
               delayMs: 0,
               className: cn(
-                "font-medium",
+                "font-semibold",
                 "text-avatar-fallback-text",
                 "select-none text-center",
                 initialsFontSize[size ?? "xl"]
@@ -1868,7 +1872,7 @@ var iconStyle = {
   default: "text-checkbox-checked-icon",
   disabled: "text-checkbox-disabled-icon"
 };
-var labelBase2 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-sm";
+var labelBase2 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-sm";
 var labelColor2 = {
   default: "text-checkbox-label-default",
   disabled: "pointer-events-none text-checkbox-label-disabled"
@@ -1956,7 +1960,7 @@ var dotStyle = {
   default: "bg-radio-selected-dot",
   disabled: "bg-radio-disabled-dot"
 };
-var labelBase3 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-sm";
+var labelBase3 = "cursor-pointer select-none overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold leading-sm";
 var labelColor3 = {
   default: "text-radio-label-default",
   disabled: "pointer-events-none text-radio-label-disabled"
@@ -2017,8 +2021,8 @@ var import_icons11 = require("@l3mpire/icons");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var textSm = "text-sm font-regular leading-sm";
 var textXs = "text-xs font-regular leading-xs";
-var textXsMedium = "text-xs font-medium leading-xs";
-var textSmMedium = "text-sm font-medium leading-sm";
+var textXsMedium = "text-xs font-semibold leading-xs";
+var textSmMedium = "text-sm font-semibold leading-sm";
 var containerStyle = [
   "flex flex-col gap-base overflow-clip",
   "bg-dropdown-bg",
@@ -2219,7 +2223,7 @@ var SidebarHeadingItem = React17.forwardRef(
         ref,
         className: cn(
           "flex items-center w-full",
-          "text-xs leading-xs font-medium text-sidebar-heading-text mb-base",
+          "text-xs leading-xs font-semibold text-sidebar-heading-text mb-base",
           className
         ),
         ...props,
@@ -2309,7 +2313,7 @@ var SidebarItem = React18.forwardRef(
               "span",
               {
                 className: cn(
-                  "flex-1 min-w-0 truncate text-sm leading-sm font-medium",
+                  "flex-1 min-w-0 truncate text-sm leading-sm font-semibold",
                   textColorClass
                 ),
                 children: label
@@ -2397,7 +2401,7 @@ var iconColor = {
 };
 var errorGuidance = {
   icon: "shrink-0 text-select-error-icon",
-  text: "text-xs font-medium leading-xs text-select-error-text"
+  text: "text-xs font-semibold leading-xs text-select-error-text"
 };
 function SelectChips({ tags, onTagRemove, chipHeightPx }) {
   const containerRef = React19.useRef(null);
@@ -2442,7 +2446,7 @@ function SelectChips({ tags, onTagRemove, chipHeightPx }) {
     "inline-flex items-center gap-xs shrink-0",
     "px-sm rounded-base",
     "bg-tag-neutral-bg text-tag-neutral-text",
-    "text-xs font-medium leading-xs",
+    "text-xs font-semibold leading-xs",
     "whitespace-nowrap"
   );
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-1 items-center gap-xs min-w-0 overflow-hidden relative", children: [
@@ -2692,7 +2696,7 @@ var TabTrigger = React20.forwardRef(({ className, badge, children, ...props }, r
             "span",
             {
               className: cn(
-                "text-sm font-medium leading-sm whitespace-nowrap",
+                "text-sm font-semibold leading-sm whitespace-nowrap",
                 "text-tab-item-default-text",
                 "group-data-[state=active]:text-tab-item-active-text"
               ),
@@ -2726,7 +2730,7 @@ var tagVariants = (0, import_class_variance_authority12.cva)(
     "inline-flex items-center",
     "gap-xs",
     "rounded-base",
-    "font-medium",
+    "font-semibold",
     "whitespace-nowrap"
   ],
   {
@@ -2831,7 +2835,7 @@ var fieldStates = {
 };
 var errorGuidance2 = {
   icon: "shrink-0 text-textarea-error-icon",
-  text: "text-xs font-medium leading-xs text-textarea-error-text"
+  text: "text-xs font-semibold leading-xs text-textarea-error-text"
 };
 var charLimitStyle = "shrink-0 text-right text-xs font-regular leading-xs text-textarea-char-limit";
 function resolveState(error, success, disabled) {
@@ -2958,7 +2962,7 @@ var attachedButtonStyles = {
 };
 var errorGuidance3 = {
   icon: "shrink-0 text-text-input-error-icon",
-  text: "text-xs font-medium leading-xs text-text-input-error-text"
+  text: "text-xs font-semibold leading-xs text-text-input-error-text"
 };
 function resolveState2(error, success, disabled) {
   if (disabled) return "disabled";
@@ -3122,12 +3126,12 @@ var chipStyle = [
   "inline-flex items-center gap-xs shrink-0",
   "h-6 px-sm rounded-base",
   "bg-tag-neutral-bg text-tag-neutral-text",
-  "text-xs font-medium leading-xs",
+  "text-xs font-semibold leading-xs",
   "whitespace-nowrap"
 ];
 var errorGuidance4 = {
   icon: "shrink-0 text-text-input-error-icon",
-  text: "text-xs font-medium leading-xs text-text-input-error-text"
+  text: "text-xs font-semibold leading-xs text-text-input-error-text"
 };
 var ChipInput = React24.forwardRef(
   ({
@@ -3317,7 +3321,7 @@ var wrapperStates3 = {
 };
 var errorGuidance5 = {
   icon: "shrink-0 text-text-input-error-icon",
-  text: "text-xs font-medium leading-xs text-text-input-error-text"
+  text: "text-xs font-semibold leading-xs text-text-input-error-text"
 };
 var NumberInput = React25.forwardRef(
   ({
@@ -3498,7 +3502,7 @@ var typographyVariants = (0, import_class_variance_authority16.cva)("", {
     },
     weight: {
       regular: "font-regular",
-      medium: "font-medium",
+      semibold: "font-semibold",
       bold: "font-bold"
     }
   },
@@ -3564,7 +3568,7 @@ var UserMenuInfoRow = React27.forwardRef(
       children: [
         avatar,
         /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-1 flex-col min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-sm font-medium leading-sm text-user-menu-name truncate", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-sm font-semibold leading-sm text-user-menu-name truncate", children: name }),
           subtitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs font-regular leading-xs text-user-menu-subtitle truncate", children: subtitle })
         ] }),
         action
@@ -3673,7 +3677,7 @@ var ModalTitle = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE
   DialogPrimitive.Title,
   {
     ref,
-    className: cn("text-base font-medium leading-base text-modal-header-title", className),
+    className: cn("text-base font-semibold leading-base text-modal-header-title", className),
     ...props
   }
 ));
@@ -3835,7 +3839,7 @@ var EmptyState = React30.forwardRef(
               "p",
               {
                 className: cn(
-                  "font-medium text-table-cell-text-primary",
+                  "font-semibold text-table-cell-text-primary",
                   isMd ? "text-base leading-base" : "text-sm leading-sm"
                 ),
                 children: title
@@ -3904,7 +3908,7 @@ var AvatarCell = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("flex items-center gap-md", className), children: [
   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Avatar, { initials: getInitials(name), src, alt: name, size: "lg", shape: "rounded" }),
   /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-sm font-medium text-table-cell-text-primary leading-sm", children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-sm font-semibold text-table-cell-text-primary leading-sm", children: name }),
     subtitle && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-xs font-regular text-table-cell-text-secondary leading-xs", children: subtitle })
   ] })
 ] });
@@ -3942,7 +3946,7 @@ var NumberCell = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-sm font-medium text-table-cell-text-primary", children: formatted }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-sm font-semibold text-table-cell-text-primary", children: formatted }),
         secondaryStat && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "span",
           {
@@ -4010,7 +4014,7 @@ var TextCell = ({
   {
     className: cn(
       "text-sm",
-      secondary ? "font-regular text-table-cell-text-secondary" : "font-medium text-table-cell-text-primary",
+      secondary ? "font-regular text-table-cell-text-secondary" : "font-semibold text-table-cell-text-primary",
       className
     ),
     children: value
@@ -4059,7 +4063,7 @@ var EditableCell = ({
       {
         ref: inputRef,
         className: cn(
-          "w-full bg-transparent text-sm font-medium text-table-cell-text-primary",
+          "w-full bg-transparent text-sm font-semibold text-table-cell-text-primary",
           "outline-none border-b border-table-border py-0 h-[20px]",
           className
         ),
@@ -4076,7 +4080,7 @@ var EditableCell = ({
       role: "button",
       tabIndex: 0,
       className: cn(
-        "text-sm font-medium text-table-cell-text-primary cursor-text leading-sm h-[20px] inline-block",
+        "text-sm font-semibold text-table-cell-text-primary cursor-text leading-sm h-[20px] inline-block",
         className
       ),
       onDoubleClick: () => setIsEditing(true),
@@ -4142,7 +4146,7 @@ var TableFooter = React32.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "border-t border-table-border bg-table-bg font-medium",
+      "border-t border-table-border bg-table-bg font-semibold",
       className
     ),
     ...props
@@ -4168,7 +4172,7 @@ var TableHead = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "group/head h-10 px-md py-md text-left align-middle text-xs font-medium leading-xs",
+      "group/head h-10 px-md py-md text-left align-middle text-xs font-semibold leading-xs",
       "text-table-head-text bg-table-head-bg-default",
       "hover:bg-table-head-bg-hover",
       "border-b border-r border-table-border last:border-r-0",
@@ -4184,7 +4188,7 @@ var TableCell = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "px-md py-md align-middle text-sm font-medium max-h-[52px]",
+      "px-md py-md align-middle text-sm font-semibold max-h-[52px]",
       "text-table-cell-text-primary",
       "border-b border-r border-table-border last:border-r-0",
       "[&:has([role=checkbox])]:pr-0",
@@ -4283,7 +4287,7 @@ function ColumnFilterPopover({
         ),
         onClick: (e) => e.stopPropagation(),
         children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xs font-medium text-table-head-text", children: "Filter" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xs font-semibold text-table-head-text", children: "Filter" }),
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "select",
             {
@@ -5017,13 +5021,13 @@ var FilterChipSegment = React35.forwardRef(
             "span",
             {
               className: cn(
-                "text-sm font-medium leading-sm whitespace-nowrap",
+                "text-sm font-semibold 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_runtime35.jsx)("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
+          badgeCount != null && badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex items-center gap-2xs p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: badgeCount }) }),
           children
         ]
       }
@@ -5274,7 +5278,7 @@ var SortButton = ({
               className: "shrink-0 text-[var(--color-foreground)]"
             }
           ),
-          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap", children: [
+          !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap", children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "text-[var(--color-muted-foreground)]", children: [
               "Sort by",
               " "
@@ -5433,7 +5437,7 @@ var FilterBarButton = React39.forwardRef(({ className, count, iconOnly = false,
     ref,
     type: "button",
     className: cn(
-      "flex items-center gap-sm",
+      "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",
@@ -5452,8 +5456,8 @@ var FilterBarButton = React39.forwardRef(({ className, count, iconOnly = false,
           className: "shrink-0 text-[var(--color-foreground)]"
         }
       ),
-      !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
-      count != null && count > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+      !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: children ?? "Filters" }),
+      count != null && count > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
     ]
   }
 ));
@@ -5466,7 +5470,7 @@ var import_jsx_runtime40 = require("react/jsx-runtime");
 var SaveViewButton = React40.forwardRef(
   ({ className, label = "Save view", onSave, onDropdown, ...props }, ref) => {
     const sharedStyle = [
-      "flex items-center justify-center",
+      "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)]",
@@ -5491,7 +5495,7 @@ var SaveViewButton = React40.forwardRef(
                 "rounded-l-md -mr-px"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsx)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-btn-solid-brand-text-default)]", children: label }),
                 /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "absolute inset-0 rounded-l-[11px] border border-[var(--color-btn-solid-brand-inner-border-default)] shadow-sm pointer-events-none" })
               ]
             }
@@ -5569,7 +5573,7 @@ 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-[var(--color-foreground)] font-semibold" : "text-[var(--color-dropdown-item-text)]"
                   ),
                   children: op
                 }
@@ -5605,7 +5609,7 @@ var OperatorList = ({
         {
           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-[var(--color-foreground)] font-semibold" : "text-[var(--color-dropdown-item-text)]"
           ),
           children: op
         }
@@ -5616,311 +5620,344 @@ var OperatorList = ({
 };
 OperatorList.displayName = "OperatorList";
 
-// src/components/ui/filter/value-input.tsx
+// 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"
+].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)]"
+].join(" ");
+var applyBtnClasses = "self-end px-md py-sm text-sm font-semibold 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_runtime42 = require("react/jsx-runtime");
+var TextValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") onSubmit?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "input",
+      {
+        type: "text",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: "Enter value...",
+        autoFocus: true,
+        className: inputClasses
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+TextValueInput.displayName = "TextValueInput";
+
+// src/components/ui/filter/value-inputs/number-value-input.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var NumberValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  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: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      "input",
+      {
+        type: "number",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value ? Number(e.target.value) : null),
+        onKeyDown: handleKeyDown,
+        placeholder: "Enter number...",
+        autoFocus: true,
+        className: inputClasses
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+NumberValueInput.displayName = "NumberValueInput";
+var NumberRangeValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const rangeVal = value ?? [0, 0];
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-base", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "input",
+        {
+          type: "number",
+          value: rangeVal[0] ?? "",
+          onChange: (e) => onChange([Number(e.target.value), rangeVal[1]]),
+          placeholder: "Min",
+          autoFocus: true,
+          className: halfInputClasses
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "and" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        "input",
+        {
+          type: "number",
+          value: rangeVal[1] ?? "",
+          onChange: (e) => onChange([rangeVal[0], Number(e.target.value)]),
+          placeholder: "Max",
+          className: halfInputClasses
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+NumberRangeValueInput.displayName = "NumberRangeValueInput";
+
+// src/components/ui/filter/value-inputs/date-value-input.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var RELATIVE_DATE_PRESETS = [
   { group: "Past", options: ["Today", "Yesterday", "Last 7 days", "Last 14 days", "Last 30 days", "Last 90 days"] },
   { group: "Current", options: ["This week", "This month", "This quarter", "This year"] },
   { group: "Future", options: ["Tomorrow", "Next 7 days", "Next 14 days", "Next 30 days", "Next week", "Next month", "Next quarter"] }
 ];
-var ValueInput = ({
-  dataType,
-  operator,
+var DatePickerValueInput = ({
   value,
   onChange,
   onSubmit,
-  options = [],
   className
-}) => {
-  const inputType = getValueInputType(dataType, operator);
-  if (!inputType) return null;
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") onSubmit?.();
-  };
-  switch (inputType) {
-    case "TextInput":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "input",
-          {
-            type: "text",
-            value: value ?? "",
-            onChange: (e) => onChange(e.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: "Enter value...",
-            autoFocus: true,
-            className: cn(
-              "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"
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "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",
-            children: "Apply"
-          }
-        )
-      ] });
-    case "NumberInput":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "input",
-          {
-            type: "number",
-            value: value ?? "",
-            onChange: (e) => onChange(e.target.value ? Number(e.target.value) : null),
-            onKeyDown: handleKeyDown,
-            placeholder: "Enter number...",
-            autoFocus: true,
-            className: cn(
-              "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"
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "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",
-            children: "Apply"
-          }
-        )
-      ] });
-    case "NumberRange": {
-      const rangeVal = value ?? [0, 0];
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-base", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            "input",
-            {
-              type: "number",
-              value: rangeVal[0] ?? "",
-              onChange: (e) => onChange([Number(e.target.value), rangeVal[1]]),
-              placeholder: "Min",
-              autoFocus: true,
-              className: cn(
-                "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)]"
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "and" }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            "input",
-            {
-              type: "number",
-              value: rangeVal[1] ?? "",
-              onChange: (e) => onChange([rangeVal[0], Number(e.target.value)]),
-              placeholder: "Max",
-              className: cn(
-                "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)]"
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "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",
-            children: "Apply"
-          }
-        )
-      ] });
+}) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "input",
+    {
+      type: "date",
+      value: value instanceof Date ? value.toISOString().split("T")[0] : value ?? "",
+      onChange: (e) => onChange(e.target.value ? new Date(e.target.value) : null),
+      autoFocus: true,
+      className: inputClasses
     }
-    case "PresetTags":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42.jsxs)("div", { className: "flex flex-col gap-xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onChange(preset);
-              onSubmit?.();
-            },
-            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)]"
-            ),
-            children: preset
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+] });
+DatePickerValueInput.displayName = "DatePickerValueInput";
+function toDateString(d) {
+  if (!d) return "";
+  if (d instanceof Date) return d.toISOString().split("T")[0];
+  return String(d);
+}
+var DateRangeValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const rangeVal = Array.isArray(value) ? value : [null, null];
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-base", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        "input",
+        {
+          type: "date",
+          value: toDateString(rangeVal[0]),
+          onChange: (e) => {
+            const from = e.target.value ? new Date(e.target.value) : null;
+            onChange([from, rangeVal[1]]);
           },
-          preset
-        )) })
-      ] }, group.group)) });
-    case "SingleSelect":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cn("flex flex-col gap-xs p-base max-h-[250px] overflow-y-auto", className), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          autoFocus: true,
+          className: halfInputClasses
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "to" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        "input",
+        {
+          type: "date",
+          value: toDateString(rangeVal[1]),
+          onChange: (e) => {
+            const to = e.target.value ? new Date(e.target.value) : null;
+            onChange([rangeVal[0], to]);
+          },
+          className: halfInputClasses
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+DateRangeValueInput.displayName = "DateRangeValueInput";
+var PresetTagsValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] uppercase px-xs", children: group.group }),
+  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-wrap gap-xs", children: group.options.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        onChange(preset);
+        onSubmit?.();
+      },
+      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)]"
+      ),
+      children: preset
+    },
+    preset
+  )) })
+] }, group.group)) });
+PresetTagsValueInput.displayName = "PresetTagsValueInput";
+
+// src/components/ui/filter/value-inputs/select-value-input.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var SingleSelectValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  options,
+  className
+}) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cn("flex flex-col gap-xs p-base max-h-[250px] overflow-y-auto", className), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  "button",
+  {
+    type: "button",
+    onClick: () => {
+      onChange(opt);
+      onSubmit?.();
+    },
+    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)]"
+    ),
+    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+  },
+  opt
+)) });
+SingleSelectValueInput.displayName = "SingleSelectValueInput";
+var MultiSelectValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  options,
+  className
+}) => {
+  const selected = Array.isArray(value) ? value : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", children: options.map((opt) => {
+      const isSelected = selected.includes(opt);
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         "button",
         {
           type: "button",
           onClick: () => {
-            onChange(opt);
-            onSubmit?.();
+            const next = isSelected ? selected.filter((s) => s !== opt) : [...selected, opt];
+            onChange(next);
           },
           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-[var(--color-dropdown-item-hover)]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              "span",
+              {
+                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)]"
+                ),
+                children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { d: "M2 5L4 7L8 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
+          ]
         },
         opt
-      )) });
-    case "MultiSelect": {
-      const selected = Array.isArray(value) ? value : [];
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col gap-xs p-base", className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col max-h-[200px] overflow-y-auto", children: options.map((opt) => {
-          const isSelected = selected.includes(opt);
-          return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                const next = isSelected ? selected.filter((s) => s !== opt) : [...selected, opt];
-                onChange(next);
-              },
-              className: cn(
-                "flex items-center gap-base p-base rounded-base cursor-pointer transition-colors text-left",
-                "hover:bg-[var(--color-dropdown-item-hover)]"
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                  "span",
-                  {
-                    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)]"
-                    ),
-                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M2 5L4 7L8 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)]", children: opt })
-              ]
-            },
-            opt
-          );
-        }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "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",
-            children: "Apply"
-          }
-        )
-      ] });
-    }
-    // DatePicker, DateRange, RelationPicker, MultiRelationPicker
-    // Stub as text inputs for now — will wire to actual DatePicker/relation components
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+MultiSelectValueInput.displayName = "MultiSelectValueInput";
+
+// src/components/ui/filter/value-inputs/relation-value-input.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var RelationValueInput = ({
+  value,
+  onChange,
+  onSubmit,
+  className
+}) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") onSubmit?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "input",
+      {
+        type: "text",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder: "Search...",
+        autoFocus: true,
+        className: inputClasses
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", onClick: onSubmit, className: applyBtnClasses, children: "Apply" })
+  ] });
+};
+RelationValueInput.displayName = "RelationValueInput";
+
+// src/components/ui/filter/value-input.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var ValueInput = ({
+  dataType,
+  operator,
+  value,
+  onChange,
+  onSubmit,
+  options = [],
+  className
+}) => {
+  const inputType = getValueInputType(dataType, operator);
+  if (!inputType) return null;
+  switch (inputType) {
+    case "TextInput":
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TextValueInput, { value, onChange, onSubmit, className });
+    case "NumberInput":
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NumberValueInput, { value, onChange, onSubmit, className });
+    case "NumberRange":
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(NumberRangeValueInput, { value, onChange, onSubmit, className });
+    case "PresetTags":
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PresetTagsValueInput, { value, onChange, onSubmit, className });
+    case "SingleSelect":
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SingleSelectValueInput, { value, onChange, onSubmit, options, className });
+    case "MultiSelect":
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MultiSelectValueInput, { value, onChange, onSubmit, options, className });
     case "DatePicker":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "input",
-          {
-            type: "date",
-            value: value instanceof Date ? value.toISOString().split("T")[0] : value ?? "",
-            onChange: (e) => onChange(e.target.value ? new Date(e.target.value) : null),
-            autoFocus: true,
-            className: cn(
-              "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)]",
-              "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]"
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "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",
-            children: "Apply"
-          }
-        )
-      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DatePickerValueInput, { value, onChange, onSubmit, className });
     case "DateRange":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-base", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            "input",
-            {
-              type: "date",
-              autoFocus: true,
-              className: cn(
-                "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)]"
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-sm text-[var(--color-muted-foreground)]", children: "to" }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            "input",
-            {
-              type: "date",
-              className: cn(
-                "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)]"
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "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",
-            children: "Apply"
-          }
-        )
-      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DateRangeValueInput, { value, onChange, onSubmit, className });
     case "RelationPicker":
     case "MultiRelationPicker":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col gap-base p-base", className), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "input",
-          {
-            type: "text",
-            value: value ?? "",
-            onChange: (e) => onChange(e.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: "Search...",
-            autoFocus: true,
-            className: cn(
-              "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)]"
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: onSubmit,
-            className: "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",
-            children: "Apply"
-          }
-        )
-      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RelationValueInput, { value, onChange, onSubmit, className });
     default:
       return null;
   }
@@ -5931,14 +5968,50 @@ ValueInput.displayName = "ValueInput";
 var React41 = __toESM(require("react"));
 var PopoverPrimitive5 = __toESM(require("@radix-ui/react-popover"));
 var import_icons27 = require("@l3mpire/icons");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var AdvancedFilterFooter = ({ onClick, count }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "h-px bg-[var(--color-dropdown-border)] mx-xs" }),
+  /* @__PURE__ */ (0, import_jsx_runtime48.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)]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          import_icons27.Icon,
+          {
+            icon: import_icons27.faFilterOutline,
+            size: "sm",
+            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsxs)("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: [
+          count,
+          " ",
+          count === 1 ? "rule" : "rules"
+        ] })
+      ]
+    }
+  )
+] });
 var PropertySelector = ({
   properties,
   onSelect,
   open,
   onOpenChange,
-  children
+  children,
+  onAdvancedFilter,
+  advancedFilterCount = 0
 }) => {
+  const handleAdvancedClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onAdvancedFilter?.();
+  };
+  const showAdvancedFooter = !!onAdvancedFilter;
   const [activeGroup, setActiveGroup] = React41.useState(null);
   const [search, setSearch] = React41.useState("");
   React41.useEffect(() => {
@@ -5964,6 +6037,20 @@ var PropertySelector = ({
     }
     return Array.from(map.values());
   }, [properties]);
+  const globalSearchResults = React41.useMemo(() => {
+    if (!search || activeGroup) return [];
+    const lower = search.toLowerCase();
+    return properties.filter((p) => p.label.toLowerCase().includes(lower));
+  }, [properties, search, activeGroup]);
+  const filteredGroups = React41.useMemo(() => {
+    if (!search || activeGroup) return groups;
+    const lower = search.toLowerCase();
+    return groups.filter(
+      (g) => g.groupLabel.toLowerCase().includes(lower) || properties.some(
+        (p) => p.group === g.group && p.label.toLowerCase().includes(lower)
+      )
+    );
+  }, [groups, properties, search, activeGroup]);
   const filteredProperties = React41.useMemo(() => {
     if (!activeGroup) return [];
     const groupProps = properties.filter((p) => p.group === activeGroup);
@@ -5972,13 +6059,15 @@ var PropertySelector = ({
     return groupProps.filter((p) => p.label.toLowerCase().includes(lower));
   }, [properties, activeGroup, search]);
   const activeGroupInfo = groups.find((g) => g.group === activeGroup);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PopoverPrimitive5.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverPrimitive5.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  const showGlobalResults = search.length > 0 && !activeGroup && globalSearchResults.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(PopoverPrimitive5.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive5.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       PopoverPrimitive5.Content,
       {
         sideOffset: 4,
         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",
@@ -5987,111 +6076,178 @@ var PropertySelector = ({
           "data-[side=bottom]:slide-in-from-top-2",
           "min-w-[230px]"
         ),
-        children: activeGroup === null ? (
-          /* ── Level 1: Categories ─────────────────────────────────── */
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-col", children: groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-            "button",
-            {
-              type: "button",
-              onClick: () => setActiveGroup(g.group),
-              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_runtime43.jsx)(
+        children: [
+          activeGroup === null ? (
+            /* ── Level 1: Search + Categories ───────────────────────── */
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   import_icons27.Icon,
                   {
-                    icon: g.groupIcon,
+                    icon: import_icons27.faMagnifyingGlassOutline,
                     size: "sm",
-                    className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                    className: "shrink-0 text-[var(--color-muted-foreground)]"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                  import_icons27.Icon,
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  "input",
                   {
-                    icon: import_icons27.faChevronRightOutline,
-                    size: "xs",
-                    className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                    type: "text",
+                    value: search,
+                    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)]"
                   }
                 )
-              ]
-            },
-            g.group
-          )) })
-        ) : (
-          /* ── Level 2: Properties ─────────────────────────────────── */
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col gap-xs", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setActiveGroup(null);
-                  setSearch("");
-                },
-                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_runtime43.jsx)(
-                    import_icons27.Icon,
+              ] }),
+              showGlobalResults ? (
+                /* ── Global search results (flat property list) ─────── */
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: globalSearchResults.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime48.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-[var(--color-dropdown-item-hover)]",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                        import_icons27.Icon,
+                        {
+                          icon: prop.icon,
+                          size: "sm",
+                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)("span", { className: "text-xs font-regular leading-xs text-[var(--color-muted-foreground)]", children: prop.groupLabel })
+                    ]
+                  },
+                  prop.id
+                )) })
+              ) : (
+                /* ── Group list ─────────────────────────────────────── */
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col", children: [
+                  filteredGroups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+                    "button",
                     {
-                      icon: import_icons27.faChevronLeftOutline,
-                      size: "sm",
-                      className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                import_icons27.Icon,
-                {
-                  icon: import_icons27.faMagnifyingGlassOutline,
-                  size: "sm",
-                  className: "shrink-0 text-[var(--color-muted-foreground)]"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                "input",
-                {
-                  type: "text",
-                  value: search,
-                  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)]"
-                }
+                      type: "button",
+                      onClick: () => {
+                        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)]",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                          import_icons27.Icon,
+                          {
+                            icon: g.groupIcon,
+                            size: "sm",
+                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: g.count }),
+                        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                          import_icons27.Icon,
+                          {
+                            icon: import_icons27.faChevronRightOutline,
+                            size: "xs",
+                            className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                          }
+                        )
+                      ]
+                    },
+                    g.group
+                  )),
+                  filteredGroups.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+                ] })
               )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
-              filteredProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            ] })
+          ) : (
+            /* ── Level 2: Properties ─────────────────────────────────── */
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
                 "button",
                 {
                   type: "button",
                   onClick: () => {
-                    onSelect(prop);
-                    onOpenChange?.(false);
+                    setActiveGroup(null);
+                    setSearch("");
                   },
                   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_runtime43.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                       import_icons27.Icon,
                       {
-                        icon: prop.icon,
+                        icon: import_icons27.faChevronLeftOutline,
                         size: "sm",
                         className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime48.jsx)("span", { className: "flex-1 text-xs font-semibold leading-xs text-[var(--color-muted-foreground)] text-left truncate", children: activeGroupInfo?.groupLabel })
                   ]
-                },
-                prop.id
-              )),
-              filteredProperties.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-base px-md py-base border border-[var(--color-input)] rounded-md", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  import_icons27.Icon,
+                  {
+                    icon: import_icons27.faMagnifyingGlassOutline,
+                    size: "sm",
+                    className: "shrink-0 text-[var(--color-muted-foreground)]"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: search,
+                    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)]"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col max-h-[300px] overflow-y-auto", children: [
+                filteredProperties.map((prop) => /* @__PURE__ */ (0, import_jsx_runtime48.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-[var(--color-dropdown-item-hover)]",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                        import_icons27.Icon,
+                        {
+                          icon: prop.icon,
+                          size: "sm",
+                          className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] text-left truncate", children: prop.label })
+                    ]
+                  },
+                  prop.id
+                )),
+                filteredProperties.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "p-base text-sm text-[var(--color-muted-foreground)]", children: "No results" })
+              ] })
             ] })
-          ] })
-        )
+          ),
+          showAdvancedFooter && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            AdvancedFilterFooter,
+            {
+              onClick: handleAdvancedClick,
+              count: advancedFilterCount
+            }
+          )
+        ]
       }
     ) })
   ] });
@@ -6101,16 +6257,16 @@ PropertySelector.displayName = "PropertySelector";
 // src/components/ui/filter/kebab-menu.tsx
 var PopoverPrimitive6 = __toESM(require("@radix-ui/react-popover"));
 var import_icons28 = require("@l3mpire/icons");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var KebabMenu = ({
   onConvertToAdvanced,
   onDelete,
   open,
   onOpenChange,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(PopoverPrimitive6.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive6.Trigger, { asChild: true, children }),
-  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(PopoverPrimitive6.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive6.Trigger, { asChild: true, children }),
+  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     PopoverPrimitive6.Content,
     {
       sideOffset: 4,
@@ -6124,7 +6280,7 @@ var KebabMenu = ({
         "min-w-[210px]"
       ),
       children: [
-        onConvertToAdvanced && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        onConvertToAdvanced && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
           "button",
           {
             type: "button",
@@ -6134,7 +6290,7 @@ 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_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 import_icons28.Icon,
                 {
                   icon: import_icons28.faArrowRightOutline,
@@ -6142,12 +6298,12 @@ var KebabMenu = ({
                   className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)]", children: "Convert to advanced" })
             ]
           }
         ),
-        onConvertToAdvanced && onDelete && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
-        onDelete && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        onConvertToAdvanced && onDelete && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-px mx-base my-xs bg-[var(--color-border)]" }),
+        onDelete && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
           "button",
           {
             type: "button",
@@ -6157,7 +6313,7 @@ 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_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 import_icons28.Icon,
                 {
                   icon: import_icons28.faTrashOutline,
@@ -6165,7 +6321,7 @@ var KebabMenu = ({
                   className: "shrink-0 text-[var(--color-destructive)]"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-destructive)]", children: "Delete filter" })
             ]
           }
         )
@@ -6179,7 +6335,7 @@ KebabMenu.displayName = "KebabMenu";
 var React42 = __toESM(require("react"));
 var PopoverPrimitive7 = __toESM(require("@radix-ui/react-popover"));
 var import_icons29 = require("@l3mpire/icons");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var FilterEditor = ({
   propertyDef,
   condition,
@@ -6224,9 +6380,9 @@ var FilterEditor = ({
     onOpenChange?.(false);
     onClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(PopoverPrimitive7.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PopoverPrimitive7.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive7.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       PopoverPrimitive7.Content,
       {
         sideOffset: 4,
@@ -6240,8 +6396,8 @@ var FilterEditor = ({
           "min-w-[240px]"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsx)(
               import_icons29.Icon,
               {
                 icon: propertyDef.icon,
@@ -6249,8 +6405,8 @@ var FilterEditor = ({
                 className: "shrink-0 text-[var(--color-dropdown-item-icon)]"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-sm font-medium leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
-            localOperator && view === "value" && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: propertyDef.label }),
+            localOperator && view === "value" && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
               "button",
               {
                 type: "button",
@@ -6263,14 +6419,14 @@ var FilterEditor = ({
               }
             )
           ] }),
-          view === "operator" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          view === "operator" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             OperatorList,
             {
               dataType: propertyDef.type,
               activeOperator: localOperator,
               onSelect: handleOperatorSelect
             }
-          ) }) : localOperator && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          ) }) : localOperator && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             ValueInput,
             {
               dataType: propertyDef.type,
@@ -6291,7 +6447,7 @@ FilterEditor.displayName = "FilterEditor";
 // src/components/ui/filter/interactive-filter-chip.tsx
 var React43 = __toESM(require("react"));
 var PopoverPrimitive8 = __toESM(require("@radix-ui/react-popover"));
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function formatFilterValue(value) {
   if (value == null) return void 0;
   if (typeof value === "boolean") return value ? "Yes" : "No";
@@ -6324,9 +6480,9 @@ var SegmentPopover = ({
   children,
   align = "start",
   minWidth = "240px"
-}) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(PopoverPrimitive8.Root, { open, onOpenChange, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverPrimitive8.Trigger, { asChild: true, children: trigger }),
-  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PopoverPrimitive8.Root, { open, onOpenChange, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverPrimitive8.Trigger, { asChild: true, children: trigger }),
+  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PopoverPrimitive8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     PopoverPrimitive8.Content,
     {
       sideOffset: 4,
@@ -6359,12 +6515,20 @@ var InteractiveFilterChip = ({
   const [valueOpen, setValueOpen] = React43.useState(false);
   const [propertyOpen, setPropertyOpen] = React43.useState(false);
   const [kebabOpen, setKebabOpen] = React43.useState(false);
+  const [pendingValueOpen, setPendingValueOpen] = React43.useState(false);
+  const autoOpenHandled = React43.useRef(false);
   React43.useEffect(() => {
-    if (autoOpen && condition.operator && !isNoValueOperator(condition.operator)) {
-      const t = setTimeout(() => setValueOpen(true), 50);
-      return () => clearTimeout(t);
+    if (autoOpen && !autoOpenHandled.current && condition.operator && !isNoValueOperator(condition.operator)) {
+      autoOpenHandled.current = true;
+      setValueOpen(true);
     }
-  }, []);
+  }, [autoOpen, condition.operator]);
+  React43.useEffect(() => {
+    if (!operatorOpen && pendingValueOpen) {
+      setPendingValueOpen(false);
+      setValueOpen(true);
+    }
+  }, [operatorOpen, pendingValueOpen]);
   const handleOperatorSelect = (op) => {
     if (isNoValueOperator(op)) {
       onUpdate({ ...condition, operator: op, value: null });
@@ -6374,7 +6538,7 @@ var InteractiveFilterChip = ({
       onUpdate({ ...condition, operator: op, value: resetValue });
       setOperatorOpen(false);
       if (resetValue == null) {
-        setTimeout(() => setValueOpen(true), 100);
+        setPendingValueOpen(true);
       }
     }
   };
@@ -6388,7 +6552,7 @@ var InteractiveFilterChip = ({
   const displayValue = formatFilterValue(condition.value);
   const hasValue = hasOperator && displayValue != null;
   const badgeCount = getBadgeCount(condition.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
       className: cn(
@@ -6397,7 +6561,7 @@ var InteractiveFilterChip = ({
         className
       ),
       children: [
-        properties ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        properties ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           PropertySelector,
           {
             properties,
@@ -6407,7 +6571,7 @@ var InteractiveFilterChip = ({
             },
             open: propertyOpen,
             onOpenChange: setPropertyOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               FilterChipSegment,
               {
                 segmentType: "property",
@@ -6418,7 +6582,7 @@ var InteractiveFilterChip = ({
               }
             ) })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           FilterChipSegment,
           {
             segmentType: "property",
@@ -6427,13 +6591,13 @@ var InteractiveFilterChip = ({
             label: propertyDef.label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           SegmentPopover,
           {
             open: operatorOpen,
             onOpenChange: setOperatorOpen,
             minWidth: "180px",
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               FilterChipSegment,
               {
                 segmentType: hasOperator ? "operator" : "placeholder",
@@ -6442,7 +6606,7 @@ var InteractiveFilterChip = ({
                 onClick: () => setOperatorOpen(true)
               }
             ) }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "p-xs", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               OperatorList,
               {
                 dataType: propertyDef.type,
@@ -6452,13 +6616,13 @@ var InteractiveFilterChip = ({
             ) })
           }
         ),
-        hasOperator && condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        hasOperator && condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           SegmentPopover,
           {
             open: valueOpen,
             onOpenChange: setValueOpen,
             minWidth: "240px",
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               FilterChipSegment,
               {
                 segmentType: hasValue ? "value" : "placeholder",
@@ -6468,7 +6632,7 @@ var InteractiveFilterChip = ({
                 onClick: () => setValueOpen(true)
               }
             ) }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               ValueInput,
               {
                 dataType: propertyDef.type,
@@ -6481,7 +6645,7 @@ var InteractiveFilterChip = ({
             )
           }
         ),
-        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        hasOperator && condition.operator && isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           FilterChipSegment,
           {
             segmentType: "value",
@@ -6489,14 +6653,14 @@ var InteractiveFilterChip = ({
             label: condition.operator
           }
         ),
-        hasOperator && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        hasOperator && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           KebabMenu,
           {
             open: kebabOpen,
             onOpenChange: setKebabOpen,
             onConvertToAdvanced,
             onDelete,
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               FilterChipSegment,
               {
                 segmentType: "button",
@@ -6521,7 +6685,7 @@ var import_icons34 = require("@l3mpire/icons");
 // src/components/ui/filter/advanced-chip.tsx
 var React44 = __toESM(require("react"));
 var import_icons30 = require("@l3mpire/icons");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var btnBase = [
   "flex items-center justify-center",
   "min-h-[32px] max-h-[32px]",
@@ -6531,8 +6695,8 @@ var btnBase = [
   "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
 ];
 var AdvancedChip = React44.forwardRef(
-  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("inline-flex items-center", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  ({ className, count, onClear, onClick, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       "button",
       {
         ref,
@@ -6545,12 +6709,12 @@ var AdvancedChip = React44.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Advanced filters" }),
+          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
     ),
-    onClear && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    onClear && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "button",
       {
         type: "button",
@@ -6564,7 +6728,7 @@ var AdvancedChip = React44.forwardRef(
           "rounded-r-md -ml-px"
         ),
         "aria-label": "Clear all advanced filters",
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons30.Icon, { icon: import_icons30.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons30.Icon, { icon: import_icons30.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" })
       }
     )
   ] })
@@ -6580,7 +6744,7 @@ var import_icons32 = require("@l3mpire/icons");
 var React45 = __toESM(require("react"));
 var PopoverPrimitive9 = __toESM(require("@radix-ui/react-popover"));
 var import_icons31 = require("@l3mpire/icons");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var selectBtnStyle = [
   "flex items-center gap-base",
   "px-base py-sm",
@@ -6614,8 +6778,8 @@ var AdvancedRow = ({
     onUpdate({ ...condition, value: val });
   };
   const displayValue = condition.value == null ? "" : typeof condition.value === "string" ? condition.value : String(condition.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
-    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs font-medium leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+    connector === "Where" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
       "button",
       {
         type: "button",
@@ -6625,26 +6789,26 @@ var AdvancedRow = ({
           "min-w-[64px] min-h-[24px] max-h-[24px] p-xs",
           "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-base shadow-sm",
-          "cursor-pointer transition-colors text-xs font-medium leading-xs text-[var(--color-foreground)]",
+          "cursor-pointer transition-colors text-xs font-semibold leading-xs text-[var(--color-foreground)]",
           "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
         ),
         children: [
           connector,
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons31.Icon, { icon: import_icons31.faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: import_icons31.faRefreshOutline, size: "xs", className: "text-[var(--color-foreground)]" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(PopoverPrimitive9.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons31.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(PopoverPrimitive9.Root, { open: propertyOpen, onOpenChange: setPropertyOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: propertyDef.icon, size: "sm", className: "shrink-0 text-[var(--color-muted-foreground)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "text-sm font-regular leading-sm text-[var(--color-foreground)] whitespace-nowrap truncate", children: [
           propertyDef.groupLabel,
           " > ",
           propertyDef.label
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons31.Icon, { icon: import_icons31.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: import_icons31.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         PopoverPrimitive9.Content,
         {
           sideOffset: 4,
@@ -6656,7 +6820,7 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[200px]"
           ),
-          children: properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          children: properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
             "button",
             {
               type: "button",
@@ -6670,8 +6834,8 @@ var AdvancedRow = ({
                 p.id === condition.propertyId && "bg-[var(--color-dropdown-item-hover)]"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons31.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: p.icon, size: "sm", className: "shrink-0 text-[var(--color-dropdown-item-icon)]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-dropdown-item-text)] truncate", children: p.label })
               ]
             },
             p.id
@@ -6679,12 +6843,12 @@ var AdvancedRow = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(PopoverPrimitive9.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)(import_icons31.Icon, { icon: import_icons31.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(PopoverPrimitive9.Root, { open: operatorOpen, onOpenChange: setOperatorOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive9.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("button", { type: "button", className: cn(selectBtnStyle, "min-w-0"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(import_icons31.Icon, { icon: import_icons31.faChevronDownOutline, size: "xs", className: "shrink-0 text-[var(--color-foreground)]" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(PopoverPrimitive9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         PopoverPrimitive9.Content,
         {
           sideOffset: 4,
@@ -6696,7 +6860,7 @@ var AdvancedRow = ({
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             "min-w-[160px]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             OperatorList,
             {
               dataType: propertyDef.type,
@@ -6707,7 +6871,7 @@ var AdvancedRow = ({
         }
       ) })
     ] }),
-    condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    condition.operator && !isNoValueOperator(condition.operator) && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "input",
       {
         type: "text",
@@ -6723,14 +6887,14 @@ var AdvancedRow = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "button",
       {
         type: "button",
         onClick: onDelete,
         className: "ml-auto shrink-0 flex items-center justify-center p-sm rounded-md cursor-pointer transition-colors hover:bg-[var(--color-accent)]",
         "aria-label": "Remove filter",
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons31.Icon, { icon: import_icons31.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_icons31.Icon, { icon: import_icons31.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" })
       }
     )
   ] });
@@ -6738,13 +6902,13 @@ var AdvancedRow = ({
 AdvancedRow.displayName = "AdvancedRow";
 
 // src/components/ui/filter/advanced-popover.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var outlinedBtn = [
   "flex items-center gap-sm px-base py-sm",
   "min-h-[32px] max-h-[32px] min-w-[80px]",
   "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",
-  "cursor-pointer transition-colors text-sm font-medium leading-sm text-[var(--color-foreground)]",
+  "cursor-pointer transition-colors text-sm font-semibold leading-sm text-[var(--color-foreground)]",
   "hover:from-[var(--color-btn-outlined-neutral-bg-hover)] hover:to-[var(--color-btn-outlined-neutral-bg-gradient-to-hover)]"
 ];
 var AdvancedPopover = ({
@@ -6756,7 +6920,7 @@ var AdvancedPopover = ({
   children
 }) => {
   const [addSelectorOpen, setAddSelectorOpen] = React46.useState(false);
-  const [logicOps, setLogicOps] = React46.useState({});
+  const [draftPickerOpen, setDraftPickerOpen] = React46.useState(false);
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const handleUpdateFilter = (updated) => {
     onFiltersChange(filters.map((f) => f.id === updated.id ? updated : f));
@@ -6780,19 +6944,21 @@ var AdvancedPopover = ({
     onOpenChange?.(false);
   };
   const toggleLogicOp = (filterId) => {
-    setLogicOps((prev) => ({
-      ...prev,
-      [filterId]: (prev[filterId] ?? "and") === "and" ? "or" : "and"
-    }));
+    onFiltersChange(
+      filters.map(
+        (f) => f.id === filterId ? { ...f, logicOperator: (f.logicOperator ?? "and") === "and" ? "or" : "and" } : f
+      )
+    );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(PopoverPrimitive10.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive10.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(PopoverPrimitive10.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive10.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(PopoverPrimitive10.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       PopoverPrimitive10.Content,
       {
         sideOffset: 4,
         align: "start",
         collisionPadding: 16,
+        onOpenAutoFocus: (e) => e.preventDefault(),
         className: cn(
           "z-50 flex flex-col",
           "bg-[var(--color-background)] rounded-md shadow-lg",
@@ -6802,14 +6968,14 @@ var AdvancedPopover = ({
           "w-[min(520px,calc(100vw-32px))]"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-base p-base", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col gap-base p-base", children: [
             filters.map((filter, i) => {
               const propDef = getPropertyDef(filter.propertyId);
               if (!propDef) return null;
-              return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
                 AdvancedRow,
                 {
-                  connector: i === 0 ? "Where" : (logicOps[filter.id] ?? "and") === "and" ? "And" : "Or",
+                  connector: i === 0 ? "Where" : (filter.logicOperator ?? "and") === "and" ? "And" : "Or",
                   onConnectorToggle: i > 0 ? () => toggleLogicOp(filter.id) : void 0,
                   propertyDef: propDef,
                   condition: filter,
@@ -6821,28 +6987,64 @@ var AdvancedPopover = ({
                 filter.id
               );
             }),
-            filters.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "py-base text-sm text-[var(--color-muted-foreground)]", children: "No advanced filters yet." })
+            filters.length === 0 && /* ── Draft row: inline "Select property" placeholder ──── */
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                PropertySelector,
+                {
+                  properties,
+                  onSelect: handleAddFilter,
+                  open: draftPickerOpen,
+                  onOpenChange: setDraftPickerOpen,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+                    "button",
+                    {
+                      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)]"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                          import_icons32.Icon,
+                          {
+                            icon: import_icons32.faChevronDownOutline,
+                            size: "xs",
+                            className: "shrink-0 text-[var(--color-foreground)]"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               PropertySelector,
               {
                 properties,
                 onSelect: handleAddFilter,
                 open: addSelectorOpen,
                 onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("button", { type: "button", className: cn(outlinedBtn), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons32.Icon, { icon: import_icons32.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("button", { type: "button", className: cn(outlinedBtn), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_icons32.Icon, { icon: import_icons32.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
                   "Add filter"
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               "button",
               {
                 type: "button",
                 onClick: handleClearAll,
-                className: "text-sm font-medium leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
+                className: "text-sm font-semibold leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
                 children: "Clear all filters"
               }
             )
@@ -6858,18 +7060,27 @@ AdvancedPopover.displayName = "AdvancedPopover";
 var React47 = __toESM(require("react"));
 var PopoverPrimitive11 = __toESM(require("@radix-ui/react-popover"));
 var import_icons33 = require("@l3mpire/icons");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var SummaryChip = ({
   count,
   filters,
   properties,
   onFiltersChange,
   onClearAll,
-  className
+  children,
+  className,
+  open: openProp,
+  onOpenChange
 }) => {
-  const [open, setOpen] = React47.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React47.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const setOpen = (v) => {
+    if (!isControlled) setUncontrolledOpen(v);
+    onOpenChange?.(v);
+  };
   const [addSelectorOpen, setAddSelectorOpen] = React47.useState(false);
-  const [logicOps, setLogicOps] = React47.useState({});
+  const [draftPickerOpen, setDraftPickerOpen] = React47.useState(false);
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const handleUpdateFilter = (updated) => {
     onFiltersChange(filters.map((f) => f.id === updated.id ? updated : f));
@@ -6890,8 +7101,15 @@ var SummaryChip = ({
     onFiltersChange([...filters, newFilter]);
     setAddSelectorOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(PopoverPrimitive11.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  const toggleLogicOp = (filterId) => {
+    onFiltersChange(
+      filters.map(
+        (f) => f.id === filterId ? { ...f, logicOperator: (f.logicOperator ?? "and") === "and" ? "or" : "and" } : f
+      )
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(PopoverPrimitive11.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverPrimitive11.Trigger, { asChild: true, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "button",
       {
         type: "button",
@@ -6905,7 +7123,7 @@ var SummaryChip = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             import_icons33.Icon,
             {
               icon: import_icons33.faSlidersOutline,
@@ -6913,17 +7131,18 @@ var SummaryChip = ({
               className: "shrink-0 text-[var(--color-foreground)]"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-medium leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
-          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-[10px] font-medium leading-2xs text-filter-chip-badge-text", children: count }) })
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-sm font-semibold leading-sm whitespace-nowrap text-[var(--color-foreground)]", children: "Filters" }),
+          count > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "flex items-center p-2xs rounded-xs bg-filter-chip-badge-bg", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-[10px] font-semibold leading-2xs text-filter-chip-badge-text", children: count }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PopoverPrimitive11.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       PopoverPrimitive11.Content,
       {
         sideOffset: 4,
         align: "start",
         collisionPadding: 16,
+        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",
@@ -6933,15 +7152,15 @@ var SummaryChip = ({
           "w-[min(520px,calc(100vw-32px))]"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-base p-base", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-col gap-base p-base", children: [
             filters.map((filter, i) => {
               const propDef = getPropertyDef(filter.propertyId);
               if (!propDef) return null;
-              return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 AdvancedRow,
                 {
-                  connector: i === 0 ? "Where" : (logicOps[filter.id] ?? "and") === "and" ? "And" : "Or",
-                  onConnectorToggle: i > 0 ? () => setLogicOps((prev) => ({ ...prev, [filter.id]: (prev[filter.id] ?? "and") === "and" ? "or" : "and" })) : void 0,
+                  connector: i === 0 ? "Where" : (filter.logicOperator ?? "and") === "and" ? "And" : "Or",
+                  onConnectorToggle: i > 0 ? () => toggleLogicOp(filter.id) : void 0,
                   propertyDef: propDef,
                   condition: filter,
                   properties,
@@ -6952,17 +7171,53 @@ var SummaryChip = ({
                 filter.id
               );
             }),
-            filters.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "py-base text-sm text-[var(--color-muted-foreground)]", children: "No active filters." })
+            filters.length === 0 && /* ── Draft row: inline "Select property" placeholder ──── */
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-base w-full min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "shrink-0 w-[64px] flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-xs font-semibold leading-xs text-[var(--color-muted-foreground)]", children: "Where" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                PropertySelector,
+                {
+                  properties,
+                  onSelect: handleAddFilter,
+                  open: draftPickerOpen,
+                  onOpenChange: setDraftPickerOpen,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+                    "button",
+                    {
+                      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)]"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-sm font-regular leading-sm text-[var(--color-muted-foreground)] whitespace-nowrap", children: "Select property" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                          import_icons33.Icon,
+                          {
+                            icon: import_icons33.faChevronDownOutline,
+                            size: "xs",
+                            className: "shrink-0 text-[var(--color-foreground)]"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between p-base border-t border-[var(--color-border)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
               PropertySelector,
               {
                 properties,
                 onSelect: handleAddFilter,
                 open: addSelectorOpen,
                 onOpenChange: setAddSelectorOpen,
-                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -6971,18 +7226,18 @@ var SummaryChip = ({
                       "min-h-[32px] max-h-[32px] min-w-[80px]",
                       "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",
-                      "cursor-pointer transition-colors text-sm font-medium leading-sm text-[var(--color-foreground)]",
+                      "cursor-pointer transition-colors text-sm font-semibold leading-sm text-[var(--color-foreground)]",
                       "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_runtime50.jsx)(import_icons33.Icon, { icon: import_icons33.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_icons33.Icon, { icon: import_icons33.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" }),
                       "Add filter"
                     ]
                   }
                 )
               }
             ),
-            filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            filters.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
               "button",
               {
                 type: "button",
@@ -6990,7 +7245,7 @@ var SummaryChip = ({
                   onClearAll();
                   setOpen(false);
                 },
-                className: "text-sm font-medium leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
+                className: "text-sm font-semibold leading-sm text-[var(--color-foreground)] cursor-pointer transition-colors hover:opacity-70 px-base py-sm",
                 children: "Clear all filters"
               }
             )
@@ -7004,7 +7259,8 @@ SummaryChip.displayName = "SummaryChip";
 
 // src/components/ui/filter/use-filter-bar-mode.ts
 var React48 = __toESM(require("react"));
-function useFilterBarMode(ref, override) {
+var DEFAULT_BREAKPOINT = 600;
+function useFilterBarMode(ref, override, breakpoint = DEFAULT_BREAKPOINT) {
   const [mode, setMode] = React48.useState("default");
   React48.useEffect(() => {
     if (override) return;
@@ -7012,30 +7268,32 @@ function useFilterBarMode(ref, override) {
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
       const width = entries[0]?.contentRect.width ?? 0;
-      setMode(width > 600 ? "default" : "minimal");
+      setMode(width > breakpoint ? "default" : "minimal");
     });
     observer.observe(el);
     return () => observer.disconnect();
-  }, [ref, override]);
+  }, [ref, override, breakpoint]);
   return override ?? mode;
 }
 
 // src/components/ui/filter/filter-system.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var FilterSystem = ({
   properties,
   filterState,
   onFilterStateChange,
   sortFields,
   mode: modeOverride,
+  breakpoint,
   children,
   actions,
   className
 }) => {
   const containerRef = React49.useRef(null);
-  const mode = useFilterBarMode(containerRef, modeOverride);
+  const mode = useFilterBarMode(containerRef, modeOverride, breakpoint);
   const [propertySelectorOpen, setPropertySelectorOpen] = React49.useState(false);
   const [advancedOpen, setAdvancedOpen] = React49.useState(false);
+  const [summaryOpen, setSummaryOpen] = React49.useState(false);
   const [pendingFilterId, setPendingFilterId] = React49.useState(null);
   const allFilters = [...filterState.basicFilters, ...filterState.advancedFilters];
   const totalCount = allFilters.length;
@@ -7111,10 +7369,23 @@ var FilterSystem = ({
   const getPropertyDef = (propertyId) => properties.find((p) => p.id === propertyId);
   const hasAdvanced = filterState.advancedFilters.length > 0;
   const isMinimal = mode === "minimal";
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(FilterBar, { ref: containerRef, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(FilterBarLeft, { children: [
+  const handleOpenAdvanced = () => {
+    setPropertySelectorOpen(false);
+    requestAnimationFrame(() => {
+      if (isMinimal) {
+        setSummaryOpen(true);
+      } else {
+        setAdvancedOpen(true);
+      }
+    });
+  };
+  const advancedFilterCount = filterState.advancedFilters.length;
+  const showAdvancedChip = hasAdvanced || advancedOpen;
+  const showSummaryChip = totalCount > 0 || summaryOpen;
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(FilterBar, { ref: containerRef, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(FilterBarLeft, { className: "flex-nowrap flex-1 min-w-0 overflow-x-auto scrollbar-none outline-none [&>*]:shrink-0", children: [
       children,
-      sortFields && filterState.sort && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      sortFields && filterState.sort && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         SortButton,
         {
           fields: sortFields,
@@ -7124,40 +7395,48 @@ var FilterSystem = ({
           iconOnly: isMinimal
         }
       ),
-      isMinimal ? totalCount > 0 ? (
-        /* Has filters → SummaryChip (interactive popover) */
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          SummaryChip,
+      isMinimal ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "div",
           {
-            count: totalCount,
-            filters: allFilters,
-            properties,
-            onFiltersChange: (filters) => {
-              onFilterStateChange({
-                ...filterState,
-                basicFilters: filters,
-                advancedFilters: []
-              });
-            },
-            onClearAll: handleClearAll
+            className: showSummaryChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
+            "aria-hidden": !showSummaryChip || void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              SummaryChip,
+              {
+                count: totalCount,
+                filters: allFilters,
+                properties,
+                onFiltersChange: (filters) => {
+                  onFilterStateChange({
+                    ...filterState,
+                    basicFilters: filters,
+                    advancedFilters: []
+                  });
+                },
+                onClearAll: handleClearAll,
+                open: summaryOpen,
+                onOpenChange: setSummaryOpen
+              }
+            )
           }
-        )
-      ) : (
-        /* No filters → same FilterBarButton as default, icon-only */
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        ),
+        !showSummaryChip && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           PropertySelector,
           {
             properties,
             onSelect: handleAddFilter,
             open: propertySelectorOpen,
             onOpenChange: setPropertySelectorOpen,
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FilterBarButton, { iconOnly: true })
+            onAdvancedFilter: handleOpenAdvanced,
+            advancedFilterCount,
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FilterBarButton, { iconOnly: true })
           }
         )
-      ) : (
+      ] }) : (
         /* ── DEFAULT MODE ────────────────────────────────────── */
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-          hasAdvanced && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             AdvancedPopover,
             {
               filters: filterState.advancedFilters,
@@ -7165,12 +7444,19 @@ var FilterSystem = ({
               onFiltersChange: handleAdvancedFiltersChange,
               open: advancedOpen,
               onOpenChange: setAdvancedOpen,
-              children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                AdvancedChip,
+              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                "div",
                 {
-                  count: filterState.advancedFilters.length,
-                  onClick: () => setAdvancedOpen(true),
-                  onClear: handleClearAdvanced
+                  className: showAdvancedChip ? "inline-flex" : "inline-flex w-0 overflow-hidden opacity-0 pointer-events-none",
+                  "aria-hidden": !showAdvancedChip || void 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                    AdvancedChip,
+                    {
+                      count: filterState.advancedFilters.length,
+                      onClick: () => setAdvancedOpen(true),
+                      onClear: handleClearAdvanced
+                    }
+                  )
                 }
               )
             }
@@ -7178,7 +7464,7 @@ var FilterSystem = ({
           filterState.basicFilters.map((filter) => {
             const propDef = getPropertyDef(filter.propertyId);
             if (!propDef) return null;
-            return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               InteractiveFilterChip,
               {
                 propertyDef: propDef,
@@ -7194,34 +7480,38 @@ var FilterSystem = ({
               filter.id
             );
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
             PropertySelector,
             {
               properties,
               onSelect: handleAddFilter,
               open: propertySelectorOpen,
               onOpenChange: setPropertySelectorOpen,
-              children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                FilterBarButton,
+              onAdvancedFilter: handleOpenAdvanced,
+              advancedFilterCount,
+              children: totalCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                "button",
                 {
-                  count: totalCount || void 0
+                  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_runtime56.jsx)(import_icons34.Icon, { icon: import_icons34.faPlusOutline, size: "sm", className: "text-[var(--color-foreground)]" })
                 }
-              )
+              ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FilterBarButton, {})
             }
           )
         ] })
       ),
-      totalCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      totalCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         "button",
         {
           type: "button",
           onClick: handleClearAll,
-          className: "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_runtime51.jsx)(import_icons34.Icon, { icon: import_icons34.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-medium leading-sm text-[var(--color-foreground)]", children: "Clear" })
+          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_runtime56.jsx)(import_icons34.Icon, { icon: import_icons34.faXmarkOutline, size: "sm", className: "text-[var(--color-foreground)]" }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-sm font-semibold leading-sm text-[var(--color-foreground)]", children: "Clear" })
         }
       )
     ] }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(FilterBarRight, { children: actions })
+    actions && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FilterBarRight, { className: "shrink-0 -ml-2xl pl-2xl relative z-10 bg-[linear-gradient(to_right,transparent_0px,var(--filter-bar-bg,var(--color-background,#fff))_24px)]", children: actions })
   ] });
 };
 FilterSystem.displayName = "FilterSystem";
@@ -7230,7 +7520,7 @@ FilterSystem.displayName = "FilterSystem";
 var React50 = __toESM(require("react"));
 var PopoverPrimitive12 = __toESM(require("@radix-ui/react-popover"));
 var import_icons35 = require("@l3mpire/icons");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
 }
@@ -7361,7 +7651,7 @@ var DatePicker = React50.forwardRef(
         hoveredDate
       ]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DatePickerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "div",
       {
         ref,
@@ -7388,18 +7678,18 @@ var DatePickerSelects = React50.forwardRef(({ className, formatDate = defaultFor
   const { selected } = useDatePickerContext();
   const fromDate = selected instanceof Date ? selected : selected?.from;
   const toDate = selected instanceof Date ? void 0 : selected?.to;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       ref,
       className: cn("flex flex-col items-start pt-lg px-lg", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons35.Icon, { icon: import_icons35.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-base w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: fromDate ? formatDate(fromDate) : "Start date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           import_icons35.Icon,
           {
             icon: import_icons35.faArrowRightOutline,
@@ -7407,9 +7697,9 @@ var DatePickerSelects = React50.forwardRef(({ className, formatDate = defaultFor
             className: "shrink-0 text-datepicker-header-weekday"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons35.Icon, { icon: import_icons35.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex-1 flex items-center gap-base min-w-0 px-base py-sm bg-gradient-to-t from-[var(--color-select-bg-default)] to-[var(--color-select-bg-gradient-to)] border border-[var(--color-select-border-default)] rounded-base shadow-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "flex-1 text-sm font-regular leading-sm text-datepicker-header-text truncate", children: toDate ? formatDate(toDate) : "End date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.faCalendarOutline, size: "sm", className: "shrink-0 text-datepicker-header-text" })
         ] })
       ] })
     }
@@ -7425,7 +7715,7 @@ var DatePickerDay = ({ date, isOutside }) => {
   const inRange = mode === "range" && selected && !(selected instanceof Date) && selected.from && selected.to && !isSelected && isInRange(date, selected.from, selected.to);
   const inPreviewRange = mode === "range" && selected && !(selected instanceof Date) && selected.from && !selected.to && hoveredDate && !isSelected && hoveredDate.getTime() > selected.from.getTime() && isInRange(date, selected.from, hoveredDate);
   const isInRangeOrPreview = inRange || inPreviewRange;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "button",
     {
       type: "button",
@@ -7435,7 +7725,7 @@ var DatePickerDay = ({ date, isOutside }) => {
       disabled: isOutside,
       className: cn(
         "relative flex flex-col items-center justify-center w-9 rounded-full p-2 cursor-pointer transition-colors",
-        "text-sm font-medium leading-sm text-center",
+        "text-sm font-semibold leading-sm text-center",
         // Default
         !isOutside && !isSelected && !isInRangeOrPreview && "text-datepicker-day-text-default hover:bg-datepicker-day-bg-hover",
         // Outside month (disabled)
@@ -7449,7 +7739,7 @@ var DatePickerDay = ({ date, isOutside }) => {
       ),
       children: [
         date.getDate(),
-        isToday && !isOutside && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
+        isToday && !isOutside && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1.5 rounded-full bg-datepicker-day-today" })
       ]
     }
   );
@@ -7496,7 +7786,7 @@ var DatePickerCalendar = React50.forwardRef(({ className, header, ...props }, re
     }
     return result;
   }, [month, year]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
       ref,
@@ -7504,38 +7794,38 @@ var DatePickerCalendar = React50.forwardRef(({ className, header, ...props }, re
       ...props,
       children: [
         header,
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-lg p-lg", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "text-base font-medium leading-base text-datepicker-header-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-lg p-lg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "text-base font-semibold leading-base text-datepicker-header-text", children: [
               MONTH_NAMES[month],
               " ",
               year
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: goToPrevMonth,
                   className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
                   "aria-label": "Previous month",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons35.Icon, { icon: import_icons35.faChevronLeftOutline, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.faChevronLeftOutline, size: "xs", className: "text-datepicker-header-nav" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: goToNextMonth,
                   className: "flex items-center justify-center p-xs rounded-base hover:bg-datepicker-day-bg-hover transition-colors cursor-pointer",
                   "aria-label": "Next month",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons35.Icon, { icon: import_icons35.faChevronRightOutline, size: "xs", className: "text-datepicker-header-nav" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_icons35.Icon, { icon: import_icons35.faChevronRightOutline, size: "xs", className: "text-datepicker-header-nav" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "grid grid-cols-7 gap-base py-sm", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               "span",
               {
                 className: "w-9 text-center text-xs font-regular leading-xs text-datepicker-header-weekday",
@@ -7543,7 +7833,7 @@ var DatePickerCalendar = React50.forwardRef(({ className, header, ...props }, re
               },
               day
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-col", children: weeks.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "grid grid-cols-7 gap-base", children: week.map((day, di) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
               DatePickerDay,
               {
                 date: day.date,
@@ -7583,7 +7873,7 @@ var DatePickerSuggestions = React50.forwardRef(
       const to = val.to ? formatDate(val.to) : "";
       return to ? `${from} - ${to}` : from;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
       "div",
       {
         ref,
@@ -7593,16 +7883,16 @@ var DatePickerSuggestions = React50.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "pt-lg px-base", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "flex-1 text-xs font-medium leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "pt-lg px-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex items-center p-base rounded-base", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "flex-1 text-xs font-semibold leading-xs text-datepicker-suggestion-heading uppercase truncate", children: "Suggestions" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-1 flex-col p-base min-w-[222px]", children: suggestions.map((suggestion, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
             "button",
             {
               type: "button",
               onClick: () => handleClick(suggestion),
               className: "flex items-center gap-sm p-base rounded-base hover:bg-datepicker-suggestion-hover transition-colors cursor-pointer text-left",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-regular leading-sm text-datepicker-suggestion-text truncate shrink-0", children: suggestion.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-xs font-regular leading-xs text-datepicker-suggestion-date truncate", children: formatSuggestionDate(suggestion) })
               ]
             },
             i
@@ -7614,7 +7904,7 @@ var DatePickerSuggestions = React50.forwardRef(
 );
 DatePickerSuggestions.displayName = "DatePickerSuggestions";
 var DatePickerFooter = React50.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       ref,
@@ -7631,7 +7921,7 @@ var DatePickerFooter = React50.forwardRef(
 );
 DatePickerFooter.displayName = "DatePickerFooter";
 var DatePickerPanel = React50.forwardRef(
-  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       ref,
@@ -7644,7 +7934,7 @@ var DatePickerPanel = React50.forwardRef(
 DatePickerPanel.displayName = "DatePickerPanel";
 var DatePickerRoot = PopoverPrimitive12.Root;
 var DatePickerTrigger = PopoverPrimitive12.Trigger;
-var DatePickerPopover = React50.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var DatePickerPopover = React50.forwardRef(({ className, sideOffset = 4, align = "start", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PopoverPrimitive12.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   PopoverPrimitive12.Content,
   {
     ref,