@caratlogic/design-system 0.1.32 → 0.1.34

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment as Fragment$2 } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { toast } from 'sonner';
 import * as React from 'react';
-import React__default, { forwardRef, createElement, useState, useCallback, useMemo, useEffect, useRef, Fragment as Fragment$3, createContext, useContext, useLayoutEffect, cloneElement, createRef, Component, useId as useId$2, isValidElement, lazy, Suspense, memo, useReducer, PureComponent, useDebugValue } from 'react';
+import React__default, { forwardRef, createElement, useState, useCallback, useMemo, useEffect, useRef, Fragment as Fragment$3, createContext, useContext, useId as useId$2, isValidElement, Children, useLayoutEffect, cloneElement, createRef, Component, lazy, Suspense, memo, useReducer, PureComponent, useDebugValue } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -2668,12 +2668,12 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$1t = [
+const __iconNode$1x = [
   ["path", { d: "M15 12H3", key: "6jk70r" }],
   ["path", { d: "M17 18H3", key: "1amg6g" }],
   ["path", { d: "M21 6H3", key: "1jwq7v" }]
 ];
-const AlignLeft = createLucideIcon("align-left", __iconNode$1t);
+const AlignLeft = createLucideIcon("align-left", __iconNode$1x);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2683,12 +2683,12 @@ const AlignLeft = createLucideIcon("align-left", __iconNode$1t);
  */
 
 
-const __iconNode$1s = [
+const __iconNode$1w = [
   ["rect", { width: "20", height: "5", x: "2", y: "3", rx: "1", key: "1wp1u1" }],
   ["path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8", key: "1s80jp" }],
   ["path", { d: "M10 12h4", key: "a56b0p" }]
 ];
-const Archive = createLucideIcon("archive", __iconNode$1s);
+const Archive = createLucideIcon("archive", __iconNode$1w);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2698,11 +2698,11 @@ const Archive = createLucideIcon("archive", __iconNode$1s);
  */
 
 
-const __iconNode$1r = [
+const __iconNode$1v = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1r);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1v);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2712,11 +2712,11 @@ const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1r);
  */
 
 
-const __iconNode$1q = [
+const __iconNode$1u = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$1q);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$1u);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2726,11 +2726,11 @@ const ArrowRight = createLucideIcon("arrow-right", __iconNode$1q);
  */
 
 
-const __iconNode$1p = [
+const __iconNode$1t = [
   ["path", { d: "M4.929 4.929 19.07 19.071", key: "196cmz" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ];
-const Ban = createLucideIcon("ban", __iconNode$1p);
+const Ban = createLucideIcon("ban", __iconNode$1t);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2740,7 +2740,7 @@ const Ban = createLucideIcon("ban", __iconNode$1p);
  */
 
 
-const __iconNode$1o = [
+const __iconNode$1s = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -2751,7 +2751,7 @@ const __iconNode$1o = [
   ],
   ["circle", { cx: "18", cy: "8", r: "3", key: "1g0gzu" }]
 ];
-const BellDot = createLucideIcon("bell-dot", __iconNode$1o);
+const BellDot = createLucideIcon("bell-dot", __iconNode$1s);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2761,7 +2761,7 @@ const BellDot = createLucideIcon("bell-dot", __iconNode$1o);
  */
 
 
-const __iconNode$1n = [
+const __iconNode$1r = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   ["path", { d: "M22 8c0-2.3-.8-4.3-2-6", key: "5bb3ad" }],
   [
@@ -2773,7 +2773,7 @@ const __iconNode$1n = [
   ],
   ["path", { d: "M4 2C2.8 3.7 2 5.7 2 8", key: "tap9e0" }]
 ];
-const BellRing = createLucideIcon("bell-ring", __iconNode$1n);
+const BellRing = createLucideIcon("bell-ring", __iconNode$1r);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2783,7 +2783,7 @@ const BellRing = createLucideIcon("bell-ring", __iconNode$1n);
  */
 
 
-const __iconNode$1m = [
+const __iconNode$1q = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -2793,7 +2793,7 @@ const __iconNode$1m = [
     }
   ]
 ];
-const Bell = createLucideIcon("bell", __iconNode$1m);
+const Bell = createLucideIcon("bell", __iconNode$1q);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2803,13 +2803,13 @@ const Bell = createLucideIcon("bell", __iconNode$1m);
  */
 
 
-const __iconNode$1l = [
+const __iconNode$1p = [
   [
     "path",
     { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
   ]
 ];
-const Bold$1 = createLucideIcon("bold", __iconNode$1l);
+const Bold$1 = createLucideIcon("bold", __iconNode$1p);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2819,7 +2819,20 @@ const Bold$1 = createLucideIcon("bold", __iconNode$1l);
  */
 
 
-const __iconNode$1k = [
+const __iconNode$1o = [
+  ["path", { d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z", key: "1fy3hk" }]
+];
+const Bookmark = createLucideIcon("bookmark", __iconNode$1o);
+
+/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1n = [
   [
     "path",
     {
@@ -2830,7 +2843,7 @@ const __iconNode$1k = [
   ["path", { d: "m3.3 7 8.7 5 8.7-5", key: "g66t2b" }],
   ["path", { d: "M12 22V12", key: "d0xqtd" }]
 ];
-const Box = createLucideIcon("box", __iconNode$1k);
+const Box = createLucideIcon("box", __iconNode$1n);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2840,7 +2853,7 @@ const Box = createLucideIcon("box", __iconNode$1k);
  */
 
 
-const __iconNode$1j = [
+const __iconNode$1m = [
   ["path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z", key: "1b4qmf" }],
   ["path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2", key: "i71pzd" }],
   ["path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2", key: "10jefs" }],
@@ -2849,7 +2862,7 @@ const __iconNode$1j = [
   ["path", { d: "M10 14h4", key: "kelpxr" }],
   ["path", { d: "M10 18h4", key: "1ulq68" }]
 ];
-const Building2 = createLucideIcon("building-2", __iconNode$1j);
+const Building2 = createLucideIcon("building-2", __iconNode$1m);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2859,7 +2872,7 @@ const Building2 = createLucideIcon("building-2", __iconNode$1j);
  */
 
 
-const __iconNode$1i = [
+const __iconNode$1l = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -2871,7 +2884,7 @@ const __iconNode$1i = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$1i);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$1l);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2881,13 +2894,13 @@ const CalendarDays = createLucideIcon("calendar-days", __iconNode$1i);
  */
 
 
-const __iconNode$1h = [
+const __iconNode$1k = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-const Calendar$1 = createLucideIcon("calendar", __iconNode$1h);
+const Calendar$1 = createLucideIcon("calendar", __iconNode$1k);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2897,11 +2910,11 @@ const Calendar$1 = createLucideIcon("calendar", __iconNode$1h);
  */
 
 
-const __iconNode$1g = [
+const __iconNode$1j = [
   ["path", { d: "M18 6 7 17l-5-5", key: "116fxf" }],
   ["path", { d: "m22 10-7.5 7.5L13 16", key: "ke71qq" }]
 ];
-const CheckCheck = createLucideIcon("check-check", __iconNode$1g);
+const CheckCheck = createLucideIcon("check-check", __iconNode$1j);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2911,8 +2924,8 @@ const CheckCheck = createLucideIcon("check-check", __iconNode$1g);
  */
 
 
-const __iconNode$1f = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$1f);
+const __iconNode$1i = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$1i);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2922,8 +2935,8 @@ const Check = createLucideIcon("check", __iconNode$1f);
  */
 
 
-const __iconNode$1e = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$1e);
+const __iconNode$1h = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$1h);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2933,8 +2946,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$1e);
  */
 
 
-const __iconNode$1d = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1d);
+const __iconNode$1g = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1g);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2944,8 +2957,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1d);
  */
 
 
-const __iconNode$1c = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$1c);
+const __iconNode$1f = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$1f);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2955,8 +2968,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$1c);
  */
 
 
-const __iconNode$1b = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$1b);
+const __iconNode$1e = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$1e);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2966,11 +2979,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$1b);
  */
 
 
-const __iconNode$1a = [
+const __iconNode$1d = [
   ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
   ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
 ];
-const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$1a);
+const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$1d);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2980,11 +2993,11 @@ const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$1a);
  */
 
 
-const __iconNode$19 = [
+const __iconNode$1c = [
   ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
   ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
 ];
-const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$19);
+const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$1c);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2994,12 +3007,12 @@ const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$19);
  */
 
 
-const __iconNode$18 = [
+const __iconNode$1b = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$18);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$1b);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3009,11 +3022,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$18);
  */
 
 
-const __iconNode$17 = [
+const __iconNode$1a = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$17);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$1a);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3023,11 +3036,11 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$17);
  */
 
 
-const __iconNode$16 = [
+const __iconNode$19 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$16);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$19);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3037,11 +3050,11 @@ const CircleCheck = createLucideIcon("circle-check", __iconNode$16);
  */
 
 
-const __iconNode$15 = [
+const __iconNode$18 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m16 10-4 4-4-4", key: "894hmk" }]
 ];
-const CircleChevronDown = createLucideIcon("circle-chevron-down", __iconNode$15);
+const CircleChevronDown = createLucideIcon("circle-chevron-down", __iconNode$18);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3051,11 +3064,11 @@ const CircleChevronDown = createLucideIcon("circle-chevron-down", __iconNode$15)
  */
 
 
-const __iconNode$14 = [
+const __iconNode$17 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }]
 ];
-const CircleDot = createLucideIcon("circle-dot", __iconNode$14);
+const CircleDot = createLucideIcon("circle-dot", __iconNode$17);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3065,12 +3078,12 @@ const CircleDot = createLucideIcon("circle-dot", __iconNode$14);
  */
 
 
-const __iconNode$13 = [
+const __iconNode$16 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
   ["path", { d: "m9 9 6 6", key: "z0biqf" }]
 ];
-const CircleX = createLucideIcon("circle-x", __iconNode$13);
+const CircleX = createLucideIcon("circle-x", __iconNode$16);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3080,8 +3093,8 @@ const CircleX = createLucideIcon("circle-x", __iconNode$13);
  */
 
 
-const __iconNode$12 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-const Circle = createLucideIcon("circle", __iconNode$12);
+const __iconNode$15 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("circle", __iconNode$15);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3091,11 +3104,11 @@ const Circle = createLucideIcon("circle", __iconNode$12);
  */
 
 
