@hyphen/hyphen-components 7.10.0 → 8.0.1

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 (70) hide show
  1. package/dist/css/fonts.css +5 -3
  2. package/dist/css/fonts.css.map +1 -0
  3. package/dist/css/index.css +370 -222
  4. package/dist/css/index.css.map +1 -0
  5. package/dist/css/reset.css +5 -3
  6. package/dist/css/reset.css.map +1 -0
  7. package/dist/css/utilities.css +487 -43
  8. package/dist/css/utilities.css.map +1 -0
  9. package/dist/css/variables.css +180 -33
  10. package/dist/css/variables.css.map +1 -0
  11. package/dist/hyphen-components.cjs.development.js +250 -317
  12. package/dist/hyphen-components.cjs.development.js.map +1 -1
  13. package/dist/hyphen-components.cjs.production.min.js +2 -2
  14. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  15. package/dist/hyphen-components.esm.js +204 -271
  16. package/dist/hyphen-components.esm.js.map +1 -1
  17. package/dist/index.d.ts +25 -60
  18. package/package.json +4 -4
  19. package/src/components/Alert/Alert.mdx +1 -1
  20. package/src/components/Alert/Alert.module.scss +29 -34
  21. package/src/components/Alert/Alert.stories.tsx +11 -3
  22. package/src/components/Alert/Alert.test.tsx +17 -11
  23. package/src/components/Alert/Alert.tsx +9 -16
  24. package/src/components/Badge/Badge.mdx +46 -4
  25. package/src/components/Badge/Badge.module.scss +235 -185
  26. package/src/components/Badge/Badge.stories.tsx +126 -36
  27. package/src/components/Badge/Badge.test.tsx +180 -21
  28. package/src/components/Badge/Badge.tsx +56 -21
  29. package/src/components/Button/Button.module.scss +1 -1
  30. package/src/components/CheckboxInput/components/Checkbox.module.scss +2 -2
  31. package/src/components/Drawer/Drawer.mdx +14 -16
  32. package/src/components/Drawer/Drawer.module.scss +1 -1
  33. package/src/components/DropdownMenu/DropdownMenu.tsx +6 -8
  34. package/src/components/Formik/Formik.stories.tsx +3 -5
  35. package/src/components/Formik/FormikTimePicker/FormikTimePicker.test.tsx +34 -67
  36. package/src/components/Formik/FormikTimePicker/FormikTimePicker.tsx +0 -2
  37. package/src/components/Modal/Modal.module.scss +1 -1
  38. package/src/components/RadioGroup/RadioInput/RadioInput.module.scss +2 -2
  39. package/src/components/SelectInput/SelectInput.module.scss +1 -1
  40. package/src/components/SelectInputInset/SelectInputInset.module.scss +1 -1
  41. package/src/components/SelectInputNative/SelectInputNative.module.scss +1 -1
  42. package/src/components/Switch/Switch.module.scss +1 -1
  43. package/src/components/Table/Table.stories.tsx +4 -4
  44. package/src/components/TextInput/TextInput.module.scss +1 -1
  45. package/src/components/TextInputInset/TextInputInset.module.scss +1 -1
  46. package/src/components/TextareaInput/TextareaInput.module.scss +1 -1
  47. package/src/components/TextareaInputInset/TextareaInputInset.module.scss +1 -1
  48. package/src/components/TimePicker/TimePicker.mdx +3 -11
  49. package/src/components/TimePicker/TimePicker.stories.tsx +61 -60
  50. package/src/components/TimePicker/TimePicker.test.tsx +76 -7
  51. package/src/components/TimePicker/TimePicker.tsx +37 -7
  52. package/src/components/Toggle/Toggle.module.scss +1 -1
  53. package/src/components/ToggleGroup/ToggleGroup.module.scss +1 -1
  54. package/src/components/Tooltip/Tooltip.stories.tsx +1 -1
  55. package/src/docs/Colors.mdx +13 -0
  56. package/src/index.ts +0 -2
  57. package/src/styles/display.scss +1 -1
  58. package/src/styles/flex.scss +1 -1
  59. package/src/styles/overflow.scss +2 -0
  60. package/src/styles/position.scss +2 -0
  61. package/src/styles/text-align.scss +2 -0
  62. package/src/styles/utilities.scss +10 -9
  63. package/src/styles/variables/index.scss +2 -1
  64. package/src/styles/white-space.scss +2 -0
  65. package/src/components/Formik/FormikTimePickerNative/FormikTimePickerNative.test.tsx +0 -175
  66. package/src/components/Formik/FormikTimePickerNative/FormikTimePickerNative.tsx +0 -38
  67. package/src/components/TimePickerNative/TimePickerNative.mdx +0 -67
  68. package/src/components/TimePickerNative/TimePickerNative.stories.tsx +0 -150
  69. package/src/components/TimePickerNative/TimePickerNative.test.tsx +0 -117
  70. package/src/components/TimePickerNative/TimePickerNative.tsx +0 -93
package/dist/css/variables.css CHANGED
@@ -1,6 +1,6 @@
1
- /*!**************************************************************************************************************************************************!*\
2
- !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.94.0/node_modules/css-loader/dist/cjs.js!../design-tokens/build/css/variables.css ***!
3
- \**************************************************************************************************************************************************/
1
+ /*!***************************************************************************************************************************************************!*\
2
+ !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.109.2/node_modules/css-loader/dist/cjs.js!../design-tokens/build/css/variables.css ***!
3
+ \***************************************************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly, this file was auto-generated.
6
6
  */
@@ -35,10 +35,35 @@
35
35
  --color-background-button-success: #15803d;
36
36
  --color-background-button-success-hover: #166534;
37
37
  --color-background-button-success-active: #12622f;
