@cytario/design 2.2.0 → 2.3.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 (5) hide show
  1. package/dist/index.d.ts +2 -1
  2. package/dist/index.js +371 -367
  3. package/dist/index.js.map +1 -1
  4. package/package.json +3 -3
  5. package/src/styles/tailwind.css +6 -0
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 = {
@@ -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
  {
@@ -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
  )
@@ -517,7 +517,7 @@ function ChevronDown() {
517
517
  "svg",
518
518
  {
519
519
  "aria-hidden": "true",
520
- className: "h-4 w-4 text-[var(--color-text-secondary)]",
520
+ className: "h-4 w-4 text-(--color-text-secondary)",
521
521
  viewBox: "0 0 16 16",
522
522
  fill: "none",
523
523
  stroke: "currentColor",
@@ -533,7 +533,7 @@ function CheckIcon() {
533
533
  "svg",
534
534
  {
535
535
  "aria-hidden": "true",
536
- className: "h-4 w-4 text-[var(--color-action-primary)]",
536
+ className: "h-4 w-4 text-(--color-action-primary)",
537
537
  viewBox: "0 0 16 16",
538
538
  fill: "none",
539
539
  stroke: "currentColor",
@@ -563,13 +563,13 @@ function Select({
563
563
  isDisabled,
564
564
  isRequired,
565
565
  isInvalid: hasError,
566
- className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
566
+ className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
567
567
  children: [
568
568
  /* @__PURE__ */ jsxs5(
569
569
  Label2,
570
570
  {
571
571
  className: [
572
- "text-[length:var(--font-size-sm)] font-[var(--font-weight-medium)] text-[var(--color-text-primary)]",
572
+ "text-sm font-medium text-(--color-text-primary)",
573
573
  hideLabel && "sr-only"
574
574
  ].filter(Boolean).join(" "),
575
575
  children: [
@@ -578,7 +578,7 @@ function Select({
578
578
  "span",
579
579
  {
580
580
  "aria-hidden": "true",
581
- className: "ml-0.5 text-[var(--color-text-danger)]",
581
+ className: "ml-0.5 text-(--color-text-danger)",
582
582
  children: "*"
583
583
  }
584
584
  )
@@ -590,29 +590,29 @@ function Select({
590
590
  {
591
591
  className: [
592
592
  "inline-flex items-center justify-between",
593
- "w-full rounded-[var(--border-radius-md)] px-4 py-2",
593
+ "w-full rounded-md px-4 py-2",
594
594
  "text-base text-left",
595
595
  "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",
596
+ hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)",
597
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
598
598
  "disabled:opacity-50 disabled:pointer-events-none",
599
- "bg-[var(--color-surface-default)]"
599
+ "bg-(--color-surface-default)"
600
600
  ].join(" "),
601
601
  children: [
602
- /* @__PURE__ */ jsx7(SelectValue, { className: "truncate data-[placeholder]:text-[var(--color-text-tertiary)]", children: ({ selectedText }) => selectedText || placeholder }),
602
+ /* @__PURE__ */ jsx7(SelectValue, { className: "truncate data-[placeholder]:text-(--color-text-tertiary)", children: ({ selectedText }) => selectedText || placeholder }),
603
603
  /* @__PURE__ */ jsx7(ChevronDown, {})
604
604
  ]
605
605
  }
606
606
  ),
607
- hasError && /* @__PURE__ */ jsx7("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage }),
607
+ hasError && /* @__PURE__ */ jsx7("span", { className: "text-sm text-(--color-text-danger)", children: errorMessage }),
608
608
  /* @__PURE__ */ jsx7(
609
609
  Popover,
610
610
  {
611
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)]",
612
+ "w-(--trigger-width)",
613
+ "rounded-md",
614
+ "border border-(--color-border-default)",
615
+ "bg-(--color-surface-default)",
616
616
  "shadow-lg",
617
617
  "overflow-auto",
618
618
  "entering:animate-in entering:fade-in entering:slide-in-from-top-1",
@@ -625,12 +625,12 @@ function Select({
625
625
  textValue: item.name,
626
626
  className: [
627
627
  "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)]",
628
+ "px-4 py-2 rounded-sm",
629
+ "text-base text-(--color-text-primary)",
630
630
  "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)]"
631
+ "hover:bg-(--color-surface-muted)",
632
+ "focus:bg-(--color-surface-muted)",
633
+ "selected:text-(--color-action-primary) selected:font-medium"
634
634
  ].join(" "),
635
635
  children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
636
636
  /* @__PURE__ */ jsx7("span", { className: "truncate", children: item.name }),
@@ -665,7 +665,7 @@ function Table({ size = "comfortable", className, ...props }) {
665
665
  {
666
666
  ...props,
667
667
  className: [
668
- "w-full border-collapse text-[var(--font-size-sm)] text-[var(--color-text-primary)]",
668
+ "w-full border-collapse text-(--font-size-sm) text-(--color-text-primary)",
669
669
  tableSizeClass[size],
670
670
  className
671
671
  ].filter(Boolean).join(" ")
@@ -681,14 +681,14 @@ function Column(props) {
681
681
  {
682
682
  ...props,
683
683
  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)]",
684
+ "px-3 py-2 text-left font-semibold text-(--color-text-secondary)",
685
+ "border-b-2 border-(--color-border-default)",
686
686
  "cursor-default select-none outline-none",
687
- "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
687
+ "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
688
688
  ].join(" "),
689
689
  children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs6("span", { className: "inline-flex items-center gap-1", children: [
690
690
  props.children,
691
- allowsSorting && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-[var(--color-text-tertiary)]", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
691
+ allowsSorting && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-(--color-text-tertiary)", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
692
692
  ] })
693
693
  }
694
694
  );
@@ -702,11 +702,11 @@ function Row(props) {
702
702
  {
703
703
  ...props,
704
704
  className: [
705
- "border-b border-[var(--color-border-default)]",
706
- "even:bg-[var(--color-surface-subtle)]",
707
- "hover:bg-[var(--color-surface-muted)]",
705
+ "border-b border-(--color-border-default)",
706
+ "even:bg-(--color-surface-subtle)",
707
+ "hover:bg-(--color-surface-muted)",
708
708
  "outline-none",
709
- "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]",
709
+ "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]",
710
710
  "transition-colors"
711
711
  ].join(" ")
712
712
  }
@@ -718,10 +718,10 @@ function Cell(props) {
718
718
  {
719
719
  ...props,
720
720
  className: [
721
- "px-3 py-[var(--table-row-py)]",
722
- "text-[var(--color-text-primary)]",
721
+ "px-3 py-(--table-row-py)",
722
+ "text-(--color-text-primary)",
723
723
  "outline-none",
724
- "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
724
+ "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
725
725
  ].join(" ")
726
726
  }
727
727
  );
@@ -758,7 +758,7 @@ function Dialog({
758
758
  onOpenChange,
759
759
  isDismissable,
760
760
  className: [
761
- "fixed inset-0 z-50 bg-[var(--color-overlay-backdrop)] backdrop-blur-sm",
761
+ "fixed inset-0 z-50 bg-(--color-overlay-backdrop) backdrop-blur-sm",
762
762
  "flex items-center justify-center",
763
763
  "data-[entering]:animate-in data-[entering]:fade-in",
764
764
  "data-[exiting]:animate-out data-[exiting]:fade-out"
@@ -769,18 +769,18 @@ function Dialog({
769
769
  className: [
770
770
  "w-full mx-4",
771
771
  sizeStyles2[size],
772
- "bg-[var(--color-surface-default)] rounded-[var(--border-radius-lg)] shadow-xl max-h-[85vh] flex flex-col",
772
+ "bg-(--color-surface-default) rounded-lg shadow-xl max-h-[85vh] flex flex-col",
773
773
  "data-[entering]:animate-in data-[entering]:zoom-in-95 data-[entering]:fade-in",
774
774
  "data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
775
775
  className
776
776
  ].filter(Boolean).join(" "),
777
777
  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: [
778
+ /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4 border-b border-(--color-border-default)", children: [
779
779
  /* @__PURE__ */ jsx9(
780
780
  Heading,
781
781
  {
782
782
  slot: "title",
783
- className: "text-[length:var(--font-size-lg)] font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)]",
783
+ className: "text-lg font-semibold text-(--color-text-primary)",
784
784
  children: title
785
785
  }
786
786
  ),
@@ -790,9 +790,9 @@ function Dialog({
790
790
  type: "button",
791
791
  onClick: close,
792
792
  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",
793
+ "inline-flex items-center justify-center rounded-sm p-1",
794
+ "text-(--color-text-secondary) hover:text-(--color-text-primary) hover:bg-(--color-surface-muted)",
795
+ "outline-none focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
796
796
  "transition-colors"
797
797
  ].join(" "),
798
798
  "aria-label": "Close",
@@ -833,18 +833,18 @@ var defaultDuration = {
833
833
  var variantConfig = {
834
834
  success: {
835
835
  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)]"
836
+ containerClass: "bg-(--color-surface-success) border-(--color-border-success) text-(--color-text-success)",
837
+ iconClass: "text-(--color-action-success)"
838
838
  },
839
839
  error: {
840
840
  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)]"
841
+ containerClass: "bg-(--color-surface-danger) border-(--color-border-danger) text-(--color-text-danger)",
842
+ iconClass: "text-(--color-action-danger)"
843
843
  },
844
844
  info: {
845
845
  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)]"
846
+ containerClass: "bg-(--color-surface-info) border-(--color-border-info) text-(--color-text-info)",
847
+ iconClass: "text-(--color-text-info)"
848
848
  }
849
849
  };
850
850
  var PlacementContext = createContext2("bottom-right");
@@ -886,7 +886,7 @@ function ToastItem({
886
886
  role: "status",
887
887
  "aria-live": "polite",
888
888
  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",
889
+ "flex items-start gap-3 rounded-lg border px-4 py-3 shadow-md",
890
890
  "min-w-[320px] max-w-[420px]",
891
891
  "transition-all duration-200",
892
892
  isExiting ? exitAnimationByPlacement[placement] : enterAnimationByPlacement[placement],
@@ -894,13 +894,13 @@ function ToastItem({
894
894
  ].join(" "),
895
895
  children: [
896
896
  /* @__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 }),
897
+ /* @__PURE__ */ jsx11("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
898
898
  /* @__PURE__ */ jsx11(
899
899
  "button",
900
900
  {
901
901
  type: "button",
902
902
  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",
903
+ 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
904
  "aria-label": "Dismiss",
905
905
  children: /* @__PURE__ */ jsx11(X2, { size: 16, "aria-hidden": "true" })
906
906
  }
@@ -983,13 +983,13 @@ function EmptyState({
983
983
  "div",
984
984
  {
985
985
  className: [
986
- "flex flex-col items-center text-center py-[var(--spacing-12)] px-[var(--spacing-6)]",
986
+ "flex flex-col items-center text-center py-12 px-6",
987
987
  className
988
988
  ].filter(Boolean).join(" "),
989
989
  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 }),
990
+ icon && /* @__PURE__ */ jsx12(Icon, { icon, size: "xl", className: "text-(--color-text-tertiary)" }),
991
+ /* @__PURE__ */ jsx12("h3", { className: "text-lg font-semibold text-(--color-text-primary) mt-4", children: title }),
992
+ description && /* @__PURE__ */ jsx12("p", { className: "text-sm text-(--color-text-secondary) mt-2 max-w-sm", children: description }),
993
993
  action && /* @__PURE__ */ jsx12("div", { className: "mt-6", children: action })
994
994
  ]
995
995
  }
@@ -1008,7 +1008,7 @@ function Checkbox({ children, className, ...props }) {
1008
1008
  {
1009
1009
  ...props,
1010
1010
  className: [
1011
- "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
1011
+ "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
1012
1012
  "disabled:opacity-50 disabled:cursor-default",
1013
1013
  className
1014
1014
  ].filter(Boolean).join(" "),
@@ -1018,13 +1018,13 @@ function Checkbox({ children, className, ...props }) {
1018
1018
  {
1019
1019
  className: [
1020
1020
  "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)]"
1021
+ "rounded-sm border transition-colors",
1022
+ "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1023
+ 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
1024
  ].join(" "),
1025
1025
  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" })
1026
+ isSelected && /* @__PURE__ */ jsx13(Check, { className: "w-4 h-4 text-(--color-text-inverse)", strokeWidth: 3 }),
1027
+ isIndeterminate && /* @__PURE__ */ jsx13("div", { className: "w-3 h-0.5 bg-(--color-text-inverse) rounded-full" })
1028
1028
  ]
1029
1029
  }
1030
1030
  ),
@@ -1040,9 +1040,9 @@ import {
1040
1040
  } from "react-aria-components";
1041
1041
  import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
1042
1042
  var trackColorMap = {
1043
- primary: "bg-[var(--color-action-primary)]",
1044
- success: "bg-[var(--color-action-success)]",
1045
- destructive: "bg-[var(--color-action-danger)]"
1043
+ primary: "bg-(--color-action-primary)",
1044
+ success: "bg-(--color-action-success)",
1045
+ destructive: "bg-(--color-action-danger)"
1046
1046
  };
1047
1047
  var presetColors = new Set(Object.keys(trackColorMap));
1048
1048
  function isPresetColor(color) {
@@ -1060,7 +1060,7 @@ function Switch({
1060
1060
  {
1061
1061
  ...props,
1062
1062
  className: [
1063
- "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
1063
+ "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
1064
1064
  "disabled:opacity-50 disabled:cursor-default",
1065
1065
  className
1066
1066
  ].filter(Boolean).join(" "),
@@ -1070,15 +1070,15 @@ function Switch({
1070
1070
  {
1071
1071
  className: [
1072
1072
  "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)]" : ""
1073
+ "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1074
+ isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-(--color-border-strong)" : ""
1075
1075
  ].join(" "),
1076
1076
  style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
1077
1077
  children: /* @__PURE__ */ jsx14(
1078
1078
  "div",
1079
1079
  {
1080
1080
  className: [
1081
- "w-4 h-4 rounded-full bg-[var(--color-surface-default)] transition-transform shadow-sm",
1081
+ "w-4 h-4 rounded-full bg-(--color-surface-default) transition-transform shadow-sm",
1082
1082
  isSelected ? "translate-x-4" : "translate-x-0"
1083
1083
  ].join(" ")
1084
1084
  }
@@ -1117,7 +1117,7 @@ function Radio({ children, className, ...props }) {
1117
1117
  {
1118
1118
  ...props,
1119
1119
  className: [
1120
- "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
1120
+ "group flex items-center gap-2 text-sm text-(--color-text-primary) cursor-pointer",
1121
1121
  "disabled:opacity-50 disabled:cursor-default",
1122
1122
  className
1123
1123
  ].filter(Boolean).join(" "),
@@ -1128,10 +1128,10 @@ function Radio({ children, className, ...props }) {
1128
1128
  className: [
1129
1129
  "flex items-center justify-center w-5 h-5 shrink-0",
1130
1130
  "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)]"
1131
+ "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1132
+ isSelected ? "border-(--color-action-primary)" : "border-(--color-border-default) group-hover:border-(--color-border-strong)"
1133
1133
  ].join(" "),
1134
- children: isSelected && /* @__PURE__ */ jsx15("div", { className: "w-2.5 h-2.5 rounded-full bg-[var(--color-action-primary)]" })
1134
+ children: isSelected && /* @__PURE__ */ jsx15("div", { className: "w-2.5 h-2.5 rounded-full bg-(--color-action-primary)" })
1135
1135
  }
1136
1136
  ),
1137
1137
  children && /* @__PURE__ */ jsx15("span", { children })
@@ -1153,10 +1153,10 @@ function RadioButton({ children, className, ...props }) {
1153
1153
  "div",
1154
1154
  {
1155
1155
  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)]"
1156
+ "px-4 py-2 text-sm font-medium",
1157
+ "rounded-md border transition-colors text-center",
1158
+ "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
1159
+ 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
1160
  ].join(" "),
1161
1161
  children
1162
1162
  }
@@ -1176,9 +1176,9 @@ function Label3({ isRequired, children, className, ...props }) {
1176
1176
  {
1177
1177
  ...props,
1178
1178
  className: [
1179
- "text-[length:var(--font-size-sm)]",
1180
- "font-[number:var(--font-weight-medium)]",
1181
- "text-[var(--color-text-primary)]",
1179
+ "text-sm",
1180
+ "font-medium",
1181
+ "text-(--color-text-primary)",
1182
1182
  className
1183
1183
  ].filter(Boolean).join(" "),
1184
1184
  children: [
@@ -1187,7 +1187,7 @@ function Label3({ isRequired, children, className, ...props }) {
1187
1187
  "span",
1188
1188
  {
1189
1189
  "aria-hidden": "true",
1190
- className: "ml-0.5 text-[var(--color-text-danger)]",
1190
+ className: "ml-0.5 text-(--color-text-danger)",
1191
1191
  children: "*"
1192
1192
  }
1193
1193
  )
@@ -1215,12 +1215,12 @@ function Field({
1215
1215
  return /* @__PURE__ */ jsxs14(
1216
1216
  "div",
1217
1217
  {
1218
- className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
1218
+ className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
1219
1219
  children: [
1220
1220
  label && /* @__PURE__ */ jsx17(Label3, { isRequired, children: label }),
1221
1221
  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 })
1222
+ description && !errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-sm text-(--color-text-secondary)", children: description }),
1223
+ errorMessage && /* @__PURE__ */ jsx17("p", { className: "text-sm text-(--color-text-danger)", children: errorMessage })
1224
1224
  ]
1225
1225
  }
1226
1226
  );
@@ -1233,7 +1233,7 @@ function Fieldset({ legend, children, className }) {
1233
1233
  "fieldset",
1234
1234
  {
1235
1235
  className: [
1236
- "flex flex-col gap-[var(--spacing-8)]",
1236
+ "flex flex-col gap-8",
1237
1237
  "border-none p-0 m-0",
1238
1238
  className
1239
1239
  ].filter(Boolean).join(" "),
@@ -1242,9 +1242,9 @@ function Fieldset({ legend, children, className }) {
1242
1242
  "legend",
1243
1243
  {
1244
1244
  className: [
1245
- "text-[length:var(--font-size-lg)]",
1246
- "font-[number:var(--font-weight-semibold)]",
1247
- "text-[var(--color-text-primary)]",
1245
+ "text-lg",
1246
+ "font-semibold",
1247
+ "text-(--color-text-primary)",
1248
1248
  "p-0"
1249
1249
  ].join(" "),
1250
1250
  children: legend
@@ -1287,18 +1287,18 @@ import { jsx as jsx20 } from "react/jsx-runtime";
1287
1287
  function groupRadiusClass3(position) {
1288
1288
  switch (position) {
1289
1289
  case "start":
1290
- return "rounded-l-[var(--border-radius-md)] rounded-r-none";
1290
+ return "rounded-l-(--border-radius-md) rounded-r-none";
1291
1291
  case "middle":
1292
1292
  return "rounded-none";
1293
1293
  case "end":
1294
- return "rounded-r-[var(--border-radius-md)] rounded-l-none";
1294
+ return "rounded-r-(--border-radius-md) rounded-l-none";
1295
1295
  default:
1296
- return "rounded-[var(--border-radius-md)]";
1296
+ return "rounded-md";
1297
1297
  }
1298
1298
  }
1299
1299
  function InputAddon({ children, className }) {
1300
1300
  const { inGroup, position } = useInputGroup();
1301
- const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-[var(--border-radius-md)]";
1301
+ const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-md";
1302
1302
  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
1303
1303
  return /* @__PURE__ */ jsx20(
1304
1304
  "div",
@@ -1306,9 +1306,9 @@ function InputAddon({ children, className }) {
1306
1306
  className: [
1307
1307
  "flex items-center self-stretch shrink-0 select-none",
1308
1308
  "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)]",
1309
+ "bg-(--color-surface-subtle)",
1310
+ "text-(--color-text-secondary)",
1311
+ "border border-(--color-border-default)",
1312
1312
  radiusClass,
1313
1313
  marginClass,
1314
1314
  className
@@ -1330,17 +1330,17 @@ var defaultSizeMap = {
1330
1330
  h6: "xs"
1331
1331
  };
1332
1332
  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)]"
1333
+ xs: "text-sm",
1334
+ sm: "text-base",
1335
+ md: "text-lg",
1336
+ lg: "text-xl",
1337
+ xl: "text-2xl",
1338
+ "2xl": "text-3xl",
1339
+ "3xl": "text-4xl"
1340
1340
  };
1341
1341
  var weightStyles = {
1342
- semibold: "font-[number:var(--font-weight-semibold)]",
1343
- bold: "font-[number:var(--font-weight-bold)]"
1342
+ semibold: "font-semibold",
1343
+ bold: "font-bold"
1344
1344
  };
1345
1345
  function Heading2({
1346
1346
  as: Tag = "h2",
@@ -1355,7 +1355,7 @@ function Heading2({
1355
1355
  {
1356
1356
  className: twMerge2(
1357
1357
  weightStyles[weight],
1358
- "text-[var(--color-text-primary)]",
1358
+ "text-(--color-text-primary)",
1359
1359
  sizeStyles3[resolvedSize],
1360
1360
  className
1361
1361
  ),
@@ -1388,12 +1388,12 @@ import {
1388
1388
  import { jsx as jsx22 } from "react/jsx-runtime";
1389
1389
  var variantStyles2 = {
1390
1390
  default: [
1391
- "text-[var(--color-teal-700)] underline",
1392
- "hover:text-[var(--color-teal-800)]"
1391
+ "text-teal-700 underline",
1392
+ "hover:text-teal-800"
1393
1393
  ].join(" "),
1394
1394
  subtle: [
1395
- "text-[var(--color-text-secondary)] no-underline",
1396
- "hover:underline hover:text-[var(--color-text-primary)]"
1395
+ "text-(--color-text-secondary) no-underline",
1396
+ "hover:underline hover:text-(--color-text-primary)"
1397
1397
  ].join(" ")
1398
1398
  };
1399
1399
  function Link({
@@ -1407,7 +1407,7 @@ function Link({
1407
1407
  ...props,
1408
1408
  className: [
1409
1409
  "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",
1410
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 focus-visible:rounded-sm",
1411
1411
  variantStyles2[variant],
1412
1412
  className
1413
1413
  ].filter(Boolean).join(" ")
@@ -1443,19 +1443,19 @@ function Breadcrumbs({ items, className }) {
1443
1443
  "flex items-center gap-1",
1444
1444
  isLast ? "min-w-0" : "shrink-0"
1445
1445
  ].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: [
1446
+ children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-medium text-(--color-text-primary) truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
1447
1447
  /* @__PURE__ */ jsx23(
1448
1448
  Link2,
1449
1449
  {
1450
1450
  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",
1451
+ 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
1452
  children: item.label
1453
1453
  }
1454
1454
  ),
1455
1455
  /* @__PURE__ */ jsx23(
1456
1456
  ChevronRight,
1457
1457
  {
1458
- className: "shrink-0 text-[var(--color-neutral-400)]",
1458
+ className: "shrink-0 text-neutral-400",
1459
1459
  size: 16,
1460
1460
  "aria-hidden": "true"
1461
1461
  }
@@ -1497,11 +1497,11 @@ function ButtonLink({
1497
1497
  ...props,
1498
1498
  className: twMerge3(
1499
1499
  "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)]",
1500
+ "rounded-md",
1501
+ "font-medium",
1502
+ "leading-tight",
1503
1503
  "outline-none transition-colors no-underline",
1504
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
1504
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
1505
1505
  variantStyles[variant],
1506
1506
  sizeStyles[size],
1507
1507
  className
@@ -1536,9 +1536,9 @@ function IconButtonLink({
1536
1536
  "aria-label": ariaLabel,
1537
1537
  className: twMerge3(
1538
1538
  "inline-flex items-center justify-center",
1539
- "rounded-[var(--border-radius-md)]",
1539
+ "rounded-md",
1540
1540
  "outline-none transition-colors no-underline",
1541
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
1541
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
1542
1542
  variantStyles[variant],
1543
1543
  squareSizeStyles2[size],
1544
1544
  className
@@ -1571,30 +1571,30 @@ var squareSizeStyles3 = {
1571
1571
  var variantStyles3 = {
1572
1572
  default: {
1573
1573
  base: [
1574
- "bg-transparent text-[var(--color-text-primary)]",
1575
- "hover:bg-[var(--color-surface-hover)]",
1576
- "pressed:bg-[var(--color-surface-pressed)]"
1574
+ "bg-transparent text-(--color-text-primary)",
1575
+ "hover:bg-(--color-surface-hover)",
1576
+ "pressed:bg-(--color-surface-pressed)"
1577
1577
  ].join(" "),
1578
- selected: "bg-[var(--color-surface-pressed)] text-[var(--color-text-primary)]"
1578
+ selected: "bg-(--color-surface-pressed) text-(--color-text-primary)"
1579
1579
  },
1580
1580
  primary: {
1581
1581
  base: [
1582
- "bg-transparent text-[var(--color-text-primary)]",
1583
- "hover:bg-[var(--color-surface-hover)]",
1584
- "pressed:bg-[var(--color-surface-pressed)]"
1582
+ "bg-transparent text-(--color-text-primary)",
1583
+ "hover:bg-(--color-surface-hover)",
1584
+ "pressed:bg-(--color-surface-pressed)"
1585
1585
  ].join(" "),
1586
- selected: "bg-[var(--color-action-primary-active)] text-[var(--color-text-inverse)]"
1586
+ selected: "bg-(--color-action-primary-active) text-(--color-text-inverse)"
1587
1587
  },
1588
1588
  outlined: {
1589
1589
  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)]"
1590
+ "bg-(--color-surface-default) text-(--color-text-primary)",
1591
+ "border border-(--color-border-default)",
1592
+ "hover:bg-(--color-surface-subtle)",
1593
+ "pressed:bg-(--color-surface-muted)"
1594
1594
  ].join(" "),
1595
1595
  selected: [
1596
- "bg-[var(--color-neutral-800)] text-[var(--color-text-inverse)]",
1597
- "border border-[var(--color-neutral-800)]"
1596
+ "bg-neutral-800 text-(--color-text-inverse)",
1597
+ "border border-neutral-800"
1598
1598
  ].join(" ")
1599
1599
  }
1600
1600
  };
@@ -1612,11 +1612,11 @@ function ToggleButton({
1612
1612
  ...props,
1613
1613
  className: ({ isSelected }) => twMerge4(
1614
1614
  "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)]",
1615
+ isSquare ? "rounded-none" : "rounded-md",
1616
+ "font-medium",
1617
+ "leading-tight",
1618
1618
  "outline-none transition-colors",
1619
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
1619
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
1620
1620
  "disabled:opacity-50 disabled:pointer-events-none",
1621
1621
  isSquare ? squareSizeStyles3[size] : sizeStyles4[size],
1622
1622
  isSelected ? styles.selected : styles.base,
@@ -1659,7 +1659,7 @@ function ToggleButtonGroup({
1659
1659
  ...props,
1660
1660
  orientation: "horizontal",
1661
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",
1662
+ "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
1663
1663
  className
1664
1664
  ),
1665
1665
  children
@@ -1680,17 +1680,17 @@ function ToggleButtonGroupItem({
1680
1680
  className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge5(
1681
1681
  // Base layout
1682
1682
  "inline-flex items-center justify-center",
1683
- "rounded-[var(--border-radius-md)]",
1684
- "font-[var(--font-weight-medium)]",
1683
+ "rounded-md",
1684
+ "font-medium",
1685
1685
  "outline-none transition-colors cursor-pointer",
1686
1686
  // Focus ring
1687
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1",
1687
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-1",
1688
1688
  // Disabled
1689
1689
  isDisabled && "opacity-50 pointer-events-none",
1690
1690
  // Size
1691
1691
  isIconOnly ? iconOnlySizeStyles[size] : sizeStyles5[size],
1692
1692
  // 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)]",
1693
+ 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
1694
  className
1695
1695
  ),
1696
1696
  children
@@ -1707,8 +1707,8 @@ import {
1707
1707
  } from "react-aria-components";
1708
1708
  import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
1709
1709
  var popoverStyles = [
1710
- "bg-[var(--color-surface-default)] rounded-[var(--border-radius-md)]",
1711
- "shadow-lg border border-[var(--color-border-default)]",
1710
+ "bg-(--color-surface-default) rounded-md",
1711
+ "shadow-lg border border-(--color-border-default)",
1712
1712
  "py-1 min-w-48",
1713
1713
  "entering:animate-in entering:fade-in entering:zoom-in-95",
1714
1714
  "exiting:animate-out exiting:fade-out exiting:zoom-out-95"
@@ -1752,10 +1752,10 @@ function Menu({
1752
1752
  className: [
1753
1753
  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
1754
1754
  "transition-colors",
1755
- "focus:bg-[var(--color-surface-muted)]",
1756
- "hover:bg-[var(--color-surface-muted)]",
1755
+ "focus:bg-(--color-surface-muted)",
1756
+ "hover:bg-(--color-surface-muted)",
1757
1757
  "disabled:opacity-50 disabled:pointer-events-none",
1758
- item.isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]"
1758
+ item.isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)"
1759
1759
  ].filter(Boolean).join(" "),
1760
1760
  children: [
1761
1761
  item.icon && /* @__PURE__ */ jsx27(Icon, { icon: item.icon, size: "sm" }),
@@ -1807,10 +1807,10 @@ function MenuItem({
1807
1807
  className: [
1808
1808
  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
1809
1809
  "transition-colors",
1810
- "focus:bg-[var(--color-surface-muted)]",
1811
- "hover:bg-[var(--color-surface-muted)]",
1810
+ "focus:bg-(--color-surface-muted)",
1811
+ "hover:bg-(--color-surface-muted)",
1812
1812
  "disabled:opacity-50 disabled:pointer-events-none",
1813
- isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]",
1813
+ isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)",
1814
1814
  className
1815
1815
  ].filter(Boolean).join(" "),
1816
1816
  children: [
@@ -1842,15 +1842,15 @@ function MenuCheckboxItem({
1842
1842
  className: ({ isSelected }) => [
1843
1843
  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
1844
1844
  "transition-colors",
1845
- "focus:bg-[var(--color-surface-muted)]",
1846
- "hover:bg-[var(--color-surface-muted)]",
1845
+ "focus:bg-(--color-surface-muted)",
1846
+ "hover:bg-(--color-surface-muted)",
1847
1847
  "disabled:opacity-50 disabled:pointer-events-none",
1848
- "text-[var(--color-text-primary)]",
1849
- isSelected ? "font-[number:var(--font-weight-medium)]" : "",
1848
+ "text-(--color-text-primary)",
1849
+ isSelected ? "font-medium" : "",
1850
1850
  className
1851
1851
  ].filter(Boolean).join(" "),
1852
1852
  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" }) }),
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-(--color-action-primary)", "aria-hidden": "true" }) }),
1854
1854
  /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
1855
1855
  ] })
1856
1856
  }
@@ -1875,8 +1875,8 @@ function MenuSection({
1875
1875
  {
1876
1876
  className: [
1877
1877
  "px-3 py-1.5",
1878
- "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-semibold)]",
1879
- "text-[var(--color-text-secondary)]",
1878
+ "text-xs font-semibold",
1879
+ "text-(--color-text-secondary)",
1880
1880
  "uppercase tracking-wider",
1881
1881
  "select-none"
1882
1882
  ].join(" "),
@@ -1902,7 +1902,7 @@ function MenuSeparator({ className }) {
1902
1902
  Separator,
1903
1903
  {
1904
1904
  className: [
1905
- "border-t border-[var(--color-border-default)] my-1",
1905
+ "border-t border-(--color-border-default) my-1",
1906
1906
  className
1907
1907
  ].filter(Boolean).join(" ")
1908
1908
  }
@@ -1926,7 +1926,7 @@ function PopoverTrigger({ children, className }) {
1926
1926
  {
1927
1927
  className: [
1928
1928
  "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)]",
1929
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:rounded-sm",
1930
1930
  className
1931
1931
  ].filter(Boolean).join(" "),
1932
1932
  children
@@ -1946,8 +1946,8 @@ function PopoverContent({
1946
1946
  offset: offsetPx,
1947
1947
  className: [
1948
1948
  "z-50",
1949
- "bg-[var(--color-surface-default)] border border-[var(--color-border-default)]",
1950
- "rounded-[var(--border-radius-md)] shadow-lg",
1949
+ "bg-(--color-surface-default) border border-(--color-border-default)",
1950
+ "rounded-md shadow-lg",
1951
1951
  "entering:animate-in entering:fade-in entering:duration-150",
1952
1952
  "exiting:animate-out exiting:fade-out exiting:duration-100",
1953
1953
  "entering:placement-top:slide-in-from-bottom-1",
@@ -2006,8 +2006,8 @@ function TabList({
2006
2006
  ...props
2007
2007
  }) {
2008
2008
  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";
2009
+ 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";
2010
+ const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-(--color-border-default)" : "flex-col";
2011
2011
  return /* @__PURE__ */ jsx34(
2012
2012
  AriaTabList,
2013
2013
  {
@@ -2030,7 +2030,7 @@ function Tab({ className, ...props }) {
2030
2030
  if (variant === "unstyled") {
2031
2031
  return twMerge6(
2032
2032
  "cursor-pointer outline-none",
2033
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
2033
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
2034
2034
  isDisabled ? "opacity-50 pointer-events-none" : "",
2035
2035
  className
2036
2036
  );
@@ -2038,9 +2038,9 @@ function Tab({ className, ...props }) {
2038
2038
  return twMerge6(
2039
2039
  // Base
2040
2040
  "cursor-pointer outline-none transition-colors",
2041
- "font-[var(--font-weight-medium)]",
2041
+ "font-medium",
2042
2042
  // Focus ring
2043
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
2043
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
2044
2044
  // Disabled
2045
2045
  isDisabled ? "opacity-50 pointer-events-none" : "",
2046
2046
  // Size
@@ -2061,20 +2061,20 @@ function getTabVariantStyles(variant, state) {
2061
2061
  if (variant === "underline") {
2062
2062
  return [
2063
2063
  // Shape
2064
- "relative rounded-t-[var(--border-radius-sm)]",
2064
+ "relative rounded-t-(--border-radius-sm)",
2065
2065
  // Color states
2066
2066
  state.isSelected ? [
2067
- "text-[var(--color-teal-700)] font-[var(--font-weight-semibold)]",
2067
+ "text-teal-700 font-semibold",
2068
2068
  // 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"
2069
+ "after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-teal-600"
2070
+ ].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
2071
  ];
2072
2072
  }
2073
2073
  return [
2074
2074
  // Shape
2075
- "rounded-[var(--border-radius-md)]",
2075
+ "rounded-md",
2076
2076
  // 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"
2077
+ 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
2078
  ];
2079
2079
  }
2080
2080
  function TabPanel({ className, ...props }) {
@@ -2119,7 +2119,8 @@ function NodeRenderer({
2119
2119
  selectionMode,
2120
2120
  size,
2121
2121
  onHover,
2122
- onHoverEnd
2122
+ onHoverEnd,
2123
+ onToggle
2123
2124
  }) {
2124
2125
  const data = node.data;
2125
2126
  const isCheckbox = selectionMode === "checkbox";
@@ -2135,12 +2136,12 @@ function NodeRenderer({
2135
2136
  className: [
2136
2137
  "relative flex items-center cursor-default select-none",
2137
2138
  isCompact ? "gap-0.5 px-2" : "gap-1 px-3",
2138
- "text-[length:var(--font-size-sm)] text-[var(--color-text-primary)]",
2139
+ "text-sm text-(--color-text-primary)",
2139
2140
  "outline-none",
2140
2141
  // Full-width background via pseudo-element
2141
2142
  "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]" : ""
2143
+ 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)",
2144
+ node.isFocused ? "outline-2 outline-(--color-border-focus) outline-offset-[-2px]" : ""
2144
2145
  ].filter(Boolean).join(" "),
2145
2146
  role: "treeitem",
2146
2147
  "aria-selected": isCheckbox ? isChecked : node.isSelected,
@@ -2168,15 +2169,16 @@ function NodeRenderer({
2168
2169
  type: "button",
2169
2170
  className: [
2170
2171
  "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)]",
2172
+ "rounded-sm",
2173
+ "text-(--color-text-secondary)",
2174
+ "hover:text-(--color-text-primary)",
2174
2175
  "transition-transform",
2175
2176
  node.isInternal ? "visible" : "invisible"
2176
2177
  ].filter(Boolean).join(" "),
2177
2178
  onClick: (e) => {
2178
2179
  e.stopPropagation();
2179
2180
  node.toggle();
2181
+ onToggle?.(node.data);
2180
2182
  },
2181
2183
  tabIndex: -1,
2182
2184
  "aria-label": node.isOpen ? "Collapse" : "Expand",
@@ -2197,8 +2199,8 @@ function NodeRenderer({
2197
2199
  {
2198
2200
  className: [
2199
2201
  "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)]"
2202
+ "rounded-sm border transition-colors",
2203
+ isChecked ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) hover:border-(--color-border-strong)"
2202
2204
  ].join(" "),
2203
2205
  role: "checkbox",
2204
2206
  "aria-checked": isChecked,
@@ -2206,7 +2208,7 @@ function NodeRenderer({
2206
2208
  children: isChecked && /* @__PURE__ */ jsx35(
2207
2209
  Check3,
2208
2210
  {
2209
- className: "w-3 h-3 text-[var(--color-text-inverse)]",
2211
+ className: "w-3 h-3 text-(--color-text-inverse)",
2210
2212
  strokeWidth: 3
2211
2213
  }
2212
2214
  )
@@ -2216,7 +2218,7 @@ function NodeRenderer({
2216
2218
  IconComponent,
2217
2219
  {
2218
2220
  size: 16,
2219
- className: "shrink-0 text-[var(--color-text-secondary)]",
2221
+ className: "shrink-0 text-(--color-text-secondary)",
2220
2222
  "aria-hidden": "true"
2221
2223
  }
2222
2224
  ),
@@ -2233,6 +2235,7 @@ function Tree({
2233
2235
  selectedIds,
2234
2236
  onSelectionChange,
2235
2237
  onActivate,
2238
+ onToggle,
2236
2239
  onHover,
2237
2240
  onHoverEnd,
2238
2241
  openByDefault = false,
@@ -2320,7 +2323,8 @@ function Tree({
2320
2323
  selectionMode,
2321
2324
  size,
2322
2325
  onHover,
2323
- onHoverEnd
2326
+ onHoverEnd,
2327
+ onToggle
2324
2328
  }
2325
2329
  )
2326
2330
  }
@@ -2365,7 +2369,7 @@ function SegmentedControl({
2365
2369
  defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
2366
2370
  onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
2367
2371
  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",
2372
+ "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
2369
2373
  className
2370
2374
  ),
2371
2375
  children
@@ -2384,17 +2388,17 @@ function SegmentedControlItem({
2384
2388
  className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge7(
2385
2389
  // Base layout
2386
2390
  "inline-flex items-center justify-center",
2387
- "rounded-[var(--border-radius-md)]",
2388
- "font-[var(--font-weight-medium)]",
2391
+ "rounded-md",
2392
+ "font-medium",
2389
2393
  "outline-none transition-colors cursor-pointer",
2390
2394
  // Focus ring
2391
- "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1",
2395
+ "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-1",
2392
2396
  // Disabled
2393
2397
  isDisabled && "opacity-50 pointer-events-none",
2394
2398
  // Size
2395
2399
  sizeStyles7[size],
2396
2400
  // 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)]",
2401
+ 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
2402
  className
2399
2403
  )
2400
2404
  }
@@ -2441,7 +2445,7 @@ function FileIcon({
2441
2445
  IconComponent,
2442
2446
  {
2443
2447
  size,
2444
- className: "shrink-0 text-[var(--color-text-secondary)]"
2448
+ className: "shrink-0 text-(--color-text-secondary)"
2445
2449
  }
2446
2450
  );
2447
2451
  }
@@ -2458,11 +2462,11 @@ function FileCard({
2458
2462
  className
2459
2463
  }) {
2460
2464
  const isInteractive = !!href || !!onPress;
2461
- const radius = compact ? "rounded-[var(--border-radius-md)]" : "rounded-[var(--border-radius-lg)]";
2465
+ const radius = compact ? "rounded-md" : "rounded-lg";
2462
2466
  const IconComponent = getFileIcon(type, extension);
2463
2467
  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)]";
2468
+ const iconColor = type === "directory" ? "text-(--color-text-tertiary)" : "text-(--color-text-secondary)";
2469
+ const thumbnailClass = compact ? "aspect-square rounded-t-(--border-radius-md)" : "aspect-[4/3] rounded-t-(--border-radius-lg)";
2466
2470
  const handleInfoClick = useCallback3(
2467
2471
  (e) => {
2468
2472
  if (isInteractive) {
@@ -2486,7 +2490,7 @@ function FileCard({
2486
2490
  /* @__PURE__ */ jsx37(
2487
2491
  "div",
2488
2492
  {
2489
- className: `shrink-0 overflow-hidden bg-[var(--color-neutral-900)] ${thumbnailClass}`,
2493
+ className: `shrink-0 overflow-hidden bg-neutral-900 ${thumbnailClass}`,
2490
2494
  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
2495
  }
2492
2496
  ),
@@ -2494,14 +2498,14 @@ function FileCard({
2494
2498
  "div",
2495
2499
  {
2496
2500
  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)]"
2501
+ "flex flex-col border-t border-(--color-border-default)",
2502
+ "bg-(--color-surface-default)",
2503
+ compact ? "px-2 py-1.5 rounded-b-(--border-radius-md)" : "gap-0.5 px-3 py-2 rounded-b-(--border-radius-lg)"
2500
2504
  ].join(" "),
2501
- children: compact ? /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-[var(--color-text-primary)] truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
2505
+ children: compact ? /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-(--color-text-primary) truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
2502
2506
  /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
2503
2507
  /* @__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 }),
2508
+ /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 text-sm font-medium text-(--color-text-primary) truncate", children: name }),
2505
2509
  onInfo && /* @__PURE__ */ jsx37(
2506
2510
  "span",
2507
2511
  {
@@ -2526,7 +2530,7 @@ function FileCard({
2526
2530
  }
2527
2531
  )
2528
2532
  ] }),
2529
- size && /* @__PURE__ */ jsx37("span", { className: "text-xs text-[var(--color-text-secondary)] tabular-nums pl-[22px]", children: size })
2533
+ size && /* @__PURE__ */ jsx37("span", { className: "text-xs text-(--color-text-secondary) tabular-nums pl-[22px]", children: size })
2530
2534
  ] })
2531
2535
  }
2532
2536
  )
@@ -2534,11 +2538,11 @@ function FileCard({
2534
2538
  const baseStyles = [
2535
2539
  "group flex flex-col overflow-hidden",
2536
2540
  radius,
2537
- "border border-[var(--color-border-default)]",
2541
+ "border border-(--color-border-default)",
2538
2542
  "shadow-sm",
2539
2543
  "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",
2544
+ isInteractive && "hover:border-(--color-border-focus) hover:shadow-md cursor-pointer",
2545
+ isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
2542
2546
  className
2543
2547
  ].filter(Boolean).join(" ");
2544
2548
  if (href) {
@@ -2603,22 +2607,22 @@ function pillColorFromName(name) {
2603
2607
  return HASH_PALETTE[Math.abs(hash) % HASH_PALETTE.length];
2604
2608
  }
2605
2609
  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)]"
2610
+ neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
2611
+ purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
2612
+ teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text)",
2613
+ rose: "bg-(--color-badge-rose-bg) text-(--color-badge-rose-text)",
2614
+ slate: "bg-(--color-badge-slate-bg) text-(--color-badge-slate-text)",
2615
+ green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text)",
2616
+ amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text)"
2613
2617
  };
2614
2618
  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)]"
2619
+ neutral: "bg-(--color-badge-neutral-text)",
2620
+ purple: "bg-(--color-badge-purple-text)",
2621
+ teal: "bg-(--color-badge-teal-text)",
2622
+ rose: "bg-(--color-badge-rose-text)",
2623
+ slate: "bg-(--color-badge-slate-text)",
2624
+ green: "bg-(--color-badge-green-text)",
2625
+ amber: "bg-(--color-badge-amber-text)"
2622
2626
  };
2623
2627
  function resolveColor(color, name) {
2624
2628
  if (color && color !== "auto") return color;
@@ -2633,7 +2637,7 @@ function Pill({ children, color, name, className }) {
2633
2637
  className: twMerge8(
2634
2638
  "inline-flex items-center rounded-full",
2635
2639
  "px-2 py-0.5",
2636
- "text-[length:var(--font-size-xs)] font-[number:var(--font-weight-medium)] leading-[var(--line-height-tight)]",
2640
+ "text-xs font-medium leading-tight",
2637
2641
  colorStyles[resolved],
2638
2642
  className
2639
2643
  ),
@@ -2688,9 +2692,9 @@ function GroupPill({
2688
2692
  // src/components/StorageConnectionCard/StorageConnectionCard.tsx
2689
2693
  import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
2690
2694
  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"
2695
+ connected: "bg-(--color-status-success)",
2696
+ error: "border-2 border-(--color-status-danger) bg-transparent",
2697
+ loading: "bg-(--color-status-warning) animate-pulse"
2694
2698
  };
2695
2699
  var providerConfig = {
2696
2700
  aws: { label: "AWS", color: "purple" },
@@ -2713,16 +2717,16 @@ function PreviewArea({
2713
2717
  return /* @__PURE__ */ jsx40("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx40(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
2714
2718
  }
2715
2719
  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: [
2720
+ return /* @__PURE__ */ jsxs25("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-(--color-surface-danger) px-4", children: [
2717
2721
  /* @__PURE__ */ jsx40(
2718
2722
  Icon,
2719
2723
  {
2720
2724
  icon: AlertCircle,
2721
2725
  size: "lg",
2722
- className: "text-[var(--color-text-danger)]"
2726
+ className: "text-(--color-text-danger)"
2723
2727
  }
2724
2728
  ),
2725
- errorMessage && /* @__PURE__ */ jsx40("p", { className: "text-center text-xs text-[var(--color-text-danger)]", children: errorMessage })
2729
+ errorMessage && /* @__PURE__ */ jsx40("p", { className: "text-center text-xs text-(--color-text-danger)", children: errorMessage })
2726
2730
  ] });
2727
2731
  }
2728
2732
  if (children) {
@@ -2733,7 +2737,7 @@ function PreviewArea({
2733
2737
  {
2734
2738
  icon: Database,
2735
2739
  size: "xl",
2736
- className: "text-[var(--color-text-secondary)]"
2740
+ className: "text-(--color-text-secondary)"
2737
2741
  }
2738
2742
  ) });
2739
2743
  }
@@ -2771,8 +2775,8 @@ function StorageConnectionCard({
2771
2775
  [onPress]
2772
2776
  );
2773
2777
  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: [
2778
+ /* @__PURE__ */ jsx40("div", { className: "aspect-[4/3] bg-neutral-900 overflow-hidden rounded-t-(--border-radius-lg)", children: /* @__PURE__ */ jsx40(PreviewArea, { status, errorMessage, children }) }),
2779
+ /* @__PURE__ */ jsxs25("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: [
2776
2780
  /* @__PURE__ */ jsxs25("div", { className: "flex items-start gap-2", children: [
2777
2781
  status && /* @__PURE__ */ jsx40(
2778
2782
  "span",
@@ -2784,7 +2788,7 @@ function StorageConnectionCard({
2784
2788
  "aria-label": `Status: ${status}`
2785
2789
  }
2786
2790
  ),
2787
- /* @__PURE__ */ jsx40("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
2791
+ /* @__PURE__ */ jsx40("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-(--color-text-primary)", children: name }),
2788
2792
  onInfo && /* @__PURE__ */ jsx40(
2789
2793
  "span",
2790
2794
  {
@@ -2811,8 +2815,8 @@ function StorageConnectionCard({
2811
2815
  ] }),
2812
2816
  (provider || imageCount != null && (!status || status === "connected")) && /* @__PURE__ */ jsxs25("div", { className: twMerge10("flex items-center gap-2", status && "pl-4"), children: [
2813
2817
  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: [
2818
+ provider && region && /* @__PURE__ */ jsx40("span", { className: "shrink-0 text-xs text-(--color-text-secondary)", children: region }),
2819
+ imageCount != null && (!status || status === "connected") && /* @__PURE__ */ jsxs25("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-(--color-text-secondary)", children: [
2816
2820
  imageCount,
2817
2821
  " ",
2818
2822
  imageCount === 1 ? "image" : "images"
@@ -2821,11 +2825,11 @@ function StorageConnectionCard({
2821
2825
  ] })
2822
2826
  ] });
2823
2827
  const baseStyles = twMerge10(
2824
- "flex flex-col overflow-hidden rounded-[var(--border-radius-lg)]",
2825
- "border border-[var(--color-border-default)]",
2828
+ "flex flex-col overflow-hidden rounded-lg",
2829
+ "border border-(--color-border-default)",
2826
2830
  "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",
2831
+ isInteractive && "hover:border-(--color-border-focus) hover:shadow-md cursor-pointer",
2832
+ isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
2829
2833
  className
2830
2834
  );
2831
2835
  if (href) {
@@ -2851,13 +2855,13 @@ function StorageConnectionCard({
2851
2855
  import { twMerge as twMerge11 } from "tailwind-merge";
2852
2856
  import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
2853
2857
  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)]"
2858
+ neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
2859
+ purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
2860
+ teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text)",
2861
+ rose: "bg-(--color-badge-rose-bg) text-(--color-badge-rose-text)",
2862
+ slate: "bg-(--color-badge-slate-bg) text-(--color-badge-slate-text)",
2863
+ green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text)",
2864
+ amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text)"
2861
2865
  };
2862
2866
  var sizeStyles8 = {
2863
2867
  sm: "px-1.5 py-0.5",
@@ -2878,8 +2882,8 @@ function Badge({
2878
2882
  "span",
2879
2883
  {
2880
2884
  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)]",
2885
+ "inline-flex items-center gap-1 rounded-full",
2886
+ "text-xs font-medium leading-tight",
2883
2887
  variantStyles4[variant],
2884
2888
  sizeStyles8[size],
2885
2889
  className
@@ -2914,9 +2918,9 @@ function Card({
2914
2918
  }) {
2915
2919
  const isInteractive = interactive || !!href || !!onPress;
2916
2920
  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",
2921
+ "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg overflow-hidden shadow-sm",
2922
+ isInteractive && "transition-all hover:shadow-md hover:border-(--color-border-focus) cursor-pointer",
2923
+ (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
2920
2924
  className
2921
2925
  );
2922
2926
  const handleKeyDown = useCallback5(
@@ -2933,7 +2937,7 @@ function Card({
2933
2937
  "div",
2934
2938
  {
2935
2939
  className: twMerge12(
2936
- "border-b border-[var(--color-border-default)]",
2940
+ "border-b border-(--color-border-default)",
2937
2941
  paddingStyles[padding]
2938
2942
  ),
2939
2943
  children: header
@@ -2944,7 +2948,7 @@ function Card({
2944
2948
  "div",
2945
2949
  {
2946
2950
  className: twMerge12(
2947
- "border-t border-[var(--color-border-default)]",
2951
+ "border-t border-(--color-border-default)",
2948
2952
  paddingStyles[padding]
2949
2953
  ),
2950
2954
  children: footer
@@ -2995,14 +2999,14 @@ function formatPercentage(current, previous) {
2995
2999
  return `${sign}${pct.toFixed(1)}%`;
2996
3000
  }
2997
3001
  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)]"
3002
+ increase: "text-(--color-delta-increase-text)",
3003
+ decrease: "text-(--color-delta-decrease-text)",
3004
+ flat: "text-(--color-delta-flat-text)"
3001
3005
  };
3002
3006
  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)]"
3007
+ increase: "text-(--color-delta-decrease-text)",
3008
+ decrease: "text-(--color-delta-increase-text)",
3009
+ flat: "text-(--color-delta-flat-text)"
3006
3010
  };
3007
3011
  var directionIcons = {
3008
3012
  increase: ArrowUp,
@@ -3010,9 +3014,9 @@ var directionIcons = {
3010
3014
  flat: Minus
3011
3015
  };
3012
3016
  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)]"
3017
+ increase: "bg-(--color-delta-increase-bg)",
3018
+ decrease: "bg-(--color-delta-decrease-bg)",
3019
+ flat: "bg-(--color-delta-flat-bg)"
3016
3020
  };
3017
3021
  function DeltaIndicator({
3018
3022
  current,
@@ -3030,12 +3034,12 @@ function DeltaIndicator({
3030
3034
  "span",
3031
3035
  {
3032
3036
  className: twMerge13(
3033
- "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
3034
- "text-[var(--color-text-tertiary)]",
3037
+ "inline-flex items-center gap-1 font-medium",
3038
+ "text-(--color-text-tertiary)",
3035
3039
  className
3036
3040
  ),
3037
3041
  children: [
3038
- label && /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
3042
+ label && /* @__PURE__ */ jsx43("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
3039
3043
  unavailableText
3040
3044
  ]
3041
3045
  }
@@ -3069,17 +3073,17 @@ function DeltaIndicator({
3069
3073
  "span",
3070
3074
  {
3071
3075
  className: twMerge13(
3072
- "inline-flex items-center gap-1 font-[number:var(--font-weight-medium)]",
3076
+ "inline-flex items-center gap-1 font-medium",
3073
3077
  colorStyles2,
3074
3078
  isPill && [
3075
- "rounded-[var(--border-radius-full)] px-2 py-0.5",
3076
- "text-[length:var(--font-size-xs)]",
3079
+ "rounded-full px-2 py-0.5",
3080
+ "text-xs",
3077
3081
  directionBgColors[direction]
3078
3082
  ],
3079
3083
  className
3080
3084
  ),
3081
3085
  children: [
3082
- label && /* @__PURE__ */ jsx43("span", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)] mr-1", children: label }),
3086
+ label && /* @__PURE__ */ jsx43("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
3083
3087
  /* @__PURE__ */ jsx43(IconComponent, { size: 14, "aria-hidden": true }),
3084
3088
  valueText
3085
3089
  ]
@@ -3091,11 +3095,11 @@ function DeltaIndicator({
3091
3095
  import { twMerge as twMerge14 } from "tailwind-merge";
3092
3096
  import { jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
3093
3097
  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)]"
3098
+ brand: "bg-(--color-progress-fill)",
3099
+ success: "bg-(--color-progress-fill-success)",
3100
+ warning: "bg-(--color-progress-fill-warning)",
3101
+ danger: "bg-(--color-progress-fill-danger)",
3102
+ neutral: "bg-(--color-text-secondary)"
3099
3103
  };
3100
3104
  var sizeStyles9 = {
3101
3105
  sm: "h-1.5",
@@ -3114,8 +3118,8 @@ function ProgressBar({
3114
3118
  const clampedValue = Math.min(100, Math.max(0, value));
3115
3119
  return /* @__PURE__ */ jsxs29("div", { className: twMerge14("w-full", className), children: [
3116
3120
  (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) })
3121
+ /* @__PURE__ */ jsx44("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
3122
+ /* @__PURE__ */ jsx44("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
3119
3123
  ] }),
3120
3124
  /* @__PURE__ */ jsx44(
3121
3125
  "div",
@@ -3126,14 +3130,14 @@ function ProgressBar({
3126
3130
  "aria-valuemax": 100,
3127
3131
  "aria-label": label ?? "Progress",
3128
3132
  className: twMerge14(
3129
- "w-full rounded-[var(--border-radius-full)] bg-[var(--color-progress-track)]",
3133
+ "w-full rounded-full bg-(--color-progress-track)",
3130
3134
  sizeStyles9[size]
3131
3135
  ),
3132
3136
  children: /* @__PURE__ */ jsx44(
3133
3137
  "div",
3134
3138
  {
3135
3139
  className: twMerge14(
3136
- "h-full rounded-[var(--border-radius-full)] transition-all duration-300",
3140
+ "h-full rounded-full transition-all duration-300",
3137
3141
  fillStyles[variant]
3138
3142
  ),
3139
3143
  style: { width: `${clampedValue}%` }
@@ -3158,26 +3162,26 @@ import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
3158
3162
  var variantConfig2 = {
3159
3163
  info: {
3160
3164
  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)]",
3165
+ containerClass: "bg-(--color-banner-info-bg) border-(--color-banner-info-border) text-(--color-banner-info-text)",
3166
+ iconClass: "text-(--color-banner-info-icon)",
3163
3167
  role: "status"
3164
3168
  },
3165
3169
  warning: {
3166
3170
  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)]",
3171
+ containerClass: "bg-(--color-banner-warning-bg) border-(--color-banner-warning-border) text-(--color-banner-warning-text)",
3172
+ iconClass: "text-(--color-banner-warning-icon)",
3169
3173
  role: "alert"
3170
3174
  },
3171
3175
  danger: {
3172
3176
  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)]",
3177
+ containerClass: "bg-(--color-banner-danger-bg) border-(--color-banner-danger-border) text-(--color-banner-danger-text)",
3178
+ iconClass: "text-(--color-banner-danger-icon)",
3175
3179
  role: "alert"
3176
3180
  },
3177
3181
  success: {
3178
3182
  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)]",
3183
+ containerClass: "bg-(--color-banner-success-bg) border-(--color-banner-success-border) text-(--color-banner-success-text)",
3184
+ iconClass: "text-(--color-banner-success-icon)",
3181
3185
  role: "status"
3182
3186
  }
3183
3187
  };
@@ -3203,8 +3207,8 @@ function Banner({
3203
3207
  {
3204
3208
  role: config.role,
3205
3209
  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)]",
3210
+ "flex items-start gap-3 rounded-lg border px-4 py-3",
3211
+ "text-sm",
3208
3212
  config.containerClass,
3209
3213
  className
3210
3214
  ),
@@ -3218,7 +3222,7 @@ function Banner({
3218
3222
  }
3219
3223
  ),
3220
3224
  /* @__PURE__ */ jsxs30("div", { className: "flex-1", children: [
3221
- title && /* @__PURE__ */ jsxs30("span", { className: "font-[number:var(--font-weight-medium)]", children: [
3225
+ title && /* @__PURE__ */ jsxs30("span", { className: "font-medium", children: [
3222
3226
  title,
3223
3227
  " \u2014 "
3224
3228
  ] }),
@@ -3229,7 +3233,7 @@ function Banner({
3229
3233
  {
3230
3234
  type: "button",
3231
3235
  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",
3236
+ 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
3237
  "aria-label": "Dismiss",
3234
3238
  children: /* @__PURE__ */ jsx45(X3, { size: 16, "aria-hidden": "true" })
3235
3239
  }
@@ -3245,13 +3249,13 @@ import { Fragment as Fragment12, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-
3245
3249
  var sizeConfig = {
3246
3250
  sm: {
3247
3251
  padding: "p-3",
3248
- labelClass: "text-[length:var(--font-size-xs)]",
3249
- valueClass: "text-[length:var(--font-size-xl)]"
3252
+ labelClass: "text-xs",
3253
+ valueClass: "text-xl"
3250
3254
  },
3251
3255
  md: {
3252
3256
  padding: "p-4",
3253
- labelClass: "text-[length:var(--font-size-sm)]",
3254
- valueClass: "text-[length:var(--font-size-2xl)]"
3257
+ labelClass: "text-sm",
3258
+ valueClass: "text-2xl"
3255
3259
  }
3256
3260
  };
3257
3261
  function MetricCard({
@@ -3264,19 +3268,19 @@ function MetricCard({
3264
3268
  }) {
3265
3269
  const config = sizeConfig[size];
3266
3270
  const containerClass = twMerge16(
3267
- "bg-[var(--color-surface-default)] border border-[var(--color-border-default)] rounded-[var(--border-radius-lg)] shadow-sm",
3271
+ "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg shadow-sm",
3268
3272
  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",
3273
+ 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
3274
  className
3271
3275
  );
3272
3276
  const content = /* @__PURE__ */ jsxs31(Fragment12, { children: [
3273
- /* @__PURE__ */ jsx46("div", { className: twMerge16(config.labelClass, "text-[var(--color-text-secondary)]"), children: label }),
3277
+ /* @__PURE__ */ jsx46("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
3274
3278
  /* @__PURE__ */ jsx46(
3275
3279
  "div",
3276
3280
  {
3277
3281
  className: twMerge16(
3278
3282
  config.valueClass,
3279
- "font-[number:var(--font-weight-semibold)] text-[var(--color-text-primary)] mt-1 tabular-nums"
3283
+ "font-semibold text-(--color-text-primary) mt-1 tabular-nums"
3280
3284
  ),
3281
3285
  children: value
3282
3286
  }
@@ -3301,12 +3305,12 @@ function SectionHeader({
3301
3305
  "div",
3302
3306
  {
3303
3307
  className: twMerge17(
3304
- "flex flex-wrap items-center gap-[var(--spacing-3)] py-[var(--spacing-4)]",
3308
+ "flex flex-wrap items-center gap-3 py-4",
3305
3309
  className
3306
3310
  ),
3307
3311
  children: [
3308
3312
  /* @__PURE__ */ jsx47(H2, { children: title }),
3309
- children && /* @__PURE__ */ jsx47("div", { className: "ml-auto flex flex-wrap items-center gap-[var(--spacing-2)]", children })
3313
+ children && /* @__PURE__ */ jsx47("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
3310
3314
  ]
3311
3315
  }
3312
3316
  );
@@ -3359,7 +3363,7 @@ function CheckIcon2() {
3359
3363
  "svg",
3360
3364
  {
3361
3365
  "aria-hidden": "true",
3362
- className: "h-4 w-4 text-[var(--color-text-inverse)]",
3366
+ className: "h-4 w-4 text-(--color-text-inverse)",
3363
3367
  viewBox: "0 0 16 16",
3364
3368
  fill: "none",
3365
3369
  stroke: "currentColor",
@@ -3389,7 +3393,7 @@ function FormWizardProgress({ labels }) {
3389
3393
  "aria-hidden": "true",
3390
3394
  className: [
3391
3395
  "h-0.5 flex-1",
3392
- index <= currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
3396
+ index <= currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
3393
3397
  ].join(" ")
3394
3398
  }
3395
3399
  ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" }),
@@ -3398,11 +3402,11 @@ function FormWizardProgress({ labels }) {
3398
3402
  {
3399
3403
  className: [
3400
3404
  "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)]",
3405
+ "text-sm font-medium",
3402
3406
  "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)]" : ""
3407
+ isCompleted ? "bg-(--color-brand-primary) text-(--color-text-inverse)" : "",
3408
+ isCurrent ? "border-2 border-(--color-brand-primary) bg-(--color-surface-default) text-(--color-brand-primary)" : "",
3409
+ isFuture ? "border-2 border-(--color-border-default) bg-(--color-surface-default) text-(--color-text-tertiary)" : ""
3406
3410
  ].join(" "),
3407
3411
  "aria-hidden": "true",
3408
3412
  children: isCompleted ? /* @__PURE__ */ jsx49(CheckIcon2, {}) : index + 1
@@ -3414,7 +3418,7 @@ function FormWizardProgress({ labels }) {
3414
3418
  "aria-hidden": "true",
3415
3419
  className: [
3416
3420
  "h-0.5 flex-1",
3417
- index < currentStep ? "bg-[var(--color-brand-primary)]" : "bg-[var(--color-border-default)]"
3421
+ index < currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
3418
3422
  ].join(" ")
3419
3423
  }
3420
3424
  ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" })
@@ -3423,8 +3427,8 @@ function FormWizardProgress({ labels }) {
3423
3427
  "span",
3424
3428
  {
3425
3429
  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)]"
3430
+ "mt-2 text-center text-sm",
3431
+ isCurrent ? "font-semibold text-(--color-text-primary)" : "font-normal text-(--color-text-secondary)"
3428
3432
  ].join(" "),
3429
3433
  children: label
3430
3434
  }
@@ -3444,7 +3448,7 @@ function FormWizardNav({
3444
3448
  submitLabel = "Submit"
3445
3449
  }) {
3446
3450
  const { canGoBack, goBack, isLastStep } = useFormWizard();
3447
- return /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-end gap-[var(--spacing-3)]", children: [
3451
+ return /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-end gap-3", children: [
3448
3452
  canGoBack && /* @__PURE__ */ jsx50(
3449
3453
  Button,
3450
3454
  {