@algobright/solana-connector 0.1.0 → 0.1.2

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 (29) hide show
  1. package/dist/{Avatar.module-P7KEBP7R.module.css → Avatar.module-AACAT34D.module.css} +42 -42
  2. package/dist/{Button.module-7TPMDOJN.module.css → Button.module-HQNNX6IB.module.css} +145 -145
  3. package/dist/{Collapsible.module-NXSN3MGI.module.css → Collapsible.module-F4VIL5FH.module.css} +24 -24
  4. package/dist/ConnectButton.d.mts +4 -0
  5. package/dist/ConnectButton.d.ts +4 -0
  6. package/dist/ConnectButton.js +145 -39
  7. package/dist/ConnectButton.js.map +1 -1
  8. package/dist/ConnectButton.mjs +140 -34
  9. package/dist/ConnectButton.mjs.map +1 -1
  10. package/dist/{ConnectButton.module-UWQKSVTP.module.css → ConnectButton.module-O3M32YJK.module.css} +8 -8
  11. package/dist/{CustomQRCode.module-FOXENMZG.module.css → CustomQRCode.module-JW3JU3FX.module.css} +176 -176
  12. package/dist/{Dialog.module-HCRT743N.module.css → Dialog.module-AYJTMDAD.module.css} +136 -136
  13. package/dist/{Menu.module-GV627ZLI.module.css → Menu.module-6ATSLATI.module.css} +79 -79
  14. package/dist/{Spinner.module-G7GUQJZJ.module.css → Spinner.module-BLSWZSIL.module.css} +16 -16
  15. package/dist/WalletDropdown.d.mts +4 -0
  16. package/dist/WalletDropdown.d.ts +4 -0
  17. package/dist/WalletDropdown.js +132 -28
  18. package/dist/WalletDropdown.js.map +1 -1
  19. package/dist/WalletDropdown.mjs +129 -25
  20. package/dist/WalletDropdown.mjs.map +1 -1
  21. package/dist/{WalletDropdown.module-342MM7XM.module.css → WalletDropdown.module-DOK7CUOQ.module.css} +223 -220
  22. package/dist/WalletModal.js +7 -7
  23. package/dist/WalletModal.js.map +1 -1
  24. package/dist/WalletModal.mjs +7 -7
  25. package/dist/WalletModal.mjs.map +1 -1
  26. package/dist/{WalletModal.module-PVV5PRXU.module.css → WalletModal.module-ZRTJGOQY.module.css} +341 -341
  27. package/dist/index.js.map +1 -1
  28. package/dist/index.mjs.map +1 -1
  29. package/package.json +11 -9