38
- --color-background-badge-default: #171717;
39
- --color-background-badge-secondary: #e5e5e5;
40
- --color-background-badge-danger: #fef2f2;
41
- --color-background-badge-outline: transparent;
38
+ --color-background-badge-solid-grey: #171717;
39
+ --color-background-badge-soft-grey: #e5e5e5;
40
+ --color-background-badge-surface-grey: #e5e5e5;
41
+ --color-background-badge-solid-blue: #3b82f6;
42
+ --color-background-badge-soft-blue: #f0f9ff;
43
+ --color-background-badge-surface-blue: #dbeafe;
44
+ --color-background-badge-solid-green: #16a34a;
45
+ --color-background-badge-soft-green: #f0fdf4;
46
+ --color-background-badge-surface-green: #dcfce7;
47
+ --color-background-badge-solid-yellow: #ffc800;
48
+ --color-background-badge-soft-yellow: #fefce8;
49
+ --color-background-badge-surface-yellow: #fef9c3;
50
+ --color-background-badge-solid-red: #ef4444;
51
+ --color-background-badge-soft-red: #fef2f2;
52
+ --color-background-badge-surface-red: #fee2e2;
53
+ --color-background-badge-solid-purple: #a855f7;
54
+ --color-background-badge-soft-purple: #faf5ff;
55
+ --color-background-badge-surface-purple: #f3e8ff;
56
+ --color-background-badge-solid-orange: #f97316;
57
+ --color-background-badge-soft-orange: #fff7ed;
58
+ --color-background-badge-surface-orange: #ffedd5;
59
+ --color-background-badge-solid-brand: linear-gradient(60deg, #eab308 0%, #FA0A64 100%);
60
+ --color-background-badge-soft-brand: #fff7ed;
61
+ --color-background-badge-surface-brand: #ffedd5;
62
+ --color-background-alert-default: #e5e5e5;
63
+ --color-background-alert-info: #dbeafe;
64
+ --color-background-alert-success: #dcfce7;
65
+ --color-background-alert-warning: #fef9c3;
66
+ --color-background-alert-danger: #fee2e2;
42
67
  --color-background-toggle-group-item-hover: rgba(0, 0, 0, 0.1);
43
68
  --color-background-toggle-group-item-active: rgba(0, 0, 0, 0.1);
44
69
  --color-background-scrollbar-thumb: #d4d4d4;
@@ -113,6 +138,16 @@
113
138
  --color-base-yellow-700: #a16207;
114
139
  --color-base-yellow-800: #854d0e;
115
140
  --color-base-yellow-900: #713f12;
141
+ --color-base-orange-50: #fff7ed;
142
+ --color-base-orange-100: #ffedd5;
143
+ --color-base-orange-200: #fed7aa;
144
+ --color-base-orange-300: #fdba74;
145
+ --color-base-orange-400: #ff911e;
146
+ --color-base-orange-500: #f97316;
147
+ --color-base-orange-600: #ea580c;
148
+ --color-base-orange-700: #c2410c;
149
+ --color-base-orange-800: #9a3412;
150
+ --color-base-orange-900: #7c2d12;
116
151
  --color-base-red-50: #fef2f2;
117
152
  --color-base-red-100: #fee2e2;
118
153
  --color-base-red-200: #fecaca;
@@ -152,10 +187,35 @@
152
187
  --color-border-button-tertiary: transparent;
153
188
  --color-border-button-tertiary-hover: transparent;
154
189
  --color-border-button-tertiary-active: transparent;
155
- --color-border-badge-default: #171717;
156
- --color-border-badge-secondary: #e5e5e5;
157
- --color-border-badge-danger: #fee2e2;
158
- --color-border-badge-outline: #d4d4d4;
190
+ --color-border-badge-solid-grey: #171717;
191
+ --color-border-badge-surface-grey: #a3a3a3;
192
+ --color-border-badge-outline-grey: #d4d4d4;
193
+ --color-border-badge-solid-blue: #2563eb;
194
+ --color-border-badge-surface-blue: #93c5fd;
195
+ --color-border-badge-outline-blue: #bfdbfe;
196
+ --color-border-badge-solid-green: #15803d;
197
+ --color-border-badge-surface-green: #86efac;
198
+ --color-border-badge-outline-green: #bbf7d0;
199
+ --color-border-badge-solid-yellow: #eab308;
200
+ --color-border-badge-surface-yellow: #fde047;
201
+ --color-border-badge-outline-yellow: #fef08a;
202
+ --color-border-badge-solid-red: #dc2626;
203
+ --color-border-badge-surface-red: #fca5a5;
204
+ --color-border-badge-outline-red: #fecaca;
205
+ --color-border-badge-solid-purple: #9333ea;
206
+ --color-border-badge-surface-purple: #d8b4fe;
207
+ --color-border-badge-outline-purple: #e9d5ff;
208
+ --color-border-badge-solid-orange: #ea580c;
209
+ --color-border-badge-surface-orange: #fdba74;
210
+ --color-border-badge-outline-orange: #fed7aa;
211
+ --color-border-badge-solid-brand: #eab308;
212
+ --color-border-badge-surface-brand: #fdba74;
213
+ --color-border-badge-outline-brand: #fed7aa;
214
+ --color-border-alert-default: #a3a3a3;
215
+ --color-border-alert-info: #93c5fd;
216
+ --color-border-alert-success: #86efac;
217
+ --color-border-alert-warning: #fde047;
218
+ --color-border-alert-danger: #fca5a5;
159
219
  --color-border-sidebar-rail-hover: #d4d4d4;
160
220
  --color-border-toast: #171717;
161
221
  --color-border-toast-error: #dc2626;
@@ -214,10 +274,27 @@
214
274
  --color-font-button-success: #FFFFFF;
215
275
  --color-font-button-success-hover: #FFFFFF;
216
276
  --color-font-button-success-active: #FFFFFF;
217
- --color-font-badge-default: #FFFFFF;
218
- --color-font-badge-secondary: #262626;
219
- --color-font-badge-danger: #dc2626;
220
- --color-font-badge-outline: #262626;
277
+ --color-font-badge-solid-grey: #FFFFFF;
278
+ --color-font-badge-soft-grey: #262626;
279
+ --color-font-badge-solid-blue: #FFFFFF;
280
+ --color-font-badge-soft-blue: #1d4ed8;
281
+ --color-font-badge-solid-green: #FFFFFF;
282
+ --color-font-badge-soft-green: #166534;
283
+ --color-font-badge-solid-yellow: #000000;
284
+ --color-font-badge-soft-yellow: #a16207;
285
+ --color-font-badge-solid-red: #FFFFFF;
286
+ --color-font-badge-soft-red: #b91c1c;
287
+ --color-font-badge-solid-purple: #FFFFFF;
288
+ --color-font-badge-soft-purple: #7e22ce;
289
+ --color-font-badge-solid-orange: #FFFFFF;
290
+ --color-font-badge-soft-orange: #c2410c;
291
+ --color-font-badge-solid-brand: #FFFFFF;
292
+ --color-font-badge-soft-brand: #c2410c;
293
+ --color-font-alert-default: #262626;
294
+ --color-font-alert-info: #1d4ed8;
295
+ --color-font-alert-success: #166534;
296
+ --color-font-alert-warning: #a16207;
297
+ --color-font-alert-danger: #b91c1c;
221
298
  --color-font-toast: #f5f5f5;
222
299
  --color-font-toast-error: #FFFFFF;
223
300
  --color-font-tooltip: #f5f5f5;
@@ -273,6 +350,7 @@
273
350
  --size-border-radius-xl: 0.75rem;
274
351
  --size-border-radius-2xl: 1rem;
275
352
  --size-border-radius-3xl: 2rem;
353
+ --size-border-radius-full: 9999rem;
276
354
  --size-box-shadow-0: 0 0 #000000;
277
355
  --size-box-shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
278
356
  --size-box-shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
@@ -382,9 +460,9 @@
382
460
  --size-z-index-sticky: 100;
383
461
  }
384
462
 
385
- /*!************************************************************************************************************************************************************!*\
386
- !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.94.0/node_modules/css-loader/dist/cjs.js!../design-tokens/build/css/variables-root-dark.css ***!
387
- \************************************************************************************************************************************************************/
463
+ /*!*************************************************************************************************************************************************************!*\
464
+ !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.109.2/node_modules/css-loader/dist/cjs.js!../design-tokens/build/css/variables-root-dark.css ***!
465
+ \*************************************************************************************************************************************************************/
388
466
  /**
389
467
  * Do not edit directly, this file was auto-generated.
390
468
  */
@@ -416,10 +494,35 @@
416
494
  --color-background-button-success: #15803d;
