@caratlogic/design-system 0.1.31 → 0.1.33

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, lazy, Suspense, memo, useReducer, PureComponent, useDebugValue } from 'react';
+import React__default, { forwardRef, createElement, useState, useCallback, useMemo, useEffect, useRef, Fragment as Fragment$3, createContext, useContext, isValidElement, Children, useLayoutEffect, cloneElement, createRef, Component, useId as useId$2, 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$1s = [
+const __iconNode$1v = [
   ["path", { d: "M15 12H3", key: "6jk70r" }],
   ["path", { d: "M17 18H3", key: "1amg6g" }],
   ["path", { d: "M21 6H3", key: "1jwq7v" }]
 ];
-const AlignLeft = createLucideIcon("align-left", __iconNode$1s);
+const AlignLeft = createLucideIcon("align-left", __iconNode$1v);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2683,12 +2683,12 @@ const AlignLeft = createLucideIcon("align-left", __iconNode$1s);
  */
 
 
-const __iconNode$1r = [
+const __iconNode$1u = [
   ["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$1r);
+const Archive = createLucideIcon("archive", __iconNode$1u);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2698,11 +2698,11 @@ const Archive = createLucideIcon("archive", __iconNode$1r);
  */
 
 
-const __iconNode$1q = [
+const __iconNode$1t = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1q);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1t);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2712,11 +2712,11 @@ const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1q);
  */
 
 
-const __iconNode$1p = [
+const __iconNode$1s = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$1p);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$1s);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2726,11 +2726,11 @@ const ArrowRight = createLucideIcon("arrow-right", __iconNode$1p);
  */
 
 
-const __iconNode$1o = [
+const __iconNode$1r = [
   ["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$1o);
+const Ban = createLucideIcon("ban", __iconNode$1r);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2740,7 +2740,7 @@ const Ban = createLucideIcon("ban", __iconNode$1o);
  */
 
 
-const __iconNode$1n = [
+const __iconNode$1q = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -2751,7 +2751,7 @@ const __iconNode$1n = [
   ],
   ["circle", { cx: "18", cy: "8", r: "3", key: "1g0gzu" }]
 ];
-const BellDot = createLucideIcon("bell-dot", __iconNode$1n);
+const BellDot = createLucideIcon("bell-dot", __iconNode$1q);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2761,7 +2761,7 @@ const BellDot = createLucideIcon("bell-dot", __iconNode$1n);
  */
 
 
-const __iconNode$1m = [
+const __iconNode$1p = [
   ["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$1m = [
   ],
   ["path", { d: "M4 2C2.8 3.7 2 5.7 2 8", key: "tap9e0" }]
 ];
-const BellRing = createLucideIcon("bell-ring", __iconNode$1m);
+const BellRing = createLucideIcon("bell-ring", __iconNode$1p);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2783,7 +2783,7 @@ const BellRing = createLucideIcon("bell-ring", __iconNode$1m);
  */
 
 
-const __iconNode$1l = [
+const __iconNode$1o = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -2793,7 +2793,7 @@ const __iconNode$1l = [
     }
   ]
 ];
-const Bell = createLucideIcon("bell", __iconNode$1l);
+const Bell = createLucideIcon("bell", __iconNode$1o);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2803,13 +2803,13 @@ const Bell = createLucideIcon("bell", __iconNode$1l);
  */
 
 
-const __iconNode$1k = [
+const __iconNode$1n = [
   [
     "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$1k);
+const Bold$1 = createLucideIcon("bold", __iconNode$1n);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2819,7 +2819,7 @@ const Bold$1 = createLucideIcon("bold", __iconNode$1k);
  */
 
 
-const __iconNode$1j = [
+const __iconNode$1m = [
   [
     "path",
     {
@@ -2830,7 +2830,7 @@ const __iconNode$1j = [
   ["path", { d: "m3.3 7 8.7 5 8.7-5", key: "g66t2b" }],
   ["path", { d: "M12 22V12", key: "d0xqtd" }]
 ];
-const Box = createLucideIcon("box", __iconNode$1j);
+const Box = createLucideIcon("box", __iconNode$1m);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2840,7 +2840,7 @@ const Box = createLucideIcon("box", __iconNode$1j);
  */
 
 
-const __iconNode$1i = [
+const __iconNode$1l = [
   ["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 +2849,7 @@ const __iconNode$1i = [
   ["path", { d: "M10 14h4", key: "kelpxr" }],
   ["path", { d: "M10 18h4", key: "1ulq68" }]
 ];
-const Building2 = createLucideIcon("building-2", __iconNode$1i);
+const Building2 = createLucideIcon("building-2", __iconNode$1l);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2859,7 +2859,7 @@ const Building2 = createLucideIcon("building-2", __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" }],
@@ -2871,7 +2871,7 @@ const __iconNode$1h = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$1h);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$1k);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2881,13 +2881,13 @@ const CalendarDays = createLucideIcon("calendar-days", __iconNode$1h);
  */
 
 
-const __iconNode$1g = [
+const __iconNode$1j = [
   ["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$1g);
+const Calendar$1 = createLucideIcon("calendar", __iconNode$1j);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2897,11 +2897,11 @@ const Calendar$1 = createLucideIcon("calendar", __iconNode$1g);
  */
 
 
-const __iconNode$1f = [
+const __iconNode$1i = [
   ["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$1f);
+const CheckCheck = createLucideIcon("check-check", __iconNode$1i);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2911,8 +2911,8 @@ const CheckCheck = createLucideIcon("check-check", __iconNode$1f);
  */
 
 
-const __iconNode$1e = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$1e);
+const __iconNode$1h = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$1h);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2922,8 +2922,8 @@ const Check = createLucideIcon("check", __iconNode$1e);
  */
 
 
-const __iconNode$1d = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$1d);
+const __iconNode$1g = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$1g);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2933,8 +2933,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$1d);
  */
 
 
-const __iconNode$1c = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1c);
+const __iconNode$1f = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1f);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2944,8 +2944,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1c);
  */
 
 
-const __iconNode$1b = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$1b);
+const __iconNode$1e = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$1e);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2955,8 +2955,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$1b);
  */
 
 
-const __iconNode$1a = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$1a);
+const __iconNode$1d = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$1d);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2966,11 +2966,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$1a);
  */
 
 
-const __iconNode$19 = [
+const __iconNode$1c = [
   ["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$19);
+const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$1c);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2980,11 +2980,11 @@ const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$19);
  */
 
 
-const __iconNode$18 = [
+const __iconNode$1b = [
   ["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$18);
+const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$1b);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2994,12 +2994,12 @@ const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$18);
  */
 
 
-const __iconNode$17 = [
+const __iconNode$1a = [
   ["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$17);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$1a);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3009,11 +3009,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$17);
  */
 
 
-const __iconNode$16 = [
+const __iconNode$19 = [
   ["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$16);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$19);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3023,11 +3023,11 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$16);
  */
 
 
-const __iconNode$15 = [
+const __iconNode$18 = [
   ["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$15);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$18);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3037,11 +3037,11 @@ const CircleCheck = createLucideIcon("circle-check", __iconNode$15);
  */
 
 
-const __iconNode$14 = [
+const __iconNode$17 = [
   ["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$14);
+const CircleChevronDown = createLucideIcon("circle-chevron-down", __iconNode$17);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3051,11 +3051,11 @@ const CircleChevronDown = createLucideIcon("circle-chevron-down", __iconNode$14)
  */
 
 
-const __iconNode$13 = [
+const __iconNode$16 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }]
 ];
-const CircleDot = createLucideIcon("circle-dot", __iconNode$13);
+const CircleDot = createLucideIcon("circle-dot", __iconNode$16);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3065,12 +3065,12 @@ const CircleDot = createLucideIcon("circle-dot", __iconNode$13);
  */
 
 
-const __iconNode$12 = [
+const __iconNode$15 = [
   ["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$12);
+const CircleX = createLucideIcon("circle-x", __iconNode$15);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3080,8 +3080,8 @@ const CircleX = createLucideIcon("circle-x", __iconNode$12);
  */
 
 
-const __iconNode$11 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-const Circle = createLucideIcon("circle", __iconNode$11);
+const __iconNode$14 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("circle", __iconNode$14);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3091,11 +3091,11 @@ const Circle = createLucideIcon("circle", __iconNode$11);
  */
 
 
-const __iconNode$10 = [
+const __iconNode$13 = [
   ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ];
-const Clock = createLucideIcon("clock", __iconNode$10);
+const Clock = createLucideIcon("clock", __iconNode$13);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3105,11 +3105,11 @@ const Clock = createLucideIcon("clock", __iconNode$10);
  */
 
 
-const __iconNode$$ = [
+const __iconNode$12 = [
   ["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$$);
+const Copy = createLucideIcon("copy", __iconNode$12);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3119,11 +3119,11 @@ const Copy = createLucideIcon("copy", __iconNode$$);
  */
 
 
-const __iconNode$_ = [
+const __iconNode$11 = [
   ["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$11);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3133,12 +3133,12 @@ const Crop = createLucideIcon("crop", __iconNode$_);
  */
 
 
-const __iconNode$Z = [
+const __iconNode$10 = [
   ["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$Z);
+const Download = createLucideIcon("download", __iconNode$10);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3148,12 +3148,12 @@ const Download = createLucideIcon("download", __iconNode$Z);
  */
 
 
-const __iconNode$Y = [
+const __iconNode$$ = [
   ["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$Y);
+const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$$);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3163,12 +3163,12 @@ const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$Y);
  */
 
 
-const __iconNode$X = [
+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$X);
+const Ellipsis = createLucideIcon("ellipsis", __iconNode$_);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3178,12 +3178,12 @@ const Ellipsis = createLucideIcon("ellipsis", __iconNode$X);
  */
 
 
-const __iconNode$W = [
+const __iconNode$Z = [
   ["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$W);
+const ExternalLink = createLucideIcon("external-link", __iconNode$Z);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3193,7 +3193,7 @@ const ExternalLink = createLucideIcon("external-link", __iconNode$W);
  */
 
 
-const __iconNode$V = [
+const __iconNode$Y = [
   [
     "path",
     {
@@ -3203,7 +3203,7 @@ const __iconNode$V = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$V);
+const Eye = createLucideIcon("eye", __iconNode$Y);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3213,13 +3213,13 @@ const Eye = createLucideIcon("eye", __iconNode$V);
  */
 
 
-const __iconNode$U = [
+const __iconNode$X = [
   [
     "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$U);
+const Facebook = createLucideIcon("facebook", __iconNode$X);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3229,7 +3229,7 @@ const Facebook = createLucideIcon("facebook", __iconNode$U);
  */
 
 
-const __iconNode$T = [
+const __iconNode$W = [
   ["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 +3241,7 @@ const __iconNode$T = [
   ],
   ["circle", { cx: "5", cy: "14", r: "3", key: "ufru5t" }]
 ];
-const FileBadge = createLucideIcon("file-badge", __iconNode$T);
+const FileBadge = createLucideIcon("file-badge", __iconNode$W);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3251,12 +3251,12 @@ const FileBadge = createLucideIcon("file-badge", __iconNode$T);
  */
 
 
-const __iconNode$S = [
+const __iconNode$V = [
   ["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$S);
+const FileCheck2 = createLucideIcon("file-check-2", __iconNode$V);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3266,14 +3266,14 @@ const FileCheck2 = createLucideIcon("file-check-2", __iconNode$S);
  */
 
 
-const __iconNode$R = [
+const __iconNode$U = [
   ["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$R);
+const FileText = createLucideIcon("file-text", __iconNode$U);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3283,7 +3283,28 @@ const FileText = createLucideIcon("file-text", __iconNode$R);
  */
 
 
-const __iconNode$Q = [
+const __iconNode$T = [
+  [
+    "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$T);
+
+/**
+ * @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$S = [
   [
     "path",
     {
@@ -3292,7 +3313,7 @@ const __iconNode$Q = [
     }
   ]
 ];
-const Funnel = createLucideIcon("funnel", __iconNode$Q);
+const Funnel = createLucideIcon("funnel", __iconNode$S);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3302,7 +3323,7 @@ const Funnel = createLucideIcon("funnel", __iconNode$Q);
  */
 
 
-const __iconNode$P = [
+const __iconNode$R = [
   ["path", { d: "M10.5 3 8 9l4 13 4-13-2.5-6", key: "b3dvk1" }],
   [
     "path",
@@ -3313,7 +3334,7 @@ const __iconNode$P = [
   ],
   ["path", { d: "M2 9h20", key: "16fsjt" }]
 ];
-const Gem = createLucideIcon("gem", __iconNode$P);
+const Gem = createLucideIcon("gem", __iconNode$R);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3323,7 +3344,7 @@ const Gem = createLucideIcon("gem", __iconNode$P);
  */
 
 
-const __iconNode$O = [
+const __iconNode$Q = [
   ["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 +3352,7 @@ const __iconNode$O = [
   ["circle", { cx: "19", cy: "15", r: "1", key: "1a92ep" }],
   ["circle", { cx: "5", cy: "15", r: "1", key: "5r1jwy" }]
 ];
-const GripHorizontal = createLucideIcon("grip-horizontal", __iconNode$O);
+const GripHorizontal = createLucideIcon("grip-horizontal", __iconNode$Q);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3341,7 +3362,7 @@ const GripHorizontal = createLucideIcon("grip-horizontal", __iconNode$O);
  */
 
 
-const __iconNode$N = [
+const __iconNode$P = [
   ["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 +3370,7 @@ const __iconNode$N = [
   ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
   ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
 ];
-const GripVertical = createLucideIcon("grip-vertical", __iconNode$N);
+const GripVertical = createLucideIcon("grip-vertical", __iconNode$P);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3359,13 +3380,13 @@ const GripVertical = createLucideIcon("grip-vertical", __iconNode$N);
  */
 
 
-const __iconNode$M = [
+const __iconNode$O = [
   ["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$M);
+const Hash = createLucideIcon("hash", __iconNode$O);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3375,13 +3396,13 @@ const Hash = createLucideIcon("hash", __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: "m17 12 3-2v8", key: "1hhhft" }]
 ];
-const Heading1 = createLucideIcon("heading-1", __iconNode$L);
+const Heading1 = createLucideIcon("heading-1", __iconNode$N);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3391,13 +3412,13 @@ const Heading1 = createLucideIcon("heading-1", __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: "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1", key: "9jr5yi" }]
 ];
-const Heading2 = createLucideIcon("heading-2", __iconNode$K);
+const Heading2 = createLucideIcon("heading-2", __iconNode$M);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3407,14 +3428,14 @@ const Heading2 = createLucideIcon("heading-2", __iconNode$K);
  */
 
 
-const __iconNode$J = [
+const __iconNode$L = [
   ["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$J);
+const Heading3 = createLucideIcon("heading-3", __iconNode$L);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3424,12 +3445,12 @@ const Heading3 = createLucideIcon("heading-3", __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" }],
   ["path", { d: "M12 7v5l4 2", key: "1fdv2h" }]
 ];
-const History = createLucideIcon("history", __iconNode$I);
+const History = createLucideIcon("history", __iconNode$K);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3439,12 +3460,12 @@ const History = createLucideIcon("history", __iconNode$I);
  */
 
 
-const __iconNode$H = [
+const __iconNode$J = [
   ["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$H);
+const Image$1 = createLucideIcon("image", __iconNode$J);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3454,12 +3475,12 @@ const Image$1 = createLucideIcon("image", __iconNode$H);
  */
 
 
-const __iconNode$G = [
+const __iconNode$I = [
   ["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$G);
+const Info = createLucideIcon("info", __iconNode$I);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3469,12 +3490,12 @@ const Info = createLucideIcon("info", __iconNode$G);
  */
 
 
-const __iconNode$F = [
+const __iconNode$H = [
   ["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$F);
+const Italic$1 = createLucideIcon("italic", __iconNode$H);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3484,7 +3505,7 @@ const Italic$1 = createLucideIcon("italic", __iconNode$F);
  */
 
 
-const __iconNode$E = [
+const __iconNode$G = [
   [
     "path",
     {
@@ -3494,7 +3515,7 @@ const __iconNode$E = [
   ],
   ["circle", { cx: "16.5", cy: "7.5", r: ".5", fill: "currentColor", key: "w0ekpg" }]
 ];
-const KeyRound = createLucideIcon("key-round", __iconNode$E);
+const KeyRound = createLucideIcon("key-round", __iconNode$G);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3504,12 +3525,12 @@ const KeyRound = createLucideIcon("key-round", __iconNode$E);
  */
 
 
-const __iconNode$D = [
+const __iconNode$F = [
   ["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$D);
+const Link2 = createLucideIcon("link-2", __iconNode$F);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3519,14 +3540,14 @@ const Link2 = createLucideIcon("link-2", __iconNode$D);
  */
 
 
-const __iconNode$C = [
+const __iconNode$E = [
   ["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$C);
+const ListChecks = createLucideIcon("list-checks", __iconNode$E);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3536,7 +3557,7 @@ const ListChecks = createLucideIcon("list-checks", __iconNode$C);
  */
 
 
-const __iconNode$B = [
+const __iconNode$D = [
   ["path", { d: "M10 12h11", key: "6m4ad9" }],
   ["path", { d: "M10 18h11", key: "11hvi2" }],
   ["path", { d: "M10 6h11", key: "c7qv1k" }],
@@ -3544,7 +3565,7 @@ const __iconNode$B = [
   ["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$B);
+const ListOrdered = createLucideIcon("list-ordered", __iconNode$D);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3554,7 +3575,7 @@ const ListOrdered = createLucideIcon("list-ordered", __iconNode$B);
  */
 
 
-const __iconNode$A = [
+const __iconNode$C = [
   ["path", { d: "M3 12h.01", key: "nlz23k" }],
   ["path", { d: "M3 18h.01", key: "1tta3j" }],
   ["path", { d: "M3 6h.01", key: "1rqtza" }],
@@ -3562,7 +3583,7 @@ const __iconNode$A = [
   ["path", { d: "M8 18h13", key: "1lx6n3" }],
   ["path", { d: "M8 6h13", key: "ik3vkj" }]
 ];
-const List = createLucideIcon("list", __iconNode$A);
+const List = createLucideIcon("list", __iconNode$C);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3572,8 +3593,8 @@ const List = createLucideIcon("list", __iconNode$A);
  */
 
 
-const __iconNode$z = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$z);
+const __iconNode$B = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$B);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3583,7 +3604,7 @@ const LoaderCircle = createLucideIcon("loader-circle", __iconNode$z);
  */
 
 
-const __iconNode$y = [
+const __iconNode$A = [
   ["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 +3614,7 @@ const __iconNode$y = [
   ["path", { d: "M2 12h4", key: "j09sii" }],
   ["path", { d: "m4.9 4.9 2.9 2.9", key: "giyufr" }]
 ];
-const Loader = createLucideIcon("loader", __iconNode$y);
+const Loader = createLucideIcon("loader", __iconNode$A);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3603,12 +3624,12 @@ const Loader = createLucideIcon("loader", __iconNode$y);
  */
 
 
-const __iconNode$x = [
+const __iconNode$z = [
   ["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$x);
+const LogOut = createLucideIcon("log-out", __iconNode$z);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3618,11 +3639,11 @@ const LogOut = createLucideIcon("log-out", __iconNode$x);
  */
 
 
-const __iconNode$w = [
+const __iconNode$y = [
   ["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$w);
+const Mail = createLucideIcon("mail", __iconNode$y);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3632,12 +3653,12 @@ const Mail = createLucideIcon("mail", __iconNode$w);
  */
 
 
-const __iconNode$v = [
+const __iconNode$x = [
   ["path", { d: "M4 12h16", key: "1lakjw" }],
   ["path", { d: "M4 18h16", key: "19g7jn" }],
   ["path", { d: "M4 6h16", key: "1o0s65" }]
 ];
-const Menu = createLucideIcon("menu", __iconNode$v);
+const Menu = createLucideIcon("menu", __iconNode$x);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3647,7 +3668,18 @@ const Menu = createLucideIcon("menu", __iconNode$v);
  */
 
 
-const __iconNode$u = [
+const __iconNode$w = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$w);
+
+/**
+ * @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$v = [
   [
     "path",
     {
@@ -3656,7 +3688,7 @@ const __iconNode$u = [
     }
   ]
 ];
-const Moon = createLucideIcon("moon", __iconNode$u);
+const Moon = createLucideIcon("moon", __iconNode$v);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3666,7 +3698,7 @@ const Moon = createLucideIcon("moon", __iconNode$u);
  */
 
 
-const __iconNode$t = [
+const __iconNode$u = [
   [
     "path",
     {
@@ -3679,7 +3711,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$u);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3689,12 +3721,12 @@ const Palette = createLucideIcon("palette", __iconNode$t);
  */
 
 
-const __iconNode$s = [
+const __iconNode$t = [
   ["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$t);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3704,7 +3736,7 @@ const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$s);
  */
 
 
-const __iconNode$r = [
+const __iconNode$s = [
   [
     "path",
     {
@@ -3713,7 +3745,7 @@ const __iconNode$r = [
     }
   ]
 ];
-const Paperclip = createLucideIcon("paperclip", __iconNode$r);
+const Paperclip = createLucideIcon("paperclip", __iconNode$s);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3723,7 +3755,7 @@ const Paperclip = createLucideIcon("paperclip", __iconNode$r);
  */
 
 
-const __iconNode$q = [
+const __iconNode$r = [
   [
     "path",
     {
@@ -3733,7 +3765,7 @@ const __iconNode$q = [
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-const Pencil = createLucideIcon("pencil", __iconNode$q);
+const Pencil = createLucideIcon("pencil", __iconNode$r);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3743,7 +3775,7 @@ const Pencil = createLucideIcon("pencil", __iconNode$q);
  */
 
 
-const __iconNode$p = [
+const __iconNode$q = [
   [
     "path",
     {
@@ -3752,7 +3784,7 @@ const __iconNode$p = [
     }
   ]
 ];
-const Phone = createLucideIcon("phone", __iconNode$p);
+const Phone = createLucideIcon("phone", __iconNode$q);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3762,7 +3794,7 @@ const Phone = createLucideIcon("phone", __iconNode$p);
  */
 
 
-const __iconNode$o = [
+const __iconNode$p = [
   [
     "path",
     {
@@ -3771,7 +3803,7 @@ const __iconNode$o = [
     }
   ]
 ];
-const Play = createLucideIcon("play", __iconNode$o);
+const Play = createLucideIcon("play", __iconNode$p);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3781,11 +3813,11 @@ const Play = createLucideIcon("play", __iconNode$o);
  */
 
 
-const __iconNode$n = [
+const __iconNode$o = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$n);
+const Plus = createLucideIcon("plus", __iconNode$o);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3795,10 +3827,10 @@ const Plus = createLucideIcon("plus", __iconNode$n);
  */
 
 
-const __iconNode$m = [
+const __iconNode$n = [
   ["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$n);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3808,11 +3840,11 @@ const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode$
  */
 
 
-const __iconNode$l = [
+const __iconNode$m = [
   ["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$m);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3822,13 +3854,13 @@ const Redo = createLucideIcon("redo", __iconNode$l);
  */
 
 
-const __iconNode$k = [
+const __iconNode$l = [
   ["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$l);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3838,14 +3870,28 @@ const RefreshCw = createLucideIcon("refresh-cw", __iconNode$k);
  */
 
 
-const __iconNode$j = [
+const __iconNode$k = [
   ["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$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 = [
+  ["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$j);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -4654,7 +4700,7 @@ const buttonVariants$1 = cva("inline-flex items-center justify-center gap-2 whit
 });
 function Button$1({ className, variant, size, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
-    return (jsx(Comp, { "data-slot": "button", className: cn(buttonVariants$1({ variant, size, className })), ...props }));
+    return (jsx(Comp, { "data-slot": "button", "data-variant": variant ?? 'default', className: cn(buttonVariants$1({ variant, size, className })), ...props }));
 }
 
 const VARIANT_BY_KIND = {
@@ -13448,7 +13494,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 })] }) }));
@@ -14312,7 +14358,7 @@ function useNumberInput({ value, onChange, precision, min, max, emptyFallback, e
     return { raw, handleChange, handleFocus, handleBlur };
 }
 
-const NumberInput = React.forwardRef(({ value, onChange, precision, min, max, step, className, emptyFallback = 0, emitUndefinedOnEmpty = false, trimTrailingZeros = false, ...rest }, ref) => {
+const NumberInput = React.forwardRef(({ value, onChange, precision, min, max, step, className, emptyFallback = 0, emitUndefinedOnEmpty = false, trimTrailingZeros = false, suffix, stepper = false, ...rest }, ref) => {
     const { onFocus: onFocusProp, onBlur: onBlurProp, ...inputRest } = rest;
     const { raw, handleChange, handleFocus, handleBlur } = useNumberInput({
         value,
@@ -14326,7 +14372,22 @@ const NumberInput = React.forwardRef(({ value, onChange, precision, min, max, st
         onFocusProp,
         onBlurProp,
     });
-    return (jsx(Input, { ref: ref, type: "text", inputMode: "decimal", className: className, value: raw, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, step: step, ...inputRest }));
+    const input = (jsx(Input, { ref: ref, type: "text", inputMode: "decimal", className: cn(className, suffix != null && !stepper && 'pr-10', stepper && 'h-full border-0 bg-transparent px-1 text-center shadow-none focus-visible:ring-0'), value: raw, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, step: step, ...inputRest }));
+    if (stepper) {
+        const current = Number(value);
+        const delta = step ?? 1;
+        const at = Number.isFinite(current) ? current : (min ?? 0);
+        const nudge = (direction) => {
+            const next = at + direction * delta;
+            onChange?.(Math.min(max ?? next, Math.max(min ?? next, next)));
+        };
+        const stepButton = 'flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40';
+        return (jsxs("div", { "aria-invalid": inputRest['aria-invalid'], className: cn('flex h-10 w-full items-center gap-1 rounded-md border border-input-border px-1.5 dark:bg-input/30', 'focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20'), children: [jsx("button", { type: "button", "aria-label": "Decrease", className: stepButton, disabled: inputRest.disabled || (min !== undefined && at <= min), onClick: () => nudge(-1), children: jsx(Minus, { className: "size-3.5" }) }), input, jsx("button", { type: "button", "aria-label": "Increase", className: stepButton, disabled: inputRest.disabled || (max !== undefined && at >= max), onClick: () => nudge(1), children: jsx(Plus, { className: "size-3.5" }) })] }));
+    }
+    if (suffix != null) {
+        return (jsxs("div", { className: "relative w-full", children: [input, jsx("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-sm text-muted-foreground", children: suffix })] }));
+    }
+    return input;
 });
 NumberInput.displayName = 'NumberInput';
 
@@ -14868,30 +14929,74 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (jsx(Di
         'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ' +
         'fixed inset-0 z-50 bg-black/50', className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => (jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, { ref: ref, "data-slot": "dialog-content", className: cn('bg-background fixed top-[50%] left-[50%] z-50 grid ' +
-                'w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] ' +
-                'gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg ' +
+const DIALOG_WIDTH = {
+    default: '32rem',
+    wide: '50rem',
+};
+/** Every dialog stops growing here; taller content scrolls inside it. */
+const DIALOG_MAX_HEIGHT = 'min(85vh, 45rem)';
+const DialogContent = React.forwardRef(({ className, children, hideCloseButton, size = 'default', style, ...props }, ref) => (jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, { ref: ref, "data-slot": "dialog-content", className: cn('bg-card fixed top-[50%] left-[50%] z-50 grid ' +
+                'translate-x-[-50%] translate-y-[-50%] ' +
+                'gap-4 overflow-y-auto overscroll-contain rounded-2xl border border-border p-6 shadow-xl duration-200 ' +
+                // A footer closes the panel itself; sticky can't sit in the padding a negative margin would bleed into.
+                'has-[[data-slot=dialog-footer]]:pb-0 ' +
                 'data-[state=open]:animate-in data-[state=closed]:animate-out ' +
                 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ' +
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', className), ...props, children: [children, !hideCloseButton && (jsxs(DialogPrimitive.Close, { className: cn('absolute top-4 right-4 rounded-xs opacity-70 transition-opacity ' +
-                        'hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring ' +
-                        'focus:ring-offset-2 ring-offset-background disabled:pointer-events-none ' +
-                        '[&_svg]:pointer-events-none [&_svg]:shrink-0 ' +
+                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', className), style: {
+                ...style,
+                width: 'calc(100vw - 2rem)',
+                maxWidth: DIALOG_WIDTH[size],
+                maxHeight: DIALOG_MAX_HEIGHT,
+            }, ...props, children: [children, !hideCloseButton && (jsxs(DialogPrimitive.Close, { className: cn('absolute top-5 right-5 inline-flex size-7 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 ' +
+                        'disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 ' +
                         "[&_svg:not([class*='size-'])]:size-4"), children: [jsx(X$2, {}), jsx("span", { className: "sr-only", children: "Close" })] }))] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-// Header
-function DialogHeader({ className, ...props }) {
-    return (jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));
+const DIALOG_ICON_TONE = {
+    primary: 'bg-primary/10 text-primary dark:bg-primary/20',
+    neutral: 'bg-muted text-muted-foreground',
+    warning: 'bg-badge-amber-bg text-badge-amber-text',
+    destructive: 'bg-badge-destructive-bg text-destructive',
+};
+/** The tinted tile that names a dialog's action; shared by every dialog header. */
+function DialogIcon({ tone = 'primary', className, children, }) {
+    return (jsx("span", { "aria-hidden": true, className: cn(
+        // 44px = the title's 24px line + the subtitle's 20px line, so the tile spans both.
+        'flex size-11 shrink-0 items-center justify-center rounded-lg [&_svg]:size-5', DIALOG_ICON_TONE[tone], className), children: children }));
+}
+function DialogHeader({ className, icon, iconTone, children, ...props }) {
+    if (icon) {
+        return (jsxs("div", { "data-slot": "dialog-header", 
+            // A lone title centres on the icon; with a subtitle the pair starts at the icon's top.
+            className: cn('flex flex-row items-center gap-3.5 pr-8 text-left has-[[data-slot=dialog-description]]:items-start', className), ...props, children: [jsx(DialogIcon, { tone: iconTone, children: icon }), jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children })] }));
+    }
+    return (jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col pr-8 text-left', className), ...props, children: children }));
 }
 // Footer
+/** Neutral footer buttons get the card surface so they stand out from the tinted footer band. */
+const DIALOG_FOOTER_BUTTONS = '[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:border ' +
+    '[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:border-border ' +
+    '[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:bg-card ' +
+    '[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:shadow-xs ' +
+    '[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:hover:bg-muted ' +
+    // The outline variant forces its own dark fill; keep every footer secondary button on the same card surface.
+    'dark:[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:!bg-card ' +
+    'dark:[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:!border-border ' +
+    'dark:[&_[data-slot=button]:is([data-variant=outline],[data-variant=ghost],[data-variant=secondary])]:hover:!bg-muted';
 function DialogFooter({ className, ...props }) {
-    return (jsx("div", { "data-slot": "dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+    return (jsx("div", { "data-slot": "dialog-footer", 
+        // Bleeds to the dialog's side edges as a tinted band; dialogs that drop the default p-6 reset the margins.
+        className: cn(
+        // Sticky so the actions stay in view while a long body scrolls.
+        'sticky bottom-0 z-10 -mx-6 mt-1 flex shrink-0 flex-col-reverse gap-2 border-t border-border bg-[color-mix(in_srgb,var(--muted)_40%,var(--card))] px-6 py-4 ' +
+            'sm:flex-row sm:items-center sm:justify-end', DIALOG_FOOTER_BUTTONS, className), ...props }));
 }
 // Title
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Title, { ref: ref, "data-slot": "dialog-title", className: cn('text-lg font-semibold leading-none', className), ...props })));
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Title, { ref: ref, "data-slot": "dialog-title", className: cn('text-lg font-semibold leading-6 text-foreground', className), ...props })));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 // Description
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Description, { ref: ref, "data-slot": "dialog-description", className: cn('text-sm text-muted-foreground', className), ...props })));
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Description, { ref: ref, "data-slot": "dialog-description", className: cn('text-sm leading-5 text-muted-foreground', className), ...props })));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // ---------- Command Wrapper ----------
@@ -15311,36 +15416,467 @@ 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 }));
 }
 
+const NUMBER = String.raw `(\d+(?:\.\d+)?|\.\d+)`;
+const COMPARISON_RE = new RegExp(`^(>=|<=|>|<)${NUMBER}$`);
+const BETWEEN_RE = new RegExp(`^${NUMBER}-${NUMBER}$`);
+const EXACT_RE = new RegExp(`^${NUMBER}$`);
+const NUMBER_EXPRESSION_HELP = [
+    { rule: '>1', meaning: 'More than 1' },
+    { rule: '<3', meaning: 'Less than 3' },
+    { rule: '>=1.5', meaning: '1.5 or more' },
+    { rule: '<=3', meaning: '3 or less' },
+    { rule: '1–3', meaning: 'Between 1 and 3, inclusive' },
+    { rule: '1.52', meaning: 'Exactly 1.52' },
+];
+/** Parses the typed rules in `NUMBER_EXPRESSION_HELP`. 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 = Number(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 = Number(between[1]);
+        const max = Number(between[2]);
+        return min <= max ? { ok: true, range: { min, max } } : { ok: false };
+    }
+    const exact = EXACT_RE.exec(normalized);
+    if (exact) {
+        const value = Number(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);
+/** 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-sm 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: "inline-flex size-5 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground", 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)) {
+        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;
+}
+
+/** 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));
+}
+function getChipClassName(selected) {
+    return getSelectableOptionClassName(selected, 'inline-flex h-8 items-center gap-1.5 rounded-full px-3');
+}
+function getTileClassName(selected) {
+    return getSelectableOptionClassName(selected, 'flex min-h-11 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 = 'flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-sm text-foreground hover:bg-muted/50';
+/** 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 = 'flex h-9 items-center gap-2 rounded-lg border border-input bg-card px-3 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30';
+
+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, }) {
+    const { query, setQuery, visibleOptions, selectedCount } = usePickListFilter({
+        options,
+        value,
+        layout,
+    });
+    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(toggleValue(value, option.value));
+    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: [jsx(Checkbox, { className: LIST_CHECKBOX_CLASS_NAME, checked: value.includes(option.value), onCheckedChange: () => toggle(option) }), jsx(OptionSwatch, { color: option.swatch }), 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 }))] }, 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 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: "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", 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 = {
@@ -21211,37 +21747,30 @@ const formatDate$3 = (iso) => {
     }
 };
 
-const InfoCard = ({ info, title, refundToWallet, onRefundChange, }) => {
+/** The document the dialog acts on: number, customer, total and date, plus paid / outstanding when known. */
+const InfoCard = ({ info }) => {
     if (!info)
         return null;
     if (React__default.isValidElement(info))
-        return jsx("div", { className: "mt-3", children: info });
+        return jsx("div", { children: info });
     const i = info;
-    return (jsx("div", { className: "mt-1 rounded-lg border bg-muted p-3 shadow-sm", children: jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Date" }), jsx("div", { children: formatDate$3(i.invoiceDate) })] }), jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Total" }), jsx("div", { className: "font-medium text-foreground", children: formatCurrencyWithTenantSymbol(i.totalAmount) })] }), i.paidAmount !== undefined && (jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Paid" }), jsx("div", { className: "font-medium text-primary", children: formatCurrencyWithTenantSymbol(i.paidAmount) })] })), i.outstandingAmount !== undefined && (jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Outstanding" }), jsx("div", { className: "font-medium text-muted-foreground", children: formatCurrencyWithTenantSymbol(i.outstandingAmount) })] })), title === 'Cancel Invoice' &&
-                    !React__default.isValidElement(info) &&
-                    (i?.paidAmount ?? 0) > 0 && (jsxs("div", { className: "flex items-start gap-3", children: [jsx("div", { className: "w-36 whitespace-nowrap text-sm text-muted-foreground", children: "Refund to Wallet" }), jsx(Checkbox, { checked: !!refundToWallet, onCheckedChange: (v) => onRefundChange?.(Boolean(v)), className: "bg-card" })] })), (i.customerName || i.email) && (jsxs("div", { className: "mt-1 rounded bg-card p-2", children: [i.customerName && (jsx("div", { className: "text-sm font-medium", children: i.customerName })), i.email && (jsx("div", { className: "text-sm text-muted-foreground", children: i.email }))] }))] }) }));
+    const party = [i.customerName, i.email].filter(Boolean).join(' · ');
+    const hasBalance = i.paidAmount !== undefined || i.outstandingAmount !== undefined;
+    return (jsxs("div", { className: "rounded-xl border border-border bg-muted/30 p-3.5", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { "aria-hidden": true, className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: jsx(FileText, { className: "size-4" }) }), jsxs("div", { className: "min-w-0 flex-1", children: [i.invoiceNumber && (jsx("p", { className: "m-0 truncate text-sm font-semibold text-foreground", children: i.invoiceNumber })), party && jsx("p", { className: "m-0 truncate text-xs text-muted-foreground", children: party })] }), jsxs("div", { className: "shrink-0 text-right", children: [i.totalAmount !== undefined && (jsx("p", { className: "m-0 text-sm font-semibold tabular-nums text-foreground", children: formatCurrencyWithTenantSymbol(i.totalAmount) })), i.invoiceDate && jsx("p", { className: "m-0 text-xs text-muted-foreground", children: formatDate$3(i.invoiceDate) })] })] }), hasBalance && (jsxs("dl", { className: "m-0 mt-3 grid gap-1.5 border-t border-border pt-3 text-sm", children: [i.paidAmount !== undefined && (jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsx("dt", { className: "text-muted-foreground", children: "Paid" }), jsx("dd", { className: "m-0 font-medium tabular-nums text-amount-paid", children: formatCurrencyWithTenantSymbol(i.paidAmount) })] })), i.outstandingAmount !== undefined && (jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsx("dt", { className: "text-muted-foreground", children: "Outstanding" }), jsx("dd", { className: "m-0 font-medium tabular-nums text-foreground", children: formatCurrencyWithTenantSymbol(i.outstandingAmount) })] }))] }))] }));
 };
 
-function useRefundToWallet(open) {
-    const [refundToWallet, setRefundToWallet] = useState(true);
-    useEffect(() => {
-        if (open)
-            setRefundToWallet(true);
-    }, [open]);
-    return { refundToWallet, setRefundToWallet };
-}
-
-const ConfirmDialog = ({ open, onOpenChange, title, description, info, confirmLabel = 'Yes', cancelLabel = 'Cancel', confirmVariant = 'default', icon: Icon = Trash2, disabled = false, onConfirm, onCancel, }) => {
-    const { refundToWallet, setRefundToWallet } = useRefundToWallet(open);
+const ConfirmDialog = ({ open, onOpenChange, title, description, info, confirmLabel = 'Yes', cancelLabel = 'Cancel', confirmVariant = 'default', icon, disabled = false, onConfirm, onCancel, children, }) => {
     // Opened from a modal menu row, two dismissable layers overlap and Radix
     // restores `pointer-events: none` to <body> on close, freezing the page.
     useOverlayBodyLockRelease(open);
-    return (jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxs(DialogContent, { className: "gap-3 p-5", children: [jsxs(DialogHeader, { className: "gap-1.5", children: [jsxs(DialogTitle, { className: "flex items-center gap-2", children: [confirmVariant === 'destructive' && (jsx("span", { className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-destructive/10", children: jsx(Icon, { className: "h-3.5 w-3.5 text-destructive" }) })), jsx("span", { children: title })] }), description && jsx(DialogDescription, { children: description }), info && (jsx(InfoCard, { info: info, title: title, refundToWallet: refundToWallet, onRefundChange: setRefundToWallet }))] }), jsxs(DialogFooter, { className: "mt-1", children: [jsx(Button$1, { variant: "outline", onClick: () => {
+    const destructive = confirmVariant === 'destructive';
+    const Icon = icon ?? (destructive ? Trash2 : undefined);
+    return (jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxs(DialogContent, { children: [jsxs(DialogHeader, { icon: Icon ? jsx(Icon, {}) : undefined, iconTone: destructive ? 'destructive' : 'primary', children: [jsx(DialogTitle, { children: title }), description && jsx(DialogDescription, { children: description })] }), info && jsx(InfoCard, { info: info }), children, jsxs(DialogFooter, { children: [jsx(Button$1, { variant: "outline", onClick: () => {
                                 onCancel?.();
                                 onOpenChange(false);
-                            }, disabled: disabled, children: cancelLabel }), jsxs(Button$1, { variant: confirmVariant, onClick: async () => {
-                                await onConfirm(title === 'Cancel Invoice' ? refundToWallet : undefined);
-                            }, disabled: disabled, children: [confirmVariant === 'destructive' && (jsx(Icon, { className: "h-4 w-4", "aria-hidden": true })), disabled ? 'Please wait...' : confirmLabel] })] })] }) }));
+                            }, disabled: disabled, children: cancelLabel }), jsx(Button$1, { variant: confirmVariant, onClick: async () => {
+                                await onConfirm();
+                            }, disabled: disabled, children: disabled ? 'Please wait...' : confirmLabel })] })] }) }));
 };
 
 function matchesSearch(haystack, search) {
@@ -21606,6 +22135,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'
@@ -21636,6 +22193,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);
 /**
@@ -21727,8 +22308,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" })] })] }));
+}
+
+/** 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, }) {
+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({
@@ -21741,6 +22366,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;
@@ -21752,25 +22382,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);
@@ -21790,19 +22412,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
@@ -21818,7 +22428,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)] }));
 }
 
 /**
@@ -37204,7 +37820,11 @@ function DateInput({ value, onChange, onBlur, name, id, className, min, max, dis
 
 /** The permanent-delete confirmation for a document (quotation, memo, proforma…). */
 function DocumentDeleteDialog({ open, onOpenChange, documentLabel, documentNumber, info, busy, onConfirm, }) {
-    return (jsx(ConfirmDialog, { open: open, onOpenChange: onOpenChange, title: `Delete ${documentLabel}`, description: jsxs(Fragment$2, { children: [jsxs("span", { children: ["Are you sure you want to permanently delete ", documentLabel, documentNumber ? (jsxs(Fragment$2, { children: [' ', jsx("span", { className: "font-semibold", children: documentNumber })] })) : null, "?"] }), jsx("div", { className: "mt-1", children: "This action cannot be undone." })] }), info: info, confirmLabel: `Yes, Delete ${documentLabel}`, cancelLabel: "No, Keep It", confirmVariant: "destructive", disabled: busy, onConfirm: onConfirm }));
+    const noun = documentLabel.toLowerCase();
+    const summary = info == null || (typeof info === 'object' && !isValidElement(info))
+        ? { invoiceNumber: documentNumber, ...(info ?? {}) }
+        : info;
+    return (jsx(ConfirmDialog, { open: open, onOpenChange: onOpenChange, title: `Delete ${noun}?`, info: summary, confirmLabel: "Delete", cancelLabel: "Cancel", confirmVariant: "destructive", disabled: busy, onConfirm: onConfirm }));
 }
 
 function clampPercent$1(value) {
@@ -37834,6 +38454,487 @@ 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-6 max-w-full items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-2 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', className, }) {
+    if (chips.length === 0)
+        return null;
+    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))), onClearAll && (jsx("button", { type: "button", onClick: onClearAll, className: CLEAR_ALL_CLASS, children: "Clear all" }))] }));
+}
+
+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. */
+function getPresetClassName$1(selected) {
+    return cn('w-full cursor-pointer whitespace-nowrap rounded-md px-3 py-2 text-left text-sm text-foreground transition-colors', FILTER_FOCUS_RING, selected ? 'bg-primary/5 font-semibold text-primary' : 'hover:bg-muted/60');
+}
+
+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, { 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-sm 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("span", { className: "line-clamp-2 leading-tight", children: option.label }) }, option.value));
+        }) }));
+}
+
+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/20 bg-primary/5 px-2 text-xs text-primary", 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 = cn('flex h-8 w-full cursor-pointer items-center gap-3 rounded-md px-2 text-left text-xs transition-colors hover:bg-muted', FILTER_FOCUS_RING);
+/** Key-cap chip for the rule, fixed width so every meaning lines up. */
+const RULE_CHIP_CLASS_NAME = 'inline-flex h-6 min-w-12 shrink-0 items-center justify-center rounded border border-border bg-background px-1.5 font-mono text-xs font-semibold text-foreground shadow-xs';
+
+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),
+        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, className, }) {
+    const { draft, state, helpOpen, errorId, handleChange, handleKeyDown, handleFocus, handleBlur, applyRule, } = useNumberExpressionFilter(value, onChange);
+    const invalid = state === 'invalid';
+    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, 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", children: NUMBER_EXPRESSION_HELP.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: "flex gap-2 rounded-md bg-muted/50 p-2 text-muted-foreground", children: [jsx(Info, { "aria-hidden": "true", className: "mt-0.5 size-3.5 shrink-0" }), jsx("div", { children: note })] })), invalid && (jsxs("div", { id: getNumberErrorId(errorId), role: "alert", className: "flex gap-2 rounded-md bg-destructive/10 p-2 text-destructive", children: [jsx(CircleAlert, { "aria-hidden": "true", className: "mt-0.5 size-3.5 shrink-0" }), 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');
+}
+function getPresetClassName(selected) {
+    return getSelectableOptionClassName(selected, 'inline-flex h-7 items-center rounded-full px-2.5');
+}
+
+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();
+    };
+}
+
+function getRadioRowClassName(checked) {
+    return cn('flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-xs text-foreground transition-colors', FILTER_FOCUS_RING, checked ? 'bg-muted font-medium' : 'hover:bg-muted/50');
+}
+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));
+        }) }));
+}
+
 /**
  * Compact "time ago" label, e.g. "5m ago". Falls back to a locale date past a
  * week so older entries stay scannable.
@@ -38187,23 +39288,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(() => {
@@ -38211,7 +39315,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}`,
         })) }));
@@ -38443,25 +39547,15 @@ 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 }))] })] }));
 
-const SIZE_WIDTH = {
-    sm: 480,
-    md: 640,
-    lg: 760,
-    xl: 960,
-};
 /**
  * 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, icon, children, footer, size = 'md', hideCloseButton = false, className, bodyClassName, }) {
-    const maxWidth = SIZE_WIDTH[size];
+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, style: {
-                width: `min(${maxWidth}px, calc(100vw - 2rem))`,
-                maxWidth: `${maxWidth}px`,
-            }, className: cn('flex max-h-[calc(100vh-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-none', className), children: [jsxs("header", { className: "flex items-center justify-between gap-4 border-b border-border px-6 py-4", children: [jsx(DialogPrimitive.Title, { asChild: true, children: jsxs("div", { className: "flex items-center gap-2 text-base font-medium text-foreground", children: [icon, jsx("span", { children: title })] }) }), !hideCloseButton && (jsx(DialogPrimitive.Close, { "aria-label": "Close", className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-label transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30", 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: "flex items-center justify-end gap-3 border-t border-border px-6 py-4", children: footer }))] }) }));
+    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 }))] }) }));
 }
 
 /**
@@ -67169,59 +68263,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';
@@ -67460,37 +68501,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) => {
@@ -75302,7 +76312,7 @@ function ImageCropModal({ open, imageUrl, fileType, onCancel, onConfirm, }) {
         const blob = await getCroppedBlob(imgRef.current, completedCrop, fileType);
         onConfirm(blob);
     };
-    return (jsxs(Modal, { open: open, onClose: onCancel, size: "lg", icon: jsx(Scissors, { className: "h-5 w-5 text-foreground", strokeWidth: 1.5 }), title: "Crop Image", footer: jsxs(Fragment$2, { children: [jsx(Button$1, { type: "button", variant: "outline", onClick: onCancel, className: "border-border bg-muted text-foreground hover:bg-muted/80", children: "Cancel" }), jsx(Button$1, { type: "button", onClick: handleConfirm, className: "bg-primary text-primary-foreground hover:bg-hover", children: "Crop & Add" })] }), children: [jsxs("div", { className: "space-y-3 px-6 py-4", children: [jsx("p", { className: "text-[13px] text-label", children: "Aspect ratio" }), jsx("div", { className: "grid grid-cols-5 gap-3", children: ASPECTS.map((a) => {
+    return (jsxs(Modal, { open: open, onClose: onCancel, size: "wide", icon: jsx(Scissors, { className: "h-5 w-5 text-foreground", strokeWidth: 1.5 }), title: "Crop Image", footer: jsxs(Fragment$2, { children: [jsx(Button$1, { type: "button", variant: "outline", onClick: onCancel, children: "Cancel" }), jsx(Button$1, { type: "button", onClick: handleConfirm, className: "bg-primary text-primary-foreground hover:bg-hover", children: "Crop & Add" })] }), children: [jsxs("div", { className: "space-y-3 px-6 pb-4", children: [jsx("p", { className: "text-[13px] text-label", children: "Aspect ratio" }), jsx("div", { className: "grid grid-cols-5 gap-3", children: ASPECTS.map((a) => {
                             const selected = aspectKey === a.key;
                             return (jsxs("button", { type: "button", onClick: () => setAspectKey(a.key), className: cn('flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border px-3 py-3 text-xs transition-colors', selected
                                     ? 'border-primary bg-primary/10 text-primary'
@@ -75438,6 +76448,219 @@ 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`, `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);
+    if (value.type === 'ids')
+        return `${value.ids.length} IDs`;
+    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');
+}
+/** Popover variant: tile and option grids drop to two columns; chip lists become the checkbox list. */
+function toPopoverField(field) {
+    if (field.type === 'scale' ||
+        (field.type === 'list' && resolveListLayout(field) === 'tiles')) {
+        return { ...field, columns: POPOVER_TILE_COLUMNS };
+    }
+    // Chip filters read better as the checkbox list in a narrow popover.
+    return field.type === 'list' ? { ...field, layout: 'list' } : 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`). */
+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);
+    }
+    return describeFilterValue(field, value) || 'Any';
+}
+/** The empty single-select trigger: `inputPlaceholder`, else `Any <label>` (lowercased — set `inputPlaceholder` for acronyms). */
+const getSingleSelectPlaceholder = (field) => field.inputPlaceholder ?? `Any ${field.label.toLowerCase()}`;
+
+/** Single-choice list as a searchable dropdown, e.g. "Any vendor". */
+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 }));
+        }
+        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", 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, 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';
+
+function useCloseOnEscape(onClose) {
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Escape' || event.defaultPrevented)
+                return;
+            // Escape inside an open popover only closes that popover (Radix doesn't mark the event handled).
+            if (event.target instanceof Element &&
+                event.target.closest('[data-slot="popover-content"]'))
+                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, children, }) {
+    useCloseOnEscape(onClose);
+    return (jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pt-2 pb-3", children: [jsxs("header", { className: "mb-3 flex flex-wrap items-end justify-between gap-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: "flex flex-col gap-4", children: children })] }), (footerChips || footerActions) && (jsxs("footer", { className: "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-4 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-6", 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')
@@ -78011,5 +79234,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, Field, FieldSkeleton, FileUploader, 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, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, 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, buildWhatsappUrl, buttonVariants, cn, countries, countryByCode, createVideoMediaItem, describeFilterValue, dropdownMenuItemDestructiveClass, expandScaleRange, fieldTypeIcon, findRegion, flagEmoji, formatAddressLocation, formatDateRange, formatFileSize, formatNumberRange, formatScaleRange, formatSelectedCount, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getCountryName, getInitials, getStatesOfCountry, iconButtonVariants, inAppNotificationCardA11y, inAppNotificationsPanelA11y, isBlank, isFilterValueActive, isIndiaCountry, isKnownRegion, isPathActive, isValidAlpha2CountryCode, 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