@cytario/design 2.2.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +10 -11
  2. package/dist/index.d.ts +35 -84
  3. package/dist/index.js +603 -688
  4. package/dist/index.js.map +1 -1
  5. package/package.json +4 -10
  6. package/src/styles/tailwind.css +6 -0
  7. package/src/tokens/variables-dark.css +4 -0
  8. package/src/tokens/variables.css +2 -2
package/dist/index.js CHANGED
@@ -12,46 +12,46 @@ import { twMerge } from "tailwind-merge";
12
12
  // src/components/_shared/styles.ts
13
13
  var variantStyles = {
14
14
  primary: [
15
- "bg-[var(--color-action-primary)] text-[var(--color-text-inverse)]",
16
- "hover:bg-[var(--color-action-primary-hover)]",
17
- "pressed:bg-[var(--color-action-primary-active)]"
15
+ "bg-(--color-action-primary) text-(--color-text-inverse)",
16
+ "hover:bg-(--color-action-primary-hover)",
17
+ "pressed:bg-(--color-action-primary-active)"
18
18
  ].join(" "),
19
19
  secondary: [
20
- "bg-transparent text-[var(--color-action-secondary)]",
21
- "border border-[var(--color-border-brand)]",
22
- "hover:bg-[var(--color-purple-50)]",
23
- "pressed:bg-[var(--color-purple-100)]"
20
+ "bg-transparent text-(--color-action-secondary)",
21
+ "border border-(--color-border-brand)",
22
+ "hover:bg-purple-50",
23
+ "pressed:bg-purple-100"
24
24
  ].join(" "),
25
25
  ghost: [
26
- "bg-transparent text-[var(--color-text-primary)]",
27
- "hover:bg-[var(--color-surface-hover)]",
28
- "pressed:bg-[var(--color-surface-pressed)]"
26
+ "bg-transparent text-(--color-text-primary)",
27
+ "hover:bg-(--color-surface-hover)",
28
+ "pressed:bg-(--color-surface-pressed)"
29
29
  ].join(" "),
30
30
  destructive: [
31
- "bg-[var(--color-action-danger)] text-[var(--color-text-inverse)]",
32
- "hover:bg-[var(--color-action-danger-hover)]",
33
- "pressed:bg-[var(--color-action-danger-hover)]"
31
+ "bg-(--color-action-danger) text-(--color-text-inverse)",
32
+ "hover:bg-(--color-action-danger-hover)",
33
+ "pressed:bg-(--color-action-danger-hover)"
34
34
  ].join(" "),
35
35
  default: [
36
- "bg-[var(--color-action-default)] text-[var(--color-text-inverse)]",
37
- "hover:bg-[var(--color-action-default-hover)]",
38
- "pressed:bg-[var(--color-slate-600)]"
36
+ "bg-(--color-action-default) text-(--color-text-inverse)",
37
+ "hover:bg-(--color-action-default-hover)",
38
+ "pressed:bg-slate-600"
39
39
  ].join(" "),
40
40
  success: [
41
- "bg-[var(--color-action-success)] text-[var(--color-text-inverse)]",
42
- "hover:bg-[var(--color-action-success-hover)]",
43
- "pressed:bg-[var(--color-green-800)]"
41
+ "bg-(--color-action-success) text-(--color-text-inverse)",
42
+ "hover:bg-(--color-action-success-hover)",
43
+ "pressed:bg-green-800"
44
44
  ].join(" "),
45
45
  info: [
46
- "bg-[var(--color-action-info)] text-[var(--color-text-inverse)]",
47
- "hover:bg-[var(--color-action-info-hover)]",
48
- "pressed:bg-[var(--color-slate-800)]"
46
+ "bg-(--color-action-info) text-(--color-text-inverse)",
47
+ "hover:bg-(--color-action-info-hover)",
48
+ "pressed:bg-slate-800"
49
49
  ].join(" "),
50
50
  neutral: [
51
- "bg-[var(--color-surface-default)] text-[var(--color-text-primary)]",
52
- "border border-[var(--color-border-default)]",
53
- "hover:bg-[var(--color-surface-subtle)]",
54
- "pressed:bg-[var(--color-surface-muted)]"
51
+ "bg-(--color-surface-default) text-(--color-text-primary)",
52
+ "border border-(--color-border-default)",
53
+ "hover:bg-(--color-surface-subtle)",
54
+ "pressed:bg-(--color-surface-muted)"
55
55
  ].join(" ")
56
56
  };