417
495
  --color-background-button-success-hover: #166534;
418
496
  --color-background-button-success-active: #12622f;
419
- --color-background-badge-default: #FFFFFF;
420
- --color-background-badge-secondary: #404040;
421
- --color-background-badge-danger: #7f1d1d;
422
- --color-background-badge-outline: transparent;
497
+ --color-background-badge-solid-grey: #FFFFFF;
498
+ --color-background-badge-soft-grey: #404040;
499
+ --color-background-badge-surface-grey: #404040;
500
+ --color-background-badge-solid-blue: #3b82f6;
501
+ --color-background-badge-soft-blue: #1e3a8a;
502
+ --color-background-badge-surface-blue: #1e3a8a;
503
+ --color-background-badge-solid-green: #16a34a;
504
+ --color-background-badge-soft-green: #14532d;
505
+ --color-background-badge-surface-green: #14532d;
506
+ --color-background-badge-solid-yellow: #ffc800;
507
+ --color-background-badge-soft-yellow: #713f12;
508
+ --color-background-badge-surface-yellow: #713f12;
509
+ --color-background-badge-solid-red: #ef4444;
510
+ --color-background-badge-soft-red: #7f1d1d;
511
+ --color-background-badge-surface-red: #7f1d1d;
512
+ --color-background-badge-solid-purple: #a855f7;
513
+ --color-background-badge-soft-purple: #581c87;
514
+ --color-background-badge-surface-purple: #581c87;
515
+ --color-background-badge-solid-orange: #f97316;
516
+ --color-background-badge-soft-orange: #7c2d12;
517
+ --color-background-badge-surface-orange: #7c2d12;
518
+ --color-background-badge-solid-brand: linear-gradient(60deg, #eab308 0%, #FA0A64 100%);
519
+ --color-background-badge-soft-brand: #7c2d12;
520
+ --color-background-badge-surface-brand: #7c2d12;
521
+ --color-background-alert-default: #404040;
522
+ --color-background-alert-info: #1e3a8a;
523
+ --color-background-alert-success: #14532d;
524
+ --color-background-alert-warning: #713f12;
525
+ --color-background-alert-danger: #7f1d1d;
423
526
  --color-background-toggle-group-item-hover: rgba(255, 255, 255, .1);
424
527
  --color-background-toggle-group-item-active: rgba(255, 255, 255, .1);
425
528
  --color-background-scrollbar-thumb: #525252;
@@ -448,10 +551,35 @@
448
551
  --color-border-button-tertiary: transparent;
449
552
  --color-border-button-tertiary-hover: transparent;
450
553
  --color-border-button-tertiary-active: transparent;
451
- --color-border-badge-default: #FFFFFF;
452
- --color-border-badge-secondary: #262626;
453
- --color-border-badge-danger: #991b1b;
454
- --color-border-badge-outline: #404040;
554
+ --color-border-badge-solid-grey: #FFFFFF;
555
+ --color-border-badge-surface-grey: #737373;
556
+ --color-border-badge-outline-grey: #404040;
557
+ --color-border-badge-solid-blue: #2563eb;
558
+ --color-border-badge-surface-blue: #1d4ed8;
559
+ --color-border-badge-outline-blue: #1d4ed8;
560
+ --color-border-badge-solid-green: #15803d;
561
+ --color-border-badge-surface-green: #166534;
562
+ --color-border-badge-outline-green: #166534;
563
+ --color-border-badge-solid-yellow: #eab308;
564
+ --color-border-badge-surface-yellow: #a16207;
565
+ --color-border-badge-outline-yellow: #a16207;
566
+ --color-border-badge-solid-red: #dc2626;
567
+ --color-border-badge-surface-red: #b91c1c;
568
+ --color-border-badge-outline-red: #b91c1c;
569
+ --color-border-badge-solid-purple: #9333ea;
570
+ --color-border-badge-surface-purple: #7e22ce;
571
+ --color-border-badge-outline-purple: #7e22ce;
572
+ --color-border-badge-solid-orange: #ea580c;
573
+ --color-border-badge-surface-orange: #c2410c;
574
+ --color-border-badge-outline-orange: #c2410c;
575
+ --color-border-badge-solid-brand: #eab308;
576
+ --color-border-badge-surface-brand: #c2410c;
577
+ --color-border-badge-outline-brand: #c2410c;
578
+ --color-border-alert-default: #737373;
579
+ --color-border-alert-info: #1d4ed8;
580
+ --color-border-alert-success: #166534;
581
+ --color-border-alert-warning: #a16207;
582
+ --color-border-alert-danger: #b91c1c;
455
583
  --color-border-sidebar-rail-hover: #737373;
456
584
  --color-border-toast: #e5e5e5;
457
585
  --color-border-checkbox: #737373;
@@ -476,19 +604,36 @@
476
604
  --color-font-button-tertiary: #FFFFFF;
477
605
  --color-font-button-tertiary-hover: #FFFFFF;
478
606
  --color-font-button-tertiary-active: #FFFFFF;
479
- --color-font-badge-default: #171717;
480
- --color-font-badge-secondary: #e5e5e5;
481
- --color-font-badge-danger: #f87171;
482
- --color-font-badge-outline: #e5e5e5;
607
+ --color-font-badge-solid-grey: #171717;
608
+ --color-font-badge-soft-grey: #e5e5e5;
609
+ --color-font-badge-solid-blue: #FFFFFF;
610
+ --color-font-badge-soft-blue: #bfdbfe;
611
+ --color-font-badge-solid-green: #FFFFFF;
612
+ --color-font-badge-soft-green: #bbf7d0;
613
+ --color-font-badge-solid-yellow: #000000;
614
+ --color-font-badge-soft-yellow: #fef08a;
615
+ --color-font-badge-solid-red: #FFFFFF;
616
+ --color-font-badge-soft-red: #fecaca;
617
+ --color-font-badge-solid-purple: #FFFFFF;
618
+ --color-font-badge-soft-purple: #e9d5ff;
619
+ --color-font-badge-solid-orange: #FFFFFF;
620
+ --color-font-badge-soft-orange: #fed7aa;
621
+ --color-font-badge-solid-brand: #FFFFFF;
622
+ --color-font-badge-soft-brand: #fed7aa;
623
+ --color-font-alert-default: #e5e5e5;
624
+ --color-font-alert-info: #bfdbfe;
625
+ --color-font-alert-success: #bbf7d0;
626
+ --color-font-alert-warning: #fef08a;
627
+ --color-font-alert-danger: #fecaca;
483
628
  --color-font-toast: #404040;
484
629
  --color-font-tooltip: #404040;
485
630
  --color-font-popover: #f5f5f5;
486
631
  --color-font-placeholder: #737373; /** Placeholder color for input fields */
487
632
  }
488
633
 
