@olundot/ui 0.2.0 → 0.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 (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/index.d.ts +21 -21
  3. package/dist/index.js +183 -176
  4. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,6 +1,13 @@
1
1
  // src/lib/utils.ts
2
2
  import { clsx } from "clsx";
3
- import { twMerge } from "tailwind-merge";
3
+ import { extendTailwindMerge } from "tailwind-merge";
4
+ var twMerge = extendTailwindMerge({
5
+ extend: {
6
+ classGroups: {
7
+ "font-size": ["text-body-lg", "text-body-md", "text-body-sm", "text-badge-count"]
8
+ }
9
+ }
10
+ });
4
11
  function cn(...inputs) {
5
12
  return twMerge(clsx(inputs));
6
13
  }
@@ -16,8 +23,8 @@ var buttonVariants = cva(
16
23
  "inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-[var(--radius-sm)] border font-medium",
17
24
  "transition-[background-color,border-color,color,box-shadow] motion-reduce:transition-none",
18
25
  "focus-visible:outline-none focus-visible:border-[var(--focus-ring)] focus-visible:shadow-[0_0_0_1px_var(--focus-ring)]",
19
- "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-[var(--text-disabled)]",
20
- "aria-disabled:cursor-not-allowed aria-disabled:border-[var(--border-subtle)] aria-disabled:bg-[var(--action-disabled-bg)] aria-disabled:text-[var(--text-disabled)]",
26
+ "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
27
+ "aria-disabled:cursor-not-allowed aria-disabled:border-[var(--border-subtle)] aria-disabled:bg-[var(--action-disabled-bg)] aria-disabled:text-text-disabled",
21
28
  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
22
29
  ].join(" "),
23
30
  {
@@ -25,7 +32,7 @@ var buttonVariants = cva(
25
32
  variant: {
26
33
  primary: "border-[var(--accent-solid)] bg-[var(--accent-solid)] text-[var(--accent-on-solid)] hover:bg-[var(--accent-hover)] hover:border-[var(--accent-hover)]",
27
34
  outline: "border-[var(--border)] bg-transparent text-foreground hover:border-[var(--border-strong)] hover:bg-[var(--action-hover)]",
28
- ghost: "border-transparent bg-transparent text-[var(--text-secondary)] hover:bg-[var(--action-hover)] hover:text-foreground",
35
+ ghost: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
29
36
  danger: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
30
37
  emergency: "border-[var(--error)] bg-[var(--error)] text-[var(--error-contrast)] hover:bg-[var(--error-hover)] hover:border-[var(--error-hover)]",
31
38
  subtle: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-foreground hover:border-[var(--border)] hover:bg-[var(--action-hover)]",
@@ -35,12 +42,12 @@ var buttonVariants = cva(
35
42
  link: "border-transparent bg-transparent px-0 text-[var(--accent-fg)] underline-offset-4 hover:underline"
36
43
  },
37
44
  size: {
38
- xs: "h-[32px] gap-[6px] px-[var(--space-1-5)] text-[12px] [&_svg]:size-[14px] [&_svg]:stroke-[1.75]",
39
- sm: "h-[34px] gap-[6px] px-[var(--space-2)] text-[13px] [&_svg]:size-[16px]",
40
- md: "h-[38px] gap-[6px] px-[var(--space-2)] text-[13px] [&_svg]:size-[16px]",
41
- lg: "h-[44px] gap-[var(--space-1)] px-[var(--space-2)] text-[15px] [&_svg]:size-[18px]",
45
+ xs: "h-[32px] gap-[6px] px-pad-compact-x py-pad-compact-y text-[12px] [&_svg]:size-[14px] [&_svg]:stroke-[1.75]",
46
+ sm: "h-[34px] gap-[6px] px-pad-compact-x py-pad-compact-y text-body-sm [&_svg]:size-[16px]",
47
+ md: "h-[38px] gap-[6px] px-pad-default-x py-pad-default-y text-body-sm [&_svg]:size-[16px]",
48
+ lg: "h-[44px] gap-[var(--space-1)] px-pad-default-x py-pad-default-y text-[15px] [&_svg]:size-[18px]",
42
49
  xl: "h-[48px] gap-[var(--space-1)] px-5 text-[15px] [&_svg]:size-[18px]",
43
- default: "h-[38px] gap-[6px] px-[var(--space-2)] text-[13px] [&_svg]:size-[16px]",
50
+ default: "h-[38px] gap-[6px] px-pad-default-x py-pad-default-y text-body-sm [&_svg]:size-[16px]",
44
51
  icon: "size-[44px] p-0 [&_svg]:size-[18px]",
45
52
  "icon-xs": "size-[32px] p-0 [&_svg]:size-[14px] [&_svg]:stroke-[1.75]"
46
53
  }
@@ -187,10 +194,10 @@ var inputVariants = cva2(
187
194
  [
188
195
  "flex rounded-[var(--radius-sm)] border",
189
196
  "border-[var(--border)] bg-[var(--bg-surface)] text-foreground",
190
- "placeholder:text-[var(--text-disabled)]",
197
+ "placeholder:text-text-disabled",
191
198
  "transition-[border-color,box-shadow] motion-reduce:transition-none",
192
199
  "focus:outline-none focus:border-[var(--focus-ring)] focus:shadow-[0_0_0_1px_var(--focus-ring)]",
193
- "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-[var(--text-disabled)]",
200
+ "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
194
201
  "read-only:border-[var(--border-subtle)] read-only:bg-[var(--bg-raised)] read-only:focus:border-[var(--border-subtle)] read-only:focus:shadow-none",
195
202
  "file:border-0 file:bg-transparent file:text-sm file:font-medium",
196
203
  "data-[state=error]:border-[var(--error)] data-[state=error]:focus:shadow-[0_0_0_1px_var(--error)]",
@@ -202,9 +209,9 @@ var inputVariants = cva2(
202
209
  {
203
210
  variants: {
204
211
  size: {
205
- sm: "h-[32px] px-[var(--space-1-5)] text-[13px]",
206
- md: "h-[38px] px-[var(--space-2)] text-sm",
207
- lg: "h-[44px] px-[var(--space-2)] text-[15px]"
212
+ sm: "h-[32px] px-pad-compact-x text-body-sm",
213
+ md: "h-[38px] px-pad-default-x text-sm",
214
+ lg: "h-[44px] px-pad-default-x text-[15px]"
208
215
  },
209
216
  fullWidth: {
210
217
  true: "w-full",
@@ -215,11 +222,11 @@ var inputVariants = cva2(
215
222
  }
216
223
  );
217
224
  var inputMessageVariants = cva2(
218
- "flex items-start gap-[var(--space-0-5)] text-xs leading-[1.4]",
225
+ "flex items-start gap-[var(--space-0-5)] text-xs leading-snug",
219
226
  {
220
227
  variants: {
221
228
  state: {
222
- default: "text-[var(--text-tertiary)]",
229
+ default: "text-text-tertiary",
223
230
  success: "text-[var(--success)]",
224
231
  error: "text-[var(--error)]"
225
232
  },
@@ -327,7 +334,7 @@ var Input = React3.forwardRef(
327
334
  "data-slot": "input-label",
328
335
  "data-required": required ? "true" : void 0,
329
336
  htmlFor: inputId,
330
- className: "text-sm font-medium leading-[1.35] text-foreground",
337
+ className: "text-sm font-medium leading-snug text-foreground",
331
338
  children: [
332
339
  label,
333
340
  required ? /* @__PURE__ */ jsx3(
@@ -397,7 +404,7 @@ var fileUploadZoneVariants = cva3(
397
404
  "data-[dragging=true]:border-[var(--border-accent)] data-[dragging=true]:bg-[var(--action-selected)]",
398
405
  "data-[error=true]:border-[var(--error)]",
399
406
  "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:border-[var(--border-subtle)] data-[disabled=true]:bg-[var(--bg-raised)]",
400
- "data-[disabled=true]:text-[var(--text-disabled)]"
407
+ "data-[disabled=true]:text-text-disabled"
401
408
  ].join(" "),
402
409
  {
403
410
  variants: {
@@ -414,13 +421,13 @@ var fileUploadZoneVariants = cva3(
414
421
  var fileUploadIconVariants = cva3(
415
422
  [
416
423
  "inline-flex items-center justify-center rounded-[var(--radius-full)]",
417
- "border border-[var(--border)] bg-[var(--bg-raised)] text-[var(--text-secondary)]",
424
+ "border border-[var(--border)] bg-[var(--bg-raised)] text-text-secondary",
418
425
  "transition-[border-color,color,background-color] motion-reduce:transition-none",
419
426
  "group-hover/file-upload:border-[var(--border-accent)] group-hover/file-upload:text-foreground",
420
427
  "group-data-[has-file=true]/file-upload:border-[var(--border-accent)] group-data-[has-file=true]/file-upload:text-[var(--accent-fg)]",
421
428
  "group-data-[dragging=true]/file-upload:border-[var(--border-accent)] group-data-[dragging=true]/file-upload:text-[var(--accent-fg)]",
422
429
  "group-data-[error=true]/file-upload:border-[var(--error)] group-data-[error=true]/file-upload:text-[var(--error)]",
423
- "group-data-[disabled=true]/file-upload:border-[var(--border-subtle)] group-data-[disabled=true]/file-upload:text-[var(--text-disabled)]"
430
+ "group-data-[disabled=true]/file-upload:border-[var(--border-subtle)] group-data-[disabled=true]/file-upload:text-text-disabled"
424
431
  ].join(" "),
425
432
  {
426
433
  variants: {
@@ -437,8 +444,8 @@ var fileUploadIconVariants = cva3(
437
444
  var fileUploadTitleVariants = cva3("", {
438
445
  variants: {
439
446
  size: {
440
- default: "text-sm font-semibold leading-[1.4] text-foreground",
441
- compact: "text-sm font-semibold leading-[1.35] text-foreground"
447
+ default: "text-sm font-semibold leading-snug text-foreground",
448
+ compact: "text-sm font-semibold leading-snug text-foreground"
442
449
  }
443
450
  },
444
451
  defaultVariants: {
@@ -448,8 +455,8 @@ var fileUploadTitleVariants = cva3("", {
448
455
  var fileUploadHintVariants = cva3("", {
449
456
  variants: {
450
457
  size: {
451
- default: "max-w-[420px] text-xs leading-[1.5] text-[var(--text-secondary)]",
452
- compact: "max-w-[420px] text-xs leading-[1.45] text-[var(--text-secondary)]"
458
+ default: "max-w-[420px] text-xs leading-normal text-text-secondary",
459
+ compact: "max-w-[420px] text-xs leading-normal text-text-secondary"
453
460
  }
454
461
  },
455
462
  defaultVariants: {
@@ -457,7 +464,7 @@ var fileUploadHintVariants = cva3("", {
457
464
  }
458
465
  });
459
466
  var fileUploadFilenameVariants = cva3(
460
- "font-[family-name:var(--font-display)] text-[13px] leading-[1.35] text-[var(--accent-fg)] [font-variant-numeric:tabular-nums]",
467
+ "font-[family-name:var(--font-display)] text-body-sm leading-snug text-[var(--accent-fg)] [font-variant-numeric:tabular-nums]",
461
468
  {
462
469
  variants: {
463
470
  size: {
@@ -684,7 +691,7 @@ var FileUploadZone = React4.forwardRef(
684
691
  "span",
685
692
  {
686
693
  "data-slot": "file-upload-zone-error",
687
- className: "mt-[var(--space-0-5)] text-xs leading-[1.45] text-[var(--error)]",
694
+ className: "mt-[var(--space-0-5)] text-xs leading-normal text-[var(--error)]",
688
695
  children: error
689
696
  }
690
697
  ) : null
@@ -750,14 +757,14 @@ var inlineAlertVariants = cva4(
750
757
  [
751
758
  "inline-flex w-fit max-w-full items-start gap-[var(--space-1)]",
752
759
  "rounded-[var(--radius-sm)]",
753
- "text-[12px] font-medium leading-[1.35]"
760
+ "text-[12px] font-medium leading-snug"
754
761
  ].join(" "),
755
762
  {
756
763
  variants: {
757
764
  variant: inlineAlertSurfaceVariantClasses,
758
765
  surface: {
759
766
  filled: "px-[var(--space-3)] py-[var(--space-2)] text-foreground",
760
- plain: "bg-transparent px-0 py-[var(--space-0-5)] text-[var(--text-secondary)]"
767
+ plain: "bg-transparent px-0 py-[var(--space-0-5)] text-text-secondary"
761
768
  }
762
769
  },
763
770
  compoundVariants: [
@@ -830,7 +837,7 @@ var Alert = React5.forwardRef(
830
837
  "div",
831
838
  {
832
839
  "data-slot": "alert-title",
833
- className: "text-[14px] font-semibold leading-[1.35] text-foreground",
840
+ className: "text-[14px] font-semibold leading-snug text-foreground",
834
841
  children: title
835
842
  }
836
843
  ) : null,
@@ -839,7 +846,7 @@ var Alert = React5.forwardRef(
839
846
  {
840
847
  "data-slot": "alert-body",
841
848
  className: cn(
842
- "text-[13px] font-normal leading-[1.45] text-[var(--text-secondary)]",
849
+ "text-body-sm font-normal leading-normal text-text-secondary",
843
850
  title ? "mt-[var(--space-1)]" : void 0
844
851
  ),
845
852
  children
@@ -854,7 +861,7 @@ var Alert = React5.forwardRef(
854
861
  "data-slot": "alert-dismiss",
855
862
  className: cn(
856
863
  "absolute right-[var(--space-2)] top-[var(--space-2)] inline-flex size-[28px] shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius-sm)]",
857
- "text-[var(--text-tertiary)] transition-colors hover:bg-[var(--action-hover)] hover:text-foreground",
864
+ "text-text-tertiary transition-colors hover:bg-[var(--action-hover)] hover:text-foreground",
858
865
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]"
859
866
  ),
860
867
  onClick: onDismiss,
@@ -916,12 +923,12 @@ var textareaVariants = cva5(
916
923
  [
917
924
  "flex resize-y rounded-[var(--radius-sm)] border",
918
925
  "border-[var(--border)] bg-[var(--bg-surface)] text-foreground",
919
- "px-[var(--space-2)] py-[var(--space-1-5)] text-sm leading-[1.45]",
920
- "placeholder:text-[var(--text-disabled)]",
926
+ "px-pad-default-x py-pad-default-y text-sm leading-normal",
927
+ "placeholder:text-text-disabled",
921
928
  "transition-[border-color,box-shadow] motion-reduce:transition-none",
922
929
  "focus:outline-none focus:border-[var(--focus-ring)] focus:shadow-[0_0_0_1px_var(--focus-ring)]",
923
- "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-[var(--text-disabled)]",
924
- "read-only:cursor-default read-only:border-[var(--border-subtle)] read-only:bg-[var(--bg-raised)] read-only:text-[var(--text-secondary)] read-only:focus:border-[var(--border-subtle)] read-only:focus:shadow-none",
930
+ "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
931
+ "read-only:cursor-default read-only:border-[var(--border-subtle)] read-only:bg-[var(--bg-raised)] read-only:text-text-secondary read-only:focus:border-[var(--border-subtle)] read-only:focus:shadow-none",
925
932
  "data-[state=error]:border-[var(--error)] data-[state=error]:focus:shadow-[0_0_0_1px_var(--error)]",
926
933
  "data-[state=success]:border-[var(--success)] data-[state=success]:focus:shadow-[0_0_0_1px_var(--success)]",
927
934
  "aria-[invalid=true]:border-[var(--error)] aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--error)]",
@@ -947,11 +954,11 @@ var textareaVariants = cva5(
947
954
  }
948
955
  );
949
956
  var textareaMessageVariants = cva5(
950
- "flex items-start gap-[var(--space-0-5)] text-xs leading-[1.4]",
957
+ "flex items-start gap-[var(--space-0-5)] text-xs leading-snug",
951
958
  {
952
959
  variants: {
953
960
  state: {
954
- default: "ml-[var(--space-2)] text-[var(--text-tertiary)]",
961
+ default: "ml-[var(--space-2)] text-text-tertiary",
955
962
  success: "text-[var(--success)]",
956
963
  error: "text-[var(--error)]"
957
964
  }
@@ -1058,7 +1065,7 @@ var Textarea = React6.forwardRef(
1058
1065
  "data-slot": "textarea-label",
1059
1066
  "data-required": required ? "true" : void 0,
1060
1067
  htmlFor: textareaId,
1061
- className: "text-sm font-medium leading-[1.35] text-foreground",
1068
+ className: "text-sm font-medium leading-snug text-foreground",
1062
1069
  children: label
1063
1070
  }
1064
1071
  ) : null,
@@ -1102,7 +1109,7 @@ var Textarea = React6.forwardRef(
1102
1109
  {
1103
1110
  id: counterId,
1104
1111
  "data-slot": "textarea-counter",
1105
- className: "shrink-0 text-xs leading-[1.4] text-[var(--text-tertiary)]",
1112
+ className: "shrink-0 text-xs leading-snug text-text-tertiary",
1106
1113
  children: [
1107
1114
  resolvedLength,
1108
1115
  "/",
@@ -1138,7 +1145,7 @@ var selectVariants = cva6(
1138
1145
  "[background-color:var(--bg-surface)] [border-color:var(--border)] [color:var(--text-primary)]",
1139
1146
  "transition-[border-color,box-shadow,background-color,color] motion-reduce:transition-none",
1140
1147
  "focus-visible:outline-none focus-visible:border-[var(--focus-ring)] focus-visible:shadow-[0_0_0_1px_var(--focus-ring)]",
1141
- "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-[var(--text-disabled)]",
1148
+ "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
1142
1149
  "disabled:[background-color:var(--action-disabled-bg)] disabled:[border-color:var(--border-subtle)] disabled:[color:var(--text-disabled)]",
1143
1150
  "aria-[invalid=true]:border-[var(--error)] aria-[invalid=true]:focus-visible:shadow-[0_0_0_1px_var(--error)]",
1144
1151
  "aria-[invalid=true]:[border-color:var(--error)]",
@@ -1150,9 +1157,9 @@ var selectVariants = cva6(
1150
1157
  {
1151
1158
  variants: {
1152
1159
  size: {
1153
- sm: "h-[32px] px-[var(--space-1-5)] text-[13px]",
1154
- md: "h-[34px] px-[var(--space-2)] text-sm",
1155
- lg: "h-[38px] px-[var(--space-2)] text-sm"
1160
+ sm: "h-[32px] px-pad-compact-x text-body-sm",
1161
+ md: "h-[34px] px-pad-default-x text-sm",
1162
+ lg: "h-[38px] px-pad-default-x text-sm"
1156
1163
  },
1157
1164
  fullWidth: {
1158
1165
  true: "w-full",
@@ -1171,11 +1178,11 @@ var selectVariants = cva6(
1171
1178
  }
1172
1179
  );
1173
1180
  var selectMessageVariants = cva6(
1174
- "flex items-start gap-[var(--space-0-5)] text-xs leading-[1.4]",
1181
+ "flex items-start gap-[var(--space-0-5)] text-xs leading-snug",
1175
1182
  {
1176
1183
  variants: {
1177
1184
  state: {
1178
- default: "text-[var(--text-tertiary)]",
1185
+ default: "text-text-tertiary",
1179
1186
  success: "text-[var(--success)]",
1180
1187
  error: "text-[var(--error)]"
1181
1188
  },
@@ -1223,7 +1230,7 @@ function SelectItem({
1223
1230
  "focus:bg-[var(--action-hover)] focus:text-foreground",
1224
1231
  "data-[state=checked]:bg-[var(--action-selected)] data-[state=checked]:text-foreground",
1225
1232
  "[&[data-state=checked]>span[data-slot=select-item-dot]]:visible",
1226
- "data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--text-disabled)] data-[disabled]:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--action-disabled-bg)]",
1233
+ "data-[disabled]:cursor-not-allowed data-[disabled]:text-text-disabled data-[disabled]:opacity-100 data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--action-disabled-bg)]",
1227
1234
  "[&>span[data-slot=select-item-text]]:min-w-0"
1228
1235
  ].join(" "),
1229
1236
  className
@@ -1325,7 +1332,7 @@ var Select = React7.forwardRef(
1325
1332
  SelectPrimitive.ScrollUpButton,
1326
1333
  {
1327
1334
  "data-slot": "select-scroll-up",
1328
- className: "flex items-center justify-center border-b border-[var(--border-subtle)] bg-[var(--bg-surface)] py-[var(--space-0-5)] text-[var(--text-tertiary)]",
1335
+ className: "flex items-center justify-center border-b border-[var(--border-subtle)] bg-[var(--bg-surface)] py-[var(--space-0-5)] text-text-tertiary",
1329
1336
  children: /* @__PURE__ */ jsx7(ChevronUp, { "aria-hidden": "true", className: "size-[16px]" })
1330
1337
  }
1331
1338
  ),
@@ -1342,7 +1349,7 @@ var Select = React7.forwardRef(
1342
1349
  SelectPrimitive.ScrollDownButton,
1343
1350
  {
1344
1351
  "data-slot": "select-scroll-down",
1345
- className: "flex items-center justify-center border-t border-[var(--border-subtle)] bg-[var(--bg-surface)] py-[var(--space-0-5)] text-[var(--text-tertiary)]",
1352
+ className: "flex items-center justify-center border-t border-[var(--border-subtle)] bg-[var(--bg-surface)] py-[var(--space-0-5)] text-text-tertiary",
1346
1353
  children: /* @__PURE__ */ jsx7(ChevronDown, { "aria-hidden": "true", className: "size-[16px]" })
1347
1354
  }
1348
1355
  )
@@ -1376,7 +1383,7 @@ var Select = React7.forwardRef(
1376
1383
  {
1377
1384
  "data-slot": "select-value",
1378
1385
  "data-placeholder": hasSelection ? void 0 : "",
1379
- className: "flex-1 min-w-0 truncate text-left text-foreground data-[placeholder]:text-[var(--text-tertiary)] group-disabled:text-[var(--text-disabled)] group-disabled:data-[placeholder]:text-[var(--text-disabled)]",
1386
+ className: "flex-1 min-w-0 truncate text-left text-foreground data-[placeholder]:text-text-tertiary group-disabled:text-text-disabled group-disabled:data-[placeholder]:text-text-disabled",
1380
1387
  children: hasSelection ? selectedOption?.label ?? placeholder : placeholder
1381
1388
  }
1382
1389
  ),
@@ -1385,7 +1392,7 @@ var Select = React7.forwardRef(
1385
1392
  {
1386
1393
  "aria-hidden": "true",
1387
1394
  "data-slot": "select-icon",
1388
- className: "ml-[var(--space-1)] inline-flex size-[14px] shrink-0 items-center justify-center text-[var(--text-tertiary)] group-disabled:text-[var(--text-disabled)]",
1395
+ className: "ml-[var(--space-1)] inline-flex size-[14px] shrink-0 items-center justify-center text-text-tertiary group-disabled:text-text-disabled",
1389
1396
  children: /* @__PURE__ */ jsx7(
1390
1397
  ChevronDown,
1391
1398
  {
@@ -1420,7 +1427,7 @@ var Select = React7.forwardRef(
1420
1427
  "data-slot": "select-label",
1421
1428
  "data-required": required ? "true" : void 0,
1422
1429
  htmlFor: selectId,
1423
- className: "text-sm font-medium leading-[1.35] text-foreground",
1430
+ className: "text-sm font-medium leading-snug text-foreground",
1424
1431
  children: [
1425
1432
  label,
1426
1433
  required ? /* @__PURE__ */ jsx7(
@@ -1488,10 +1495,10 @@ var formFieldVariants = cva7("w-full", {
1488
1495
  layout: "vertical"
1489
1496
  }
1490
1497
  });
1491
- var formFieldLabelClassName = "text-[13px] font-medium leading-[1.35] text-[var(--text-secondary)]";
1498
+ var formFieldLabelClassName = "text-body-sm font-medium leading-snug text-text-secondary";
1492
1499
  var formFieldRequiredClassName = "ml-[2px] text-[var(--semantic-error,var(--error))]";
1493
- var formFieldDescriptionClassName = "text-[12px] leading-[1.4] text-[var(--text-tertiary)]";
1494
- var formFieldErrorClassName = "text-[12px] leading-[1.4] text-[var(--semantic-error,var(--error))]";
1500
+ var formFieldDescriptionClassName = "text-[12px] leading-snug text-text-tertiary";
1501
+ var formFieldErrorClassName = "text-[12px] leading-snug text-[var(--semantic-error,var(--error))]";
1495
1502
  var formFieldControlStackClassName = "flex min-w-0 flex-col gap-[var(--space-0-5)]";
1496
1503
  function FormField({
1497
1504
  label,
@@ -1617,7 +1624,7 @@ var Label = React8.forwardRef(({ htmlFor, required, children, className, ...prop
1617
1624
  "data-slot": "label",
1618
1625
  "data-required": required ? "true" : void 0,
1619
1626
  className: cn(
1620
- "text-[13px] font-medium leading-[1.35] text-[var(--text-secondary)]",
1627
+ "text-body-sm font-medium leading-snug text-text-secondary",
1621
1628
  className
1622
1629
  ),
1623
1630
  ...props,
@@ -1700,7 +1707,7 @@ var Switch = React9.forwardRef(
1700
1707
  "aria-hidden": "true",
1701
1708
  "data-slot": "switch-loading",
1702
1709
  className: "absolute inset-0 flex items-center justify-center",
1703
- children: /* @__PURE__ */ jsx10(Loader22, { className: "size-[14px] animate-spin text-[var(--text-secondary)]" })
1710
+ children: /* @__PURE__ */ jsx10(Loader22, { className: "size-[14px] animate-spin text-text-secondary" })
1704
1711
  }
1705
1712
  ) : null
1706
1713
  ]
@@ -1714,7 +1721,7 @@ var Switch = React9.forwardRef(
1714
1721
  "data-slot": "switch-label",
1715
1722
  className: cn(
1716
1723
  "cursor-pointer select-none text-sm font-medium text-foreground",
1717
- isDisabled && "cursor-not-allowed text-[var(--text-disabled)]"
1724
+ isDisabled && "cursor-not-allowed text-text-disabled"
1718
1725
  ),
1719
1726
  children: [
1720
1727
  label,
@@ -1737,8 +1744,8 @@ var Switch = React9.forwardRef(
1737
1744
  id: descriptionId,
1738
1745
  "data-slot": "switch-description",
1739
1746
  className: cn(
1740
- "ml-[var(--space-1-5)] text-xs font-normal leading-[1.45] text-[var(--text-tertiary)]",
1741
- isDisabled && "text-[var(--text-disabled)]"
1747
+ "ml-[var(--space-1-5)] text-xs font-normal leading-normal text-text-tertiary",
1748
+ isDisabled && "text-text-disabled"
1742
1749
  ),
1743
1750
  children: description
1744
1751
  }
@@ -1976,7 +1983,7 @@ var choiceRowVariants = cva8(
1976
1983
  [
1977
1984
  "group flex min-h-[44px] w-full cursor-pointer items-center gap-[var(--space-1-5)]",
1978
1985
  "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-base)]",
1979
- "px-[var(--space-2)] py-[var(--space-1)] text-left",
1986
+ "px-pad-compact-x py-pad-compact-y text-left",
1980
1987
  "transition-colors motion-reduce:transition-none",
1981
1988
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
1982
1989
  "data-[state=checked]:border-[var(--border-accent)] data-[state=checked]:bg-[var(--action-selected)]",
@@ -2004,9 +2011,9 @@ var choiceMarkerVariants = cva8(
2004
2011
  "transition-colors motion-reduce:transition-none",
2005
2012
  "group-data-[state=checked]:border-[var(--accent-solid)] group-data-[state=checked]:bg-[var(--accent-solid)] group-data-[state=checked]:text-[var(--accent-on-solid)]",
2006
2013
  "group-data-[answer-state=correct]:border-[var(--accent-solid)] group-data-[answer-state=correct]:bg-[var(--accent-solid)] group-data-[answer-state=correct]:text-[var(--accent-on-solid)]",
2007
- "group-disabled:border-[var(--border-subtle)] group-disabled:bg-[var(--action-disabled-bg)] group-disabled:text-[var(--text-disabled)]",
2008
- "group-disabled:group-data-[state=checked]:border-[var(--border-subtle)] group-disabled:group-data-[state=checked]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=checked]:text-[var(--text-disabled)]",
2009
- "group-disabled:group-data-[answer-state=correct]:border-[var(--border-subtle)] group-disabled:group-data-[answer-state=correct]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[answer-state=correct]:text-[var(--text-disabled)]"
2014
+ "group-disabled:border-[var(--border-subtle)] group-disabled:bg-[var(--action-disabled-bg)] group-disabled:text-text-disabled",
2015
+ "group-disabled:group-data-[state=checked]:border-[var(--border-subtle)] group-disabled:group-data-[state=checked]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=checked]:text-text-disabled",
2016
+ "group-disabled:group-data-[answer-state=correct]:border-[var(--border-subtle)] group-disabled:group-data-[answer-state=correct]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[answer-state=correct]:text-text-disabled"
2010
2017
  ].join(" "),
2011
2018
  {
2012
2019
  variants: {
@@ -2098,7 +2105,7 @@ var ChoiceGroup = React12.forwardRef(({ className, options, variant = "default",
2098
2105
  {
2099
2106
  id: bodyId,
2100
2107
  "data-slot": "choice-group-body",
2101
- className: "text-sm font-medium leading-[1.35] text-foreground group-disabled:text-[var(--text-disabled)]",
2108
+ className: "text-sm font-medium leading-snug text-foreground group-disabled:text-text-disabled",
2102
2109
  children: option.body
2103
2110
  }
2104
2111
  ),
@@ -2107,7 +2114,7 @@ var ChoiceGroup = React12.forwardRef(({ className, options, variant = "default",
2107
2114
  {
2108
2115
  id: descriptionId,
2109
2116
  "data-slot": "choice-group-description",
2110
- className: "text-sm font-normal leading-[1.45] text-[var(--text-secondary)] group-disabled:text-[var(--text-disabled)]",
2117
+ className: "text-sm font-normal leading-normal text-text-secondary group-disabled:text-text-disabled",
2111
2118
  children: option.description
2112
2119
  }
2113
2120
  ) : null
@@ -2195,7 +2202,7 @@ var ChoiceGroup = React12.forwardRef(({ className, options, variant = "default",
2195
2202
  {
2196
2203
  id: bodyId,
2197
2204
  "data-slot": "choice-group-body",
2198
- className: "text-sm font-medium leading-[1.35] text-foreground group-disabled:text-[var(--text-disabled)]",
2205
+ className: "text-sm font-medium leading-snug text-foreground group-disabled:text-text-disabled",
2199
2206
  children: option.body
2200
2207
  }
2201
2208
  ),
@@ -2204,7 +2211,7 @@ var ChoiceGroup = React12.forwardRef(({ className, options, variant = "default",
2204
2211
  {
2205
2212
  id: descriptionId,
2206
2213
  "data-slot": "choice-group-description",
2207
- className: "text-sm font-normal leading-[1.45] text-[var(--text-secondary)] group-disabled:text-[var(--text-disabled)]",
2214
+ className: "text-sm font-normal leading-normal text-text-secondary group-disabled:text-text-disabled",
2208
2215
  children: option.description
2209
2216
  }
2210
2217
  ) : null
@@ -2226,7 +2233,7 @@ import { jsx as jsx14 } from "react/jsx-runtime";
2226
2233
  var cardVariants = cva9(
2227
2234
  [
2228
2235
  "rounded-[var(--radius-md)] border border-[var(--border-subtle)]",
2229
- "bg-[var(--bg-surface)] p-[var(--space-3)] text-foreground"
2236
+ "bg-[var(--bg-surface)] px-pad-roomy-x py-pad-roomy-y text-foreground"
2230
2237
  ].join(" "),
2231
2238
  {
2232
2239
  variants: {
@@ -2279,7 +2286,7 @@ var CardTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE_
2279
2286
  ref,
2280
2287
  "data-slot": "card-title",
2281
2288
  className: cn(
2282
- "text-base font-semibold leading-[1.35] text-foreground",
2289
+ "text-base font-semibold leading-snug text-foreground",
2283
2290
  className
2284
2291
  ),
2285
2292
  ...props
@@ -2292,7 +2299,7 @@ var CardDescription = React13.forwardRef(({ className, ...props }, ref) => /* @_
2292
2299
  ref,
2293
2300
  "data-slot": "card-description",
2294
2301
  className: cn(
2295
- "text-sm leading-[1.45] text-[var(--text-tertiary)]",
2302
+ "text-sm leading-compact text-text-tertiary",
2296
2303
  className
2297
2304
  ),
2298
2305
  ...props
@@ -2376,7 +2383,7 @@ var PageHeader = React14.forwardRef(
2376
2383
  "div",
2377
2384
  {
2378
2385
  "data-slot": "page-header-breadcrumb",
2379
- className: "min-w-0 text-[13px] leading-[1.45] text-[var(--text-tertiary)]",
2386
+ className: "min-w-0 text-body-sm leading-compact text-text-tertiary",
2380
2387
  children: breadcrumb
2381
2388
  }
2382
2389
  ) : null
@@ -2387,7 +2394,7 @@ var PageHeader = React14.forwardRef(
2387
2394
  "h1",
2388
2395
  {
2389
2396
  "data-slot": "page-header-title",
2390
- className: "max-w-full break-words font-[family-name:var(--font-display)] text-[28px] font-semibold leading-[1.2] text-foreground",
2397
+ className: "max-w-full break-words font-[family-name:var(--font-display)] text-[28px] font-semibold leading-tight text-foreground",
2391
2398
  children: title
2392
2399
  }
2393
2400
  ),
@@ -2395,7 +2402,7 @@ var PageHeader = React14.forwardRef(
2395
2402
  "p",
2396
2403
  {
2397
2404
  "data-slot": "page-header-subtitle",
2398
- className: "mt-[var(--space-1)] max-w-[760px] break-words text-[14px] leading-[1.45] text-[var(--text-tertiary)]",
2405
+ className: "mt-[var(--space-1)] max-w-[760px] break-words text-[14px] leading-normal text-text-tertiary",
2399
2406
  children: subtitle
2400
2407
  }
2401
2408
  ) : null,
@@ -2403,7 +2410,7 @@ var PageHeader = React14.forwardRef(
2403
2410
  "div",
2404
2411
  {
2405
2412
  "data-slot": "page-header-meta",
2406
- className: "mt-[var(--space-1)] flex flex-wrap items-center gap-[var(--space-1)] text-xs leading-[1.45] text-[var(--text-tertiary)]",
2413
+ className: "mt-[var(--space-1)] flex flex-wrap items-center gap-[var(--space-1)] text-xs leading-compact text-text-tertiary",
2407
2414
  children: meta
2408
2415
  }
2409
2416
  ) : null
@@ -2433,11 +2440,11 @@ var circleBaseClassName = [
2433
2440
  ].join(" ");
2434
2441
  var connectorBaseClassName = "h-px flex-1 rounded-[var(--radius-full)] transition-colors motion-reduce:transition-none";
2435
2442
  var stepLabelBaseClassName = [
2436
- "max-w-full break-words text-[12px] leading-[1.35]",
2443
+ "max-w-full break-words text-[12px] leading-snug",
2437
2444
  "[display:-webkit-box] overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2]"
2438
2445
  ].join(" ");
2439
2446
  var stepDescriptionBaseClassName = [
2440
- "max-w-full text-[12px] leading-[1.35] text-[var(--text-disabled)]",
2447
+ "max-w-full text-[12px] leading-snug text-text-disabled",
2441
2448
  "[display:-webkit-box] overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2]"
2442
2449
  ].join(" ");
2443
2450
  var stepCircleStyle = { width: 28, height: 28 };
@@ -2470,7 +2477,7 @@ function getStepCircleClassName(state) {
2470
2477
  default:
2471
2478
  return cn(
2472
2479
  circleBaseClassName,
2473
- "border-[var(--border-subtle)] bg-[var(--bg-raised)] text-[var(--text-disabled)]"
2480
+ "border-[var(--border-subtle)] bg-[var(--bg-raised)] text-text-disabled"
2474
2481
  );
2475
2482
  }
2476
2483
  }
@@ -2482,7 +2489,7 @@ function getStepLabelClassName(state) {
2482
2489
  return cn(stepLabelBaseClassName, "font-medium text-foreground");
2483
2490
  case "upcoming":
2484
2491
  default:
2485
- return cn(stepLabelBaseClassName, "text-[var(--text-disabled)]");
2492
+ return cn(stepLabelBaseClassName, "text-text-disabled");
2486
2493
  }
2487
2494
  }
2488
2495
  function getConnectorClassName(isActivePath) {
@@ -2562,7 +2569,7 @@ var WizardLayout = React15.forwardRef(
2562
2569
  "p",
2563
2570
  {
2564
2571
  "data-slot": "wizard-layout-progress",
2565
- className: "text-[12px] font-semibold leading-[1.4] text-foreground",
2572
+ className: "text-[12px] font-semibold leading-snug text-foreground",
2566
2573
  children: [
2567
2574
  progressStepNumber,
2568
2575
  "\uB2E8\uACC4 / ",
@@ -2575,7 +2582,7 @@ var WizardLayout = React15.forwardRef(
2575
2582
  "div",
2576
2583
  {
2577
2584
  "data-slot": "wizard-layout-status",
2578
- className: "text-[12px] leading-[1.45] text-[var(--text-tertiary)]",
2585
+ className: "text-[12px] leading-compact text-text-tertiary",
2579
2586
  children: status
2580
2587
  }
2581
2588
  ) : null
@@ -2602,8 +2609,8 @@ var WizardLayout = React15.forwardRef(
2602
2609
  "data-slot": "wizard-layout-current-step",
2603
2610
  className: "min-w-0 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] bg-[var(--bg-raised)] px-[var(--space-2)] py-[var(--space-1-5)]",
2604
2611
  children: [
2605
- /* @__PURE__ */ jsx16("p", { className: "break-words text-sm font-semibold leading-[1.4] text-foreground", children: currentStep.label }),
2606
- currentStep.description ? /* @__PURE__ */ jsx16("p", { className: "mt-[var(--space-0-5)] break-words text-[12px] leading-[1.45] text-[var(--text-tertiary)]", children: currentStep.description }) : null
2612
+ /* @__PURE__ */ jsx16("p", { className: "break-words text-sm font-semibold leading-snug text-foreground", children: currentStep.label }),
2613
+ currentStep.description ? /* @__PURE__ */ jsx16("p", { className: "mt-[var(--space-0-5)] break-words text-[12px] leading-normal text-text-tertiary", children: currentStep.description }) : null
2607
2614
  ]
2608
2615
  }
2609
2616
  ) : null
@@ -2615,7 +2622,7 @@ var WizardLayout = React15.forwardRef(
2615
2622
  "p",
2616
2623
  {
2617
2624
  "data-slot": "wizard-layout-progress",
2618
- className: "text-[12px] font-semibold leading-[1.4] text-foreground",
2625
+ className: "text-[12px] font-semibold leading-snug text-foreground",
2619
2626
  children: [
2620
2627
  progressStepNumber,
2621
2628
  "\uB2E8\uACC4 / ",
@@ -2628,7 +2635,7 @@ var WizardLayout = React15.forwardRef(
2628
2635
  "div",
2629
2636
  {
2630
2637
  "data-slot": "wizard-layout-status",
2631
- className: "text-[12px] leading-[1.45] text-[var(--text-tertiary)]",
2638
+ className: "text-[12px] leading-normal text-text-tertiary",
2632
2639
  children: status
2633
2640
  }
2634
2641
  ) : null
@@ -2773,12 +2780,12 @@ var tabsListVariants = cva10(
2773
2780
  var tabsTriggerVariants = cva10(
2774
2781
  [
2775
2782
  "relative inline-flex shrink-0 cursor-pointer items-center gap-[var(--space-1)]",
2776
- "px-0 py-[var(--space-1-5)] text-sm font-medium",
2777
- "text-[var(--text-secondary)] transition-colors",
2783
+ "px-0 py-pad-compact-y text-body-sm font-medium",
2784
+ "text-text-secondary transition-colors",
2778
2785
  "duration-[var(--duration-fast)] ease-[var(--ease-standard)]",
2779
2786
  "hover:text-foreground",
2780
2787
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
2781
- "disabled:pointer-events-none disabled:text-[var(--text-disabled)]",
2788
+ "disabled:pointer-events-none disabled:text-text-disabled",
2782
2789
  // Round 4 #6 A — active text를 accent-fg (light olive / dark lime)로 brand 강조 +
2783
2790
  // inactive(--text-secondary)와의 contrast 강화. 롤백 시 `text-foreground`로 복원.
2784
2791
  "data-[state=active]:font-bold data-[state=active]:text-accent-fg",
@@ -2993,7 +3000,7 @@ function FormLayoutSectionBlock({
2993
3000
  {
2994
3001
  id: titleId,
2995
3002
  "data-slot": "form-layout-section-title",
2996
- className: "text-base font-semibold leading-[1.35] text-foreground",
3003
+ className: "text-base font-semibold leading-snug text-foreground",
2997
3004
  children: section.title
2998
3005
  }
2999
3006
  ),
@@ -3001,7 +3008,7 @@ function FormLayoutSectionBlock({
3001
3008
  "p",
3002
3009
  {
3003
3010
  "data-slot": "form-layout-section-description",
3004
- className: "mt-[var(--space-0-5)] max-w-[760px] text-sm leading-[1.45] text-[var(--text-secondary)]",
3011
+ className: "mt-[var(--space-0-5)] max-w-[760px] text-sm leading-normal text-text-secondary",
3005
3012
  children: section.description
3006
3013
  }
3007
3014
  ) : null
@@ -3010,7 +3017,7 @@ function FormLayoutSectionBlock({
3010
3017
  "div",
3011
3018
  {
3012
3019
  "data-slot": "form-layout-section-aside",
3013
- className: "shrink-0 text-sm leading-[1.45] text-[var(--text-tertiary)]",
3020
+ className: "shrink-0 text-sm leading-normal text-text-tertiary",
3014
3021
  children: section.aside
3015
3022
  }
3016
3023
  ) : null
@@ -3043,7 +3050,7 @@ function FormLayoutSectionBlock({
3043
3050
  {
3044
3051
  "aria-hidden": "true",
3045
3052
  className: cn(
3046
- "mt-[2px] size-[16px] shrink-0 text-[var(--text-tertiary)] transition-transform",
3053
+ "mt-[2px] size-[16px] shrink-0 text-text-tertiary transition-transform",
3047
3054
  isOpen ? "rotate-180" : "rotate-0"
3048
3055
  )
3049
3056
  }
@@ -3100,7 +3107,7 @@ var FormLayout = React18.forwardRef(
3100
3107
  "div",
3101
3108
  {
3102
3109
  "data-slot": "form-layout-status",
3103
- className: "shrink-0 text-sm leading-[1.45] text-[var(--text-tertiary)] lg:pt-[var(--space-1)]",
3110
+ className: "shrink-0 text-sm leading-normal text-text-tertiary lg:pt-[var(--space-1)]",
3104
3111
  children: status
3105
3112
  }
3106
3113
  ) : null
@@ -3186,7 +3193,7 @@ var DialogContent = React19.forwardRef(({ className, children, showCloseButton =
3186
3193
  "transition-colors motion-reduce:transition-none",
3187
3194
  "hover:bg-accent hover:text-accent-foreground",
3188
3195
  "focus-visible:outline-none focus-visible:shadow-focus-ring",
3189
- "disabled:pointer-events-none disabled:text-[var(--text-disabled)]"
3196
+ "disabled:pointer-events-none disabled:text-text-disabled"
3190
3197
  ),
3191
3198
  "aria-label": "Close",
3192
3199
  children: /* @__PURE__ */ jsx20(X2, { className: "size-[16px]" })
@@ -3267,10 +3274,10 @@ var formModalHeaderClassName = cn(
3267
3274
  "pr-[40px]"
3268
3275
  );
3269
3276
  var formModalTitleClassName = cn(
3270
- "text-[18px] font-bold leading-[1.4] text-foreground"
3277
+ "text-[18px] font-bold leading-snug text-foreground"
3271
3278
  );
3272
3279
  var formModalDescriptionClassName = cn(
3273
- "break-keep text-[14px] leading-[1.45] text-[var(--text-secondary)]"
3280
+ "break-keep text-[14px] leading-normal text-text-secondary"
3274
3281
  );
3275
3282
  var formModalBodyClassName = cn(
3276
3283
  "flex flex-col gap-[var(--space-2)] py-[var(--space-3)]"
@@ -3380,14 +3387,14 @@ var infoModalHeaderClassName = cn(
3380
3387
  "pr-[40px]"
3381
3388
  );
3382
3389
  var infoModalTitleClassName = cn(
3383
- "text-[18px] font-bold leading-[1.4] text-foreground"
3390
+ "text-[18px] font-bold leading-snug text-foreground"
3384
3391
  );
3385
3392
  var infoModalDescriptionClassName = cn(
3386
- "break-keep text-[14px] leading-[1.45] text-[var(--text-secondary)]"
3393
+ "break-keep text-[14px] leading-normal text-text-secondary"
3387
3394
  );
3388
3395
  var infoModalBodyClassName = cn(
3389
3396
  "flex flex-col gap-[var(--space-2)] py-[var(--space-3)]",
3390
- "text-[14px] leading-[1.45] text-[var(--text-secondary)]"
3397
+ "text-[14px] leading-normal text-text-secondary"
3391
3398
  );
3392
3399
  var infoModalFooterClassName = cn(
3393
3400
  "border-t border-[var(--border-subtle)] pt-[var(--space-2)]",
@@ -3499,7 +3506,7 @@ var FilterToolbar = React21.forwardRef(
3499
3506
  "div",
3500
3507
  {
3501
3508
  "data-slot": "filter-toolbar-summary",
3502
- className: "shrink-0 whitespace-nowrap text-xs leading-[1.4] text-[var(--text-tertiary)]",
3509
+ className: "shrink-0 whitespace-nowrap text-xs leading-snug text-text-tertiary",
3503
3510
  children: resultSummary
3504
3511
  }
3505
3512
  ) : null,
@@ -3548,7 +3555,7 @@ var checkboxVariants = cva11(
3548
3555
  "gap-[var(--space-1-5)] rounded-[var(--radius-sm)] text-left",
3549
3556
  "font-medium text-foreground transition-colors motion-reduce:transition-none",
3550
3557
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)]",
3551
- "disabled:cursor-not-allowed disabled:text-[var(--text-disabled)]"
3558
+ "disabled:cursor-not-allowed disabled:text-text-disabled"
3552
3559
  ].join(" "),
3553
3560
  {
3554
3561
  variants: {
@@ -3576,8 +3583,8 @@ var checkboxBoxVariants = cva11(
3576
3583
  "group-disabled:border-[var(--border-subtle)] group-disabled:bg-[var(--action-disabled-bg)]",
3577
3584
  "group-data-[state=checked]:border-[var(--success)] group-data-[state=checked]:bg-[var(--success)] group-data-[state=checked]:text-[var(--success-contrast)]",
3578
3585
  "group-data-[state=indeterminate]:border-[var(--success)] group-data-[state=indeterminate]:bg-[var(--success)] group-data-[state=indeterminate]:text-[var(--success-contrast)]",
3579
- "group-disabled:group-data-[state=checked]:border-[var(--border-subtle)] group-disabled:group-data-[state=checked]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=checked]:text-[var(--text-disabled)]",
3580
- "group-disabled:group-data-[state=indeterminate]:border-[var(--border-subtle)] group-disabled:group-data-[state=indeterminate]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=indeterminate]:text-[var(--text-disabled)]"
3586
+ "group-disabled:group-data-[state=checked]:border-[var(--border-subtle)] group-disabled:group-data-[state=checked]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=checked]:text-text-disabled",
3587
+ "group-disabled:group-data-[state=indeterminate]:border-[var(--border-subtle)] group-disabled:group-data-[state=indeterminate]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=indeterminate]:text-text-disabled"
3581
3588
  ].join(" "),
3582
3589
  {
3583
3590
  variants: {
@@ -3612,7 +3619,7 @@ var Checkbox = React22.forwardRef(
3612
3619
  const labelClassName = cn(
3613
3620
  "cursor-pointer select-none text-left font-medium text-foreground",
3614
3621
  size === "sm" ? "text-xs" : "text-sm",
3615
- props.disabled && "cursor-not-allowed text-[var(--text-disabled)]"
3622
+ props.disabled && "cursor-not-allowed text-text-disabled"
3616
3623
  );
3617
3624
  return /* @__PURE__ */ jsxs23(
3618
3625
  "div",
@@ -3687,7 +3694,7 @@ var Checkbox = React22.forwardRef(
3687
3694
  id: errorId,
3688
3695
  role: "alert",
3689
3696
  "data-slot": "checkbox-error",
3690
- className: "ml-[32px] text-xs font-medium leading-[1.45] text-[var(--error)]",
3697
+ className: "ml-[32px] text-xs font-medium leading-normal text-[var(--error)]",
3691
3698
  children: error
3692
3699
  }
3693
3700
  ) : description ? /* @__PURE__ */ jsx24(
@@ -3696,8 +3703,8 @@ var Checkbox = React22.forwardRef(
3696
3703
  id: descriptionId,
3697
3704
  "data-slot": "checkbox-description",
3698
3705
  className: cn(
3699
- "ml-[32px] text-xs font-normal leading-[1.45] text-[var(--text-tertiary)]",
3700
- props.disabled && "text-[var(--text-disabled)]"
3706
+ "ml-[32px] text-xs font-normal leading-normal text-text-tertiary",
3707
+ props.disabled && "text-text-disabled"
3701
3708
  ),
3702
3709
  children: description
3703
3710
  }
@@ -3731,7 +3738,7 @@ var dataTableVariants = cva12(
3731
3738
  var dataTableRowVariants = cva12(
3732
3739
  [
3733
3740
  "grid min-h-[48px] items-center border-t border-[var(--border-subtle)]",
3734
- "text-[13px] leading-[1.45] text-foreground",
3741
+ "text-body-sm leading-compact text-foreground",
3735
3742
  "transition-colors motion-reduce:transition-none"
3736
3743
  ].join(" "),
3737
3744
  {
@@ -3818,7 +3825,7 @@ function SortIcon({ sort, columnKey }) {
3818
3825
  "data-sort-dir": sort?.key === columnKey ? sort.dir : "none",
3819
3826
  size: 14,
3820
3827
  strokeWidth: 2,
3821
- className: "shrink-0 text-[var(--text-tertiary)]"
3828
+ className: "shrink-0 text-text-tertiary"
3822
3829
  }
3823
3830
  );
3824
3831
  }
@@ -3839,7 +3846,7 @@ function MobileSortControls({
3839
3846
  "aria-label": `${ariaLabel} \uBAA8\uBC14\uC77C \uC815\uB82C`,
3840
3847
  className: "flex flex-wrap items-center gap-[var(--space-1)] border-b border-[var(--border-subtle)] bg-[var(--bg-raised)] px-[var(--space-2)] py-[var(--space-1)] md:hidden",
3841
3848
  children: [
3842
- /* @__PURE__ */ jsx25("span", { className: "text-[12px] font-medium text-[var(--text-tertiary)]", children: "\uC815\uB82C" }),
3849
+ /* @__PURE__ */ jsx25("span", { className: "text-[12px] font-medium text-text-tertiary", children: "\uC815\uB82C" }),
3843
3850
  sortableColumns.map((column) => {
3844
3851
  const active = sortBy?.key === column.key;
3845
3852
  const nextSort = getNextSort(sortBy, column.key);
@@ -4022,7 +4029,7 @@ function DataTableInner({
4022
4029
  {
4023
4030
  "data-slot": "data-table-header",
4024
4031
  role: "row",
4025
- className: "grid min-h-[40px] items-center bg-[var(--bg-raised)] text-[12px] font-semibold uppercase leading-[1.35] text-[var(--text-tertiary)]",
4032
+ className: "grid min-h-[40px] items-center bg-[var(--bg-raised)] text-[12px] font-semibold uppercase leading-snug text-text-tertiary",
4026
4033
  style: { gridTemplateColumns },
4027
4034
  children: [
4028
4035
  selectable ? /* @__PURE__ */ jsx25("div", { role: "columnheader", className: "px-[var(--space-2)]", children: /* @__PURE__ */ jsx25(
@@ -4130,7 +4137,7 @@ function DataTableInner({
4130
4137
  "flex min-w-0 items-center px-[var(--space-2)] py-[var(--space-1)]",
4131
4138
  alignmentClass[align],
4132
4139
  column.tabular ? "font-[family-name:var(--font-display)] tabular-nums" : null,
4133
- align === "right" ? "text-[var(--text-tertiary)]" : null
4140
+ align === "right" ? "text-text-tertiary" : null
4134
4141
  ),
4135
4142
  children: /* @__PURE__ */ jsx25("span", { className: "min-w-0 truncate", children: getRenderedCell(row, column) })
4136
4143
  },
@@ -4182,7 +4189,7 @@ function DataTableInner({
4182
4189
  "aria-label": `${primaryLabel}: ${primaryText}`,
4183
4190
  className: cn(
4184
4191
  "flex min-w-0 flex-col gap-[var(--space-1-5)] border-t border-[var(--border-subtle)] px-[var(--space-2)] py-[var(--space-2)]",
4185
- "text-[13px] leading-[1.45] text-foreground transition-colors motion-reduce:transition-none",
4192
+ "text-body-sm leading-compact text-foreground transition-colors motion-reduce:transition-none",
4186
4193
  href ? "cursor-pointer hover:bg-[var(--action-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--focus-ring)]" : null,
4187
4194
  selected ? "bg-[var(--action-selected)]" : null
4188
4195
  ),
@@ -4230,14 +4237,14 @@ function DataTableInner({
4230
4237
  "div",
4231
4238
  {
4232
4239
  "data-slot": "data-table-mobile-card-field",
4233
- className: "grid min-w-0 grid-cols-[minmax(0,0.42fr)_minmax(0,1fr)] gap-[var(--space-1)] text-[12px] leading-[1.4]",
4240
+ className: "grid min-w-0 grid-cols-[minmax(0,0.42fr)_minmax(0,1fr)] gap-[var(--space-1)] text-[12px] leading-snug",
4234
4241
  children: [
4235
- /* @__PURE__ */ jsx25("dt", { className: "min-w-0 text-[var(--text-tertiary)]", children: /* @__PURE__ */ jsx25("span", { className: "truncate", children: column.header }) }),
4242
+ /* @__PURE__ */ jsx25("dt", { className: "min-w-0 text-text-tertiary", children: /* @__PURE__ */ jsx25("span", { className: "truncate", children: column.header }) }),
4236
4243
  /* @__PURE__ */ jsx25(
4237
4244
  "dd",
4238
4245
  {
4239
4246
  className: cn(
4240
- "min-w-0 text-[var(--text-secondary)]",
4247
+ "min-w-0 text-text-secondary",
4241
4248
  alignmentClass[align],
4242
4249
  column.tabular ? "font-[family-name:var(--font-display)] tabular-nums" : null
4243
4250
  ),
@@ -4276,10 +4283,10 @@ var confirmDialogContentClassName = cn(
4276
4283
  "text-foreground"
4277
4284
  );
4278
4285
  var confirmDialogTitleClassName = cn(
4279
- "text-[18px] font-bold leading-[1.4] text-foreground"
4286
+ "text-[18px] font-bold leading-snug text-foreground"
4280
4287
  );
4281
4288
  var confirmDialogDescriptionClassName = cn(
4282
- "break-keep text-[14px] leading-[1.65] text-[var(--text-secondary)]"
4289
+ "break-keep text-[14px] leading-relaxed text-text-secondary"
4283
4290
  );
4284
4291
  var confirmDialogFooterClassName = "flex items-center justify-end gap-[var(--space-1-5)]";
4285
4292
  function ConfirmDialog({
@@ -4838,11 +4845,11 @@ var sheetDrawerHeaderClassName = cn(
4838
4845
  "border-b border-[var(--border-subtle)] px-[var(--space-3)] py-[var(--space-3)]"
4839
4846
  );
4840
4847
  var sheetDrawerHeaderTextClassName = "flex min-w-0 flex-1 flex-col gap-[var(--space-1)]";
4841
- var sheetDrawerTitleClassName = "text-[18px] font-bold leading-[1.4] text-foreground";
4842
- var sheetDrawerDescriptionClassName = "break-keep text-[14px] leading-[1.45] text-[var(--text-secondary)]";
4848
+ var sheetDrawerTitleClassName = "text-[18px] font-bold leading-snug text-foreground";
4849
+ var sheetDrawerDescriptionClassName = "break-keep text-[14px] leading-normal text-text-secondary";
4843
4850
  var sheetDrawerCloseButtonClassName = cn(
4844
4851
  "flex size-[32px] shrink-0 cursor-pointer items-center justify-center",
4845
- "rounded-[var(--radius-sm)] text-[var(--text-tertiary)] transition-colors",
4852
+ "rounded-[var(--radius-sm)] text-text-tertiary transition-colors",
4846
4853
  "hover:bg-[var(--action-hover)] hover:text-foreground",
4847
4854
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2"
4848
4855
  );
@@ -4851,7 +4858,7 @@ var sheetDrawerHeaderActionsClassName = cn(
4851
4858
  );
4852
4859
  var sheetDrawerExpandButtonClassName = cn(
4853
4860
  "inline-flex cursor-pointer items-center justify-center gap-[var(--space-0-5)]",
4854
- "rounded-[var(--radius-sm)] text-[var(--text-tertiary)] transition-colors",
4861
+ "rounded-[var(--radius-sm)] text-text-tertiary transition-colors",
4855
4862
  "hover:bg-[var(--action-hover)] hover:text-foreground",
4856
4863
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2",
4857
4864
  "h-[32px] px-[var(--space-1)]"
@@ -4913,7 +4920,7 @@ function SheetDrawer({
4913
4920
  className: sheetDrawerExpandButtonClassName,
4914
4921
  children: [
4915
4922
  /* @__PURE__ */ jsx31(ExpandIcon, { className: "size-[16px]" }),
4916
- /* @__PURE__ */ jsx31("span", { className: "hidden text-sm font-medium leading-[1.45] md:inline", children: expandLabel })
4923
+ /* @__PURE__ */ jsx31("span", { className: "hidden text-sm font-medium leading-normal md:inline", children: expandLabel })
4917
4924
  ]
4918
4925
  }
4919
4926
  ) : null,
@@ -5004,14 +5011,14 @@ var badgeVariants = cva13(
5004
5011
  "inline-flex w-fit shrink-0 items-center whitespace-nowrap",
5005
5012
  "rounded-[var(--radius-full)] border leading-none",
5006
5013
  "font-medium transition-colors motion-reduce:transition-none",
5007
- "data-[disabled=true]:border-[var(--border-subtle)] data-[disabled=true]:bg-[var(--action-disabled-bg)] data-[disabled=true]:text-[var(--text-disabled)]"
5014
+ "data-[disabled=true]:border-[var(--border-subtle)] data-[disabled=true]:bg-[var(--action-disabled-bg)] data-[disabled=true]:text-text-disabled"
5008
5015
  ].join(" "),
5009
5016
  {
5010
5017
  variants: {
5011
5018
  variant: {
5012
5019
  status: "",
5013
5020
  semantic: "",
5014
- neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-secondary)]",
5021
+ neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary",
5015
5022
  // R10 — deep olive wash (light: #8FCC1F 20% + olive text / dark: lime 16% + lime text). was --action-accent-selected lime 30%.
5016
5023
  brand: "border-[var(--border-accent)] bg-[var(--accent-bg-strong)] text-accent-fg",
5017
5024
  pill: "border-[var(--border-subtle)] bg-[var(--bg-raised)] text-foreground",
@@ -5019,7 +5026,7 @@ var badgeVariants = cva13(
5019
5026
  vibrant: "border-transparent bg-[var(--accent-solid-vibrant)] text-[var(--accent-on-solid-vibrant)]"
5020
5027
  },
5021
5028
  tone: {
5022
- neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-secondary)]",
5029
+ neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary",
5023
5030
  success: "border-transparent bg-[var(--success-bg)] text-[var(--success)]",
5024
5031
  warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)]",
5025
5032
  danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)]",
@@ -5037,7 +5044,7 @@ var badgeVariants = cva13(
5037
5044
  {
5038
5045
  variant: "neutral",
5039
5046
  tone: ["success", "warning", "danger", "info", "accent"],
5040
- className: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-secondary)]"
5047
+ className: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary"
5041
5048
  },
5042
5049
  {
5043
5050
  // R10 — deep olive wash for brand+semantic tone combos.
@@ -5128,7 +5135,7 @@ var twoTierBadgeLineVariants = cva14(
5128
5135
  },
5129
5136
  intent: {
5130
5137
  neutral: "border-transparent bg-[var(--bg-raised)] text-foreground",
5131
- muted: "border-[var(--border-subtle)] bg-transparent text-[var(--text-tertiary)]",
5138
+ muted: "border-[var(--border-subtle)] bg-transparent text-text-tertiary",
5132
5139
  accent: "border-[var(--border-accent)] bg-[var(--action-accent-selected)] text-foreground",
5133
5140
  success: "border-transparent bg-[var(--success-bg)] text-[var(--success)]",
5134
5141
  warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)]",
@@ -5208,7 +5215,7 @@ var statusBadgeVariants = cva15(
5208
5215
  variants: {
5209
5216
  status: {
5210
5217
  active: "border-transparent bg-[var(--success-bg)] text-[var(--success)]",
5211
- archived: "border-[var(--border-subtle)] bg-[var(--bg-raised)] text-[var(--text-tertiary)]",
5218
+ archived: "border-[var(--border-subtle)] bg-[var(--bg-raised)] text-text-tertiary",
5212
5219
  success: "border-transparent bg-[var(--success-bg)] text-[var(--success)]",
5213
5220
  warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)]",
5214
5221
  error: "border-transparent bg-[var(--error-bg)] text-[var(--error)]",
@@ -5359,12 +5366,12 @@ var chipVariants = cva17(
5359
5366
  "status-filter": "cursor-default"
5360
5367
  },
5361
5368
  tone: {
5362
- neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:bg-[var(--action-hover)]",
5369
+ neutral: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:bg-[var(--action-hover)]",
5363
5370
  accent: "border-[var(--border-accent)] bg-transparent text-[var(--accent-fg)] hover:bg-[var(--action-accent-hover)]",
5364
5371
  success: "border-transparent bg-[var(--success-bg)] text-[var(--success)] hover:bg-[var(--action-hover)]",
5365
5372
  warning: "border-transparent bg-[var(--warning-bg)] text-[var(--warning)] hover:bg-[var(--action-hover)]",
5366
5373
  danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]",
5367
- muted: "border-[var(--border-subtle)] bg-transparent text-[var(--text-tertiary)] hover:bg-[var(--action-hover)]"
5374
+ muted: "border-[var(--border-subtle)] bg-transparent text-text-tertiary hover:bg-[var(--action-hover)]"
5368
5375
  },
5369
5376
  size: {
5370
5377
  sm: "h-[26px] gap-[var(--space-0-5)] px-[var(--space-1)] text-xs",
@@ -5391,7 +5398,7 @@ var chipVariants = cva17(
5391
5398
  {
5392
5399
  pressed: true,
5393
5400
  tone: "muted",
5394
- className: "border-[var(--border-strong)] bg-[var(--bg-raised)] text-[var(--text-secondary)]"
5401
+ className: "border-[var(--border-strong)] bg-[var(--bg-raised)] text-text-secondary"
5395
5402
  }
5396
5403
  ],
5397
5404
  defaultVariants: {
@@ -5411,12 +5418,12 @@ var chipCountVariants = cva17(
5411
5418
  {
5412
5419
  variants: {
5413
5420
  tone: {
5414
- neutral: "bg-[var(--bg-raised)] text-[var(--text-tertiary)]",
5421
+ neutral: "bg-[var(--bg-raised)] text-text-tertiary",
5415
5422
  accent: "bg-[var(--accent-solid)] text-[var(--accent-on-solid)]",
5416
5423
  success: "bg-[var(--success)] text-[var(--success-contrast)]",
5417
5424
  warning: "bg-[var(--warning)] text-[var(--warning-contrast)]",
5418
5425
  danger: "bg-[var(--error)] text-[var(--error-contrast)]",
5419
- muted: "bg-[var(--bg-raised)] text-[var(--text-tertiary)]"
5426
+ muted: "bg-[var(--bg-raised)] text-text-tertiary"
5420
5427
  },
5421
5428
  size: {
5422
5429
  sm: "h-[var(--space-2)] text-xs",
@@ -5475,7 +5482,7 @@ var Chip = React30.forwardRef(
5475
5482
  {
5476
5483
  "aria-label": removeLabel,
5477
5484
  "data-slot": "chip-remove",
5478
- className: "inline-flex size-[var(--space-2)] items-center justify-center rounded-[var(--radius-full)] text-[var(--text-tertiary)]",
5485
+ className: "inline-flex size-[var(--space-2)] items-center justify-center rounded-[var(--radius-full)] text-text-tertiary",
5479
5486
  children: /* @__PURE__ */ jsx37(X3, { "aria-hidden": "true", size: 14, strokeWidth: 2.25 })
5480
5487
  }
5481
5488
  ) : null
@@ -5518,7 +5525,7 @@ var emptyStateVariants = cva18(
5518
5525
  var emptyStateIconVariants = cva18(
5519
5526
  [
5520
5527
  "inline-flex items-center justify-center rounded-[var(--radius-full)]",
5521
- "bg-[var(--bg-raised)] text-[var(--text-disabled)]"
5528
+ "bg-[var(--bg-raised)] text-text-disabled"
5522
5529
  ].join(" "),
5523
5530
  {
5524
5531
  variants: {
@@ -5574,7 +5581,7 @@ var EmptyState = React31.forwardRef(
5574
5581
  "h2",
5575
5582
  {
5576
5583
  "data-slot": "empty-state-title",
5577
- className: "break-keep text-base font-semibold leading-[1.35] text-foreground",
5584
+ className: "break-keep text-base font-semibold leading-snug text-foreground",
5578
5585
  children: title
5579
5586
  }
5580
5587
  ),
@@ -5582,7 +5589,7 @@ var EmptyState = React31.forwardRef(
5582
5589
  "p",
5583
5590
  {
5584
5591
  "data-slot": "empty-state-description",
5585
- className: "break-keep text-sm leading-[1.45] text-[var(--text-tertiary)]",
5592
+ className: "break-keep text-sm leading-normal text-text-tertiary",
5586
5593
  children: description
5587
5594
  }
5588
5595
  ) : null,
@@ -5590,7 +5597,7 @@ var EmptyState = React31.forwardRef(
5590
5597
  "p",
5591
5598
  {
5592
5599
  "data-slot": "empty-state-hint",
5593
- className: "break-keep text-xs leading-[1.45] text-[var(--text-disabled)]",
5600
+ className: "break-keep text-xs leading-normal text-text-disabled",
5594
5601
  children: hint
5595
5602
  }
5596
5603
  ) : null
@@ -5660,7 +5667,7 @@ var ErrorState = React32.forwardRef(
5660
5667
  "h2",
5661
5668
  {
5662
5669
  "data-slot": "error-state-title",
5663
- className: "break-keep text-base font-semibold leading-[1.35] text-foreground",
5670
+ className: "break-keep text-base font-semibold leading-snug text-foreground",
5664
5671
  children: title
5665
5672
  }
5666
5673
  ),
@@ -5668,7 +5675,7 @@ var ErrorState = React32.forwardRef(
5668
5675
  "p",
5669
5676
  {
5670
5677
  "data-slot": "error-state-message",
5671
- className: "break-keep text-sm leading-[1.45] text-[var(--text-tertiary)]",
5678
+ className: "break-keep text-sm leading-normal text-text-tertiary",
5672
5679
  children: message
5673
5680
  }
5674
5681
  ),
@@ -5676,7 +5683,7 @@ var ErrorState = React32.forwardRef(
5676
5683
  "p",
5677
5684
  {
5678
5685
  "data-slot": "error-state-code",
5679
- className: "font-[family-name:var(--font-display)] text-xs leading-[1.35] text-[var(--text-disabled)]",
5686
+ className: "font-[family-name:var(--font-display)] text-xs leading-snug text-text-disabled",
5680
5687
  children: errorCode
5681
5688
  }
5682
5689
  ) : null
@@ -5844,15 +5851,15 @@ var iconButtonVariants = cva21(
5844
5851
  "rounded-[var(--radius-sm)] border font-medium",
5845
5852
  "transition-colors motion-reduce:transition-none",
5846
5853
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
5847
- "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-[var(--text-disabled)]",
5854
+ "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
5848
5855
  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
5849
5856
  ].join(" "),
5850
5857
  {
5851
5858
  variants: {
5852
5859
  variant: {
5853
- ghost: "border-transparent bg-transparent text-[var(--text-secondary)] hover:bg-[var(--action-hover)] hover:text-foreground",
5854
- outline: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:border-[var(--border-accent)] hover:bg-[var(--action-hover)] hover:text-foreground",
5855
- subtle: "border-transparent bg-[var(--bg-raised)] text-[var(--text-secondary)] hover:bg-[var(--action-hover)] hover:text-foreground",
5860
+ ghost: "border-transparent bg-transparent text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
5861
+ outline: "border-[var(--border-subtle)] bg-[var(--bg-surface)] text-text-secondary hover:border-[var(--border-accent)] hover:bg-[var(--action-hover)] hover:text-foreground",
5862
+ subtle: "border-transparent bg-[var(--bg-raised)] text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
5856
5863
  danger: "border-transparent bg-[var(--error-bg)] text-[var(--error)] hover:bg-[var(--action-hover)]"
5857
5864
  },
5858
5865
  size: {
@@ -5986,7 +5993,7 @@ import { jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
5986
5993
  var paginationVariants = cva22(
5987
5994
  [
5988
5995
  "flex w-full flex-col gap-[var(--space-1-5)]",
5989
- "text-sm text-[var(--text-secondary)]",
5996
+ "text-sm text-text-secondary",
5990
5997
  "sm:flex-row sm:items-center sm:justify-between"
5991
5998
  ].join(" "),
5992
5999
  {
@@ -6004,11 +6011,11 @@ var paginationVariants = cva22(
6004
6011
  var paginationControlVariants = cva22(
6005
6012
  [
6006
6013
  "inline-flex shrink-0 items-center justify-center rounded-[var(--radius-sm)] border",
6007
- "border-transparent bg-transparent font-medium text-[var(--text-secondary)]",
6014
+ "border-transparent bg-transparent font-medium text-text-secondary",
6008
6015
  "transition-colors motion-reduce:transition-none",
6009
6016
  "hover:border-[var(--border-accent)] hover:bg-[var(--action-hover)] hover:text-foreground",
6010
6017
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
6011
- "disabled:cursor-not-allowed disabled:border-transparent disabled:bg-[var(--action-disabled-bg)] disabled:text-[var(--text-disabled)]",
6018
+ "disabled:cursor-not-allowed disabled:border-transparent disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
6012
6019
  "data-[current=true]:border-[var(--border-accent)] data-[current=true]:bg-[var(--action-selected)] data-[current=true]:text-foreground",
6013
6020
  "data-[current=true]:hover:bg-[var(--action-selected)]",
6014
6021
  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
@@ -6108,12 +6115,12 @@ var Pagination = React35.forwardRef(
6108
6115
  ...props,
6109
6116
  children: [
6110
6117
  /* @__PURE__ */ jsxs37("div", { className: "flex flex-wrap items-center gap-[var(--space-1-5)]", children: [
6111
- /* @__PURE__ */ jsx42("span", { "data-slot": "pagination-total", className: "font-medium text-[var(--text-secondary)]", children: totalLabel(total) }),
6118
+ /* @__PURE__ */ jsx42("span", { "data-slot": "pagination-total", className: "font-medium text-text-secondary", children: totalLabel(total) }),
6112
6119
  /* @__PURE__ */ jsxs37(
6113
6120
  "div",
6114
6121
  {
6115
6122
  "data-slot": "pagination-size",
6116
- className: "inline-flex items-center gap-[var(--space-1)] text-xs text-[var(--text-tertiary)]",
6123
+ className: "inline-flex items-center gap-[var(--space-1)] text-xs text-text-tertiary",
6117
6124
  children: [
6118
6125
  /* @__PURE__ */ jsx42("span", { children: pageSizeLabel }),
6119
6126
  /* @__PURE__ */ jsx42(
@@ -6167,7 +6174,7 @@ var Pagination = React35.forwardRef(
6167
6174
  "data-slot": "pagination-ellipsis",
6168
6175
  "aria-hidden": "true",
6169
6176
  className: cn(
6170
- "inline-flex items-center justify-center text-[var(--text-tertiary)]",
6177
+ "inline-flex items-center justify-center text-text-tertiary",
6171
6178
  resolvedSize === "compact" ? "size-[32px]" : "size-[36px]"
6172
6179
  ),
6173
6180
  children: "..."
@@ -6233,11 +6240,11 @@ var modeToggleItemVariants = cva23(
6233
6240
  "inline-flex min-h-[28px] cursor-pointer items-center justify-center gap-[var(--space-0-5)]",
6234
6241
  "rounded-[calc(var(--radius-sm)_-_2px)] px-[var(--space-1-5)] py-[var(--space-0-5)]",
6235
6242
  "font-[family-name:var(--font-display)] text-xs font-medium leading-none",
6236
- "text-[var(--text-secondary)] transition-[background-color,color,box-shadow]",
6243
+ "text-text-secondary transition-[background-color,color,box-shadow]",
6237
6244
  "duration-[var(--duration-fast)] ease-[var(--ease-standard)]",
6238
6245
  "hover:text-foreground",
6239
6246
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
6240
- "disabled:cursor-not-allowed disabled:text-[var(--text-disabled)] disabled:hover:text-[var(--text-disabled)]",
6247
+ "disabled:cursor-not-allowed disabled:text-text-disabled disabled:hover:text-text-disabled",
6241
6248
  "data-[state=active]:bg-[var(--bg-surface)] data-[state=active]:font-semibold",
6242
6249
  "data-[state=active]:text-foreground data-[state=active]:shadow-[var(--elevation-1)]",
6243
6250
  "[&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:stroke-[1.75]"
@@ -6315,7 +6322,7 @@ var actionFooterVariants = cva24(
6315
6322
  var actionFooterStatusVariants = cva24(
6316
6323
  [
6317
6324
  "flex min-w-0 flex-1 items-center gap-[var(--space-1)]",
6318
- "text-sm leading-[1.4] text-[var(--text-tertiary)]"
6325
+ "text-sm leading-snug text-text-tertiary"
6319
6326
  ].join(" "),
6320
6327
  {
6321
6328
  variants: {
@@ -6452,7 +6459,7 @@ var toastVariants = cva25(
6452
6459
  "grid min-w-[280px] max-w-[420px] grid-cols-[auto_1fr_auto] items-center",
6453
6460
  "gap-[var(--space-1-5)] rounded-[var(--radius-md)] border",
6454
6461
  "px-[var(--space-2)] py-[var(--space-1-5)] shadow-[var(--elevation-4)]",
6455
- "text-sm leading-[1.45] text-foreground",
6462
+ "text-sm leading-normal text-foreground",
6456
6463
  "pointer-events-auto",
6457
6464
  "motion-reduce:animate-none"
6458
6465
  ].join(" "),
@@ -6665,8 +6672,8 @@ var otpCellVariants = cva26(
6665
6672
  "text-center leading-none caret-[var(--accent-fg)]",
6666
6673
  "transition-[border-color,box-shadow,background-color,color] motion-reduce:transition-none",
6667
6674
  "focus:outline-none focus:border-[var(--focus-ring)] focus:shadow-[0_0_0_1px_var(--focus-ring)]",
6668
- "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-[var(--text-disabled)]",
6669
- "read-only:cursor-default read-only:bg-[var(--bg-raised)] read-only:text-[var(--text-secondary)]",
6675
+ "disabled:cursor-not-allowed disabled:border-[var(--border-subtle)] disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled",
6676
+ "read-only:cursor-default read-only:bg-[var(--bg-raised)] read-only:text-text-secondary",
6670
6677
  "aria-[invalid=true]:border-[var(--error)] aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--error)]",
6671
6678
  "data-[state=error]:border-[var(--error)] data-[state=error]:focus:shadow-[0_0_0_1px_var(--error)]",
6672
6679
  "data-[state=filled]:border-[var(--accent-fg)]"
@@ -6683,10 +6690,10 @@ var otpCellVariants = cva26(
6683
6690
  }
6684
6691
  }
6685
6692
  );
6686
- var otpFieldMessageVariants = cva26("flex items-start gap-[var(--space-0-5)] text-xs leading-[1.4]", {
6693
+ var otpFieldMessageVariants = cva26("flex items-start gap-[var(--space-0-5)] text-xs leading-snug", {
6687
6694
  variants: {
6688
6695
  state: {
6689
- default: "text-[var(--text-tertiary)]",
6696
+ default: "text-text-tertiary",
6690
6697
  error: "text-[var(--error)]"
6691
6698
  }
6692
6699
  },
@@ -6801,7 +6808,7 @@ var OTPField = React38.forwardRef(
6801
6808
  {
6802
6809
  id: labelId,
6803
6810
  "data-slot": "otp-field-label",
6804
- className: "text-sm font-medium leading-[1.35] text-foreground",
6811
+ className: "text-sm font-medium leading-snug text-foreground",
6805
6812
  children: label
6806
6813
  }
6807
6814
  ),
@@ -6973,16 +6980,16 @@ var searchFieldInputVariants = cva27(
6973
6980
  "border-[var(--border)] bg-[var(--bg-surface)]",
6974
6981
  "appearance-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
6975
6982
  "font-[family-name:var(--font-body)] text-foreground",
6976
- "placeholder:text-[var(--text-disabled)]",
6983
+ "placeholder:text-text-disabled",
6977
6984
  "transition-[border-color,box-shadow] motion-reduce:transition-none",
6978
6985
  "focus:outline-none focus:border-[var(--focus-ring)] focus:shadow-[0_0_0_1px_var(--focus-ring)]",
6979
- "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-[var(--text-disabled)]"
6986
+ "disabled:cursor-not-allowed disabled:bg-[var(--action-disabled-bg)] disabled:text-text-disabled"
6980
6987
  ].join(" "),
6981
6988
  {
6982
6989
  variants: {
6983
6990
  size: {
6984
6991
  sm: "px-[var(--space-1-5)] pl-[var(--space-4)] text-xs",
6985
- md: "px-[var(--space-1-5)] pl-[var(--space-4)] text-[13px]",
6992
+ md: "px-[var(--space-1-5)] pl-[var(--space-4)] text-body-sm",
6986
6993
  lg: "px-[var(--space-2)] pl-[calc(var(--space-4)+var(--space-0-5))] text-sm"
6987
6994
  },
6988
6995
  hasClear: {
@@ -7061,7 +7068,7 @@ var SearchField = React39.forwardRef(
7061
7068
  {
7062
7069
  "aria-hidden": "true",
7063
7070
  "data-slot": "search-field-icon",
7064
- className: "pointer-events-none absolute left-[10px] top-1/2 -translate-y-1/2 text-[var(--text-tertiary)]",
7071
+ className: "pointer-events-none absolute left-[10px] top-1/2 -translate-y-1/2 text-text-tertiary",
7065
7072
  size: iconSize4[resolvedSize],
7066
7073
  strokeWidth: resolvedSize === "sm" ? 2 : 1.75
7067
7074
  }
@@ -7093,7 +7100,7 @@ var SearchField = React39.forwardRef(
7093
7100
  type: "button",
7094
7101
  "aria-label": clearLabel,
7095
7102
  "data-slot": "search-field-clear",
7096
- className: "absolute right-[8px] top-1/2 inline-flex size-[var(--space-2)] -translate-y-1/2 items-center justify-center rounded-[var(--radius-full)] text-[var(--text-tertiary)] transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
7103
+ className: "absolute right-[8px] top-1/2 inline-flex size-[var(--space-2)] -translate-y-1/2 items-center justify-center rounded-[var(--radius-full)] text-text-tertiary transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
7097
7104
  onClick: clearInput,
7098
7105
  children: /* @__PURE__ */ jsx47(X5, { "aria-hidden": "true", size: 16, strokeWidth: 1.75 })
7099
7106
  }
@@ -7137,8 +7144,8 @@ var radioCardItemVariants = cva28(
7137
7144
  {
7138
7145
  variants: {
7139
7146
  density: {
7140
- comfortable: "p-[var(--space-2)]",
7141
- compact: "p-[var(--space-1-5)]"
7147
+ comfortable: "px-pad-default-x py-pad-roomy-y",
7148
+ compact: "px-pad-compact-x py-pad-default-y"
7142
7149
  }
7143
7150
  },
7144
7151
  defaultVariants: {
@@ -7152,8 +7159,8 @@ var radioCardControlVariants = cva28(
7152
7159
  "rounded-[var(--radius-full)] border border-[var(--border-strong)] bg-[var(--bg-surface)] text-transparent",
7153
7160
  "transition-colors motion-reduce:transition-none",
7154
7161
  "group-data-[state=checked]:border-[var(--accent-solid)] group-data-[state=checked]:bg-[var(--accent-solid)] group-data-[state=checked]:text-[var(--accent-on-solid)]",
7155
- "group-disabled:border-[var(--border-subtle)] group-disabled:bg-[var(--action-disabled-bg)] group-disabled:text-[var(--text-disabled)]",
7156
- "group-disabled:group-data-[state=checked]:border-[var(--border-subtle)] group-disabled:group-data-[state=checked]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=checked]:text-[var(--text-disabled)]"
7162
+ "group-disabled:border-[var(--border-subtle)] group-disabled:bg-[var(--action-disabled-bg)] group-disabled:text-text-disabled",
7163
+ "group-disabled:group-data-[state=checked]:border-[var(--border-subtle)] group-disabled:group-data-[state=checked]:bg-[var(--action-disabled-bg)] group-disabled:group-data-[state=checked]:text-text-disabled"
7157
7164
  ].join(" ")
7158
7165
  );
7159
7166
  var RadioCardGroup = React40.forwardRef(
@@ -7208,7 +7215,7 @@ var RadioCardGroup = React40.forwardRef(
7208
7215
  {
7209
7216
  id: titleId,
7210
7217
  "data-slot": "radio-card-title",
7211
- className: "text-sm font-semibold leading-[1.35] text-foreground group-disabled:text-[var(--text-disabled)]",
7218
+ className: "text-sm font-semibold leading-snug text-foreground group-disabled:text-text-disabled",
7212
7219
  children: option.title
7213
7220
  }
7214
7221
  ),
@@ -7217,7 +7224,7 @@ var RadioCardGroup = React40.forwardRef(
7217
7224
  {
7218
7225
  id: descriptionId,
7219
7226
  "data-slot": "radio-card-description",
7220
- className: "text-sm font-normal leading-[1.45] text-[var(--text-secondary)] group-disabled:text-[var(--text-disabled)]",
7227
+ className: "text-sm font-normal leading-normal text-text-secondary group-disabled:text-text-disabled",
7221
7228
  children: option.description
7222
7229
  }
7223
7230
  )
@@ -7291,7 +7298,7 @@ var RadioGroup = React41.forwardRef(
7291
7298
  htmlFor: itemId,
7292
7299
  className: cn(
7293
7300
  "cursor-pointer select-none text-sm font-medium text-foreground",
7294
- option.disabled && "cursor-not-allowed text-[var(--text-disabled)]"
7301
+ option.disabled && "cursor-not-allowed text-text-disabled"
7295
7302
  ),
7296
7303
  children: option.label
7297
7304
  }
@@ -7300,8 +7307,8 @@ var RadioGroup = React41.forwardRef(
7300
7307
  "p",
7301
7308
  {
7302
7309
  className: cn(
7303
- "text-xs font-normal leading-[1.45] text-[var(--text-tertiary)]",
7304
- option.disabled && "text-[var(--text-disabled)]"
7310
+ "text-xs font-normal leading-normal text-text-tertiary",
7311
+ option.disabled && "text-text-disabled"
7305
7312
  ),
7306
7313
  children: option.description
7307
7314
  }
@@ -7520,7 +7527,7 @@ function ThemeToggle({ className }) {
7520
7527
  "button",
7521
7528
  {
7522
7529
  className: cn(
7523
- "inline-flex size-[36px] items-center justify-center rounded-sm text-[var(--text-secondary)]",
7530
+ "inline-flex size-[36px] items-center justify-center rounded-sm text-text-secondary",
7524
7531
  className
7525
7532
  ),
7526
7533
  "aria-label": "\uD14C\uB9C8 \uC804\uD658"
@@ -7534,7 +7541,7 @@ function ThemeToggle({ className }) {
7534
7541
  onClick: toggle,
7535
7542
  className: cn(
7536
7543
  "inline-flex size-[36px] items-center justify-center rounded-sm",
7537
- "text-[var(--text-secondary)] hover:bg-[var(--action-hover)] hover:text-foreground",
7544
+ "text-text-secondary hover:bg-[var(--action-hover)] hover:text-foreground",
7538
7545
  "transition-colors motion-reduce:transition-none",
7539
7546
  className
7540
7547
  ),