@@ -1,341 +1,341 @@
1
- :where(.dialogContent) {
2
- max-width: 28rem !important;
3
- border-radius: 1.5rem !important;
4
- padding: 1.5rem;
5
-
6
- --icon-bg-color: #f4f4f5;
7
- --icon-border-color: #e4e4e7;
8
- --icon-hover-bg-color: #e4e4e7;
9
- --icon-hover-fg-color: #09090b;
10
-
11
- --wc-tooltip-bg-color: #27272a;
12
- --wc-tooltip-fg-color: #f4f4f5;
13
-
14
- --recent-badge-bg: #f4f4f5;
15
- --recent-badge-fg: #71717a;
16
- --recent-badge-border: #e4e4e7;
17
-
18
- --wallet-button-bg: #f4f4f5;
19
- --wallet-button-fg: #09090b;
20
- --wallet-button-border: #e4e4e7;
21
- --muted-foreground: #71717a;
22
- }
23
- :where(.dialogContent[data-theme="dark"]) {
24
- --icon-bg-color: #27272a;
25
- --icon-border-color: #3f3f46;
26
- --icon-hover-bg-color: #3f3f46;
27
- --icon-hover-fg-color: #fafafa;
28
-
29
- --wc-tooltip-bg-color: #3f3f46;
30
- --wc-tooltip-fg-color: #fafafa;
31
-
32
- --recent-badge-bg: #27272a;
33
- --recent-badge-fg: #a1a1aa;
34
- --recent-badge-border: #3f3f46;
35
-
36
- --wallet-button-bg: #27272a;
37
- --wallet-button-fg: #fafafa;
38
- --wallet-button-border: #27272a;
39
- --muted-foreground: #a1a1aa;
40
- }
41
-
42
- /* header */
43
- :where(.dialogHeader) {
44
- display: flex;
45
- align-items: center;
46
- justify-content: space-between;
47
- position: relative;
48
- }
49
- :where(.dialogTitle) {
50
- font-size: 1.125rem;
51
- font-weight: 600;
52
- flex: 1;
53
- text-align: center;
54
- }
55
- :where(.iconButton) {
56
- display: inline-flex;
57
- align-items: center;
58
- justify-content: center;
59
- height: 2rem;
60
- width: 2rem;
61
- padding: 0.5rem;
62
- border-radius: 16px;
63
-
64
- cursor: pointer;
65
- transition: all 0.2s;
66
-
67
- background-color: var(--icon-bg-color);
68
- border: 1px solid var(--icon-border-color);
69
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
70
- color: inherit;
71
- }
72
- :where(.iconButton:hover) {
73
- background-color: var(--icon-hover-bg-color);
74
- color: var(--icon-hover-fg-color);
75
- }
76
- :where(.iconButton svg) {
77
- height: 0.75rem;
78
- width: 0.75rem;
79
- }
80
-
81
- :where(.walletsContainer) {
82
- display: flex;
83
- width: 100%;
84
- flex-direction: column;
85
- align-items: center;
86
- padding: 0.5rem 0;
87
- gap: 1rem;
88
- }
89
-
90
- /* wallet connect flow */
91
- :where(.tooltipBubble) {
92
- background-color: var(--wc-tooltip-bg-color);
93
- color: var(--wc-tooltip-fg-color);
94
- font-size: 0.75rem;
95
- padding: 0.25rem 0.5rem;
96
- border-radius: 0.5rem;
97
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
98
- display: flex;
99
- align-items: center;
100
- gap: 0.25rem;
101
- }
102
- :where(.tooltipIconWrapper) {
103
- display: flex;
104
- position: relative;
105
- justify-content: center;
106
- }
107
- :where(.tooltipIcon) {
108
- display: inline-block;
109
- width: 1.25rem;
110
- height: 1.25rem;
111
- color: #3b99fc;
112
- }
113
- :where(.tooltipCaret) {
114
- position: absolute;
115
- top: 100%;
116
- width: 1em;
117
- height: 1em;
118
- background-color: var(--wc-tooltip-bg-color);
119
- transform: rotate(45deg);
120
- margin-top: -0.25rem;
121
- flex-shrink: 0;
122
- }
123
-
124
- /* --- QR Code Area --- */
125
- :where(.qrWrapper) {
126
- display: flex;
127
- justify-content: center;
128
- width: 100%;
129
- }
130
- :where(.copyButton) {
131
- width: auto;
132
- border-radius: 12px;
133
- transition: all 200ms ease;
134
-
135
- display: inline-flex;
136
- align-items: center;
137
- justify-content: center;
138
-
139
- cursor: pointer;
140
- border: 1px solid #3f3f46;
141
- }
142
- :where(.copyButton:active) {
143
- transform: scale(0.98);
144
- }
145
- :where(.icon) {
146
- width: 1rem;
147
- height: 1rem;
148
- margin-right: 0.5rem;
149
- }
150
- :where(.successIcon) {
151
- color: #22c55e;
152
- }
153
-
154
- /* detecting wallets */
155
- :where(.detectingWallets) {
156
- display: flex;
157
- gap: 0.5rem;
158
- width: 100%;
159
- align-items: center;
160
- justify-content: center;
161
- }
162
-
163
- /* allwallets list */
164
- :where(.allWallets) {
165
- display: flex;
166
- width: 100%;
167
- gap: 0.5rem;
168
- flex-direction: column;
169
- }
170
- :where(.allWallets > div) {
171
- display: flex;
172
- width: 100%;
173
- gap: 0.5rem;
174
- align-items: center;
175
- justify-content: center;
176
- }
177
- :where(.seprator) {
178
- height: 1px;
179
- width: 100%;
180
- background-color: var(--icon-border-color);
181
- margin: 0.5rem 0;
182
- }
183
- :where(.Collapsible) {
184
- display: flex;
185
- flex-direction: column;
186
- width: 100%;
187
- gap: 0.5rem;
188
- }
189
- :where(.hiddenExpand) {
190
- border: 1px solid var(--wallet-button-border) !important;
191
- background-color: var(--wallet-button-bg) !important;
192
- color: var(--wallet-button-fg) !important;
193
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
194
- font-size: 0.875rem;
195
- font-weight: 600;
196
- font-family: var(--font-inter, inherit);
197
- }
198
-
199
- /* wallet button */
200
- :where(.walletButton) {
201
- height: auto;
202
- justify-content: space-between;
203
- border-radius: 1rem;
204
- }
205
- :where(.textContainer) {
206
- display: flex;
207
- flex-direction: column;
208
- align-items: flex-start;
209
- flex: 1;
210
- gap: 0.25rem;
211
- }
212
- :where(.nameRow) {
213
- display: flex;
214
- align-items: center;
215
- gap: 0.5rem;
216
- font-weight: 600;
217
- }
218
- :where(.recentBadge) {
219
- font-size: 0.75rem;
220
- padding: 0.1rem 0.4rem;
221
- border-radius: 4px;
222
- background-color: var(--recent-badge-bg);
223
- color: var(--recent-badge-fg);
224
- border: 1px solid var(--recent-badge-border);
225
- font-weight: 500;
226
- }
227
- :where(.statusText) {
228
- font-size: 0.75rem;
229
- color: var(--muted-foreground, #71717a);
230
- }
231
- :where(.statusText[data-type="error"]) {
232
- color: #ef4444;
233
- }
234
-
235
- /* --- Right Side: Icon,Spinner and Avatar --- */
236
- :where(.iconContainer) {
237
- display: flex;
238
- align-items: center;
239
- gap: 0.5rem;
240
- }
241
-
242
- :where(.hiddenWalletGrid) {
243
- display: grid;
244
- grid-template-columns: repeat(2, 1fr);
245
- gap: 0.25rem;
246
- width: fit-content;
247
- }
248
- :where(.hiddenWalletIconWrapper) {
249
- position: relative;
250
- height: 1.125rem;
251
- width: 1.125rem;
252
- overflow: hidden;
253
- border-radius: 50%;
254
- border: 1px solid var(--border-color, #e4e4e7);
255
- background-color: var(--bg-muted, #f4f4f5);
256
- }
257
- :where(.hiddenWalletIconWrapper > img) {
258
- height: 100%;
259
- width: 100%;
260
- object-fit: cover;
261
- display: block;
262
- }
263
-
264
- /* --- Unavailable / Not Ready Section --- */
265
- :where(.sectionHeader) {
266
- font-size: 0.875rem; /* text-sm */
267
- font-weight: 500;
268
- color: var(--muted-foreground, #71717a);
269
- padding: 0 0.25rem; /* px-1 */
270
- margin-bottom: 0.5rem;
271
- }
272
-
273
- :where(.unavailableRow) {
274
- display: flex;
275
- align-items: center;
276
- justify-content: space-between;
277
- padding: 1rem; /* p-4 */
278
- width: 100%;
279
- border-radius: 16px;
280
-
281
- /* Theme Colors */
282
- background-color: var(--bg-background, #ffffff);
283
- border: 1px solid var(--border-color, #e4e4e7);
284
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-xs */
285
- }
286
-
287
- /* Text Container inside Unavailable Row */
288
- :where(.walletInfo) {
289
- display: flex;
290
- align-items: center;
291
- gap: 0.75rem; /* gap-3 */
292
- }
293
-
294
- :where(.unavailableLabel) {
295
- font-size: 0.75rem; /* text-xs */
296
- color: var(--muted-foreground, #71717a);
297
- }
298
-
299
- /* Install Button (Ghost) */
300
- :where(.installButton) {
301
- height: 2rem; /* h-8 */
302
- padding: 0 0.5rem; /* px-2 */
303
- color: var(--muted-foreground, #71717a);
304
- }
305
-
306
- :where(.installButton:hover) {
307
- background-color: var(--bg-secondary, #f4f4f5);
308
- color: var(--fg-foreground, #09090b);
309
- }
310
-
311
- /* --- Empty State (No Wallets) --- */
312
- :where(.emptyStateContainer) {
313
- display: flex;
314
- flex-direction: column;
315
- align-items: center;
316
-
317
- border-radius: 0.5rem;
318
- border: 1px dashed var(--border-color, #e4e4e7);
319
- padding: 2rem;
320
- text-align: center;
321
- }
322
- :where(.emptyStateIcon) {
323
- height: 3rem;
324
- width: 3rem;
325
- color: var(--muted-foreground, #71717a);
326
- margin-bottom: 0.75rem;
327
- }
328
- :where(.emptyStateTitle) {
329
- font-weight: 600;
330
- margin-bottom: 0.5rem;
331
- }
332
- :where(.emptyStateDesc) {
333
- font-size: 0.875rem;
334
- color: var(--muted-foreground, #71717a);
335
- margin-bottom: 1.5rem;
336
- }
337
- :where(.emptyStateActions) {
338
- display: flex;
339
- gap: 0.5rem;
340
- justify-content: center;
341
- }
1
+ :where(.dialogContent) {
2
+ max-width: 28rem !important;
3
+ border-radius: 1.5rem !important;
4
+ padding: 1.5rem;
5
+
6
+ --icon-bg-color: #f4f4f5;
7
+ --icon-border-color: #e4e4e7;
8
+ --icon-hover-bg-color: #e4e4e7;
9
+ --icon-hover-fg-color: #09090b;
10
+
11
+ --wc-tooltip-bg-color: #27272a;
12
+ --wc-tooltip-fg-color: #f4f4f5;
13
+
14
+ --recent-badge-bg: #f4f4f5;
15
+ --recent-badge-fg: #71717a;
16
+ --recent-badge-border: #e4e4e7;
17
+
18
+ --wallet-button-bg: #f4f4f5;
19
+ --wallet-button-fg: #09090b;
20
+ --wallet-button-border: #e4e4e7;
21
+ --muted-foreground: #71717a;
22
+ }
23
+ :where(.dialogContent[data-theme="dark"]) {
24
+ --icon-bg-color: #27272a;
25
+ --icon-border-color: #3f3f46;
26
+ --icon-hover-bg-color: #3f3f46;
27
+ --icon-hover-fg-color: #fafafa;
28
+
29
+ --wc-tooltip-bg-color: #3f3f46;
30
+ --wc-tooltip-fg-color: #fafafa;
31
+
32
+ --recent-badge-bg: #27272a;
33
+ --recent-badge-fg: #a1a1aa;
34
+ --recent-badge-border: #3f3f46;
35
+
36
+ --wallet-button-bg: #27272a;
37
+ --wallet-button-fg: #fafafa;
38
+ --wallet-button-border: #27272a;
39
+ --muted-foreground: #a1a1aa;
40
+ }
41
+
42
+ /* header */
43
+ :where(.dialogHeader) {
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: space-between;
47
+ position: relative;
48
+ }
49
+ :where(.dialogTitle) {
50
+ font-size: 1.125rem;
51
+ font-weight: 600;
52
+ flex: 1;
53
+ text-align: center;
54
+ }
55
+ :where(.iconButton) {
56
+ display: inline-flex;
57
+ align-items: center;
58
+ justify-content: center;
59
+ height: 2rem;
60
+ width: 2rem;
61
+ padding: 0.5rem;
62
+ border-radius: 16px;
63
+
64
+ cursor: pointer;
65
+ transition: all 0.2s;
66
+
67
+ background-color: var(--icon-bg-color);
68
+ border: 1px solid var(--icon-border-color);
69
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
70
+ color: inherit;
71
+ }
72
+ :where(.iconButton:hover) {
73
+ background-color: var(--icon-hover-bg-color);
74
+ color: var(--icon-hover-fg-color);
75
+ }
76
+ :where(.iconButton svg) {
77
+ height: 0.75rem;
78
+ width: 0.75rem;
79
+ }
80
+
81
+ :where(.walletsContainer) {
82
+ display: flex;
83
+ width: 100%;
84
+ flex-direction: column;
85
+ align-items: center;
86
+ padding: 0.5rem 0;
87
+ gap: 1rem;
88
+ }
89
+
90
+ /* wallet connect flow */
91
+ :where(.tooltipBubble) {
92
+ background-color: var(--wc-tooltip-bg-color);
93
+ color: var(--wc-tooltip-fg-color);
94
+ font-size: 0.75rem;
95
+ padding: 0.25rem 0.5rem;
96
+ border-radius: 0.5rem;
97
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
98
+ display: flex;
99
+ align-items: center;
100
+ gap: 0.25rem;
101
+ }
102
+ :where(.tooltipIconWrapper) {
103
+ display: flex;
104
+ position: relative;
105
+ justify-content: center;
106
+ }
107
+ :where(.tooltipIcon) {
108
+ display: inline-block;
109
+ width: 1.25rem;
110
+ height: 1.25rem;
111
+ color: #3b99fc;
112
+ }
113
+ :where(.tooltipCaret) {
114
+ position: absolute;
115
+ top: 100%;
116
+ width: 1em;
117
+ height: 1em;
118
+ background-color: var(--wc-tooltip-bg-color);
119
+ transform: rotate(45deg);
120
+ margin-top: -0.25rem;
121
+ flex-shrink: 0;
122
+ }
123
+
124
+ /* --- QR Code Area --- */
125
+ :where(.qrWrapper) {
126
+ display: flex;
127
+ justify-content: center;
128
+ width: 100%;
129
+ }
130
+ :where(.copyButton) {
131
+ width: auto;
132
+ border-radius: 12px;
133
+ transition: all 200ms ease;
134
+
135
+ display: inline-flex;
136
+ align-items: center;
137
+ justify-content: center;
138
+
139
+ cursor: pointer;
140
+ border: 1px solid #3f3f46;
141
+ }
142
+ :where(.copyButton:active) {
143
+ transform: scale(0.98);
144
+ }
145
+ :where(.icon) {
146
+ width: 1rem;
147
+ height: 1rem;
148
+ margin-right: 0.5rem;
149
+ }
150
+ :where(.successIcon) {
151
+ color: #22c55e;
152
+ }
153
+
154
+ /* detecting wallets */
155
+ :where(.detectingWallets) {
156
+ display: flex;
157
+ gap: 0.5rem;
158
+ width: 100%;
159
+ align-items: center;
160
+ justify-content: center;
161
+ }
162
+
163
+ /* allwallets list */
164
+ :where(.allWallets) {
165
+ display: flex;
166
+ width: 100%;
167
+ gap: 0.5rem;
168
+ flex-direction: column;
169
+ }
170
+ :where(.allWallets > div) {
171
+ display: flex;
172
+ width: 100%;
173
+ gap: 0.5rem;
174
+ align-items: center;
175
+ justify-content: center;
176
+ }
177
+ :where(.seprator) {
178
+ height: 1px;
179
+ width: 100%;
180
+ background-color: var(--icon-border-color);
181
+ margin: 0.5rem 0;
182
+ }
183
+ :where(.Collapsible) {
184
+ display: flex;
185
+ flex-direction: column;
186
+ width: 100%;
187
+ gap: 0.5rem;
188
+ }
189
+ :where(.hiddenExpand) {
190
+ border: 1px solid var(--wallet-button-border) !important;
191
+ background-color: var(--wallet-button-bg) !important;
192
+ color: var(--wallet-button-fg) !important;
193
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
194
+ font-size: 0.875rem;
195
+ font-weight: 600;
196
+ font-family: var(--font-inter, inherit);
197
+ }
198
+
199
+ /* wallet button */
200
+ :where(.walletButton) {
201
+ height: auto;
202
+ justify-content: space-between;
203
+ border-radius: 1rem;
204
+ }
205
+ :where(.textContainer) {
206
+ display: flex;
207
+ flex-direction: column;
208
+ align-items: flex-start;
209
+ flex: 1;
210
+ gap: 0.25rem;
211
+ }
212
+ :where(.nameRow) {
213
+ display: flex;
214
+ align-items: center;
215
+ gap: 0.5rem;
216
+ font-weight: 600;
217
+ }
218
+ :where(.recentBadge) {
219
+ font-size: 0.75rem;
220
+ padding: 0.1rem 0.4rem;
221
+ border-radius: 4px;
222
+ background-color: var(--recent-badge-bg);
223
+ color: var(--recent-badge-fg);
224
+ border: 1px solid var(--recent-badge-border);
225
+ font-weight: 500;
226
+ }
227
+ :where(.statusText) {
228
+ font-size: 0.75rem;
229
+ color: var(--muted-foreground, #71717a);
230
+ }
231
+ :where(.statusText[data-type="error"]) {
232
+ color: #ef4444;
233
+ }
234
+
235
+ /* --- Right Side: Icon,Spinner and Avatar --- */
236
+ :where(.iconContainer) {
237
+ display: flex;
238
+ align-items: center;
239
+ gap: 0.5rem;
240
+ }
241
+
242
+ :where(.hiddenWalletGrid) {
243
+ display: grid;
244
+ grid-template-columns: repeat(2, 1fr);
245
+ gap: 0.25rem;
246
+ width: fit-content;
247
+ }
248
+ :where(.hiddenWalletIconWrapper) {
249
+ position: relative;
250
+ height: 1.125rem;
251
+ width: 1.125rem;
252
+ overflow: hidden;
253
+ border-radius: 50%;
254
+ border: 1px solid var(--border-color, #e4e4e7);
255
+ background-color: var(--bg-muted, #f4f4f5);
256
+ }
257
+ :where(.hiddenWalletIconWrapper > img) {
258
+ height: 100%;
259
+ width: 100%;
260
+ object-fit: cover;
261
+ display: block;
262
+ }
263
+
264
+ /* --- Unavailable / Not Ready Section --- */
265
+ :where(.sectionHeader) {
266
+ font-size: 0.875rem; /* text-sm */
267
+ font-weight: 500;
268
+ color: var(--muted-foreground, #71717a);
269
+ padding: 0 0.25rem; /* px-1 */
270
+ margin-bottom: 0.5rem;
271
+ }
272
+
273
+ :where(.unavailableRow) {
274
+ display: flex;
275
+ align-items: center;
276
+ justify-content: space-between;
277
+ padding: 1rem; /* p-4 */
278
+ width: 100%;
279
+ border-radius: 16px;
280
+
281
+ /* Theme Colors */
282
+ background-color: var(--bg-background, #ffffff);
283
+ border: 1px solid var(--border-color, #e4e4e7);
284
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-xs */
285
+ }
286
+
287
+ /* Text Container inside Unavailable Row */
288
+ :where(.walletInfo) {
289
+ display: flex;
290
+ align-items: center;
291
+ gap: 0.75rem; /* gap-3 */
292
+ }
293
+
294
+ :where(.unavailableLabel) {
295
+ font-size: 0.75rem; /* text-xs */
296
+ color: var(--muted-foreground, #71717a);
297
+ }
298
+
299
+ /* Install Button (Ghost) */
300
+ :where(.installButton) {
301
+ height: 2rem; /* h-8 */
302
+ padding: 0 0.5rem; /* px-2 */
303
+ color: var(--muted-foreground, #71717a);
304
+ }
305
+
306
+ :where(.installButton:hover) {
307
+ background-color: var(--bg-secondary, #f4f4f5);
308
+ color: var(--fg-foreground, #09090b);
309
+ }
310
+
311
+ /* --- Empty State (No Wallets) --- */
312
+ :where(.emptyStateContainer) {
313
+ display: flex;
314
+ flex-direction: column;
315
+ align-items: center;
316
+
317
+ border-radius: 0.5rem;
318
+ border: 1px dashed var(--border-color, #e4e4e7);
319
+ padding: 2rem;
320
+ text-align: center;
321
+ }
322
+ :where(.emptyStateIcon) {
323
+ height: 3rem;
324
+ width: 3rem;
325
+ color: var(--muted-foreground, #71717a);
326
+ margin-bottom: 0.75rem;
327
+ }
328
+ :where(.emptyStateTitle) {
329
+ font-weight: 600;
330
+ margin-bottom: 0.5rem;
331
+ }
332
+ :where(.emptyStateDesc) {
333
+ font-size: 0.875rem;
334
+ color: var(--muted-foreground, #71717a);
335
+ margin-bottom: 1.5rem;
336
+ }
337
+ :where(.emptyStateActions) {
338
+ display: flex;
339
+ gap: 0.5rem;
340
+ justify-content: center;
341
+ }