@caratlogic/design-system 0.1.30 → 0.1.32

package/dist/index.cjs.js

@@ -2698,12 +2698,12 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$1s = [
+const __iconNode$1t = [
   ["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$1t);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2713,12 +2713,12 @@ const AlignLeft = createLucideIcon("align-left", __iconNode$1s);
  */
 
 
-const __iconNode$1r = [
+const __iconNode$1s = [
   ["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$1s);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2728,11 +2728,11 @@ const Archive = createLucideIcon("archive", __iconNode$1r);
  */
 
 
-const __iconNode$1q = [
+const __iconNode$1r = [
   ["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$1r);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2742,11 +2742,11 @@ const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1q);
  */
 
 
-const __iconNode$1p = [
+const __iconNode$1q = [
   ["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$1q);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2756,11 +2756,11 @@ const ArrowRight = createLucideIcon("arrow-right", __iconNode$1p);
  */
 
 
-const __iconNode$1o = [
+const __iconNode$1p = [
   ["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$1p);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2770,7 +2770,7 @@ const Ban = createLucideIcon("ban", __iconNode$1o);
  */
 
 
-const __iconNode$1n = [
+const __iconNode$1o = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -2781,7 +2781,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$1o);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2791,7 +2791,7 @@ const BellDot = createLucideIcon("bell-dot", __iconNode$1n);
  */
 
 
-const __iconNode$1m = [
+const __iconNode$1n = [
   ["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" }],
   [
@@ -2803,7 +2803,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$1n);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2813,7 +2813,7 @@ const BellRing = createLucideIcon("bell-ring", __iconNode$1m);
  */
 
 
-const __iconNode$1l = [
+const __iconNode$1m = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -2823,7 +2823,7 @@ const __iconNode$1l = [
     }
   ]
 ];
-const Bell = createLucideIcon("bell", __iconNode$1l);
+const Bell = createLucideIcon("bell", __iconNode$1m);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2833,13 +2833,13 @@ const Bell = createLucideIcon("bell", __iconNode$1l);
  */
 
 
-const __iconNode$1k = [
+const __iconNode$1l = [
   [
     "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$1l);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2849,7 +2849,7 @@ const Bold$1 = createLucideIcon("bold", __iconNode$1k);
  */
 
 
-const __iconNode$1j = [
+const __iconNode$1k = [
   [
     "path",
     {
@@ -2860,7 +2860,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$1k);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2870,7 +2870,7 @@ const Box = createLucideIcon("box", __iconNode$1j);
  */
 
 
-const __iconNode$1i = [
+const __iconNode$1j = [
   ["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" }],
@@ -2879,7 +2879,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$1j);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2889,7 +2889,7 @@ const Building2 = createLucideIcon("building-2", __iconNode$1i);
  */
 
 
-const __iconNode$1h = [
+const __iconNode$1i = [
   ["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" }],
@@ -2901,7 +2901,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$1i);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2911,13 +2911,13 @@ const CalendarDays = createLucideIcon("calendar-days", __iconNode$1h);
  */
 
 
-const __iconNode$1g = [
+const __iconNode$1h = [
   ["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$1h);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2927,11 +2927,11 @@ const Calendar$1 = createLucideIcon("calendar", __iconNode$1g);
  */
 
 
-const __iconNode$1f = [
+const __iconNode$1g = [
   ["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$1g);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2941,8 +2941,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$1f = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$1f);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2952,8 +2952,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$1e = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$1e);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2963,8 +2963,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$1d = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1d);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2974,8 +2974,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$1c = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$1c);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2985,8 +2985,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$1b = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$1b);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2996,11 +2996,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$1a);
  */
 
 
-const __iconNode$19 = [
+const __iconNode$1a = [
   ["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$1a);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3010,11 +3010,11 @@ const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$19);
  */
 
 
-const __iconNode$18 = [
+const __iconNode$19 = [
   ["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$19);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3024,12 +3024,12 @@ const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$18);
  */
 
 
-const __iconNode$17 = [
+const __iconNode$18 = [
   ["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$18);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3039,11 +3039,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$17);
  */
 
 
-const __iconNode$16 = [
+const __iconNode$17 = [
   ["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$17);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3053,11 +3053,11 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$16);
  */
 
 
-const __iconNode$15 = [
+const __iconNode$16 = [
   ["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$16);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3067,11 +3067,11 @@ const CircleCheck = createLucideIcon("circle-check", __iconNode$15);
  */
 
 
-const __iconNode$14 = [
+const __iconNode$15 = [
   ["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$15);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3081,11 +3081,11 @@ const CircleChevronDown = createLucideIcon("circle-chevron-down", __iconNode$14)
  */
 
 
-const __iconNode$13 = [
+const __iconNode$14 = [
   ["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$14);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3095,12 +3095,12 @@ const CircleDot = createLucideIcon("circle-dot", __iconNode$13);
  */
 
 
-const __iconNode$12 = [
+const __iconNode$13 = [
   ["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$13);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3110,8 +3110,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$12 = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("circle", __iconNode$12);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3121,11 +3121,11 @@ const Circle = createLucideIcon("circle", __iconNode$11);
  */
 
 
-const __iconNode$10 = [
+const __iconNode$11 = [
   ["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$11);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3135,11 +3135,11 @@ const Clock = createLucideIcon("clock", __iconNode$10);
  */
 
 
-const __iconNode$$ = [
+const __iconNode$10 = [
   ["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$10);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3149,11 +3149,11 @@ const Copy = createLucideIcon("copy", __iconNode$$);
  */
 
 
-const __iconNode$_ = [
+const __iconNode$$ = [
   ["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$$);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3163,12 +3163,12 @@ const Crop = createLucideIcon("crop", __iconNode$_);
  */
 
 
-const __iconNode$Z = [
+const __iconNode$_ = [
   ["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$_);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3178,12 +3178,12 @@ const Download = createLucideIcon("download", __iconNode$Z);
  */
 
 
-const __iconNode$Y = [
+const __iconNode$Z = [
   ["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$Z);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3193,12 +3193,12 @@ const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$Y);
  */
 
 
-const __iconNode$X = [
+const __iconNode$Y = [
   ["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$Y);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3208,12 +3208,12 @@ const Ellipsis = createLucideIcon("ellipsis", __iconNode$X);
  */
 
 
-const __iconNode$W = [
+const __iconNode$X = [
   ["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$X);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3223,7 +3223,7 @@ const ExternalLink = createLucideIcon("external-link", __iconNode$W);
  */
 
 
-const __iconNode$V = [
+const __iconNode$W = [
   [
     "path",
     {
@@ -3233,7 +3233,7 @@ const __iconNode$V = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$V);
+const Eye = createLucideIcon("eye", __iconNode$W);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3243,13 +3243,13 @@ const Eye = createLucideIcon("eye", __iconNode$V);
  */
 
 
-const __iconNode$U = [
+const __iconNode$V = [
   [
     "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$V);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3259,7 +3259,7 @@ const Facebook = createLucideIcon("facebook", __iconNode$U);
  */
 
 
-const __iconNode$T = [
+const __iconNode$U = [
   ["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" }],
   [
@@ -3271,7 +3271,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$U);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3281,12 +3281,12 @@ const FileBadge = createLucideIcon("file-badge", __iconNode$T);
  */
 
 
-const __iconNode$S = [
+const __iconNode$T = [
   ["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$T);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3296,14 +3296,14 @@ const FileCheck2 = createLucideIcon("file-check-2", __iconNode$S);
  */
 
 
-const __iconNode$R = [
+const __iconNode$S = [
   ["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$S);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3313,7 +3313,7 @@ const FileText = createLucideIcon("file-text", __iconNode$R);
  */
 
 
-const __iconNode$Q = [
+const __iconNode$R = [
   [
     "path",
     {
@@ -3322,7 +3322,7 @@ const __iconNode$Q = [
     }
   ]
 ];
-const Funnel = createLucideIcon("funnel", __iconNode$Q);
+const Funnel = createLucideIcon("funnel", __iconNode$R);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3332,7 +3332,7 @@ const Funnel = createLucideIcon("funnel", __iconNode$Q);
  */
 
 
-const __iconNode$P = [
+const __iconNode$Q = [
   ["path", { d: "M10.5 3 8 9l4 13 4-13-2.5-6", key: "b3dvk1" }],
   [
     "path",
@@ -3343,7 +3343,7 @@ const __iconNode$P = [
   ],
   ["path", { d: "M2 9h20", key: "16fsjt" }]
 ];
-const Gem = createLucideIcon("gem", __iconNode$P);
+const Gem = createLucideIcon("gem", __iconNode$Q);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3353,7 +3353,7 @@ const Gem = createLucideIcon("gem", __iconNode$P);
  */
 
 
-const __iconNode$O = [
+const __iconNode$P = [
   ["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" }],
@@ -3361,7 +3361,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$P);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3371,7 +3371,7 @@ const GripHorizontal = createLucideIcon("grip-horizontal", __iconNode$O);
  */
 
 
-const __iconNode$N = [
+const __iconNode$O = [
   ["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" }],
@@ -3379,7 +3379,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$O);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3389,13 +3389,13 @@ const GripVertical = createLucideIcon("grip-vertical", __iconNode$N);
  */
 
 
-const __iconNode$M = [
+const __iconNode$N = [
   ["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$N);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3405,13 +3405,13 @@ const Hash = createLucideIcon("hash", __iconNode$M);
  */
 
 
-const __iconNode$L = [
+const __iconNode$M = [
   ["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$M);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3421,13 +3421,13 @@ const Heading1 = createLucideIcon("heading-1", __iconNode$L);
  */
 
 
-const __iconNode$K = [
+const __iconNode$L = [
   ["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$L);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3437,14 +3437,14 @@ const Heading2 = createLucideIcon("heading-2", __iconNode$K);
  */
 
 
-const __iconNode$J = [
+const __iconNode$K = [
   ["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$K);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3454,12 +3454,12 @@ const Heading3 = createLucideIcon("heading-3", __iconNode$J);
  */
 
 
-const __iconNode$I = [
+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" }],
   ["path", { d: "M12 7v5l4 2", key: "1fdv2h" }]
 ];
-const History = createLucideIcon("history", __iconNode$I);
+const History = createLucideIcon("history", __iconNode$J);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3469,12 +3469,12 @@ const History = createLucideIcon("history", __iconNode$I);
  */
 
 
-const __iconNode$H = [
+const __iconNode$I = [
   ["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$I);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3484,12 +3484,12 @@ const Image$1 = createLucideIcon("image", __iconNode$H);
  */
 
 
-const __iconNode$G = [
+const __iconNode$H = [
   ["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$H);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3499,12 +3499,12 @@ const Info = createLucideIcon("info", __iconNode$G);
  */
 
 
-const __iconNode$F = [
+const __iconNode$G = [
   ["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$G);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3514,7 +3514,7 @@ const Italic$1 = createLucideIcon("italic", __iconNode$F);
  */
 
 
-const __iconNode$E = [
+const __iconNode$F = [
   [
     "path",
     {
@@ -3524,7 +3524,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$F);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3534,12 +3534,12 @@ const KeyRound = createLucideIcon("key-round", __iconNode$E);
  */
 
 
-const __iconNode$D = [
+const __iconNode$E = [
   ["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$E);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3549,14 +3549,14 @@ const Link2 = createLucideIcon("link-2", __iconNode$D);
  */
 
 
-const __iconNode$C = [
+const __iconNode$D = [
   ["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$D);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3566,7 +3566,7 @@ const ListChecks = createLucideIcon("list-checks", __iconNode$C);
  */
 
 
-const __iconNode$B = [
+const __iconNode$C = [
   ["path", { d: "M10 12h11", key: "6m4ad9" }],
   ["path", { d: "M10 18h11", key: "11hvi2" }],
   ["path", { d: "M10 6h11", key: "c7qv1k" }],
@@ -3574,7 +3574,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$C);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3584,7 +3584,7 @@ const ListOrdered = createLucideIcon("list-ordered", __iconNode$B);
  */
 
 
-const __iconNode$A = [
+const __iconNode$B = [
   ["path", { d: "M3 12h.01", key: "nlz23k" }],
   ["path", { d: "M3 18h.01", key: "1tta3j" }],
   ["path", { d: "M3 6h.01", key: "1rqtza" }],
@@ -3592,7 +3592,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$B);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3602,8 +3602,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$A = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$A);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3613,7 +3613,7 @@ const LoaderCircle = createLucideIcon("loader-circle", __iconNode$z);
  */
 
 
-const __iconNode$y = [
+const __iconNode$z = [
   ["path", { d: "M12 2v4", key: "3427ic" }],
   ["path", { d: "m16.2 7.8 2.9-2.9", key: "r700ao" }],
   ["path", { d: "M18 12h4", key: "wj9ykh" }],
@@ -3623,7 +3623,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$z);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3633,12 +3633,12 @@ const Loader = createLucideIcon("loader", __iconNode$y);
  */
 
 
-const __iconNode$x = [
+const __iconNode$y = [
   ["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$y);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3648,11 +3648,11 @@ const LogOut = createLucideIcon("log-out", __iconNode$x);
  */
 
 
-const __iconNode$w = [
+const __iconNode$x = [
   ["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$x);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -3662,12 +3662,23 @@ const Mail = createLucideIcon("mail", __iconNode$w);
  */
 
 
-const __iconNode$v = [
+const __iconNode$w = [
   ["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$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", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$v);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -4684,7 +4695,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 ? reactSlot.Slot : 'button';
-    return (jsxRuntime.jsx(Comp, { "data-slot": "button", className: cn(buttonVariants$1({ variant, size, className })), ...props }));
+    return (jsxRuntime.jsx(Comp, { "data-slot": "button", "data-variant": variant ?? 'default', className: cn(buttonVariants$1({ variant, size, className })), ...props }));
 }
 
 const VARIANT_BY_KIND = {
@@ -14342,7 +14353,7 @@ function useNumberInput({ value, onChange, precision, min, max, emptyFallback, e
     return { raw, handleChange, handleFocus, handleBlur };
 }
 
-const NumberInput = React__namespace.forwardRef(({ value, onChange, precision, min, max, step, className, emptyFallback = 0, emitUndefinedOnEmpty = false, trimTrailingZeros = false, ...rest }, ref) => {
+const NumberInput = React__namespace.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,
@@ -14356,7 +14367,22 @@ const NumberInput = React__namespace.forwardRef(({ value, onChange, precision, m
         onFocusProp,
         onBlurProp,
     });
-    return (jsxRuntime.jsx(Input, { ref: ref, type: "text", inputMode: "decimal", className: className, value: raw, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, step: step, ...inputRest }));
+    const input = (jsxRuntime.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 (jsxRuntime.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: [jsxRuntime.jsx("button", { type: "button", "aria-label": "Decrease", className: stepButton, disabled: inputRest.disabled || (min !== undefined && at <= min), onClick: () => nudge(-1), children: jsxRuntime.jsx(Minus, { className: "size-3.5" }) }), input, jsxRuntime.jsx("button", { type: "button", "aria-label": "Increase", className: stepButton, disabled: inputRest.disabled || (max !== undefined && at >= max), onClick: () => nudge(1), children: jsxRuntime.jsx(Plus, { className: "size-3.5" }) })] }));
+    }
+    if (suffix != null) {
+        return (jsxRuntime.jsxs("div", { className: "relative w-full", children: [input, jsxRuntime.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';
 
@@ -14898,30 +14924,74 @@ const DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref)
         '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__namespace.Overlay.displayName;
-const DialogContent = React__namespace.forwardRef(({ className, children, hideCloseButton, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [jsxRuntime.jsx(DialogOverlay, {}), jsxRuntime.jsxs(DialogPrimitive__namespace.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__namespace.forwardRef(({ className, children, hideCloseButton, size = 'default', style, ...props }, ref) => (jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [jsxRuntime.jsx(DialogOverlay, {}), jsxRuntime.jsxs(DialogPrimitive__namespace.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 && (jsxRuntime.jsxs(DialogPrimitive__namespace.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 && (jsxRuntime.jsxs(DialogPrimitive__namespace.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: [jsxRuntime.jsx(X$2, {}), jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })] }))] })] })));
 DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
-// Header
-function DialogHeader({ className, ...props }) {
-    return (jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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: [jsxRuntime.jsx(DialogIcon, { tone: iconTone, children: icon }), jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: children })] }));
+    }
+    return (jsxRuntime.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 (jsxRuntime.jsx("div", { "data-slot": "dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+    return (jsxRuntime.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__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(DialogPrimitive__namespace.Title, { ref: ref, "data-slot": "dialog-title", className: cn('text-lg font-semibold leading-none', className), ...props })));
+const DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(DialogPrimitive__namespace.Title, { ref: ref, "data-slot": "dialog-title", className: cn('text-lg font-semibold leading-6 text-foreground', className), ...props })));
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
 // Description
-const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref: ref, "data-slot": "dialog-description", className: cn('text-sm text-muted-foreground', className), ...props })));
+const DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref: ref, "data-slot": "dialog-description", className: cn('text-sm leading-5 text-muted-foreground', className), ...props })));
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 
 // ---------- Command Wrapper ----------
@@ -15473,7 +15543,7 @@ const CollapsibleCard = ({ title, subtitle, icon, headerActions, defaultOpen = t
 
 /** A titled card on a document detail page: payments, customer, items, notes… */
 function DetailSection({ icon, title, count, actions, children, className, bodyClassName, }) {
-    return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxRuntime.jsxs("header", { className: "flex flex-wrap items-center gap-2.5 border-b border-border px-4 py-3", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: "flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary dark:bg-primary/20 [&_svg]:size-4", children: icon }), jsxRuntime.jsx("h3", { className: "m-0 text-base font-semibold text-foreground", children: title }), typeof count === 'string' || typeof count === 'number' ? (jsxRuntime.jsx(Badge, { appearance: "soft", color: "secondary", shape: "pill", size: "sm", children: count })) : (count), actions ? jsxRuntime.jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2.5", children: actions }) : null] }), children != null ? jsxRuntime.jsx("div", { className: bodyClassName, children: children }) : null] }));
+    return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxRuntime.jsxs("header", { className: "flex flex-wrap items-center gap-2.5 border-b border-border bg-section-header px-4 py-3", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: "flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary dark:bg-primary/20 [&_svg]:size-4", children: icon }), jsxRuntime.jsx("h3", { className: "m-0 text-base font-semibold text-foreground", children: title }), typeof count === 'string' || typeof count === 'number' ? (jsxRuntime.jsx(Badge, { appearance: "soft", color: "secondary", shape: "pill", size: "sm", children: count })) : (count), actions ? jsxRuntime.jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2.5", children: actions }) : null] }), children != null ? jsxRuntime.jsx("div", { className: bodyClassName, children: children }) : null] }));
 }
 
 const HEADER_TONE_CLASSES = {
@@ -21241,37 +21311,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.isValidElement(info))
-        return jsxRuntime.jsx("div", { className: "mt-3", children: info });
+        return jsxRuntime.jsx("div", { children: info });
     const i = info;
-    return (jsxRuntime.jsx("div", { className: "mt-1 rounded-lg border bg-muted p-3 shadow-sm", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Date" }), jsxRuntime.jsx("div", { children: formatDate$3(i.invoiceDate) })] }), jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Total" }), jsxRuntime.jsx("div", { className: "font-medium text-foreground", children: formatCurrencyWithTenantSymbol(i.totalAmount) })] }), i.paidAmount !== undefined && (jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Paid" }), jsxRuntime.jsx("div", { className: "font-medium text-primary", children: formatCurrencyWithTenantSymbol(i.paidAmount) })] })), i.outstandingAmount !== undefined && (jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 text-sm text-muted-foreground", children: "Outstanding" }), jsxRuntime.jsx("div", { className: "font-medium text-muted-foreground", children: formatCurrencyWithTenantSymbol(i.outstandingAmount) })] })), title === 'Cancel Invoice' &&
-                    !React.isValidElement(info) &&
-                    (i?.paidAmount ?? 0) > 0 && (jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [jsxRuntime.jsx("div", { className: "w-36 whitespace-nowrap text-sm text-muted-foreground", children: "Refund to Wallet" }), jsxRuntime.jsx(Checkbox, { checked: !!refundToWallet, onCheckedChange: (v) => onRefundChange?.(Boolean(v)), className: "bg-card" })] })), (i.customerName || i.email) && (jsxRuntime.jsxs("div", { className: "mt-1 rounded bg-card p-2", children: [i.customerName && (jsxRuntime.jsx("div", { className: "text-sm font-medium", children: i.customerName })), i.email && (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "rounded-xl border border-border bg-muted/30 p-3.5", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: jsxRuntime.jsx(FileText, { className: "size-4" }) }), jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [i.invoiceNumber && (jsxRuntime.jsx("p", { className: "m-0 truncate text-sm font-semibold text-foreground", children: i.invoiceNumber })), party && jsxRuntime.jsx("p", { className: "m-0 truncate text-xs text-muted-foreground", children: party })] }), jsxRuntime.jsxs("div", { className: "shrink-0 text-right", children: [i.totalAmount !== undefined && (jsxRuntime.jsx("p", { className: "m-0 text-sm font-semibold tabular-nums text-foreground", children: formatCurrencyWithTenantSymbol(i.totalAmount) })), i.invoiceDate && jsxRuntime.jsx("p", { className: "m-0 text-xs text-muted-foreground", children: formatDate$3(i.invoiceDate) })] })] }), hasBalance && (jsxRuntime.jsxs("dl", { className: "m-0 mt-3 grid gap-1.5 border-t border-border pt-3 text-sm", children: [i.paidAmount !== undefined && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: "Paid" }), jsxRuntime.jsx("dd", { className: "m-0 font-medium tabular-nums text-amount-paid", children: formatCurrencyWithTenantSymbol(i.paidAmount) })] })), i.outstandingAmount !== undefined && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground", children: "Outstanding" }), jsxRuntime.jsx("dd", { className: "m-0 font-medium tabular-nums text-foreground", children: formatCurrencyWithTenantSymbol(i.outstandingAmount) })] }))] }))] }));
 };
 
-function useRefundToWallet(open) {
-    const [refundToWallet, setRefundToWallet] = React.useState(true);
-    React.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 (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(DialogContent, { className: "gap-3 p-5", children: [jsxRuntime.jsxs(DialogHeader, { className: "gap-1.5", children: [jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [confirmVariant === 'destructive' && (jsxRuntime.jsx("span", { className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-destructive/10", children: jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5 text-destructive" }) })), jsxRuntime.jsx("span", { children: title })] }), description && jsxRuntime.jsx(DialogDescription, { children: description }), info && (jsxRuntime.jsx(InfoCard, { info: info, title: title, refundToWallet: refundToWallet, onRefundChange: setRefundToWallet }))] }), jsxRuntime.jsxs(DialogFooter, { className: "mt-1", children: [jsxRuntime.jsx(Button$1, { variant: "outline", onClick: () => {
+    const destructive = confirmVariant === 'destructive';
+    const Icon = icon ?? (destructive ? Trash2 : undefined);
+    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsxs(DialogHeader, { icon: Icon ? jsxRuntime.jsx(Icon, {}) : undefined, iconTone: destructive ? 'destructive' : 'primary', children: [jsxRuntime.jsx(DialogTitle, { children: title }), description && jsxRuntime.jsx(DialogDescription, { children: description })] }), info && jsxRuntime.jsx(InfoCard, { info: info }), children, jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(Button$1, { variant: "outline", onClick: () => {
                                 onCancel?.();
                                 onOpenChange(false);
-                            }, disabled: disabled, children: cancelLabel }), jsxRuntime.jsxs(Button$1, { variant: confirmVariant, onClick: async () => {
-                                await onConfirm(title === 'Cancel Invoice' ? refundToWallet : undefined);
-                            }, disabled: disabled, children: [confirmVariant === 'destructive' && (jsxRuntime.jsx(Icon, { className: "h-4 w-4", "aria-hidden": true })), disabled ? 'Please wait...' : confirmLabel] })] })] }) }));
+                            }, disabled: disabled, children: cancelLabel }), jsxRuntime.jsx(Button$1, { variant: confirmVariant, onClick: async () => {
+                                await onConfirm();
+                            }, disabled: disabled, children: disabled ? 'Please wait...' : confirmLabel })] })] }) }));
 };
 
 function matchesSearch(haystack, search) {
@@ -37234,7 +37297,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 (jsxRuntime.jsx(ConfirmDialog, { open: open, onOpenChange: onOpenChange, title: `Delete ${documentLabel}`, description: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { children: ["Are you sure you want to permanently delete ", documentLabel, documentNumber ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [' ', jsxRuntime.jsx("span", { className: "font-semibold", children: documentNumber })] })) : null, "?"] }), jsxRuntime.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' && !React.isValidElement(info))
+        ? { invoiceNumber: documentNumber, ...(info ?? {}) }
+        : info;
+    return (jsxRuntime.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) {
@@ -37242,26 +37309,63 @@ function clampPercent$1(value) {
         return 0;
     return Math.min(100, Math.max(0, value));
 }
-const CAPTION_TONE = {
-    default: 'text-muted-foreground',
+const LABEL_TONE = {
+    default: 'text-secondary-foreground',
     success: 'text-amount-paid',
+    info: 'text-info',
+    warning: 'text-badge-amber-text',
     destructive: 'text-amount-outstanding',
+    muted: 'text-secondary-foreground',
 };
-function getCaptionClassName(tone) {
-    return CAPTION_TONE[tone];
+function getLabelClassName(tone) {
+    return LABEL_TONE[tone];
 }
-const BAR_TONE = {
-    primary: 'bg-primary',
-    success: 'bg-success',
-    info: 'bg-info',
+/** The lightest wash of the status colour, matching the document's status pill. */
+const PANEL_TONE = {
+    default: 'bg-muted/40',
+    success: 'bg-primary/5 dark:bg-primary/10',
+    info: 'bg-info/5 dark:bg-info/10',
+    warning: 'bg-warning/5 dark:bg-warning/10',
+    destructive: 'bg-destructive/5 dark:bg-destructive/10',
+    muted: 'bg-muted/40',
+};
+function getFactsPanelClassName(tone) {
+    return PANEL_TONE[tone];
+}
+const TRACK_TONE = {
+    default: 'bg-progress-track',
+    success: 'bg-progress-track',
+    info: 'bg-info/15',
+    warning: 'bg-warning/15',
+    destructive: 'bg-destructive/15',
+    muted: 'bg-progress-track',
+};
+function getProgressTrackClassName(tone) {
+    return TRACK_TONE[tone];
+}
+const FACT_ICON_TONE = {
+    default: 'bg-muted text-muted-foreground',
+    success: 'bg-badge-green-bg text-amount-paid',
+    warning: 'bg-badge-amber-bg text-badge-amber-text',
+    destructive: 'bg-badge-destructive-bg text-amount-outstanding',
+};
+function getFactIconClassName(tone) {
+    return FACT_ICON_TONE[tone];
+}
+const FACT_NOTE_TONE = {
+    default: 'text-muted-foreground',
+    success: 'text-amount-paid',
+    warning: 'text-badge-amber-text',
+    destructive: 'text-amount-outstanding',
 };
-function getBarClassName(tone) {
-    return BAR_TONE[tone];
+function getFactNoteClassName(tone) {
+    return FACT_NOTE_TONE[tone];
 }
 const SEGMENT_TONE = {
     success: 'bg-success',
     info: 'bg-info',
     primary: 'bg-primary',
+    'primary-soft': 'bg-primary/40',
     warning: 'bg-warning',
     remaining: 'bg-progress-track',
 };
@@ -37270,82 +37374,47 @@ function getSegmentClassName$1(tone) {
 }
 /** Each segment's width in percent of the segments' sum; all 0 when there's nothing to split. */
 function getSegmentPercents(segments) {
-    const amounts = segments.map((segment) => (Number.isFinite(segment.amount) ? Math.max(0, segment.amount) : 0));
+    const amounts = segments.map((segment) => Number.isFinite(segment.amount) ? Math.max(0, segment.amount) : 0);
     const whole = amounts.reduce((sum, amount) => sum + amount, 0);
     return amounts.map((amount) => (whole > 0 ? (amount / whole) * 100 : 0));
 }
-/** A complete payment uses the brand green; a partial one the "paid" green. */
-function getProgressFillClassName(percent) {
-    return percent >= 100 ? 'bg-primary' : 'bg-amount-paid';
-}
-/** The lightest wash of the status colour, so the panel reads like the header pill without shouting. */
-const STATUS_TINT = {
-    neutral: '',
-    success: 'bg-success/5 dark:bg-success/10',
-    info: 'bg-info/5 dark:bg-info/10',
-    warning: 'bg-warning/5 dark:bg-warning/10',
-    destructive: 'bg-destructive/5 dark:bg-destructive/10',
-    muted: 'bg-muted/40',
-};
-/** Background tint for the status area (the side panel, or the whole card without one). */
-function getStatusTintClassName(tone) {
-    return STATUS_TINT[tone];
-}
-/** The panel beside the total only takes a colour when the status has one. */
-function getAsidePanelClassName(tone) {
-    return STATUS_TINT[tone];
-}
 /** No value to show: blank, or the "—" placeholder apps pass. */
-function isEmptyMetaValue(value) {
-    return value == null || (typeof value === 'string' && (value.trim() === '' || value.trim() === '—'));
-}
-function getProgressTrackClassName(tone) {
-    return tone === 'destructive' ? 'bg-destructive/15' : 'bg-progress-track';
-}
-/** Up to four meta cells per row from `md`, two on phones. */
-function getMetaColumns(count) {
-    return Math.min(4, Math.max(1, count));
-}
-const MD_COLS = {
-    1: 'md:grid-cols-1',
-    2: 'md:grid-cols-2',
-    3: 'md:grid-cols-3',
-    4: 'md:grid-cols-4',
-};
-function getMetaGridClassName(count) {
-    return `grid grid-cols-2 ${MD_COLS[getMetaColumns(count)]}`;
-}
-/** Hairlines by position, so they're right whether two or `cols` cells share a row. */
-function getMetaCellClassName(index, count) {
-    const cols = getMetaColumns(count);
-    return [
-        'min-w-0 border-border px-5 py-3',
-        index % 2 === 1 ? 'border-l' : '',
-        index >= 2 ? 'border-t' : '',
-        index % cols === 0 ? 'md:border-l-0' : 'md:border-l',
-        index >= cols ? 'md:border-t' : 'md:border-t-0',
-    ]
-        .filter(Boolean)
-        .join(' ');
+function isEmptyFactValue(value) {
+    return (value == null ||
+        (typeof value === 'string' && (value.trim() === '' || value.trim() === '—')));
 }
 
-function BreakdownPanel({ breakdown }) {
+function ProgressBar({ progress, tone, name, }) {
+    const percent = clampPercent$1(progress.percent);
+    return (jsxRuntime.jsxs("div", { className: "mt-4 w-full max-w-xl", children: [jsxRuntime.jsx("div", { role: "progressbar", "aria-label": name, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, className: cn('h-2 overflow-hidden rounded-full', getProgressTrackClassName(tone)), children: jsxRuntime.jsx("div", { className: "h-full rounded-full bg-primary", style: { width: `${percent}%` } }) }), progress.value != null ||
+                progress.label != null ||
+                progress.trailing != null ? (jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between gap-3 text-xs", children: [jsxRuntime.jsxs("span", { className: "text-secondary-foreground", children: [progress.value != null ? (jsxRuntime.jsx("span", { className: "font-semibold tabular-nums text-amount-paid", children: progress.value })) : null, progress.value != null && progress.label != null ? ' ' : null, progress.label] }), progress.trailing != null ? (jsxRuntime.jsx("span", { className: "text-right tabular-nums text-secondary-foreground", children: progress.trailing })) : null] })) : null] }));
+}
+function BreakdownBar({ breakdown, }) {
     const percents = getSegmentPercents(breakdown.segments);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("dl", { className: "m-0 grid grid-flow-col auto-cols-fr gap-4", children: breakdown.segments.map((segment) => (jsxRuntime.jsxs("div", { className: "min-w-0", children: [jsxRuntime.jsxs("dt", { className: "flex items-center gap-1.5 text-xs text-label-subtle", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', getSegmentClassName$1(segment.tone)) }), segment.label] }), jsxRuntime.jsx("dd", { className: "m-0 text-lg font-semibold tabular-nums text-foreground", children: segment.value })] }, segment.label))) }), jsxRuntime.jsx("div", { role: "img", "aria-label": `${breakdown.label}: ${breakdown.segments
+    return (jsxRuntime.jsxs("div", { className: "mt-4 w-full max-w-xl", children: [jsxRuntime.jsx("dl", { className: "m-0 grid grid-flow-col auto-cols-fr gap-4", children: breakdown.segments.map((segment) => (jsxRuntime.jsxs("div", { className: "min-w-0", children: [jsxRuntime.jsxs("dt", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: cn('h-1.5 w-3 shrink-0 rounded-full', getSegmentClassName$1(segment.tone), segment.tone === 'remaining' &&
+                                        'ring-1 ring-inset ring-border') }), segment.label] }), jsxRuntime.jsx("dd", { className: "m-0 text-base font-semibold tabular-nums text-foreground", children: segment.value })] }, segment.label))) }), jsxRuntime.jsx("div", { role: "img", "aria-label": `${breakdown.label}: ${breakdown.segments
                     .map((segment, index) => `${segment.label} ${Math.round(percents[index])}%`)
-                    .join(', ')}`, className: "mb-2 mt-3 flex h-2 overflow-hidden rounded-full bg-progress-track", children: breakdown.segments.map((segment, index) => segment.tone === 'remaining' || percents[index] === 0 ? null : (jsxRuntime.jsx("div", { className: cn('h-full', getSegmentClassName$1(segment.tone)), style: { width: `${percents[index]}%` } }, segment.label))) }), breakdown.caption ? jsxRuntime.jsx("p", { className: "m-0 text-xs text-muted-foreground", children: breakdown.caption }) : null] }));
+                    .join(', ')}`, className: "mt-3 flex h-2 overflow-hidden rounded-full bg-progress-track", children: breakdown.segments.map((segment, index) => segment.tone === 'remaining' || percents[index] === 0 ? null : (jsxRuntime.jsx("div", { className: cn('h-full', getSegmentClassName$1(segment.tone)), style: { width: `${percents[index]}%` } }, segment.label))) }), breakdown.caption ? (jsxRuntime.jsx("p", { className: "m-0 mt-2 text-xs text-secondary-foreground", children: breakdown.caption })) : null] }));
+}
+function FactRow({ fact }) {
+    const tone = fact.tone ?? 'default';
+    const empty = isEmptyFactValue(fact.value);
+    return (jsxRuntime.jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-border py-1.5 last:border-b-0", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: cn('flex size-6 shrink-0 items-center justify-center rounded-md text-xs font-semibold [&_svg]:size-3.5', getFactIconClassName(tone)), children: fact.icon }), jsxRuntime.jsx("dt", { className: "min-w-0 flex-1 text-sm text-secondary-foreground", children: fact.label }), jsxRuntime.jsxs("dd", { className: "m-0 flex min-w-0 flex-wrap items-baseline justify-end gap-x-2 text-right", children: [empty ? (jsxRuntime.jsx("span", { className: "text-sm font-medium text-muted-foreground", children: fact.emptyLabel ?? 'Not provided' })) : (jsxRuntime.jsx("span", { className: cn('break-words text-sm font-semibold tabular-nums', tone === 'success' ? 'text-amount-paid' : 'text-foreground'), children: fact.value })), fact.note ? (jsxRuntime.jsx("span", { className: cn('text-xs font-medium', getFactNoteClassName(tone)), children: fact.note })) : null, fact.onAction ? (jsxRuntime.jsx("button", { type: "button", onClick: fact.onAction, className: "text-xs font-medium text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: fact.actionLabel ?? 'View' })) : null] })] }));
 }
 /**
- * The top of a document detail page: its total, how much of it is settled
- * (paid, or carats returned/sold) and its key dates. Data-only.
+ * The top of a document detail page: the headline amount (balance, total, value),
+ * how much of it is settled, and the key dates and facts beside it. Data-only.
  */
-function DocumentHero({ label, total, caption, captionTone = 'default', payment, bars, breakdown, meta = [], statusTone = 'neutral', className, }) {
-    const hasAside = !!payment || !!breakdown || (bars?.length ?? 0) > 0;
-    const percent = payment ? clampPercent$1(payment.percent) : 0;
-    return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxRuntime.jsxs("div", { className: cn('grid grid-cols-1', hasAside ? 'md:grid-cols-[1fr_1.25fr]' : getStatusTintClassName(statusTone)), children: [jsxRuntime.jsxs("div", { className: "min-w-0 px-5 py-4", children: [jsxRuntime.jsx("p", { className: "m-0 text-xs text-label-subtle", children: label }), jsxRuntime.jsx("p", { className: "m-0 mt-1 break-words text-4xl font-semibold leading-none tracking-tight tabular-nums text-foreground", children: total }), caption ? jsxRuntime.jsx("p", { className: cn('m-0 mt-2 text-xs', getCaptionClassName(captionTone)), children: caption }) : null] }), payment ? (jsxRuntime.jsxs("div", { className: cn('min-w-0 border-t border-border px-5 py-4 md:border-l md:border-t-0', getAsidePanelClassName(statusTone)), children: [jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [jsxRuntime.jsxs("div", { className: "min-w-0", children: [jsxRuntime.jsx("span", { className: "text-xs text-label-subtle", children: payment.paidLabel ?? 'Amount paid' }), jsxRuntime.jsx("p", { className: "m-0 text-lg font-semibold tabular-nums text-amount-paid", children: payment.paid })] }), jsxRuntime.jsxs("div", { className: "min-w-0 text-right", children: [jsxRuntime.jsx("span", { className: "text-xs text-label-subtle", children: payment.outstandingLabel ?? 'Outstanding' }), jsxRuntime.jsx("p", { className: "m-0 text-lg font-semibold tabular-nums text-amount-outstanding", children: payment.outstanding })] })] }), jsxRuntime.jsx("div", { role: "progressbar", "aria-label": payment.paidLabel ?? 'Amount paid', "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, className: cn('mb-2 mt-3 h-2 overflow-hidden rounded-full', getProgressTrackClassName(statusTone)), children: jsxRuntime.jsx("div", { className: cn('h-full rounded-full', getProgressFillClassName(percent)), style: { width: `${percent}%` } }) }), payment.caption ? jsxRuntime.jsx("p", { className: "m-0 text-xs text-muted-foreground", children: payment.caption }) : null] })) : breakdown ? (jsxRuntime.jsx("div", { className: cn('min-w-0 border-t border-border px-5 py-4 md:border-l md:border-t-0', getAsidePanelClassName(statusTone)), children: jsxRuntime.jsx(BreakdownPanel, { breakdown: breakdown }) })) : bars && bars.length > 0 ? (jsxRuntime.jsx("div", { className: cn('flex min-w-0 flex-col gap-3 border-t border-border px-5 py-4 md:border-l md:border-t-0', getAsidePanelClassName(statusTone)), children: bars.map((bar) => {
-                            const barPercent = clampPercent$1(bar.percent);
-                            return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-1 flex justify-between gap-3 text-xs", children: [jsxRuntime.jsx("span", { className: "text-muted-foreground", children: bar.label }), jsxRuntime.jsx("span", { className: "font-medium tabular-nums text-foreground", children: bar.value })] }), jsxRuntime.jsx("div", { role: "progressbar", "aria-label": bar.label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": barPercent, className: "h-2 overflow-hidden rounded-full bg-muted", children: jsxRuntime.jsx("div", { className: cn('h-full rounded-full', getBarClassName(bar.tone ?? 'primary')), style: { width: `${barPercent}%` } }) })] }, bar.label));
-                        }) })) : null] }), meta.length > 0 ? (jsxRuntime.jsx("dl", { className: cn('m-0 border-t border-border', getMetaGridClassName(meta.length)), children: meta.map((item, index) => (jsxRuntime.jsxs("div", { className: getMetaCellClassName(index, meta.length), children: [jsxRuntime.jsx("dt", { className: cn('text-xs font-semibold uppercase tracking-wider', item.danger ? 'text-amount-outstanding' : 'text-label-subtle'), children: item.label }), isEmptyMetaValue(item.value) ? (jsxRuntime.jsx("dd", { className: "m-0 mt-1 text-sm italic text-muted-foreground", children: item.emptyLabel ?? 'Not provided' })) : (jsxRuntime.jsx("dd", { className: cn('m-0 mt-1 break-words text-sm font-medium', item.danger ? 'text-amount-outstanding' : 'text-foreground'), children: item.value }))] }, item.label))) })) : null] }));
+function DocumentHero({ label, labelIcon, tone = 'default', amount, amountNote, progress, breakdown, facts = [], details = [], detailsLabel, detailsIcon, className, }) {
+    return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-2xl border border-border bg-card', className), children: [jsxRuntime.jsxs("div", { className: cn('grid grid-cols-1', facts.length > 0 && 'md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]'), children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col justify-center px-5 py-4 sm:px-7 sm:py-4", children: [jsxRuntime.jsxs("p", { className: cn('m-0 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider [&_svg]:size-3.5', getLabelClassName(tone)), children: [labelIcon, label] }), jsxRuntime.jsxs("div", { className: "mt-1.5 flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [jsxRuntime.jsx("span", { className: "break-all text-4xl font-semibold leading-none tracking-tight tabular-nums text-foreground sm:text-[2.75rem]", children: amount }), amountNote ? (jsxRuntime.jsx("span", { className: "text-sm text-secondary-foreground", children: amountNote })) : null] }), breakdown ? (jsxRuntime.jsx(BreakdownBar, { breakdown: breakdown })) : progress ? (jsxRuntime.jsx(ProgressBar, { progress: progress, tone: tone, name: label })) : null] }), facts.length > 0 ? (jsxRuntime.jsx("dl", { className: cn('m-0 flex min-w-0 flex-col justify-center border-t border-border px-5 py-2 md:border-l md:border-t-0', getFactsPanelClassName(tone)), children: facts.map((fact) => (jsxRuntime.jsx(FactRow, { fact: fact }, fact.label))) })) : null] }), details.length > 0 ? (jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5 border-t border-border px-5 py-2.5 text-xs sm:px-7", children: [detailsLabel ? (jsxRuntime.jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded bg-muted px-1.5 py-0.5 font-semibold text-secondary-foreground [&_svg]:size-3", children: [detailsIcon, detailsLabel] })) : null, jsxRuntime.jsx("dl", { className: "m-0 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5", children: details.map((detail, index) => {
+                            const empty = isEmptyFactValue(detail.value);
+                            return (jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-x-3", children: [index > 0 ? (jsxRuntime.jsx("span", { "aria-hidden": true, className: "h-3 w-px shrink-0 bg-border" })) : null, jsxRuntime.jsxs("div", { className: "flex min-w-0 items-baseline gap-1.5", children: [jsxRuntime.jsx("dt", { className: "whitespace-nowrap text-muted-foreground", children: detail.label }), jsxRuntime.jsx("dd", { className: cn('m-0 break-words', empty
+                                                    ? 'italic text-label-subtle'
+                                                    : 'font-medium text-foreground'), children: empty
+                                                    ? (detail.emptyLabel ?? 'Not provided')
+                                                    : detail.value })] })] }, detail.label));
+                        }) })] })) : null] }));
 }
 
 const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
@@ -38471,25 +38540,15 @@ const TONE_ICON_BG = {
 };
 const MetricTile = ({ label, value, sub, icon, tone, className, }) => (jsxRuntime.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: [jsxRuntime.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 }), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [jsxRuntime.jsx("span", { className: "truncate text-xs text-muted-foreground", children: label }), jsxRuntime.jsx("span", { className: "truncate text-lg font-semibold text-foreground", children: value }), sub && (jsxRuntime.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 (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (o) => !o && onClose(), children: jsxRuntime.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: [jsxRuntime.jsxs("header", { className: "flex items-center justify-between gap-4 border-b border-border px-6 py-4", children: [jsxRuntime.jsx(DialogPrimitive__namespace.Title, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-base font-medium text-foreground", children: [icon, jsxRuntime.jsx("span", { children: title })] }) }), !hideCloseButton && (jsxRuntime.jsx(DialogPrimitive__namespace.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: jsxRuntime.jsx(X$2, { className: "h-4 w-4" }) }))] }), jsxRuntime.jsx("div", { className: cn('flex-1 overflow-y-auto', bodyClassName), children: children }), footer && (jsxRuntime.jsx("footer", { className: "flex items-center justify-end gap-3 border-t border-border px-6 py-4", children: footer }))] }) }));
+    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (o) => !o && onClose(), children: jsxRuntime.jsxs(DialogContent, { hideCloseButton: true, size: size === 'wide' ? 'wide' : 'default', className: cn('flex flex-col gap-0 overflow-hidden p-0', className), children: [jsxRuntime.jsxs("header", { className: "flex shrink-0 items-start justify-between gap-4 px-6 pt-5 pb-4", children: [jsxRuntime.jsxs("div", { className: cn('flex min-w-0 gap-3.5', description ? 'items-start' : 'items-center'), children: [icon ? jsxRuntime.jsx(DialogIcon, { children: icon }) : null, jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [jsxRuntime.jsx(DialogPrimitive__namespace.Title, { className: "m-0 text-lg font-semibold leading-6 text-foreground", children: title }), description ? (jsxRuntime.jsx(DialogPrimitive__namespace.Description, { className: "m-0 text-sm leading-5 text-muted-foreground", children: description })) : null] })] }), !hideCloseButton && (jsxRuntime.jsx(DialogPrimitive__namespace.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: jsxRuntime.jsx(X$2, { className: "h-4 w-4" }) }))] }), jsxRuntime.jsx("div", { className: cn('flex-1 overflow-y-auto', bodyClassName), children: children }), footer && (jsxRuntime.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 }))] }) }));
 }
 
 /**
@@ -67516,7 +67575,7 @@ function DetailPageSkeleton({ sections = 3, }) {
 }
 /** Document detail page (invoice, memo…): header, `DocumentHero` and `DetailSection` placeholders. */
 function DocumentDetailSkeleton({ aside = 'payment', sections = 3, label = 'Loading document', }) {
-    return (jsxRuntime.jsxs("div", { role: "status", "aria-busy": "true", "aria-label": label, className: "space-y-4", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(SquareSkeleton, { height: 14, width: 80, rounded: "full" }), jsxRuntime.jsx("span", { className: "h-5 w-px bg-border" }), jsxRuntime.jsx(SquareSkeleton, { height: 28, width: 200, rounded: "md" }), jsxRuntime.jsx(SquareSkeleton, { height: 22, width: 72, rounded: "full" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 112, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 80, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 128, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 36, rounded: "lg" })] })] }), jsxRuntime.jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxRuntime.jsxs("div", { className: cn('grid grid-cols-1', aside !== 'none' && 'md:grid-cols-[1fr_1.25fr]'), children: [jsxRuntime.jsxs("div", { className: "space-y-3 px-5 py-4", children: [jsxRuntime.jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 180, rounded: "md" }), jsxRuntime.jsx(SquareSkeleton, { height: 12, width: 200, rounded: "full" })] }), aside === 'payment' && (jsxRuntime.jsxs("div", { className: "space-y-3 border-t border-border px-5 py-4 md:border-l md:border-t-0", children: [jsxRuntime.jsxs("div", { className: "flex justify-between gap-4", children: [jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 80, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 20, width: 104, rounded: "md" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-end space-y-1.5", children: [jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 80, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 20, width: 104, rounded: "md" })] })] }), jsxRuntime.jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 160, rounded: "full" })] })), aside === 'bars' && (jsxRuntime.jsx("div", { className: "space-y-3 border-t border-border px-5 py-4 md:border-l md:border-t-0", children: [0, 1, 2].map((i) => (jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsxs("div", { className: "flex justify-between", children: [jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 96, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 56, rounded: "full" })] }), jsxRuntime.jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" })] }, i))) }))] }), jsxRuntime.jsx("div", { className: "grid grid-cols-2 border-t border-border md:grid-cols-4", children: [0, 1, 2, 3].map((i) => (jsxRuntime.jsxs("div", { className: "space-y-2 border-border px-5 py-3 even:border-l [&:nth-child(n+3)]:border-t md:border-l md:first:border-l-0 md:[&:nth-child(n+3)]:border-t-0", children: [jsxRuntime.jsx(SquareSkeleton, { height: 10, width: 56, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 14, width: 96, rounded: "full" })] }, i))) })] }), Array.from({ length: sections }).map((_, s) => (jsxRuntime.jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-3", children: [jsxRuntime.jsx(SquareSkeleton, { height: 28, width: 28, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 15, width: 128, rounded: "full" })] }), jsxRuntime.jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: s === 1 ? 4 : 2 }).map((__, row) => (jsxRuntime.jsx(SquareSkeleton, { height: s === 1 ? 36 : 14, className: row % 2 ? 'w-3/4' : 'w-full', rounded: "md" }, row))) })] }, s))), jsxRuntime.jsx("span", { className: "sr-only", children: label })] }));
+    return (jsxRuntime.jsxs("div", { role: "status", "aria-busy": "true", "aria-label": label, className: "space-y-4", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(SquareSkeleton, { height: 14, width: 80, rounded: "full" }), jsxRuntime.jsx("span", { className: "h-5 w-px bg-border" }), jsxRuntime.jsx(SquareSkeleton, { height: 28, width: 200, rounded: "md" }), jsxRuntime.jsx(SquareSkeleton, { height: 22, width: 72, rounded: "full" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 112, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 80, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 128, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 36, width: 36, rounded: "lg" })] })] }), jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "flex flex-col justify-center space-y-3 px-5 py-4 sm:px-7 sm:py-4", children: [jsxRuntime.jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 40, width: 220, rounded: "md" }), aside !== 'none' && (jsxRuntime.jsxs("div", { className: "w-full max-w-xl space-y-2 pt-1", children: [jsxRuntime.jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" }), jsxRuntime.jsxs("div", { className: "flex justify-between", children: [jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 88, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 11, width: 40, rounded: "full" })] })] }))] }), jsxRuntime.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) => (jsxRuntime.jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-border py-1.5 last:border-b-0", children: [jsxRuntime.jsx(SquareSkeleton, { height: 24, width: 24, rounded: "md" }), jsxRuntime.jsx(SquareSkeleton, { height: 12, width: 72, rounded: "full" }), jsxRuntime.jsx(SquareSkeleton, { height: 12, width: 88, rounded: "full", className: "ml-auto" })] }, i))) })] }), Array.from({ length: sections }).map((_, s) => (jsxRuntime.jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-3", children: [jsxRuntime.jsx(SquareSkeleton, { height: 28, width: 28, rounded: "lg" }), jsxRuntime.jsx(SquareSkeleton, { height: 15, width: 128, rounded: "full" })] }), jsxRuntime.jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: s === 1 ? 4 : 2 }).map((__, row) => (jsxRuntime.jsx(SquareSkeleton, { height: s === 1 ? 36 : 14, className: row % 2 ? 'w-3/4' : 'w-full', rounded: "md" }, row))) })] }, s))), jsxRuntime.jsx("span", { className: "sr-only", children: label })] }));
 }
 
 const SlideOut = ({ open, onOpenChange, ...props }) => {
@@ -75330,7 +75389,7 @@ function ImageCropModal({ open, imageUrl, fileType, onCancel, onConfirm, }) {
         const blob = await getCroppedBlob(imgRef.current, completedCrop, fileType);
         onConfirm(blob);
     };
-    return (jsxRuntime.jsxs(Modal, { open: open, onClose: onCancel, size: "lg", icon: jsxRuntime.jsx(Scissors, { className: "h-5 w-5 text-foreground", strokeWidth: 1.5 }), title: "Crop Image", footer: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button$1, { type: "button", variant: "outline", onClick: onCancel, className: "border-border bg-muted text-foreground hover:bg-muted/80", children: "Cancel" }), jsxRuntime.jsx(Button$1, { type: "button", onClick: handleConfirm, className: "bg-primary text-primary-foreground hover:bg-hover", children: "Crop & Add" })] }), children: [jsxRuntime.jsxs("div", { className: "space-y-3 px-6 py-4", children: [jsxRuntime.jsx("p", { className: "text-[13px] text-label", children: "Aspect ratio" }), jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-3", children: ASPECTS.map((a) => {
+    return (jsxRuntime.jsxs(Modal, { open: open, onClose: onCancel, size: "wide", icon: jsxRuntime.jsx(Scissors, { className: "h-5 w-5 text-foreground", strokeWidth: 1.5 }), title: "Crop Image", footer: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button$1, { type: "button", variant: "outline", onClick: onCancel, children: "Cancel" }), jsxRuntime.jsx(Button$1, { type: "button", onClick: handleConfirm, className: "bg-primary text-primary-foreground hover:bg-hover", children: "Crop & Add" })] }), children: [jsxRuntime.jsxs("div", { className: "space-y-3 px-6 pb-4", children: [jsxRuntime.jsx("p", { className: "text-[13px] text-label", children: "Aspect ratio" }), jsxRuntime.jsx("div", { className: "grid grid-cols-5 gap-3", children: ASPECTS.map((a) => {
                             const selected = aspectKey === a.key;
                             return (jsxRuntime.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'