-const __iconNode$11 = [
+const __iconNode$14 = [
   ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ];
-const Clock = createLucideIcon("clock", __iconNode$11);
+const Clock = createLucideIcon("clock", __iconNode$14);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3105,11 +3118,11 @@ const Clock = createLucideIcon("clock", __iconNode$11);
  */
 
 
-const __iconNode$10 = [
+const __iconNode$13 = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$10);
+const Copy = createLucideIcon("copy", __iconNode$13);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3119,11 +3132,11 @@ const Copy = createLucideIcon("copy", __iconNode$10);
  */
 
 
-const __iconNode$$ = [
+const __iconNode$12 = [
   ["path", { d: "M6 2v14a2 2 0 0 0 2 2h14", key: "ron5a4" }],
   ["path", { d: "M18 22V8a2 2 0 0 0-2-2H2", key: "7s9ehn" }]
 ];
-const Crop = createLucideIcon("crop", __iconNode$$);
+const Crop = createLucideIcon("crop", __iconNode$12);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3133,12 +3146,12 @@ const Crop = createLucideIcon("crop", __iconNode$$);
  */
 
 
-const __iconNode$_ = [
+const __iconNode$11 = [
   ["path", { d: "M12 15V3", key: "m9g1x1" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
 ];
-const Download = createLucideIcon("download", __iconNode$_);
+const Download = createLucideIcon("download", __iconNode$11);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3148,12 +3161,12 @@ const Download = createLucideIcon("download", __iconNode$_);
  */
 
 
-const __iconNode$Z = [
+const __iconNode$10 = [
   ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
   ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
   ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
 ];
-const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$Z);
+const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$10);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3163,12 +3176,12 @@ const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$Z);
  */
 
 
-const __iconNode$Y = [
+const __iconNode$$ = [
   ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
   ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
   ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
 ];
-const Ellipsis = createLucideIcon("ellipsis", __iconNode$Y);
+const Ellipsis = createLucideIcon("ellipsis", __iconNode$$);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3178,12 +3191,12 @@ const Ellipsis = createLucideIcon("ellipsis", __iconNode$Y);
  */
 
 
-const __iconNode$X = [
+const __iconNode$_ = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$X);
+const ExternalLink = createLucideIcon("external-link", __iconNode$_);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3193,7 +3206,7 @@ const ExternalLink = createLucideIcon("external-link", __iconNode$X);
  */
 
 
-const __iconNode$W = [
+const __iconNode$Z = [
   [
     "path",
     {
@@ -3203,7 +3216,7 @@ const __iconNode$W = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$W);
+const Eye = createLucideIcon("eye", __iconNode$Z);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3213,13 +3226,13 @@ const Eye = createLucideIcon("eye", __iconNode$W);
  */
 
 
-const __iconNode$V = [
+const __iconNode$Y = [
   [
     "path",
     { d: "M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z", key: "1jg4f8" }
   ]
 ];
-const Facebook = createLucideIcon("facebook", __iconNode$V);
+const Facebook = createLucideIcon("facebook", __iconNode$Y);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3229,7 +3242,7 @@ const Facebook = createLucideIcon("facebook", __iconNode$V);
  */
 
 
-const __iconNode$U = [
+const __iconNode$X = [
   ["path", { d: "M12 22h6a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3.072", key: "n6s66f" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   [
@@ -3241,7 +3254,7 @@ const __iconNode$U = [
   ],
   ["circle", { cx: "5", cy: "14", r: "3", key: "ufru5t" }]
 ];
-const FileBadge = createLucideIcon("file-badge", __iconNode$U);
+const FileBadge = createLucideIcon("file-badge", __iconNode$X);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3251,12 +3264,12 @@ const FileBadge = createLucideIcon("file-badge", __iconNode$U);
  */
 
 
-const __iconNode$T = [
+const __iconNode$W = [
   ["path", { d: "M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4", key: "1pf5j1" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "m3 15 2 2 4-4", key: "1lhrkk" }]
 ];
-const FileCheck2 = createLucideIcon("file-check-2", __iconNode$T);
+const FileCheck2 = createLucideIcon("file-check-2", __iconNode$W);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3266,14 +3279,14 @@ const FileCheck2 = createLucideIcon("file-check-2", __iconNode$T);
  */
 
 
-const __iconNode$S = [
+const __iconNode$V = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M10 9H8", key: "b1mrlr" }],
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$S);
+const FileText = createLucideIcon("file-text", __iconNode$V);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3283,7 +3296,28 @@ const FileText = createLucideIcon("file-text", __iconNode$S);
  */
 
 
-const __iconNode$R = [
+const __iconNode$U = [
+  [
+    "path",
+    {
+      d: "M12.531 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14v6a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341l.427-.473",
+      key: "ol2ft2"
+    }
+  ],
+  ["path", { d: "m16.5 3.5 5 5", key: "15e6fa" }],
+  ["path", { d: "m21.5 3.5-5 5", key: "m0lwru" }]
+];
+const FunnelX = createLucideIcon("funnel-x", __iconNode$U);
+
+/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$T = [
   [
     "path",
     {
@@ -3292,7 +3326,7 @@ const __iconNode$R = [
     }
   ]
 ];
-const Funnel = createLucideIcon("funnel", __iconNode$R);
+const Funnel = createLucideIcon("funnel", __iconNode$T);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3302,7 +3336,7 @@ const Funnel = createLucideIcon("funnel", __iconNode$R);
  */
 
 
-const __iconNode$Q = [
+const __iconNode$S = [
   ["path", { d: "M10.5 3 8 9l4 13 4-13-2.5-6", key: "b3dvk1" }],
   [
     "path",
@@ -3313,7 +3347,7 @@ const __iconNode$Q = [
   ],
   ["path", { d: "M2 9h20", key: "16fsjt" }]
 ];
-const Gem = createLucideIcon("gem", __iconNode$Q);
+const Gem = createLucideIcon("gem", __iconNode$S);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3323,7 +3357,7 @@ const Gem = createLucideIcon("gem", __iconNode$Q);
  */
 
 
-const __iconNode$P = [
+const __iconNode$R = [
   ["circle", { cx: "12", cy: "9", r: "1", key: "124mty" }],
   ["circle", { cx: "19", cy: "9", r: "1", key: "1ruzo2" }],
   ["circle", { cx: "5", cy: "9", r: "1", key: "1a8b28" }],
@@ -3331,7 +3365,7 @@ const __iconNode$P = [
   ["circle", { cx: "19", cy: "15", r: "1", key: "1a92ep" }],
   ["circle", { cx: "5", cy: "15", r: "1", key: "5r1jwy" }]
 ];
-const GripHorizontal = createLucideIcon("grip-horizontal", __iconNode$P);
+const GripHorizontal = createLucideIcon("grip-horizontal", __iconNode$R);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3341,7 +3375,7 @@ const GripHorizontal = createLucideIcon("grip-horizontal", __iconNode$P);
  */
 
 
-const __iconNode$O = [
+const __iconNode$Q = [
   ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
   ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
   ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
@@ -3349,7 +3383,7 @@ const __iconNode$O = [
   ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
   ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
 ];
-const GripVertical = createLucideIcon("grip-vertical", __iconNode$O);
+const GripVertical = createLucideIcon("grip-vertical", __iconNode$Q);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3359,13 +3393,13 @@ const GripVertical = createLucideIcon("grip-vertical", __iconNode$O);
  */
 
 
-const __iconNode$N = [
+const __iconNode$P = [
   ["line", { x1: "4", x2: "20", y1: "9", y2: "9", key: "4lhtct" }],
   ["line", { x1: "4", x2: "20", y1: "15", y2: "15", key: "vyu0kd" }],
   ["line", { x1: "10", x2: "8", y1: "3", y2: "21", key: "1ggp8o" }],
   ["line", { x1: "16", x2: "14", y1: "3", y2: "21", key: "weycgp" }]
 ];
-const Hash = createLucideIcon("hash", __iconNode$N);
+const Hash = createLucideIcon("hash", __iconNode$P);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3375,13 +3409,13 @@ const Hash = createLucideIcon("hash", __iconNode$N);
  */
 
 
-const __iconNode$M = [
+const __iconNode$O = [
   ["path", { d: "M4 12h8", key: "17cfdx" }],
   ["path", { d: "M4 18V6", key: "1rz3zl" }],
   ["path", { d: "M12 18V6", key: "zqpxq5" }],
   ["path", { d: "m17 12 3-2v8", key: "1hhhft" }]
 ];
-const Heading1 = createLucideIcon("heading-1", __iconNode$M);
+const Heading1 = createLucideIcon("heading-1", __iconNode$O);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3391,13 +3425,13 @@ const Heading1 = createLucideIcon("heading-1", __iconNode$M);
  */
 
 
-const __iconNode$L = [
+const __iconNode$N = [
   ["path", { d: "M4 12h8", key: "17cfdx" }],
   ["path", { d: "M4 18V6", key: "1rz3zl" }],
   ["path", { d: "M12 18V6", key: "zqpxq5" }],
   ["path", { d: "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1", key: "9jr5yi" }]
 ];
-const Heading2 = createLucideIcon("heading-2", __iconNode$L);
+const Heading2 = createLucideIcon("heading-2", __iconNode$N);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3407,14 +3441,14 @@ const Heading2 = createLucideIcon("heading-2", __iconNode$L);
  */
 
 
-const __iconNode$K = [
+const __iconNode$M = [
   ["path", { d: "M4 12h8", key: "17cfdx" }],
   ["path", { d: "M4 18V6", key: "1rz3zl" }],
   ["path", { d: "M12 18V6", key: "zqpxq5" }],
   ["path", { d: "M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2", key: "68ncm8" }],
   ["path", { d: "M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2", key: "1ejuhz" }]
 ];
-const Heading3 = createLucideIcon("heading-3", __iconNode$K);
+const Heading3 = createLucideIcon("heading-3", __iconNode$M);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3424,12 +3458,12 @@ const Heading3 = createLucideIcon("heading-3", __iconNode$K);
  */
 
 
-const __iconNode$J = [
+const __iconNode$L = [
   ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
   ["path", { d: "M12 7v5l4 2", key: "1fdv2h" }]
 ];
-const History = createLucideIcon("history", __iconNode$J);
+const History = createLucideIcon("history", __iconNode$L);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3439,12 +3473,12 @@ const History = createLucideIcon("history", __iconNode$J);
  */
 
 
-const __iconNode$I = [
+const __iconNode$K = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
 ];
-const Image$1 = createLucideIcon("image", __iconNode$I);
+const Image$1 = createLucideIcon("image", __iconNode$K);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3454,12 +3488,12 @@ const Image$1 = createLucideIcon("image", __iconNode$I);
  */
 
 
-const __iconNode$H = [
+const __iconNode$J = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info = createLucideIcon("info", __iconNode$H);
+const Info = createLucideIcon("info", __iconNode$J);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3469,12 +3503,12 @@ const Info = createLucideIcon("info", __iconNode$H);
  */
 
 
-const __iconNode$G = [
+const __iconNode$I = [
   ["line", { x1: "19", x2: "10", y1: "4", y2: "4", key: "15jd3p" }],
   ["line", { x1: "14", x2: "5", y1: "20", y2: "20", key: "bu0au3" }],
   ["line", { x1: "15", x2: "9", y1: "4", y2: "20", key: "uljnxc" }]
 ];
-const Italic$1 = createLucideIcon("italic", __iconNode$G);
+const Italic$1 = createLucideIcon("italic", __iconNode$I);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3484,7 +3518,7 @@ const Italic$1 = createLucideIcon("italic", __iconNode$G);
  */
 
 
-const __iconNode$F = [
+const __iconNode$H = [
   [
     "path",
     {
@@ -3494,7 +3528,7 @@ const __iconNode$F = [
   ],
   ["circle", { cx: "16.5", cy: "7.5", r: ".5", fill: "currentColor", key: "w0ekpg" }]
 ];
-const KeyRound = createLucideIcon("key-round", __iconNode$F);
+const KeyRound = createLucideIcon("key-round", __iconNode$H);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3504,12 +3538,12 @@ const KeyRound = createLucideIcon("key-round", __iconNode$F);
  */
 
 
-const __iconNode$E = [
+const __iconNode$G = [
   ["path", { d: "M9 17H7A5 5 0 0 1 7 7h2", key: "8i5ue5" }],
   ["path", { d: "M15 7h2a5 5 0 1 1 0 10h-2", key: "1b9ql8" }],
   ["line", { x1: "8", x2: "16", y1: "12", y2: "12", key: "1jonct" }]
 ];
-const Link2 = createLucideIcon("link-2", __iconNode$E);
+const Link2 = createLucideIcon("link-2", __iconNode$G);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3519,14 +3553,14 @@ const Link2 = createLucideIcon("link-2", __iconNode$E);
  */
 
 
-const __iconNode$D = [
+const __iconNode$F = [
   ["path", { d: "m3 17 2 2 4-4", key: "1jhpwq" }],
   ["path", { d: "m3 7 2 2 4-4", key: "1obspn" }],
   ["path", { d: "M13 6h8", key: "15sg57" }],
   ["path", { d: "M13 12h8", key: "h98zly" }],
   ["path", { d: "M13 18h8", key: "oe0vm4" }]
 ];
-const ListChecks = createLucideIcon("list-checks", __iconNode$D);
+const ListChecks = createLucideIcon("list-checks", __iconNode$F);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3536,7 +3570,7 @@ const ListChecks = createLucideIcon("list-checks", __iconNode$D);
  */
 
 
-const __iconNode$C = [
+const __iconNode$E = [
   ["path", { d: "M10 12h11", key: "6m4ad9" }],
   ["path", { d: "M10 18h11", key: "11hvi2" }],
   ["path", { d: "M10 6h11", key: "c7qv1k" }],
@@ -3544,7 +3578,7 @@ const __iconNode$C = [
   ["path", { d: "M4 6h1v4", key: "cnovpq" }],
   ["path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1", key: "m9a95d" }]
 ];
-const ListOrdered = createLucideIcon("list-ordered", __iconNode$C);
+const ListOrdered = createLucideIcon("list-ordered", __iconNode$E);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3554,7 +3588,7 @@ const ListOrdered = createLucideIcon("list-ordered", __iconNode$C);
  */
 
 
-const __iconNode$B = [
+const __iconNode$D = [
   ["path", { d: "M3 12h.01", key: "nlz23k" }],
   ["path", { d: "M3 18h.01", key: "1tta3j" }],
   ["path", { d: "M3 6h.01", key: "1rqtza" }],
@@ -3562,7 +3596,7 @@ const __iconNode$B = [
   ["path", { d: "M8 18h13", key: "1lx6n3" }],
   ["path", { d: "M8 6h13", key: "ik3vkj" }]
 ];
-const List = createLucideIcon("list", __iconNode$B);
+const List = createLucideIcon("list", __iconNode$D);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3572,8 +3606,8 @@ const List = createLucideIcon("list", __iconNode$B);
  */
 
 
-const __iconNode$A = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$A);
+const __iconNode$C = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$C);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3583,7 +3617,7 @@ const LoaderCircle = createLucideIcon("loader-circle", __iconNode$A);
  */
 
 
-const __iconNode$z = [
+const __iconNode$B = [
   ["path", { d: "M12 2v4", key: "3427ic" }],
   ["path", { d: "m16.2 7.8 2.9-2.9", key: "r700ao" }],
   ["path", { d: "M18 12h4", key: "wj9ykh" }],
@@ -3593,7 +3627,7 @@ const __iconNode$z = [
   ["path", { d: "M2 12h4", key: "j09sii" }],
   ["path", { d: "m4.9 4.9 2.9 2.9", key: "giyufr" }]
 ];
-const Loader = createLucideIcon("loader", __iconNode$z);
+const Loader = createLucideIcon("loader", __iconNode$B);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3603,12 +3637,12 @@ const Loader = createLucideIcon("loader", __iconNode$z);
  */
 
 
-const __iconNode$y = [
+const __iconNode$A = [
   ["path", { d: "m16 17 5-5-5-5", key: "1bji2h" }],
   ["path", { d: "M21 12H9", key: "dn1m92" }],
   ["path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4", key: "1uf3rs" }]
 ];
-const LogOut = createLucideIcon("log-out", __iconNode$y);
+const LogOut = createLucideIcon("log-out", __iconNode$A);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3618,11 +3652,11 @@ const LogOut = createLucideIcon("log-out", __iconNode$y);
  */
 
 
-const __iconNode$x = [
+const __iconNode$z = [
   ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
   ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
 ];
-const Mail = createLucideIcon("mail", __iconNode$x);
+const Mail = createLucideIcon("mail", __iconNode$z);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3632,12 +3666,12 @@ const Mail = createLucideIcon("mail", __iconNode$x);
  */
 
 
-const __iconNode$w = [
+const __iconNode$y = [
   ["path", { d: "M4 12h16", key: "1lakjw" }],
   ["path", { d: "M4 18h16", key: "19g7jn" }],
   ["path", { d: "M4 6h16", key: "1o0s65" }]
 ];
-const Menu = createLucideIcon("menu", __iconNode$w);
+const Menu = createLucideIcon("menu", __iconNode$y);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3647,8 +3681,8 @@ const Menu = createLucideIcon("menu", __iconNode$w);
  */
 
 
-const __iconNode$v = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$v);
+const __iconNode$x = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$x);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3658,7 +3692,7 @@ const Minus = createLucideIcon("minus", __iconNode$v);
  */
 
 
-const __iconNode$u = [
+const __iconNode$w = [
   [
     "path",
     {
@@ -3667,7 +3701,7 @@ const __iconNode$u = [
     }
   ]
 ];
-const Moon = createLucideIcon("moon", __iconNode$u);
+const Moon = createLucideIcon("moon", __iconNode$w);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3677,7 +3711,7 @@ const Moon = createLucideIcon("moon", __iconNode$u);
  */
 
 
-const __iconNode$t = [
+const __iconNode$v = [
   [
     "path",
     {
@@ -3690,7 +3724,7 @@ const __iconNode$t = [
   ["circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor", key: "qy21gx" }],
   ["circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor", key: "fotxhn" }]
 ];
-const Palette = createLucideIcon("palette", __iconNode$t);
+const Palette = createLucideIcon("palette", __iconNode$v);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3700,12 +3734,12 @@ const Palette = createLucideIcon("palette", __iconNode$t);
  */
 
 
-const __iconNode$s = [
+const __iconNode$u = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
 ];
-const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$s);
+const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$u);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3715,7 +3749,7 @@ const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$s);
  */
 
 
-const __iconNode$r = [
+const __iconNode$t = [
   [
     "path",
     {
@@ -3724,7 +3758,7 @@ const __iconNode$r = [
     }
   ]
 ];
-const Paperclip = createLucideIcon("paperclip", __iconNode$r);
+const Paperclip = createLucideIcon("paperclip", __iconNode$t);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3734,7 +3768,7 @@ const Paperclip = createLucideIcon("paperclip", __iconNode$r);
  */
 
 
-const __iconNode$q = [
+const __iconNode$s = [
   [
     "path",
     {
@@ -3744,7 +3778,7 @@ const __iconNode$q = [
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-const Pencil = createLucideIcon("pencil", __iconNode$q);
+const Pencil = createLucideIcon("pencil", __iconNode$s);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3754,7 +3788,7 @@ const Pencil = createLucideIcon("pencil", __iconNode$q);
  */
 
 
-const __iconNode$p = [
+const __iconNode$r = [
   [
     "path",
     {
@@ -3763,7 +3797,7 @@ const __iconNode$p = [
     }
   ]
 ];
-const Phone = createLucideIcon("phone", __iconNode$p);
+const Phone = createLucideIcon("phone", __iconNode$r);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3773,7 +3807,7 @@ const Phone = createLucideIcon("phone", __iconNode$p);
  */
 
 
-const __iconNode$o = [
+const __iconNode$q = [
   [
     "path",
     {
@@ -3782,7 +3816,7 @@ const __iconNode$o = [
     }
   ]
 ];
-const Play = createLucideIcon("play", __iconNode$o);
+const Play = createLucideIcon("play", __iconNode$q);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3792,11 +3826,11 @@ const Play = createLucideIcon("play", __iconNode$o);
  */
 
 
-const __iconNode$n = [
+const __iconNode$p = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$n);
+const Plus = createLucideIcon("plus", __iconNode$p);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3806,10 +3840,10 @@ const Plus = createLucideIcon("plus", __iconNode$n);
  */
 
 
-const __iconNode$m = [
+const __iconNode$o = [
   ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }]
 ];
-const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode$m);
+const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode$o);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3819,11 +3853,11 @@ const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode$
  */
 
 
-const __iconNode$l = [
+const __iconNode$n = [
   ["path", { d: "M21 7v6h-6", key: "3ptur4" }],
   ["path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7", key: "1kgawr" }]
 ];
-const Redo = createLucideIcon("redo", __iconNode$l);
+const Redo = createLucideIcon("redo", __iconNode$n);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3833,13 +3867,13 @@ const Redo = createLucideIcon("redo", __iconNode$l);
  */
 
 
-const __iconNode$k = [
+const __iconNode$m = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$k);
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$m);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3849,14 +3883,14 @@ const RefreshCw = createLucideIcon("refresh-cw", __iconNode$k);
  */
 
 
-const __iconNode$j = [
+const __iconNode$l = [
   ["path", { d: "M4 7V4h16v3", key: "9msm58" }],
   ["path", { d: "M5 20h6", key: "1h6pxn" }],
   ["path", { d: "M13 4 8 20", key: "kqq6aj" }],
   ["path", { d: "m15 15 5 5", key: "me55sn" }],
   ["path", { d: "m20 15-5 5", key: "11p7ol" }]
 ];
-const RemoveFormatting = createLucideIcon("remove-formatting", __iconNode$j);
+const RemoveFormatting = createLucideIcon("remove-formatting", __iconNode$l);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3866,14 +3900,44 @@ const RemoveFormatting = createLucideIcon("remove-formatting", __iconNode$j);
  */
 
 
-const __iconNode$i = [
+const __iconNode$k = [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
+];
+const RotateCcw = createLucideIcon("rotate-ccw", __iconNode$k);
+
+/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$j = [
   ["circle", { cx: "6", cy: "6", r: "3", key: "1lh9wr" }],
   ["path", { d: "M8.12 8.12 12 12", key: "1alkpv" }],
   ["path", { d: "M20 4 8.12 15.88", key: "xgtan2" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
   ["path", { d: "M14.8 14.8 20 20", key: "ptml3r" }]
 ];
-const Scissors = createLucideIcon("scissors", __iconNode$i);
+const Scissors = createLucideIcon("scissors", __iconNode$j);
+
+/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$i = [
+  ["path", { d: "m13.5 8.5-5 5", key: "1cs55j" }],
+  ["path", { d: "m8.5 8.5 5 5", key: "a8mexj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
+  ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
+];
+const SearchX = createLucideIcon("search-x", __iconNode$i);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -13459,7 +13523,7 @@ collisionPadding = 8, ...props }, ref) {
 });
 
 const ActionButtonWithTooltip = ({ icon, tooltip, onClick, disabled = false, colorClass = 'h-5 w-5 p-0 bg-muted text-muted-foreground hover:bg-muted/80 transition-colors rounded-md', }) => {
-    return (jsx(TooltipProvider, { delayDuration: 200, children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { className: disabled ? 'cursor-not-allowed inline-flex' : 'inline-flex', children: jsx(Button$1, { size: "sm", variant: "ghost", className: colorClass, onClick: (e) => {
+    return (jsx(TooltipProvider, { delayDuration: 200, children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { className: disabled ? 'cursor-not-allowed inline-flex' : 'inline-flex', children: jsx(Button$1, { size: "sm", variant: "ghost", className: colorClass, "aria-label": tooltip, onClick: (e) => {
                                 e.stopPropagation();
                                 onClick?.(e);
                             }, disabled: disabled, children: icon }) }) }), jsx(TooltipContent, { children: tooltip })] }) }));
@@ -15381,36 +15445,537 @@ function ApiComboBox({ contactType, selectedItem, onSelect, fetchBusinessContact
             : '', fetchPage: fetchPage, resolveById: resolveById, preSelectedId: customerCode, searchPlaceholder: searchPlaceholder, emptyMessage: "No business contacts found.", disabled: disabled, className: className, align: align, debounceMs: 300, hideTriggerSearchIcon: hideTriggerSearchIcon }));
 }
 
+// A number with an optional `k` (thousand), `M` (million) or `B` (billion), any case, e.g. `1.5`, `2k`, `1.2M`.
+const NUMBER = String.raw `((?:\d+(?:\.\d+)?|\.\d+)[kKmMbB]?)`;
+const SUFFIX_MULTIPLIER = {
+    k: 1000,
+    m: 1000000,
+    b: 1000000000,
+};
+function toExpressionNumber(raw) {
+    const suffix = raw.slice(-1).toLowerCase();
+    const multiplier = SUFFIX_MULTIPLIER[suffix];
+    return multiplier
+        ? Math.round(Number(raw.slice(0, -1)) * multiplier * 1e6) / 1e6
+        : Number(raw);
+}
+const COMPARISON_RE = new RegExp(`^(>=|<=|>|<)${NUMBER}$`);
+const BETWEEN_RE = new RegExp(`^${NUMBER}-${NUMBER}$`);
+const EXACT_RE = new RegExp(`^${NUMBER}$`);
+/** Neutral defaults for a number column with no known scale. */
+const DEFAULT_NUMBER_RULE_EXAMPLES = {
+    low: 1,
+    high: 10,
+    exact: 5,
+};
+const SHORT_SCALES = [
+    [1000000000, 'B'],
+    [1000000, 'M'],
+    [1000, 'k'],
+];
+/** Rule text for a value: `1k`, `2.5k`, `1M`, `1B` so chips stay short; the parser reads them back. */
+function formatRuleNumber(value) {
+    const [divisor, suffix] = SHORT_SCALES.find(([scale]) => Math.abs(value) >= scale) ?? [1, ''];
+    const scaled = Math.round((value / divisor) * 100) / 100;
+    return `${scaled}${suffix}`;
+}
+function formatRuleValue(value, unit) {
+    const number = value.toLocaleString('en-US', { maximumFractionDigits: 2 });
+    if (!unit)
+        return number;
+    return unit === '%' ? `${number}%` : `${number} ${unit}`;
+}
+/** The help popover's rule list for a column's typical range; rules use short numbers (`1k`) that the field accepts as typed. */
+function buildNumberRuleHelp({ low, high, exact, unit, } = DEFAULT_NUMBER_RULE_EXAMPLES) {
+    const lowText = formatRuleValue(low, unit);
+    const highText = formatRuleValue(high, unit);
+    const lowRule = formatRuleNumber(low);
+    const highRule = formatRuleNumber(high);
+    // Smallest value first: the low bound, the range, a value inside it, then the high bound.
+    return [
+        { rule: `>${lowRule}`, meaning: `More than ${lowText}` },
+        { rule: `>=${lowRule}`, meaning: `${lowText} or more` },
+        { rule: `${lowRule}–${highRule}`, meaning: `${lowText} to ${highText}` },
+        {
+            rule: formatRuleNumber(exact),
+            meaning: `Exactly ${formatRuleValue(exact, unit)}`,
+        },
+        { rule: `<${highRule}`, meaning: `Less than ${highText}` },
+        { rule: `<=${highRule}`, meaning: `${highText} or less` },
+    ];
+}
+/** Parses the typed rules listed by `buildNumberRuleHelp`. Accepts `-`, `–` or `—` for ranges and ignores spaces and thousands commas. */
+function parseNumberExpression(text) {
+    const normalized = text.replace(/[\s,]/g, '').replace(/[–—]/g, '-');
+    if (!normalized)
+        return { ok: true, range: undefined };
+    const comparison = COMPARISON_RE.exec(normalized);
+    if (comparison) {
+        const [, operator, raw] = comparison;
+        const value = toExpressionNumber(raw);
+        if (operator.startsWith('>')) {
+            return {
+                ok: true,
+                range: { min: value, minExclusive: operator === '>' },
+            };
+        }
+        return { ok: true, range: { max: value, maxExclusive: operator === '<' } };
+    }
+    const between = BETWEEN_RE.exec(normalized);
+    if (between) {
+        const min = toExpressionNumber(between[1]);
+        const max = toExpressionNumber(between[2]);
+        return min <= max ? { ok: true, range: { min, max } } : { ok: false };
+    }
+    const exact = EXACT_RE.exec(normalized);
+    if (exact) {
+        const value = toExpressionNumber(exact[1]);
+        return { ok: true, range: { min: value, max: value } };
+    }
+    return { ok: false };
+}
+function formatNumberRange(range) {
+    if (!range)
+        return '';
+    const { min, max, minExclusive, maxExclusive } = range;
+    if (min !== undefined && max !== undefined) {
+        return min === max ? String(min) : `${min}–${max}`;
+    }
+    if (min !== undefined)
+        return `${minExclusive ? '>' : '>='}${min}`;
+    if (max !== undefined)
+        return `${maxExclusive ? '<' : '<='}${max}`;
+    return '';
+}
+/** Splits a pasted list — commas, semicolons, spaces and new lines all separate IDs. Keeps first-seen order, drops duplicates. */
+function splitIdList(text) {
+    return Array.from(new Set(text
+        .split(/[\s,;]+/)
+        .map((id) => id.trim())
+        .filter(Boolean)));
+}
+function getOptionLabel(options, value) {
+    return options.find((option) => option.value === value)?.label ?? value;
+}
+/** Trigger summary for a multi-select: the first selected option (in option order) plus how many more, e.g. `Red +1`. */
+function summarizeSelection(values, options) {
+    if (values.length === 0)
+        return '';
+    const first = options.find((option) => values.includes(option.value))?.label ?? values[0];
+    return values.length > 1 ? `${first} +${values.length - 1}` : first;
+}
+function formatSelectedCount(selected, total) {
+    return `${selected} of ${total} selected`;
+}
+function toggleValue(values, value) {
+    return values.includes(value)
+        ? values.filter((v) => v !== value)
+        : [...values, value];
+}
+/** Every option between the two ends of the range, inclusive, in scale order. */
+function expandScaleRange(options, range) {
+    const fromIndex = options.findIndex((option) => option.value === range.from);
+    const toIndex = options.findIndex((option) => option.value === range.to);
+    if (fromIndex < 0 || toIndex < 0)
+        return [];
+    const [start, end] = fromIndex <= toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
+    return options.slice(start, end + 1).map((option) => option.value);
+}
+/** `Very Good` → `VG`, `Fair` → `F`. */
+function toInitials(label) {
+    return label
+        .split(/[\s-]+/)
+        .filter(Boolean)
+        .map((word) => word[0].toUpperCase())
+        .join('');
+}
+function formatScaleRange(options, range, short = false) {
+    const values = expandScaleRange(options, range);
+    if (values.length === 0)
+        return '';
+    const labelOf = (value) => {
+        const label = getOptionLabel(options, value);
+        return short ? toInitials(label) : label;
+    };
+    const first = labelOf(values[0]);
+    return values.length === 1
+        ? first
+        : `${first} – ${labelOf(values[values.length - 1])}`;
+}
+const DATE_PRESET_OPTIONS = [
+    { value: 'today', label: 'Today' },
+    { value: 'last7Days', label: 'Last 7 days' },
+    { value: 'last30Days', label: 'Last 30 days' },
+    { value: 'thisMonth', label: 'This month' },
+    { value: 'thisFiscalYear', label: 'This fiscal year' },
+];
+function toIsoDate(date) {
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${date.getFullYear()}-${month}-${day}`;
+}
+/** `YYYY-MM-DD` → local date (no timezone shift); empty → undefined. */
+function fromIsoDate(iso) {
+    if (!iso)
+        return undefined;
+    const [year, month, day] = iso.split('-').map(Number);
+    return new Date(year, month - 1, day);
+}
+function daysBefore(today, days) {
+    return new Date(today.getFullYear(), today.getMonth(), today.getDate() - days);
+}
+/** `fiscalYearStartMonth` is 1–12 (1 = January, 4 = April). */
+function resolveDatePreset(preset, today, fiscalYearStartMonth = 1) {
+    const to = toIsoDate(today);
+    switch (preset) {
+        case 'today':
+            return { from: to, to };
+        case 'last7Days':
+            return { from: toIsoDate(daysBefore(today, 6)), to };
+        case 'last30Days':
+            return { from: toIsoDate(daysBefore(today, 29)), to };
+        case 'thisMonth':
+            return {
+                from: toIsoDate(new Date(today.getFullYear(), today.getMonth(), 1)),
+                to,
+            };
+        case 'thisFiscalYear': {
+            const startMonthIndex = fiscalYearStartMonth - 1;
+            const startYear = today.getMonth() >= startMonthIndex
+                ? today.getFullYear()
+                : today.getFullYear() - 1;
+            return { from: toIsoDate(new Date(startYear, startMonthIndex, 1)), to };
+        }
+    }
+}
+function resolveDateRange(range, today, fiscalYearStartMonth = 1) {
+    if (range.preset)
+        return resolveDatePreset(range.preset, today, fiscalYearStartMonth);
+    return { from: range.from, to: range.to };
+}
+function formatIsoDate(iso) {
+    const [year, month, day] = iso.split('-').map(Number);
+    return new Date(year, month - 1, day).toLocaleDateString('en-GB', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+function formatDateRange(range) {
+    if (range.preset)
+        return (DATE_PRESET_OPTIONS.find((option) => option.value === range.preset)
+            ?.label ?? '');
+    if (range.from && range.to)
+        return `${formatIsoDate(range.from)} – ${formatIsoDate(range.to)}`;
+    if (range.from)
+        return `From ${formatIsoDate(range.from)}`;
+    if (range.to)
+        return `Until ${formatIsoDate(range.to)}`;
+    return '';
+}
+const TRI_STATE_OPTIONS = [
+    { value: 'any', label: 'Any' },
+    { value: 'yes', label: 'Yes' },
+    { value: 'no', label: 'No' },
+];
+function isFilterValueActive(value) {
+    if (!value)
+        return false;
+    switch (value.type) {
+        case 'list':
+            return value.values.length > 0;
+        case 'ids':
+            return value.ids.length > 0;
+        case 'contains':
+            return value.text.trim().length > 0;
+        case 'number':
+            return value.range.min !== undefined || value.range.max !== undefined;
+        case 'date':
+            return Boolean(value.range.preset || value.range.from || value.range.to);
+        case 'scale':
+        case 'bool':
+            return true;
+    }
+}
+const FILTER_FOCUS_RING = 'outline-none focus-visible:ring-2 focus-visible:ring-primary/30';
+/** Text-link actions such as Clear and "Show all". */
+const FILTER_LINK_CLASS_NAME = cn('cursor-pointer rounded-sm text-xs font-medium text-primary hover:underline', FILTER_FOCUS_RING);
+/** One look for every pickable row in a filter (list rows, Yes/No, date presets, number rules). */
+function getOptionRowClassName(selected = false, className) {
+    return cn('flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-left text-sm text-foreground transition-colors', FILTER_FOCUS_RING, selected ? 'bg-primary/5 font-medium text-primary' : 'hover:bg-muted/60', className);
+}
+/** A selectable pill (chip options, range presets); one height and shape everywhere. */
+function getPillClassName(selected) {
+    return getSelectableOptionClassName(selected, 'inline-flex h-8 items-center gap-1.5 rounded-full px-3');
+}
+/** Search box above a list (pick lists, saved searches); matches the inputs' height and corners. */
+const FILTER_SEARCH_BOX_CLASS_NAME = 'flex h-9 items-center gap-2 rounded-md border border-input bg-card px-3 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30';
+/** Solid count bubble, e.g. a filter button's or card title's selected count. */
+const FILTER_COUNT_BADGE_CLASS_NAME = 'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold leading-none text-primary-foreground';
+/** A fixed column count, or (when omitted) as many columns as fit at `minWidth` each. */
+function getGridColumnsStyle(columns, minWidth = '7rem') {
+    return {
+        gridTemplateColumns: columns
+            ? `repeat(${columns}, minmax(0, 1fr))`
+            : `repeat(auto-fill, minmax(${minWidth}, 1fr))`,
+    };
+}
+/** Selectable option: a pill chip or a tile, primary-tinted when selected. Unselected ones sit a shade darker than the card so they read against it. */
+function getSelectableOptionClassName(selected, className) {
+    return cn('cursor-pointer border text-xs transition-colors', FILTER_FOCUS_RING, selected
+        ? 'border-primary bg-primary/5 font-medium text-primary'
+        : 'border-border bg-background text-foreground hover:bg-secondary dark:bg-muted/60 dark:hover:bg-muted', className);
+}
+/** Shared look of every filter-row control (trigger buttons and inline inputs). */
+function getFilterFieldClassName(state, className) {
+    return cn('flex h-7 w-full min-w-0 items-center gap-1 rounded-md border px-2 text-xs transition-colors outline-none', 'focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/30', state === 'empty' &&
+        'border-input bg-card text-foreground placeholder:text-placeholder', state === 'applied' &&
+        'border-primary bg-primary/5 font-medium text-primary', state === 'invalid' && 'border-destructive bg-card text-destructive', state === 'disabled' &&
+        'pointer-events-none border-dashed border-border bg-transparent', className);
+}
+
+function getPanelClassName(variant, active, className) {
+    return cn('flex min-w-0 flex-col gap-3', variant === 'card' && 'rounded-xl border bg-card p-4', variant === 'card' && (active ? 'border-primary' : 'border-border'), variant === 'popover' && 'p-3', className);
+}
+function getTitleClassName(variant) {
+    return cn('flex items-center gap-2 text-foreground', variant === 'section'
+        ? 'text-xs font-medium text-label'
+        : 'text-sm font-semibold');
+}
+
+/** Shell for one filter: title, selected badge, applied summary, Clear and a hint. Same content in popovers and on full-page surfaces. */
+function FilterPanel({ title, status, selectedCount, summary, action, onClear, hint, active = false, variant = 'card', className, children, }) {
+    const hasHeader = Boolean(title || status || summary || action || onClear);
+    return (jsxs("section", { className: getPanelClassName(variant, active, className), children: [hasHeader && (jsxs("header", { className: "flex min-h-5 items-center justify-between gap-3", children: [title ? (jsxs("h3", { className: getTitleClassName(variant), children: [title, selectedCount ? (jsx("span", { className: FILTER_COUNT_BADGE_CLASS_NAME, children: selectedCount })) : null] })) : (jsx("span", { className: "text-xs text-muted-foreground", children: status })), jsxs("div", { className: "flex items-center gap-3 text-xs", children: [summary && (jsx("span", { className: "font-medium text-primary", children: summary })), action, onClear && (jsx("button", { type: "button", onClick: onClear, className: FILTER_LINK_CLASS_NAME, children: "Clear" }))] })] })), children, hint && jsx("p", { className: "text-xs text-muted-foreground", children: hint })] }));
+}
+
 function Checkbox({ className, ...props }) {
     return (jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer bg-[var(--muted)] border-[var(--muted)] dark:bg-input/30 dark:border-transparent data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 cursor-pointer rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none", children: jsx(Check, { className: "size-3.5" }) }) }));
 }
 
+// Sub-pixel rounding leaves scrollTop a hair short of the end.
+const EDGE_TOLERANCE_PX = 1;
+function getScrollFadeState(el) {
+    const { scrollTop, scrollHeight, clientHeight } = el;
+    return {
+        top: scrollTop > EDGE_TOLERANCE_PX,
+        bottom: scrollTop + clientHeight < scrollHeight - EDGE_TOLERANCE_PX,
+    };
+}
+const FADE_BASE_CLASS_NAME = 'pointer-events-none absolute inset-x-0 h-8 from-card to-transparent';
+
+function useScrollFade() {
+    const ref = useRef(null);
+    const [state, setState] = useState({
+        top: false,
+        bottom: false,
+    });
+    const update = useCallback(() => {
+        if (!ref.current)
+            return;
+        const next = getScrollFadeState(ref.current);
+        // Skip no-op updates (observers fire often).
+        setState((current) => current.top === next.top && current.bottom === next.bottom
+            ? current
+            : next);
+    }, []);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        update();
+        const resizeObserver = new ResizeObserver(update);
+        resizeObserver.observe(el);
+        const mutationObserver = new MutationObserver(update);
+        mutationObserver.observe(el, { childList: true, subtree: true });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [update]);
+    return { ref, update, ...state };
+}
+
+/** Scroll container that fades its top / bottom edge while more content is hidden there, so it reads as scrollable. */
+function ScrollFade({ className, wrapperClassName, children, ...props }) {
+    const { ref, update, top, bottom } = useScrollFade();
+    return (jsxs("div", { className: cn('relative', wrapperClassName), children: [jsx("div", { ...props, ref: ref, onScroll: update, className: className, children: children }), top && (jsx("div", { "aria-hidden": "true", className: cn(FADE_BASE_CLASS_NAME, 'top-0 bg-gradient-to-b') })), bottom && (jsx("div", { "aria-hidden": "true", className: cn(FADE_BASE_CLASS_NAME, 'bottom-0 bg-gradient-to-t') }))] }));
+}
+
+// Sub-pixel layout rounding makes scrollWidth exceed clientWidth by a hair on
+// labels that are not actually clipped.
+const OVERFLOW_TOLERANCE_PX = 1;
+function findClippedLabel(root) {
+    const spans = root.querySelectorAll(':scope > span');
+    for (const span of Array.from(spans)) {
+        // Width for a single-line ellipsis; height for a multi-line clamp.
+        if (span.scrollWidth > span.clientWidth + OVERFLOW_TOLERANCE_PX ||
+            span.scrollHeight > span.clientHeight + OVERFLOW_TOLERANCE_PX) {
+            return span;
+        }
+    }
+    return null;
+}
+/**
+ * Returns the full text of the first direct-child `<span>` of `ref` that is
+ * clipped by its container (i.e. showing an ellipsis), else `null` — so callers
+ * can surface a tooltip only when the label is actually unreadable.
+ *
+ * Re-measures on element resize (sidebar expand/collapse, window resize) and on
+ * label text changes.
+ */
+function useTruncatedText(ref) {
+    const [text, setText] = useState(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        let frame = 0;
+        const measure = () => {
+            const label = findClippedLabel(el);
+            setText(label?.textContent?.trim() || null);
+        };
+        const schedule = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(measure);
+        };
+        schedule();
+        const resizeObserver = new ResizeObserver(schedule);
+        resizeObserver.observe(el);
+        const mutationObserver = new MutationObserver(schedule);
+        mutationObserver.observe(el, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            cancelAnimationFrame(frame);
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [ref]);
+    return text;
+}
+
+/** Single-line label that shows its full text in a tooltip, only while it is cut off. */
+function TruncatedLabel({ text, className, }) {
+    const ref = useRef(null);
+    const clipped = useTruncatedText(ref);
+    return (jsx(TooltipProvider, { delayDuration: 300, children: jsxs(Tooltip, { open: clipped ? undefined : false, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { ref: ref, className: "block w-full min-w-0", children: jsx("span", { className: cn('block truncate', className), children: text }) }) }), jsx(TooltipContent, { children: text })] }) }));
+}
+
+function filterOptionsByQuery(options, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return [...options];
+    return options.filter((option) => option.label.toLowerCase().includes(needle));
+}
+const getChipClassName = getPillClassName;
+function getTileClassName(selected) {
+    return getSelectableOptionClassName(selected, 'flex min-h-12 min-w-0 flex-col items-center justify-center gap-0.5 rounded-md px-2 py-1.5 text-center');
+}
+/** The list's search box only appears once there are enough options to need it. */
+const SEARCH_MIN_OPTIONS = 9;
+/** Long option sets scroll inside the card or popover instead of growing it. */
+const OPTIONS_SCROLL_CLASS_NAME = 'max-h-48 overflow-y-auto';
+/** Fills a stretched card: at least the usual height, growing into any space the row gives it (never driving the row height). */
+const OPTIONS_FILL_CLASS_NAME = 'min-h-48 flex-1 basis-0 overflow-y-auto';
+const FILL_WRAPPER_CLASS_NAME = 'flex min-h-0 flex-1 flex-col';
+/** Card lists flow into as many columns as fit; popover lists stay one column. */
+const LIST_COLUMN_MIN_WIDTH = '10rem';
+const getOptionsScrollClassName = (fill) => fill ? OPTIONS_FILL_CLASS_NAME : OPTIONS_SCROLL_CLASS_NAME;
+const LIST_ROW_CLASS_NAME = getOptionRowClassName();
+/** Picking a value: a single-choice list replaces (or clears) it, a multi-choice list toggles it. */
+const pickValue = (values, value, single) => {
+    if (!single)
+        return toggleValue(values, value);
+    return values.includes(value) ? [] : [value];
+};
+/** The single-choice counterpart of the checkbox: same size, primary dot when picked. */
+const LIST_RADIO_CLASS_NAME = 'size-4.5 shrink-0 cursor-pointer accent-primary';
+/** Outlined (not filled) box until checked; the border is dark enough to read on white. */
+const LIST_CHECKBOX_CLASS_NAME = 'size-4.5 border-muted-foreground/50 bg-card dark:border-muted-foreground/60 dark:bg-transparent';
+const SEARCH_BOX_CLASS_NAME = FILTER_SEARCH_BOX_CLASS_NAME;
+
+function usePickListFilter({ options, value, layout, }) {
+    const [query, setQuery] = useState('');
+    const visibleOptions = useMemo(() => (layout === 'list' ? filterOptionsByQuery(options, query) : options), [layout, options, query]);
+    const selectedCount = useMemo(() => options.filter((option) => value.includes(option.value)).length, [options, value]);
+    return { query, setQuery, visibleOptions, selectedCount };
+}
+
+const getSearchInputLabel = (ariaLabel) => `Search ${ariaLabel}`;
+
+function OptionSwatch({ color, round, }) {
+    if (!color)
+        return null;
+    return (jsx("span", { "aria-hidden": "true", className: cn('shrink-0 border border-border', round ? 'size-2.5 rounded-full' : 'size-4 rounded-sm'), style: { backgroundColor: color } }));
+}
+/** Multi-select filter: a searchable checkbox list, or pill / tile toggles. Long sets scroll within a max height. */
+function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list', searchPlaceholder, alwaysSearchable = false, columns = 5, fill = false, listClassName, single = false, }) {
+    const { query, setQuery, visibleOptions, selectedCount } = usePickListFilter({
+        options,
+        value,
+        layout,
+    });
+    const radioName = useId$2();
+    const scrollClassName = getOptionsScrollClassName(fill);
+    // Rows with a right-hand hint read best in one column.
+    const multiColumn = fill && !options.some((option) => option.hint);
+    const wrapperClassName = fill ? FILL_WRAPPER_CLASS_NAME : undefined;
+    const toggle = (option) => onChange(pickValue(value, option.value, single));
+    if (options.length === 0) {
+        return (jsx("p", { className: "px-1 py-2 text-xs text-muted-foreground", children: "No options available" }));
+    }
+    if (layout === 'list') {
+        return (jsxs("div", { className: cn('flex flex-col gap-2', fill && FILL_WRAPPER_CLASS_NAME), "aria-label": ariaLabel, role: "group", children: [searchPlaceholder !== undefined &&
+                    (alwaysSearchable || options.length >= SEARCH_MIN_OPTIONS) && (jsxs("label", { className: SEARCH_BOX_CLASS_NAME, children: [jsx(Search, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), jsx("input", { value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, "aria-label": getSearchInputLabel(ariaLabel), className: "min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-placeholder" })] })), jsxs("div", { className: "flex items-center justify-between px-1 text-xs text-muted-foreground", children: [jsx("span", { children: formatSelectedCount(selectedCount, options.length) }), selectedCount > 0 && (jsx("button", { type: "button", onClick: () => onChange([]), className: FILTER_LINK_CLASS_NAME, children: "Clear" }))] }), jsx(ScrollFade, { className: cn(multiColumn && 'grid content-start gap-x-3', scrollClassName, listClassName), style: multiColumn
+                        ? getGridColumnsStyle(undefined, LIST_COLUMN_MIN_WIDTH)
+                        : undefined, wrapperClassName: wrapperClassName, children: visibleOptions.map((option) => (jsxs("label", { className: LIST_ROW_CLASS_NAME, children: [single ? (jsx("input", { type: "radio", name: radioName, checked: value.includes(option.value), 
+                                // A click on the picked row clears it (radios can't be unticked natively).
+                                onClick: () => toggle(option), onChange: () => undefined, className: LIST_RADIO_CLASS_NAME })) : (jsx(Checkbox, { className: LIST_CHECKBOX_CLASS_NAME, checked: value.includes(option.value), onCheckedChange: () => toggle(option) })), option.content ? (jsx("span", { className: "min-w-0 flex-1", children: option.content })) : (jsx(TruncatedLabel, { text: option.label, className: "flex-1" })), (option.count ?? option.hint) !== undefined && (jsx("span", { className: "shrink-0 text-muted-foreground tabular-nums", children: option.count ?? option.hint })), jsx(OptionSwatch, { color: option.swatch })] }, option.value))) })] }));
+    }
+    if (layout === 'tiles') {
+        return (jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('grid content-start gap-1.5', scrollClassName), style: getGridColumnsStyle(columns), children: visibleOptions.map((option) => (jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getTileClassName(value.includes(option.value)), children: [jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsx("span", { className: "text-xs font-normal text-muted-foreground", children: option.count }))] }, option.value))) }));
+    }
+    return (jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('flex flex-wrap content-start gap-1.5', scrollClassName), children: visibleOptions.map((option) => (jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getChipClassName(value.includes(option.value)), children: [jsx(OptionSwatch, { color: option.swatch, round: true }), jsx("span", { children: option.label }), option.count !== undefined && (jsx("span", { className: "font-normal text-muted-foreground", children: option.count }))] }, option.value))) }));
+}
+
 const TRIGGER_BASE = 'h-9 !w-fit shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] gap-2 text-foreground bg-card hover:bg-muted/40 border border-border rounded-lg text-sm font-medium px-3';
-const TRIGGER_ACTIVE = '!border-primary text-primary shadow-[0_0_0_3px_rgba(49,122,81,0.10)]';
+const TRIGGER_ACTIVE = '!border-primary bg-primary/5 text-primary';
 const CONTENT_BASE = 'min-w-[8rem]';
 const isFilterActive = (value, resetValue) => !!value && value !== resetValue;
+function collectText(node) {
+    if (typeof node === 'string' || typeof node === 'number')
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(collectText).join(' ');
+    if (isValidElement(node))
+        return Children.toArray(node.props.children).map(collectText).join(' ');
+    return '';
+}
+/** The visible text inside a label, e.g. a JSX name + description becomes "Name Description". */
+const getNodeText = (node) => collectText(node).replace(/\s+/g, ' ').trim();
+/** A JSX label keeps its look as the row's `content`; its text (or the value) is what search and screen readers use. */
+const toPickListOptions = (options) => options.map((option) => typeof option.label === 'string'
+    ? { value: option.value, label: option.label }
+    : {
+        value: option.value,
+        label: getNodeText(option.label) || option.value,
+        content: option.label,
+    });
 
 /**
- * Multi-select filter dropdown — Popover + checkbox list, matching the
- * `FilterSelect` trigger look (filter icon + count badge when active).
- * Selecting items keeps the popover open; the trigger shows the count.
+ * Multi-select filter dropdown with the `FilterSelect` trigger look (filter icon + count badge when active).
+ * Opens a pick list: a searchable checkbox list with "x of y selected · Clear", or chips/tiles under a
+ * title, count and Clear. Selecting keeps the popover open.
  */
-const FilterMultiSelect = ({ label, value, onChange, options, triggerClassName, contentClassName, listClassName, modal = false, }) => {
+const FilterMultiSelect = ({ label, value, onChange, options, triggerClassName, contentClassName, listClassName, modal = false, pickListLayout = 'list', searchPlaceholder, }) => {
     const active = value.length > 0;
-    const toggle = (optValue) => {
-        if (value.includes(optValue)) {
-            onChange(value.filter((v) => v !== optValue));
-        }
-        else {
-            onChange([...value, optValue]);
-        }
-    };
-    return (jsxs(Popover, { modal: modal, children: [jsx(PopoverTrigger, { className: cn(TRIGGER_BASE, 'inline-flex items-center justify-between', active && TRIGGER_ACTIVE, triggerClassName), children: jsxs("span", { className: "flex items-center gap-2", children: [jsx(Funnel, { className: cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": "true" }), label, active && (jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded bg-primary/10 px-1 text-[10px] font-semibold leading-none text-primary", children: value.length }))] }) }), jsx(PopoverContent, { align: "start", className: cn('w-56 p-1', contentClassName), children: jsx("div", { className: cn('max-h-[18rem] overflow-y-auto', listClassName), children: options.map((opt) => {
-                        const checked = value.includes(opt.value);
-                        return (jsxs("button", { type: "button", onClick: () => toggle(opt.value), className: "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-foreground hover:bg-muted/60", children: [jsx(Checkbox, { checked: checked, onCheckedChange: () => toggle(opt.value), 
-                                    // Stop the inner checkbox click from double-toggling via the button.
-                                    onClick: (e) => e.stopPropagation() }), jsx("span", { className: "flex-1 truncate", children: opt.label })] }, opt.value));
-                    }) }) })] }));
+    const isList = pickListLayout === 'list';
+    return (jsxs(Popover, { modal: modal, children: [jsx(PopoverTrigger, { className: cn(TRIGGER_BASE, 'inline-flex items-center justify-between', active && TRIGGER_ACTIVE, triggerClassName), children: jsxs("span", { className: "flex items-center gap-2", children: [jsx(Funnel, { className: cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": "true" }), label, active && (jsx("span", { className: cn('ml-1', FILTER_COUNT_BADGE_CLASS_NAME), children: value.length }))] }) }), jsx(PopoverContent, { align: "start", sideOffset: 4, className: cn('w-64 p-0', contentClassName), children: jsx(FilterPanel, { variant: "popover", 
+                    // A searchable list has its own "x of y selected · Clear" row.
+                    title: isList ? undefined : label, selectedCount: isList ? undefined : value.length, onClear: !isList && active ? () => onChange([]) : undefined, children: jsx(PickListFilter, { ariaLabel: label, layout: pickListLayout, options: toPickListOptions(options), value: value, onChange: onChange, searchPlaceholder: isList ? (searchPlaceholder ?? 'Search') : undefined, alwaysSearchable: true, listClassName: listClassName }) }) })] }));
 };
 
 const KYC_STATUS = {
@@ -21669,6 +22234,34 @@ function useRowEditing({ saving, onEditChange, onSaveRow, }) {
         handleEditIconClick,
     };
 }
+/**
+ * Measures the rows area so a loading skeleton can cover exactly the rows it replaces —
+ * the rows stay in the layout (hidden), so column widths and table height never jump.
+ */
+function useLoadingOverlay(scrollRef, headRef, bodyRef, loading) {
+    const [box, setBox] = useState(null);
+    useLayoutEffect(() => {
+        const scroll = scrollRef.current;
+        const head = headRef.current;
+        const body = bodyRef.current;
+        if (!loading || !scroll || !head || !body) {
+            setBox(null);
+            return;
+        }
+        const measure = () => setBox({
+            top: head.offsetHeight,
+            width: scroll.scrollWidth,
+            height: body.offsetHeight,
+            visibleWidth: scroll.clientWidth,
+        });
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(scroll);
+        observer.observe(body);
+        return () => observer.disconnect();
+    }, [loading, scrollRef, headRef, bodyRef]);
+    return box;
+}
 
 function normalizeOptions(options) {
     return options.map((opt) => typeof opt === 'string'
@@ -21699,6 +22292,30 @@ function pinnedHeaderClass() {
 function pinnedCellClass(pinnedBg) {
     return cn('sticky right-0 z-10', PINNED_BEFORE, PINNED_SHADOW, pinnedBg);
 }
+const PINNED_RIGHT_WIDTH = '72px';
+/** Width for a header/body/filter cell: the resized width var while resized or dragging, a fixed width for the pinned actions column. */
+function getColumnWidthStyle(key, isSized, isPinnedRight) {
+    if (isSized) {
+        const width = `var(--col-w-${key})`;
+        return { width, minWidth: width, maxWidth: width };
+    }
+    return isPinnedRight
+        ? {
+            width: PINNED_RIGHT_WIDTH,
+            minWidth: PINNED_RIGHT_WIDTH,
+            maxWidth: PINNED_RIGHT_WIDTH,
+        }
+        : undefined;
+}
+function hasFilterRow(columns, filterRowLeading) {
+    return (filterRowLeading != null || columns.some((col) => col.filter !== undefined));
+}
+/** `TableRowsSkeleton` bar (52px) plus its gap (8px). */
+const SKELETON_ROW_PX = 60;
+/** How many skeleton bars fill a rows area of `height` px (at least one). */
+function getSkeletonRowCount(height) {
+    return Math.max(1, Math.floor(height / SKELETON_ROW_PX));
+}
 
 const isValidHex = (v) => /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(v);
 /**
@@ -21790,8 +22407,52 @@ function EditableCellContent({ col, row, value, isEditing, width, onEditValueCha
     }
     return jsx(Fragment$2, { children: clipToWidth(stringValue, width) });
 }
+const FILTER_CELL = 'px-0.5 py-0.5 font-normal border-b border-solid !border-border';
+/** Opt-in second header row holding each column's filter control. */
+function FilterRow({ columns, leading, showEditColumn, showSelectionColumn, isArchiveView, vBorder, localWidths, draggingKey, }) {
+    const leadingCellCount = Number(showEditColumn) + Number(showSelectionColumn);
+    return (jsxs("tr", { children: [Array.from({ length: leadingCellCount }, (_, index) => (jsx("th", { className: cn(FILTER_CELL, 'first:!pl-6 text-left', vBorder), children: index === 0 ? leading : null }, `leading-${index}`))), columns.map((col) => {
+                const isPinnedRight = col.key === 'actions';
+                return (jsx("th", { className: cn(FILTER_CELL, 'first:!pl-6 text-left', vBorder, isArchiveView && !isPinnedRight && 'pl-1', isPinnedRight && pinnedHeaderClass()), style: getColumnWidthStyle(col.key, Boolean(localWidths[col.key]) || draggingKey === col.key, isPinnedRight), children: col.filter }, col.key.toString()));
+            })] }));
+}
+/** Keeps the real pagination in the layout (hidden) and lays a placeholder over it, so the footer height never jumps. */
+function PaginationLoading({ children, }) {
+    return (jsxs("div", { className: "relative", children: [jsx("div", { className: "invisible", children: children }), jsxs("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-center justify-between bg-card px-4", children: [jsx(SquareSkeleton, { height: 14, width: 160, rounded: "sm" }), jsx(SquareSkeleton, { height: 28, width: 220, rounded: "md" })] })] }));
+}
 
-function DataEditableTable({ data, columns, onRowClick, enableSelection = false, columnStyles = {}, onEditChange, onSaveRow, sortBy, setSortBy, sortOrder, setSortOrder, saving, selectedRows = [], onSelectionChange, isArchiveView = false, selectionInArchiveView = false, permissionKey = '', columnWidths, onColumnResize, pagination, fetchBusinessContacts, showGrid = true, striped = true, emptyState, }) {
+/** Label line + input block — mirrors a `Field`. */
+function FieldSkeleton() {
+    return (jsxs("div", { className: "space-y-2", children: [jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsx(SquareSkeleton, { height: 40, className: "w-full", rounded: "md" })] }));
+}
+/**
+ * Loading placeholder that matches a `FormSectionCard` — the tinted header band
+ * (icon square + title + description) above a body of `Field` placeholders and
+ * an optional footer action row.
+ */
+function FormSectionCardSkeleton({ fields = 4, columns = 2, footer = 'end', description = true, }) {
+    return (jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-xl border border-border bg-card shadow-card", children: [jsxs("div", { className: "flex items-center gap-3 border-b border-border bg-secondary px-5 py-4", children: [jsx(SquareSkeleton, { height: 40, width: 40, rounded: "md" }), jsxs("div", { className: "space-y-1.5", children: [jsx(SquareSkeleton, { height: 14, width: 180, rounded: "full" }), description && jsx(SquareSkeleton, { height: 11, width: 260, rounded: "full" })] })] }), jsxs("div", { className: "p-5", children: [jsx("div", { className: cn('grid gap-x-6 gap-y-5', columns === 2 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'), children: Array.from({ length: fields }).map((_, i) => (jsx(FieldSkeleton, {}, i))) }), footer !== 'none' && (jsxs("div", { className: cn('mt-8 flex items-center gap-3 pt-4', footer === 'between' ? 'justify-between' : 'justify-end'), children: [footer === 'between' && (jsx(SquareSkeleton, { height: 36, width: 90, rounded: "md" })), jsx(SquareSkeleton, { height: 36, width: 120, rounded: "md" })] }))] })] }));
+}
+/** Table placeholder: toolbar (search + filters) + rows. Mirrors a data grid. */
+function TableSkeleton({ rows = 8 }) {
+    return (jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex gap-2", children: [jsx(SquareSkeleton, { className: "h-9 flex-1", rounded: "md" }), jsx(SquareSkeleton, { className: "h-9 w-44", rounded: "md" }), jsx(SquareSkeleton, { className: "h-9 w-48", rounded: "md" })] }), Array.from({ length: rows }).map((_, i) => (jsx(SquareSkeleton, { className: "h-12 w-full", rounded: "md" }, i)))] }));
+}
+/** Listing table while it loads: one full-width bar per row, like the gem and diamond inventory tables. */
+function TableRowsSkeleton({ rows = 10, className }) {
+    return (jsx("div", { className: cn('flex w-full flex-col gap-2 overflow-hidden', className), "aria-busy": "true", "aria-label": "Loading", children: Array.from({ length: rows }).map((_, i) => (
+        // shrink-0: in a height-capped flex parent the bars would otherwise squash below 52px.
+        jsx(SquareSkeleton, { height: 52, className: "w-full shrink-0" }, i))) }));
+}
+/** Detail page: header row + key-value section cards. Mirrors `DetailPageLayout`. */
+function DetailPageSkeleton({ sections = 3, }) {
+    return (jsxs("div", { className: "space-y-5", children: [jsxs("div", { className: "flex items-center justify-between gap-4", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(SquareSkeleton, { height: 32, width: 32, rounded: "md" }), jsxs("div", { className: "space-y-1.5", children: [jsx(SquareSkeleton, { height: 20, width: 192, rounded: "full" }), jsx(SquareSkeleton, { height: 12, width: 128, rounded: "full" })] })] }), jsx(SquareSkeleton, { height: 36, width: 128, rounded: "md" })] }), Array.from({ length: sections }).map((_, s) => (jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-card", children: [jsxs("div", { className: "flex items-center gap-3 border-b border-border bg-secondary px-5 py-4", children: [jsx(SquareSkeleton, { height: 32, width: 32, rounded: "lg" }), jsx(SquareSkeleton, { height: 16, width: 160, rounded: "full" })] }), jsx("div", { className: "grid grid-cols-1 gap-5 p-5 md:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (jsxs("div", { className: "space-y-1.5", children: [jsx(SquareSkeleton, { height: 10, width: 80, rounded: "full" }), jsx(SquareSkeleton, { height: 14, width: 128, rounded: "full" })] }, i))) })] }, s)))] }));
+}
+/** Document detail page (invoice, memo…): header, `DocumentHero` and `DetailSection` placeholders. */
+function DocumentDetailSkeleton({ aside = 'payment', sections = 3, label = 'Loading document', }) {
+    return (jsxs("div", { role: "status", "aria-busy": "true", "aria-label": label, className: "space-y-4", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(SquareSkeleton, { height: 14, width: 80, rounded: "full" }), jsx("span", { className: "h-5 w-px bg-border" }), jsx(SquareSkeleton, { height: 28, width: 200, rounded: "md" }), jsx(SquareSkeleton, { height: 22, width: 72, rounded: "full" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(SquareSkeleton, { height: 36, width: 112, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 80, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 128, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 36, rounded: "lg" })] })] }), jsxs("section", { "aria-hidden": "true", className: "grid grid-cols-1 overflow-hidden rounded-2xl border border-border bg-card md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]", children: [jsxs("div", { className: "flex flex-col justify-center space-y-3 px-5 py-4 sm:px-7 sm:py-4", children: [jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsx(SquareSkeleton, { height: 40, width: 220, rounded: "md" }), aside !== 'none' && (jsxs("div", { className: "w-full max-w-xl space-y-2 pt-1", children: [jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" }), jsxs("div", { className: "flex justify-between", children: [jsx(SquareSkeleton, { height: 11, width: 88, rounded: "full" }), jsx(SquareSkeleton, { height: 11, width: 40, rounded: "full" })] })] }))] }), jsx("div", { className: "border-t border-border bg-muted/40 px-5 py-2 md:border-l md:border-t-0", children: [0, 1, 2, 3].map((i) => (jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-border py-1.5 last:border-b-0", children: [jsx(SquareSkeleton, { height: 24, width: 24, rounded: "md" }), jsx(SquareSkeleton, { height: 12, width: 72, rounded: "full" }), jsx(SquareSkeleton, { height: 12, width: 88, rounded: "full", className: "ml-auto" })] }, i))) })] }), Array.from({ length: sections }).map((_, s) => (jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-3", children: [jsx(SquareSkeleton, { height: 28, width: 28, rounded: "lg" }), jsx(SquareSkeleton, { height: 15, width: 128, rounded: "full" })] }), jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: s === 1 ? 4 : 2 }).map((__, row) => (jsx(SquareSkeleton, { height: s === 1 ? 36 : 14, className: row % 2 ? 'w-3/4' : 'w-full', rounded: "md" }, row))) })] }, s))), jsx("span", { className: "sr-only", children: label })] }));
+}
+
+function DataEditableTable({ data, columns, onRowClick, enableSelection = false, columnStyles = {}, onEditChange, onSaveRow, sortBy, setSortBy, sortOrder, setSortOrder, saving, selectedRows = [], onSelectionChange, isArchiveView = false, selectionInArchiveView = false, permissionKey = '', columnWidths, onColumnResize, pagination, fetchBusinessContacts, showGrid = true, striped = true, emptyState, loading = false, loadingRows = 10, filterRowLeading, }) {
     const showSelectionColumn = enableSelection && (!isArchiveView || selectionInArchiveView);
     const vBorder = showGrid ? 'border-r' : '';
     const { localWidths, draggingKey, tableRef, handleResizeMouseDown } = useColumnResize({
@@ -21804,6 +22465,11 @@ function DataEditableTable({ data, columns, onRowClick, enableSelection = false,
         onSelectionChange,
     });
     const { editingRow, editValues, savingRow, handleEditValueChange, handleEditIconClick, } = useRowEditing({ saving, onEditChange, onSaveRow });
+    const scrollRef = useRef(null);
+    const headRef = useRef(null);
+    const bodyRef = useRef(null);
+    // Rows stay in the layout while loading; the skeleton covers them so nothing resizes.
+    const overlay = useLoadingOverlay(scrollRef, headRef, bodyRef, loading);
     const handleColumnClick = (columnKey, sortable) => {
         if (!sortable || !setSortBy || !setSortOrder)
             return;
@@ -21815,25 +22481,17 @@ function DataEditableTable({ data, columns, onRowClick, enableSelection = false,
             setSortOrder('asc');
         }
     };
-    return (jsxs("div", { className: "w-full h-full rounded-lg border border-border bg-card flex flex-col overflow-hidden", children: [jsxs("div", { className: "overflow-auto flex-1", children: [jsxs("table", { ref: tableRef, className: "min-w-[70vh] w-full text-xs text-center border-separate", style: { borderSpacing: 0 }, children: [jsx("thead", { className: "sticky top-0 z-20 !bg-table-header border-b border-border text-secondary-foreground text-sm", children: jsxs("tr", { className: "h-[40px]", children: [!isArchiveView && (jsx("th", { className: cn('px-3 py-1.5 text-left font-semibold w-8 first:!pl-6 border-b border-solid !border-border', vBorder) })), showSelectionColumn && (jsx("th", { className: cn('px-3 py-1.5 text-center font-semibold first:!pl-6 border-b border-solid !border-border', vBorder), children: jsx(Checkbox, { checked: allSelected
-                                                    ? true
-                                                    : someSelected
-                                                        ? 'indeterminate'
-                                                        : false, onCheckedChange: toggleSelectAll }) })), columns.map((col) => {
-                                            const w = localWidths[col.key];
-                                            const isDragging = draggingKey === col.key;
-                                            const isPinnedRight = col.key === 'actions';
-                                            const thStyle = w || isDragging
-                                                ? {
-                                                    width: `var(--col-w-${col.key})`,
-                                                    minWidth: `var(--col-w-${col.key})`,
-                                                    maxWidth: `var(--col-w-${col.key})`,
-                                                }
-                                                : isPinnedRight
-                                                    ? { width: '72px', minWidth: '72px', maxWidth: '72px' }
-                                                    : undefined;
-                                            return (jsxs("th", { className: cn('px-4 py-1.5 relative first:!pl-6 text-left whitespace-nowrap font-semibold text-sm border-b border-solid !border-border', vBorder, isArchiveView && !isPinnedRight && 'pl-1', col.sortable && '!cursor-pointer hover:bg-muted/60', isDragging && 'bg-primary/10', isPinnedRight && pinnedHeaderClass()), style: thStyle, onClick: () => handleColumnClick(col.key, col.sortable), children: [jsxs("div", { className: cn('gap-2', w && 'overflow-hidden', col.sortable && 'flex items-center !cursor-pointer', isPinnedRight && 'flex items-center justify-center'), children: [w && typeof col.header === 'string' ? (jsx("span", { className: "truncate", title: col.header, children: col.header })) : (col.header), col.sortable && (jsx(SortIcon, { active: sortBy === col.key, order: sortOrder }))] }), jsx("div", { className: cn('absolute right-0 top-0 h-full w-1.5 z-20 cursor-col-resize select-none transition-colors hover:bg-primary/40', isDragging && 'bg-primary/40'), onMouseDown: (e) => handleResizeMouseDown(e, col.key), onClick: (e) => e.stopPropagation() })] }, col.key.toString()));
-                                        })] }) }), jsx("tbody", { children: data.map((row, rowIndex) => {
+    return (jsxs("div", { className: "w-full h-full rounded-lg border border-border bg-card flex flex-col overflow-hidden", children: [jsxs("div", { ref: scrollRef, className: "relative overflow-auto flex-1", children: [jsxs("table", { ref: tableRef, className: "min-w-[70vh] w-full text-xs text-center border-separate", style: { borderSpacing: 0 }, children: [jsxs("thead", { ref: headRef, className: "sticky top-0 z-20 !bg-table-header border-b border-border text-secondary-foreground text-sm", children: [jsxs("tr", { className: "h-[40px]", children: [!isArchiveView && (jsx("th", { className: cn('px-3 py-1.5 text-left font-semibold w-8 first:!pl-6 border-b border-solid !border-border', vBorder) })), showSelectionColumn && (jsx("th", { className: cn('px-3 py-1.5 text-center font-semibold first:!pl-6 border-b border-solid !border-border', vBorder), children: jsx(Checkbox, { checked: allSelected
+                                                        ? true
+                                                        : someSelected
+                                                            ? 'indeterminate'
+                                                            : false, onCheckedChange: toggleSelectAll }) })), columns.map((col) => {
+                                                const w = localWidths[col.key];
+                                                const isDragging = draggingKey === col.key;
+                                                const isPinnedRight = col.key === 'actions';
+                                                const thStyle = getColumnWidthStyle(col.key, Boolean(w) || isDragging, isPinnedRight);
+                                                return (jsxs("th", { className: cn('px-4 py-1.5 relative first:!pl-6 text-left whitespace-nowrap font-semibold text-sm border-b border-solid !border-border', vBorder, isArchiveView && !isPinnedRight && 'pl-1', col.sortable && '!cursor-pointer hover:bg-muted/60', isDragging && 'bg-primary/10', isPinnedRight && pinnedHeaderClass()), style: thStyle, onClick: () => handleColumnClick(col.key, col.sortable), children: [jsxs("div", { className: cn('gap-2', w && 'overflow-hidden', col.sortable && 'flex items-center !cursor-pointer', col.filterActive && 'flex items-center', isPinnedRight && 'flex items-center justify-center'), children: [w && typeof col.header === 'string' ? (jsx("span", { className: "truncate", title: col.header, children: col.header })) : (col.header), col.filterActive && (jsxs(Fragment$2, { children: [jsx(Funnel, { "aria-hidden": "true", className: "size-3 shrink-0 text-primary" }), jsx("span", { className: "sr-only", children: "Filtered" })] })), col.sortable && (jsx(SortIcon, { active: sortBy === col.key, order: sortOrder }))] }), jsx("div", { className: cn('absolute right-0 top-0 h-full w-1.5 z-20 cursor-col-resize select-none transition-colors hover:bg-primary/40', isDragging && 'bg-primary/40'), onMouseDown: (e) => handleResizeMouseDown(e, col.key), onClick: (e) => e.stopPropagation() })] }, col.key.toString()));
+                                            })] }), hasFilterRow(columns, filterRowLeading) && (jsx(FilterRow, { columns: columns, leading: filterRowLeading, showEditColumn: !isArchiveView, showSelectionColumn: showSelectionColumn, isArchiveView: isArchiveView, vBorder: vBorder, localWidths: localWidths, draggingKey: draggingKey }))] }), jsx("tbody", { ref: bodyRef, "aria-busy": loading || undefined, className: cn(loading && 'invisible'), children: data.map((row, rowIndex) => {
                                     const isEditing = editingRow === row.id && editingRow !== null;
                                     const isSaving = savingRow === row.id;
                                     const isSelected = selectedSet.has(row.id);
@@ -21853,19 +22511,7 @@ function DataEditableTable({ data, columns, onRowClick, enableSelection = false,
                                                     : row[col.key];
                                                 const w = localWidths[col.key];
                                                 const isPinnedRight = col.key === 'actions';
-                                                const tdStyle = w || draggingKey === col.key
-                                                    ? {
-                                                        width: `var(--col-w-${col.key})`,
-                                                        minWidth: `var(--col-w-${col.key})`,
-                                                        maxWidth: `var(--col-w-${col.key})`,
-                                                    }
-                                                    : isPinnedRight
-                                                        ? {
-                                                            width: '72px',
-                                                            minWidth: '72px',
-                                                            maxWidth: '72px',
-                                                        }
-                                                        : undefined;
+                                                const tdStyle = getColumnWidthStyle(col.key, Boolean(w) || draggingKey === col.key, isPinnedRight);
                                                 // Pinned cells need an OPAQUE bg matching the row state so the
                                                 // scrolling content underneath doesn't bleed through — no alpha tints.
                                                 const pinnedBg = isPinnedRight
@@ -21881,7 +22527,13 @@ function DataEditableTable({ data, columns, onRowClick, enableSelection = false,
                                                             ? 'text-right'
                                                             : 'text-left', isArchiveView && !isPinnedRight && 'pl-2', columnStyles?.[col.key.toString()] || '', draggingKey === col.key && 'bg-primary/5', isPinnedRight && pinnedCellClass(pinnedBg)), style: tdStyle, children: jsx(EditableCellContent, { col: col, row: row, value: value, isEditing: isEditing, width: w, onEditValueChange: handleEditValueChange, fetchBusinessContacts: fetchBusinessContacts }) }, col.key.toString()));
                                             })] }, row.id));
-                                }) })] }), data.length === 0 && (jsx("div", { className: "sticky left-0 flex w-full items-center justify-center p-6 text-sm text-muted-foreground", children: emptyState ?? 'No data available' }))] }), pagination] }));
+                                }) })] }), overlay && overlay.height > 0 ? (
+                    // `overflow-clip`, not `hidden`: hidden makes this box the sticky skeleton's scroller, pinning it to scrollLeft 0.
+                    jsx("div", { className: "absolute left-0 z-10 overflow-clip bg-card", style: {
+                            top: overlay.top,
+                            width: overlay.width,
+                            height: overlay.height,
+                        }, children: jsx("div", { className: "sticky left-0 p-3", style: { width: overlay.visibleWidth }, children: jsx(TableRowsSkeleton, { rows: getSkeletonRowCount(overlay.height) }) }) })) : (loading && (jsx("div", { className: "sticky left-0 w-full p-3", children: jsx(TableRowsSkeleton, { rows: loadingRows }) }))), !loading && data.length === 0 && (jsx("div", { className: "sticky left-0 flex w-full items-center justify-center p-6 text-sm text-muted-foreground", children: emptyState ?? 'No data available' }))] }), loading && pagination ? (jsx(PaginationLoading, { children: pagination })) : (pagination)] }));
 }
 
 /**
@@ -37556,7 +38208,7 @@ function SelectScrollDownButton({ className, ...props }) {
 
 const FilterSelect = ({ label, value, onValueChange, options, resetValue = 'all', activeCount = 1, searchable, triggerClassName, contentClassName, }) => {
     const active = isFilterActive(value, resetValue);
-    return (jsxs(Select, { value: value, onValueChange: onValueChange, keepOpenOnSelect: true, children: [jsxs(SelectTrigger, { className: cn(TRIGGER_BASE, active && TRIGGER_ACTIVE, triggerClassName), children: [jsx(Funnel, { className: cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": "true" }), jsxs("span", { className: "flex items-center gap-1", children: [jsx(SelectValue, { placeholder: label }), active && (jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded bg-primary/10 px-1 text-[10px] font-semibold leading-none text-primary", children: activeCount }))] })] }), jsxs(SelectContent, { className: cn(CONTENT_BASE, contentClassName), searchable: searchable, children: [jsx(SelectItem, { value: resetValue, withCheckbox: true, children: label }), options.map((opt) => (jsx(SelectItem, { value: opt.value, searchValue: opt.searchValue, withCheckbox: true, children: opt.label }, opt.value)))] })] }));
+    return (jsxs(Select, { value: value, onValueChange: onValueChange, keepOpenOnSelect: true, children: [jsxs(SelectTrigger, { className: cn(TRIGGER_BASE, active && TRIGGER_ACTIVE, triggerClassName), children: [jsx(Funnel, { className: cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": "true" }), jsxs("span", { className: "flex items-center gap-1", children: [jsx(SelectValue, { placeholder: label }), active && (jsx("span", { className: cn('ml-1', FILTER_COUNT_BADGE_CLASS_NAME), children: activeCount }))] })] }), jsxs(SelectContent, { className: cn(CONTENT_BASE, contentClassName), searchable: searchable, children: [jsx(SelectItem, { value: resetValue, withCheckbox: true, children: label }), options.map((opt) => (jsx(SelectItem, { value: opt.value, searchValue: opt.searchValue, withCheckbox: true, children: opt.label }, opt.value)))] })] }));
 };
 
 /**
@@ -37901,6 +38553,824 @@ function fieldTypeIcon(type) {
     return FIELD_TYPE_ICONS[type] ?? Type;
 }
 
+const getRemoveChipLabel = (label) => `Remove ${label} filter`;
+const FILTERED_BY_LABEL = 'Filtered by';
+
+/** Compact badge shape with the filter chip colours. */
+const CHIP_CLASS = 'inline-flex h-7 max-w-full items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-2.5 text-xs text-foreground';
+const REMOVE_BUTTON_CLASS = 'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-primary/10 hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/30';
+const CLEAR_ALL_CLASS = cn(FILTER_LINK_CLASS_NAME, 'underline');
+function getChipLabelText(label, variant) {
+    return variant === 'inline' ? `${label}:` : label;
+}
+
+/** Applied filters as removable chips, with an optional Clear all. */
+function ActiveFilterChips({ chips, onRemove, onClearAll, variant = 'inline', actions, className, }) {
+    if (chips.length === 0)
+        return null;
+    const clearAll = onClearAll && (jsx("button", { type: "button", onClick: onClearAll, className: CLEAR_ALL_CLASS, children: "Clear all" }));
+    return (jsxs("div", { className: cn('flex flex-wrap items-center gap-1.5', className), children: [variant === 'inline' && (jsx("span", { className: "mr-0.5 text-xs text-muted-foreground", children: FILTERED_BY_LABEL })), chips.map((chip) => (jsxs("span", { className: CHIP_CLASS, children: [jsx("span", { className: "shrink-0 font-semibold", children: getChipLabelText(chip.label, variant) }), jsx(TruncatedLabel, { text: chip.value }), onRemove && (jsx("button", { type: "button", "aria-label": getRemoveChipLabel(chip.label), onClick: () => onRemove(chip.id), className: REMOVE_BUTTON_CLASS, children: jsx(X$2, { "aria-hidden": "true", className: "size-3" }) }))] }, chip.id))), actions ? (
+            // With actions, Clear all joins them at the row's right end.
+            jsxs("div", { className: "ml-auto flex items-center gap-3 pl-3", children: [clearAll, actions] })) : (clearAll)] }));
+}
+
+const DEFAULT_CONTAINS_PLACEHOLDER = 'Contains…';
+
+/**
+ * Local text for a typed filter. It resets to `externalText` only when the applied value
+ * (`externalKey`) changes from outside — e.g. Clear all — not when the change is this field's own commit.
+ */
+function useFilterDraft(externalKey, externalText) {
+    const [draft, setDraft] = useState(externalText);
+    const [seenKey, setSeenKey] = useState(externalKey);
+    const [committedKey, setCommittedKey] = useState(externalKey);
+    if (seenKey !== externalKey) {
+        setSeenKey(externalKey);
+        if (externalKey !== committedKey) {
+            setCommittedKey(externalKey);
+            setDraft(externalText);
+        }
+    }
+    return { draft, setDraft, markCommitted: setCommittedKey };
+}
+/** Debounces `callback`; a call still pending when the field unmounts (e.g. its popover closes) is flushed, not lost. */
+function useDebouncedCallback(callback, delay) {
+    const callbackRef = useRef(callback);
+    const timerRef = useRef(null);
+    const pendingRef = useRef(null);
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    const cancel = useCallback(() => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        timerRef.current = null;
+        pendingRef.current = null;
+    }, []);
+    const flush = useCallback(() => {
+        const pending = pendingRef.current;
+        cancel();
+        if (pending)
+            callbackRef.current(...pending);
+    }, [cancel]);
+    const schedule = useCallback((...args) => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        pendingRef.current = args;
+        timerRef.current = setTimeout(flush, delay);
+    }, [delay, flush]);
+    useEffect(() => flush, [flush]);
+    return { schedule, flush, cancel };
+}
+
+const COMMIT_DELAY_MS$2 = 400;
+function useContainsFilter(value, onChange) {
+    const { draft, setDraft, markCommitted } = useFilterDraft(value, value);
+    const commit = useCallback((text) => {
+        const trimmed = text.trim();
+        markCommitted(trimmed);
+        if (trimmed !== value)
+            onChange(trimmed);
+    }, [markCommitted, onChange, value]);
+    const debounced = useDebouncedCallback(commit, COMMIT_DELAY_MS$2);
+    return {
+        draft,
+        handleChange: (event) => {
+            setDraft(event.target.value);
+            debounced.schedule(event.target.value);
+        },
+        handleKeyDown: (event) => {
+            if (event.key === 'Enter')
+                debounced.flush();
+        },
+        handleBlur: debounced.flush,
+    };
+}
+
+function getContainsClassName(size, applied, className) {
+    if (size === 'cell')
+        return getFilterFieldClassName(applied ? 'applied' : 'empty', className);
+    return cn('h-9 text-sm', applied && 'border-primary bg-primary/5', className);
+}
+
+/** "Contains…" text filter, as a filter-row cell or a full-size card field. */
+function ContainsFilter({ value, onChange, ariaLabel, placeholder = DEFAULT_CONTAINS_PLACEHOLDER, size = 'cell', className, }) {
+    const { draft, handleChange, handleKeyDown, handleBlur } = useContainsFilter(value, onChange);
+    const inputProps = {
+        type: 'text',
+        value: draft,
+        placeholder,
+        'aria-label': ariaLabel,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        className: getContainsClassName(size, value.trim() !== '', className),
+    };
+    return size === 'cell' ? (jsx("input", { ...inputProps })) : (jsx(Input, { ...inputProps }));
+}
+
+const getPresetGroupLabel = (ariaLabel) => `${ariaLabel} presets`;
+const getDateInputLabel = (ariaLabel, bound) => `${ariaLabel} ${bound}`;
+
+/** Dates shown in the inputs: a preset's resolved range, or the custom range. */
+function getDisplayedRange(value, today, fiscalYearStartMonth) {
+    if (value?.preset)
+        return resolveDatePreset(value.preset, today, fiscalYearStartMonth);
+    return { from: value?.from ?? '', to: value?.to ?? '' };
+}
+function buildCustomRange(from, to) {
+    return from || to
+        ? { from: from || undefined, to: to || undefined }
+        : undefined;
+}
+function togglePreset(value, preset) {
+    return value?.preset === preset ? undefined : { preset };
+}
+/** Preset row; the picked one gets the primary tint, as in the design. */
+const getPresetClassName$1 = (selected) => getOptionRowClassName(selected, 'whitespace-nowrap');
+
+const toIsoOrEmpty = (date) => date ? toIsoDate(date) : '';
+function useDateRangeFilter(value, onChange, today, fiscalYearStartMonth) {
+    const { from, to } = getDisplayedRange(value, today, fiscalYearStartMonth);
+    return {
+        from,
+        to,
+        selectPreset: (preset) => onChange(togglePreset(value, preset)),
+        handleFromChange: (date) => onChange(buildCustomRange(toIsoOrEmpty(date), to)),
+        handleToChange: (date) => onChange(buildCustomRange(from, toIsoOrEmpty(date))),
+        clear: () => onChange(undefined),
+    };
+}
+
+/** Date filter body: presets on the left, a From / To range on the right. */
+function DateRangeFilter({ value, onChange, ariaLabel, fiscalYearStartMonth = 1, today = new Date(), }) {
+    const { from, to, selectPreset, handleFromChange, handleToChange, clear } = useDateRangeFilter(value, onChange, today, fiscalYearStartMonth);
+    return (jsxs("div", { className: "grid grid-cols-[auto_minmax(0,1fr)] divide-x divide-border text-xs", children: [jsx("div", { role: "group", "aria-label": getPresetGroupLabel(ariaLabel), className: "flex flex-col gap-1 pr-3", children: DATE_PRESET_OPTIONS.map((preset) => (jsx("button", { type: "button", "aria-pressed": value?.preset === preset.value, onClick: () => selectPreset(preset.value), className: getPresetClassName$1(value?.preset === preset.value), children: preset.label }, preset.value))) }), jsxs("div", { className: "flex min-w-0 flex-col gap-3 pl-3", children: [jsxs("label", { className: "flex min-w-0 flex-col gap-1 text-muted-foreground", children: ["From", jsx(DateInput
+                            // The inputs sit on the card's right; an end-aligned calendar stays under them.
+                            , { 
+                                // The inputs sit on the card's right; an end-aligned calendar stays under them.
+                                align: "end", value: fromIsoDate(from), max: to || undefined, ariaLabel: getDateInputLabel(ariaLabel, 'from'), onChange: handleFromChange })] }), jsxs("label", { className: "flex min-w-0 flex-col gap-1 text-muted-foreground", children: ["To", jsx(DateInput, { value: fromIsoDate(to), min: from || undefined, ariaLabel: getDateInputLabel(ariaLabel, 'to'), onChange: handleToChange, align: "end" })] }), value && (jsx("button", { type: "button", onClick: clear, className: cn('self-start', FILTER_LINK_CLASS_NAME), children: "Clear" }))] })] }));
+}
+
+const getClearButtonLabel = (ariaLabel) => `Clear ${ariaLabel}`;
+const NOT_FILTERABLE_LABEL = "This column can't be filtered";
+
+/** Select-like filter-row control: a compact trigger that opens the filter's panel in a popover. */
+function FilterCellPopover({ label, placeholder, ariaLabel, state, disabledLabel = NOT_FILTERABLE_LABEL, icon, onClear, showChevron = true, open, onOpenChange, contentClassName, className, children, }) {
+    if (state === 'disabled') {
+        return (jsx(TooltipProvider, { delayDuration: 200, children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { tabIndex: 0, "aria-label": disabledLabel, className: "block outline-none", children: jsx("div", { role: "presentation", className: getFilterFieldClassName('disabled', className) }) }) }), jsx(TooltipContent, { side: "top", children: disabledLabel })] }) }));
+    }
+    return (jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [jsx(PopoverAnchor, { asChild: true, children: jsxs("div", { className: getFilterFieldClassName(state, cn('pr-1 focus-within:ring-2 focus-within:ring-primary/30', className)), children: [jsxs(PopoverTrigger, { "aria-label": ariaLabel, className: "flex h-full min-w-0 flex-1 cursor-pointer items-center gap-1 text-left outline-none", children: [icon && jsx("span", { className: "shrink-0 [&_svg]:size-3.5", children: icon }), jsx(TruncatedLabel, { text: label || placeholder, className: cn('min-w-0 flex-1', !label && 'font-normal text-placeholder') }), showChevron && (jsx(ChevronDown, { "aria-hidden": "true", className: "size-3.5 shrink-0 text-muted-foreground" }))] }), onClear && label && (jsx("button", { type: "button", "aria-label": getClearButtonLabel(ariaLabel), onClick: onClear, className: "inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full outline-none hover:bg-primary/10", children: jsx(X$2, { "aria-hidden": "true", className: "size-3" }) }))] }) }), jsx(PopoverContent, { align: "start", 
+                // The filter row moves when the "Filtered by" row appears; track it every frame so the popover never lags behind.
+                updatePositionStrategy: "always", sideOffset: 4, className: cn('w-72 p-0', contentClassName), children: children })] }));
+}
+
+const COUNT_WORDS = [
+    'One',
+    'Two',
+    'Three',
+    'Four',
+    'Five',
+    'Six',
+    'Seven',
+    'Eight',
+    'Nine',
+    'Ten',
+];
+/** `4` → `Four` for 1–10; any other count stays as digits. */
+function countToWord(count) {
+    return COUNT_WORDS[count - 1] ?? String(count);
+}
+function getEmptyStateTitle(itemNoun) {
+    return `No ${itemNoun}s match these filters`;
+}
+function getEmptyStateDescription(itemNoun, activeCount) {
+    const filters = activeCount === 1 ? 'column filter is' : 'column filters are';
+    return `${countToWord(activeCount)} ${filters} active. Loosen one, or clear them all to see every ${itemNoun}.`;
+}
+
+/** Shown in place of rows when the applied column filters match nothing. */
+function FilterEmptyState({ itemNoun, title, description, activeCount, onClearAll, className, }) {
+    return (jsxs("div", { className: cn('flex flex-col items-center py-12 text-center', className), children: [jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-muted text-primary", children: jsx(FunnelX, { "aria-hidden": "true", className: "size-5" }) }), jsx("p", { className: "mt-4 text-base font-semibold text-foreground", children: title ?? getEmptyStateTitle(itemNoun) }), jsx("p", { className: "mt-1.5 max-w-sm text-sm text-muted-foreground", children: description ?? getEmptyStateDescription(itemNoun, activeCount) }), jsx(Button, { appearance: "outline", color: "primary", size: "md", onClick: onClearAll, leftIcon: jsx(RotateCcw, {}), className: "mt-5", children: "Clear all filters" })] }));
+}
+
+function getScalePosition(options, value, option) {
+    if (!value)
+        return 'outside';
+    if (option === value.from || option === value.to)
+        return 'end';
+    return expandScaleRange(options, value).includes(option)
+        ? 'between'
+        : 'outside';
+}
+/** Next range after clicking `scale`: a fresh single-option range, or the end of the pending one. */
+function getNextScaleRange(anchor, option) {
+    return anchor === null
+        ? { from: option, to: option }
+        : { from: anchor, to: option };
+}
+function getScaleButtonClassName(position, fill = false) {
+    return cn('flex min-w-0 cursor-pointer flex-col items-center justify-center rounded-md border text-center transition-colors', fill ? 'min-h-12 px-2 py-1.5 text-sm' : 'min-h-10 px-1.5 py-1 text-xs', FILTER_FOCUS_RING, 
+    // Unselected options look exactly like unselected pick-list tiles.
+    position === 'outside' && getSelectableOptionClassName(false), position === 'end' &&
+        'border-primary bg-primary font-medium text-primary-foreground', position === 'between' &&
+        'border-primary/30 bg-primary/10 font-medium text-primary');
+}
+
+/** First click picks the start option, the next click the end option; a click after that starts over. */
+function useScaleRangeFilter({ value, onChange, }) {
+    const [anchor, setAnchor] = useState(null);
+    // The start point only holds while the value is still that one option; Clear or any outside change drops it.
+    const start = anchor !== null && value?.from === anchor && value.to === anchor
+        ? anchor
+        : null;
+    const selectOption = useCallback((option) => {
+        onChange(getNextScaleRange(start, option));
+        setAnchor(start === null ? option : null);
+    }, [start, onChange]);
+    return { selectOption };
+}
+
+/** Ordered-scale filter: click a start option, then an end option. */
+function ScaleRangeFilter({ options, value, onChange, ariaLabel, columns, fill = false, }) {
+    const { selectOption } = useScaleRangeFilter({ value, onChange });
+    return (jsx("div", { role: "group", "aria-label": ariaLabel, className: fill ? 'grid gap-2' : 'grid gap-1.5', style: getGridColumnsStyle(columns), children: options.map((option) => {
+            const position = getScalePosition(options, value, option.value);
+            return (jsx("button", { type: "button", "aria-pressed": position !== 'outside', "aria-label": option.label, onClick: () => selectOption(option.value), className: getScaleButtonClassName(position, fill), children: jsx(TruncatedLabel, { text: option.label }) }, option.value));
+        }) }));
+}
+
+/** Varied widths so placeholder rows and pills read as text, not a block. */
+const LIST_ROW_WIDTHS = ['55%', '40%', '62%', '48%', '35%'];
+const PILL_WIDTHS = [72, 88, 64, 96, 76, 84];
+const TILE_KEYS = ['a', 'b', 'c', 'd'];
+const CARD_CLASS_NAME = 'flex h-full min-w-0 flex-col gap-3 rounded-xl border border-border bg-card p-4';
+
+function Pills({ count }) {
+    return (jsx("div", { className: "flex flex-wrap gap-1.5", children: PILL_WIDTHS.slice(0, count).map((width) => (jsx(SquareSkeleton, { height: 32, width: width, rounded: "full" }, width))) }));
+}
+function Body({ variant, }) {
+    switch (variant) {
+        case 'list':
+            return (jsxs(Fragment$2, { children: [jsx(SquareSkeleton, { height: 36, rounded: "md" }), jsx(SquareSkeleton, { height: 12, width: 96, rounded: "sm" }), jsx("div", { className: "flex flex-col gap-3 px-2 pt-1", children: LIST_ROW_WIDTHS.map((width) => (jsxs("div", { className: "flex items-center gap-3", children: [jsx(SquareSkeleton, { height: 18, width: 18, rounded: "sm" }), jsx(SquareSkeleton, { height: 14, width: width, rounded: "sm" })] }, width))) })] }));
+        case 'chips':
+            return (jsxs(Fragment$2, { children: [jsx(SquareSkeleton, { height: 12, width: 64, rounded: "sm" }), jsx(Pills, { count: 3 }), jsx(SquareSkeleton, { height: 12, width: 80, rounded: "sm" }), jsx(Pills, { count: 4 })] }));
+        case 'tiles':
+            return (jsx("div", { className: "grid grid-cols-2 gap-2", children: TILE_KEYS.map((key) => (jsx(SquareSkeleton, { height: 48, rounded: "md" }, key))) }));
+        case 'range':
+            return (jsxs(Fragment$2, { children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(SquareSkeleton, { height: 36, rounded: "md" }), jsx(SquareSkeleton, { height: 2, width: 8, rounded: "full" }), jsx(SquareSkeleton, { height: 36, rounded: "md" })] }), jsx(SquareSkeleton, { height: 12, width: 88, rounded: "sm" }), jsx(Pills, { count: 6 })] }));
+        case 'ids':
+            return (jsxs(Fragment$2, { children: [jsx(SquareSkeleton, { height: 12, width: 64, rounded: "sm" }), jsx(SquareSkeleton, { height: 80, rounded: "md" }), jsx(SquareSkeleton, { height: 12, width: "75%", rounded: "sm" }), jsx(SquareSkeleton, { height: 12, width: 56, rounded: "sm" }), jsx(SquareSkeleton, { height: 36, rounded: "md" })] }));
+        case 'select':
+            return (jsxs(Fragment$2, { children: [jsx(SquareSkeleton, { height: 12, width: 64, rounded: "sm" }), jsx(SquareSkeleton, { height: 36, rounded: "md" })] }));
+    }
+}
+/** Placeholder for one filter card while the filters load, shaped like the control it will hold. */
+function FilterCardSkeleton({ variant = 'list', className, }) {
+    return (jsxs("div", { "aria-hidden": "true", className: cn(CARD_CLASS_NAME, className), children: [jsx(SquareSkeleton, { height: 16, width: 96, rounded: "sm" }), jsx(Body, { variant: variant })] }));
+}
+
+const getClearIdsLabel = (ariaLabel) => `Clear ${ariaLabel}`;
+
+const DEFAULT_ID_HELPER_TEXT = 'Paste from Excel or an email. Commas, spaces and new lines all split IDs.';
+function toIdsKey(ids) {
+    return ids.join('\n');
+}
+function formatIdCount(count) {
+    return `${count} ${count === 1 ? 'ID' : 'IDs'}`;
+}
+
+const COMMIT_DELAY_MS$1 = 300;
+function useIdListInput(value, onChange) {
+    const appliedKey = toIdsKey(value);
+    const { draft, setDraft, markCommitted } = useFilterDraft(appliedKey, value.join(', '));
+    const commit = useCallback((text) => {
+        const ids = splitIdList(text);
+        const key = toIdsKey(ids);
+        markCommitted(key);
+        if (key !== appliedKey)
+            onChange(ids);
+    }, [appliedKey, markCommitted, onChange]);
+    const debounced = useDebouncedCallback(commit, COMMIT_DELAY_MS$1);
+    return {
+        draft,
+        parsedIds: splitIdList(draft),
+        handleChange: (event) => {
+            setDraft(event.target.value);
+            debounced.schedule(event.target.value);
+        },
+        handleBlur: debounced.flush,
+        clear: () => {
+            debounced.cancel();
+            setDraft('');
+            commit('');
+        },
+    };
+}
+
+/** Paste-a-list body: a textarea split into IDs on commas, spaces and new lines, with the parsed IDs as chips. */
+function IdListInput({ value, onChange, ariaLabel, placeholder, helperText = DEFAULT_ID_HELPER_TEXT, showSummary = true, }) {
+    const { draft, parsedIds, handleChange, handleBlur, clear } = useIdListInput(value, onChange);
+    return (jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Textarea, { value: draft, placeholder: placeholder, "aria-label": ariaLabel, onChange: handleChange, onBlur: handleBlur, className: "min-h-20 bg-card" }), helperText && (jsx("p", { className: "text-xs text-muted-foreground", children: helperText })), showSummary && parsedIds.length > 0 && (jsxs(Fragment$2, { children: [jsx("ul", { className: "flex flex-wrap gap-1.5", children: parsedIds.map((id) => (jsx("li", { className: "inline-flex h-6 items-center rounded-full border border-primary/30 bg-primary/5 px-2 text-xs text-foreground", children: id }, id))) }), jsxs("div", { className: "flex items-center justify-between text-xs", children: [jsx("span", { className: "text-muted-foreground", children: formatIdCount(parsedIds.length) }), jsx("button", { type: "button", "aria-label": getClearIdsLabel(ariaLabel), onClick: clear, className: FILTER_LINK_CLASS_NAME, children: "Clear" })] })] }))] }));
+}
+
+const NUMBER_HELP_HEADING = 'Type a value or a rule';
+const NUMBER_HELP_SUBTITLE = 'Click a rule to use it.';
+const getNumberErrorId = (baseId) => `${baseId}-error`;
+const getUseRuleLabel = (rule, meaning) => `Use ${rule}: ${meaning}`;
+
+function getNumberFieldState(parsed) {
+    if (!parsed.ok)
+        return 'invalid';
+    return parsed.range ? 'applied' : 'empty';
+}
+function getNumberInputClassName(state, className) {
+    return getFilterFieldClassName(state, cn('text-right tabular-nums', className));
+}
+/** Cheat-sheet row: the whole row is the click target, highlighted on hover. */
+const RULE_BUTTON_CLASS_NAME = getOptionRowClassName(false, 'py-1.5');
+/** Key-cap chip for the rule, fixed width so every meaning lines up. */
+// Every chip is as wide as the longest rule, so the meanings start at the same x.
+const RULE_CHIP_CLASS_NAME = 'inline-flex h-6 w-[calc(var(--rule-width)+1.25rem)] min-w-14 shrink-0 whitespace-nowrap items-center justify-center rounded-full border border-border bg-background px-2 text-xs font-semibold tabular-nums text-foreground';
+/** Note / error box in the help popover; text on a fixed 16px line. */
+const MESSAGE_CLASS_NAME = 'flex gap-2 rounded-md p-2 leading-4';
+/** One text line tall, so the icon centres on the first line however the text wraps. */
+const MESSAGE_ICON_SLOT_CLASS_NAME = 'flex h-4 shrink-0 items-center';
+/** Sets `--rule-width` to the longest rule, which sizes every chip in the list. */
+function getRuleListStyle(rules) {
+    const longest = Math.max(...rules.map(({ rule }) => rule.length));
+    return { '--rule-width': `${longest}ch` };
+}
+
+const COMMIT_DELAY_MS = 400;
+function useNumberExpressionFilter(value, onChange) {
+    const applied = formatNumberRange(value);
+    const { draft, setDraft, markCommitted } = useFilterDraft(applied, applied);
+    const [helpOpen, setHelpOpen] = useState(false);
+    const errorId = useId$2();
+    const commit = useCallback((text) => {
+        const parsed = parseNumberExpression(text);
+        if (!parsed.ok)
+            return;
+        const key = formatNumberRange(parsed.range);
+        markCommitted(key);
+        if (key !== applied)
+            onChange(parsed.range);
+    }, [applied, markCommitted, onChange]);
+    const debounced = useDebouncedCallback(commit, COMMIT_DELAY_MS);
+    const handleChange = (event) => {
+        setDraft(event.target.value);
+        setHelpOpen(true);
+        debounced.schedule(event.target.value);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter')
+            debounced.flush();
+        if (event.key === 'Escape')
+            setHelpOpen(false);
+    };
+    const handleBlur = () => {
+        debounced.flush();
+        setHelpOpen(false);
+    };
+    const applyRule = (rule) => {
+        debounced.cancel();
+        setDraft(rule);
+        commit(rule);
+        setHelpOpen(false);
+    };
+    return {
+        draft,
+        state: getNumberFieldState(parseNumberExpression(draft)),
+        helpOpen,
+        errorId,
+        handleChange,
+        handleKeyDown,
+        handleFocus: () => setHelpOpen(true),
+        handleClick: () => setHelpOpen(true),
+        handleBlur,
+        applyRule,
+    };
+}
+
+/** Filter-row number cell: type a value or a rule (`>1`, `1–3`, `1.52`). Invalid text never reaches the table. */
+function NumberExpressionFilter({ value, onChange, ariaLabel, placeholder, note, ruleExamples, className, }) {
+    const { draft, state, helpOpen, errorId, handleChange, handleKeyDown, handleFocus, handleClick, handleBlur, applyRule, } = useNumberExpressionFilter(value, onChange);
+    const invalid = state === 'invalid';
+    const rules = buildNumberRuleHelp(ruleExamples);
+    return (jsxs(Popover, { open: helpOpen, children: [jsx(PopoverAnchor, { asChild: true, children: jsx("input", { type: "text", inputMode: "decimal", value: draft, placeholder: placeholder, "aria-label": ariaLabel, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? getNumberErrorId(errorId) : undefined, onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onClick: handleClick, onBlur: handleBlur, className: getNumberInputClassName(state, className) }) }), jsxs(PopoverContent, { align: "start", 
+                // The filter row moves when the "Filtered by" row appears; track it every frame so the popover never lags behind.
+                updatePositionStrategy: "always", onOpenAutoFocus: (event) => event.preventDefault(), className: "flex w-72 flex-col gap-2 p-2 text-xs", children: [jsxs("div", { className: "px-2 pt-1", children: [jsx("p", { className: "font-medium text-foreground", children: NUMBER_HELP_HEADING }), jsx("p", { className: "text-muted-foreground", children: NUMBER_HELP_SUBTITLE })] }), jsx("ul", { className: "flex flex-col", style: getRuleListStyle(rules), children: rules.map(({ rule, meaning }) => (jsx("li", { children: jsxs("button", { type: "button", "aria-label": getUseRuleLabel(rule, meaning), 
+                                // Keep focus in the field so it doesn't blur and close this help first.
+                                onMouseDown: (event) => event.preventDefault(), onClick: () => applyRule(rule), className: RULE_BUTTON_CLASS_NAME, children: [jsx("span", { className: RULE_CHIP_CLASS_NAME, children: rule }), jsx("span", { className: "whitespace-nowrap text-muted-foreground", children: meaning })] }) }, rule))) }), note && (jsxs("div", { className: cn(MESSAGE_CLASS_NAME, 'bg-muted/50 text-muted-foreground'), children: [jsx("span", { className: MESSAGE_ICON_SLOT_CLASS_NAME, children: jsx(Info, { "aria-hidden": "true", className: "size-3.5" }) }), jsx("div", { children: note })] })), invalid && (jsxs("div", { id: getNumberErrorId(errorId), role: "alert", className: cn(MESSAGE_CLASS_NAME, 'bg-destructive/10 text-destructive'), children: [jsx("span", { className: MESSAGE_ICON_SLOT_CLASS_NAME, children: jsx(CircleAlert, { "aria-hidden": "true", className: "size-3.5" }) }), jsxs("p", { children: ["Can't read \u201C", draft, "\u201D. Try ", jsx("strong", { children: "1\u20133" }), ",", ' ', jsx("strong", { children: ">1" }), " or ", jsx("strong", { children: "<=3" }), "."] })] }))] })] }));
+}
+
+const REVERSED_RANGE_MESSAGE = 'From must not be more than To.';
+const getBoundLabel = (ariaLabel, bound) => `${ariaLabel} ${bound}`;
+
+const DECIMAL_DRAFT_RE = /^\d*\.?\d*$/;
+/** Allows partial decimals (`1.`) while typing; rejects anything else. */
+function isDecimalDraft(text) {
+    return DECIMAL_DRAFT_RE.test(text);
+}
+function toBound(text) {
+    if (!text || text === '.')
+        return undefined;
+    return Number(text);
+}
+function toBoundText(bound) {
+    return bound === undefined ? '' : String(bound);
+}
+/** Replaces one bound with a typed (inclusive) number, keeping the other bound and its `>` / `<`. */
+function withBound(range, bound, next) {
+    const min = bound === 'min' ? next : range?.min;
+    const max = bound === 'max' ? next : range?.max;
+    if (min === undefined && max === undefined)
+        return undefined;
+    const result = { min, max };
+    if (bound === 'max' && range?.minExclusive)
+        result.minExclusive = true;
+    if (bound === 'min' && range?.maxExclusive)
+        result.maxExclusive = true;
+    return result;
+}
+function isReversedRange(min, max) {
+    return min !== undefined && max !== undefined && min > max;
+}
+function isSameRange(a, b) {
+    return a?.min === b.min && a?.max === b.max;
+}
+function getBoundInputClassName(filled) {
+    return cn('h-9 min-w-0 flex-1 text-sm', filled && 'border-primary bg-primary/5');
+}
+const getPresetClassName = getPillClassName;
+
+function useNumberRangeInputs(value, onChange) {
+    const minText = toBoundText(value?.min);
+    const maxText = toBoundText(value?.max);
+    const from = useFilterDraft(minText, minText);
+    const to = useFilterDraft(maxText, maxText);
+    const handleBoundChange = (bound) => (event) => {
+        const text = event.target.value;
+        if (!isDecimalDraft(text))
+            return;
+        const draft = bound === 'min' ? from : to;
+        const parsed = toBound(text);
+        draft.setDraft(text);
+        const next = withBound(value, bound, parsed);
+        if (isReversedRange(next?.min, next?.max))
+            return;
+        draft.markCommitted(toBoundText(parsed));
+        onChange(next);
+    };
+    return {
+        fromDraft: from.draft,
+        toDraft: to.draft,
+        reversed: isReversedRange(toBound(from.draft), toBound(to.draft)),
+        handleFromChange: handleBoundChange('min'),
+        handleToChange: handleBoundChange('max'),
+        isPresetSelected: (preset) => isSameRange(value, preset.range),
+        togglePreset: (preset) => onChange(isSameRange(value, preset.range) ? undefined : preset.range),
+    };
+}
+
+/** From – To number inputs for full-page filter cards, with optional quick-pick presets. */
+function NumberRangeInputs({ value, onChange, ariaLabel, fromPlaceholder = 'From', toPlaceholder = 'To', presets, presetsLabel, }) {
+    const { fromDraft, toDraft, reversed, handleFromChange, handleToChange, isPresetSelected, togglePreset, } = useNumberRangeInputs(value, onChange);
+    return (jsxs("div", { className: "flex flex-col gap-3", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Input, { inputMode: "decimal", value: fromDraft, placeholder: fromPlaceholder, "aria-label": getBoundLabel(ariaLabel, 'from'), "aria-invalid": reversed || undefined, onChange: handleFromChange, className: getBoundInputClassName(fromDraft !== '') }), jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u2013" }), jsx(Input, { inputMode: "decimal", value: toDraft, placeholder: toPlaceholder, "aria-label": getBoundLabel(ariaLabel, 'to'), "aria-invalid": reversed || undefined, onChange: handleToChange, className: getBoundInputClassName(toDraft !== '') })] }), reversed && (jsx("p", { role: "alert", className: "text-xs text-destructive", children: REVERSED_RANGE_MESSAGE })), presets && presets.length > 0 && (jsxs("div", { className: "flex flex-col gap-2", children: [presetsLabel && (jsx("p", { className: "text-xs text-muted-foreground", children: presetsLabel })), jsx("div", { className: "flex flex-wrap gap-1.5", children: presets.map((preset) => (jsx("button", { type: "button", "aria-pressed": isPresetSelected(preset), onClick: () => togglePreset(preset), className: getPresetClassName(isPresetSelected(preset)), children: preset.label }, preset.label))) })] }))] }));
+}
+
+const NEXT_KEYS = new Set(['ArrowDown', 'ArrowRight']);
+const PREVIOUS_KEYS = new Set(['ArrowUp', 'ArrowLeft']);
+/** Arrow keys move and select within the radio group, wrapping at either end. */
+function getArrowKeyTarget(current, key) {
+    const step = NEXT_KEYS.has(key) ? 1 : PREVIOUS_KEYS.has(key) ? -1 : 0;
+    if (step === 0)
+        return null;
+    const index = TRI_STATE_OPTIONS.findIndex((option) => option.value === current);
+    const nextIndex = (index + step + TRI_STATE_OPTIONS.length) % TRI_STATE_OPTIONS.length;
+    return TRI_STATE_OPTIONS[nextIndex].value;
+}
+function createRadioGroupKeyDownHandler(current, onChange) {
+    return (event) => {
+        const target = getArrowKeyTarget(current, event.key);
+        if (!target)
+            return;
+        event.preventDefault();
+        onChange(target);
+        event.currentTarget
+            .querySelector(`[data-value="${target}"]`)
+            ?.focus();
+    };
+}
+
+const getRadioRowClassName = (checked) => getOptionRowClassName(checked);
+function getRadioCircleClassName(checked) {
+    return cn('flex size-4 shrink-0 items-center justify-center rounded-full border', checked ? 'border-primary' : 'border-input-border');
+}
+
+/** Any / Yes / No radio group for boolean columns (e.g. Active). */
+function TriStateFilter({ value, onChange, ariaLabel, }) {
+    return (jsx("div", { role: "radiogroup", "aria-label": ariaLabel, onKeyDown: createRadioGroupKeyDownHandler(value, onChange), className: "flex flex-col gap-0.5", children: TRI_STATE_OPTIONS.map((option) => {
+            const checked = option.value === value;
+            return (jsxs("button", { type: "button", role: "radio", "aria-checked": checked, tabIndex: checked ? 0 : -1, "data-value": option.value, onClick: () => onChange(option.value), className: getRadioRowClassName(checked), children: [jsx("span", { "aria-hidden": "true", className: getRadioCircleClassName(checked), children: checked && jsx("span", { className: "size-2 rounded-full bg-primary" }) }), option.label] }, option.value));
+        }) }));
+}
+
+const SAVED_SEARCH_CHIP_CLASS_NAME = 'inline-flex h-6 min-w-0 max-w-full items-center rounded-full border border-primary/30 bg-primary/5 px-2 text-xs text-foreground';
+/** Children laid out below the first one's line. */
+function countWrapped(items) {
+    if (items.length === 0)
+        return 0;
+    const firstTop = items[0].offsetTop;
+    return items.filter((item) => item.offsetTop > firstTop).length;
+}
+const getShowMoreLabel = (hiddenCount) => `+${hiddenCount} more`;
+
+/**
+ * Fits chips on one line with the "+N more" link right after the last one. Renders every chip, counts
+ * how many wrap, then drops chips until the link itself fits; a resize starts the measurement over.
+ */
+function useChipOverflow(chips, enabled) {
+    const [list, setList] = useState(null);
+    const [expanded, setExpanded] = useState(false);
+    const [visibleCount, setVisibleCount] = useState(chips.length);
+    const collapsed = enabled && !expanded;
+    const [measuredLength, setMeasuredLength] = useState(chips.length);
+    if (measuredLength !== chips.length) {
+        setMeasuredLength(chips.length);
+        setVisibleCount(chips.length);
+    }
+    useLayoutEffect(() => {
+        if (!collapsed || !list)
+            return;
+        const items = Array.from(list.children);
+        if (visibleCount >= chips.length) {
+            const wrapped = countWrapped(items);
+            if (wrapped > 0)
+                setVisibleCount(chips.length - wrapped);
+            return;
+        }
+        // The last child is the "+N more" link; if it wrapped, give it one more chip's room.
+        if (countWrapped(items) > 0 && visibleCount > 1)
+            setVisibleCount(visibleCount - 1);
+    }, [collapsed, list, visibleCount, chips.length]);
+    useEffect(() => {
+        if (!collapsed || !list)
+            return;
+        let width = list.clientWidth;
+        const observer = new ResizeObserver(() => {
+            if (list.clientWidth === width)
+                return;
+            width = list.clientWidth;
+            setVisibleCount(chips.length);
+        });
+        observer.observe(list);
+        return () => observer.disconnect();
+    }, [collapsed, list, chips.length]);
+    const shown = collapsed ? Math.min(visibleCount, chips.length) : chips.length;
+    return {
+        listRef: useCallback((node) => setList(node), []),
+        expanded,
+        toggle: () => {
+            setExpanded((current) => !current);
+            setVisibleCount(chips.length);
+        },
+        visibleChips: chips.slice(0, shown),
+        hiddenCount: chips.length - shown,
+    };
+}
+
+/** Read-only filter summaries of a saved search, as pills; optionally one line ending in "+N more". */
+function SavedSearchChipList({ chips, emptyText = 'No filters', collapsible = false, className, }) {
+    const { listRef, expanded, toggle, visibleChips, hiddenCount } = useChipOverflow(chips, collapsible);
+    if (chips.length === 0) {
+        return (jsx("p", { className: cn('text-xs text-muted-foreground', className), children: emptyText }));
+    }
+    const showToggle = collapsible && (expanded || hiddenCount > 0);
+    return (jsxs("ul", { ref: listRef, className: cn('flex min-w-0 flex-wrap items-center gap-1.5', className), children: [visibleChips.map((chip) => (jsx("li", { className: SAVED_SEARCH_CHIP_CLASS_NAME, children: jsx(TruncatedLabel, { text: chip }) }, chip))), showToggle && (jsx("li", { className: "flex h-6 shrink-0 items-center", children: jsx("button", { type: "button", "aria-expanded": expanded, onClick: toggle, 
+                    // Above a parent's stretched click area (e.g. a saved-search row).
+                    className: cn(FILTER_LINK_CLASS_NAME, 'relative z-10 whitespace-nowrap px-1 underline underline-offset-2'), children: expanded ? 'Show less' : getShowMoreLabel(hiddenCount) }) }))] }));
+}
+
+const SEARCH_INPUT_LABEL = 'Find a saved search';
+const getRenameLabel = (name) => `Rename ${name}`;
+const getDeleteLabel = (name) => `Delete ${name}`;
+const NO_MATCH_TITLE = 'No matches';
+const getNoMatchText = (query) => `No saved searches match “${query.trim()}”.`;
+
+/** Matches the name or any filter summary, ignoring case. */
+function filterSavedSearches(items, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return [...items];
+    return items.filter((item) => [item.name, ...item.chips].some((text) => text.toLowerCase().includes(needle)));
+}
+const ROW_CLASS_NAME = 'relative flex items-center gap-4 rounded-md px-2 py-2.5 transition-colors hover:bg-muted/60';
+/** The name is the row's button; its `::after` stretches over the whole row so the row is the click target. */
+const ROW_BUTTON_CLASS_NAME = "block min-w-0 max-w-full cursor-pointer text-left text-sm font-semibold text-foreground outline-none after:absolute after:inset-0 after:rounded-md after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-primary/30";
+/** Lifts the name above the button's stretched area so its overflow tooltip gets the hover; clicks still reach the button. */
+const ROW_NAME_CLASS_NAME = 'relative z-10 block min-w-0';
+/** Rename / Delete as one outlined, button-shaped group with a divider between them. */
+const ROW_ACTIONS_CLASS_NAME = 'flex shrink-0 items-center divide-x divide-border overflow-hidden rounded-md border border-border bg-card shadow-xs';
+/** A cell of the actions group; Delete turns destructive on hover. */
+function getRowActionClassName(destructive) {
+    return cn('size-7 rounded-none text-foreground/70 [&_svg]:size-3.5', destructive
+        ? 'hover:bg-destructive/10 hover:text-destructive'
+        : 'hover:bg-muted hover:text-foreground');
+}
+/** Controls inside the row that sit above the stretched button. */
+const ROW_CONTROL_CLASS_NAME = 'relative z-10';
+/** About three rows (name line + one pill line each) before the list scrolls. */
+const LIST_SCROLL_CLASS_NAME = 'max-h-54 overflow-y-auto';
+
+function useSavedSearchesMenu(items, onOpenChange) {
+    const [open, setOpenState] = useState(false);
+    const [query, setQuery] = useState('');
+    const setOpen = (next) => {
+        setOpenState(next);
+        if (!next)
+            setQuery('');
+        onOpenChange?.(next);
+    };
+    const visibleItems = useMemo(() => filterSavedSearches(items, query), [items, query]);
+    const closeThen = (action, item) => () => {
+        setOpen(false);
+        action(item);
+    };
+    return { open, setOpen, query, setQuery, visibleItems, closeThen };
+}
+
+/** Small icon button on a row, named by its tooltip. */
+function RowActionButton({ label, onClick, destructive = false, children, }) {
+    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(IconButton, { appearance: "ghost", size: "xs", "aria-label": label, onClick: onClick, className: getRowActionClassName(destructive), children: children }) }), jsx(TooltipContent, { side: "top", children: label })] }));
+}
+/** One saved search: name, filter pills, when it was saved, and Rename / Delete buttons. */
+function SavedSearchRow({ item, onSelect, onRename, onDelete, }) {
+    const hasCount = item.countLoading || item.count !== undefined;
+    return (jsxs("li", { className: ROW_CLASS_NAME, children: [jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [jsx("button", { type: "button", onClick: onSelect, className: ROW_BUTTON_CLASS_NAME, children: jsx("span", { className: ROW_NAME_CLASS_NAME, children: jsx(TruncatedLabel, { text: item.name }) }) }), hasCount &&
+                                (item.countLoading ? (jsx(SquareSkeleton, { height: 12, width: 40, rounded: "sm" })) : (jsx("span", { className: "shrink-0 text-xs font-medium tabular-nums text-foreground", children: item.countLabel ?? item.count }))), item.meta && (jsx("span", { className: "shrink-0 text-xs text-muted-foreground before:mr-2 before:content-['\u00B7']", children: item.meta }))] }), jsx(SavedSearchChipList, { chips: item.chips, collapsible: true })] }), (onRename || onDelete) && (jsxs("div", { className: cn(ROW_CONTROL_CLASS_NAME, ROW_ACTIONS_CLASS_NAME), children: [onRename && (jsx(RowActionButton, { label: getRenameLabel(item.name), onClick: onRename, children: jsx(Pencil, {}) })), onDelete && (jsx(RowActionButton, { label: getDeleteLabel(item.name), onClick: onDelete, destructive: true, children: jsx(Trash2, {}) }))] }))] }));
+}
+/** Centered empty / no-match state inside the dropdown. */
+function SavedSearchesEmpty({ icon, title, description, }) {
+    return (jsxs("div", { className: "flex flex-col items-center gap-1 px-4 py-6 text-center", children: [jsx("span", { className: "mb-2 flex size-10 items-center justify-center rounded-full bg-muted text-primary [&>svg]:size-5", children: icon }), jsx("p", { className: "text-sm font-semibold text-foreground", children: title }), jsx("p", { className: "max-w-xs text-xs text-muted-foreground", children: description })] }));
+}
+
+/** "Saved searches" dropdown: find, pick, rename or delete a saved filter set. */
+function SavedSearchesMenu({ items, onSelect, onRename, onDelete, loading = false, onOpenChange, label = 'Saved searches', footnote, emptyTitle = 'No saved searches yet', emptyDescription = 'Apply some filters, then choose Save search to keep them here.', align = 'start', triggerClassName, }) {
+    const { open, setOpen, query, setQuery, visibleItems, closeThen } = useSavedSearchesMenu(items, onOpenChange);
+    const hasNone = !loading && items.length === 0;
+    return (jsxs(Popover, { open: open, onOpenChange: setOpen, children: [jsx(PopoverTrigger, { asChild: true, children: jsx(Button, { appearance: "outline", color: open ? 'primary' : 'secondary', size: "md", leftIcon: jsx(Bookmark, {}), rightIcon: open ? jsx(ChevronUp, {}) : jsx(ChevronDown, {}), className: triggerClassName, children: label }) }), jsxs(PopoverContent, { align: align, sideOffset: 4, className: "flex w-120 max-w-[calc(100vw-2rem)] flex-col gap-2 p-2", children: [!hasNone && (jsxs("label", { className: FILTER_SEARCH_BOX_CLASS_NAME, children: [jsx(Search, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }), jsx("input", { value: query, onChange: (event) => setQuery(event.target.value), placeholder: SEARCH_INPUT_LABEL, "aria-label": SEARCH_INPUT_LABEL, className: "min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-placeholder" })] })), loading ? (jsxs("div", { className: "flex flex-col gap-2 p-2", "aria-busy": "true", children: [jsx(SquareSkeleton, { height: 44, rounded: "md" }), jsx(SquareSkeleton, { height: 44, rounded: "md" })] })) : hasNone ? (jsx(SavedSearchesEmpty, { icon: jsx(Bookmark, {}), title: emptyTitle, description: emptyDescription })) : visibleItems.length === 0 ? (jsx(SavedSearchesEmpty, { icon: jsx(SearchX, {}), title: NO_MATCH_TITLE, description: getNoMatchText(query) })) : (jsx(ScrollFade, { className: LIST_SCROLL_CLASS_NAME, children: jsx(TooltipProvider, { delayDuration: 300, children: jsx("ul", { className: "flex flex-col", children: visibleItems.map((item) => (jsx(SavedSearchRow, { item: item, onSelect: closeThen(onSelect, item), onRename: onRename && closeThen(onRename, item), onDelete: onDelete && closeThen(onDelete, item) }, item.id))) }) }) })), footnote && !hasNone && (jsx("p", { className: "border-t border-border px-2 pt-2 text-xs text-muted-foreground", children: footnote }))] })] }));
+}
+
+/**
+ * App-wide modal wrapper with a fixed header / body / footer layout.
+ * Built on top of shadcn DialogContent, so it inherits viewport-centered
+ * positioning, focus trapping, portal rendering, and overlay handling.
+ */
+function Modal({ open, onClose, title, description, icon, children, footer, size = 'default', hideCloseButton = false, className, bodyClassName, }) {
+    // See ConfirmDialog: overlapping dismissable layers leak the <body> lock.
+    useOverlayBodyLockRelease(open);
+    return (jsx(Dialog, { open: open, onOpenChange: (o) => !o && onClose(), children: jsxs(DialogContent, { hideCloseButton: true, size: size === 'wide' ? 'wide' : 'default', className: cn('flex flex-col gap-0 overflow-hidden p-0', className), children: [jsxs("header", { className: "flex shrink-0 items-start justify-between gap-4 px-6 pt-5 pb-4", children: [jsxs("div", { className: cn('flex min-w-0 gap-3.5', description ? 'items-start' : 'items-center'), children: [icon ? jsx(DialogIcon, { children: icon }) : null, jsxs("div", { className: "flex min-w-0 flex-col", children: [jsx(DialogPrimitive.Title, { className: "m-0 text-lg font-semibold leading-6 text-foreground", children: title }), description ? (jsx(DialogPrimitive.Description, { className: "m-0 text-sm leading-5 text-muted-foreground", children: description })) : null] })] }), !hideCloseButton && (jsx(DialogPrimitive.Close, { "aria-label": "Close", className: "-mr-1.5 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: jsx(X$2, { className: "h-4 w-4" }) }))] }), jsx("div", { className: cn('flex-1 overflow-y-auto', bodyClassName), children: children }), footer && (jsx("footer", { className: cn('flex items-center justify-end gap-3 border-t border-border bg-[color-mix(in_srgb,var(--muted)_40%,var(--card))] px-6 py-4', DIALOG_FOOTER_BUTTONS), children: footer }))] }) }));
+}
+
+const NAME_LABEL = 'Name';
+const FILTERS_LABEL = 'Filters saved';
+const NAME_REQUIRED_ERROR = 'Enter a name for this search.';
+const DUPLICATE_TITLE = 'Name already in use';
+const DUPLICATE_DESCRIPTION = 'Save another search with this name?';
+const DUPLICATE_DETAIL_LABEL = 'Existing saved search';
+const SAVE_ANYWAY_LABEL = 'Save anyway';
+const CHANGE_NAME_LABEL = 'Change name';
+const GO_BACK_LABEL = 'Go back';
+const CANCEL_LABEL = 'Cancel';
+
+const SAVED_SEARCH_NAME_MAX_LENGTH = 100;
+const isValidSearchName = (name) => {
+    const trimmed = name.trim();
+    return trimmed.length > 0 && trimmed.length <= SAVED_SEARCH_NAME_MAX_LENGTH;
+};
+const isDuplicateSearchName = (name, existingNames) => {
+    const needle = name.trim().toLowerCase();
+    return existingNames.some((taken) => taken.trim().toLowerCase() === needle);
+};
+const FILTERS_PANEL_CLASS_NAME = 'rounded-lg border border-border bg-muted/40 p-3';
+/** The warning for a step: the caller's for the limit and already-saved steps, built-in copy for a reused name. */
+function getStepWarning(step, name, warnings) {
+    if (step === 'limit')
+        return warnings.limitWarning;
+    if (step === 'existing')
+        return warnings.existingWarning;
+    if (step === 'duplicate') {
+        return {
+            title: DUPLICATE_TITLE,
+            description: DUPLICATE_DESCRIPTION,
+            detail: { label: DUPLICATE_DETAIL_LABEL, value: name.trim() },
+        };
+    }
+    return undefined;
+}
+/** Cancel closes before the form; later warnings go back to it. */
+function getWarningCancelLabel(step) {
+    if (step === 'existing')
+        return CANCEL_LABEL;
+    if (step === 'limit')
+        return GO_BACK_LABEL;
+    return CHANGE_NAME_LABEL;
+}
+const WARNING_DETAIL_CLASS_NAME = 'flex min-w-0 flex-col gap-0.5 rounded-xl border border-border bg-muted/30 px-3.5 py-3';
+
+/**
+ * The name field restarts from `defaultName` every time the dialog opens. Save stays enabled and reports a
+ * missing name; an optional warning can come before the form (e.g. already saved), and a reused name, then the
+ * saved-search limit, each get a follow-up warning that replaces the
+ * form until the user confirms (the last one stays up, showing progress, until the caller closes on success).
+ */
+function useSaveSearchDialog({ open, defaultName, onSave, saving, existingNames, hasLimitWarning, hasExistingWarning, onClose, }) {
+    const formId = useId$2();
+    const inputId = useId$2();
+    const [name, setNameState] = useState(defaultName);
+    const [error, setError] = useState();
+    const firstStep = hasExistingWarning ? 'existing' : 'form';
+    const [step, setStep] = useState(firstStep);
+    const [wasOpen, setWasOpen] = useState(open);
+    if (open !== wasOpen) {
+        setWasOpen(open);
+        if (open) {
+            setNameState(defaultName);
+            setError(undefined);
+            setStep(firstStep);
+        }
+    }
+    const save = () => onSave(name.trim());
+    const afterDuplicate = () => hasLimitWarning ? setStep('limit') : save();
+    return {
+        formId,
+        inputId,
+        name,
+        setName: (next) => {
+            setNameState(next);
+            if (error)
+                setError(undefined);
+        },
+        error,
+        submit: () => {
+            if (saving)
+                return;
+            if (!isValidSearchName(name)) {
+                setError(NAME_REQUIRED_ERROR);
+                return;
+            }
+            if (isDuplicateSearchName(name, existingNames)) {
+                setStep('duplicate');
+                return;
+            }
+            afterDuplicate();
+        },
+        step,
+        confirmWarning: () => {
+            if (step === 'existing')
+                setStep('form');
+            else if (step === 'duplicate')
+                afterDuplicate();
+            else
+                save();
+        },
+        cancelWarning: () => step === 'existing' ? onClose() : setStep('form'),
+    };
+}
+
+/** The search a warning is about, in the dialog body (long names stay on one line, full text on hover). */
+function WarningDetail({ label, value, }) {
+    return (jsxs("div", { className: WARNING_DETAIL_CLASS_NAME, children: [jsx("span", { className: "text-xs text-muted-foreground", children: label }), jsx(TruncatedLabel, { text: value, className: "text-sm font-semibold text-foreground" })] }));
+}
+
+/** Names the current filters and saves them; also used to rename a saved search. */
+function SaveSearchDialog({ open, onClose, onSave, defaultName = '', chips, title = 'Save search', icon = jsx(Bookmark, { className: "size-5" }), submitLabel = 'Save search', note, existingNames, limitWarning, existingWarning, saving = false, }) {
+    const { formId, inputId, name, setName, error, submit, step, confirmWarning, cancelWarning, } = useSaveSearchDialog({
+        open,
+        defaultName,
+        onSave,
+        saving,
+        existingNames: existingNames ?? [],
+        hasLimitWarning: Boolean(limitWarning),
+        hasExistingWarning: Boolean(existingWarning),
+        onClose,
+    });
+    const warning = getStepWarning(step, name, {
+        limitWarning,
+        existingWarning,
+    });
+    return (jsxs(Fragment$2, { children: [jsx(Modal
+            // One dialog at a time: the duplicate-name warning replaces this one and hands back to it.
+            , { 
+                // One dialog at a time: the duplicate-name warning replaces this one and hands back to it.
+                open: open && step === 'form', onClose: onClose, title: title, icon: icon, footer: jsxs(Fragment$2, { children: [jsx(Button, { appearance: "outline", color: "secondary", size: "md", onClick: onClose, children: "Cancel" }), jsx(Button, { appearance: "solid", color: "primary", size: "md", type: "submit", form: formId, loading: saving, children: submitLabel })] }), children: jsxs("form", { id: formId, noValidate: true, className: "flex flex-col gap-4 px-6 pb-5", onSubmit: (event) => {
+                        event.preventDefault();
+                        submit();
+                    }, children: [jsx(Field, { label: NAME_LABEL, required: true, error: error, input: jsx(Input, { id: inputId, "aria-label": NAME_LABEL, "aria-invalid": Boolean(error) || undefined, value: name, maxLength: SAVED_SEARCH_NAME_MAX_LENGTH, onChange: (event) => setName(event.target.value), autoFocus: true }) }), chips && (jsxs("div", { className: "flex flex-col gap-1", children: [jsx("span", { className: "text-[13px] text-label", children: FILTERS_LABEL }), jsx(SavedSearchChipList, { chips: chips, className: FILTERS_PANEL_CLASS_NAME })] })), note && (jsxs("p", { className: "flex items-start gap-1.5 text-xs text-muted-foreground", children: [jsx(Info, { "aria-hidden": "true", className: "mt-px size-3.5 shrink-0" }), jsx("span", { children: note })] }))] }) }), jsx(ConfirmDialog, { open: open && step !== 'form', onOpenChange: (next) => !next && !saving && cancelWarning(), icon: TriangleAlert, title: warning?.title ?? '', description: warning?.description, cancelLabel: getWarningCancelLabel(step), confirmLabel: warning?.confirmLabel ?? SAVE_ANYWAY_LABEL, confirmVariant: "default", disabled: saving, onConfirm: confirmWarning, children: warning?.detail && jsx(WarningDetail, { ...warning.detail }) })] }));
+}
+
 /**
  * Compact "time ago" label, e.g. "5m ago". Falls back to a locale date past a
  * week so older entries stay scannable.
@@ -38254,23 +39724,26 @@ function InventoryComboBox({ inventoryType, selectedItem, onSelect, fetchGems, f
                     } }), jsx("span", { className: "truncate text-sm font-normal", children: sel.label })] })) : (jsx("span", { className: "truncate text-sm font-normal text-muted-foreground", children: searchPlaceholder })), renderOption: ({ item }) => (jsx(InventoryItemRow, { type: inventoryType, ...buildInventoryRowProps(item.data, inventoryType, showCostPrice ? { priceBasis: 'cost' } : undefined), className: "w-full" })), fetchPage: fetchPage, searchPlaceholder: searchPlaceholder, emptyMessage: inventoryType === 'gem' ? 'No gems found.' : 'No diamonds found.', disabled: disabled, className: className, align: align, debounceMs: 300, hideTriggerSearchIcon: hideTriggerSearchIcon }));
 }
 
-const OwnershipFilter = (props) => (jsx(FilterMultiSelect, { ...props, label: "Ownership", options: [
-        { value: 'owned', label: 'Owned' },
-        { value: 'partner', label: 'Partner' },
-        { value: 'memo_in', label: 'Memo In' },
-    ] }));
-const StockTypeFilter = (props) => (jsx(FilterMultiSelect, { ...props, label: "Stock Type", options: [
-        { value: 'single', label: 'Single' },
-        { value: 'parcel', label: 'Parcel' },
-        { value: 'set', label: 'Set' },
-        { value: 'pair', label: 'Pair' },
-    ] }));
-const StatusFilter = (props) => (jsx(FilterMultiSelect, { ...props, label: "Status", options: [
-        { value: 'in_stock', label: 'In Stock' },
-        { value: 'out_of_stock', label: 'Out of Stock' },
-        { value: 'sold', label: 'Sold' },
-        { value: 'memo_out', label: 'Memo Out' },
-    ] }));
+const OWNERSHIP_STATUS_OPTIONS = [
+    { value: 'owned', label: 'Owned' },
+    { value: 'partner', label: 'Partner' },
+    { value: 'memo_in', label: 'Memo In' },
+];
+const STOCK_TYPE_OPTIONS = [
+    { value: 'single', label: 'Single' },
+    { value: 'parcel', label: 'Parcel' },
+    { value: 'set', label: 'Set' },
+    { value: 'pair', label: 'Pair' },
+];
+const INVENTORY_STATUS_OPTIONS = [
+    { value: 'in_stock', label: 'In Stock' },
+    { value: 'out_of_stock', label: 'Out of Stock' },
+    { value: 'sold', label: 'Sold' },
+    { value: 'memo_out', label: 'Memo Out' },
+];
+const OwnershipFilter = (props) => (jsx(FilterMultiSelect, { ...props, label: "Ownership", searchPlaceholder: "Search ownership", options: [...OWNERSHIP_STATUS_OPTIONS] }));
+const StockTypeFilter = (props) => (jsx(FilterMultiSelect, { ...props, label: "Stock Type", searchPlaceholder: "Search stock types", options: [...STOCK_TYPE_OPTIONS] }));
+const StatusFilter = (props) => (jsx(FilterMultiSelect, { ...props, label: "Status", searchPlaceholder: "Search statuses", options: [...INVENTORY_STATUS_OPTIONS] }));
 const WarehouseFilter = ({ getWarehouseList, ...props }) => {
     const [warehouses, setWarehouses] = useState([]);
     useEffect(() => {
@@ -38278,7 +39751,7 @@ const WarehouseFilter = ({ getWarehouseList, ...props }) => {
             .then(setWarehouses)
             .catch(() => { });
     }, [getWarehouseList]);
-    return (jsx(FilterMultiSelect, { ...props, label: "Warehouse", contentClassName: "min-w-[250px] w-fit", options: warehouses.map((w) => ({
+    return (jsx(FilterMultiSelect, { ...props, label: "Warehouse", searchPlaceholder: "Search warehouses", options: warehouses.map((w) => ({
             value: w.id,
             label: `${w.warehouseId} · ${w.name}`,
         })) }));
@@ -38510,17 +39983,6 @@ const TONE_ICON_BG = {
 };
 const MetricTile = ({ label, value, sub, icon, tone, className, }) => (jsxs("div", { className: cn('flex min-w-0 items-center gap-3 rounded-xl border px-4 py-3', TONE_TILE_BG[tone], className), children: [jsx("span", { "aria-hidden": "true", className: cn('inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md [&_svg]:h-5 [&_svg]:w-5', TONE_ICON_BG[tone]), children: icon }), jsxs("div", { className: "flex min-w-0 flex-col", children: [jsx("span", { className: "truncate text-xs text-muted-foreground", children: label }), jsx("span", { className: "truncate text-lg font-semibold text-foreground", children: value }), sub && (jsx("span", { className: "truncate text-xs text-muted-foreground", children: sub }))] })] }));
 
-/**
- * App-wide modal wrapper with a fixed header / body / footer layout.
- * Built on top of shadcn DialogContent, so it inherits viewport-centered
- * positioning, focus trapping, portal rendering, and overlay handling.
- */
-function Modal({ open, onClose, title, description, icon, children, footer, size = 'default', hideCloseButton = false, className, bodyClassName, }) {
-    // See ConfirmDialog: overlapping dismissable layers leak the <body> lock.
-    useOverlayBodyLockRelease(open);
-    return (jsx(Dialog, { open: open, onOpenChange: (o) => !o && onClose(), children: jsxs(DialogContent, { hideCloseButton: true, size: size === 'wide' ? 'wide' : 'default', className: cn('flex flex-col gap-0 overflow-hidden p-0', className), children: [jsxs("header", { className: "flex shrink-0 items-start justify-between gap-4 px-6 pt-5 pb-4", children: [jsxs("div", { className: cn('flex min-w-0 gap-3.5', description ? 'items-start' : 'items-center'), children: [icon ? jsx(DialogIcon, { children: icon }) : null, jsxs("div", { className: "flex min-w-0 flex-col", children: [jsx(DialogPrimitive.Title, { className: "m-0 text-lg font-semibold leading-6 text-foreground", children: title }), description ? (jsx(DialogPrimitive.Description, { className: "m-0 text-sm leading-5 text-muted-foreground", children: description })) : null] })] }), !hideCloseButton && (jsx(DialogPrimitive.Close, { "aria-label": "Close", className: "-mr-1.5 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: jsx(X$2, { className: "h-4 w-4" }) }))] }), jsx("div", { className: cn('flex-1 overflow-y-auto', bodyClassName), children: children }), footer && (jsx("footer", { className: cn('flex items-center justify-end gap-3 border-t border-border bg-[color-mix(in_srgb,var(--muted)_40%,var(--card))] px-6 py-4', DIALOG_FOOTER_BUTTONS), children: footer }))] }) }));
-}
-
 /**
  * Side info panel that sits adjacent to the form content (not a modal/drawer).
  * The parent page is responsible for layout: render this inside a flex row
@@ -67226,59 +68688,6 @@ function useIsTablet() {
     return useMediaQuery(`(min-width: ${MOBILE_MAX + 1}px) and (max-width: ${TABLET_MAX}px)`);
 }
 
-// Sub-pixel layout rounding makes scrollWidth exceed clientWidth by a hair on
-// labels that are not actually clipped.
-const OVERFLOW_TOLERANCE_PX = 1;
-function findClippedLabel(root) {
-    const spans = root.querySelectorAll(':scope > span');
-    for (const span of Array.from(spans)) {
-        if (span.scrollWidth > span.clientWidth + OVERFLOW_TOLERANCE_PX) {
-            return span;
-        }
-    }
-    return null;
-}
-/**
- * Returns the full text of the first direct-child `<span>` of `ref` that is
- * clipped by its container (i.e. showing an ellipsis), else `null` — so callers
- * can surface a tooltip only when the label is actually unreadable.
- *
- * Re-measures on element resize (sidebar expand/collapse, window resize) and on
- * label text changes.
- */
-function useTruncatedText(ref) {
-    const [text, setText] = useState(null);
-    useEffect(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        let frame = 0;
-        const measure = () => {
-            const label = findClippedLabel(el);
-            setText(label?.textContent?.trim() || null);
-        };
-        const schedule = () => {
-            cancelAnimationFrame(frame);
-            frame = requestAnimationFrame(measure);
-        };
-        schedule();
-        const resizeObserver = new ResizeObserver(schedule);
-        resizeObserver.observe(el);
-        const mutationObserver = new MutationObserver(schedule);
-        mutationObserver.observe(el, {
-            characterData: true,
-            childList: true,
-            subtree: true,
-        });
-        return () => {
-            cancelAnimationFrame(frame);
-            resizeObserver.disconnect();
-            mutationObserver.disconnect();
-        };
-    }, [ref]);
-    return text;
-}
-
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
@@ -67517,37 +68926,6 @@ const AppSidebar = ({ brand, navGroups = [], footer, className, }) => {
     return (jsxs(Sidebar, { collapsible: "icon", className: className, children: [brand && (jsx(SidebarHeader, { children: jsx(BrandHeader$1, { brand: brand }) })), jsx(SidebarContent, { children: navGroups.map((group) => (jsx(NavGroupSection, { group: group }, group.label ?? 'nav-group'))) }), footer && jsx(SidebarFooter, { children: footer }), jsx(SidebarRail, {})] }));
 };
 
-/** Label line + input block — mirrors a `Field`. */
-function FieldSkeleton() {
-    return (jsxs("div", { className: "space-y-2", children: [jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsx(SquareSkeleton, { height: 40, className: "w-full", rounded: "md" })] }));
-}
-/**
- * Loading placeholder that matches a `FormSectionCard` — the tinted header band
- * (icon square + title + description) above a body of `Field` placeholders and
- * an optional footer action row.
- */
-function FormSectionCardSkeleton({ fields = 4, columns = 2, footer = 'end', description = true, }) {
-    return (jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-xl border border-border bg-card shadow-card", children: [jsxs("div", { className: "flex items-center gap-3 border-b border-border bg-secondary px-5 py-4", children: [jsx(SquareSkeleton, { height: 40, width: 40, rounded: "md" }), jsxs("div", { className: "space-y-1.5", children: [jsx(SquareSkeleton, { height: 14, width: 180, rounded: "full" }), description && jsx(SquareSkeleton, { height: 11, width: 260, rounded: "full" })] })] }), jsxs("div", { className: "p-5", children: [jsx("div", { className: cn('grid gap-x-6 gap-y-5', columns === 2 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'), children: Array.from({ length: fields }).map((_, i) => (jsx(FieldSkeleton, {}, i))) }), footer !== 'none' && (jsxs("div", { className: cn('mt-8 flex items-center gap-3 pt-4', footer === 'between' ? 'justify-between' : 'justify-end'), children: [footer === 'between' && (jsx(SquareSkeleton, { height: 36, width: 90, rounded: "md" })), jsx(SquareSkeleton, { height: 36, width: 120, rounded: "md" })] }))] })] }));
-}
-/** Table placeholder: toolbar (search + filters) + rows. Mirrors a data grid. */
-function TableSkeleton({ rows = 8 }) {
-    return (jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: "flex gap-2", children: [jsx(SquareSkeleton, { className: "h-9 flex-1", rounded: "md" }), jsx(SquareSkeleton, { className: "h-9 w-44", rounded: "md" }), jsx(SquareSkeleton, { className: "h-9 w-48", rounded: "md" })] }), Array.from({ length: rows }).map((_, i) => (jsx(SquareSkeleton, { className: "h-12 w-full", rounded: "md" }, i)))] }));
-}
-/** Listing table while it loads: one full-width bar per row, like the gem and diamond inventory tables. */
-function TableRowsSkeleton({ rows = 10, className }) {
-    return (jsx("div", { className: cn('flex w-full flex-col gap-2 overflow-hidden', className), "aria-busy": "true", "aria-label": "Loading", children: Array.from({ length: rows }).map((_, i) => (
-        // shrink-0: in a height-capped flex parent the bars would otherwise squash below 52px.
-        jsx(SquareSkeleton, { height: 52, className: "w-full shrink-0" }, i))) }));
-}
-/** Detail page: header row + key-value section cards. Mirrors `DetailPageLayout`. */
-function DetailPageSkeleton({ sections = 3, }) {
-    return (jsxs("div", { className: "space-y-5", children: [jsxs("div", { className: "flex items-center justify-between gap-4", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(SquareSkeleton, { height: 32, width: 32, rounded: "md" }), jsxs("div", { className: "space-y-1.5", children: [jsx(SquareSkeleton, { height: 20, width: 192, rounded: "full" }), jsx(SquareSkeleton, { height: 12, width: 128, rounded: "full" })] })] }), jsx(SquareSkeleton, { height: 36, width: 128, rounded: "md" })] }), Array.from({ length: sections }).map((_, s) => (jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-card", children: [jsxs("div", { className: "flex items-center gap-3 border-b border-border bg-secondary px-5 py-4", children: [jsx(SquareSkeleton, { height: 32, width: 32, rounded: "lg" }), jsx(SquareSkeleton, { height: 16, width: 160, rounded: "full" })] }), jsx("div", { className: "grid grid-cols-1 gap-5 p-5 md:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (jsxs("div", { className: "space-y-1.5", children: [jsx(SquareSkeleton, { height: 10, width: 80, rounded: "full" }), jsx(SquareSkeleton, { height: 14, width: 128, rounded: "full" })] }, i))) })] }, s)))] }));
-}
-/** Document detail page (invoice, memo…): header, `DocumentHero` and `DetailSection` placeholders. */
-function DocumentDetailSkeleton({ aside = 'payment', sections = 3, label = 'Loading document', }) {
-    return (jsxs("div", { role: "status", "aria-busy": "true", "aria-label": label, className: "space-y-4", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(SquareSkeleton, { height: 14, width: 80, rounded: "full" }), jsx("span", { className: "h-5 w-px bg-border" }), jsx(SquareSkeleton, { height: 28, width: 200, rounded: "md" }), jsx(SquareSkeleton, { height: 22, width: 72, rounded: "full" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(SquareSkeleton, { height: 36, width: 112, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 80, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 128, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 36, rounded: "lg" })] })] }), jsxs("section", { "aria-hidden": "true", className: "grid grid-cols-1 overflow-hidden rounded-2xl border border-border bg-card md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]", children: [jsxs("div", { className: "flex flex-col justify-center space-y-3 px-5 py-4 sm:px-7 sm:py-4", children: [jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsx(SquareSkeleton, { height: 40, width: 220, rounded: "md" }), aside !== 'none' && (jsxs("div", { className: "w-full max-w-xl space-y-2 pt-1", children: [jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" }), jsxs("div", { className: "flex justify-between", children: [jsx(SquareSkeleton, { height: 11, width: 88, rounded: "full" }), jsx(SquareSkeleton, { height: 11, width: 40, rounded: "full" })] })] }))] }), jsx("div", { className: "border-t border-border bg-muted/40 px-5 py-2 md:border-l md:border-t-0", children: [0, 1, 2, 3].map((i) => (jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-border py-1.5 last:border-b-0", children: [jsx(SquareSkeleton, { height: 24, width: 24, rounded: "md" }), jsx(SquareSkeleton, { height: 12, width: 72, rounded: "full" }), jsx(SquareSkeleton, { height: 12, width: 88, rounded: "full", className: "ml-auto" })] }, i))) })] }), Array.from({ length: sections }).map((_, s) => (jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-3", children: [jsx(SquareSkeleton, { height: 28, width: 28, rounded: "lg" }), jsx(SquareSkeleton, { height: 15, width: 128, rounded: "full" })] }), jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: s === 1 ? 4 : 2 }).map((__, row) => (jsx(SquareSkeleton, { height: s === 1 ? 36 : 14, className: row % 2 ? 'w-3/4' : 'w-full', rounded: "md" }, row))) })] }, s))), jsx("span", { className: "sr-only", children: label })] }));
-}
-
 const SlideOut = ({ open, onOpenChange, ...props }) => {
     const scheduleLockRelease = useOverlayBodyLockRelease(open);
     return (jsx(DialogPrimitive.Root, { ...props, open: open, onOpenChange: (next) => {
@@ -75495,6 +76873,236 @@ const FileUploader = ({ accept, multiple = true, maxSize = 50, maxFiles = 5, lab
     return (jsxs("div", { className: cn('flex flex-col gap-4', className), children: [label && (jsx("label", { className: "text-sm font-medium text-foreground", children: label })), jsx(DropZone, { uploadSubject: uploadSubject, supportedFormats: supportedFormats, maxSize: maxSize, maxFiles: maxFiles, accept: accept, multiple: multiple, disabled: disabled, onFiles: handlePickerFiles }), files.length > 0 && (jsxs("div", { className: "space-y-2", children: [jsx("p", { className: "text-[13px] text-label", children: "Uploaded File" }), jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: onDragEnd, children: jsx(SortableContext, { items: files.map((f) => f.id), strategy: rectSortingStrategy, children: jsx("div", { className: "flex flex-wrap gap-3", children: files.map((file) => (jsx(FileCard, { file: file, sortable: sortable, disabled: disabled, onRemove: handleRemove, onPreview: previewFile }, file.id))) }) }) })] })), enableUrlInput && (jsxs(Fragment$2, { children: [jsxs("div", { className: "flex items-center gap-3 text-sm font-normal text-label", children: [jsx("span", { className: "h-px flex-1 bg-border" }), jsx("span", { children: "or" }), jsx("span", { className: "h-px flex-1 bg-border" })] }), jsx(UrlImportRow, { disabled: disabled, onAdd: handleAddUrl })] })), cropImages && currentCropFile && cropPreviewUrl && (jsx(ImageCropModal, { open: true, imageUrl: cropPreviewUrl, fileName: currentCropFile.name, fileType: currentCropFile.type, onCancel: handleCropCancel, onConfirm: handleCropConfirm }))] }));
 };
 
+/** The value narrowed to one control type, or undefined when it holds another (or none). */
+function valueOfType(value, type) {
+    return value?.type === type ? value : undefined;
+}
+/** Each builder returns `undefined` for an empty selection so cleared filters drop out of state. */
+const toListValue = (values) => values.length ? { type: 'list', values } : undefined;
+const toScaleValue = (range) => (range ? { type: 'scale', range } : undefined);
+const toNumberValue = (range) => range && (range.min !== undefined || range.max !== undefined)
+    ? { type: 'number', range }
+    : undefined;
+const toIdsValue = (ids) => ids.length ? { type: 'ids', ids } : undefined;
+const toContainsValue = (text) => text.trim() ? { type: 'contains', text: text.trim() } : undefined;
+const toDateValue = (range) => range && (range.preset || range.from || range.to)
+    ? { type: 'date', range }
+    : undefined;
+const toBoolValue = (value) => value === 'any' ? undefined : { type: 'bool', value };
+const DEFAULT_CELL_PLACEHOLDERS = {
+    list: 'All',
+    scale: 'All',
+    number: '',
+    ids: 'Paste IDs…',
+    contains: 'Contains…',
+    date: 'Any date',
+    bool: 'Any',
+};
+function getCellState(field, value) {
+    if (field.disabled)
+        return 'disabled';
+    return isFilterValueActive(value) ? 'applied' : 'empty';
+}
+/** Human-readable value for chips and card summaries, e.g. `Red, Blue`, `1–3`, `Last 30 days`. */
+function describeFilterValue(field, value) {
+    if (!value || !isFilterValueActive(value))
+        return '';
+    const options = field.options ?? [];
+    switch (value.type) {
+        case 'list':
+            return options
+                .filter((option) => value.values.includes(option.value))
+                .map((option) => option.label)
+                .concat(value.values.filter((v) => !options.some((option) => option.value === v)))
+                .join(', ');
+        case 'scale':
+            return formatScaleRange(options, value.range);
+        case 'number':
+            return formatNumberRange(value.range);
+        case 'ids':
+            return value.ids.length === 1 ? value.ids[0] : `${value.ids.length} IDs`;
+        case 'contains':
+            return `“${value.text}”`;
+        case 'date':
+            return formatDateRange(value.range);
+        case 'bool':
+            return getOptionLabel([
+                { value: 'yes', label: 'Yes' },
+                { value: 'no', label: 'No' },
+            ], value.value);
+    }
+}
+/** Short value shown on the filter-row trigger, e.g. `Red +1`, `VG – F`, `A-102`, `3 IDs`. */
+function getCellLabel(field, value) {
+    if (!value || !isFilterValueActive(value))
+        return '';
+    if (value.type === 'list')
+        return summarizeSelection(value.values, field.options ?? []);
+    if (value.type === 'scale')
+        return formatScaleRange(field.options ?? [], value.range, field.shortLabels);
+    return describeFilterValue(field, value);
+}
+/** Filter-row popovers hold the filter's card at a compact, fixed width. */
+function getPopoverWidthClassName(field) {
+    if (field.type === 'date')
+        return 'w-96';
+    if (field.type === 'bool')
+        return 'w-60';
+    return 'w-64';
+}
+const POPOVER_TILE_COLUMNS = 2;
+/** Above this many options, chips / tiles give way to the searchable checkbox list. */
+const MAX_PILL_OPTIONS = 10;
+/** The list layout actually used: the configured one, or the checkbox list once there are too many options for pills. */
+function resolveListLayout(field) {
+    return (field.options?.length ?? 0) > MAX_PILL_OPTIONS
+        ? 'list'
+        : (field.layout ?? 'chips');
+}
+/** The empty single-select dropdown on a card: `inputPlaceholder`, else `Any <label>` (set `inputPlaceholder` for acronyms). */
+const getSingleSelectPlaceholder = (field) => field.inputPlaceholder ?? `Any ${field.label.toLowerCase()}`;
+/** Popover variant: the same control and layout as the card (pills up to 10 options, then the list); tile grids drop to two columns. */
+function toPopoverField(field) {
+    if (field.type === 'scale' ||
+        (field.type === 'list' && resolveListLayout(field) === 'tiles')) {
+        return { ...field, columns: POPOVER_TILE_COLUMNS };
+    }
+    return field;
+}
+/** ID lists and searchable lists carry their own "x selected · Clear" row, so the card skips its Clear (and, in a popover, its title). */
+const ownsClearRow = (field) => field.type === 'ids' ||
+    (field.type === 'list' && resolveListLayout(field) === 'list');
+/** Popover header text in place of the title: `2 of 17 selected`, or the applied value (`VG – F`, `Last 30 days`); none when nothing is applied. */
+function getPopoverStatus(field, value) {
+    if (ownsClearRow(field))
+        return undefined;
+    if (field.type === 'list') {
+        return formatSelectedCount(valueOfType(value, 'list')?.values.length ?? 0, field.options?.length ?? 0);
+    }
+    // Nothing applied: the trigger already reads "Any", so the popover skips the header.
+    return describeFilterValue(field, value) || undefined;
+}
+
+/** Single-choice list on a card, as the design's dropdown ("Any supplier"); the filter row lists the same options as a pick-one list. */
+function SingleSelectFilter({ field, selected, onSelect, }) {
+    const options = field.options ?? [];
+    return (jsx(SearchableSelect, { options: options, selectedItem: options.find((option) => option.value === selected) ?? null, onChange: (option) => onSelect(option.value), getOptionKey: (option) => option.value, getOptionLabel: (option) => option.label, searchPlaceholder: getSingleSelectPlaceholder(field), hideTriggerSearchIcon: true }));
+}
+/** The control alone — identical in a filter-row popover and on a card, except the list layout. Compose it into custom cards. */
+function FilterFieldControl({ field, value, onChange, fiscalYearStartMonth, fill, inPopover, }) {
+    const ariaLabel = `${field.label} filter`;
+    switch (field.type) {
+        case 'list': {
+            if (field.single && !inPopover) {
+                return (jsx(SingleSelectFilter, { field: field, selected: valueOfType(value, 'list')?.values[0], onSelect: (next) => onChange(toListValue([next])) }));
+            }
+            const layout = resolveListLayout(field);
+            return (jsx(PickListFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'list')?.values ?? [], onChange: (values) => onChange(toListValue(values)), layout: layout, searchPlaceholder: layout === 'list' ? field.searchPlaceholder : undefined, columns: field.columns, fill: fill, single: field.single }));
+        }
+        case 'scale':
+            return (jsx(ScaleRangeFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'scale')?.range, onChange: (range) => onChange(toScaleValue(range)), columns: field.columns, fill: fill }));
+        case 'number':
+            return (jsx(NumberRangeInputs, { ariaLabel: field.label, value: valueOfType(value, 'number')?.range, onChange: (range) => onChange(toNumberValue(range)), presets: field.presets, presetsLabel: field.presetsLabel }));
+        case 'ids':
+            return (jsx(IdListInput, { ariaLabel: ariaLabel, value: valueOfType(value, 'ids')?.ids ?? [], onChange: (ids) => onChange(toIdsValue(ids)), placeholder: field.inputPlaceholder, 
+                // Cards show one shared hint instead of a helper under every box.
+                helperText: inPopover ? field.helperText : '' }));
+        case 'contains':
+            return (jsx(ContainsFilter, { ariaLabel: ariaLabel, size: "field", placeholder: field.inputPlaceholder, value: valueOfType(value, 'contains')?.text ?? '', onChange: (text) => onChange(toContainsValue(text)) }));
+        case 'date':
+            return (jsx(DateRangeFilter, { ariaLabel: ariaLabel, value: valueOfType(value, 'date')?.range, onChange: (range) => onChange(toDateValue(range)), fiscalYearStartMonth: fiscalYearStartMonth }));
+        case 'bool':
+            return (jsx(TriStateFilter, { ariaLabel: ariaLabel, value: valueOfType(value, 'bool')?.value ?? 'any', onChange: (next) => onChange(toBoolValue(next)) }));
+    }
+}
+/** Filter-row cell: inline input for number/contains, otherwise a trigger that opens the control in a popover. */
+function FilterFieldCell({ field, value, onChange, fiscalYearStartMonth, className, }) {
+    const state = getCellState(field, value);
+    const ariaLabel = `${field.label} filter`;
+    const placeholder = field.placeholder ?? DEFAULT_CELL_PLACEHOLDERS[field.type];
+    const clear = () => onChange(undefined);
+    if (field.type === 'number' && state !== 'disabled') {
+        return (jsx(NumberExpressionFilter, { ariaLabel: ariaLabel, value: valueOfType(value, 'number')?.range, onChange: (range) => onChange(toNumberValue(range)), placeholder: placeholder, note: field.note, ruleExamples: field.ruleExamples, className: className }));
+    }
+    if (field.type === 'contains' && state !== 'disabled') {
+        return (jsx(ContainsFilter, { ariaLabel: ariaLabel, size: "cell", value: valueOfType(value, 'contains')?.text ?? '', onChange: (text) => onChange(toContainsValue(text)), placeholder: placeholder, className: className }));
+    }
+    return (jsx(FilterCellPopover, { label: getCellLabel(field, value), placeholder: placeholder, ariaLabel: ariaLabel, state: state, disabledLabel: field.disabledLabel, icon: field.type === 'ids' ? jsx(List, {}) : undefined, showChevron: field.type !== 'ids', onClear: field.type === 'ids' ? clear : undefined, contentClassName: getPopoverWidthClassName(field), className: className, children: jsx(FilterFieldCard, { mode: "popover", field: toPopoverField(field), value: value, onChange: onChange, fiscalYearStartMonth: fiscalYearStartMonth }) }));
+}
+/** The filter's card: on a full-page surface (`card`), in a filter-row popover (`popover`), or as a titled block inside a composite card (`section`). */
+function FilterFieldCard({ field, value, onChange, fiscalYearStartMonth, action, className, mode, }) {
+    const active = isFilterValueActive(value);
+    const listCount = valueOfType(value, 'list')?.values.length;
+    // In a filter-row popover the column header already names the filter.
+    const inPopover = mode === 'popover';
+    return (jsx(FilterPanel, { variant: mode, title: inPopover ? undefined : field.label, status: inPopover ? getPopoverStatus(field, value) : undefined, selectedCount: inPopover ? undefined : listCount, summary: !inPopover && field.type !== 'list' && field.type !== 'ids'
+            ? describeFilterValue(field, value)
+            : undefined, action: action, onClear: active && !ownsClearRow(field)
+            ? () => onChange(undefined)
+            : undefined, hint: field.hint, active: active, className: className, children: jsx(FilterFieldControl, { field: field, value: value, onChange: onChange, fiscalYearStartMonth: fiscalYearStartMonth, fill: mode === 'card', inPopover: mode === 'popover' }) }));
+}
+function FilterField(props) {
+    const { mode, ...rest } = props;
+    return mode === 'cell' ? (jsx(FilterFieldCell, { ...rest })) : (jsx(FilterFieldCard, { mode: mode, ...rest }));
+}
+
+/** Both leave without applying — the draft is discarded. */
+const BACK_LABEL = 'Back without applying';
+const CLOSE_LABEL = 'Close without applying';
+const LOADING_LABEL = 'Loading filters';
+const ERROR_TITLE = "Couldn't load filters";
+const DEFAULT_ERROR_MESSAGE = 'Something went wrong while loading the filters. Check your connection and try again.';
+const RETRY_LABEL = 'Try again';
+
+/** Placeholder cards while the filters load; roughly the first rows of a card grid. */
+const SKELETON_CARD_COUNT = 8;
+const SKELETON_GRID_CLASS_NAME = 'grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4';
+
+const DEFAULT_SKELETON_CARDS = Array.from({ length: SKELETON_CARD_COUNT }, (_, index) => `card-${index}`);
+/** Loading placeholder: the page's own skeleton, or generic list cards. */
+function FilterSurfaceSkeleton({ children, }) {
+    return (jsx("div", { role: "status", "aria-label": LOADING_LABEL, children: children ?? (jsx("div", { className: SKELETON_GRID_CLASS_NAME, children: DEFAULT_SKELETON_CARDS.map((id) => (jsx(FilterCardSkeleton, {}, id))) })) }));
+}
+/** Shown in place of the cards when the filters couldn't load. */
+function FilterSurfaceError({ message, onRetry, }) {
+    return (jsxs("div", { role: "alert", className: "flex flex-col items-center rounded-xl border border-border bg-card px-6 py-12 text-center", children: [jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-destructive/10 text-destructive", children: jsx(TriangleAlert, { "aria-hidden": "true", className: "size-5" }) }), jsx("p", { className: "mt-4 text-base font-semibold text-foreground", children: ERROR_TITLE }), jsx("p", { className: "mt-1.5 max-w-sm text-sm text-muted-foreground", children: message }), onRetry && (jsx(Button, { appearance: "outline", color: "secondary", size: "md", leftIcon: jsx(RotateCcw, {}), onClick: onRetry, className: "mt-5", children: RETRY_LABEL }))] }));
+}
+
+const NESTED_LAYER_SELECTOR = '[data-slot="popover-content"], [role="dialog"], [role="menu"], [role="listbox"]';
+function useCloseOnEscape(onClose) {
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Escape' || event.defaultPrevented)
+                return;
+            // Escape inside an open popover, dialog or menu only closes that layer (Radix doesn't mark the event handled).
+            if (event.target instanceof Element &&
+                event.target.closest(NESTED_LAYER_SELECTOR))
+                return;
+            onClose();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [onClose]);
+}
+function useFilterSurfaceMore(defaultExpanded = false) {
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    return { expanded, toggle: () => setExpanded((current) => !current) };
+}
+
+/** Full-page filter screen (e.g. an advanced search): header, scrolling card grid, sticky apply footer. */
+function FilterSurface({ title, headerActions, footerChips, footerActions, onClose, status = 'ready', errorMessage, onRetry, skeleton, children, }) {
+    useCloseOnEscape(onClose);
+    return (jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-end justify-between gap-3 bg-background px-3 pt-2 pb-3", children: [jsx("div", { className: "flex flex-col gap-1", children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsx(ArrowLeft, {}) }), jsx("h1", { className: "text-xl font-semibold text-foreground", children: title })] }) }), jsxs("div", { className: "flex items-center gap-2", children: [headerActions, jsx(IconButton, { appearance: "outline", size: "md", "aria-label": CLOSE_LABEL, title: CLOSE_LABEL, onClick: onClose, children: jsx(X$2, {}) })] })] }), jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsx("div", { className: "flex flex-col gap-3", children: children })) }), status === 'ready' && (footerChips || footerActions) && (jsxs("footer", { className: "sticky bottom-0 z-20 flex flex-wrap items-center justify-between gap-3 border-t border-border bg-card px-3 py-2", children: [jsx("div", { className: "min-w-0 flex-1", children: footerChips }), jsx("div", { className: "flex shrink-0 items-center gap-2", children: footerActions })] }))] }));
+}
+function FilterSurfaceGroup({ title, className, children, }) {
+    return (jsxs("section", { className: "flex flex-col gap-3", children: [title && (jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-label", children: title })), jsx("div", { className: cn('grid grid-cols-1 gap-3 lg:grid-cols-6', className), children: children })] }));
+}
+/** Collapsed "More filters" divider that reveals extra cards. */
+function FilterSurfaceMore({ label, defaultExpanded, children, }) {
+    const { expanded, toggle } = useFilterSurfaceMore(defaultExpanded);
+    return (jsxs("section", { className: "flex flex-col gap-3", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "h-px flex-1 bg-border" }), jsxs("button", { type: "button", "aria-expanded": expanded, onClick: toggle, className: "inline-flex cursor-pointer items-center gap-1.5 rounded-full border border-border bg-card px-3.5 py-1.5 text-xs font-medium text-primary outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-primary/30", children: [label, jsx(ChevronDown, { "aria-hidden": "true", className: cn('size-3.5 transition-transform', expanded && 'rotate-180') })] }), jsx("span", { className: "h-px flex-1 bg-border" })] }), expanded && children] }));
+}
+
 /** Falls back to counting the current page when the caller has no total. */
 function resolveUnreadCount(notifications, unreadCount) {
     if (typeof unreadCount === 'number')
@@ -78068,5 +79676,5 @@ var RichTextAreaImpl = /*#__PURE__*/Object.freeze({
   RichTextarea: RichTextarea
 });
 
-export { ACTIVITY_CATEGORIES, ACTIVITY_CATEGORY_META, ActionBadge, ActionButtonWithTooltip, ActivityFeed, AdvancedSearchDrawer, Alert, ApiComboBox, AppSidebar, AuditEntryCard, AuditHistoryPanel, AuditTimeline, AuditTimelineShimmer, Badge, BadgeType, BusinessContactStatusFilter, Button, CUSTOMER_AUDIT_CONFIG, CertificateRowList, ChangePill, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, CompanyCard, ConfirmDialog, ContactTypeFilter, CopyButton, CountrySelect, CreateFormPageHeader, CreateFormPageShell, CurrencyDisplayTabs, CurrencyInput, CurrencyToggle, CustomCombobox, CustomFieldInput, CustomFieldValue, CustomTable, CustomizeColumnsDrawer, DIAMOND_AUDIT_CONFIG, DashboardShell, DataEditableTable, DataTable, DateInput, DetailChip, DetailPageLayout, DetailPageSkeleton, DetailSection, DocumentDeleteDialog, DocumentDetailSkeleton, DocumentHero, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyValue, EntityHeader, Field, FieldSkeleton, FileUploader, FilterMultiSelect, FilterSelect, FormSectionCard, FormSectionCardSkeleton, GEM_AUDIT_CONFIG, HistoryEntryCard, HistoryTimeline, HistoryTimelineShimmer, INVOICE_AUDIT_CONFIG, IconButton, IdHyperlinkText, InAppNotificationCard, InAppNotificationsPanel, InfoBanner, InventoryComboBox, InventoryItemCard, InventoryItemRow, InvoiceComboBox, KYCStatusFilter, KeyValueGrid, LAYOUT_AUDIT_CONFIG, LabeledToggle, LineItemsCard, LineProductCell, LineProductThumb, LineProductTypeChip, LineRowActionsMenu, LineTable, LineTableEmpty, MEMO_IN_AUDIT_CONFIG, MEMO_OUT_AUDIT_CONFIG, MediaGallery, MemoInComboBox, MetricCard, MetricRow, MetricTile, Modal, MoreInfoPanel, MoreInfoTrigger, NOT_CAPTURED, Navbar, NavbarActions, NavbarAvatar, NavbarIconButton, NavbarSearch, NavbarTitle, NumberInput, NumberedStepCard, OtpInput, OwnershipFilter, OwnershipSplitCard, PROFORMA_AUDIT_CONFIG, PageHeader, PageTabs, Pagination, PaginationSelect, PartnerShareCard, PriceInput, Protected, PurchaseOrderComboBox, QUOTATION_AUDIT_CONFIG, RadioCardGroup, ReadMoreText, RefreshButton, RichTextarea$1 as RichTextarea, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, SearchBox, SearchInput, SearchableSelect, SectionCard, SectionIcon, SegmentedControl, ShareDialog, ShareMenu, ShimmerTable, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SlideOut, SlideOutClose, SlideOutContent, SlideOutDescription, SlideOutHeader, SlideOutOverlay, SlideOutPortal, SlideOutTitle, SlideOutTrigger, Slider, SpecList, Spinner, SquareSkeleton, StateSelect, StatusBadge$1 as StatusBadge, StatusFilter, Stepper, StockTypeFilter, TablePagination, TableRowsSkeleton, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, TextHyperlink, TimePicker, ToggleSwitch, TruncateTooltip, WarehouseComboBox, WarehouseFilter, ZoomSplitViewer, asList, asText, badgeVariants, buildBulkShareMessage, buildBulkShareTitle, buildInventoryPublicUrl, buildInventoryRowProps, buildInventoryShareTitle, buildWhatsappUrl, buttonVariants, cn, countries, countryByCode, createVideoMediaItem, dropdownMenuItemDestructiveClass, fieldTypeIcon, findRegion, flagEmoji, formatAddressLocation, formatFileSize, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getCountryName, getInitials, getStatesOfCountry, iconButtonVariants, inAppNotificationCardA11y, inAppNotificationsPanelA11y, isBlank, isIndiaCountry, isKnownRegion, isPathActive, isValidAlpha2CountryCode, isValueEmpty, notify, releaseStaleOverlayBodyLock, renderBadge, resolveCountryCode, toAddressFormValues, useAuditShowMore, useBadge, useButton, useDropdownMenu, useInAppNotificationsPanel, useNavbar, useSidebar, videoThumbnailSrc, watchOverlayBodyLock };
+export { ACTIVITY_CATEGORIES, ACTIVITY_CATEGORY_META, ActionBadge, ActionButtonWithTooltip, ActiveFilterChips, ActivityFeed, AdvancedSearchDrawer, Alert, ApiComboBox, AppSidebar, AuditEntryCard, AuditHistoryPanel, AuditTimeline, AuditTimelineShimmer, Badge, BadgeType, BusinessContactStatusFilter, Button, CUSTOMER_AUDIT_CONFIG, CertificateRowList, ChangePill, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, CompanyCard, ConfirmDialog, ContactTypeFilter, ContainsFilter, CopyButton, CountrySelect, CreateFormPageHeader, CreateFormPageShell, CurrencyDisplayTabs, CurrencyInput, CurrencyToggle, CustomCombobox, CustomFieldInput, CustomFieldValue, CustomTable, CustomizeColumnsDrawer, DATE_PRESET_OPTIONS, DIAMOND_AUDIT_CONFIG, DashboardShell, DataEditableTable, DataTable, DateInput, DateRangeFilter, DetailChip, DetailPageLayout, DetailPageSkeleton, DetailSection, DocumentDeleteDialog, DocumentDetailSkeleton, DocumentHero, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyValue, EntityHeader, FILTER_COUNT_BADGE_CLASS_NAME, Field, FieldSkeleton, FileUploader, FilterCardSkeleton, FilterCellPopover, FilterEmptyState, FilterField, FilterFieldCard, FilterFieldCell, FilterFieldControl, FilterMultiSelect, FilterPanel, FilterSelect, FilterSurface, FilterSurfaceGroup, FilterSurfaceMore, FormSectionCard, FormSectionCardSkeleton, GEM_AUDIT_CONFIG, HistoryEntryCard, HistoryTimeline, HistoryTimelineShimmer, INVOICE_AUDIT_CONFIG, IconButton, IdHyperlinkText, IdListInput, InAppNotificationCard, InAppNotificationsPanel, InfoBanner, InventoryComboBox, InventoryItemCard, InventoryItemRow, InvoiceComboBox, KYCStatusFilter, KeyValueGrid, LAYOUT_AUDIT_CONFIG, LabeledToggle, LineItemsCard, LineProductCell, LineProductThumb, LineProductTypeChip, LineRowActionsMenu, LineTable, LineTableEmpty, MEMO_IN_AUDIT_CONFIG, MEMO_OUT_AUDIT_CONFIG, MediaGallery, MemoInComboBox, MetricCard, MetricRow, MetricTile, Modal, MoreInfoPanel, MoreInfoTrigger, NOT_CAPTURED, Navbar, NavbarActions, NavbarAvatar, NavbarIconButton, NavbarSearch, NavbarTitle, NumberExpressionFilter, NumberInput, NumberRangeInputs, NumberedStepCard, OtpInput, OwnershipFilter, OwnershipSplitCard, PROFORMA_AUDIT_CONFIG, PageHeader, PageTabs, Pagination, PaginationSelect, PartnerShareCard, PickListFilter, PriceInput, Protected, PurchaseOrderComboBox, QUOTATION_AUDIT_CONFIG, RadioCardGroup, ReadMoreText, RefreshButton, RichTextarea$1 as RichTextarea, SAVED_SEARCH_NAME_MAX_LENGTH, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, SaveSearchDialog, SavedSearchChipList, SavedSearchesMenu, ScaleRangeFilter, ScrollFade, SearchBox, SearchInput, SearchableSelect, SectionCard, SectionIcon, SegmentedControl, ShareDialog, ShareMenu, ShimmerTable, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SlideOut, SlideOutClose, SlideOutContent, SlideOutDescription, SlideOutHeader, SlideOutOverlay, SlideOutPortal, SlideOutTitle, SlideOutTrigger, Slider, SpecList, Spinner, SquareSkeleton, StateSelect, StatusBadge$1 as StatusBadge, StatusFilter, Stepper, StockTypeFilter, TablePagination, TableRowsSkeleton, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, TextHyperlink, TimePicker, ToggleSwitch, TriStateFilter, TruncateTooltip, TruncatedLabel, WarehouseComboBox, WarehouseFilter, ZoomSplitViewer, asList, asText, badgeVariants, buildBulkShareMessage, buildBulkShareTitle, buildInventoryPublicUrl, buildInventoryRowProps, buildInventoryShareTitle, buildNumberRuleHelp, buildWhatsappUrl, buttonVariants, cn, countries, countryByCode, createVideoMediaItem, describeFilterValue, dropdownMenuItemDestructiveClass, expandScaleRange, fieldTypeIcon, filterSavedSearches, findRegion, flagEmoji, formatAddressLocation, formatDateRange, formatFileSize, formatNumberRange, formatScaleRange, formatSelectedCount, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getCountryName, getInitials, getStatesOfCountry, iconButtonVariants, inAppNotificationCardA11y, inAppNotificationsPanelA11y, isBlank, isDuplicateSearchName, isFilterValueActive, isIndiaCountry, isKnownRegion, isPathActive, isValidAlpha2CountryCode, isValidSearchName, isValueEmpty, notify, parseNumberExpression, releaseStaleOverlayBodyLock, renderBadge, resolveCountryCode, resolveDatePreset, resolveDateRange, splitIdList, toAddressFormValues, toBoolValue, toContainsValue, toDateValue, toIdsValue, toListValue, toNumberValue, toScaleValue, useAuditShowMore, useBadge, useButton, useDropdownMenu, useInAppNotificationsPanel, useNavbar, useSidebar, valueOfType, videoThumbnailSrc, watchOverlayBodyLock };
 //# sourceMappingURL=index.esm.js.map