@jackcrane/ui 0.1.5 → 0.1.7

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.
@@ -7,6 +7,7 @@
7
7
  * @param {boolean} props.chamfer - Whether to apply a chamfer effect to the button.
8
8
  * @param {string} props.size - Size of the button. Either large or small. Defaults to medium.
9
9
  * @param {boolean} props.disabled - Whether the button is disabled.
10
+ * @param {boolean} props.loading - Whether the button is loading.
10
11
  * @returns {JSX.Element}
11
12
  */
12
13
  export default function Button({ children, variant, chamfer, size, disabled, loading, ...props }: {
@@ -15,5 +16,6 @@ export default function Button({ children, variant, chamfer, size, disabled, loa
15
16
  chamfer: boolean;
16
17
  size: string;
17
18
  disabled: boolean;
19
+ loading: boolean;
18
20
  }): JSX.Element;
19
21
  export function ColorSwitcher(): import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,6 @@
1
- export default function Hatch({ children, className, ...props }: {
1
+ export default function Hatch({ children, className, variant, ...props }: {
2
2
  [x: string]: any;
3
3
  children: any;
4
4
  className: any;
5
+ variant: any;
5
6
  }): import("react/jsx-runtime").JSX.Element;
package/dist/jcui.cjs.js CHANGED
@@ -3,7 +3,7 @@
3
3
  inherits: true;
4
4
  initial-value: transparent;
5
5
  }
6
- ._button_d2nsp_7 {
6
+ ._button_105y0_7 {
7
7
  border-width: var(--border-thickness);
8
8
  border-style: solid;
9
9
  font-size: 1rem;
@@ -13,95 +13,104 @@
13
13
  border-color: var(--border-color);
14
14
  cursor: pointer;
15
15
  }
16
- ._button_d2nsp_7:hover {
16
+ ._button_105y0_7:hover {
17
17
  --button-bg: var(--secondary-color-100);
18
18
  }
19
- ._button_d2nsp_7:active {
19
+ ._button_105y0_7:active {
20
20
  --button-bg: var(--secondary-color-200);
21
21
  }
22
- ._large_d2nsp_24 {
22
+ ._pageBackground_105y0_24 {
23
+ --button-bg: var(--body-bg);
24
+ }
25
+ ._pageBackground_105y0_24:hover {
26
+ --button-bg: var(--body-bg);
27
+ }
28
+ ._pageBackground_105y0_24:active {
29
+ --button-bg: var(--body-bg);
30
+ }
31
+ ._large_105y0_34 {
23
32
  font-size: 1.25rem;
24
33
  padding: 0.75rem 1.25rem;
25
34
  }
26
- ._small_d2nsp_29 {
35
+ ._small_105y0_39 {
27
36
  font-size: 0.75rem;
28
37
  padding: 0.25rem 0.5rem;
29
38
  }
30
- ._disabled_d2nsp_34 {
39
+ ._disabled_105y0_44 {
31
40
  opacity: 0.5 !important;
32
41
  cursor: not-allowed;
33
42
  }
34
43
  /* Variants */
35
- ._primary_d2nsp_41 {
44
+ ._primary_105y0_51 {
36
45
  --button-bg: var(--primary-color-100);
37
46
  --border-color: var(--primary-color-300);
38
47
  --border-accent-color: var(--primary-color-600);
39
48
  --button-color: var(--primary-color-800);
40
49
  }
41
- ._primary_d2nsp_41:hover {
50
+ ._primary_105y0_51:hover {
42
51
  --button-bg: var(--primary-color-200);
43
52
  }
44
- ._primary_d2nsp_41:active {
53
+ ._primary_105y0_51:active {
45
54
  --button-bg: var(--primary-color-300);
46
55
  }
47
- ._success_d2nsp_54 {
56
+ ._success_105y0_64 {
48
57
  --button-bg: var(--success-color-100);
49
58
  --border-color: var(--success-color-300);
50
59
  --border-accent-color: var(--success-color-600);
51
60
  --button-color: var(--success-color-800);
52
61
  }
53
- ._success_d2nsp_54:hover {
62
+ ._success_105y0_64:hover {
54
63
  --button-bg: var(--success-color-200);
55
64
  }
56
- ._success_d2nsp_54:active {
65
+ ._success_105y0_64:active {
57
66
  --button-bg: var(--success-color-300);
58
67
  }
59
- ._warning_d2nsp_67 {
68
+ ._warning_105y0_77 {
60
69
  --button-bg: var(--warning-color-100);
61
70
  --border-color: var(--warning-color-300);
62
71
  --border-accent-color: var(--warning-color-600);
63
72
  --button-color: var(--warning-color-800);
64
73
  }
65
- ._warning_d2nsp_67:hover {
74
+ ._warning_105y0_77:hover {
66
75
  --button-bg: var(--warning-color-200);
67
76
  }
68
- ._warning_d2nsp_67:active {
77
+ ._warning_105y0_77:active {
69
78
  --button-bg: var(--warning-color-300);
70
79
  }
71
- ._danger_d2nsp_80 {
80
+ ._danger_105y0_90 {
72
81
  --button-bg: var(--danger-color-100);
73
82
  --border-color: var(--danger-color-300);
74
83
  --border-accent-color: var(--danger-color-600);
75
84
  --button-color: var(--danger-color-800);
76
85
  }
77
- ._danger_d2nsp_80:hover {
86
+ ._danger_105y0_90:hover {
78
87
  --button-bg: var(--danger-color-200);
79
88
  }
80
- ._danger_d2nsp_80:active {
89
+ ._danger_105y0_90:active {
81
90
  --button-bg: var(--danger-color-300);
82
91
  }
83
- ._info_d2nsp_93 {
92
+ ._info_105y0_103 {
84
93
  --button-bg: var(--info-color-100);
85
94
  --border-color: var(--info-color-300);
86
95
  --border-accent-color: var(--info-color-600);
87
96
  --button-color: var(--info-color-800);
88
97
  }
89
- ._info_d2nsp_93:hover {
98
+ ._info_105y0_103:hover {
90
99
  --button-bg: var(--info-color-200);
91
100
  }
92
- ._info_d2nsp_93:active {
101
+ ._info_105y0_103:active {
93
102
  --button-bg: var(--info-color-300);
94
103
  }
95
- ._secondary_d2nsp_106 {
104
+ ._secondary_105y0_116 {
96
105
  --button-bg: var(--secondary-color-100);
97
106
  --border-color: var(--secondary-color-300);
98
107
  --border-accent-color: var(--secondary-color-600);
99
108
  --button-color: var(--secondary-color-800);
100
109
  }
101
- ._secondary_d2nsp_106:hover {
110
+ ._secondary_105y0_116:hover {
102
111
  --button-bg: var(--secondary-color-200);
103
112
  }
104
- ._secondary_d2nsp_106:active {
113
+ ._secondary_105y0_116:active {
105
114
  --button-bg: var(--secondary-color-300);
106
115
  }
107
116
  ._chamfer_1o5rm_1 {
@@ -423,7 +432,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
423
432
  inherits: true;
424
433
  initial-value: transparent;
425
434
  }
426
- ._input_rojre_7 {
435
+ ._input_1ymvl_7 {
427
436
  border-width: var(--border-thickness);
428
437
  border-style: solid;
429
438
  font-size: 1rem;
@@ -433,79 +442,92 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
433
442
  border-color: var(--border-color);
434
443
  width: calc(100% + var(--border-thickness));
435
444
  }
436
- ._input_rojre_7:hover {
445
+ ._input_1ymvl_7:hover {
437
446
  --input-bg: var(--secondary-color-100);
438
447
  }
439
- ._input_rojre_7:focus {
448
+ ._input_1ymvl_7:focus {
440
449
  outline: none;
441
450
  }
442
- ._large_rojre_24 {
451
+ ._pageBackground_1ymvl_24 {
452
+ --input-bg: var(--body-bg);
453
+ --button-bg: var(--body-bg);
454
+ }
455
+ ._pageBackground_1ymvl_24:hover {
456
+ --input-bg: var(--body-bg);
457
+ --button-bg: var(--body-bg);
458
+ }
459
+ ._pageBackground_1ymvl_24:focus,
460
+ ._pageBackground_1ymvl_24:focus-within {
461
+ --input-bg: var(--body-bg);
462
+ --button-bg: var(--body-bg);
463
+ }
464
+ ._large_1ymvl_38 {
443
465
  font-size: 1.25rem;
444
466
  padding: 0.75rem 1.25rem;
445
467
  }
446
- ._small_rojre_29 {
468
+ ._small_1ymvl_43 {
447
469
  font-size: 0.75rem;
448
470
  padding: 0.25rem 0.5rem;
449
471
  }
450
- ._disabled_rojre_34 {
472
+ ._disabled_1ymvl_48 {
451
473
  opacity: 0.5;
452
474
  cursor: not-allowed;
453
475
  }
454
476
  /* Variants */
455
- ._primary_rojre_41 {
477
+ ._primary_1ymvl_55 {
456
478
  --input-bg: var(--primary-color-100);
457
479
  --border-color: var(--primary-color-300);
458
480
  --border-accent-color: var(--primary-color-600);
459
481
  }
460
- ._primary_rojre_41:hover {
482
+ ._primary_1ymvl_55:hover {
461
483
  --input-bg: var(--primary-color-200);
462
484
  }
463
- ._success_rojre_50 {
485
+ ._success_1ymvl_64 {
464
486
  --input-bg: var(--success-color-100);
465
487
  --border-color: var(--success-color-300);
466
488
  --border-accent-color: var(--success-color-600);
467
489
  }
468
- ._success_rojre_50:hover {
490
+ ._success_1ymvl_64:hover {
469
491
  --input-bg: var(--success-color-200);
470
492
  }
471
- ._warning_rojre_58 {
493
+ ._warning_1ymvl_72 {
472
494
  --input-bg: var(--warning-color-100);
473
495
  --border-color: var(--warning-color-300);
474
496
  --border-accent-color: var(--warning-color-600);
475
497
  }
476
- ._warning_rojre_58:hover {
498
+ ._warning_1ymvl_72:hover {
477
499
  --input-bg: var(--warning-color-200);
478
500
  }
479
- ._danger_rojre_66 {
501
+ ._danger_1ymvl_80 {
480
502
  --input-bg: var(--danger-color-100);
481
503
  --border-color: var(--danger-color-300);
482
504
  --border-accent-color: var(--danger-color-600);
483
505
  }
484
- ._danger_rojre_66:hover {
506
+ ._danger_1ymvl_80:hover {
485
507
  --input-bg: var(--danger-color-200);
486
508
  }
487
- ._info_rojre_74 {
509
+ ._info_1ymvl_88 {
488
510
  --input-bg: var(--info-color-100);
489
511
  --border-color: var(--info-color-300);
490
512
  --border-accent-color: var(--info-color-600);
491
513
  }
492
- ._info_rojre_74:hover {
514
+ ._info_1ymvl_88:hover {
493
515
  --input-bg: var(--info-color-200);
494
516
  }
495
- ._secondary_rojre_83 {
517
+ ._secondary_1ymvl_97 {
496
518
  --input-bg: var(--secondary-color-100);
497
519
  --border-color: var(--secondary-color-300);
498
520
  --border-accent-color: var(--secondary-color-600);
499
521
  }
500
- ._secondary_rojre_83:hover {
522
+ ._secondary_1ymvl_97:hover {
501
523
  --input-bg: var(--secondary-color-200);
502
524
  }
503
- ._field_rojre_92 {
525
+ ._field_1ymvl_106 {
504
526
  display: flex;
505
527
  flex-direction: column;
506
528
  gap: 0.5rem;
507
529
  }
508
- ._label_rojre_98 {
530
+ ._label_1ymvl_112 {
509
531
  }
510
532
  @property --radio-hover-bg {
511
533
  syntax: "<color>";
@@ -980,8 +1002,46 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
980
1002
  transform: translateX(0);
981
1003
  }
982
1004
  }
983
- ._hatch_zh2j3_1 {
1005
+ ._hatch_lff0l_1 {
984
1006
  padding: 0.5rem 1rem;
1007
+ color: var(--hatch-color, inherit);
1008
+ --button-bg: var(--bg, transparent);
1009
+ }
1010
+ ._primary_lff0l_7 {
1011
+ --bg: var(--primary-color-100);
1012
+ --border-color: var(--primary-color-300);
1013
+ --border-accent-color: var(--primary-color-600);
1014
+ --hatch-color: var(--primary-color-800);
1015
+ }
1016
+ ._success_lff0l_14 {
1017
+ --bg: var(--success-color-100);
1018
+ --border-color: var(--success-color-300);
1019
+ --border-accent-color: var(--success-color-600);
1020
+ --hatch-color: var(--success-color-800);
1021
+ }
1022
+ ._warning_lff0l_21 {
1023
+ --bg: var(--warning-color-100);
1024
+ --border-color: var(--warning-color-300);
1025
+ --border-accent-color: var(--warning-color-600);
1026
+ --hatch-color: var(--warning-color-800);
1027
+ }
1028
+ ._danger_lff0l_28 {
1029
+ --bg: var(--danger-color-100);
1030
+ --border-color: var(--danger-color-300);
1031
+ --border-accent-color: var(--danger-color-600);
1032
+ --hatch-color: var(--danger-color-800);
1033
+ }
1034
+ ._info_lff0l_35 {
1035
+ --bg: var(--info-color-100);
1036
+ --border-color: var(--info-color-300);
1037
+ --border-accent-color: var(--info-color-600);
1038
+ --hatch-color: var(--info-color-800);
1039
+ }
1040
+ ._secondary_lff0l_42 {
1041
+ --bg: var(--secondary-color-100);
1042
+ --border-color: var(--secondary-color-300);
1043
+ --border-accent-color: var(--secondary-color-600);
1044
+ --hatch-color: var(--secondary-color-800);
985
1045
  }
986
1046
  ._toastRoot_1iau9_1 {
987
1047
  background-color: var(--button-bg) !important;
@@ -1864,27 +1924,29 @@ function clsx() {
1864
1924
  for (var e3, t4, f2 = 0, n2 = "", o2 = arguments.length; f2 < o2; f2++) (e3 = arguments[f2]) && (t4 = r(e3)) && (n2 && (n2 += " "), n2 += t4);
1865
1925
  return n2;
1866
1926
  }
1867
- const button = "_button_d2nsp_7";
1868
- const large$6 = "_large_d2nsp_24";
1869
- const small$6 = "_small_d2nsp_29";
1870
- const disabled$6 = "_disabled_d2nsp_34";
1871
- const primary$7 = "_primary_d2nsp_41";
1872
- const success$7 = "_success_d2nsp_54";
1873
- const warning$7 = "_warning_d2nsp_67";
1874
- const danger$7 = "_danger_d2nsp_80";
1875
- const info$7 = "_info_d2nsp_93";
1876
- const secondary$7 = "_secondary_d2nsp_106";
1927
+ const button = "_button_105y0_7";
1928
+ const pageBackground$1 = "_pageBackground_105y0_24";
1929
+ const large$6 = "_large_105y0_34";
1930
+ const small$6 = "_small_105y0_39";
1931
+ const disabled$6 = "_disabled_105y0_44";
1932
+ const primary$8 = "_primary_105y0_51";
1933
+ const success$8 = "_success_105y0_64";
1934
+ const warning$8 = "_warning_105y0_77";
1935
+ const danger$8 = "_danger_105y0_90";
1936
+ const info$8 = "_info_105y0_103";
1937
+ const secondary$8 = "_secondary_105y0_116";
1877
1938
  const styles$b = {
1878
1939
  button,
1940
+ pageBackground: pageBackground$1,
1879
1941
  large: large$6,
1880
1942
  small: small$6,
1881
1943
  disabled: disabled$6,
1882
- primary: primary$7,
1883
- success: success$7,
1884
- warning: warning$7,
1885
- danger: danger$7,
1886
- info: info$7,
1887
- secondary: secondary$7
1944
+ primary: primary$8,
1945
+ success: success$8,
1946
+ warning: warning$8,
1947
+ danger: danger$8,
1948
+ info: info$8,
1949
+ secondary: secondary$8
1888
1950
  };
1889
1951
  const chamfer$1 = "_chamfer_1o5rm_1";
1890
1952
  const disabled$5 = "_disabled_1o5rm_15";
@@ -1924,6 +1986,7 @@ function Button({
1924
1986
  {
1925
1987
  className: clsx(
1926
1988
  styles$b.button,
1989
+ !variant && styles$b.pageBackground,
1927
1990
  styles$b[variant],
1928
1991
  chamfer2 && chamferStyles.chamfer,
1929
1992
  size2 === "large" && styles$b.large,
@@ -2044,12 +2107,12 @@ const body$1 = "_body_1u4j4_18";
2044
2107
  const footer$1 = "_footer_1u4j4_23";
2045
2108
  const large$5 = "_large_1u4j4_30";
2046
2109
  const small$5 = "_small_1u4j4_36";
2047
- const primary$6 = "_primary_1u4j4_44";
2048
- const success$6 = "_success_1u4j4_51";
2049
- const warning$6 = "_warning_1u4j4_58";
2050
- const danger$6 = "_danger_1u4j4_65";
2051
- const info$6 = "_info_1u4j4_72";
2052
- const secondary$6 = "_secondary_1u4j4_79";
2110
+ const primary$7 = "_primary_1u4j4_44";
2111
+ const success$7 = "_success_1u4j4_51";
2112
+ const warning$7 = "_warning_1u4j4_58";
2113
+ const danger$7 = "_danger_1u4j4_65";
2114
+ const info$7 = "_info_1u4j4_72";
2115
+ const secondary$7 = "_secondary_1u4j4_79";
2053
2116
  const styles$9 = {
2054
2117
  card,
2055
2118
  title: title$1,
@@ -2057,12 +2120,12 @@ const styles$9 = {
2057
2120
  footer: footer$1,
2058
2121
  large: large$5,
2059
2122
  small: small$5,
2060
- primary: primary$6,
2061
- success: success$6,
2062
- warning: warning$6,
2063
- danger: danger$6,
2064
- info: info$6,
2065
- secondary: secondary$6
2123
+ primary: primary$7,
2124
+ success: success$7,
2125
+ warning: warning$7,
2126
+ danger: danger$7,
2127
+ info: info$7,
2128
+ secondary: secondary$7
2066
2129
  };
2067
2130
  function Card({
2068
2131
  children: children2,
@@ -2830,12 +2893,12 @@ const large$4 = "_large_178xv_94";
2830
2893
  const small$4 = "_small_178xv_99";
2831
2894
  const disabledBox = "_disabledBox_178xv_104";
2832
2895
  const label$2 = "_label_178xv_109";
2833
- const primary$5 = "_primary_178xv_117";
2834
- const secondary$5 = "_secondary_178xv_126";
2835
- const success$5 = "_success_178xv_135";
2836
- const warning$5 = "_warning_178xv_144";
2837
- const danger$5 = "_danger_178xv_153";
2838
- const info$5 = "_info_178xv_162";
2896
+ const primary$6 = "_primary_178xv_117";
2897
+ const secondary$6 = "_secondary_178xv_126";
2898
+ const success$6 = "_success_178xv_135";
2899
+ const warning$6 = "_warning_178xv_144";
2900
+ const danger$6 = "_danger_178xv_153";
2901
+ const info$6 = "_info_178xv_162";
2839
2902
  const styles$8 = {
2840
2903
  wrapper: wrapper$1,
2841
2904
  disabled: disabled$4,
@@ -2845,12 +2908,12 @@ const styles$8 = {
2845
2908
  small: small$4,
2846
2909
  disabledBox,
2847
2910
  label: label$2,
2848
- primary: primary$5,
2849
- secondary: secondary$5,
2850
- success: success$5,
2851
- warning: warning$5,
2852
- danger: danger$5,
2853
- info: info$5
2911
+ primary: primary$6,
2912
+ secondary: secondary$6,
2913
+ success: success$6,
2914
+ warning: warning$6,
2915
+ danger: danger$6,
2916
+ info: info$6
2854
2917
  };
2855
2918
  const CheckIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", role: "presentation", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2856
2919
  "polyline",
@@ -19140,29 +19203,31 @@ const RadarChart = ({
19140
19203
  });
19141
19204
  return /* @__PURE__ */ jsxRuntimeExports.jsx(ObservablePlot, { options, className, style });
19142
19205
  };
19143
- const input = "_input_rojre_7";
19144
- const large$3 = "_large_rojre_24";
19145
- const small$3 = "_small_rojre_29";
19146
- const disabled$3 = "_disabled_rojre_34";
19147
- const primary$4 = "_primary_rojre_41";
19148
- const success$4 = "_success_rojre_50";
19149
- const warning$4 = "_warning_rojre_58";
19150
- const danger$4 = "_danger_rojre_66";
19151
- const info$4 = "_info_rojre_74";
19152
- const secondary$4 = "_secondary_rojre_83";
19153
- const field = "_field_rojre_92";
19154
- const label$1 = "_label_rojre_98";
19206
+ const input = "_input_1ymvl_7";
19207
+ const pageBackground = "_pageBackground_1ymvl_24";
19208
+ const large$3 = "_large_1ymvl_38";
19209
+ const small$3 = "_small_1ymvl_43";
19210
+ const disabled$3 = "_disabled_1ymvl_48";
19211
+ const primary$5 = "_primary_1ymvl_55";
19212
+ const success$5 = "_success_1ymvl_64";
19213
+ const warning$5 = "_warning_1ymvl_72";
19214
+ const danger$5 = "_danger_1ymvl_80";
19215
+ const info$5 = "_info_1ymvl_88";
19216
+ const secondary$5 = "_secondary_1ymvl_97";
19217
+ const field = "_field_1ymvl_106";
19218
+ const label$1 = "_label_1ymvl_112";
19155
19219
  const styles$6 = {
19156
19220
  input,
19221
+ pageBackground,
19157
19222
  large: large$3,
19158
19223
  small: small$3,
19159
19224
  disabled: disabled$3,
19160
- primary: primary$4,
19161
- success: success$4,
19162
- warning: warning$4,
19163
- danger: danger$4,
19164
- info: info$4,
19165
- secondary: secondary$4,
19225
+ primary: primary$5,
19226
+ success: success$5,
19227
+ warning: warning$5,
19228
+ danger: danger$5,
19229
+ info: info$5,
19230
+ secondary: secondary$5,
19166
19231
  field,
19167
19232
  label: label$1
19168
19233
  };
@@ -19182,6 +19247,7 @@ function Input({
19182
19247
  {
19183
19248
  className: classNames(
19184
19249
  chamfer2 && chamferStyles.chamfer,
19250
+ !variant && styles$6.pageBackground,
19185
19251
  styles$6[variant]
19186
19252
  ),
19187
19253
  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -19190,6 +19256,7 @@ function Input({
19190
19256
  id: inputId,
19191
19257
  className: classNames(
19192
19258
  styles$6.input,
19259
+ !variant && styles$6.pageBackground,
19193
19260
  styles$6[variant],
19194
19261
  size2 === "large" && styles$6.large,
19195
19262
  size2 === "small" && styles$6.small,
@@ -19779,12 +19846,12 @@ const small$2 = "_small_hpxu6_93";
19779
19846
  const disabledDot = "_disabledDot_hpxu6_98";
19780
19847
  const label = "_label_hpxu6_102";
19781
19848
  const chamfer = "_chamfer_hpxu6_107";
19782
- const primary$3 = "_primary_hpxu6_112";
19783
- const secondary$3 = "_secondary_hpxu6_121";
19784
- const success$3 = "_success_hpxu6_130";
19785
- const warning$3 = "_warning_hpxu6_139";
19786
- const danger$3 = "_danger_hpxu6_148";
19787
- const info$3 = "_info_hpxu6_157";
19849
+ const primary$4 = "_primary_hpxu6_112";
19850
+ const secondary$4 = "_secondary_hpxu6_121";
19851
+ const success$4 = "_success_hpxu6_130";
19852
+ const warning$4 = "_warning_hpxu6_139";
19853
+ const danger$4 = "_danger_hpxu6_148";
19854
+ const info$4 = "_info_hpxu6_157";
19788
19855
  const styles$5 = {
19789
19856
  group,
19790
19857
  wrapper,
@@ -19797,12 +19864,12 @@ const styles$5 = {
19797
19864
  disabledDot,
19798
19865
  label,
19799
19866
  chamfer,
19800
- primary: primary$3,
19801
- secondary: secondary$3,
19802
- success: success$3,
19803
- warning: warning$3,
19804
- danger: danger$3,
19805
- info: info$3
19867
+ primary: primary$4,
19868
+ secondary: secondary$4,
19869
+ success: success$4,
19870
+ warning: warning$4,
19871
+ danger: danger$4,
19872
+ info: info$4
19806
19873
  };
19807
19874
  const RadioGroup$1 = ({ className, children: children2, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
19808
19875
  Root2$3,
@@ -24402,12 +24469,12 @@ const disabled$1 = "_disabled_1u214_41";
24402
24469
  const icon$1 = "_icon_1u214_46";
24403
24470
  const content$3 = "_content_1u214_52";
24404
24471
  const item$1 = "_item_1u214_57";
24405
- const primary$2 = "_primary_1u214_79";
24406
- const success$2 = "_success_1u214_89";
24407
- const warning$2 = "_warning_1u214_99";
24408
- const danger$2 = "_danger_1u214_109";
24409
- const info$2 = "_info_1u214_119";
24410
- const secondary$2 = "_secondary_1u214_129";
24472
+ const primary$3 = "_primary_1u214_79";
24473
+ const success$3 = "_success_1u214_89";
24474
+ const warning$3 = "_warning_1u214_99";
24475
+ const danger$3 = "_danger_1u214_109";
24476
+ const info$3 = "_info_1u214_119";
24477
+ const secondary$3 = "_secondary_1u214_129";
24411
24478
  const styles$4 = {
24412
24479
  trigger: trigger$1,
24413
24480
  large: large$1,
@@ -24416,12 +24483,12 @@ const styles$4 = {
24416
24483
  icon: icon$1,
24417
24484
  content: content$3,
24418
24485
  item: item$1,
24419
- primary: primary$2,
24420
- success: success$2,
24421
- warning: warning$2,
24422
- danger: danger$2,
24423
- info: info$2,
24424
- secondary: secondary$2
24486
+ primary: primary$3,
24487
+ success: success$3,
24488
+ warning: warning$3,
24489
+ danger: danger$3,
24490
+ info: info$3,
24491
+ secondary: secondary$3
24425
24492
  };
24426
24493
  function SelectInput({
24427
24494
  options,
@@ -25510,12 +25577,12 @@ const itemLabel = "_itemLabel_12pwu_120";
25510
25577
  const itemIcon = "_itemIcon_12pwu_124";
25511
25578
  const separator = "_separator_12pwu_136";
25512
25579
  const arrow = "_arrow_12pwu_141";
25513
- const primary$1 = "_primary_12pwu_148";
25514
- const success$1 = "_success_12pwu_159";
25515
- const warning$1 = "_warning_12pwu_170";
25516
- const danger$1 = "_danger_12pwu_181";
25517
- const info$1 = "_info_12pwu_192";
25518
- const secondary$1 = "_secondary_12pwu_203";
25580
+ const primary$2 = "_primary_12pwu_148";
25581
+ const success$2 = "_success_12pwu_159";
25582
+ const warning$2 = "_warning_12pwu_170";
25583
+ const danger$2 = "_danger_12pwu_181";
25584
+ const info$2 = "_info_12pwu_192";
25585
+ const secondary$2 = "_secondary_12pwu_203";
25519
25586
  const styles$3 = {
25520
25587
  trigger,
25521
25588
  large,
@@ -25533,12 +25600,12 @@ const styles$3 = {
25533
25600
  itemIcon,
25534
25601
  separator,
25535
25602
  arrow,
25536
- primary: primary$1,
25537
- success: success$1,
25538
- warning: warning$1,
25539
- danger: danger$1,
25540
- info: info$1,
25541
- secondary: secondary$1
25603
+ primary: primary$2,
25604
+ success: success$2,
25605
+ warning: warning$2,
25606
+ danger: danger$2,
25607
+ info: info$2,
25608
+ secondary: secondary$2
25542
25609
  };
25543
25610
  function Dropdown({
25544
25611
  items = [],
@@ -25629,16 +25696,29 @@ function Dropdown({
25629
25696
  ) })
25630
25697
  ] });
25631
25698
  }
25632
- const hatch = "_hatch_zh2j3_1";
25699
+ const hatch = "_hatch_lff0l_1";
25700
+ const primary$1 = "_primary_lff0l_7";
25701
+ const success$1 = "_success_lff0l_14";
25702
+ const warning$1 = "_warning_lff0l_21";
25703
+ const danger$1 = "_danger_lff0l_28";
25704
+ const info$1 = "_info_lff0l_35";
25705
+ const secondary$1 = "_secondary_lff0l_42";
25633
25706
  const styles$2 = {
25634
- hatch
25707
+ hatch,
25708
+ primary: primary$1,
25709
+ success: success$1,
25710
+ warning: warning$1,
25711
+ danger: danger$1,
25712
+ info: info$1,
25713
+ secondary: secondary$1
25635
25714
  };
25636
- function Hatch({ children: children2, className, ...props }) {
25715
+ function Hatch({ children: children2, className, variant, ...props }) {
25637
25716
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
25638
25717
  "div",
25639
25718
  {
25640
25719
  className: classNames(
25641
25720
  styles$2.hatch,
25721
+ styles$2[variant],
25642
25722
  hatchStyles.hatch,
25643
25723
  chamferStyles.chamfer,
25644
25724
  className
package/dist/jcui.es.js CHANGED
@@ -3,7 +3,7 @@
3
3
  inherits: true;
4
4
  initial-value: transparent;
5
5
  }
6
- ._button_d2nsp_7 {
6
+ ._button_105y0_7 {
7
7
  border-width: var(--border-thickness);
8
8
  border-style: solid;
9
9
  font-size: 1rem;
@@ -13,95 +13,104 @@
13
13
  border-color: var(--border-color);
14
14
  cursor: pointer;
15
15
  }
16
- ._button_d2nsp_7:hover {
16
+ ._button_105y0_7:hover {
17
17
  --button-bg: var(--secondary-color-100);
18
18
  }
19
- ._button_d2nsp_7:active {
19
+ ._button_105y0_7:active {
20
20
  --button-bg: var(--secondary-color-200);
21
21
  }
22
- ._large_d2nsp_24 {
22
+ ._pageBackground_105y0_24 {
23
+ --button-bg: var(--body-bg);
24
+ }
25
+ ._pageBackground_105y0_24:hover {
26
+ --button-bg: var(--body-bg);
27
+ }
28
+ ._pageBackground_105y0_24:active {
29
+ --button-bg: var(--body-bg);
30
+ }
31
+ ._large_105y0_34 {
23
32
  font-size: 1.25rem;
24
33
  padding: 0.75rem 1.25rem;
25
34
  }
26
- ._small_d2nsp_29 {
35
+ ._small_105y0_39 {
27
36
  font-size: 0.75rem;
28
37
  padding: 0.25rem 0.5rem;
29
38
  }
30
- ._disabled_d2nsp_34 {
39
+ ._disabled_105y0_44 {
31
40
  opacity: 0.5 !important;
32
41
  cursor: not-allowed;
33
42
  }
34
43
  /* Variants */
35
- ._primary_d2nsp_41 {
44
+ ._primary_105y0_51 {
36
45
  --button-bg: var(--primary-color-100);
37
46
  --border-color: var(--primary-color-300);
38
47
  --border-accent-color: var(--primary-color-600);
39
48
  --button-color: var(--primary-color-800);
40
49
  }
41
- ._primary_d2nsp_41:hover {
50
+ ._primary_105y0_51:hover {
42
51
  --button-bg: var(--primary-color-200);
43
52
  }
44
- ._primary_d2nsp_41:active {
53
+ ._primary_105y0_51:active {
45
54
  --button-bg: var(--primary-color-300);
46
55
  }
47
- ._success_d2nsp_54 {
56
+ ._success_105y0_64 {
48
57
  --button-bg: var(--success-color-100);
49
58
  --border-color: var(--success-color-300);
50
59
  --border-accent-color: var(--success-color-600);
51
60
  --button-color: var(--success-color-800);
52
61
  }
53
- ._success_d2nsp_54:hover {
62
+ ._success_105y0_64:hover {
54
63
  --button-bg: var(--success-color-200);
55
64
  }
56
- ._success_d2nsp_54:active {
65
+ ._success_105y0_64:active {
57
66
  --button-bg: var(--success-color-300);
58
67
  }
59
- ._warning_d2nsp_67 {
68
+ ._warning_105y0_77 {
60
69
  --button-bg: var(--warning-color-100);
61
70
  --border-color: var(--warning-color-300);
62
71
  --border-accent-color: var(--warning-color-600);
63
72
  --button-color: var(--warning-color-800);
64
73
  }
65
- ._warning_d2nsp_67:hover {
74
+ ._warning_105y0_77:hover {
66
75
  --button-bg: var(--warning-color-200);
67
76
  }
68
- ._warning_d2nsp_67:active {
77
+ ._warning_105y0_77:active {
69
78
  --button-bg: var(--warning-color-300);
70
79
  }
71
- ._danger_d2nsp_80 {
80
+ ._danger_105y0_90 {
72
81
  --button-bg: var(--danger-color-100);
73
82
  --border-color: var(--danger-color-300);
74
83
  --border-accent-color: var(--danger-color-600);
75
84
  --button-color: var(--danger-color-800);
76
85
  }
77
- ._danger_d2nsp_80:hover {
86
+ ._danger_105y0_90:hover {
78
87
  --button-bg: var(--danger-color-200);
79
88
  }
80
- ._danger_d2nsp_80:active {
89
+ ._danger_105y0_90:active {
81
90
  --button-bg: var(--danger-color-300);
82
91
  }
83
- ._info_d2nsp_93 {
92
+ ._info_105y0_103 {
84
93
  --button-bg: var(--info-color-100);
85
94
  --border-color: var(--info-color-300);
86
95
  --border-accent-color: var(--info-color-600);
87
96
  --button-color: var(--info-color-800);
88
97
  }
89
- ._info_d2nsp_93:hover {
98
+ ._info_105y0_103:hover {
90
99
  --button-bg: var(--info-color-200);
91
100
  }
92
- ._info_d2nsp_93:active {
101
+ ._info_105y0_103:active {
93
102
  --button-bg: var(--info-color-300);
94
103
  }
95
- ._secondary_d2nsp_106 {
104
+ ._secondary_105y0_116 {
96
105
  --button-bg: var(--secondary-color-100);
97
106
  --border-color: var(--secondary-color-300);
98
107
  --border-accent-color: var(--secondary-color-600);
99
108
  --button-color: var(--secondary-color-800);
100
109
  }
101
- ._secondary_d2nsp_106:hover {
110
+ ._secondary_105y0_116:hover {
102
111
  --button-bg: var(--secondary-color-200);
103
112
  }
104
- ._secondary_d2nsp_106:active {
113
+ ._secondary_105y0_116:active {
105
114
  --button-bg: var(--secondary-color-300);
106
115
  }
107
116
  ._chamfer_1o5rm_1 {
@@ -423,7 +432,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
423
432
  inherits: true;
424
433
  initial-value: transparent;
425
434
  }
426
- ._input_rojre_7 {
435
+ ._input_1ymvl_7 {
427
436
  border-width: var(--border-thickness);
428
437
  border-style: solid;
429
438
  font-size: 1rem;
@@ -433,79 +442,92 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
433
442
  border-color: var(--border-color);
434
443
  width: calc(100% + var(--border-thickness));
435
444
  }
436
- ._input_rojre_7:hover {
445
+ ._input_1ymvl_7:hover {
437
446
  --input-bg: var(--secondary-color-100);
438
447
  }
439
- ._input_rojre_7:focus {
448
+ ._input_1ymvl_7:focus {
440
449
  outline: none;
441
450
  }
442
- ._large_rojre_24 {
451
+ ._pageBackground_1ymvl_24 {
452
+ --input-bg: var(--body-bg);
453
+ --button-bg: var(--body-bg);
454
+ }
455
+ ._pageBackground_1ymvl_24:hover {
456
+ --input-bg: var(--body-bg);
457
+ --button-bg: var(--body-bg);
458
+ }
459
+ ._pageBackground_1ymvl_24:focus,
460
+ ._pageBackground_1ymvl_24:focus-within {
461
+ --input-bg: var(--body-bg);
462
+ --button-bg: var(--body-bg);
463
+ }
464
+ ._large_1ymvl_38 {
443
465
  font-size: 1.25rem;
444
466
  padding: 0.75rem 1.25rem;
445
467
  }
446
- ._small_rojre_29 {
468
+ ._small_1ymvl_43 {
447
469
  font-size: 0.75rem;
448
470
  padding: 0.25rem 0.5rem;
449
471
  }
450
- ._disabled_rojre_34 {
472
+ ._disabled_1ymvl_48 {
451
473
  opacity: 0.5;
452
474
  cursor: not-allowed;
453
475
  }
454
476
  /* Variants */
455
- ._primary_rojre_41 {
477
+ ._primary_1ymvl_55 {
456
478
  --input-bg: var(--primary-color-100);
457
479
  --border-color: var(--primary-color-300);
458
480
  --border-accent-color: var(--primary-color-600);
459
481
  }
460
- ._primary_rojre_41:hover {
482
+ ._primary_1ymvl_55:hover {
461
483
  --input-bg: var(--primary-color-200);
462
484
  }
463
- ._success_rojre_50 {
485
+ ._success_1ymvl_64 {
464
486
  --input-bg: var(--success-color-100);
465
487
  --border-color: var(--success-color-300);
466
488
  --border-accent-color: var(--success-color-600);
467
489
  }
468
- ._success_rojre_50:hover {
490
+ ._success_1ymvl_64:hover {
469
491
  --input-bg: var(--success-color-200);
470
492
  }
471
- ._warning_rojre_58 {
493
+ ._warning_1ymvl_72 {
472
494
  --input-bg: var(--warning-color-100);
473
495
  --border-color: var(--warning-color-300);
474
496
  --border-accent-color: var(--warning-color-600);
475
497
  }
476
- ._warning_rojre_58:hover {
498
+ ._warning_1ymvl_72:hover {
477
499
  --input-bg: var(--warning-color-200);
478
500
  }
479
- ._danger_rojre_66 {
501
+ ._danger_1ymvl_80 {
480
502
  --input-bg: var(--danger-color-100);
481
503
  --border-color: var(--danger-color-300);
482
504
  --border-accent-color: var(--danger-color-600);
483
505
  }
484
- ._danger_rojre_66:hover {
506
+ ._danger_1ymvl_80:hover {
485
507
  --input-bg: var(--danger-color-200);
486
508
  }
487
- ._info_rojre_74 {
509
+ ._info_1ymvl_88 {
488
510
  --input-bg: var(--info-color-100);
489
511
  --border-color: var(--info-color-300);
490
512
  --border-accent-color: var(--info-color-600);
491
513
  }
492
- ._info_rojre_74:hover {
514
+ ._info_1ymvl_88:hover {
493
515
  --input-bg: var(--info-color-200);
494
516
  }
495
- ._secondary_rojre_83 {
517
+ ._secondary_1ymvl_97 {
496
518
  --input-bg: var(--secondary-color-100);
497
519
  --border-color: var(--secondary-color-300);
498
520
  --border-accent-color: var(--secondary-color-600);
499
521
  }
500
- ._secondary_rojre_83:hover {
522
+ ._secondary_1ymvl_97:hover {
501
523
  --input-bg: var(--secondary-color-200);
502
524
  }
503
- ._field_rojre_92 {
525
+ ._field_1ymvl_106 {
504
526
  display: flex;
505
527
  flex-direction: column;
506
528
  gap: 0.5rem;
507
529
  }
508
- ._label_rojre_98 {
530
+ ._label_1ymvl_112 {
509
531
  }
510
532
  @property --radio-hover-bg {
511
533
  syntax: "<color>";
@@ -980,8 +1002,46 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
980
1002
  transform: translateX(0);
981
1003
  }
982
1004
  }
983
- ._hatch_zh2j3_1 {
1005
+ ._hatch_lff0l_1 {
984
1006
  padding: 0.5rem 1rem;
1007
+ color: var(--hatch-color, inherit);
1008
+ --button-bg: var(--bg, transparent);
1009
+ }
1010
+ ._primary_lff0l_7 {
1011
+ --bg: var(--primary-color-100);
1012
+ --border-color: var(--primary-color-300);
1013
+ --border-accent-color: var(--primary-color-600);
1014
+ --hatch-color: var(--primary-color-800);
1015
+ }
1016
+ ._success_lff0l_14 {
1017
+ --bg: var(--success-color-100);
1018
+ --border-color: var(--success-color-300);
1019
+ --border-accent-color: var(--success-color-600);
1020
+ --hatch-color: var(--success-color-800);
1021
+ }
1022
+ ._warning_lff0l_21 {
1023
+ --bg: var(--warning-color-100);
1024
+ --border-color: var(--warning-color-300);
1025
+ --border-accent-color: var(--warning-color-600);
1026
+ --hatch-color: var(--warning-color-800);
1027
+ }
1028
+ ._danger_lff0l_28 {
1029
+ --bg: var(--danger-color-100);
1030
+ --border-color: var(--danger-color-300);
1031
+ --border-accent-color: var(--danger-color-600);
1032
+ --hatch-color: var(--danger-color-800);
1033
+ }
1034
+ ._info_lff0l_35 {
1035
+ --bg: var(--info-color-100);
1036
+ --border-color: var(--info-color-300);
1037
+ --border-accent-color: var(--info-color-600);
1038
+ --hatch-color: var(--info-color-800);
1039
+ }
1040
+ ._secondary_lff0l_42 {
1041
+ --bg: var(--secondary-color-100);
1042
+ --border-color: var(--secondary-color-300);
1043
+ --border-accent-color: var(--secondary-color-600);
1044
+ --hatch-color: var(--secondary-color-800);
985
1045
  }
986
1046
  ._toastRoot_1iau9_1 {
987
1047
  background-color: var(--button-bg) !important;
@@ -1846,27 +1906,29 @@ function clsx() {
1846
1906
  for (var e3, t4, f2 = 0, n2 = "", o2 = arguments.length; f2 < o2; f2++) (e3 = arguments[f2]) && (t4 = r(e3)) && (n2 && (n2 += " "), n2 += t4);
1847
1907
  return n2;
1848
1908
  }
1849
- const button = "_button_d2nsp_7";
1850
- const large$6 = "_large_d2nsp_24";
1851
- const small$6 = "_small_d2nsp_29";
1852
- const disabled$6 = "_disabled_d2nsp_34";
1853
- const primary$7 = "_primary_d2nsp_41";
1854
- const success$7 = "_success_d2nsp_54";
1855
- const warning$7 = "_warning_d2nsp_67";
1856
- const danger$7 = "_danger_d2nsp_80";
1857
- const info$7 = "_info_d2nsp_93";
1858
- const secondary$7 = "_secondary_d2nsp_106";
1909
+ const button = "_button_105y0_7";
1910
+ const pageBackground$1 = "_pageBackground_105y0_24";
1911
+ const large$6 = "_large_105y0_34";
1912
+ const small$6 = "_small_105y0_39";
1913
+ const disabled$6 = "_disabled_105y0_44";
1914
+ const primary$8 = "_primary_105y0_51";
1915
+ const success$8 = "_success_105y0_64";
1916
+ const warning$8 = "_warning_105y0_77";
1917
+ const danger$8 = "_danger_105y0_90";
1918
+ const info$8 = "_info_105y0_103";
1919
+ const secondary$8 = "_secondary_105y0_116";
1859
1920
  const styles$b = {
1860
1921
  button,
1922
+ pageBackground: pageBackground$1,
1861
1923
  large: large$6,
1862
1924
  small: small$6,
1863
1925
  disabled: disabled$6,
1864
- primary: primary$7,
1865
- success: success$7,
1866
- warning: warning$7,
1867
- danger: danger$7,
1868
- info: info$7,
1869
- secondary: secondary$7
1926
+ primary: primary$8,
1927
+ success: success$8,
1928
+ warning: warning$8,
1929
+ danger: danger$8,
1930
+ info: info$8,
1931
+ secondary: secondary$8
1870
1932
  };
1871
1933
  const chamfer$1 = "_chamfer_1o5rm_1";
1872
1934
  const disabled$5 = "_disabled_1o5rm_15";
@@ -1906,6 +1968,7 @@ function Button({
1906
1968
  {
1907
1969
  className: clsx(
1908
1970
  styles$b.button,
1971
+ !variant && styles$b.pageBackground,
1909
1972
  styles$b[variant],
1910
1973
  chamfer2 && chamferStyles.chamfer,
1911
1974
  size2 === "large" && styles$b.large,
@@ -2026,12 +2089,12 @@ const body$1 = "_body_1u4j4_18";
2026
2089
  const footer$1 = "_footer_1u4j4_23";
2027
2090
  const large$5 = "_large_1u4j4_30";
2028
2091
  const small$5 = "_small_1u4j4_36";
2029
- const primary$6 = "_primary_1u4j4_44";
2030
- const success$6 = "_success_1u4j4_51";
2031
- const warning$6 = "_warning_1u4j4_58";
2032
- const danger$6 = "_danger_1u4j4_65";
2033
- const info$6 = "_info_1u4j4_72";
2034
- const secondary$6 = "_secondary_1u4j4_79";
2092
+ const primary$7 = "_primary_1u4j4_44";
2093
+ const success$7 = "_success_1u4j4_51";
2094
+ const warning$7 = "_warning_1u4j4_58";
2095
+ const danger$7 = "_danger_1u4j4_65";
2096
+ const info$7 = "_info_1u4j4_72";
2097
+ const secondary$7 = "_secondary_1u4j4_79";
2035
2098
  const styles$9 = {
2036
2099
  card,
2037
2100
  title: title$1,
@@ -2039,12 +2102,12 @@ const styles$9 = {
2039
2102
  footer: footer$1,
2040
2103
  large: large$5,
2041
2104
  small: small$5,
2042
- primary: primary$6,
2043
- success: success$6,
2044
- warning: warning$6,
2045
- danger: danger$6,
2046
- info: info$6,
2047
- secondary: secondary$6
2105
+ primary: primary$7,
2106
+ success: success$7,
2107
+ warning: warning$7,
2108
+ danger: danger$7,
2109
+ info: info$7,
2110
+ secondary: secondary$7
2048
2111
  };
2049
2112
  function Card({
2050
2113
  children: children2,
@@ -2812,12 +2875,12 @@ const large$4 = "_large_178xv_94";
2812
2875
  const small$4 = "_small_178xv_99";
2813
2876
  const disabledBox = "_disabledBox_178xv_104";
2814
2877
  const label$2 = "_label_178xv_109";
2815
- const primary$5 = "_primary_178xv_117";
2816
- const secondary$5 = "_secondary_178xv_126";
2817
- const success$5 = "_success_178xv_135";
2818
- const warning$5 = "_warning_178xv_144";
2819
- const danger$5 = "_danger_178xv_153";
2820
- const info$5 = "_info_178xv_162";
2878
+ const primary$6 = "_primary_178xv_117";
2879
+ const secondary$6 = "_secondary_178xv_126";
2880
+ const success$6 = "_success_178xv_135";
2881
+ const warning$6 = "_warning_178xv_144";
2882
+ const danger$6 = "_danger_178xv_153";
2883
+ const info$6 = "_info_178xv_162";
2821
2884
  const styles$8 = {
2822
2885
  wrapper: wrapper$1,
2823
2886
  disabled: disabled$4,
@@ -2827,12 +2890,12 @@ const styles$8 = {
2827
2890
  small: small$4,
2828
2891
  disabledBox,
2829
2892
  label: label$2,
2830
- primary: primary$5,
2831
- secondary: secondary$5,
2832
- success: success$5,
2833
- warning: warning$5,
2834
- danger: danger$5,
2835
- info: info$5
2893
+ primary: primary$6,
2894
+ secondary: secondary$6,
2895
+ success: success$6,
2896
+ warning: warning$6,
2897
+ danger: danger$6,
2898
+ info: info$6
2836
2899
  };
2837
2900
  const CheckIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", role: "presentation", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2838
2901
  "polyline",
@@ -19122,29 +19185,31 @@ const RadarChart = ({
19122
19185
  });
19123
19186
  return /* @__PURE__ */ jsxRuntimeExports.jsx(ObservablePlot, { options, className, style });
19124
19187
  };
19125
- const input = "_input_rojre_7";
19126
- const large$3 = "_large_rojre_24";
19127
- const small$3 = "_small_rojre_29";
19128
- const disabled$3 = "_disabled_rojre_34";
19129
- const primary$4 = "_primary_rojre_41";
19130
- const success$4 = "_success_rojre_50";
19131
- const warning$4 = "_warning_rojre_58";
19132
- const danger$4 = "_danger_rojre_66";
19133
- const info$4 = "_info_rojre_74";
19134
- const secondary$4 = "_secondary_rojre_83";
19135
- const field = "_field_rojre_92";
19136
- const label$1 = "_label_rojre_98";
19188
+ const input = "_input_1ymvl_7";
19189
+ const pageBackground = "_pageBackground_1ymvl_24";
19190
+ const large$3 = "_large_1ymvl_38";
19191
+ const small$3 = "_small_1ymvl_43";
19192
+ const disabled$3 = "_disabled_1ymvl_48";
19193
+ const primary$5 = "_primary_1ymvl_55";
19194
+ const success$5 = "_success_1ymvl_64";
19195
+ const warning$5 = "_warning_1ymvl_72";
19196
+ const danger$5 = "_danger_1ymvl_80";
19197
+ const info$5 = "_info_1ymvl_88";
19198
+ const secondary$5 = "_secondary_1ymvl_97";
19199
+ const field = "_field_1ymvl_106";
19200
+ const label$1 = "_label_1ymvl_112";
19137
19201
  const styles$6 = {
19138
19202
  input,
19203
+ pageBackground,
19139
19204
  large: large$3,
19140
19205
  small: small$3,
19141
19206
  disabled: disabled$3,
19142
- primary: primary$4,
19143
- success: success$4,
19144
- warning: warning$4,
19145
- danger: danger$4,
19146
- info: info$4,
19147
- secondary: secondary$4,
19207
+ primary: primary$5,
19208
+ success: success$5,
19209
+ warning: warning$5,
19210
+ danger: danger$5,
19211
+ info: info$5,
19212
+ secondary: secondary$5,
19148
19213
  field,
19149
19214
  label: label$1
19150
19215
  };
@@ -19164,6 +19229,7 @@ function Input({
19164
19229
  {
19165
19230
  className: classNames(
19166
19231
  chamfer2 && chamferStyles.chamfer,
19232
+ !variant && styles$6.pageBackground,
19167
19233
  styles$6[variant]
19168
19234
  ),
19169
19235
  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -19172,6 +19238,7 @@ function Input({
19172
19238
  id: inputId,
19173
19239
  className: classNames(
19174
19240
  styles$6.input,
19241
+ !variant && styles$6.pageBackground,
19175
19242
  styles$6[variant],
19176
19243
  size2 === "large" && styles$6.large,
19177
19244
  size2 === "small" && styles$6.small,
@@ -19761,12 +19828,12 @@ const small$2 = "_small_hpxu6_93";
19761
19828
  const disabledDot = "_disabledDot_hpxu6_98";
19762
19829
  const label = "_label_hpxu6_102";
19763
19830
  const chamfer = "_chamfer_hpxu6_107";
19764
- const primary$3 = "_primary_hpxu6_112";
19765
- const secondary$3 = "_secondary_hpxu6_121";
19766
- const success$3 = "_success_hpxu6_130";
19767
- const warning$3 = "_warning_hpxu6_139";
19768
- const danger$3 = "_danger_hpxu6_148";
19769
- const info$3 = "_info_hpxu6_157";
19831
+ const primary$4 = "_primary_hpxu6_112";
19832
+ const secondary$4 = "_secondary_hpxu6_121";
19833
+ const success$4 = "_success_hpxu6_130";
19834
+ const warning$4 = "_warning_hpxu6_139";
19835
+ const danger$4 = "_danger_hpxu6_148";
19836
+ const info$4 = "_info_hpxu6_157";
19770
19837
  const styles$5 = {
19771
19838
  group,
19772
19839
  wrapper,
@@ -19779,12 +19846,12 @@ const styles$5 = {
19779
19846
  disabledDot,
19780
19847
  label,
19781
19848
  chamfer,
19782
- primary: primary$3,
19783
- secondary: secondary$3,
19784
- success: success$3,
19785
- warning: warning$3,
19786
- danger: danger$3,
19787
- info: info$3
19849
+ primary: primary$4,
19850
+ secondary: secondary$4,
19851
+ success: success$4,
19852
+ warning: warning$4,
19853
+ danger: danger$4,
19854
+ info: info$4
19788
19855
  };
19789
19856
  const RadioGroup$1 = ({ className, children: children2, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
19790
19857
  Root2$3,
@@ -24384,12 +24451,12 @@ const disabled$1 = "_disabled_1u214_41";
24384
24451
  const icon$1 = "_icon_1u214_46";
24385
24452
  const content$3 = "_content_1u214_52";
24386
24453
  const item$1 = "_item_1u214_57";
24387
- const primary$2 = "_primary_1u214_79";
24388
- const success$2 = "_success_1u214_89";
24389
- const warning$2 = "_warning_1u214_99";
24390
- const danger$2 = "_danger_1u214_109";
24391
- const info$2 = "_info_1u214_119";
24392
- const secondary$2 = "_secondary_1u214_129";
24454
+ const primary$3 = "_primary_1u214_79";
24455
+ const success$3 = "_success_1u214_89";
24456
+ const warning$3 = "_warning_1u214_99";
24457
+ const danger$3 = "_danger_1u214_109";
24458
+ const info$3 = "_info_1u214_119";
24459
+ const secondary$3 = "_secondary_1u214_129";
24393
24460
  const styles$4 = {
24394
24461
  trigger: trigger$1,
24395
24462
  large: large$1,
@@ -24398,12 +24465,12 @@ const styles$4 = {
24398
24465
  icon: icon$1,
24399
24466
  content: content$3,
24400
24467
  item: item$1,
24401
- primary: primary$2,
24402
- success: success$2,
24403
- warning: warning$2,
24404
- danger: danger$2,
24405
- info: info$2,
24406
- secondary: secondary$2
24468
+ primary: primary$3,
24469
+ success: success$3,
24470
+ warning: warning$3,
24471
+ danger: danger$3,
24472
+ info: info$3,
24473
+ secondary: secondary$3
24407
24474
  };
24408
24475
  function SelectInput({
24409
24476
  options,
@@ -25492,12 +25559,12 @@ const itemLabel = "_itemLabel_12pwu_120";
25492
25559
  const itemIcon = "_itemIcon_12pwu_124";
25493
25560
  const separator = "_separator_12pwu_136";
25494
25561
  const arrow = "_arrow_12pwu_141";
25495
- const primary$1 = "_primary_12pwu_148";
25496
- const success$1 = "_success_12pwu_159";
25497
- const warning$1 = "_warning_12pwu_170";
25498
- const danger$1 = "_danger_12pwu_181";
25499
- const info$1 = "_info_12pwu_192";
25500
- const secondary$1 = "_secondary_12pwu_203";
25562
+ const primary$2 = "_primary_12pwu_148";
25563
+ const success$2 = "_success_12pwu_159";
25564
+ const warning$2 = "_warning_12pwu_170";
25565
+ const danger$2 = "_danger_12pwu_181";
25566
+ const info$2 = "_info_12pwu_192";
25567
+ const secondary$2 = "_secondary_12pwu_203";
25501
25568
  const styles$3 = {
25502
25569
  trigger,
25503
25570
  large,
@@ -25515,12 +25582,12 @@ const styles$3 = {
25515
25582
  itemIcon,
25516
25583
  separator,
25517
25584
  arrow,
25518
- primary: primary$1,
25519
- success: success$1,
25520
- warning: warning$1,
25521
- danger: danger$1,
25522
- info: info$1,
25523
- secondary: secondary$1
25585
+ primary: primary$2,
25586
+ success: success$2,
25587
+ warning: warning$2,
25588
+ danger: danger$2,
25589
+ info: info$2,
25590
+ secondary: secondary$2
25524
25591
  };
25525
25592
  function Dropdown({
25526
25593
  items = [],
@@ -25611,16 +25678,29 @@ function Dropdown({
25611
25678
  ) })
25612
25679
  ] });
25613
25680
  }
25614
- const hatch = "_hatch_zh2j3_1";
25681
+ const hatch = "_hatch_lff0l_1";
25682
+ const primary$1 = "_primary_lff0l_7";
25683
+ const success$1 = "_success_lff0l_14";
25684
+ const warning$1 = "_warning_lff0l_21";
25685
+ const danger$1 = "_danger_lff0l_28";
25686
+ const info$1 = "_info_lff0l_35";
25687
+ const secondary$1 = "_secondary_lff0l_42";
25615
25688
  const styles$2 = {
25616
- hatch
25689
+ hatch,
25690
+ primary: primary$1,
25691
+ success: success$1,
25692
+ warning: warning$1,
25693
+ danger: danger$1,
25694
+ info: info$1,
25695
+ secondary: secondary$1
25617
25696
  };
25618
- function Hatch({ children: children2, className, ...props }) {
25697
+ function Hatch({ children: children2, className, variant, ...props }) {
25619
25698
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
25620
25699
  "div",
25621
25700
  {
25622
25701
  className: classNames(
25623
25702
  styles$2.hatch,
25703
+ styles$2[variant],
25624
25704
  hatchStyles.hatch,
25625
25705
  chamferStyles.chamfer,
25626
25706
  className
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jackcrane/ui",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "main": "dist/jcui.cjs.js",