489
- /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
490
- !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.94.0/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@13.3.3_sass@1.77.8_webpack@5.94.0/node_modules/sass-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.5.10_typescript@5.9.3_webpack@5.94.0/node_modules/postcss-loader/dist/cjs.js!./src/styles/variables/index.scss ***!
491
- \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
634
+ /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
635
+ !*** css ../../node_modules/.pnpm/css-loader@6.11.0_webpack@5.109.2/node_modules/css-loader/dist/cjs.js!../../node_modules/.pnpm/sass-loader@13.3.3_sass@1.102.0_webpack@5.109.2/node_modules/sass-loader/dist/cjs.js!../../node_modules/.pnpm/postcss-loader@7.3.4_postcss@8.5.25_typescript@5.9.3_webpack@5.109.2/node_modules/postcss-loader/dist/cjs.js!./src/styles/variables/index.scss ***!
636
+ \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
492
637
  .hyphen-components__variables__form-control {
493
638
  --INTERNAL_form-control-box-shadow-focus: 0 0 0 3px var(--color-border-subtle);
494
639
  --INTERNAL_form-control-label-margin: var(--size-spacing-xs);
@@ -542,3 +687,5 @@
542
687
  --INTERNAL_form-control-text-clear-icon-margin: var(--size-spacing-xs);
543
688
  --INTERNAL_form-control-text-clear-icon-font-size: var(--size-font-size-md);
544
689
  }