57
57
  var sizeStyles = {
@@ -136,7 +136,7 @@ function Spinner({
136
136
  );
137
137
  }
138
138
 
139
- // src/components/InputGroup/InputGroupContext.ts
139
+ // src/components/Form/InputGroup/InputGroupContext.ts
140
140
  import { createContext, useContext } from "react";
141
141
  var InputGroupContext = createContext({
142
142
  inGroup: false,
@@ -156,13 +156,13 @@ var iconSizeMap = {
156
156
  function groupRadiusClass(position) {
157
157
  switch (position) {
158
158
  case "start":
159
- return "rounded-l-[var(--border-radius-md)] rounded-r-none";
159
+ return "rounded-l-(--border-radius-md) rounded-r-none";
160
160
  case "middle":
161
161
  return "rounded-none";
162
162
  case "end":
163
- return "rounded-r-[var(--border-radius-md)] rounded-l-none";
163
+ return "rounded-r-(--border-radius-md) rounded-l-none";
164
164
  default:
165
- return "rounded-[var(--border-radius-md)]";
165
+ return "rounded-md";
166
166
  }
167
167
  }
168
168
  function Button({
@@ -177,10 +177,10 @@ function Button({
177
177
  ...props
178
178
  }) {
179
179
  const { inGroup, position } = useInputGroup();
180
- const groupGhost = inGroup && variant === "ghost" ? "bg-[var(--color-surface-default)] text-[var(--color-text-secondary)] border border-[var(--color-border-default)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] pressed:bg-[var(--color-surface-pressed)] pressed:text-[var(--color-text-primary)]" : "";
181
- const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-[var(--border-radius-md)]";
180
+ const groupGhost = inGroup && variant === "ghost" ? "bg-(--color-surface-default) text-(--color-text-secondary) border border-(--color-border-default) hover:bg-(--color-surface-hover) hover:text-(--color-text-primary) hover:border-(--color-border-strong) pressed:bg-(--color-surface-pressed) pressed:text-(--color-text-primary)" : "";
181
+ const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-md";
182
182
  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
183
- const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
183
+ const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2";
184
184
  return /* @__PURE__ */ jsxs2(
185
185
  AriaButton,
186
186
  {
@@ -189,8 +189,8 @@ function Button({
189
189
  className: twMerge(
190
190
  "inline-flex items-center justify-center gap-2 shrink-0",
191
191
  radiusClass,
192
- "font-[var(--font-weight-medium)]",
193
- "leading-[var(--line-height-tight)]",
192
+ "font-medium",
193
+ "leading-tight",
194
194
  "outline-none transition-colors",
195
195
  focusRing,
196
196
  "disabled:opacity-50 disabled:pointer-events-none",
@@ -230,10 +230,10 @@ function Tooltip({
230
230
  {
231
231
  placement,
232
232
  className: [
233
- "bg-[var(--color-surface-overlay)] backdrop-blur-sm",
234
- "text-[var(--color-text-inverse)] text-sm",
233
+ "bg-(--color-surface-overlay) backdrop-blur-sm",
234
+ "text-(--color-text-inverse) text-sm",
235
235
  "px-3 py-1.5",
236
- "rounded-[var(--border-radius-md)]",
236
+ "rounded-md",
237
237
  "max-w-xs",
238
238
  "entering:animate-in entering:fade-in entering:duration-150",
239
239
  "exiting:animate-out exiting:fade-out exiting:duration-100",
@@ -272,13 +272,13 @@ var iconSizeMap2 = {
272
272
  function groupRadiusClass2(position) {
273
273
  switch (position) {
274
274
  case "start":
275
- return "rounded-l-[var(--border-radius-md)] rounded-r-none";
275
+ return "rounded-l-(--border-radius-md) rounded-r-none";
276
276
  case "middle":
277
277
  return "rounded-none";
278
278
  case "end":
279
- return "rounded-r-[var(--border-radius-md)] rounded-l-none";
279
+ return "rounded-r-(--border-radius-md) rounded-l-none";
280
280
  default:
281
- return "rounded-[var(--border-radius-md)]";
281
+ return "rounded-md";
282
282
  }
283
283
  }
284
284
  function IconButton({
@@ -294,10 +294,10 @@ function IconButton({
294
294
  ...props
295
295
  }) {
296
296
  const { inGroup, position } = useInputGroup();
297
- const groupGhost = inGroup && variant === "ghost" ? "bg-[var(--color-surface-default)] text-[var(--color-text-secondary)] border border-[var(--color-border-default)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)] pressed:bg-[var(--color-surface-pressed)] pressed:text-[var(--color-text-primary)]" : "";
298
- const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-[var(--border-radius-md)]";
297
+ const groupGhost = inGroup && variant === "ghost" ? "bg-(--color-surface-default) text-(--color-text-secondary) border border-(--color-border-default) hover:bg-(--color-surface-hover) hover:text-(--color-text-primary) hover:border-(--color-border-strong) pressed:bg-(--color-surface-pressed) pressed:text-(--color-text-primary)" : "";
298
+ const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-md";
299
299
  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
300
- const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
300
+ const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2";
301
301
  const button = /* @__PURE__ */ jsx5(
302
302
  AriaButton2,
303
303
  {
@@ -325,7 +325,7 @@ function IconButton({
325
325
  return button;
326
326
  }
327
327
 
328
- // src/components/Input/Input.tsx
328
+ // src/components/Form/Input/Input.tsx
329
329
  import {
330
330
  TextField,
331
331
  Label,
@@ -351,13 +351,13 @@ var alignClasses = {
351
351
  function groupRadiusClasses(position) {
352
352
  switch (position) {
353
353
  case "start":
354
- return "rounded-l-[var(--border-radius-md)] rounded-r-none";
354
+ return "rounded-l-(--border-radius-md) rounded-r-none";
355
355
  case "middle":
356
356
  return "rounded-none";
357
357
  case "end":
358
- return "rounded-r-[var(--border-radius-md)] rounded-l-none";
358
+ return "rounded-r-(--border-radius-md) rounded-l-none";
359
359
  default:
360
- return "rounded-[var(--border-radius-md)]";
360
+ return "rounded-md";
361
361
  }
362
362
  }
363
363
  function Input({
@@ -376,8 +376,8 @@ function Input({
376
376
  }) {
377
377
  const isInvalid = !!errorMessage;
378
378
  const { inGroup, position } = useInputGroup();
379
- const borderColor = isInvalid ? "border-[var(--color-border-danger)]" : "border-[var(--color-border-default)] hover:border-[var(--color-border-strong)]";
380
- const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-[var(--border-radius-md)]";
379
+ const borderColor = isInvalid ? "border-(--color-border-danger)" : "border-(--color-border-default) hover:border-(--color-border-strong)";
380
+ const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-md";
381
381
  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
382
382
  return /* @__PURE__ */ jsxs4(
383
383
  TextField,
@@ -388,7 +388,7 @@ function Input({
388
388
  isRequired,
389
389
  isInvalid,
390
390
  className: [
391
- "flex flex-col gap-[var(--spacing-1)]",
391
+ "flex flex-col gap-1",
392
392
  inGroup ? "min-w-0 flex-1" : "",
393
393
  marginClass,
394
394
  className
@@ -398,9 +398,9 @@ function Input({
398
398
  Label,
399
399
  {
400
400
  className: [
401
- "text-[length:var(--font-size-sm)]",
402
- "font-[number:var(--font-weight-medium)]",
403
- "text-[var(--color-text-primary)]"
401
+ "text-sm",
402
+ "font-medium",
403
+ "text-(--color-text-primary)"
404
404
  ].join(" "),
405
405
  children: [
406
406
  label,
@@ -408,7 +408,7 @@ function Input({
408
408
  "span",
409
409
  {
410
410
  "aria-hidden": "true",
411
- className: "ml-0.5 text-[var(--color-text-danger)]",
411
+ className: "ml-0.5 text-(--color-text-danger)",
412
412
  children: "*"
413
413
  }
414
414
  )
@@ -422,10 +422,10 @@ function Input({
422
422
  "flex items-center overflow-hidden",
423
423
  radiusClass,
424
424
  "border",
425
- "bg-[var(--color-surface-default)]",
425
+ "bg-(--color-surface-default)",
426
426
  "outline-none transition-colors",
427
427
  borderColor,
428
- "focus-within:ring-2 focus-within:ring-[var(--color-border-focus)] focus-within:border-[var(--color-border-focus)]",
428
+ "focus-within:ring-2 focus-within:ring-(--color-border-focus) focus-within:border-(--color-border-focus)",
429
429
  inGroup ? "focus-within:z-10" : "",
430
430
  isDisabled ? "opacity-50 pointer-events-none" : ""
431
431
  ].filter(Boolean).join(" "),
@@ -435,9 +435,9 @@ function Input({
435
435
  {
436
436
  className: [
437
437
  "self-stretch flex items-center shrink-0 select-none",
438
- "bg-[var(--color-surface-subtle)]",
439
- "border-r border-r-[var(--color-border-default)]",
440
- "text-[var(--color-text-secondary)]",
438
+ "bg-(--color-surface-subtle)",
439
+ "border-r border-r-(--color-border-default)",
440
+ "text-(--color-text-secondary)",
441
441
  prefixSizeClasses[size]
442
442
  ].join(" "),
443
443
  children: prefix
@@ -451,8 +451,8 @@ function Input({
451
451
  "w-full bg-transparent",
452
452
  sizeClasses[size],
453
453
  alignClasses[align],
454
- "text-[var(--color-text-primary)]",
455
- "placeholder:text-[var(--color-text-tertiary)]",
454
+ "text-(--color-text-primary)",
455
+ "placeholder:text-(--color-text-tertiary)",
456
456
  "outline-none border-none"
457
457
  ].join(" ")
458
458
  }
@@ -469,12 +469,12 @@ function Input({
469
469
  alignClasses[align],
470
470
  radiusClass,
471
471
  "border",
472
- "text-[var(--color-text-primary)]",
473
- "bg-[var(--color-surface-default)]",
474
- "placeholder:text-[var(--color-text-tertiary)]",
472
+ "text-(--color-text-primary)",
473
+ "bg-(--color-surface-default)",
474
+ "placeholder:text-(--color-text-tertiary)",
475
475
  "outline-none transition-colors",
476
476
  borderColor,
477
- "focus:ring-2 focus:ring-[var(--color-border-focus)] focus:border-[var(--color-border-focus)]",
477
+ "focus:ring-2 focus:ring-(--color-border-focus) focus:border-(--color-border-focus)",
478
478
  inGroup ? "focus:z-10" : "",
479
479
  "disabled:opacity-50 disabled:pointer-events-none"
480
480
  ].join(" ")
@@ -484,7 +484,7 @@ function Input({
484
484
  Text,
485
485
  {
486
486
  slot: "description",
487
- className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]",
487
+ className: "text-sm text-(--color-text-secondary)",
488
488
  children: description
489
489
  }
490
490
  ),
@@ -492,7 +492,7 @@ function Input({
492
492
  Text,
493
493
  {
494
494
  slot: "errorMessage",
495
- className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]",
495
+ className: "text-sm text-(--color-text-danger)",
496
496
  children: errorMessage
497
497
  }
498
498
  )
@@ -501,7 +501,8 @@ function Input({
501
501
  );
502
502
  }
503
503
 
504
- // src/components/Select/Select.tsx
504
+ // src/components/Form/Select/Select.tsx
505
+ import { Check, ChevronDown } from "lucide-react";
505
506
  import {
506
507
  Button as Button2,
507
508
  Label as Label2,
@@ -511,48 +512,17 @@ import {
511
512
  Select as AriaSelect,
512
513
  SelectValue
513
514
  } from "react-aria-components";
515
+ import { twMerge as twMerge2 } from "tailwind-merge";
514
516
  import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
515
- function ChevronDown() {
516
- return /* @__PURE__ */ jsx7(
517
- "svg",
518
- {
519
- "aria-hidden": "true",
520
- className: "h-4 w-4 text-[var(--color-text-secondary)]",
521
- viewBox: "0 0 16 16",
522
- fill: "none",
523
- stroke: "currentColor",
524
- strokeWidth: "2",
525
- strokeLinecap: "round",
526
- strokeLinejoin: "round",
527
- children: /* @__PURE__ */ jsx7("path", { d: "M4 6l4 4 4-4" })
528
- }
529
- );
530
- }
531
- function CheckIcon() {
532
- return /* @__PURE__ */ jsx7(
533
- "svg",
534
- {
535
- "aria-hidden": "true",
536
- className: "h-4 w-4 text-[var(--color-action-primary)]",
537
- viewBox: "0 0 16 16",
538
- fill: "none",
539
- stroke: "currentColor",
540
- strokeWidth: "2",
541
- strokeLinecap: "round",
542
- strokeLinejoin: "round",
543
- children: /* @__PURE__ */ jsx7("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
544
- }
545
- );
546
- }
547
517
  function Select({
548
518
  label,
549
519
  items,
550
520
  placeholder = "Select an option",
551
521
  errorMessage,
552
- hideLabel = false,
553
522
  isDisabled,
554
523
  isRequired,
555
524
  className,
525
+ renderItem,
556
526
  ...props
557
527
  }) {
558
528
  const hasError = Boolean(errorMessage);
@@ -563,78 +533,88 @@ function Select({
563
533
  isDisabled,
564
534
  isRequired,
565
535
  isInvalid: hasError,
566
- className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
536
+ className: twMerge2("flex flex-col gap-1", className),
567
537
  children: [
568
- /* @__PURE__ */ jsxs5(
569
- Label2,
570
- {
571
- className: [
572
- "text-[length:var(--font-size-sm)] font-[var(--font-weight-medium)] text-[var(--color-text-primary)]",
573
- hideLabel && "sr-only"
574
- ].filter(Boolean).join(" "),
575
- children: [
576
- label,
577
- isRequired && /* @__PURE__ */ jsx7(
578
- "span",
579
- {
580
- "aria-hidden": "true",
581
- className: "ml-0.5 text-[var(--color-text-danger)]",
582
- children: "*"
583
- }
584
- )
585
- ]
586
- }
587
- ),
538
+ label && /* @__PURE__ */ jsxs5(Label2, { className: "text-sm font-medium text-(--color-text-primary)", children: [
539
+ label,
540
+ isRequired && /* @__PURE__ */ jsx7(
541
+ "span",
542
+ {
543
+ "aria-hidden": "true",
544
+ className: "ml-0.5 text-(--color-text-danger)",
545
+ children: "*"
546
+ }
547
+ )
548
+ ] }),
588
549
  /* @__PURE__ */ jsxs5(
589
550
  Button2,
590
551
  {
591
- className: [
552
+ className: twMerge2(
592
553
  "inline-flex items-center justify-between",
593
- "w-full rounded-[var(--border-radius-md)] px-4 py-2",
554
+ "w-full rounded-md px-4 py-2",
594
555
  "text-base text-left",
595
556
  "border outline-none transition-colors",
596
- hasError ? "border-[var(--color-border-danger)]" : "border-[var(--color-border-default)]",
597
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
598
- "disabled:opacity-50 disabled:pointer-events-none",
599
- "bg-[var(--color-surface-default)]"
600
- ].join(" "),
557
+ hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)",
558
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
559
+ "cursor-pointer disabled:opacity-50 disabled:pointer-events-none",
560
+ "bg-(--color-surface-default)"
561
+ ),
601
562
  children: [
602
- /* @__PURE__ */ jsx7(SelectValue, { className: "truncate data-[placeholder]:text-[var(--color-text-tertiary)]", children: ({ selectedText }) => selectedText || placeholder }),
603
- /* @__PURE__ */ jsx7(ChevronDown, {})
563
+ /* @__PURE__ */ jsx7(
564
+ SelectValue,
565
+ {
566
+ className: twMerge2(
567
+ renderItem ? "min-w-0" : "truncate",
568
+ "data-placeholder:text-(--color-text-tertiary)"
569
+ ),
570
+ children: ({ selectedItem, isPlaceholder }) => {
571
+ if (isPlaceholder) return placeholder;
572
+ const item = selectedItem;
573
+ return renderItem ? renderItem(item) : item?.name ?? placeholder;
574
+ }
575
+ }
576
+ ),
577
+ /* @__PURE__ */ jsx7(
578
+ ChevronDown,
579
+ {
580
+ "aria-hidden": true,
581
+ className: "h-4 w-4 shrink-0 text-(--color-text-secondary)"
582
+ }
583
+ )
604
584
  ]
605
585
  }
606
586
  ),
607
- hasError && /* @__PURE__ */ jsx7("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage }),
587
+ hasError && /* @__PURE__ */ jsx7("span", { className: "text-sm text-(--color-text-danger)", children: errorMessage }),
608
588
  /* @__PURE__ */ jsx7(
609
589
  Popover,
610
590
  {
611
- className: [
612
- "w-[var(--trigger-width)]",
613
- "rounded-[var(--border-radius-md)]",
614
- "border border-[var(--color-border-default)]",
615
- "bg-[var(--color-surface-default)]",
591
+ className: twMerge2(
592
+ "w-(--trigger-width)",
593
+ "rounded-md",
594
+ "border border-(--color-border-default)",
595
+ "bg-(--color-surface-default)",
616
596
  "shadow-lg",
617
597
  "overflow-auto",
618
- "entering:animate-in entering:fade-in entering:slide-in-from-top-1",
619
- "exiting:animate-out exiting:fade-out exiting:slide-out-to-top-1"
620
- ].join(" "),
598
+ "entering:animate-in entering:fade-in",
599
+ "exiting:animate-out exiting:fade-out"
600
+ ),
621
601
  children: /* @__PURE__ */ jsx7(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx7(
622
602
  ListBoxItem,
623
603
  {
624
604
  id: item.id,
625
605
  textValue: item.name,
626
- className: [
606
+ className: twMerge2(
627
607
  "flex items-center justify-between gap-2",
628
- "px-4 py-2 rounded-[var(--border-radius-sm)]",
629
- "text-base text-[var(--color-text-primary)]",
608
+ "px-4 py-2 rounded-sm",
609
+ "text-base text-(--color-text-primary)",
630
610
  "cursor-pointer outline-none",
631
- "hover:bg-[var(--color-surface-muted)]",
632
- "focus:bg-[var(--color-surface-muted)]",
633
- "selected:text-[var(--color-action-primary)] selected:font-[var(--font-weight-medium)]"
634
- ].join(" "),
611
+ "hover:bg-(--color-surface-muted)",
612
+ "focus-visible:bg-(--color-surface-muted)",
613
+ "selected:text-(--color-action-primary) selected:font-medium"
614
+ ),
635
615
  children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
636
- /* @__PURE__ */ jsx7("span", { className: "truncate", children: item.name }),
637
- isSelected && /* @__PURE__ */ jsx7(CheckIcon, {})
616
+ /* @__PURE__ */ jsx7("span", { className: "truncate", children: renderItem ? renderItem(item) : item.name }),
617
+ isSelected && /* @__PURE__ */ jsx7(Check, { className: "h-4 w-4 shrink-0 text-(--color-action-primary)" })
638
618
  ] })
639
619
  }
640
620
  ) })
@@ -665,7 +645,7 @@ function Table({ size = "comfortable", className, ...props }) {
665
645
  {
666
646
  ...props,
667
647
  className: [
668
- "w-full border-collapse text-[var(--font-size-sm)] text-[var(--color-text-primary)]",
648
+ "w-full border-collapse text-(--font-size-sm) text-(--color-text-primary)",
669
649
  tableSizeClass[size],
670
650
  className
671
651
  ].filter(Boolean).join(" ")
@@ -681,14 +661,14 @@ function Column(props) {
681
661
  {
682
662
  ...props,
683
663
  className: [
684
- "px-3 py-2 text-left font-[var(--font-weight-semibold)] text-[var(--color-text-secondary)]",
685
- "border-b-2 border-[var(--color-border-default)]",
664
+ "px-3 py-2 text-left font-semibold text-(--color-text-secondary)",
665
+ "border-b-2 border-(--color-border-default)",
686
666
  "cursor-default select-none outline-none",
687
- "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
667
+ "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
688
668
  ].join(" "),
689
669
  children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs6("span", { className: "inline-flex items-center gap-1", children: [
690
670
  props.children,
691
- allowsSorting && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-[var(--color-text-tertiary)]", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
671
+ allowsSorting && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-(--color-text-tertiary)", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
692
672
  ] })
693
673
  }
694
674
  );
@@ -702,11 +682,11 @@ function Row(props) {
702
682
  {
703
683
  ...props,
704
684
  className: [
705
- "border-b border-[var(--color-border-default)]",
706
- "even:bg-[var(--color-surface-subtle)]",
707
- "hover:bg-[var(--color-surface-muted)]",
685
+ "border-b border-(--color-border-default)",
686
+ "even:bg-(--color-surface-subtle)",
687
+ "hover:bg-(--color-surface-muted)",
708
688
  "outline-none",
709
- "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]",
689
+ "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]",
710
690
  "transition-colors"
711
691
  ].join(" ")
712
692
  }
@@ -718,10 +698,10 @@ function Cell(props) {
718
698
  {
719
699
  ...props,
720
700
  className: [
721
- "px-3 py-[var(--table-row-py)]",
722
- "text-[var(--color-text-primary)]",
701
+ "px-3 py-(--table-row-py)",
702
+ "text-(--color-text-primary)",
723
703
  "outline-none",
724
- "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
704
+ "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
725
705
  ].join(" ")
726
706
  }
727
707
  );
@@ -758,7 +738,7 @@ function Dialog({
758
738
  onOpenChange,
759
739
  isDismissable,
760
740
  className: [
761
- "fixed inset-0 z-50 bg-[var(--color-overlay-backdrop)] backdrop-blur-sm",
741
+ "fixed inset-0 z-50 bg-(--color-overlay-backdrop) backdrop-blur-sm",
762
742
  "flex items-center justify-center",
763
743
  "data-[entering]:animate-in data-[entering]:fade-in",
764
744
  "data-[exiting]:animate-out data-[exiting]:fade-out"
@@ -769,18 +749,18 @@ function Dialog({
769
749
  className: [
770
750
  "w-full mx-4",
771
751
  sizeStyles2[size],
772
- "bg-[var(--color-surface-default)] rounded-[var(--border-radius-lg)] shadow-xl max-h-[85vh] flex flex-col",
752
+ "bg-(--color-surface-default) rounded-lg shadow-xl max-h-[85vh] flex flex-col",
773
753
  "data-[entering]:animate-in data-[entering]:zoom-in-95 data-[entering]:fade-in",
774
754
  "data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
775
755
  className
776
756
  ].filter(Boolean).join(" "),
777
757
  children: /* @__PURE__ */ jsx9(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
778
- /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-default)]", children: [
758
+ /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4 border-b border-(--color-border-default)", children: [
779
759
  /* @__PURE__ */ jsx9(
780
760
  Heading,
781
761
  {
782
762
  slot: "title",
783
- className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)]",
763
+ className: "text-lg font-semibold text-(--color-text-primary)",
784
764
  children: title
785
765
  }
786
766
  ),
@@ -790,9 +770,9 @@ function Dialog({
790
770
  type: "button",
791
771
  onClick: close,
792
772
  className: [
793
- "inline-flex items-center justify-center rounded-[var(--border-radius-sm)] p-1",
794
- "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-muted)]",
795
- "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
773
+ "inline-flex items-center justify-center rounded-sm p-1",
774
+ "text-(--color-text-secondary) hover:text-(--color-text-primary) hover:bg-(--color-surface-muted)",
775
+ "outline-none focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
796
776
  "transition-colors"
797
777
  ].join(" "),
798
778
  "aria-label": "Close",
@@ -833,18 +813,18 @@ var defaultDuration = {
833
813
  var variantConfig = {
834
814
  success: {
835
815
  icon: CheckCircle,
836
- containerClass: "bg-[var(--color-surface-success)] border-[var(--color-border-success)] text-[var(--color-text-success)]",
837
- iconClass: "text-[var(--color-action-success)]"
816
+ containerClass: "bg-(--color-surface-success) border-(--color-border-success) text-(--color-text-success)",
817
+ iconClass: "text-(--color-action-success)"
838
818
  },
839
819
  error: {
840
820
  icon: XCircle,
841
- containerClass: "bg-[var(--color-surface-danger)] border-[var(--color-border-danger)] text-[var(--color-text-danger)]",
842
- iconClass: "text-[var(--color-action-danger)]"
821
+ containerClass: "bg-(--color-surface-danger) border-(--color-border-danger) text-(--color-text-danger)",
822
+ iconClass: "text-(--color-action-danger)"
843
823
  },
844
824
  info: {
845
825
  icon: Info,
846
- containerClass: "bg-[var(--color-surface-info)] border-[var(--color-border-info)] text-[var(--color-text-info)]",
847
- iconClass: "text-[var(--color-text-info)]"
826
+ containerClass: "bg-(--color-surface-info) border-(--color-border-info) text-(--color-text-info)",
827
+ iconClass: "text-(--color-text-info)"
848
828
  }
849
829
  };
850
830
  var PlacementContext = createContext2("bottom-right");
@@ -886,7 +866,7 @@ function ToastItem({
886
866
  role: "status",
887
867
  "aria-live": "polite",
888
868
  className: [
889
- "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)] shadow-md",
869
+ "flex items-start gap-3 rounded-lg border px-4 py-3 shadow-md",
890
870
  "min-w-[320px] max-w-[420px]",
891
871
  "transition-all duration-200",
892
872
  isExiting ? exitAnimationByPlacement[placement] : enterAnimationByPlacement[placement],
@@ -894,13 +874,13 @@ function ToastItem({
894
874
  ].join(" "),
895
875
  children: [
896
876
  /* @__PURE__ */ jsx11(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
897
- /* @__PURE__ */ jsx11("p", { className: "flex-1 text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]", children: toast.message }),
877
+ /* @__PURE__ */ jsx11("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
898
878
  /* @__PURE__ */ jsx11(
899
879
  "button",
900
880
  {
901
881
  type: "button",
902
882
  onClick: dismiss,
903
- className: "shrink-0 rounded-[var(--border-radius-sm)] p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
883
+ className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
904
884
  "aria-label": "Dismiss",
905
885
  children: /* @__PURE__ */ jsx11(X2, { size: 16, "aria-hidden": "true" })
906
886
  }
@@ -983,24 +963,24 @@ function EmptyState({
983
963
  "div",
984
964
  {
985
965
  className: [
986
- "flex flex-col items-center text-center py-[var(--spacing-12)] px-[var(--spacing-6)]",
966
+ "flex flex-col items-center text-center py-12 px-6",
987
967
  className
988
968
  ].filter(Boolean).join(" "),
989
969
  children: [
990
- icon && /* @__PURE__ */ jsx12(Icon, { icon, size: "xl", className: "text-[var(--color-text-tertiary)]" }),
991
- /* @__PURE__ */ jsx12("h3", { className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-4", children: title }),
992
- description && /* @__PURE__ */ jsx12("p", { className: "text-sm text-[var(--color-text-secondary)] mt-2 max-w-sm", children: description }),
970
+ icon && /* @__PURE__ */ jsx12(Icon, { icon, size: "xl", className: "text-(--color-text-tertiary)" }),
971
+ /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold text-(--color-text-primary) mt-4", children: title }),
972
+ description && /* @__PURE__ */ jsx12("p", { className: "text-sm text-(--color-text-secondary) mt-2 max-w-sm", children: description }),
993
973
  action && /* @__PURE__ */ jsx12("div", { className: "mt-6", children: action })
994
974
  ]
995
975
  }
996
976
  );
997
977
  }
998
978
 
999
- // src/components/Checkbox/Checkbox.tsx
979
+ // src/components/Form/Checkbox/Checkbox.tsx
1000
980
  import {
1001
981
  Checkbox as AriaCheckbox
1002
982
  } from "react-aria-components";
1003
- import { Check } from "lucide-react";
983
+ import { Check as Check2 } from "lucide-react";
1004
984
  import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
1005
985
  function Checkbox({ children, className, ...props }) {
1006
986
  return /* @__PURE__ */ jsx13(
@@ -1008,7 +988,7 @@ function Checkbox({ children, className, ...props }) {
1008
988
  {
1009
989
  ...props,
1010
990
  className: [
1011
- "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
991
+ "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
1012
992
  "disabled:opacity-50 disabled:cursor-default",
1013
993
  className
1014
994
  ].filter(Boolean).join(" "),
@@ -1018,13 +998,13 @@ function Checkbox({ children, className, ...props }) {
1018
998
  {
1019
999
  className: [
1020
1000
  "flex items-center justify-center w-6 h-6 shrink-0",
1021
- "rounded-[var(--border-radius-sm)] border transition-colors",
1022
- "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
1023
- isSelected || isIndeterminate ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] group-hover:border-[var(--color-border-strong)]"
1001
+ "rounded-sm border transition-colors",
1002
+ "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1003
+ isSelected || isIndeterminate ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) group-hover:border-(--color-border-strong)"
1024
1004
  ].join(" "),
1025
1005
  children: [
1026
- isSelected && /* @__PURE__ */ jsx13(Check, { className: "w-4 h-4 text-[var(--color-text-inverse)]", strokeWidth: 3 }),
1027
- isIndeterminate && /* @__PURE__ */ jsx13("div", { className: "w-3 h-0.5 bg-[var(--color-text-inverse)] rounded-full" })
1006
+ isSelected && /* @__PURE__ */ jsx13(Check2, { className: "w-4 h-4 text-(--color-text-inverse)", strokeWidth: 3 }),
1007
+ isIndeterminate && /* @__PURE__ */ jsx13("div", { className: "w-3 h-0.5 bg-(--color-text-inverse) rounded-full" })
1028
1008
  ]
1029
1009
  }
1030
1010
  ),
@@ -1034,15 +1014,15 @@ function Checkbox({ children, className, ...props }) {
1034
1014
  );
1035
1015
  }
1036
1016
 
1037
- // src/components/Switch/Switch.tsx
1017
+ // src/components/Form/Switch/Switch.tsx
1038
1018
  import {
1039
1019
  Switch as AriaSwitch
1040
1020
  } from "react-aria-components";
1041
1021
  import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
1042
1022
  var trackColorMap = {
1043
- primary: "bg-[var(--color-action-primary)]",
1044
- success: "bg-[var(--color-action-success)]",
1045
- destructive: "bg-[var(--color-action-danger)]"
1023
+ primary: "bg-(--color-action-primary)",
1024
+ success: "bg-(--color-action-success)",
1025
+ destructive: "bg-(--color-action-danger)"
1046
1026
  };
1047
1027
  var presetColors = new Set(Object.keys(trackColorMap));
1048
1028
  function isPresetColor(color) {
@@ -1060,7 +1040,7 @@ function Switch({
1060
1040
  {
1061
1041
  ...props,
1062
1042
  className: [
1063
- "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
1043
+ "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
1064
1044
  "disabled:opacity-50 disabled:cursor-default",
1065
1045
  className
1066
1046
  ].filter(Boolean).join(" "),
@@ -1070,15 +1050,15 @@ function Switch({
1070
1050
  {
1071
1051
  className: [
1072
1052
  "w-9 h-5 rounded-full transition-colors shrink-0 p-0.5",
1073
- "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
1074
- isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-[var(--color-border-strong)]" : ""
1053
+ "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1054
+ isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-(--color-border-strong)" : ""
1075
1055
  ].join(" "),
1076
1056
  style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
1077
1057
  children: /* @__PURE__ */ jsx14(
1078
1058
  "div",
1079
1059
  {
1080
1060
  className: [
1081
- "w-4 h-4 rounded-full bg-[var(--color-surface-default)] transition-transform shadow-sm",
1061
+ "w-4 h-4 rounded-full bg-(--color-surface-default) transition-transform shadow-sm",
1082
1062
  isSelected ? "translate-x-4" : "translate-x-0"
1083
1063
  ].join(" ")
1084
1064
  }
@@ -1091,7 +1071,7 @@ function Switch({
1091
1071
  );
1092
1072
  }
1093
1073
 
1094
- // src/components/Radio/Radio.tsx
1074
+ // src/components/Form/Radio/Radio.tsx
1095
1075
  import {
1096
1076
  RadioGroup as AriaRadioGroup,
1097
1077
  Radio as AriaRadio
@@ -1117,7 +1097,7 @@ function Radio({ children, className, ...props }) {
1117
1097
  {
1118
1098
  ...props,
1119
1099
  className: [
1120
- "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
1100
+ "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
1121
1101
  "disabled:opacity-50 disabled:cursor-default",
1122
1102
  className
1123
1103
  ].filter(Boolean).join(" "),
@@ -1128,10 +1108,10 @@ function Radio({ children, className, ...props }) {
1128
1108
  className: [
1129
1109
  "flex items-center justify-center w-5 h-5 shrink-0",
1130
1110
  "rounded-full border-2 transition-colors",
1131
- "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
1132
- isSelected ? "border-[var(--color-action-primary)]" : "border-[var(--color-border-default)] group-hover:border-[var(--color-border-strong)]"
1111
+ "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1112
+ isSelected ? "border-(--color-action-primary)" : "border-(--color-border-default) group-hover:border-(--color-border-strong)"
1133
1113
  ].join(" "),
1134
- children: isSelected && /* @__PURE__ */ jsx15("div", { className: "w-2.5 h-2.5 rounded-full bg-[var(--color-action-primary)]" })
1114
+ children: isSelected && /* @__PURE__ */ jsx15("div", { className: "w-2.5 h-2.5 rounded-full bg-(--color-action-primary)" })
1135
1115
  }
1136
1116
  ),
1137
1117
  children && /* @__PURE__ */ jsx15("span", { children })
@@ -1153,10 +1133,10 @@ function RadioButton({ children, className, ...props }) {
1153
1133
  "div",
1154
1134
  {
1155
1135
  className: [
1156
- "px-4 py-2 text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]",
1157
- "rounded-[var(--border-radius-md)] border transition-colors text-center",
1158
- "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
1159
- isSelected ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)] text-[var(--color-text-inverse)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)]"
1136
+ "px-4 py-2 text-sm font-medium",
1137
+ "rounded-md border transition-colors text-center",
1138
+ "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1139
+ isSelected ? "bg-(--color-action-primary) border-(--color-action-primary) text-(--color-text-inverse)" : "bg-(--color-surface-default) border-(--color-border-default) text-(--color-text-primary) hover:border-(--color-border-strong)"
1160
1140
  ].join(" "),
1161
1141
  children
1162
1142
  }
@@ -1165,7 +1145,7 @@ function RadioButton({ children, className, ...props }) {
1165
1145
  );
1166
1146
  }
1167
1147
 
1168
- // src/components/Label/Label.tsx
1148
+ // src/components/Form/Label/Label.tsx
1169
1149
  import {
1170
1150
  Label as AriaLabel
1171
1151
  } from "react-aria-components";
@@ -1176,9 +1156,9 @@ function Label3({ isRequired, children, className, ...props }) {
1176
1156
  {
1177
1157
  ...props,
1178
1158
  className: [
1179
- "text-[length:var(--font-size-sm)]",
1180
- "font-[number:var(--font-weight-medium)]",
1181
- "text-[var(--color-text-primary)]",
1159
+ "text-sm",
1160
+ "font-medium",
1161
+ "text-(--color-text-primary)",
1182
1162
  className
1183
1163
  ].filter(Boolean).join(" "),
1184
1164
  children: [
@@ -1187,7 +1167,7 @@ function Label3({ isRequired, children, className, ...props }) {
1187
1167
  "span",
1188
1168
  {
1189
1169
  "aria-hidden": "true",
1190
- className: "ml-0.5 text-[var(--color-text-danger)]",
1170
+ className: "ml-0.5 text-(--color-text-danger)",
1191
1171
  children: "*"
1192
1172
  }
1193
1173
  )
@@ -1196,7 +1176,7 @@ function Label3({ isRequired, children, className, ...props }) {
1196
1176
  );
1197
1177
  }
1198
1178
 
1199
- // src/components/Field/Field.tsx
1179
+ // src/components/Form/Field/Field.tsx
1200
1180
  import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
1201
1181
  function getErrorMessage(error) {
1202
1182
  if (!error) return void 0;
@@ -1215,25 +1195,25 @@ function Field({
1215
1195
  return /* @__PURE__ */ jsxs14(
1216
1196
  "div",
1217
1197
  {
1218
- className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
1198
+ className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
1219
1199
  children: [
1220
1200
  label && /* @__PURE__ */ jsx17(Label3, { isRequired, children: label }),
1221
1201
  children,
1222
- description && !errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description }),
1223
- errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage })
1202
+ description && !errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-sm text-(--color-text-secondary)", children: description }),
1203
+ errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-sm text-(--color-text-danger)", children: errorMessage })
1224
1204
  ]
1225
1205
  }
1226
1206
  );
1227
1207
  }
1228
1208
 
1229
- // src/components/Fieldset/Fieldset.tsx
1209
+ // src/components/Form/Fieldset/Fieldset.tsx
1230
1210
  import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
1231
1211
  function Fieldset({ legend, children, className }) {
1232
1212
  return /* @__PURE__ */ jsxs15(
1233
1213
  "fieldset",
1234
1214
  {
1235
1215
  className: [
1236
- "flex flex-col gap-[var(--spacing-8)]",
1216
+ "flex flex-col gap-8",
1237
1217
  "border-none p-0 m-0",
1238
1218
  className
1239
1219
  ].filter(Boolean).join(" "),
@@ -1242,9 +1222,9 @@ function Fieldset({ legend, children, className }) {
1242
1222
  "legend",
1243
1223
  {
1244
1224
  className: [
1245
- "text-[length:var(--font-size-lg)]",
1246
- "font-[number:var(--font-weight-semibold)]",
1247
- "text-[var(--color-text-primary)]",
1225
+ "text-lg",
1226
+ "font-semibold",
1227
+ "text-(--color-text-primary)",
1248
1228
  "p-0"
1249
1229
  ].join(" "),
1250
1230
  children: legend
@@ -1256,7 +1236,7 @@ function Fieldset({ legend, children, className }) {
1256
1236
  );
1257
1237
  }
1258
1238
 
1259
- // src/components/InputGroup/InputGroup.tsx
1239
+ // src/components/Form/InputGroup/InputGroup.tsx
1260
1240
  import React from "react";
1261
1241
  import { jsx as jsx19 } from "react/jsx-runtime";
1262
1242
  function InputGroup({ children, className }) {
@@ -1282,23 +1262,23 @@ function InputGroup({ children, className }) {
1282
1262
  );
1283
1263
  }
1284
1264
 
1285
- // src/components/InputAddon/InputAddon.tsx
1265
+ // src/components/Form/InputAddon/InputAddon.tsx
1286
1266
  import { jsx as jsx20 } from "react/jsx-runtime";
1287
1267
  function groupRadiusClass3(position) {
1288
1268
  switch (position) {
1289
1269
  case "start":
1290
- return "rounded-l-[var(--border-radius-md)] rounded-r-none";
1270
+ return "rounded-l-(--border-radius-md) rounded-r-none";
1291
1271
  case "middle":
1292
1272
  return "rounded-none";
1293
1273
  case "end":
1294
- return "rounded-r-[var(--border-radius-md)] rounded-l-none";
1274
+ return "rounded-r-(--border-radius-md) rounded-l-none";
1295
1275
  default:
1296
- return "rounded-[var(--border-radius-md)]";
1276
+ return "rounded-md";
1297
1277
  }
1298
1278
  }
1299
1279
  function InputAddon({ children, className }) {
1300
1280
  const { inGroup, position } = useInputGroup();
1301
- const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-[var(--border-radius-md)]";
1281
+ const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-md";
1302
1282
  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
1303
1283
  return /* @__PURE__ */ jsx20(
1304
1284
  "div",
@@ -1306,9 +1286,9 @@ function InputAddon({ children, className }) {
1306
1286
  className: [
1307
1287
  "flex items-center self-stretch shrink-0 select-none",
1308
1288
  "px-3 py-2 text-base",
1309
- "bg-[var(--color-surface-subtle)]",
1310
- "text-[var(--color-text-secondary)]",
1311
- "border border-[var(--color-border-default)]",
1289
+ "bg-(--color-surface-subtle)",
1290
+ "text-(--color-text-secondary)",
1291
+ "border border-(--color-border-default)",
1312
1292
  radiusClass,
1313
1293
  marginClass,
1314
1294
  className
@@ -1319,7 +1299,7 @@ function InputAddon({ children, className }) {
1319
1299
  }
1320
1300
 
1321
1301
  // src/components/Heading/Heading.tsx
1322
- import { twMerge as twMerge2 } from "tailwind-merge";
1302
+ import { twMerge as twMerge3 } from "tailwind-merge";
1323
1303
  import { jsx as jsx21 } from "react/jsx-runtime";
1324
1304
  var defaultSizeMap = {
1325
1305
  h1: "2xl",
@@ -1330,17 +1310,17 @@ var defaultSizeMap = {
1330
1310
  h6: "xs"
1331
1311
  };
1332
1312
  var sizeStyles3 = {
1333
- xs: "text-[length:var(--font-size-sm)]",
1334
- sm: "text-[length:var(--font-size-base)]",
1335
- md: "text-[length:var(--font-size-lg)]",
1336
- lg: "text-[length:var(--font-size-xl)]",
1337
- xl: "text-[length:var(--font-size-2xl)]",
1338
- "2xl": "text-[length:var(--font-size-3xl)]",
1339
- "3xl": "text-[length:var(--font-size-4xl)]"
1313
+ xs: "text-sm",
1314
+ sm: "text-base",
1315
+ md: "text-lg",
1316
+ lg: "text-xl",
1317
+ xl: "text-2xl",
1318
+ "2xl": "text-3xl",
1319
+ "3xl": "text-4xl"
1340
1320
  };
1341
1321
  var weightStyles = {
1342
- semibold: "font-[number:var(--font-weight-semibold)]",
1343
- bold: "font-[number:var(--font-weight-bold)]"
1322
+ semibold: "font-semibold",
1323
+ bold: "font-bold"
1344
1324
  };
1345
1325
  function Heading2({
1346
1326
  as: Tag = "h2",
@@ -1353,9 +1333,9 @@ function Heading2({
1353
1333
  return /* @__PURE__ */ jsx21(
1354
1334
  Tag,
1355
1335
  {
1356
- className: twMerge2(
1336
+ className: twMerge3(
1357
1337
  weightStyles[weight],
1358
- "text-[var(--color-text-primary)]",
1338
+ "text-(--color-text-primary)",
1359
1339
  sizeStyles3[resolvedSize],
1360
1340
  className
1361
1341
  ),
@@ -1388,12 +1368,12 @@ import {
1388
1368
  import { jsx as jsx22 } from "react/jsx-runtime";
1389
1369
  var variantStyles2 = {
1390
1370
  default: [
1391
- "text-[var(--color-teal-700)] underline",
1392
- "hover:text-[var(--color-teal-800)]"
1371
+ "text-teal-700 underline",
1372
+ "hover:text-teal-800"
1393
1373
  ].join(" "),
1394
1374
  subtle: [
1395
- "text-[var(--color-text-secondary)] no-underline",
1396
- "hover:underline hover:text-[var(--color-text-primary)]"
1375
+ "text-(--color-text-secondary) no-underline",
1376
+ "hover:underline hover:text-(--color-text-primary)"
1397
1377
  ].join(" ")
1398
1378
  };
1399
1379
  function Link({
@@ -1407,7 +1387,7 @@ function Link({
1407
1387
  ...props,
1408
1388
  className: [
1409
1389
  "outline-none transition-colors",
1410
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:rounded-sm",
1390
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 focus-visible:rounded-sm",
1411
1391
  variantStyles2[variant],
1412
1392
  className
1413
1393
  ].filter(Boolean).join(" ")
@@ -1443,19 +1423,19 @@ function Breadcrumbs({ items, className }) {
1443
1423
  "flex items-center gap-1",
1444
1424
  isLast ? "min-w-0" : "shrink-0"
1445
1425
  ].join(" "),
1446
- children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)] truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
1426
+ children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-medium text-(--color-text-primary) truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
1447
1427
  /* @__PURE__ */ jsx23(
1448
1428
  Link2,
1449
1429
  {
1450
1430
  href: item.href,
1451
- className: "whitespace-nowrap text-[var(--color-text-secondary)] outline-none transition-colors hover:text-[var(--color-text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:rounded-sm",
1431
+ className: "whitespace-nowrap text-(--color-text-secondary) outline-none transition-colors hover:text-(--color-text-primary) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 focus-visible:rounded-sm",
1452
1432
  children: item.label
1453
1433
  }
1454
1434
  ),
1455
1435
  /* @__PURE__ */ jsx23(
1456
1436
  ChevronRight,
1457
1437
  {
1458
- className: "shrink-0 text-[var(--color-neutral-400)]",
1438
+ className: "shrink-0 text-neutral-400",
1459
1439
  size: 16,
1460
1440
  "aria-hidden": "true"
1461
1441
  }
@@ -1475,7 +1455,7 @@ function Breadcrumbs({ items, className }) {
1475
1455
  import {
1476
1456
  Link as AriaLink2
1477
1457
  } from "react-aria-components";
1478
- import { twMerge as twMerge3 } from "tailwind-merge";
1458
+ import { twMerge as twMerge4 } from "tailwind-merge";
1479
1459
  import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
1480
1460
  var iconSizeMap3 = {
1481
1461
  sm: "sm",
@@ -1495,13 +1475,13 @@ function ButtonLink({
1495
1475
  AriaLink2,
1496
1476
  {
1497
1477
  ...props,
1498
- className: twMerge3(
1478
+ className: twMerge4(
1499
1479
  "inline-flex items-center justify-center gap-2",
1500
- "rounded-[var(--border-radius-md)]",
1501
- "font-[var(--font-weight-medium)]",
1502
- "leading-[var(--line-height-tight)]",
1480
+ "rounded-md",
1481
+ "font-medium",
1482
+ "leading-tight",
1503
1483
  "outline-none transition-colors no-underline",
1504
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
1484
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
1505
1485
  variantStyles[variant],
1506
1486
  sizeStyles[size],
1507
1487
  className
@@ -1534,11 +1514,11 @@ function IconButtonLink({
1534
1514
  {
1535
1515
  ...props,
1536
1516
  "aria-label": ariaLabel,
1537
- className: twMerge3(
1517
+ className: twMerge4(
1538
1518
  "inline-flex items-center justify-center",
1539
- "rounded-[var(--border-radius-md)]",
1519
+ "rounded-md",
1540
1520
  "outline-none transition-colors no-underline",
1541
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
1521
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
1542
1522
  variantStyles[variant],
1543
1523
  squareSizeStyles2[size],
1544
1524
  className
@@ -1556,7 +1536,7 @@ function IconButtonLink({
1556
1536
  import {
1557
1537
  ToggleButton as AriaToggleButton
1558
1538
  } from "react-aria-components";
1559
- import { twMerge as twMerge4 } from "tailwind-merge";
1539
+ import { twMerge as twMerge5 } from "tailwind-merge";
1560
1540
  import { jsx as jsx25 } from "react/jsx-runtime";
1561
1541
  var sizeStyles4 = {
1562
1542
  sm: "px-3 py-1.5 text-sm",
@@ -1571,30 +1551,30 @@ var squareSizeStyles3 = {
1571
1551
  var variantStyles3 = {
1572
1552
  default: {
1573
1553
  base: [
1574
- "bg-transparent text-[var(--color-text-primary)]",
1575
- "hover:bg-[var(--color-surface-hover)]",
1576
- "pressed:bg-[var(--color-surface-pressed)]"
1554
+ "bg-transparent text-(--color-text-primary)",
1555
+ "hover:bg-(--color-surface-hover)",
1556
+ "pressed:bg-(--color-surface-pressed)"
1577
1557
  ].join(" "),
1578
- selected: "bg-[var(--color-surface-pressed)] text-[var(--color-text-primary)]"
1558
+ selected: "bg-(--color-surface-pressed) text-(--color-text-primary)"
1579
1559
  },
1580
1560
  primary: {
1581
1561
  base: [
1582
- "bg-transparent text-[var(--color-text-primary)]",
1583
- "hover:bg-[var(--color-surface-hover)]",
1584
- "pressed:bg-[var(--color-surface-pressed)]"
1562
+ "bg-transparent text-(--color-text-primary)",
1563
+ "hover:bg-(--color-surface-hover)",
1564
+ "pressed:bg-(--color-surface-pressed)"
1585
1565
  ].join(" "),
1586
- selected: "bg-[var(--color-action-primary-active)] text-[var(--color-text-inverse)]"
1566
+ selected: "bg-(--color-action-primary-active) text-(--color-text-inverse)"
1587
1567
  },
1588
1568
  outlined: {
1589
1569
  base: [
1590
- "bg-[var(--color-surface-default)] text-[var(--color-text-primary)]",
1591
- "border border-[var(--color-border-default)]",
1592
- "hover:bg-[var(--color-surface-subtle)]",
1593
- "pressed:bg-[var(--color-surface-muted)]"
1570
+ "bg-(--color-surface-default) text-(--color-text-primary)",
1571
+ "border border-(--color-border-default)",
1572
+ "hover:bg-(--color-surface-subtle)",
1573
+ "pressed:bg-(--color-surface-muted)"
1594
1574
  ].join(" "),
1595
1575
  selected: [
1596
- "bg-[var(--color-neutral-800)] text-[var(--color-text-inverse)]",
1597
- "border border-[var(--color-neutral-800)]"
1576
+ "bg-neutral-800 text-(--color-text-inverse)",
1577
+ "border border-neutral-800"
1598
1578
  ].join(" ")
1599
1579
  }
1600
1580
  };
@@ -1610,13 +1590,13 @@ function ToggleButton({
1610
1590
  AriaToggleButton,
1611
1591
  {
1612
1592
  ...props,
1613
- className: ({ isSelected }) => twMerge4(
1593
+ className: ({ isSelected }) => twMerge5(
1614
1594
  "inline-flex items-center justify-center gap-2",
1615
- isSquare ? "rounded-none" : "rounded-[var(--border-radius-md)]",
1616
- "font-[var(--font-weight-medium)]",
1617
- "leading-[var(--line-height-tight)]",
1595
+ isSquare ? "rounded-none" : "rounded-md",
1596
+ "font-medium",
1597
+ "leading-tight",
1618
1598
  "outline-none transition-colors",
1619
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
1599
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
1620
1600
  "disabled:opacity-50 disabled:pointer-events-none",
1621
1601
  isSquare ? squareSizeStyles3[size] : sizeStyles4[size],
1622
1602
  isSelected ? styles.selected : styles.base,
@@ -1628,7 +1608,7 @@ function ToggleButton({
1628
1608
 
1629
1609
  // src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
1630
1610
  import { createContext as createContext3, useContext as useContext3 } from "react";
1631
- import { twMerge as twMerge5 } from "tailwind-merge";
1611
+ import { twMerge as twMerge6 } from "tailwind-merge";
1632
1612
  import {
1633
1613
  RadioGroup as AriaRadioGroup2,
1634
1614
  Radio as AriaRadio2
@@ -1658,8 +1638,8 @@ function ToggleButtonGroup({
1658
1638
  {
1659
1639
  ...props,
1660
1640
  orientation: "horizontal",
1661
- className: twMerge5(
1662
- "inline-flex items-center rounded-[var(--border-radius-lg)] border border-[var(--color-border-default)] bg-[var(--color-surface-muted)] p-0.5 gap-0.5",
1641
+ className: twMerge6(
1642
+ "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
1663
1643
  className
1664
1644
  ),
1665
1645
  children
@@ -1677,20 +1657,20 @@ function ToggleButtonGroupItem({
1677
1657
  AriaRadio2,
1678
1658
  {
1679
1659
  ...props,
1680
- className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge5(
1660
+ className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge6(
1681
1661
  // Base layout
1682
1662
  "inline-flex items-center justify-center",
1683
- "rounded-[var(--border-radius-md)]",
1684
- "font-[var(--font-weight-medium)]",
1663
+ "rounded-md",
1664
+ "font-medium",
1685
1665
  "outline-none transition-colors cursor-pointer",
1686
1666
  // Focus ring
1687
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1",
1667
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-1",
1688
1668
  // Disabled
1689
1669
  isDisabled && "opacity-50 pointer-events-none",
1690
1670
  // Size
1691
1671
  isIconOnly ? iconOnlySizeStyles[size] : sizeStyles5[size],
1692
1672
  // Selected state
1693
- isSelected ? "bg-[var(--color-surface-default)] text-[var(--color-text-primary)] shadow-sm font-[var(--font-weight-semibold)]" : isPressed ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : isHovered ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : "bg-transparent text-[var(--color-text-secondary)]",
1673
+ isSelected ? "bg-(--color-surface-default) text-(--color-text-primary) shadow-sm font-semibold" : isPressed ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : isHovered ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : "bg-transparent text-(--color-text-secondary)",
1694
1674
  className
1695
1675
  ),
1696
1676
  children
@@ -1707,8 +1687,8 @@ import {
1707
1687
  } from "react-aria-components";
1708
1688
  import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
1709
1689
  var popoverStyles = [
1710
- "bg-[var(--color-surface-default)] rounded-[var(--border-radius-md)]",
1711
- "shadow-lg border border-[var(--color-border-default)]",
1690
+ "bg-(--color-surface-default) rounded-md",
1691
+ "shadow-lg border border-(--color-border-default)",
1712
1692
  "py-1 min-w-48",
1713
1693
  "entering:animate-in entering:fade-in entering:zoom-in-95",
1714
1694
  "exiting:animate-out exiting:fade-out exiting:zoom-out-95"
@@ -1752,10 +1732,10 @@ function Menu({
1752
1732
  className: [
1753
1733
  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
1754
1734
  "transition-colors",
1755
- "focus:bg-[var(--color-surface-muted)]",
1756
- "hover:bg-[var(--color-surface-muted)]",
1735
+ "focus:bg-(--color-surface-muted)",
1736
+ "hover:bg-(--color-surface-muted)",
1757
1737
  "disabled:opacity-50 disabled:pointer-events-none",
1758
- item.isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]"
1738
+ item.isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)"
1759
1739
  ].filter(Boolean).join(" "),
1760
1740
  children: [
1761
1741
  item.icon && /* @__PURE__ */ jsx27(Icon, { icon: item.icon, size: "sm" }),
@@ -1807,10 +1787,10 @@ function MenuItem({
1807
1787
  className: [
1808
1788
  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
1809
1789
  "transition-colors",
1810
- "focus:bg-[var(--color-surface-muted)]",
1811
- "hover:bg-[var(--color-surface-muted)]",
1790
+ "focus:bg-(--color-surface-muted)",
1791
+ "hover:bg-(--color-surface-muted)",
1812
1792
  "disabled:opacity-50 disabled:pointer-events-none",
1813
- isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]",
1793
+ isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)",
1814
1794
  className
1815
1795
  ].filter(Boolean).join(" "),
1816
1796
  children: [
@@ -1824,7 +1804,7 @@ function MenuItem({
1824
1804
 
1825
1805
  // src/components/Menu/MenuCheckboxItem.tsx
1826
1806
  import { MenuItem as AriaMenuItem3 } from "react-aria-components";
1827
- import { Check as Check2 } from "lucide-react";
1807
+ import { Check as Check3 } from "lucide-react";
1828
1808
  import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
1829
1809
  function MenuCheckboxItem({
1830
1810
  id,
@@ -1842,15 +1822,15 @@ function MenuCheckboxItem({
1842
1822
  className: ({ isSelected }) => [
1843
1823
  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
1844
1824
  "transition-colors",
1845
- "focus:bg-[var(--color-surface-muted)]",
1846
- "hover:bg-[var(--color-surface-muted)]",
1825
+ "focus:bg-(--color-surface-muted)",
1826
+ "hover:bg-(--color-surface-muted)",
1847
1827
  "disabled:opacity-50 disabled:pointer-events-none",
1848
- "text-[var(--color-text-primary)]",
1849
- isSelected ? "font-[number:var(--font-weight-medium)]" : "",
1828
+ "text-(--color-text-primary)",
1829
+ isSelected ? "font-medium" : "",
1850
1830
  className
1851
1831
  ].filter(Boolean).join(" "),
1852
1832
  children: ({ isSelected }) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
1853
- /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check2, { size: 14, className: "text-[var(--color-action-primary)]", "aria-hidden": "true" }) }),
1833
+ /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check3, { size: 14, className: "text-(--color-action-primary)", "aria-hidden": "true" }) }),
1854
1834
  /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
1855
1835
  ] })
1856
1836
  }
@@ -1875,8 +1855,8 @@ function MenuSection({
1875
1855
  {
1876
1856
  className: [
1877
1857
  "px-3 py-1.5",
1878
- "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-semibold)]",
1879
- "text-[var(--color-text-secondary)]",
1858
+ "text-xs font-semibold",
1859
+ "text-(--color-text-secondary)",
1880
1860
  "uppercase tracking-wider",
1881
1861
  "select-none"
1882
1862
  ].join(" "),
@@ -1902,7 +1882,7 @@ function MenuSeparator({ className }) {
1902
1882
  Separator,
1903
1883
  {
1904
1884
  className: [
1905
- "border-t border-[var(--color-border-default)] my-1",
1885
+ "border-t border-(--color-border-default) my-1",
1906
1886
  className
1907
1887
  ].filter(Boolean).join(" ")
1908
1888
  }
@@ -1926,7 +1906,7 @@ function PopoverTrigger({ children, className }) {
1926
1906
  {
1927
1907
  className: [
1928
1908
  "inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer",
1929
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:rounded-[var(--border-radius-sm)]",
1909
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:rounded-sm",
1930
1910
  className
1931
1911
  ].filter(Boolean).join(" "),
1932
1912
  children
@@ -1946,8 +1926,8 @@ function PopoverContent({
1946
1926
  offset: offsetPx,
1947
1927
  className: [
1948
1928
  "z-50",
1949
- "bg-[var(--color-surface-default)] border border-[var(--color-border-default)]",
1950
- "rounded-[var(--border-radius-md)] shadow-lg",
1929
+ "bg-(--color-surface-default) border border-(--color-border-default)",
1930
+ "rounded-md shadow-lg",
1951
1931
  "entering:animate-in entering:fade-in entering:duration-150",
1952
1932
  "exiting:animate-out exiting:fade-out exiting:duration-100",
1953
1933
  "entering:placement-top:slide-in-from-bottom-1",
@@ -1963,7 +1943,7 @@ function PopoverContent({
1963
1943
 
1964
1944
  // src/components/Tabs/Tabs.tsx
1965
1945
  import { createContext as createContext4, useContext as useContext4 } from "react";
1966
- import { twMerge as twMerge6 } from "tailwind-merge";
1946
+ import { twMerge as twMerge7 } from "tailwind-merge";
1967
1947
  import {
1968
1948
  Tabs as AriaTabs,
1969
1949
  TabList as AriaTabList,
@@ -1993,7 +1973,7 @@ function Tabs({
1993
1973
  {
1994
1974
  ...props,
1995
1975
  orientation,
1996
- className: twMerge6(
1976
+ className: twMerge7(
1997
1977
  orientation === "vertical" ? "flex" : "",
1998
1978
  className
1999
1979
  ),
@@ -2006,13 +1986,13 @@ function TabList({
2006
1986
  ...props
2007
1987
  }) {
2008
1988
  const { variant } = useContext4(TabsContext);
2009
- const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-[var(--color-border-default)]" : "inline-flex items-center bg-[var(--color-surface-muted)] rounded-[var(--border-radius-lg)] p-1 gap-1";
2010
- const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-[var(--color-border-default)]" : "flex-col";
1989
+ const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-(--color-border-default)" : "inline-flex items-center bg-(--color-surface-muted) rounded-lg p-1 gap-1";
1990
+ const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-(--color-border-default)" : "flex-col";
2011
1991
  return /* @__PURE__ */ jsx34(
2012
1992
  AriaTabList,
2013
1993
  {
2014
1994
  ...props,
2015
- className: ({ orientation }) => twMerge6(
1995
+ className: ({ orientation }) => twMerge7(
2016
1996
  baseStyles,
2017
1997
  orientation === "vertical" ? verticalStyles : "",
2018
1998
  className
@@ -2028,19 +2008,19 @@ function Tab({ className, ...props }) {
2028
2008
  ...props,
2029
2009
  className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
2030
2010
  if (variant === "unstyled") {
2031
- return twMerge6(
2011
+ return twMerge7(
2032
2012
  "cursor-pointer outline-none",
2033
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
2013
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
2034
2014
  isDisabled ? "opacity-50 pointer-events-none" : "",
2035
2015
  className
2036
2016
  );
2037
2017
  }
2038
- return twMerge6(
2018
+ return twMerge7(
2039
2019
  // Base
2040
2020
  "cursor-pointer outline-none transition-colors",
2041
- "font-[var(--font-weight-medium)]",
2021
+ "font-medium",
2042
2022
  // Focus ring
2043
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
2023
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
2044
2024
  // Disabled
2045
2025
  isDisabled ? "opacity-50 pointer-events-none" : "",
2046
2026
  // Size
@@ -2061,20 +2041,20 @@ function getTabVariantStyles(variant, state) {
2061
2041
  if (variant === "underline") {
2062
2042
  return [
2063
2043
  // Shape
2064
- "relative rounded-t-[var(--border-radius-sm)]",
2044
+ "relative rounded-t-(--border-radius-sm)",
2065
2045
  // Color states
2066
2046
  state.isSelected ? [
2067
- "text-[var(--color-teal-700)] font-[var(--font-weight-semibold)]",
2047
+ "text-teal-700 font-semibold",
2068
2048
  // Bottom indicator via pseudo-element
2069
- "after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-[var(--color-teal-600)]"
2070
- ].join(" ") : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-surface-muted)]" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-surface-subtle)]" : "text-[var(--color-text-secondary)] bg-transparent"
2049
+ "after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-teal-600"
2050
+ ].join(" ") : state.isPressed ? "text-(--color-text-primary) bg-(--color-surface-muted)" : state.isHovered ? "text-(--color-text-primary) bg-(--color-surface-subtle)" : "text-(--color-text-secondary) bg-transparent"
2071
2051
  ];
2072
2052
  }
2073
2053
  return [
2074
2054
  // Shape
2075
- "rounded-[var(--border-radius-md)]",
2055
+ "rounded-md",
2076
2056
  // Color states
2077
- state.isSelected ? "text-[var(--color-text-primary)] font-[var(--font-weight-semibold)] bg-[var(--color-surface-default)] shadow-sm" : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-surface-subtle)] shadow-none" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-surface-pressed)]" : "text-[var(--color-text-secondary)] bg-transparent"
2057
+ state.isSelected ? "text-(--color-text-primary) font-semibold bg-(--color-surface-default) shadow-sm" : state.isPressed ? "text-(--color-text-primary) bg-(--color-surface-subtle) shadow-none" : state.isHovered ? "text-(--color-text-primary) bg-(--color-surface-pressed)" : "text-(--color-text-secondary) bg-transparent"
2078
2058
  ];
2079
2059
  }
2080
2060
  function TabPanel({ className, ...props }) {
@@ -2083,7 +2063,7 @@ function TabPanel({ className, ...props }) {
2083
2063
  AriaTabPanel,
2084
2064
  {
2085
2065
  ...props,
2086
- className: twMerge6(
2066
+ className: twMerge7(
2087
2067
  variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
2088
2068
  className
2089
2069
  )
@@ -2103,7 +2083,7 @@ import {
2103
2083
  import { useCallback as useCallback2, useImperativeHandle, useRef as useRef2, useState as useState2 } from "react";
2104
2084
  import { Tree as ArboristTree } from "react-arborist";
2105
2085
  import { ChevronRight as ChevronRight2, Folder, File } from "lucide-react";
2106
- import { Check as Check3 } from "lucide-react";
2086
+ import { Check as Check4 } from "lucide-react";
2107
2087
  import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
2108
2088
  var rowHeightMap = {
2109
2089
  compact: 32,
@@ -2119,7 +2099,8 @@ function NodeRenderer({
2119
2099
  selectionMode,
2120
2100
  size,
2121
2101
  onHover,
2122
- onHoverEnd
2102
+ onHoverEnd,
2103
+ onToggle
2123
2104
  }) {
2124
2105
  const data = node.data;
2125
2106
  const isCheckbox = selectionMode === "checkbox";
@@ -2135,12 +2116,12 @@ function NodeRenderer({
2135
2116
  className: [
2136
2117
  "relative flex items-center cursor-default select-none",
2137
2118
  isCompact ? "gap-0.5 px-2" : "gap-1 px-3",
2138
- "text-[length:var(--font-size-sm)] text-[var(--color-text-primary)]",
2119
+ "text-sm text-(--color-text-primary)",
2139
2120
  "outline-none",
2140
2121
  // Full-width background via pseudo-element
2141
2122
  "before:absolute before:inset-y-0 before:left-[-100vw] before:right-0 before:-z-10 before:transition-colors",
2142
- isSelected ? "before:bg-[var(--color-surface-selected)] hover:before:bg-[var(--color-surface-selected-hover)] border-l-2 border-l-[var(--color-brand-accent)]" : "hover:before:bg-[var(--color-surface-hover)]",
2143
- node.isFocused ? "outline-2 outline-[var(--color-border-focus)] outline-offset-[-2px]" : ""
2123
+ isSelected ? "before:bg-(--color-surface-selected) hover:before:bg-(--color-surface-selected-hover) border-l-2 border-l-(--color-brand-accent)" : "hover:before:bg-(--color-surface-hover)",
2124
+ node.isFocused ? "outline-2 outline-(--color-border-focus) outline-offset-[-2px]" : ""
2144
2125
  ].filter(Boolean).join(" "),
2145
2126
  role: "treeitem",
2146
2127
  "aria-selected": isCheckbox ? isChecked : node.isSelected,
@@ -2168,15 +2149,16 @@ function NodeRenderer({
2168
2149
  type: "button",
2169
2150
  className: [
2170
2151
  "flex items-center justify-center w-6 h-6 shrink-0",
2171
- "rounded-[var(--border-radius-sm)]",
2172
- "text-[var(--color-text-secondary)]",
2173
- "hover:text-[var(--color-text-primary)]",
2152
+ "rounded-sm",
2153
+ "text-(--color-text-secondary)",
2154
+ "hover:text-(--color-text-primary)",
2174
2155
  "transition-transform",
2175
2156
  node.isInternal ? "visible" : "invisible"
2176
2157
  ].filter(Boolean).join(" "),
2177
2158
  onClick: (e) => {
2178
2159
  e.stopPropagation();
2179
2160
  node.toggle();
2161
+ onToggle?.(node.data);
2180
2162
  },
2181
2163
  tabIndex: -1,
2182
2164
  "aria-label": node.isOpen ? "Collapse" : "Expand",
@@ -2197,16 +2179,16 @@ function NodeRenderer({
2197
2179
  {
2198
2180
  className: [
2199
2181
  "flex items-center justify-center w-5 h-5 shrink-0",
2200
- "rounded-[var(--border-radius-sm)] border transition-colors",
2201
- isChecked ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] hover:border-[var(--color-border-strong)]"
2182
+ "rounded-sm border transition-colors",
2183
+ isChecked ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) hover:border-(--color-border-strong)"
2202
2184
  ].join(" "),
2203
2185
  role: "checkbox",
2204
2186
  "aria-checked": isChecked,
2205
2187
  "aria-label": `Select ${data.name}`,
2206
2188
  children: isChecked && /* @__PURE__ */ jsx35(
2207
- Check3,
2189
+ Check4,
2208
2190
  {
2209
- className: "w-3 h-3 text-[var(--color-text-inverse)]",
2191
+ className: "w-3 h-3 text-(--color-text-inverse)",
2210
2192
  strokeWidth: 3
2211
2193
  }
2212
2194
  )
@@ -2216,7 +2198,7 @@ function NodeRenderer({
2216
2198
  IconComponent,
2217
2199
  {
2218
2200
  size: 16,
2219
- className: "shrink-0 text-[var(--color-text-secondary)]",
2201
+ className: "shrink-0 text-(--color-text-secondary)",
2220
2202
  "aria-hidden": "true"
2221
2203
  }
2222
2204
  ),
@@ -2233,6 +2215,7 @@ function Tree({
2233
2215
  selectedIds,
2234
2216
  onSelectionChange,
2235
2217
  onActivate,
2218
+ onToggle,
2236
2219
  onHover,
2237
2220
  onHoverEnd,
2238
2221
  openByDefault = false,
@@ -2320,7 +2303,8 @@ function Tree({
2320
2303
  selectionMode,
2321
2304
  size,
2322
2305
  onHover,
2323
- onHoverEnd
2306
+ onHoverEnd,
2307
+ onToggle
2324
2308
  }
2325
2309
  )
2326
2310
  }
@@ -2331,7 +2315,7 @@ function Tree({
2331
2315
 
2332
2316
  // src/components/SegmentedControl/SegmentedControl.tsx
2333
2317
  import { createContext as createContext5, useContext as useContext5 } from "react";
2334
- import { twMerge as twMerge7 } from "tailwind-merge";
2318
+ import { twMerge as twMerge8 } from "tailwind-merge";
2335
2319
  import {
2336
2320
  ToggleButtonGroup as AriaToggleButtonGroup,
2337
2321
  ToggleButton as AriaToggleButton2
@@ -2364,8 +2348,8 @@ function SegmentedControl({
2364
2348
  selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
2365
2349
  defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
2366
2350
  onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
2367
- className: twMerge7(
2368
- "inline-flex items-center rounded-[var(--border-radius-lg)] border border-[var(--color-border-default)] bg-[var(--color-surface-muted)] p-0.5 gap-0.5",
2351
+ className: twMerge8(
2352
+ "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
2369
2353
  className
2370
2354
  ),
2371
2355
  children
@@ -2381,20 +2365,20 @@ function SegmentedControlItem({
2381
2365
  AriaToggleButton2,
2382
2366
  {
2383
2367
  ...props,
2384
- className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge7(
2368
+ className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge8(
2385
2369
  // Base layout
2386
2370
  "inline-flex items-center justify-center",
2387
- "rounded-[var(--border-radius-md)]",
2388
- "font-[var(--font-weight-medium)]",
2371
+ "rounded-md",
2372
+ "font-medium",
2389
2373
  "outline-none transition-colors cursor-pointer",
2390
2374
  // Focus ring
2391
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1",
2375
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-1",
2392
2376
  // Disabled
2393
2377
  isDisabled && "opacity-50 pointer-events-none",
2394
2378
  // Size
2395
2379
  sizeStyles7[size],
2396
2380
  // Selected state
2397
- isSelected ? "bg-[var(--color-surface-default)] text-[var(--color-text-primary)] shadow-sm font-[var(--font-weight-semibold)]" : isPressed ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : isHovered ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : "bg-transparent text-[var(--color-text-secondary)]",
2381
+ isSelected ? "bg-(--color-surface-default) text-(--color-text-primary) shadow-sm font-semibold" : isPressed ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : isHovered ? "bg-(--color-surface-subtle) text-(--color-text-primary)" : "bg-transparent text-(--color-text-secondary)",
2398
2382
  className
2399
2383
  )
2400
2384
  }
@@ -2441,7 +2425,7 @@ function FileIcon({
2441
2425
  IconComponent,
2442
2426
  {
2443
2427
  size,
2444
- className: "shrink-0 text-[var(--color-text-secondary)]"
2428
+ className: "shrink-0 text-(--color-text-secondary)"
2445
2429
  }
2446
2430
  );
2447
2431
  }
@@ -2458,11 +2442,11 @@ function FileCard({
2458
2442
  className
2459
2443
  }) {
2460
2444
  const isInteractive = !!href || !!onPress;
2461
- const radius = compact ? "rounded-[var(--border-radius-md)]" : "rounded-[var(--border-radius-lg)]";
2445
+ const radius = compact ? "rounded-md" : "rounded-lg";
2462
2446
  const IconComponent = getFileIcon(type, extension);
2463
2447
  const iconSize = compact ? 24 : 32;
2464
- const iconColor = type === "directory" ? "text-[var(--color-text-tertiary)]" : "text-[var(--color-text-secondary)]";
2465
- const thumbnailClass = compact ? "aspect-square rounded-t-[var(--border-radius-md)]" : "aspect-[4/3] rounded-t-[var(--border-radius-lg)]";
2448
+ const iconColor = type === "directory" ? "text-(--color-text-tertiary)" : "text-(--color-text-secondary)";
2449
+ const thumbnailClass = compact ? "aspect-square rounded-t-(--border-radius-md)" : "aspect-[4/3] rounded-t-(--border-radius-lg)";
2466
2450
  const handleInfoClick = useCallback3(
2467
2451
  (e) => {
2468
2452
  if (isInteractive) {
@@ -2486,7 +2470,7 @@ function FileCard({
2486
2470
  /* @__PURE__ */ jsx37(
2487
2471
  "div",
2488
2472
  {
2489
- className: `shrink-0 overflow-hidden bg-[var(--color-neutral-900)] ${thumbnailClass}`,
2473
+ className: `shrink-0 overflow-hidden bg-neutral-900 ${thumbnailClass}`,
2490
2474
  children: children ? /* @__PURE__ */ jsx37("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx37("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx37(IconComponent, { size: iconSize, className: iconColor }) })
2491
2475
  }
2492
2476
  ),
@@ -2494,14 +2478,14 @@ function FileCard({
2494
2478
  "div",
2495
2479
  {
2496
2480
  className: [
2497
- "flex flex-col border-t border-[var(--color-border-default)]",
2498
- "bg-[var(--color-surface-default)]",
2499
- compact ? "px-2 py-1.5 rounded-b-[var(--border-radius-md)]" : "gap-0.5 px-3 py-2 rounded-b-[var(--border-radius-lg)]"
2481
+ "flex flex-col border-t border-(--color-border-default)",
2482
+ "bg-(--color-surface-default)",
2483
+ compact ? "px-2 py-1.5 rounded-b-(--border-radius-md)" : "gap-0.5 px-3 py-2 rounded-b-(--border-radius-lg)"
2500
2484
  ].join(" "),
2501
- children: compact ? /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-[var(--color-text-primary)] truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
2485
+ children: compact ? /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-(--color-text-primary) truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
2502
2486
  /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
2503
2487
  /* @__PURE__ */ jsx37(FileIcon, { type, extension, size: 16 }),
2504
- /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 text-sm font-medium text-[var(--color-text-primary)] truncate", children: name }),
2488
+ /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 text-sm font-medium text-(--color-text-primary) truncate", children: name }),
2505
2489
  onInfo && /* @__PURE__ */ jsx37(
2506
2490
  "span",
2507
2491
  {
@@ -2526,7 +2510,7 @@ function FileCard({
2526
2510
  }
2527
2511
  )
2528
2512
  ] }),
2529
- size && /* @__PURE__ */ jsx37("span", { className: "text-xs text-[var(--color-text-secondary)] tabular-nums pl-[22px]", children: size })
2513
+ size && /* @__PURE__ */ jsx37("span", { className: "text-xs text-(--color-text-secondary) tabular-nums pl-[22px]", children: size })
2530
2514
  ] })
2531
2515
  }
2532
2516
  )
@@ -2534,11 +2518,11 @@ function FileCard({
2534
2518
  const baseStyles = [
2535
2519
  "group flex flex-col overflow-hidden",
2536
2520
  radius,
2537
- "border border-[var(--color-border-default)]",
2521
+ "border border-(--color-border-default)",
2538
2522
  "shadow-sm",
2539
2523
  "transition-all",
2540
- isInteractive && "hover:border-[var(--color-border-focus)] hover:shadow-md cursor-pointer",
2541
- isInteractive && "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
2524
+ isInteractive && "hover:border-(--color-border-focus) hover:shadow-md cursor-pointer",
2525
+ isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
2542
2526
  className
2543
2527
  ].filter(Boolean).join(" ");
2544
2528
  if (href) {
@@ -2571,196 +2555,59 @@ function FileCard({
2571
2555
 
2572
2556
  // src/components/StorageConnectionCard/StorageConnectionCard.tsx
2573
2557
  import { useCallback as useCallback4 } from "react";
2574
- import { AlertCircle, Database, Info as Info3 } from "lucide-react";
2575
- import { twMerge as twMerge10 } from "tailwind-merge";
2576
-
2577
- // src/components/Pill/Pill.tsx
2578
- import { twMerge as twMerge8 } from "tailwind-merge";
2579
- import { jsx as jsx38 } from "react/jsx-runtime";
2580
- var HASH_PALETTE = [
2581
- "teal",
2582
- // sky
2583
- "amber",
2584
- // amber
2585
- "green",
2586
- // emerald
2587
- "rose",
2588
- // rose
2589
- "purple",
2590
- // violet
2591
- "amber",
2592
- // orange (mapped to amber -- closest warm token)
2593
- "teal",
2594
- // teal
2595
- "rose"
2596
- // fuchsia (mapped to rose -- closest pink token)
2597
- ];
2598
- function pillColorFromName(name) {
2599
- let hash = 0;
2600
- for (let i = 0; i < name.length; i++) {
2601
- hash = name.charCodeAt(i) + ((hash << 5) - hash);
2602
- }
2603
- return HASH_PALETTE[Math.abs(hash) % HASH_PALETTE.length];
2604
- }
2605
- var colorStyles = {
2606
- neutral: "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]",
2607
- purple: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]",
2608
- teal: "bg-[var(--color-badge-teal-bg)] text-[var(--color-badge-teal-text)]",
2609
- rose: "bg-[var(--color-badge-rose-bg)] text-[var(--color-badge-rose-text)]",
2610
- slate: "bg-[var(--color-badge-slate-bg)] text-[var(--color-badge-slate-text)]",
2611
- green: "bg-[var(--color-badge-green-bg)] text-[var(--color-badge-green-text)]",
2612
- amber: "bg-[var(--color-badge-amber-bg)] text-[var(--color-badge-amber-text)]"
2613
- };
2614
- var dotColorStyles = {
2615
- neutral: "bg-[var(--color-badge-neutral-text)]",
2616
- purple: "bg-[var(--color-badge-purple-text)]",
2617
- teal: "bg-[var(--color-badge-teal-text)]",
2618
- rose: "bg-[var(--color-badge-rose-text)]",
2619
- slate: "bg-[var(--color-badge-slate-text)]",
2620
- green: "bg-[var(--color-badge-green-text)]",
2621
- amber: "bg-[var(--color-badge-amber-text)]"
2622
- };
2623
- function resolveColor(color, name) {
2624
- if (color && color !== "auto") return color;
2625
- if (name) return pillColorFromName(name);
2626
- return "neutral";
2627
- }
2628
- function Pill({ children, color, name, className }) {
2629
- const resolved = resolveColor(color, name);
2630
- return /* @__PURE__ */ jsx38(
2631
- "span",
2632
- {
2633
- className: twMerge8(
2634
- "inline-flex items-center rounded-full",
2635
- "px-2 py-0.5",
2636
- "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
2637
- colorStyles[resolved],
2638
- className
2639
- ),
2640
- children
2641
- }
2642
- );
2643
- }
2644
-
2645
- // src/components/Pill/GroupPill.tsx
2558
+ import { AlertCircle, Database } from "lucide-react";
2646
2559
  import { twMerge as twMerge9 } from "tailwind-merge";
2647
- import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
2648
- function GroupPill({
2649
- path,
2650
- visibleCount = 3,
2651
- className
2652
- }) {
2653
- const segments = path.replace(/^\/+|\/+$/g, "").split("/").filter(Boolean);
2654
- if (segments.length === 0) return null;
2655
- const hiddenCount = Math.max(0, segments.length - visibleCount);
2656
- const hiddenSegments = segments.slice(0, hiddenCount);
2657
- const visibleSegments = segments.slice(hiddenCount);
2658
- return /* @__PURE__ */ jsxs24(
2659
- "span",
2660
- {
2661
- className: twMerge9(
2662
- "inline-flex items-center gap-1",
2663
- className
2664
- ),
2665
- "aria-label": `Group: ${segments.join(" / ")}`,
2666
- children: [
2667
- hiddenSegments.map((segment, index) => {
2668
- const color = pillColorFromName(segment);
2669
- return /* @__PURE__ */ jsx39(
2670
- "span",
2671
- {
2672
- className: twMerge9(
2673
- "inline-block size-2 shrink-0 rounded-full",
2674
- dotColorStyles[color]
2675
- ),
2676
- "aria-hidden": "true",
2677
- title: segment
2678
- },
2679
- `dot-${index}-${segment}`
2680
- );
2681
- }),
2682
- visibleSegments.map((segment, index) => /* @__PURE__ */ jsx39(Pill, { name: segment, children: segment }, `pill-${index}-${segment}`))
2683
- ]
2684
- }
2685
- );
2686
- }
2687
-
2688
- // src/components/StorageConnectionCard/StorageConnectionCard.tsx
2689
- import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
2560
+ import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
2690
2561
  var statusDotStyles = {
2691
- connected: "bg-[var(--color-status-success)]",
2692
- error: "border-2 border-[var(--color-status-danger)] bg-transparent",
2693
- loading: "bg-[var(--color-status-warning)] animate-pulse"
2562
+ connected: "bg-(--color-status-success)",
2563
+ error: "border-2 border-(--color-status-danger) bg-transparent",
2564
+ loading: "bg-(--color-status-warning) animate-pulse"
2694
2565
  };
2695
- var providerConfig = {
2696
- aws: { label: "AWS", color: "purple" },
2697
- azure: { label: "Azure", color: "teal" },
2698
- gcp: { label: "GCP", color: "slate" },
2699
- minio: { label: "MinIO", color: "rose" }
2700
- };
2701
- function ProviderBadge({ provider }) {
2702
- const config = providerConfig[provider.toLowerCase()];
2703
- const label = config?.label ?? provider;
2704
- const color = config?.color ?? "neutral";
2705
- return /* @__PURE__ */ jsx40(Pill, { color, children: label });
2706
- }
2707
2566
  function PreviewArea({
2708
2567
  status = "connected",
2709
2568
  errorMessage,
2710
2569
  children
2711
2570
  }) {
2712
2571
  if (status === "loading") {
2713
- return /* @__PURE__ */ jsx40("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx40(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
2572
+ return /* @__PURE__ */ jsx38("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx38(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
2714
2573
  }
2715
2574
  if (status === "error") {
2716
- return /* @__PURE__ */ jsxs25("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-[var(--color-surface-danger)] px-4", children: [
2717
- /* @__PURE__ */ jsx40(
2575
+ return /* @__PURE__ */ jsxs24("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-(--color-surface-danger) px-4", children: [
2576
+ /* @__PURE__ */ jsx38(
2718
2577
  Icon,
2719
2578
  {
2720
2579
  icon: AlertCircle,
2721
2580
  size: "lg",
2722
- className: "text-[var(--color-text-danger)]"
2581
+ className: "text-(--color-text-danger)"
2723
2582
  }
2724
2583
  ),
2725
- errorMessage && /* @__PURE__ */ jsx40("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
2584
+ errorMessage && /* @__PURE__ */ jsx38("p", { className: "text-center text-xs text-(--color-text-danger)", children: errorMessage })
2726
2585
  ] });
2727
2586
  }
2728
2587
  if (children) {
2729
- return /* @__PURE__ */ jsx40("div", { className: "h-full w-full overflow-hidden", children });
2588
+ return /* @__PURE__ */ jsx38("div", { className: "h-full w-full overflow-hidden", children });
2730
2589
  }
2731
- return /* @__PURE__ */ jsx40("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx40(
2590
+ return /* @__PURE__ */ jsx38("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx38(
2732
2591
  Icon,
2733
2592
  {
2734
2593
  icon: Database,
2735
2594
  size: "xl",
2736
- className: "text-[var(--color-text-secondary)]"
2595
+ className: "text-(--color-text-secondary)"
2737
2596
  }
2738
2597
  ) });
2739
2598
  }
2740
2599
  function StorageConnectionCard({
2741
2600
  name,
2742
- provider,
2743
- region,
2744
2601
  status,
2745
2602
  errorMessage,
2746
- imageCount,
2603
+ meta,
2747
2604
  children,
2748
2605
  href,
2749
2606
  onPress,
2750
- onInfo,
2607
+ actions,
2751
2608
  className
2752
2609
  }) {
2753
2610
  const isInteractive = !!href || !!onPress;
2754
- const handleInfoPress = useCallback4(
2755
- (e) => {
2756
- if (isInteractive) {
2757
- e.stopPropagation();
2758
- e.preventDefault();
2759
- }
2760
- onInfo?.();
2761
- },
2762
- [onInfo, isInteractive]
2763
- );
2764
2611
  const handleKeyDown = useCallback4(
2765
2612
  (e) => {
2766
2613
  if (onPress && (e.key === "Enter" || e.key === " ")) {
@@ -2770,69 +2617,57 @@ function StorageConnectionCard({
2770
2617
  },
2771
2618
  [onPress]
2772
2619
  );
2773
- const cardContent = /* @__PURE__ */ jsxs25(Fragment10, { children: [
2774
- /* @__PURE__ */ jsx40("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx40(PreviewArea, { status, errorMessage, children }) }),
2775
- /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-1.5 border-t border-[var(--color-border-default)] bg-[var(--color-surface-default)] px-3 py-2.5 rounded-b-[var(--border-radius-lg)]", children: [
2776
- /* @__PURE__ */ jsxs25("div", { className: "flex items-start gap-2", children: [
2777
- status && /* @__PURE__ */ jsx40(
2620
+ const cardContent = /* @__PURE__ */ jsxs24(Fragment10, { children: [
2621
+ /* @__PURE__ */ jsx38("div", { className: "aspect-[4/3] bg-neutral-900 overflow-hidden rounded-t-(--border-radius-lg)", children: /* @__PURE__ */ jsx38(PreviewArea, { status, errorMessage, children }) }),
2622
+ /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-1.5 border-t border-(--color-border-default) bg-(--color-surface-default) px-3 py-2.5 rounded-b-(--border-radius-lg)", children: [
2623
+ /* @__PURE__ */ jsxs24("div", { className: "flex items-start gap-2", children: [
2624
+ status && /* @__PURE__ */ jsx38(
2778
2625
  "span",
2779
2626
  {
2780
- className: twMerge10(
2627
+ className: twMerge9(
2781
2628
  "mt-1.5 h-2 w-2 shrink-0 rounded-full",
2782
2629
  statusDotStyles[status]
2783
2630
  ),
2784
2631
  "aria-label": `Status: ${status}`
2785
2632
  }
2786
2633
  ),
2787
- /* @__PURE__ */ jsx40("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
2788
- onInfo && /* @__PURE__ */ jsx40(
2634
+ /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-(--color-text-primary)", children: name }),
2635
+ actions && /* @__PURE__ */ jsx38(
2789
2636
  "span",
2790
2637
  {
2791
- onClick: handleInfoPress,
2638
+ onClick: (e) => {
2639
+ if (isInteractive) {
2640
+ e.stopPropagation();
2641
+ e.preventDefault();
2642
+ }
2643
+ },
2792
2644
  onKeyDown: (e) => {
2793
- if (e.key === "Enter" || e.key === " ") {
2794
- handleInfoPress(e);
2645
+ if (isInteractive) {
2646
+ e.stopPropagation();
2795
2647
  }
2796
2648
  },
2797
2649
  role: "presentation",
2798
- children: /* @__PURE__ */ jsx40(
2799
- IconButton,
2800
- {
2801
- icon: Info3,
2802
- "aria-label": "Connection info",
2803
- variant: "ghost",
2804
- size: "sm",
2805
- className: "shrink-0 -mt-1 -mr-1",
2806
- onPress: onInfo
2807
- }
2808
- )
2650
+ className: "shrink-0 -mt-1 -mr-1",
2651
+ children: actions
2809
2652
  }
2810
2653
  )
2811
2654
  ] }),
2812
- (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs25("div", { className: twMerge10("flex items-center gap-2", status && "pl-4"), children: [
2813
- provider && /* @__PURE__ */ jsx40(ProviderBadge, { provider }),
2814
- provider && region && /* @__PURE__ */ jsx40("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
2815
- imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs25("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-secondary)]", children: [
2816
- imageCount,
2817
- " ",
2818
- imageCount === 1 ? "image" : "images"
2819
- ] })
2820
- ] })
2655
+ meta && /* @__PURE__ */ jsx38("div", { className: twMerge9("flex items-center gap-2", status && "pl-4"), children: meta })
2821
2656
  ] })
2822
2657
  ] });
2823
- const baseStyles = twMerge10(
2824
- "flex flex-col overflow-hidden rounded-[var(--border-radius-lg)]",
2825
- "border border-[var(--color-border-default)]",
2658
+ const baseStyles = twMerge9(
2659
+ "flex flex-col overflow-hidden rounded-lg",
2660
+ "border border-(--color-border-default)",
2826
2661
  "shadow-sm transition-all",
2827
- isInteractive && "hover:border-[var(--color-border-focus)] hover:shadow-md cursor-pointer",
2828
- isInteractive && "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
2662
+ isInteractive && "hover:border-(--color-border-focus) hover:shadow-md cursor-pointer",
2663
+ isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
2829
2664
  className
2830
2665
  );
2831
2666
  if (href) {
2832
- return /* @__PURE__ */ jsx40("a", { href, className: twMerge10(baseStyles, "no-underline"), children: cardContent });
2667
+ return /* @__PURE__ */ jsx38("a", { href, className: twMerge9(baseStyles, "no-underline"), children: cardContent });
2833
2668
  }
2834
2669
  if (onPress) {
2835
- return /* @__PURE__ */ jsx40(
2670
+ return /* @__PURE__ */ jsx38(
2836
2671
  "div",
2837
2672
  {
2838
2673
  role: "button",
@@ -2844,20 +2679,20 @@ function StorageConnectionCard({
2844
2679
  }
2845
2680
  );
2846
2681
  }
2847
- return /* @__PURE__ */ jsx40("div", { className: baseStyles, children: cardContent });
2682
+ return /* @__PURE__ */ jsx38("div", { className: baseStyles, children: cardContent });
2848
2683
  }
2849
2684
 
2850
2685
  // src/components/Badge/Badge.tsx
2851
- import { twMerge as twMerge11 } from "tailwind-merge";
2852
- import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
2686
+ import { twMerge as twMerge10 } from "tailwind-merge";
2687
+ import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
2853
2688
  var variantStyles4 = {
2854
- neutral: "bg-[var(--color-badge-neutral-bg)] text-[var(--color-badge-neutral-text)]",
2855
- purple: "bg-[var(--color-badge-purple-bg)] text-[var(--color-badge-purple-text)]",
2856
- teal: "bg-[var(--color-badge-teal-bg)] text-[var(--color-badge-teal-text)]",
2857
- rose: "bg-[var(--color-badge-rose-bg)] text-[var(--color-badge-rose-text)]",
2858
- slate: "bg-[var(--color-badge-slate-bg)] text-[var(--color-badge-slate-text)]",
2859
- green: "bg-[var(--color-badge-green-bg)] text-[var(--color-badge-green-text)]",
2860
- amber: "bg-[var(--color-badge-amber-bg)] text-[var(--color-badge-amber-text)]"
2689
+ neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
2690
+ purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
2691
+ teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text)",
2692
+ rose: "bg-(--color-badge-rose-bg) text-(--color-badge-rose-text)",
2693
+ slate: "bg-(--color-badge-slate-bg) text-(--color-badge-slate-text)",
2694
+ green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text)",
2695
+ amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text)"
2861
2696
  };
2862
2697
  var sizeStyles8 = {
2863
2698
  sm: "px-1.5 py-0.5",
@@ -2874,18 +2709,18 @@ function Badge({
2874
2709
  icon: IconComponent,
2875
2710
  className
2876
2711
  }) {
2877
- return /* @__PURE__ */ jsxs26(
2712
+ return /* @__PURE__ */ jsxs25(
2878
2713
  "span",
2879
2714
  {
2880
- className: twMerge11(
2881
- "inline-flex items-center gap-1 rounded-[var(--border-radius-full)]",
2882
- "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
2715
+ className: twMerge10(
2716
+ "inline-flex items-center gap-1 rounded-full",
2717
+ "text-xs font-medium leading-tight",
2883
2718
  variantStyles4[variant],
2884
2719
  sizeStyles8[size],
2885
2720
  className
2886
2721
  ),
2887
2722
  children: [
2888
- IconComponent && /* @__PURE__ */ jsx41(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
2723
+ IconComponent && /* @__PURE__ */ jsx39(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
2889
2724
  children
2890
2725
  ]
2891
2726
  }
@@ -2894,8 +2729,8 @@ function Badge({
2894
2729
 
2895
2730
  // src/components/Card/Card.tsx
2896
2731
  import { useCallback as useCallback5 } from "react";
2897
- import { twMerge as twMerge12 } from "tailwind-merge";
2898
- import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
2732
+ import { twMerge as twMerge11 } from "tailwind-merge";
2733
+ import { Fragment as Fragment11, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
2899
2734
  var paddingStyles = {
2900
2735
  none: "p-0",
2901
2736
  sm: "p-3",
@@ -2913,10 +2748,10 @@ function Card({
2913
2748
  className
2914
2749
  }) {
2915
2750
  const isInteractive = interactive || !!href || !!onPress;
2916
- const containerClass = twMerge12(
2917
- "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] overflow-hidden shadow-sm",
2918
- isInteractive && "transition-all hover:shadow-md hover:border-[var(--color-border-focus)] cursor-pointer",
2919
- (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
2751
+ const containerClass = twMerge11(
2752
+ "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg overflow-hidden shadow-sm",
2753
+ isInteractive && "transition-all hover:shadow-md hover:border-(--color-border-focus) cursor-pointer",
2754
+ (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
2920
2755
  className
2921
2756
  );
2922
2757
  const handleKeyDown = useCallback5(
@@ -2928,23 +2763,23 @@ function Card({
2928
2763
  },
2929
2764
  [onPress]
2930
2765
  );
2931
- const content = /* @__PURE__ */ jsxs27(Fragment11, { children: [
2932
- header && /* @__PURE__ */ jsx42(
2766
+ const content = /* @__PURE__ */ jsxs26(Fragment11, { children: [
2767
+ header && /* @__PURE__ */ jsx40(
2933
2768
  "div",
2934
2769
  {
2935
- className: twMerge12(
2936
- "border-b border-[var(--color-border-default)]",
2770
+ className: twMerge11(
2771
+ "border-b border-(--color-border-default)",
2937
2772
  paddingStyles[padding]
2938
2773
  ),
2939
2774
  children: header
2940
2775
  }
2941
2776
  ),
2942
- /* @__PURE__ */ jsx42("div", { className: paddingStyles[padding], children }),
2943
- footer && /* @__PURE__ */ jsx42(
2777
+ /* @__PURE__ */ jsx40("div", { className: paddingStyles[padding], children }),
2778
+ footer && /* @__PURE__ */ jsx40(
2944
2779
  "div",
2945
2780
  {
2946
- className: twMerge12(
2947
- "border-t border-[var(--color-border-default)]",
2781
+ className: twMerge11(
2782
+ "border-t border-(--color-border-default)",
2948
2783
  paddingStyles[padding]
2949
2784
  ),
2950
2785
  children: footer
@@ -2952,10 +2787,10 @@ function Card({
2952
2787
  )
2953
2788
  ] });
2954
2789
  if (href) {
2955
- return /* @__PURE__ */ jsx42("a", { href, className: containerClass, children: content });
2790
+ return /* @__PURE__ */ jsx40("a", { href, className: containerClass, children: content });
2956
2791
  }
2957
2792
  if (onPress) {
2958
- return /* @__PURE__ */ jsx42(
2793
+ return /* @__PURE__ */ jsx40(
2959
2794
  "div",
2960
2795
  {
2961
2796
  role: "button",
@@ -2967,13 +2802,13 @@ function Card({
2967
2802
  }
2968
2803
  );
2969
2804
  }
2970
- return /* @__PURE__ */ jsx42("div", { className: containerClass, children: content });
2805
+ return /* @__PURE__ */ jsx40("div", { className: containerClass, children: content });
2971
2806
  }
2972
2807
 
2973
2808
  // src/components/DeltaIndicator/DeltaIndicator.tsx
2974
2809
  import { ArrowUp, ArrowDown, Minus } from "lucide-react";
2975
- import { twMerge as twMerge13 } from "tailwind-merge";
2976
- import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
2810
+ import { twMerge as twMerge12 } from "tailwind-merge";
2811
+ import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
2977
2812
  function getDirection(current, previous) {
2978
2813
  const diff = current - previous;
2979
2814
  if (diff > 0) return "increase";
@@ -2995,14 +2830,14 @@ function formatPercentage(current, previous) {
2995
2830
  return `${sign}${pct.toFixed(1)}%`;
2996
2831
  }
2997
2832
  var directionColors = {
2998
- increase: "text-[var(--color-delta-increase-text)]",
2999
- decrease: "text-[var(--color-delta-decrease-text)]",
3000
- flat: "text-[var(--color-delta-flat-text)]"
2833
+ increase: "text-(--color-delta-increase-text)",
2834
+ decrease: "text-(--color-delta-decrease-text)",
2835
+ flat: "text-(--color-delta-flat-text)"
3001
2836
  };
3002
2837
  var reverseDirectionColors = {
3003
- increase: "text-[var(--color-delta-decrease-text)]",
3004
- decrease: "text-[var(--color-delta-increase-text)]",
3005
- flat: "text-[var(--color-delta-flat-text)]"
2838
+ increase: "text-(--color-delta-decrease-text)",
2839
+ decrease: "text-(--color-delta-increase-text)",
2840
+ flat: "text-(--color-delta-flat-text)"
3006
2841
  };
3007
2842
  var directionIcons = {
3008
2843
  increase: ArrowUp,
@@ -3010,9 +2845,9 @@ var directionIcons = {
3010
2845
  flat: Minus
3011
2846
  };
3012
2847
  var directionBgColors = {
3013
- increase: "bg-[var(--color-delta-increase-bg)]",
3014
- decrease: "bg-[var(--color-delta-decrease-bg)]",
3015
- flat: "bg-[var(--color-delta-flat-bg)]"
2848
+ increase: "bg-(--color-delta-increase-bg)",
2849
+ decrease: "bg-(--color-delta-decrease-bg)",
2850
+ flat: "bg-(--color-delta-flat-bg)"
3016
2851
  };
3017
2852
  function DeltaIndicator({
3018
2853
  current,
@@ -3026,16 +2861,16 @@ function DeltaIndicator({
3026
2861
  className
3027
2862
  }) {
3028
2863
  if (unavailable) {
3029
- return /* @__PURE__ */ jsxs28(
2864
+ return /* @__PURE__ */ jsxs27(
3030
2865
  "span",
3031
2866
  {
3032
- className: twMerge13(
3033
- "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
3034
- "text-[var(--color-text-tertiary)]",
2867
+ className: twMerge12(
2868
+ "inline-flex items-center gap-1 font-medium",
2869
+ "text-(--color-text-tertiary)",
3035
2870
  className
3036
2871
  ),
3037
2872
  children: [
3038
- label && /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
2873
+ label && /* @__PURE__ */ jsx41("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
3039
2874
  unavailableText
3040
2875
  ]
3041
2876
  }
@@ -3065,22 +2900,22 @@ function DeltaIndicator({
3065
2900
  }
3066
2901
  }
3067
2902
  const isPill = mode === "pill";
3068
- return /* @__PURE__ */ jsxs28(
2903
+ return /* @__PURE__ */ jsxs27(
3069
2904
  "span",
3070
2905
  {
3071
- className: twMerge13(
3072
- "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
2906
+ className: twMerge12(
2907
+ "inline-flex items-center gap-1 font-medium",
3073
2908
  colorStyles2,
3074
2909
  isPill && [
3075
- "rounded-[var(--border-radius-full)] px-2 py-0.5",
3076
- "text-[length:var(--font-size-xs)]",
2910
+ "rounded-full px-2 py-0.5",
2911
+ "text-xs",
3077
2912
  directionBgColors[direction]
3078
2913
  ],
3079
2914
  className
3080
2915
  ),
3081
2916
  children: [
3082
- label && /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
3083
- /* @__PURE__ */ jsx43(IconComponent, { size: 14, "aria-hidden": true }),
2917
+ label && /* @__PURE__ */ jsx41("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
2918
+ /* @__PURE__ */ jsx41(IconComponent, { size: 14, "aria-hidden": true }),
3084
2919
  valueText
3085
2920
  ]
3086
2921
  }
@@ -3088,14 +2923,14 @@ function DeltaIndicator({
3088
2923
  }
3089
2924
 
3090
2925
  // src/components/ProgressBar/ProgressBar.tsx
3091
- import { twMerge as twMerge14 } from "tailwind-merge";
3092
- import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
2926
+ import { twMerge as twMerge13 } from "tailwind-merge";
2927
+ import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
3093
2928
  var fillStyles = {
3094
- brand: "bg-[var(--color-progress-fill)]",
3095
- success: "bg-[var(--color-progress-fill-success)]",
3096
- warning: "bg-[var(--color-progress-fill-warning)]",
3097
- danger: "bg-[var(--color-progress-fill-danger)]",
3098
- neutral: "bg-[var(--color-text-secondary)]"
2929
+ brand: "bg-(--color-progress-fill)",
2930
+ success: "bg-(--color-progress-fill-success)",
2931
+ warning: "bg-(--color-progress-fill-warning)",
2932
+ danger: "bg-(--color-progress-fill-danger)",
2933
+ neutral: "bg-(--color-text-secondary)"
3099
2934
  };
3100
2935
  var sizeStyles9 = {
3101
2936
  sm: "h-1.5",
@@ -3112,12 +2947,12 @@ function ProgressBar({
3112
2947
  className
3113
2948
  }) {
3114
2949
  const clampedValue = Math.min(100, Math.max(0, value));
3115
- return /* @__PURE__ */ jsxs29("div", { className: twMerge14("w-full", className), children: [
3116
- (label || description || showValue) && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between mb-2", children: [
3117
- /* @__PURE__ */ jsx44("span", { className: "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]", children: label }),
3118
- /* @__PURE__ */ jsx44("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description ?? (showValue ? `${clampedValue}%` : null) })
2950
+ return /* @__PURE__ */ jsxs28("div", { className: twMerge13("w-full", className), children: [
2951
+ (label || description || showValue) && /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between mb-2", children: [
2952
+ /* @__PURE__ */ jsx42("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
2953
+ /* @__PURE__ */ jsx42("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
3119
2954
  ] }),
3120
- /* @__PURE__ */ jsx44(
2955
+ /* @__PURE__ */ jsx42(
3121
2956
  "div",
3122
2957
  {
3123
2958
  role: "progressbar",
@@ -3125,15 +2960,15 @@ function ProgressBar({
3125
2960
  "aria-valuemin": 0,
3126
2961
  "aria-valuemax": 100,
3127
2962
  "aria-label": label ?? "Progress",
3128
- className: twMerge14(
3129
- "w-full rounded-[var(--border-radius-full)] bg-[var(--color-progress-track)]",
2963
+ className: twMerge13(
2964
+ "w-full rounded-full bg-(--color-progress-track)",
3130
2965
  sizeStyles9[size]
3131
2966
  ),
3132
- children: /* @__PURE__ */ jsx44(
2967
+ children: /* @__PURE__ */ jsx42(
3133
2968
  "div",
3134
2969
  {
3135
- className: twMerge14(
3136
- "h-full rounded-[var(--border-radius-full)] transition-all duration-300",
2970
+ className: twMerge13(
2971
+ "h-full rounded-full transition-all duration-300",
3137
2972
  fillStyles[variant]
3138
2973
  ),
3139
2974
  style: { width: `${clampedValue}%` }
@@ -3147,37 +2982,37 @@ function ProgressBar({
3147
2982
  // src/components/Banner/Banner.tsx
3148
2983
  import { useState as useState3 } from "react";
3149
2984
  import {
3150
- Info as Info4,
2985
+ Info as Info3,
3151
2986
  AlertTriangle,
3152
2987
  AlertCircle as AlertCircle2,
3153
2988
  CheckCircle2,
3154
2989
  X as X3
3155
2990
  } from "lucide-react";
3156
- import { twMerge as twMerge15 } from "tailwind-merge";
3157
- import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
2991
+ import { twMerge as twMerge14 } from "tailwind-merge";
2992
+ import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
3158
2993
  var variantConfig2 = {
3159
2994
  info: {
3160
- icon: Info4,
3161
- containerClass: "bg-[var(--color-banner-info-bg)] border-[var(--color-banner-info-border)] text-[var(--color-banner-info-text)]",
3162
- iconClass: "text-[var(--color-banner-info-icon)]",
2995
+ icon: Info3,
2996
+ containerClass: "bg-(--color-banner-info-bg) border-(--color-banner-info-border) text-(--color-banner-info-text)",
2997
+ iconClass: "text-(--color-banner-info-icon)",
3163
2998
  role: "status"
3164
2999
  },
3165
3000
  warning: {
3166
3001
  icon: AlertTriangle,
3167
- containerClass: "bg-[var(--color-banner-warning-bg)] border-[var(--color-banner-warning-border)] text-[var(--color-banner-warning-text)]",
3168
- iconClass: "text-[var(--color-banner-warning-icon)]",
3002
+ containerClass: "bg-(--color-banner-warning-bg) border-(--color-banner-warning-border) text-(--color-banner-warning-text)",
3003
+ iconClass: "text-(--color-banner-warning-icon)",
3169
3004
  role: "alert"
3170
3005
  },
3171
3006
  danger: {
3172
3007
  icon: AlertCircle2,
3173
- containerClass: "bg-[var(--color-banner-danger-bg)] border-[var(--color-banner-danger-border)] text-[var(--color-banner-danger-text)]",
3174
- iconClass: "text-[var(--color-banner-danger-icon)]",
3008
+ containerClass: "bg-(--color-banner-danger-bg) border-(--color-banner-danger-border) text-(--color-banner-danger-text)",
3009
+ iconClass: "text-(--color-banner-danger-icon)",
3175
3010
  role: "alert"
3176
3011
  },
3177
3012
  success: {
3178
3013
  icon: CheckCircle2,
3179
- containerClass: "bg-[var(--color-banner-success-bg)] border-[var(--color-banner-success-border)] text-[var(--color-banner-success-text)]",
3180
- iconClass: "text-[var(--color-banner-success-icon)]",
3014
+ containerClass: "bg-(--color-banner-success-bg) border-(--color-banner-success-border) text-(--color-banner-success-text)",
3015
+ iconClass: "text-(--color-banner-success-icon)",
3181
3016
  role: "status"
3182
3017
  }
3183
3018
  };
@@ -3198,40 +3033,40 @@ function Banner({
3198
3033
  setDismissed(true);
3199
3034
  onDismiss?.();
3200
3035
  };
3201
- return /* @__PURE__ */ jsxs30(
3036
+ return /* @__PURE__ */ jsxs29(
3202
3037
  "div",
3203
3038
  {
3204
3039
  role: config.role,
3205
- className: twMerge15(
3206
- "flex items-start gap-[var(--spacing-3)] rounded-[var(--border-radius-lg)] border px-[var(--spacing-4)] py-[var(--spacing-3)]",
3207
- "text-[length:var(--font-size-sm)]",
3040
+ className: twMerge14(
3041
+ "flex items-start gap-3 rounded-lg border px-4 py-3",
3042
+ "text-sm",
3208
3043
  config.containerClass,
3209
3044
  className
3210
3045
  ),
3211
3046
  children: [
3212
- /* @__PURE__ */ jsx45(
3047
+ /* @__PURE__ */ jsx43(
3213
3048
  IconComponent,
3214
3049
  {
3215
3050
  size: 20,
3216
- className: twMerge15("shrink-0 mt-0.5", config.iconClass),
3051
+ className: twMerge14("shrink-0 mt-0.5", config.iconClass),
3217
3052
  "aria-hidden": "true"
3218
3053
  }
3219
3054
  ),
3220
- /* @__PURE__ */ jsxs30("div", { className: "flex-1", children: [
3221
- title && /* @__PURE__ */ jsxs30("span", { className: "font-[number:var(--font-weight-medium)]", children: [
3055
+ /* @__PURE__ */ jsxs29("div", { className: "flex-1", children: [
3056
+ title && /* @__PURE__ */ jsxs29("span", { className: "font-medium", children: [
3222
3057
  title,
3223
3058
  " \u2014 "
3224
3059
  ] }),
3225
3060
  children
3226
3061
  ] }),
3227
- dismissible && /* @__PURE__ */ jsx45(
3062
+ dismissible && /* @__PURE__ */ jsx43(
3228
3063
  "button",
3229
3064
  {
3230
3065
  type: "button",
3231
3066
  onClick: handleDismiss,
3232
- className: "shrink-0 rounded-[var(--border-radius-sm)] p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
3067
+ className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
3233
3068
  "aria-label": "Dismiss",
3234
- children: /* @__PURE__ */ jsx45(X3, { size: 16, "aria-hidden": "true" })
3069
+ children: /* @__PURE__ */ jsx43(X3, { size: 16, "aria-hidden": "true" })
3235
3070
  }
3236
3071
  )
3237
3072
  ]
@@ -3240,18 +3075,18 @@ function Banner({
3240
3075
  }
3241
3076
 
3242
3077
  // src/components/MetricCard/MetricCard.tsx
3243
- import { twMerge as twMerge16 } from "tailwind-merge";
3244
- import { Fragment as Fragment12, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
3078
+ import { twMerge as twMerge15 } from "tailwind-merge";
3079
+ import { Fragment as Fragment12, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
3245
3080
  var sizeConfig = {
3246
3081
  sm: {
3247
3082
  padding: "p-3",
3248
- labelClass: "text-[length:var(--font-size-xs)]",
3249
- valueClass: "text-[length:var(--font-size-xl)]"
3083
+ labelClass: "text-xs",
3084
+ valueClass: "text-xl"
3250
3085
  },
3251
3086
  md: {
3252
3087
  padding: "p-4",
3253
- labelClass: "text-[length:var(--font-size-sm)]",
3254
- valueClass: "text-[length:var(--font-size-2xl)]"
3088
+ labelClass: "text-sm",
3089
+ valueClass: "text-2xl"
3255
3090
  }
3256
3091
  };
3257
3092
  function MetricCard({
@@ -3263,55 +3098,135 @@ function MetricCard({
3263
3098
  className
3264
3099
  }) {
3265
3100
  const config = sizeConfig[size];
3266
- const containerClass = twMerge16(
3267
- "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] shadow-sm",
3101
+ const containerClass = twMerge15(
3102
+ "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg shadow-sm",
3268
3103
  config.padding,
3269
- href && "block transition-shadow hover:shadow-md hover:border-[var(--color-border-focus)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 outline-none",
3104
+ href && "block transition-shadow hover:shadow-md hover:border-(--color-border-focus) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
3270
3105
  className
3271
3106
  );
3272
- const content = /* @__PURE__ */ jsxs31(Fragment12, { children: [
3273
- /* @__PURE__ */ jsx46("div", { className: twMerge16(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
3274
- /* @__PURE__ */ jsx46(
3107
+ const content = /* @__PURE__ */ jsxs30(Fragment12, { children: [
3108
+ /* @__PURE__ */ jsx44("div", { className: twMerge15(config.labelClass, "text-(--color-text-secondary)"), children: label }),
3109
+ /* @__PURE__ */ jsx44(
3275
3110
  "div",
3276
3111
  {
3277
- className: twMerge16(
3112
+ className: twMerge15(
3278
3113
  config.valueClass,
3279
- "font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-1 tabular-nums"
3114
+ "font-semibold text-(--color-text-primary) mt-1 tabular-nums"
3280
3115
  ),
3281
3116
  children: value
3282
3117
  }
3283
3118
  ),
3284
- secondary && /* @__PURE__ */ jsx46("div", { className: "mt-1 text-sm", children: secondary })
3119
+ secondary && /* @__PURE__ */ jsx44("div", { className: "mt-1 text-sm", children: secondary })
3285
3120
  ] });
3286
3121
  if (href) {
3287
- return /* @__PURE__ */ jsx46("a", { href, className: containerClass, children: content });
3122
+ return /* @__PURE__ */ jsx44("a", { href, className: containerClass, children: content });
3288
3123
  }
3289
- return /* @__PURE__ */ jsx46("div", { className: containerClass, children: content });
3124
+ return /* @__PURE__ */ jsx44("div", { className: containerClass, children: content });
3290
3125
  }
3291
3126
 
3292
3127
  // src/components/SectionHeader/SectionHeader.tsx
3293
- import { twMerge as twMerge17 } from "tailwind-merge";
3294
- import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
3128
+ import { twMerge as twMerge16 } from "tailwind-merge";
3129
+ import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
3295
3130
  function SectionHeader({
3296
3131
  title,
3297
3132
  children,
3298
3133
  className
3299
3134
  }) {
3300
- return /* @__PURE__ */ jsxs32(
3135
+ return /* @__PURE__ */ jsxs31(
3301
3136
  "div",
3302
3137
  {
3303
- className: twMerge17(
3304
- "flex flex-wrap items-center gap-[var(--spacing-3)] py-[var(--spacing-4)]",
3138
+ className: twMerge16(
3139
+ "flex flex-wrap items-center gap-3 py-4",
3305
3140
  className
3306
3141
  ),
3307
3142
  children: [
3308
- /* @__PURE__ */ jsx47(H2, { children: title }),
3309
- children && /* @__PURE__ */ jsx47("div", { className: "ml-auto flex flex-wrap items-center gap-[var(--spacing-2)]", children })
3143
+ /* @__PURE__ */ jsx45(H2, { children: title }),
3144
+ children && /* @__PURE__ */ jsx45("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
3310
3145
  ]
3311
3146
  }
3312
3147
  );
3313
3148
  }
3314
3149
 
3150
+ // src/components/Pill/Pill.tsx
3151
+ import { twMerge as twMerge17 } from "tailwind-merge";
3152
+ import { jsx as jsx46 } from "react/jsx-runtime";
3153
+ var hashColors = {
3154
+ purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text) border-(--color-badge-purple-text)/20",
3155
+ teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text) border-(--color-badge-teal-text)/20",
3156
+ rose: "bg-(--color-badge-rose-bg) text-(--color-badge-rose-text) border-(--color-badge-rose-text)/20",
3157
+ green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text) border-(--color-badge-green-text)/20",
3158
+ amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text) border-(--color-badge-amber-text)/20"
3159
+ };
3160
+ var colorStyles = {
3161
+ ...hashColors,
3162
+ slate: "bg-(--color-badge-slate-bg) text-(--color-badge-slate-text) border-(--color-badge-slate-text)/20"
3163
+ };
3164
+ var hashKeys = Object.keys(hashColors);
3165
+ function pillColorFromName(name = "") {
3166
+ let hash = 0;
3167
+ for (let i = 0; i < name.length; i++) {
3168
+ hash = name.charCodeAt(i) + ((hash << 5) - hash);
3169
+ }
3170
+ return hashKeys[Math.abs(hash) % hashKeys.length];
3171
+ }
3172
+ function Pill({
3173
+ children,
3174
+ color = pillColorFromName(children),
3175
+ className,
3176
+ ...rest
3177
+ }) {
3178
+ const cx = twMerge17(
3179
+ `
3180
+ inline-flex items-center
3181
+ rounded-full
3182
+ border
3183
+ px-2 py-0.5
3184
+ text-xs font-medium
3185
+ leading-tight
3186
+ `,
3187
+ colorStyles[color],
3188
+ className
3189
+ );
3190
+ return /* @__PURE__ */ jsx46("span", { className: cx, ...rest, children });
3191
+ }
3192
+
3193
+ // src/components/Pill/PathPill.tsx
3194
+ import { twMerge as twMerge18 } from "tailwind-merge";
3195
+ import { jsx as jsx47 } from "react/jsx-runtime";
3196
+ function PathPill({
3197
+ children,
3198
+ visibleCount = 1,
3199
+ className
3200
+ }) {
3201
+ const segments = children.split("/").filter(Boolean);
3202
+ if (segments.length === 0) return null;
3203
+ const dotCount = Math.max(0, segments.length - visibleCount);
3204
+ const fullPath = segments.join(" / ");
3205
+ return /* @__PURE__ */ jsx47(
3206
+ "div",
3207
+ {
3208
+ className: twMerge18("relative flex", className),
3209
+ "aria-label": `Path: ${fullPath}`,
3210
+ children: segments.map((segment, i) => {
3211
+ const isCollapsed = i < dotCount;
3212
+ const isLast = i === segments.length - 1;
3213
+ const cx = twMerge18(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
3214
+ const color = pillColorFromName(segment);
3215
+ return /* @__PURE__ */ jsx47(
3216
+ Pill,
3217
+ {
3218
+ className: cx,
3219
+ color,
3220
+ "aria-hidden": isCollapsed || void 0,
3221
+ children: isCollapsed ? void 0 : segment
3222
+ },
3223
+ `pill-${i}-${segment}`
3224
+ );
3225
+ })
3226
+ }
3227
+ );
3228
+ }
3229
+
3315
3230
  // src/components/FormWizard/FormWizard.tsx
3316
3231
  import { createContext as createContext6, useContext as useContext6, useCallback as useCallback6, useMemo } from "react";
3317
3232
  import { jsx as jsx48 } from "react/jsx-runtime";
@@ -3353,13 +3268,13 @@ function FormWizard({
3353
3268
  }
3354
3269
 
3355
3270
  // src/components/FormWizard/FormWizardProgress.tsx
3356
- import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
3357
- function CheckIcon2() {
3271
+ import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
3272
+ function CheckIcon() {
3358
3273
  return /* @__PURE__ */ jsx49(
3359
3274
  "svg",
3360
3275
  {
3361
3276
  "aria-hidden": "true",
3362
- className: "h-4 w-4 text-[var(--color-text-inverse)]",
3277
+ className: "h-4 w-4 text-(--color-text-inverse)",
3363
3278
  viewBox: "0 0 16 16",
3364
3279
  fill: "none",
3365
3280
  stroke: "currentColor",
@@ -3376,20 +3291,20 @@ function FormWizardProgress({ labels }) {
3376
3291
  const isCompleted = index < currentStep;
3377
3292
  const isCurrent = index === currentStep;
3378
3293
  const isFuture = index > currentStep;
3379
- return /* @__PURE__ */ jsxs33(
3294
+ return /* @__PURE__ */ jsxs32(
3380
3295
  "li",
3381
3296
  {
3382
3297
  className: "flex flex-1 flex-col items-center",
3383
3298
  "aria-current": isCurrent ? "step" : void 0,
3384
3299
  children: [
3385
- /* @__PURE__ */ jsxs33("div", { className: "flex w-full items-center", children: [
3300
+ /* @__PURE__ */ jsxs32("div", { className: "flex w-full items-center", children: [
3386
3301
  index > 0 ? /* @__PURE__ */ jsx49(
3387
3302
  "div",
3388
3303
  {
3389
3304
  "aria-hidden": "true",
3390
3305
  className: [
3391
3306
  "h-0.5 flex-1",
3392
- index <= currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
3307
+ index <= currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
3393
3308
  ].join(" ")
3394
3309
  }
3395
3310
  ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" }),
@@ -3398,14 +3313,14 @@ function FormWizardProgress({ labels }) {
3398
3313
  {
3399
3314
  className: [
3400
3315
  "flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
3401
- "text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]",
3316
+ "text-sm font-medium",
3402
3317
  "transition-colors",
3403
- isCompleted ? "bg-[var(--color-brand-primary)] text-[var(--color-text-inverse)]" : "",
3404
- isCurrent ? "border-2 border-[var(--color-brand-primary)] bg-[var(--color-surface-default)] text-[var(--color-brand-primary)]" : "",
3405
- isFuture ? "border-2 border-[var(--color-border-default)] bg-[var(--color-surface-default)] text-[var(--color-text-tertiary)]" : ""
3318
+ isCompleted ? "bg-(--color-brand-primary) text-(--color-text-inverse)" : "",
3319
+ isCurrent ? "border-2 border-(--color-brand-primary) bg-(--color-surface-default) text-(--color-brand-primary)" : "",
3320
+ isFuture ? "border-2 border-(--color-border-default) bg-(--color-surface-default) text-(--color-text-tertiary)" : ""
3406
3321
  ].join(" "),
3407
3322
  "aria-hidden": "true",
3408
- children: isCompleted ? /* @__PURE__ */ jsx49(CheckIcon2, {}) : index + 1
3323
+ children: isCompleted ? /* @__PURE__ */ jsx49(CheckIcon, {}) : index + 1
3409
3324
  }
3410
3325
  ),
3411
3326
  index < totalSteps - 1 ? /* @__PURE__ */ jsx49(
@@ -3414,7 +3329,7 @@ function FormWizardProgress({ labels }) {
3414
3329
  "aria-hidden": "true",
3415
3330
  className: [
3416
3331
  "h-0.5 flex-1",
3417
- index < currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
3332
+ index < currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
3418
3333
  ].join(" ")
3419
3334
  }
3420
3335
  ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" })
@@ -3423,8 +3338,8 @@ function FormWizardProgress({ labels }) {
3423
3338
  "span",
3424
3339
  {
3425
3340
  className: [
3426
- "mt-[var(--spacing-2)] text-center text-[length:var(--font-size-sm)]",
3427
- isCurrent ? "font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)]" : "font-[number:var(--font-weight-regular)] text-[var(--color-text-secondary)]"
3341
+ "mt-2 text-center text-sm",
3342
+ isCurrent ? "font-semibold text-(--color-text-primary)" : "font-normal text-(--color-text-secondary)"
3428
3343
  ].join(" "),
3429
3344
  children: label
3430
3345
  }
@@ -3437,14 +3352,14 @@ function FormWizardProgress({ labels }) {
3437
3352
  }
3438
3353
 
3439
3354
  // src/components/FormWizard/FormWizardNav.tsx
3440
- import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
3355
+ import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
3441
3356
  function FormWizardNav({
3442
3357
  onNext,
3443
3358
  isSubmitting = false,
3444
3359
  submitLabel = "Submit"
3445
3360
  }) {
3446
3361
  const { canGoBack, goBack, isLastStep } = useFormWizard();
3447
- return /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-end gap-[var(--spacing-3)]", children: [
3362
+ return /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-end gap-3", children: [
3448
3363
  canGoBack && /* @__PURE__ */ jsx50(
3449
3364
  Button,
3450
3365
  {
@@ -3628,7 +3543,7 @@ var ColorBannerSuccessIcon = "#22c55e";
3628
3543
  var ColorBadgePurpleBg = "#ead9f5";
3629
3544
  var ColorBadgePurpleText = "#5c2483";
3630
3545
  var ColorBadgeTealBg = "#d0f0f0";
3631
- var ColorBadgeTealText = "#217d7e";
3546
+ var ColorBadgeTealText = "#1a6364";
3632
3547
  var ColorBadgeSlateBg = "#f1f5f9";
3633
3548
  var ColorBadgeSlateText = "#334155";
3634
3549
  var ColorBadgeRoseBg = "#ffe4e6";
@@ -3638,7 +3553,7 @@ var ColorBadgeNeutralText = "#374151";
3638
3553
  var ColorBadgeGreenBg = "#dcfce7";
3639
3554
  var ColorBadgeGreenText = "#15803d";
3640
3555
  var ColorBadgeAmberBg = "#fef3c7";
3641
- var ColorBadgeAmberText = "#b45309";
3556
+ var ColorBadgeAmberText = "#92400e";
3642
3557
  var Spacing1 = "4px";
3643
3558
  var Spacing2 = "8px";
3644
3559
  var Spacing3 = "12px";
@@ -3882,7 +3797,6 @@ export {
3882
3797
  FormWizard,
3883
3798
  FormWizardNav,
3884
3799
  FormWizardProgress,
3885
- GroupPill,
3886
3800
  H1,
3887
3801
  H2,
3888
3802
  H3,
@@ -3906,6 +3820,7 @@ export {
3906
3820
  MenuSection,
3907
3821
  MenuSeparator,
3908
3822
  MetricCard,
3823
+ PathPill,
3909
3824
  Pill,
3910
3825
  Popover3 as Popover,
3911
3826
  PopoverContent,