690
+
691
+ /*# sourceMappingURL=variables.css.map*/
package/dist/css/variables.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"css/variables.css","mappings":"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","sources":["webpack://@hyphen/hyphen-components/../design-tokens/build/css/variables.css","webpack://@hyphen/hyphen-components/../design-tokens/build/css/variables-root-dark.css","webpack://@hyphen/hyphen-components/./src/styles/variables/forms.scss","webpack://@hyphen/hyphen-components/./src/styles/variables/index.scss"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --assets-font-family-monospace: 'geist-mono', ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;\n --assets-font-family-body: 'geist', 'Source Sans', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif;;\n --assets-font-family-brand: 'geist', 'Source Sans', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif;;\n --color-background-primary: #FFFFFF;\n --color-background-secondary: #f5f5f5;\n --color-background-tertiary: #e5e5e5;\n --color-background-disabled: #e5e5e5;\n --color-background-success: #f0fdf4;\n --color-background-danger: #fef2f2;\n --color-background-error: #ef4444;\n --color-background-warning: #fefce8;\n --color-background-info: #f0f9ff;\n --color-background-inverse: #262626;\n --color-background-transparent: transparent;\n --color-background-button-primary: #171717;\n --color-background-button-primary-hover: #262626;\n --color-background-button-primary-active: #171717;\n --color-background-button-secondary: #FFFFFF;\n --color-background-button-secondary-hover: #f5f5f5;\n --color-background-button-secondary-active: #e5e5e5;\n --color-background-button-tertiary: transparent;\n --color-background-button-tertiary-hover: #e5e5e5;\n --color-background-button-tertiary-active: #d4d4d4;\n --color-background-button-danger: #ef4444;\n --color-background-button-danger-hover: #dc2626;\n --color-background-button-danger-active: #b91c1c;\n --color-background-button-success: #15803d;\n --color-background-button-success-hover: #166534;\n --color-background-button-success-active: #12622f;\n --color-background-badge-solid-grey: #171717;\n --color-background-badge-soft-grey: #e5e5e5;\n --color-background-badge-surface-grey: #e5e5e5;\n --color-background-badge-solid-blue: #3b82f6;\n --color-background-badge-soft-blue: #f0f9ff;\n --color-background-badge-surface-blue: #dbeafe;\n --color-background-badge-solid-green: #16a34a;\n --color-background-badge-soft-green: #f0fdf4;\n --color-background-badge-surface-green: #dcfce7;\n --color-background-badge-solid-yellow: #ffc800;\n --color-background-badge-soft-yellow: #fefce8;\n --color-background-badge-surface-yellow: #fef9c3;\n --color-background-badge-solid-red: #ef4444;\n --color-background-badge-soft-red: #fef2f2;\n --color-background-badge-surface-red: #fee2e2;\n --color-background-badge-solid-purple: #a855f7;\n --color-background-badge-soft-purple: #faf5ff;\n --color-background-badge-surface-purple: #f3e8ff;\n --color-background-badge-solid-orange: #f97316;\n --color-background-badge-soft-orange: #fff7ed;\n --color-background-badge-surface-orange: #ffedd5;\n --color-background-badge-solid-brand: linear-gradient(60deg, #eab308 0%, #FA0A64 100%);\n --color-background-badge-soft-brand: #fff7ed;\n --color-background-badge-surface-brand: #ffedd5;\n --color-background-alert-default: #e5e5e5;\n --color-background-alert-info: #dbeafe;\n --color-background-alert-success: #dcfce7;\n --color-background-alert-warning: #fef9c3;\n --color-background-alert-danger: #fee2e2;\n --color-background-toggle-group-item-hover: rgba(0, 0, 0, 0.1);\n --color-background-toggle-group-item-active: rgba(0, 0, 0, 0.1);\n --color-background-scrollbar-thumb: #d4d4d4;\n --color-background-scrollbar-track: transparent;\n --color-background-modal: #FFFFFF;\n --color-background-toast: #262626;\n --color-background-toast-error: #ef4444;\n --color-background-tooltip: #262626;\n --color-background-popover: #FFFFFF;\n --color-background-slider: #d4d4d4;\n --color-background-checkbox-checked: #404040;\n --color-background-brand-gradient: linear-gradient(60deg, #eab308 0%, #FA0A64 100%);\n --color-background-brand-gradient-reverse: linear-gradient(270deg, #eab308 0%, #FA0A64 100%);\n --color-background-brand-gradient-purple: linear-gradient(60deg, #b47dff 0%, #4b32aa 100%);\n --color-background-brand-gradient-purple-reverse: linear-gradient(270deg, #b47dff 0%, #4b32aa 100%);\n --color-background-brand-gradient-cyan: linear-gradient(60deg, #00b4ff 0%, #dc50ff 100%);\n --color-background-brand-gradient-cyan-reverse: linear-gradient(270deg, #00b4ff 0%, #dc50ff 100%);\n --color-background-brand-yellow: #ffd200;\n --color-background-brand-orange: #ff911e;\n --color-background-brand-magenta: #ff3278;\n --color-background-brand-dark-grey: #323237;\n --color-background-brand-cyan: #00b4ff;\n --color-background-brand-pink: #dc50ff;\n --color-background-brand-light-purple: #b47dff;\n --color-background-brand-medium-purple: #4b32aa;\n --color-background-brand-dark-purple: #1e1e5a;\n --color-background-chart-1: #1d4ed8;\n --color-background-chart-2: #93c5fd;\n --color-background-chart-3: #3b82f6;\n --color-background-black: #000000;\n --color-background-white: #FFFFFF;\n --color-base-black: #000000;\n --color-base-white: #FFFFFF;\n --color-base-magenta: #FA0A64;\n --color-base-green-50: #f0fdf4;\n --color-base-green-100: #dcfce7;\n --color-base-green-200: #bbf7d0;\n --color-base-green-300: #86efac;\n --color-base-green-400: #4ade80;\n --color-base-green-500: #16a34a;\n --color-base-green-600: #15803d;\n --color-base-green-700: #166534;\n --color-base-green-800: #12622f;\n --color-base-green-900: #14532d;\n --color-base-blue-50: #f0f9ff;\n --color-base-blue-100: #dbeafe;\n --color-base-blue-200: #bfdbfe;\n --color-base-blue-300: #93c5fd;\n --color-base-blue-400: #60a5fa;\n --color-base-blue-500: #3b82f6;\n --color-base-blue-600: #2563eb;\n --color-base-blue-700: #1d4ed8;\n --color-base-blue-800: #1e40af;\n --color-base-blue-900: #1e3a8a;\n --color-base-purple-50: #faf5ff;\n --color-base-purple-100: #f3e8ff;\n --color-base-purple-200: #e9d5ff;\n --color-base-purple-300: #d8b4fe;\n --color-base-purple-400: #c084fc;\n --color-base-purple-500: #a855f7;\n --color-base-purple-600: #9333ea;\n --color-base-purple-700: #7e22ce;\n --color-base-purple-800: #6b21a8;\n --color-base-purple-900: #581c87;\n --color-base-yellow-50: #fefce8;\n --color-base-yellow-100: #fef9c3;\n --color-base-yellow-200: #fef08a;\n --color-base-yellow-300: #fde047;\n --color-base-yellow-400: #ffc800;\n --color-base-yellow-500: #eab308;\n --color-base-yellow-600: #ca8a04;\n --color-base-yellow-700: #a16207;\n --color-base-yellow-800: #854d0e;\n --color-base-yellow-900: #713f12;\n --color-base-orange-50: #fff7ed;\n --color-base-orange-100: #ffedd5;\n --color-base-orange-200: #fed7aa;\n --color-base-orange-300: #fdba74;\n --color-base-orange-400: #ff911e;\n --color-base-orange-500: #f97316;\n --color-base-orange-600: #ea580c;\n --color-base-orange-700: #c2410c;\n --color-base-orange-800: #9a3412;\n --color-base-orange-900: #7c2d12;\n --color-base-red-50: #fef2f2;\n --color-base-red-100: #fee2e2;\n --color-base-red-200: #fecaca;\n --color-base-red-300: #fca5a5;\n --color-base-red-400: #f87171;\n --color-base-red-500: #ef4444;\n --color-base-red-600: #dc2626;\n --color-base-red-700: #b91c1c;\n --color-base-red-800: #991b1b;\n --color-base-red-900: #7f1d1d;\n --color-base-grey-50: #f5f5f5;\n --color-base-grey-100: #e5e5e5;\n --color-base-grey-200: #d4d4d4;\n --color-base-grey-300: #a3a3a3;\n --color-base-grey-400: #737373;\n --color-base-grey-500: #525252;\n --color-base-grey-600: #404040;\n --color-base-grey-700: #262626;\n --color-base-grey-800: #171717;\n --color-base-grey-900: #0a0a0a;\n --color-border-default: #d4d4d4;\n --color-border-subtle: #e5e5e5;\n --color-border-transparent: transparent;\n --color-border-hover: #a3a3a3;\n --color-border-active: #737373;\n --color-border-danger: #fca5a5;\n --color-border-warning: #fde047;\n --color-border-inverse: #262626;\n --color-border-info: #bfdbfe;\n --color-border-success: #bbf7d0;\n --color-border-button-primary: #171717;\n --color-border-button-primary-hover: #262626;\n --color-border-button-primary-active: #171717;\n --color-border-button-secondary: #d4d4d4;\n --color-border-button-secondary-hover: #d4d4d4;\n --color-border-button-secondary-active: #a3a3a3;\n --color-border-button-tertiary: transparent;\n --color-border-button-tertiary-hover: transparent;\n --color-border-button-tertiary-active: transparent;\n --color-border-badge-solid-grey: #171717;\n --color-border-badge-surface-grey: #a3a3a3;\n --color-border-badge-outline-grey: #d4d4d4;\n --color-border-badge-solid-blue: #2563eb;\n --color-border-badge-surface-blue: #93c5fd;\n --color-border-badge-outline-blue: #bfdbfe;\n --color-border-badge-solid-green: #15803d;\n --color-border-badge-surface-green: #86efac;\n --color-border-badge-outline-green: #bbf7d0;\n --color-border-badge-solid-yellow: #eab308;\n --color-border-badge-surface-yellow: #fde047;\n --color-border-badge-outline-yellow: #fef08a;\n --color-border-badge-solid-red: #dc2626;\n --color-border-badge-surface-red: #fca5a5;\n --color-border-badge-outline-red: #fecaca;\n --color-border-badge-solid-purple: #9333ea;\n --color-border-badge-surface-purple: #d8b4fe;\n --color-border-badge-outline-purple: #e9d5ff;\n --color-border-badge-solid-orange: #ea580c;\n --color-border-badge-surface-orange: #fdba74;\n --color-border-badge-outline-orange: #fed7aa;\n --color-border-badge-solid-brand: #eab308;\n --color-border-badge-surface-brand: #fdba74;\n --color-border-badge-outline-brand: #fed7aa;\n --color-border-alert-default: #a3a3a3;\n --color-border-alert-info: #93c5fd;\n --color-border-alert-success: #86efac;\n --color-border-alert-warning: #fde047;\n --color-border-alert-danger: #fca5a5;\n --color-border-sidebar-rail-hover: #d4d4d4;\n --color-border-toast: #171717;\n --color-border-toast-error: #dc2626;\n --color-border-checkbox: #737373;\n --color-border-brand-yellow: #ffd200;\n --color-border-brand-orange: #ff911e;\n --color-border-brand-magenta: #ff3278;\n --color-border-brand-dark-grey: #323237;\n --color-border-brand-cyan: #00b4ff;\n --color-border-brand-pink: #dc50ff;\n --color-border-brand-light-purple: #b47dff;\n --color-border-brand-medium-purple: #4b32aa;\n --color-border-brand-dark-purple: #1e1e5a;\n --color-border-black: #000000;\n --color-border-white: #FFFFFF;\n --color-border-green: #16a34a;\n --color-border-red: #ef4444;\n --color-border-purple: #a855f7;\n --color-brand-yellow: #ffd200;\n --color-brand-orange: #ff911e;\n --color-brand-magenta: #ff3278;\n --color-brand-dark-grey: #323237;\n --color-brand-cyan: #00b4ff;\n --color-brand-pink: #dc50ff;\n --color-brand-light-purple: #b47dff;\n --color-brand-medium-purple: #4b32aa;\n --color-brand-dark-purple: #1e1e5a;\n --color-font-base: #404040;\n --color-font-secondary: #737373;\n --color-font-tertiary: #a3a3a3;\n --color-font-grey: #404040;\n --color-font-black: #000000;\n --color-font-white: #FFFFFF;\n --color-font-inverse: #e5e5e5;\n --color-font-disabled: #a3a3a3;\n --color-font-success: #15803d;\n --color-font-success-disabled: #bbf7d0;\n --color-font-info: #2563eb;\n --color-font-warning: #ca8a04;\n --color-font-warning-disabled: #fef08a;\n --color-font-danger: #dc2626;\n --color-font-danger-input: #404040;\n --color-font-danger-disabled: #fecaca;\n --color-font-button-primary: #FFFFFF;\n --color-font-button-primary-hover: #FFFFFF;\n --color-font-button-primary-active: #FFFFFF;\n --color-font-button-secondary: #737373;\n --color-font-button-secondary-hover: #525252;\n --color-font-button-secondary-active: #525252;\n --color-font-button-tertiary: #737373;\n --color-font-button-tertiary-hover: #525252;\n --color-font-button-tertiary-active: #525252;\n --color-font-button-danger: #FFFFFF;\n --color-font-button-danger-hover: #FFFFFF;\n --color-font-button-danger-active: #FFFFFF;\n --color-font-button-success: #FFFFFF;\n --color-font-button-success-hover: #FFFFFF;\n --color-font-button-success-active: #FFFFFF;\n --color-font-badge-solid-grey: #FFFFFF;\n --color-font-badge-soft-grey: #262626;\n --color-font-badge-solid-blue: #FFFFFF;\n --color-font-badge-soft-blue: #1d4ed8;\n --color-font-badge-solid-green: #FFFFFF;\n --color-font-badge-soft-green: #166534;\n --color-font-badge-solid-yellow: #000000;\n --color-font-badge-soft-yellow: #a16207;\n --color-font-badge-solid-red: #FFFFFF;\n --color-font-badge-soft-red: #b91c1c;\n --color-font-badge-solid-purple: #FFFFFF;\n --color-font-badge-soft-purple: #7e22ce;\n --color-font-badge-solid-orange: #FFFFFF;\n --color-font-badge-soft-orange: #c2410c;\n --color-font-badge-solid-brand: #FFFFFF;\n --color-font-badge-soft-brand: #c2410c;\n --color-font-alert-default: #262626;\n --color-font-alert-info: #1d4ed8;\n --color-font-alert-success: #166534;\n --color-font-alert-warning: #a16207;\n --color-font-alert-danger: #b91c1c;\n --color-font-toast: #f5f5f5;\n --color-font-toast-error: #FFFFFF;\n --color-font-tooltip: #f5f5f5;\n --color-font-popover: #404040;\n --color-font-placeholder: #a3a3a3; /** Placeholder color for input fields */\n --color-font-brand-yellow: #ffd200;\n --color-font-brand-orange: #ff911e;\n --color-font-brand-magenta: #ff3278;\n --color-font-brand-dark-grey: #323237;\n --color-font-brand-cyan: #00b4ff;\n --color-font-brand-pink: #dc50ff;\n --color-font-brand-light-purple: #b47dff;\n --color-font-brand-medium-purple: #4b32aa;\n --color-font-brand-dark-purple: #1e1e5a;\n --font-text-decoration-line-none: none;\n --font-text-decoration-line-underline: underline;\n --font-text-decoration-line-line-through: line-through;\n --font-text-decoration-style-solid: solid;\n --font-text-decoration-style-double: double;\n --font-text-decoration-style-dotted: dotted;\n --font-text-decoration-style-dashed: dashed;\n --font-text-decoration-style-wavy: wavy;\n --font-text-transform-uppercase: uppercase;\n --font-text-transform-lowercase: lowercase;\n --font-text-transform-capitalize: capitalize;\n --font-text-transform-normal-case: normal-case;\n --font-text-wrap-wrap: wrap;\n --font-text-wrap-nowrap: nowrap;\n --font-text-wrap-balance: balance;\n --font-text-wrap-pretty: pretty;\n --font-text-wrap-stable: stable;\n --font-text-wrap-inherit: inherit;\n --font-text-wrap-initial: initial;\n --font-text-wrap-unset: unset;\n --font-white-space-normal: normal;\n --font-white-space-nowrap: nowrap;\n --font-white-space-pre: pre;\n --font-white-space-pre-line: pre-line;\n --font-white-space-pre-wrap: pre-wrap;\n --font-white-space-break-spaces: break-spaces;\n --font-word-break-normal: normal;\n --font-word-break-all: break-all;\n --font-word-break-keep: keep-all;\n --size-border-width-0: 0rem;\n --size-border-width-sm: 0.0625rem;\n --size-border-width-md: 0.125rem;\n --size-border-width-lg: 0.25rem;\n --size-border-radius-0: 0rem;\n --size-border-radius-xs: 0.125rem;\n --size-border-radius-sm: 0.25rem;\n --size-border-radius-md: 0.5rem;\n --size-border-radius-lg: 0.625rem;\n --size-border-radius-xl: 0.75rem;\n --size-border-radius-2xl: 1rem;\n --size-border-radius-3xl: 2rem;\n --size-border-radius-full: 9999rem;\n --size-box-shadow-0: 0 0 #000000;\n --size-box-shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n --size-box-shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n --size-box-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);\n --size-box-shadow-md: 0 1px 5px 0 rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);\n --size-box-shadow-lg: 0 10px 12px -4px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.06);\n --size-box-shadow-xl: 0 16px 20px -4px rgba(0, 0, 0, 0.1), 0 8px 12px rgba(0, 0, 0, 0.05);\n --size-box-shadow-2xl: 0 20px 40px -5px rgba(0, 0, 0, 0.16);\n --size-breakpoint-tablet: 680px;\n --size-breakpoint-desktop: 992px;\n --size-breakpoint-hd: 1280px;\n --size-dimension-0: 0rem;\n --size-dimension-2xs: 0.125rem;\n --size-dimension-xs: 0.25rem;\n --size-dimension-sm: 0.5rem;\n --size-dimension-md: 0.625rem;\n --size-dimension-lg: 0.75rem;\n --size-dimension-xl: 1rem;\n --size-dimension-2xl: 1.25rem;\n --size-dimension-3xl: 1.5rem;\n --size-dimension-4xl: 2rem;\n --size-dimension-5xl: 4rem;\n --size-dimension-6xl: 8rem;\n --size-dimension-7xl: 12rem;\n --size-dimension-8xl: 16rem;\n --size-dimension-9xl: 32rem;\n --size-dimension-10xl: 64rem;\n --size-dimension-fit: fit-content;\n --size-dimension-min: min-content;\n --size-dimension-max: max-content;\n --size-dimension-auto: auto;\n --size-percentage-0: 0%;\n --size-percentage-10: 10%;\n --size-percentage-15: 15%;\n --size-percentage-20: 20%;\n --size-percentage-25: 25%;\n --size-percentage-30: 30%;\n --size-percentage-33: 33%;\n --size-percentage-34: 34%;\n --size-percentage-40: 40%;\n --size-percentage-50: 50%;\n --size-percentage-60: 60%;\n --size-percentage-66: 66%;\n --size-percentage-70: 70%;\n --size-percentage-75: 75%;\n --size-percentage-80: 80%;\n --size-percentage-90: 90%;\n --size-percentage-100: 100%;\n --size-font-weight-light: 300;\n --size-font-weight-normal: 400;\n --size-font-weight-medium: 500;\n --size-font-weight-semibold: 600;\n --size-font-weight-bold: 700;\n --size-font-weight-form-label: 500;\n --size-font-weight-form-help-text: 400;\n --size-font-size-2xs: 0.625rem;\n --size-font-size-xs: 0.75rem;\n --size-font-size-sm: 0.875rem;\n --size-font-size-md: 1rem;\n --size-font-size-lg: 1.125rem;\n --size-font-size-xl: 1.25rem;\n --size-font-size-2xl: 1.5rem;\n --size-font-size-3xl: 2rem;\n --size-font-size-4xl: 2.5rem;\n --size-font-size-5xl: 3rem;\n --size-font-size-6xl: 3.5rem;\n --size-font-size-7xl: 4rem;\n --size-font-size-base: 1rem; /** the base size of the font */\n --size-font-size-form-label: 0.875rem;\n --size-font-size-form-help-text: 0.875rem;\n --size-heading-sm: 1rem;\n --size-heading-md: 1.25rem;\n --size-heading-lg: 1.5rem;\n --size-heading-xl: 2rem;\n --size-heading-2xl: 2.5rem;\n --size-heading-3xl: 3rem;\n --size-heading-4xl: 3.5rem;\n --size-heading-5xl: 4rem;\n --size-heading-6xl: 4.5rem;\n --size-line-height-none: 1;\n --size-line-height-base: 1.25;\n --size-line-height-input: 1.15; /** for use by form inputs */\n --size-line-height-heading: 1.25; /** the line-height for headings */\n --size-line-height-text: 1.5; /** for paragraphs of text */\n --size-spacing-0: 0rem;\n --size-spacing-2xs: 0.125rem;\n --size-spacing-xs: 0.25rem;\n --size-spacing-sm: 0.5rem;\n --size-spacing-md: 0.625rem;\n --size-spacing-lg: 0.75rem;\n --size-spacing-xl: 1rem;\n --size-spacing-2xl: 1.25rem;\n --size-spacing-3xl: 1.5rem;\n --size-spacing-4xl: 2rem;\n --size-spacing-5xl: 4rem;\n --size-spacing-6xl: 6rem;\n --size-spacing-7xl: 8rem;\n --size-spacing-8xl: 10rem;\n --size-spacing-9xl: 12rem;\n --size-spacing-10xl: 16rem;\n --size-spacing-auto: auto;\n --size-z-index-0: 0;\n --size-z-index-popover: 9000;\n --size-z-index-modal: 8000;\n --size-z-index-overlay: 7000;\n --size-z-index-drawer: 200;\n --size-z-index-sticky: 100;\n}\n","/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root.dark {\n --color-background-primary: #262626;\n --color-background-secondary: #171717;\n --color-background-tertiary: #0a0a0a;\n --color-background-disabled: #0a0a0a;\n --color-background-success: #f0fdf4;\n --color-background-danger: #fef2f2;\n --color-background-error: #ef4444;\n --color-background-warning: #fefce8;\n --color-background-info: #f0f9ff;\n --color-background-inverse: #e5e5e5;\n --color-background-transparent: transparent;\n --color-background-button-primary: #FFFFFF;\n --color-background-button-primary-hover: #e5e5e5;\n --color-background-button-primary-active: #e5e5e5;\n --color-background-button-secondary: #171717;\n --color-background-button-secondary-hover: #262626;\n --color-background-button-secondary-active: #171717;\n --color-background-button-tertiary: transparent;\n --color-background-button-tertiary-hover: #404040;\n --color-background-button-tertiary-active: #525252;\n --color-background-button-danger: #ef4444;\n --color-background-button-danger-hover: #dc2626;\n --color-background-button-danger-active: #b91c1c;\n --color-background-button-success: #15803d;\n --color-background-button-success-hover: #166534;\n --color-background-button-success-active: #12622f;\n --color-background-badge-solid-grey: #FFFFFF;\n --color-background-badge-soft-grey: #404040;\n --color-background-badge-surface-grey: #404040;\n --color-background-badge-solid-blue: #3b82f6;\n --color-background-badge-soft-blue: #1e3a8a;\n --color-background-badge-surface-blue: #1e3a8a;\n --color-background-badge-solid-green: #16a34a;\n --color-background-badge-soft-green: #14532d;\n --color-background-badge-surface-green: #14532d;\n --color-background-badge-solid-yellow: #ffc800;\n --color-background-badge-soft-yellow: #713f12;\n --color-background-badge-surface-yellow: #713f12;\n --color-background-badge-solid-red: #ef4444;\n --color-background-badge-soft-red: #7f1d1d;\n --color-background-badge-surface-red: #7f1d1d;\n --color-background-badge-solid-purple: #a855f7;\n --color-background-badge-soft-purple: #581c87;\n --color-background-badge-surface-purple: #581c87;\n --color-background-badge-solid-orange: #f97316;\n --color-background-badge-soft-orange: #7c2d12;\n --color-background-badge-surface-orange: #7c2d12;\n --color-background-badge-solid-brand: linear-gradient(60deg, #eab308 0%, #FA0A64 100%);\n --color-background-badge-soft-brand: #7c2d12;\n --color-background-badge-surface-brand: #7c2d12;\n --color-background-alert-default: #404040;\n --color-background-alert-info: #1e3a8a;\n --color-background-alert-success: #14532d;\n --color-background-alert-warning: #713f12;\n --color-background-alert-danger: #7f1d1d;\n --color-background-toggle-group-item-hover: rgba(255, 255, 255, .1);\n --color-background-toggle-group-item-active: rgba(255, 255, 255, .1);\n --color-background-scrollbar-thumb: #525252;\n --color-background-modal: #262626;\n --color-background-toast: #f5f5f5;\n --color-background-tooltip: #f5f5f5;\n --color-background-popover: #262626;\n --color-background-slider: #737373;\n --color-background-checkbox-checked: #FFFFFF;\n --color-border-default: #525252;\n --color-border-subtle: #404040;\n --color-border-transparent: transparent;\n --color-border-hover: #404040;\n --color-border-active: #262626;\n --color-border-danger: #fecaca;\n --color-border-warning: #fef08a;\n --color-border-inverse: #d4d4d4;\n --color-border-info: #bfdbfe;\n --color-border-success: #bbf7d0;\n --color-border-button-primary: #FFFFFF;\n --color-border-button-primary-hover: #e5e5e5;\n --color-border-button-primary-active: #e5e5e5;\n --color-border-button-secondary: #525252;\n --color-border-button-secondary-hover: #737373;\n --color-border-button-secondary-active: #a3a3a3;\n --color-border-button-tertiary: transparent;\n --color-border-button-tertiary-hover: transparent;\n --color-border-button-tertiary-active: transparent;\n --color-border-badge-solid-grey: #FFFFFF;\n --color-border-badge-surface-grey: #737373;\n --color-border-badge-outline-grey: #404040;\n --color-border-badge-solid-blue: #2563eb;\n --color-border-badge-surface-blue: #1d4ed8;\n --color-border-badge-outline-blue: #1d4ed8;\n --color-border-badge-solid-green: #15803d;\n --color-border-badge-surface-green: #166534;\n --color-border-badge-outline-green: #166534;\n --color-border-badge-solid-yellow: #eab308;\n --color-border-badge-surface-yellow: #a16207;\n --color-border-badge-outline-yellow: #a16207;\n --color-border-badge-solid-red: #dc2626;\n --color-border-badge-surface-red: #b91c1c;\n --color-border-badge-outline-red: #b91c1c;\n --color-border-badge-solid-purple: #9333ea;\n --color-border-badge-surface-purple: #7e22ce;\n --color-border-badge-outline-purple: #7e22ce;\n --color-border-badge-solid-orange: #ea580c;\n --color-border-badge-surface-orange: #c2410c;\n --color-border-badge-outline-orange: #c2410c;\n --color-border-badge-solid-brand: #eab308;\n --color-border-badge-surface-brand: #c2410c;\n --color-border-badge-outline-brand: #c2410c;\n --color-border-alert-default: #737373;\n --color-border-alert-info: #1d4ed8;\n --color-border-alert-success: #166534;\n --color-border-alert-warning: #a16207;\n --color-border-alert-danger: #b91c1c;\n --color-border-sidebar-rail-hover: #737373;\n --color-border-toast: #e5e5e5;\n --color-border-checkbox: #737373;\n --color-font-base: #f5f5f5;\n --color-font-secondary: #d4d4d4;\n --color-font-inverse: #404040;\n --color-font-disabled: #525252;\n --color-font-success: #16a34a;\n --color-font-success-disabled: #16a34a;\n --color-font-info: #60a5fa;\n --color-font-warning: #eab308;\n --color-font-warning-disabled: #fef08a;\n --color-font-danger: #ef4444;\n --color-font-danger-input: #404040;\n --color-font-danger-disabled: #fecaca;\n --color-font-button-primary: #525252;\n --color-font-button-primary-hover: #525252;\n --color-font-button-primary-active: #525252;\n --color-font-button-secondary: #FFFFFF;\n --color-font-button-secondary-hover: #FFFFFF;\n --color-font-button-secondary-active: #FFFFFF;\n --color-font-button-tertiary: #FFFFFF;\n --color-font-button-tertiary-hover: #FFFFFF;\n --color-font-button-tertiary-active: #FFFFFF;\n --color-font-badge-solid-grey: #171717;\n --color-font-badge-soft-grey: #e5e5e5;\n --color-font-badge-solid-blue: #FFFFFF;\n --color-font-badge-soft-blue: #bfdbfe;\n --color-font-badge-solid-green: #FFFFFF;\n --color-font-badge-soft-green: #bbf7d0;\n --color-font-badge-solid-yellow: #000000;\n --color-font-badge-soft-yellow: #fef08a;\n --color-font-badge-solid-red: #FFFFFF;\n --color-font-badge-soft-red: #fecaca;\n --color-font-badge-solid-purple: #FFFFFF;\n --color-font-badge-soft-purple: #e9d5ff;\n --color-font-badge-solid-orange: #FFFFFF;\n --color-font-badge-soft-orange: #fed7aa;\n --color-font-badge-solid-brand: #FFFFFF;\n --color-font-badge-soft-brand: #fed7aa;\n --color-font-alert-default: #e5e5e5;\n --color-font-alert-info: #bfdbfe;\n --color-font-alert-success: #bbf7d0;\n --color-font-alert-warning: #fef08a;\n --color-font-alert-danger: #fecaca;\n --color-font-toast: #404040;\n --color-font-tooltip: #404040;\n --color-font-popover: #f5f5f5;\n --color-font-placeholder: #737373; /** Placeholder color for input fields */\n}\n",".hyphen-components__variables__form-control {\n // ----GLOBALS----\n --INTERNAL_form-control-box-shadow-focus: 0 0 0 3px var(--color-border-subtle);\n --INTERNAL_form-control-label-margin: var(--size-spacing-xs);\n --INTERNAL_form-control-line-height: var(--size-line-height-input);\n --INTERNAL_form-control-label-font-weight: var(--size-font-weight-medium);\n --INTERNAL_form-control-legend-font-weight: var(--size-font-weight-medium);\n --INTERNAL_form-control-help-font-weight: var(--size-font-weight-normal);\n --INTERNAL_form-control-box-shadow: 0 3px 0 rgb(0 0 0 / 5%);\n --INTERNAL_form-control-font-family: var(--assets-font-family-body);\n\n // --SIZES--\n\n // small\n --INTERNAL_form-control-size-sm-border-radius: var(--size-border-radius-sm);\n --INTERNAL_form-control-size-sm-font-size: var(--size-font-size-xs);\n --INTERNAL_form-control-size-sm-padding: var(--size-spacing-sm);\n\n // medium (default)\n --INTERNAL_form-control-size-md-label-size: var(--size-font-size-sm);\n --INTERNAL_form-control-size-md-border-radius: var(--size-border-radius-sm);\n --INTERNAL_form-control-size-md-font-size: var(--size-font-size-sm);\n --INTERNAL_form-control-size-md-padding: var(--size-spacing-lg);\n\n // large\n --INTERNAL_form-control-size-lg-border-radius: var(--size-border-radius-sm);\n --INTERNAL_form-control-size-lg-font-size: var(--size-font-size-md);\n --INTERNAL_form-control-size-lg-padding: var(--size-spacing-lg);\n\n // --COLORS--\n --INTERNAL_form-control-background-color: var(--color-background-primary);\n --INTERNAL_form-control-background-color-disabled: var(--color-base-grey-50);\n --INTERNAL_form-control-background-color-error: var(\n --color-background-danger\n );\n --INTERNAL_form-control-border-color: var(--color-border-default);\n --INTERNAL_form-control-border-color-error: var(--color-base-red-100);\n --INTERNAL_form-control-border-color-error-disabled: var(\n --color-base-red-100\n );\n --INTERNAL_form-control-border-color-focus: var(--color-border-hover);\n --INTERNAL_form-control-border-color-hover: var(--color-border-hover);\n --INTERNAL_form-control-font-color: var(--color-font-base);\n --INTERNAL_form-control-font-color-disabled: var(--color-font-disabled);\n --INTERNAL_form-control-font-color-error: var(--color-font-danger);\n --INTERNAL_form-control-input-color-error: var(--color-font-danger-input);\n --INTERNAL_form-control-font-color-error-disabled: var(\n --color-font-danger-disabled\n );\n --INTERNAL_form-control-description-color: var(--color-font-secondary);\n --INTERNAL_form-control-icon-color: var(--color-base-grey-300);\n --INTERNAL_form-control-icon-color-hover: var(--color-base-grey);\n\n // ----RADIO GROUP----\n --INTERNAL_form-control-radio-group-description-spacing: var(\n --size-spacing-xs\n );\n --INTERNAL_form-control-radio-group-options-spacing: var(--size-spacing-md);\n\n // ----SELECT INPUT----\n --INTERNAL_form-control-select-sm-icon-size: 20px;\n --INTERNAL_form-control-select-md-icon-size: 32px;\n --INTERNAL_form-control-select-lg-icon-size: 34px;\n --INTERNAL_form-control-select-padding: var(--size-spacing-2xs);\n --INTERNAL_form-control-select-clear-icon-margin: var(--size-spacing-xs);\n\n // ----TEXT INPUT----\n --INTERNAL_form-control-text-clear-icon-margin: var(--size-spacing-xs);\n --INTERNAL_form-control-text-clear-icon-font-size: var(--size-font-size-md);\n}\n","@use './forms';\n\n@import '@hyphen/hyphen-design-tokens/build/css/variables.css';\n@import '@hyphen/hyphen-design-tokens/build/css/variables-root-dark.css';\n"],"names":[],"sourceRoot":""}