@wallet-ui/tailwind 1.1.0-canary-20250610163057 → 1.1.0-canary-20250613000309
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.
- package/dist/index.css +95 -84
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1,120 +1,131 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
2
|
|
|
3
3
|
/* src/wallet-ui-variables.css */
|
|
4
|
-
@theme inline { --color-background: var(--background); --color-background-hover: var(--background-hover); --color-border: var(--border); --color-foreground: var(--foreground); --color-foreground-hover: var(--foreground-hover); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-ring: var(--ring); }
|
|
5
4
|
:root,
|
|
6
5
|
html.light:root,
|
|
7
6
|
[data-theme=light]:root {
|
|
8
|
-
--background: var(--color-neutral-50);
|
|
9
|
-
--background-hover: var(--color-neutral-100);
|
|
10
|
-
--border: var(--color-neutral-200);
|
|
11
|
-
--foreground: var(--color-neutral-950);
|
|
12
|
-
--foreground-hover: var(--color-neutral-900);
|
|
13
|
-
--
|
|
14
|
-
--primary: var(--color-neutral-950);
|
|
15
|
-
--ring: var(--color-neutral-400);
|
|
7
|
+
--wu-color-background: var(--color-neutral-50);
|
|
8
|
+
--wu-color-background-hover: var(--color-neutral-100);
|
|
9
|
+
--wu-color-border: var(--color-neutral-200);
|
|
10
|
+
--wu-color-foreground: var(--color-neutral-950);
|
|
11
|
+
--wu-color-foreground-hover: var(--color-neutral-900);
|
|
12
|
+
--wu-color-ring: var(--color-neutral-400);
|
|
16
13
|
}
|
|
17
14
|
html.dark:root,
|
|
18
15
|
[data-theme=dark]:root {
|
|
19
|
-
--background: var(--color-neutral-950);
|
|
20
|
-
--background-hover: var(--color-neutral-900);
|
|
21
|
-
--border: var(--color-neutral-800);
|
|
22
|
-
--foreground: var(--color-neutral-100);
|
|
23
|
-
--foreground-hover: var(--color-white);
|
|
24
|
-
--
|
|
25
|
-
--primary: var(--color-neutral-100);
|
|
26
|
-
--ring: var(--color-neutral-500);
|
|
16
|
+
--wu-color-background: var(--color-neutral-950);
|
|
17
|
+
--wu-color-background-hover: var(--color-neutral-900);
|
|
18
|
+
--wu-color-border: var(--color-neutral-800);
|
|
19
|
+
--wu-color-foreground: var(--color-neutral-100);
|
|
20
|
+
--wu-color-foreground-hover: var(--color-white);
|
|
21
|
+
--wu-color-ring: var(--color-neutral-500);
|
|
27
22
|
}
|
|
28
23
|
|
|
29
24
|
/* src/wallet-ui-base-button.css */
|
|
30
|
-
[data-
|
|
31
|
-
background: var(--background);
|
|
32
|
-
color: var(--foreground);
|
|
25
|
+
[data-wu=base-button] {
|
|
26
|
+
background: var(--wu-color-background);
|
|
27
|
+
color: var(--wu-color-foreground);
|
|
33
28
|
@apply border;
|
|
34
|
-
border-color: var(--color-border);
|
|
29
|
+
border-color: var(--wu-color-border);
|
|
35
30
|
@apply rounded-md shadow-sm cursor-pointer;
|
|
36
31
|
@apply flex items-center justify-center gap-2 whitespace-nowrap;
|
|
37
32
|
@apply disabled:cursor-not-allowed disabled:opacity-50;
|
|
33
|
+
&:hover {
|
|
34
|
+
background: var(--wu-color-background-hover);
|
|
35
|
+
color: var(--wu-color-foreground-hover);
|
|
36
|
+
}
|
|
37
|
+
&:focus {
|
|
38
|
+
@apply outline-none;
|
|
39
|
+
box-shadow: 0 0 0 2px var(--wu-color-ring);
|
|
40
|
+
}
|
|
38
41
|
}
|
|
39
|
-
[data-
|
|
40
|
-
background: var(--background-hover);
|
|
41
|
-
color: var(--foreground-hover);
|
|
42
|
-
}
|
|
43
|
-
[data-ui=base-button].sm {
|
|
42
|
+
[data-wu=base-button].sm {
|
|
44
43
|
@apply px-3 py-1.5;
|
|
45
44
|
@apply text-sm;
|
|
46
45
|
@apply font-normal;
|
|
47
46
|
}
|
|
48
|
-
[data-
|
|
47
|
+
[data-wu=base-button].md {
|
|
49
48
|
@apply px-4 py-3;
|
|
50
49
|
@apply text-base;
|
|
51
50
|
@apply font-semibold;
|
|
52
51
|
}
|
|
53
|
-
[data-
|
|
52
|
+
[data-wu=base-button].lg {
|
|
54
53
|
@apply px-6 py-4;
|
|
55
54
|
@apply text-lg;
|
|
56
55
|
@apply font-bold;
|
|
57
56
|
}
|
|
58
|
-
.sm [data-
|
|
57
|
+
.sm [data-wu=base-button-left-section] {
|
|
59
58
|
@apply mr-1;
|
|
60
59
|
@apply text-xs;
|
|
61
60
|
}
|
|
62
|
-
.md [data-
|
|
61
|
+
.md [data-wu=base-button-left-section] {
|
|
63
62
|
@apply mr-2;
|
|
64
63
|
@apply text-sm;
|
|
65
64
|
}
|
|
66
|
-
.lg [data-
|
|
65
|
+
.lg [data-wu=base-button-left-section] {
|
|
67
66
|
@apply mr-4;
|
|
68
67
|
@apply text-xl;
|
|
69
68
|
}
|
|
70
|
-
.sm [data-
|
|
69
|
+
.sm [data-wu=base-button-right-section] {
|
|
71
70
|
@apply ml-1;
|
|
72
71
|
@apply text-xs;
|
|
73
72
|
}
|
|
74
|
-
.md [data-
|
|
73
|
+
.md [data-wu=base-button-right-section] {
|
|
75
74
|
@apply ml-2;
|
|
76
75
|
@apply text-sm;
|
|
77
76
|
}
|
|
78
|
-
.lg [data-
|
|
77
|
+
.lg [data-wu=base-button-right-section] {
|
|
79
78
|
@apply ml-4;
|
|
80
79
|
@apply text-xl;
|
|
81
80
|
}
|
|
82
81
|
|
|
83
82
|
/* src/wallet-ui-base-dropdown.css */
|
|
84
|
-
[data-
|
|
85
|
-
background: var(--color-background);
|
|
83
|
+
[data-wu=base-dropdown-list] {
|
|
84
|
+
background: var(--wu-color-background);
|
|
86
85
|
@apply border outline-hidden;
|
|
87
|
-
border-color: var(--color-border);
|
|
86
|
+
border-color: var(--wu-color-border);
|
|
88
87
|
@apply overflow-clip rounded-md p-1;
|
|
89
88
|
}
|
|
90
|
-
[data-
|
|
91
|
-
background: var(--color-background);
|
|
92
|
-
color: var(--color-foreground);
|
|
89
|
+
[data-wu=base-dropdown-item] {
|
|
90
|
+
background: var(--wu-color-background);
|
|
91
|
+
color: var(--wu-color-foreground);
|
|
93
92
|
@apply flex items-center gap-2;
|
|
94
93
|
@apply cursor-pointer w-full rounded-md;
|
|
94
|
+
&:hover {
|
|
95
|
+
background: var(--wu-color-background-hover);
|
|
96
|
+
color: var(--wu-color-foreground-hover);
|
|
97
|
+
}
|
|
95
98
|
}
|
|
96
|
-
[data-
|
|
97
|
-
background: var(--background-hover);
|
|
98
|
-
color: var(--foreground-hover);
|
|
99
|
-
}
|
|
100
|
-
[data-ui=base-dropdown-item].sm {
|
|
99
|
+
[data-wu=base-dropdown-item].sm {
|
|
101
100
|
@apply px-3 py-2;
|
|
102
101
|
@apply text-sm;
|
|
103
102
|
}
|
|
104
|
-
[data-
|
|
103
|
+
[data-wu=base-dropdown-item].md {
|
|
105
104
|
@apply px-4 py-3;
|
|
106
105
|
@apply text-base;
|
|
107
106
|
}
|
|
108
|
-
[data-
|
|
107
|
+
[data-wu=base-dropdown-item].lg {
|
|
109
108
|
@apply px-4 py-3;
|
|
110
109
|
@apply text-lg;
|
|
111
110
|
}
|
|
112
|
-
[data-
|
|
111
|
+
.sm [data-wu=base-dropdown-item-left-section] {
|
|
113
112
|
@apply mr-1;
|
|
114
113
|
}
|
|
115
|
-
[data-
|
|
114
|
+
.md [data-wu=base-dropdown-item-left-section] {
|
|
115
|
+
@apply mr-2;
|
|
116
|
+
}
|
|
117
|
+
.lg [data-wu=base-dropdown-item-left-section] {
|
|
118
|
+
@apply mr-3;
|
|
119
|
+
}
|
|
120
|
+
.sm [data-wu=base-dropdown-item-right-section] {
|
|
116
121
|
@apply ml-1;
|
|
117
122
|
}
|
|
123
|
+
.md [data-wu=base-dropdown-item-right-section] {
|
|
124
|
+
@apply ml-2;
|
|
125
|
+
}
|
|
126
|
+
.lg [data-wu=base-dropdown-item-right-section] {
|
|
127
|
+
@apply ml-3;
|
|
128
|
+
}
|
|
118
129
|
|
|
119
130
|
/* src/wallet-ui-base-modal.css */
|
|
120
131
|
[data-scope=dialog][data-part=backdrop] {
|
|
@@ -126,9 +137,9 @@ html.dark:root,
|
|
|
126
137
|
@apply flex items-center justify-center;
|
|
127
138
|
}
|
|
128
139
|
[data-scope=dialog][data-part=content] {
|
|
129
|
-
background: var(--background);
|
|
140
|
+
background: var(--wu-color-background);
|
|
130
141
|
@apply border;
|
|
131
|
-
border-color: var(--color-border);
|
|
142
|
+
border-color: var(--wu-color-border);
|
|
132
143
|
@apply w-full overflow-hidden shadow-lg;
|
|
133
144
|
@apply rounded-xl outline-0;
|
|
134
145
|
}
|
|
@@ -138,18 +149,18 @@ html.dark:root,
|
|
|
138
149
|
}
|
|
139
150
|
[data-scope=dialog][data-part=description] {
|
|
140
151
|
@apply flex items-center justify-center;
|
|
141
|
-
color: var(--foreground);
|
|
152
|
+
color: var(--wu-color-foreground);
|
|
142
153
|
}
|
|
143
154
|
[data-scope=dialog][data-part=close-trigger] {
|
|
144
155
|
@apply border;
|
|
145
|
-
border-color: var(--color-border);
|
|
156
|
+
border-color: var(--wu-color-border);
|
|
146
157
|
@apply cursor-pointer;
|
|
147
158
|
@apply flex items-center justify-center;
|
|
148
|
-
color: var(--foreground);
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
159
|
+
color: var(--wu-color-foreground);
|
|
160
|
+
&:hover {
|
|
161
|
+
background: var(--wu-color-background-hover);
|
|
162
|
+
color: var(--wu-color-foreground-hover);
|
|
163
|
+
}
|
|
153
164
|
}
|
|
154
165
|
[data-scope=dialog][data-part=content][data-state=open] {
|
|
155
166
|
animation: anim-scale-in 300ms ease-out;
|
|
@@ -158,7 +169,7 @@ html.dark:root,
|
|
|
158
169
|
animation: anim-scale-out 200ms ease-in;
|
|
159
170
|
}
|
|
160
171
|
[data-scope=dialog][data-part=content].sm {
|
|
161
|
-
@apply max-w-
|
|
172
|
+
@apply max-w-xs;
|
|
162
173
|
@apply p-2 rounded-md;
|
|
163
174
|
}
|
|
164
175
|
[data-scope=dialog][data-part=content].md {
|
|
@@ -195,12 +206,12 @@ html.dark:root,
|
|
|
195
206
|
@apply text-sm;
|
|
196
207
|
}
|
|
197
208
|
.md [data-scope=dialog][data-part=description] {
|
|
198
|
-
@apply pb-
|
|
199
|
-
@apply text-
|
|
209
|
+
@apply pb-4 px-4;
|
|
210
|
+
@apply text-base;
|
|
200
211
|
}
|
|
201
212
|
.lg [data-scope=dialog][data-part=description] {
|
|
202
|
-
@apply pb-
|
|
203
|
-
@apply text-
|
|
213
|
+
@apply pb-6 px-6;
|
|
214
|
+
@apply text-lg;
|
|
204
215
|
}
|
|
205
216
|
@keyframes anim-scale-in {
|
|
206
217
|
from {
|
|
@@ -224,69 +235,69 @@ html.dark:root,
|
|
|
224
235
|
}
|
|
225
236
|
|
|
226
237
|
/* src/wallet-ui-icon.css */
|
|
227
|
-
[data-
|
|
238
|
+
[data-wu=wallet-ui-icon] {
|
|
228
239
|
@apply border-0;
|
|
229
240
|
}
|
|
230
|
-
[data-
|
|
231
|
-
@apply rounded-
|
|
241
|
+
[data-wu=wallet-ui-icon].sm {
|
|
242
|
+
@apply rounded-sm;
|
|
232
243
|
@apply h-[16px] w-[16px];
|
|
233
244
|
}
|
|
234
|
-
[data-
|
|
245
|
+
[data-wu=wallet-ui-icon].md {
|
|
235
246
|
@apply rounded-md;
|
|
236
247
|
@apply h-[24px] w-[24px];
|
|
237
248
|
}
|
|
238
|
-
[data-
|
|
249
|
+
[data-wu=wallet-ui-icon].lg {
|
|
239
250
|
@apply rounded-lg;
|
|
240
251
|
@apply h-[32px] w-[32px];
|
|
241
252
|
}
|
|
242
253
|
|
|
243
254
|
/* src/wallet-ui-label.css */
|
|
244
|
-
[data-
|
|
245
|
-
color: var(--foreground);
|
|
255
|
+
[data-wu=wallet-ui-label] {
|
|
256
|
+
color: var(--wu-color-foreground);
|
|
246
257
|
}
|
|
247
|
-
[data-
|
|
258
|
+
[data-wu=wallet-ui-label].sm {
|
|
248
259
|
@apply text-xs;
|
|
249
260
|
@apply font-light;
|
|
250
261
|
}
|
|
251
|
-
[data-
|
|
262
|
+
[data-wu=wallet-ui-label].md {
|
|
252
263
|
@apply text-base;
|
|
253
264
|
@apply font-normal;
|
|
254
265
|
}
|
|
255
|
-
[data-
|
|
266
|
+
[data-wu=wallet-ui-label].lg {
|
|
256
267
|
@apply text-xl;
|
|
257
268
|
@apply font-semibold;
|
|
258
269
|
}
|
|
259
270
|
|
|
260
271
|
/* src/wallet-ui-list-button.css */
|
|
261
|
-
[data-
|
|
272
|
+
[data-wu=wallet-ui-list-button] {
|
|
262
273
|
@apply flex items-center gap-2;
|
|
263
274
|
@apply whitespace-nowrap;
|
|
264
275
|
@apply cursor-pointer select-none appearance-none disabled:cursor-not-allowed disabled:opacity-50;
|
|
276
|
+
&:hover {
|
|
277
|
+
background: var(--wu-color-background-hover);
|
|
278
|
+
}
|
|
265
279
|
}
|
|
266
|
-
[data-
|
|
267
|
-
background: var(--background-hover);
|
|
268
|
-
}
|
|
269
|
-
[data-ui=wallet-ui-list-button].sm {
|
|
280
|
+
[data-wu=wallet-ui-list-button].sm {
|
|
270
281
|
@apply px-1 py-1 rounded-md;
|
|
271
282
|
}
|
|
272
|
-
[data-
|
|
283
|
+
[data-wu=wallet-ui-list-button].md {
|
|
273
284
|
@apply px-2 py-2 rounded-lg;
|
|
274
285
|
}
|
|
275
|
-
[data-
|
|
286
|
+
[data-wu=wallet-ui-list-button].lg {
|
|
276
287
|
@apply px-3 py-3 rounded-xl;
|
|
277
288
|
}
|
|
278
289
|
|
|
279
290
|
/* src/wallet-ui-list.css */
|
|
280
|
-
[data-
|
|
291
|
+
[data-wu=wallet-ui-list] {
|
|
281
292
|
@apply flex flex-col;
|
|
282
293
|
}
|
|
283
|
-
[data-
|
|
294
|
+
[data-wu=wallet-ui-list].sm {
|
|
284
295
|
@apply gap-1;
|
|
285
296
|
}
|
|
286
|
-
[data-
|
|
297
|
+
[data-wu=wallet-ui-list].md {
|
|
287
298
|
@apply gap-2;
|
|
288
299
|
}
|
|
289
|
-
[data-
|
|
300
|
+
[data-wu=wallet-ui-list].lg {
|
|
290
301
|
@apply gap-3;
|
|
291
302
|
}
|
|
292
303
|
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/wallet-ui-variables.css","../src/wallet-ui-base-button.css","../src/wallet-ui-base-dropdown.css","../src/wallet-ui-base-modal.css","../src/wallet-ui-icon.css","../src/wallet-ui-label.css","../src/wallet-ui-list-button.css","../src/wallet-ui-list.css"],"sourcesContent":["/**\n * These are the variables that are used in the @wallet-ui/tailwind styles.\n *\n * The goal is to make them compatible with the defaults used by Shadcn so it integrates automagically.\n *\n * These styles are compiled by the Tailwind compiler and used in the @wallet-ui/react package.\n */\n@import 'tailwindcss';\n\n@theme inline {\n --color-background: var(--background);\n --color-background-hover: var(--background-hover);\n --color-border: var(--border);\n --color-foreground: var(--foreground);\n --color-foreground-hover: var(--foreground-hover);\n --color-primary-foreground: var(--primary-foreground);\n --color-primary: var(--primary);\n --color-ring: var(--ring);\n}\n\n:root,\nhtml.light:root,\n[data-theme='light']:root {\n --background: var(--color-neutral-50);\n --background-hover: var(--color-neutral-100);\n --border: var(--color-neutral-200);\n --foreground: var(--color-neutral-950);\n --foreground-hover: var(--color-neutral-900);\n --primary-foreground: var(--color-neutral-100);\n --primary: var(--color-neutral-950);\n --ring: var(--color-neutral-400);\n}\n\nhtml.dark:root,\n[data-theme='dark']:root {\n --background: var(--color-neutral-950);\n --background-hover: var(--color-neutral-900);\n --border: var(--color-neutral-800);\n --foreground: var(--color-neutral-100);\n --foreground-hover: var(--color-white);\n --primary-foreground: var(--color-neutral-950);\n --primary: var(--color-neutral-100);\n --ring: var(--color-neutral-500);\n}\n","/**\n * These are the variables that style the BaseButton component.\n *\n * It targets the [data-ui='base-button'] and related [data-ui='base-button-*'] selectors.\n *\n * The colors are coming from the wallet-ui-variables.css file. Other styles are Tailwind CSS.\n */\n\n/* Base Button */\n[data-ui='base-button'] {\n /* Background */\n background: var(--background);\n /* Text color */\n color: var(--foreground);\n /* Border */\n @apply border;\n border-color: var(--color-border);\n /* Shape */\n @apply rounded-md shadow-sm cursor-pointer;\n /* Composition */\n @apply flex items-center justify-center gap-2 whitespace-nowrap;\n /* Disabled */\n @apply disabled:cursor-not-allowed disabled:opacity-50;\n}\n\n/* Base Button Hover */\n[data-ui='base-button']:hover {\n /* Background */\n background: var(--background-hover);\n /* Text color */\n color: var(--foreground-hover);\n}\n\n/* Base Button Sizes */\n[data-ui='base-button'].sm {\n /* Shape */\n @apply px-3 py-1.5;\n /* Text size */\n @apply text-sm;\n /* Text weight */\n @apply font-normal;\n}\n\n[data-ui='base-button'].md {\n /* Shape */\n @apply px-4 py-3;\n /* Text size */\n @apply text-base;\n /* Text weight */\n @apply font-semibold;\n}\n\n[data-ui='base-button'].lg {\n /* Shape */\n @apply px-6 py-4;\n /* Text size */\n @apply text-lg;\n /* Text weight */\n @apply font-bold;\n}\n\n/* Left Section Sizes */\n.sm [data-ui='base-button-left-section'] {\n /* Composition */\n @apply mr-1;\n /* Text size */\n @apply text-xs;\n}\n\n.md [data-ui='base-button-left-section'] {\n /* Composition */\n @apply mr-2;\n /* Text size */\n @apply text-sm;\n}\n\n.lg [data-ui='base-button-left-section'] {\n /* Composition */\n @apply mr-4;\n /* Text size */\n @apply text-xl;\n}\n\n/* Right Section Sizes */\n.sm [data-ui='base-button-right-section'] {\n /* Composition */\n @apply ml-1;\n /* Text size */\n @apply text-xs;\n}\n\n.md [data-ui='base-button-right-section'] {\n /* Composition */\n @apply ml-2;\n /* Text size */\n @apply text-sm;\n}\n\n.lg [data-ui='base-button-right-section'] {\n /* Composition */\n @apply ml-4;\n /* Text size */\n @apply text-xl;\n}\n","/**\n * These are the variables that style the BaseDropdown component.\n *\n * It targets the [data-ui='base-dropdown'] and related [data-ui='base-dropdown-*'] selectors.\n *\n * The colors are coming from the wallet-ui-variables.css file. Other styles are Tailwind CSS.\n */\n\n/* Base Dropdown List */\n[data-ui='base-dropdown-list'] {\n /* Background */\n background: var(--color-background);\n /* Border */\n @apply border outline-hidden;\n border-color: var(--color-border);\n /*!* Shape *!*/\n @apply overflow-clip rounded-md p-1;\n}\n\n/* Base Dropdown Item */\n[data-ui='base-dropdown-item'] {\n /* Background */\n background: var(--color-background);\n /* Text color */\n color: var(--color-foreground);\n /* Content */\n @apply flex items-center gap-2;\n /* Shape */\n @apply cursor-pointer w-full rounded-md;\n}\n\n/* Base Dropdown Item Hover */\n[data-ui='base-dropdown-item']:hover {\n background: var(--background-hover);\n color: var(--foreground-hover);\n}\n\n/* Base Dropdown Item Sizes */\n[data-ui='base-dropdown-item'].sm {\n /* Shape */\n @apply px-3 py-2;\n /* Text size */\n @apply text-sm;\n}\n\n[data-ui='base-dropdown-item'].md {\n /* Shape */\n @apply px-4 py-3;\n /* Text size */\n @apply text-base;\n}\n\n[data-ui='base-dropdown-item'].lg {\n /* Shape */\n @apply px-4 py-3;\n /* Text size */\n @apply text-lg;\n}\n\n/* Left Section */\n[data-ui='base-dropdown-item-left-section'] {\n /* Composition */\n @apply mr-1;\n}\n\n/* Right Section */\n[data-ui='base-dropdown-item-right-section'] {\n /* Composition */\n @apply ml-1;\n}\n","/**\n * TBD: Figure out how to match the behavior (data-scope='dialog') with our styles.\n *\n * For now, we don't have the Modal feature so this can stay here for now.\n */\n[data-scope='dialog'][data-part='backdrop'] {\n /* Position */\n @apply fixed top-0 left-0 bottom-0 w-full z-20;\n /* Background */\n @apply bg-black/40 dark:bg-black/70;\n}\n\n[data-scope='dialog'][data-part='positioner'] {\n /* Position */\n @apply fixed top-0 left-0 bottom-0 w-full z-20;\n /* Content */\n @apply flex items-center justify-center;\n}\n\n[data-scope='dialog'][data-part='content'] {\n /* Background */\n background: var(--background);\n /* Border */\n @apply border;\n border-color: var(--color-border);\n /* Position */\n @apply w-full overflow-hidden shadow-lg;\n /* Shape */\n @apply rounded-xl outline-0;\n}\n\n[data-scope='dialog'][data-part='content'] header {\n /* Content */\n @apply flex items-center justify-end;\n /* Shape */\n @apply pb-4;\n}\n\n[data-scope='dialog'][data-part='description'] {\n /* Content */\n @apply flex items-center justify-center;\n /* Text */\n color: var(--foreground);\n}\n\n[data-scope='dialog'][data-part='close-trigger'] {\n /* Border */\n @apply border;\n border-color: var(--color-border);\n /* Behavior */\n @apply cursor-pointer;\n /* Content */\n @apply flex items-center justify-center;\n /* Text */\n color: var(--foreground);\n}\n\n[data-scope='dialog'][data-part='close-trigger']:hover {\n /* Background */\n background: var(--background-hover);\n /* Text */\n color: var(--foreground-hover);\n}\n\n[data-scope='dialog'][data-part='content'][data-state='open'] {\n animation: anim-scale-in 300ms ease-out;\n}\n\n[data-scope='dialog'][data-part='content'][data-state='closed'] {\n animation: anim-scale-out 200ms ease-in;\n}\n\n/* Responsive Styles */\n\n/* CONTENT */\n[data-scope='dialog'][data-part='content'].sm {\n /* Position */\n @apply max-w-3xs;\n /* Shape */\n @apply p-2 rounded-md;\n}\n\n[data-scope='dialog'][data-part='content'].md {\n /* Position */\n @apply max-w-sm mx-4;\n /* Shape */\n @apply p-2 rounded-lg;\n}\n\n[data-scope='dialog'][data-part='content'].lg {\n /* Position */\n @apply max-w-lg mx-auto;\n /* Shape */\n @apply p-4 rounded-xl;\n}\n\n/* HEADER */\n[data-scope='dialog'][data-part='content'].sm header {\n /* Shape */\n @apply pb-2;\n /* Text */\n @apply text-sm;\n}\n\n[data-scope='dialog'][data-part='content'].md header {\n /* Shape */\n @apply pb-4;\n /* Text */\n @apply text-2xl;\n}\n\n[data-scope='dialog'][data-part='content'].lg header {\n /* Shape */\n @apply pb-4;\n /* Text */\n @apply text-3xl;\n}\n\n/* CLOSE TRIGGER */\n.sm [data-scope='dialog'][data-part='close-trigger'] {\n /* Shape */\n @apply h-6 w-6 rounded-full;\n}\n\n.md [data-scope='dialog'][data-part='close-trigger'] {\n /* Shape */\n @apply h-8 w-8 rounded-full;\n}\n\n.lg [data-scope='dialog'][data-part='close-trigger'] {\n /* Shape */\n @apply h-10 w-10 rounded-full;\n}\n\n/* DESCRIPTION */\n.sm [data-scope='dialog'][data-part='description'] {\n /* Shape */\n @apply pb-2 px-4;\n /* Text */\n @apply text-sm;\n}\n\n.md [data-scope='dialog'][data-part='description'] {\n /* Shape */\n @apply pb-8 px-16;\n /* Text */\n @apply text-2xl;\n}\n\n.lg [data-scope='dialog'][data-part='description'] {\n /* Shape */\n @apply pb-8 px-16;\n /* Text */\n @apply text-3xl;\n}\n\n/* Define the animations */\n@keyframes anim-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes anim-scale-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n","[data-ui='wallet-ui-icon'] {\n /* Border */\n @apply border-0;\n}\n\n[data-ui='wallet-ui-icon'].sm {\n /* Radius */\n @apply rounded-xs;\n /* Shape */\n @apply h-[16px] w-[16px];\n}\n\n[data-ui='wallet-ui-icon'].md {\n /* Radius */\n @apply rounded-md;\n /* Shape */\n @apply h-[24px] w-[24px];\n}\n\n[data-ui='wallet-ui-icon'].lg {\n /* Radius */\n @apply rounded-lg;\n /* Shape */\n @apply h-[32px] w-[32px];\n}\n","[data-ui='wallet-ui-label'] {\n /* Text color */\n color: var(--foreground);\n}\n\n[data-ui='wallet-ui-label'].sm {\n /* Size */\n @apply text-xs;\n /* Weight */\n @apply font-light;\n}\n\n[data-ui='wallet-ui-label'].md {\n /* Size */\n @apply text-base;\n /* Weight */\n @apply font-normal;\n}\n\n[data-ui='wallet-ui-label'].lg {\n /* Size */\n @apply text-xl;\n /* Weight */\n @apply font-semibold;\n}\n","[data-ui='wallet-ui-list-button'] {\n /* Composition */\n @apply flex items-center gap-2;\n /* No wrap */\n @apply whitespace-nowrap;\n /* Behavior */\n @apply cursor-pointer select-none appearance-none disabled:cursor-not-allowed disabled:opacity-50;\n}\n\n[data-ui='wallet-ui-list-button'].hover {\n /* Background */\n background: var(--background-hover);\n}\n\n[data-ui='wallet-ui-list-button'].sm {\n @apply px-1 py-1 rounded-md;\n}\n\n[data-ui='wallet-ui-list-button'].md {\n @apply px-2 py-2 rounded-lg;\n}\n\n[data-ui='wallet-ui-list-button'].lg {\n @apply px-3 py-3 rounded-xl;\n}\n","[data-ui='wallet-ui-list'] {\n @apply flex flex-col;\n}\n\n[data-ui='wallet-ui-list'].sm {\n @apply gap-1;\n}\n\n[data-ui='wallet-ui-list'].md {\n @apply gap-2;\n}\n\n[data-ui='wallet-ui-list'].lg {\n @apply gap-3;\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/wallet-ui-variables.css","../src/wallet-ui-base-button.css","../src/wallet-ui-base-dropdown.css","../src/wallet-ui-base-modal.css","../src/wallet-ui-icon.css","../src/wallet-ui-label.css","../src/wallet-ui-list-button.css","../src/wallet-ui-list.css"],"sourcesContent":["/**\n * These are the variables that are used in the @wallet-ui/tailwind styles.\n *\n * The goal is to make them compatible with the defaults used by Shadcn so it integrates automagically.\n *\n * These styles are compiled by the Tailwind compiler and used in the @wallet-ui/react package.\n */\n@import 'tailwindcss';\n\n:root,\nhtml.light:root,\n[data-theme='light']:root {\n --wu-color-background: var(--color-neutral-50);\n --wu-color-background-hover: var(--color-neutral-100);\n --wu-color-border: var(--color-neutral-200);\n --wu-color-foreground: var(--color-neutral-950);\n --wu-color-foreground-hover: var(--color-neutral-900);\n --wu-color-ring: var(--color-neutral-400);\n}\n\nhtml.dark:root,\n[data-theme='dark']:root {\n --wu-color-background: var(--color-neutral-950);\n --wu-color-background-hover: var(--color-neutral-900);\n --wu-color-border: var(--color-neutral-800);\n --wu-color-foreground: var(--color-neutral-100);\n --wu-color-foreground-hover: var(--color-white);\n --wu-color-ring: var(--color-neutral-500);\n}\n","/**\n * These are the variables that style the BaseButton component.\n *\n * It targets the [data-wu='base-button'] and related [data-wu='base-button-*'] selectors.\n *\n * The colors are coming from the wallet-ui-variables.css file. Other styles are Tailwind CSS.\n */\n\n/* Base Button */\n[data-wu='base-button'] {\n /* Background */\n background: var(--wu-color-background);\n /* Text color */\n color: var(--wu-color-foreground);\n /* Border */\n @apply border;\n border-color: var(--wu-color-border);\n /* Shape */\n @apply rounded-md shadow-sm cursor-pointer;\n /* Composition */\n @apply flex items-center justify-center gap-2 whitespace-nowrap;\n /* Disabled */\n @apply disabled:cursor-not-allowed disabled:opacity-50;\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n /* Text color */\n color: var(--wu-color-foreground-hover);\n }\n\n &:focus {\n /* Outline */\n @apply outline-none;\n /* Box shadow */\n box-shadow: 0 0 0 2px var(--wu-color-ring);\n }\n}\n\n/* Base Button Sizes */\n[data-wu='base-button'].sm {\n /* Shape */\n @apply px-3 py-1.5;\n /* Text size */\n @apply text-sm;\n /* Text weight */\n @apply font-normal;\n}\n\n[data-wu='base-button'].md {\n /* Shape */\n @apply px-4 py-3;\n /* Text size */\n @apply text-base;\n /* Text weight */\n @apply font-semibold;\n}\n\n[data-wu='base-button'].lg {\n /* Shape */\n @apply px-6 py-4;\n /* Text size */\n @apply text-lg;\n /* Text weight */\n @apply font-bold;\n}\n\n/* Left Section Sizes */\n.sm [data-wu='base-button-left-section'] {\n /* Composition */\n @apply mr-1;\n /* Text size */\n @apply text-xs;\n}\n\n.md [data-wu='base-button-left-section'] {\n /* Composition */\n @apply mr-2;\n /* Text size */\n @apply text-sm;\n}\n\n.lg [data-wu='base-button-left-section'] {\n /* Composition */\n @apply mr-4;\n /* Text size */\n @apply text-xl;\n}\n\n/* Right Section Sizes */\n.sm [data-wu='base-button-right-section'] {\n /* Composition */\n @apply ml-1;\n /* Text size */\n @apply text-xs;\n}\n\n.md [data-wu='base-button-right-section'] {\n /* Composition */\n @apply ml-2;\n /* Text size */\n @apply text-sm;\n}\n\n.lg [data-wu='base-button-right-section'] {\n /* Composition */\n @apply ml-4;\n /* Text size */\n @apply text-xl;\n}\n","/**\n * These are the variables that style the BaseDropdown component.\n *\n * It targets the [data-wu='base-dropdown'] and related [data-wu='base-dropdown-*'] selectors.\n *\n * The colors are coming from the wallet-ui-variables.css file. Other styles are Tailwind CSS.\n */\n\n/* Base Dropdown List */\n[data-wu='base-dropdown-list'] {\n /* Background */\n background: var(--wu-color-background);\n /* Border */\n @apply border outline-hidden;\n border-color: var(--wu-color-border);\n /*!* Shape *!*/\n @apply overflow-clip rounded-md p-1;\n}\n\n/* Base Dropdown Item */\n[data-wu='base-dropdown-item'] {\n /* Background */\n background: var(--wu-color-background);\n /* Text color */\n color: var(--wu-color-foreground);\n /* Content */\n @apply flex items-center gap-2;\n /* Shape */\n @apply cursor-pointer w-full rounded-md;\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n /* Text color */\n color: var(--wu-color-foreground-hover);\n }\n}\n\n/* Base Dropdown Item Sizes */\n[data-wu='base-dropdown-item'].sm {\n /* Shape */\n @apply px-3 py-2;\n /* Text size */\n @apply text-sm;\n}\n\n[data-wu='base-dropdown-item'].md {\n /* Shape */\n @apply px-4 py-3;\n /* Text size */\n @apply text-base;\n}\n\n[data-wu='base-dropdown-item'].lg {\n /* Shape */\n @apply px-4 py-3;\n /* Text size */\n @apply text-lg;\n}\n\n/* Left Section */\n.sm [data-wu='base-dropdown-item-left-section'] {\n @apply mr-1;\n}\n\n.md [data-wu='base-dropdown-item-left-section'] {\n @apply mr-2;\n}\n\n.lg [data-wu='base-dropdown-item-left-section'] {\n @apply mr-3;\n}\n\n/* Right Section */\n.sm [data-wu='base-dropdown-item-right-section'] {\n @apply ml-1;\n}\n\n.md [data-wu='base-dropdown-item-right-section'] {\n @apply ml-2;\n}\n\n.lg [data-wu='base-dropdown-item-right-section'] {\n @apply ml-3;\n}\n","/**\n * TBD: Figure out how to match the behavior (data-scope='dialog') with our styles.\n *\n * For now, we don't have the Modal feature so this can stay here for now.\n */\n[data-scope='dialog'][data-part='backdrop'] {\n /* Position */\n @apply fixed top-0 left-0 bottom-0 w-full z-20;\n /* Background */\n @apply bg-black/40 dark:bg-black/70;\n}\n\n[data-scope='dialog'][data-part='positioner'] {\n /* Position */\n @apply fixed top-0 left-0 bottom-0 w-full z-20;\n /* Content */\n @apply flex items-center justify-center;\n}\n\n[data-scope='dialog'][data-part='content'] {\n /* Background */\n background: var(--wu-color-background);\n /* Border */\n @apply border;\n border-color: var(--wu-color-border);\n /* Position */\n @apply w-full overflow-hidden shadow-lg;\n /* Shape */\n @apply rounded-xl outline-0;\n}\n\n[data-scope='dialog'][data-part='content'] header {\n /* Content */\n @apply flex items-center justify-end;\n /* Shape */\n @apply pb-4;\n}\n\n[data-scope='dialog'][data-part='description'] {\n /* Content */\n @apply flex items-center justify-center;\n /* Text */\n color: var(--wu-color-foreground);\n}\n\n[data-scope='dialog'][data-part='close-trigger'] {\n /* Border */\n @apply border;\n border-color: var(--wu-color-border);\n /* Behavior */\n @apply cursor-pointer;\n /* Content */\n @apply flex items-center justify-center;\n /* Text */\n color: var(--wu-color-foreground);\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n /* Text */\n color: var(--wu-color-foreground-hover);\n }\n}\n\n[data-scope='dialog'][data-part='content'][data-state='open'] {\n animation: anim-scale-in 300ms ease-out;\n}\n\n[data-scope='dialog'][data-part='content'][data-state='closed'] {\n animation: anim-scale-out 200ms ease-in;\n}\n\n/* Responsive Styles */\n\n/* CONTENT */\n[data-scope='dialog'][data-part='content'].sm {\n /* Position */\n @apply max-w-xs;\n /* Shape */\n @apply p-2 rounded-md;\n}\n\n[data-scope='dialog'][data-part='content'].md {\n /* Position */\n @apply max-w-sm mx-4;\n /* Shape */\n @apply p-2 rounded-lg;\n}\n\n[data-scope='dialog'][data-part='content'].lg {\n /* Position */\n @apply max-w-lg mx-auto;\n /* Shape */\n @apply p-4 rounded-xl;\n}\n\n/* HEADER */\n[data-scope='dialog'][data-part='content'].sm header {\n /* Shape */\n @apply pb-2;\n /* Text */\n @apply text-sm;\n}\n\n[data-scope='dialog'][data-part='content'].md header {\n /* Shape */\n @apply pb-4;\n /* Text */\n @apply text-2xl;\n}\n\n[data-scope='dialog'][data-part='content'].lg header {\n /* Shape */\n @apply pb-4;\n /* Text */\n @apply text-3xl;\n}\n\n/* CLOSE TRIGGER */\n.sm [data-scope='dialog'][data-part='close-trigger'] {\n /* Shape */\n @apply h-6 w-6 rounded-full;\n}\n\n.md [data-scope='dialog'][data-part='close-trigger'] {\n /* Shape */\n @apply h-8 w-8 rounded-full;\n}\n\n.lg [data-scope='dialog'][data-part='close-trigger'] {\n /* Shape */\n @apply h-10 w-10 rounded-full;\n}\n\n/* DESCRIPTION */\n.sm [data-scope='dialog'][data-part='description'] {\n /* Shape */\n @apply pb-2 px-4;\n /* Text */\n @apply text-sm;\n}\n\n.md [data-scope='dialog'][data-part='description'] {\n /* Shape */\n @apply pb-4 px-4;\n /* Text */\n @apply text-base;\n}\n\n.lg [data-scope='dialog'][data-part='description'] {\n /* Shape */\n @apply pb-6 px-6;\n /* Text */\n @apply text-lg;\n}\n\n/* Define the animations */\n@keyframes anim-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes anim-scale-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n","[data-wu='wallet-ui-icon'] {\n /* Border */\n @apply border-0;\n}\n\n[data-wu='wallet-ui-icon'].sm {\n /* Radius */\n @apply rounded-sm;\n /* Shape */\n @apply h-[16px] w-[16px];\n}\n\n[data-wu='wallet-ui-icon'].md {\n /* Radius */\n @apply rounded-md;\n /* Shape */\n @apply h-[24px] w-[24px];\n}\n\n[data-wu='wallet-ui-icon'].lg {\n /* Radius */\n @apply rounded-lg;\n /* Shape */\n @apply h-[32px] w-[32px];\n}\n","[data-wu='wallet-ui-label'] {\n /* Text color */\n color: var(--wu-color-foreground);\n}\n\n[data-wu='wallet-ui-label'].sm {\n /* Size */\n @apply text-xs;\n /* Weight */\n @apply font-light;\n}\n\n[data-wu='wallet-ui-label'].md {\n /* Size */\n @apply text-base;\n /* Weight */\n @apply font-normal;\n}\n\n[data-wu='wallet-ui-label'].lg {\n /* Size */\n @apply text-xl;\n /* Weight */\n @apply font-semibold;\n}\n","[data-wu='wallet-ui-list-button'] {\n /* Composition */\n @apply flex items-center gap-2;\n /* No wrap */\n @apply whitespace-nowrap;\n /* Behavior */\n @apply cursor-pointer select-none appearance-none disabled:cursor-not-allowed disabled:opacity-50;\n\n &:hover {\n /* Background */\n background: var(--wu-color-background-hover);\n }\n}\n\n[data-wu='wallet-ui-list-button'].sm {\n @apply px-1 py-1 rounded-md;\n}\n\n[data-wu='wallet-ui-list-button'].md {\n @apply px-2 py-2 rounded-lg;\n}\n\n[data-wu='wallet-ui-list-button'].lg {\n @apply px-3 py-3 rounded-xl;\n}\n","[data-wu='wallet-ui-list'] {\n @apply flex flex-col;\n}\n\n[data-wu='wallet-ui-list'].sm {\n @apply gap-1;\n}\n\n[data-wu='wallet-ui-list'].md {\n @apply gap-2;\n}\n\n[data-wu='wallet-ui-list'].lg {\n @apply gap-3;\n}\n"],"mappings":";;;AASA;AACA,IAAI,CAAC,KAAK;AACV,CAAC,iBAAmB;AAChB,yBAAuB,IAAI;AAC3B,+BAA6B,IAAI;AACjC,qBAAmB,IAAI;AACvB,yBAAuB,IAAI;AAC3B,+BAA6B,IAAI;AACjC,mBAAiB,IAAI;AACzB;AAEA,IAAI,CAAC,IAAI;AACT,CAAC,gBAAkB;AACf,yBAAuB,IAAI;AAC3B,+BAA6B,IAAI;AACjC,qBAAmB,IAAI;AACvB,yBAAuB,IAAI;AAC3B,+BAA6B,IAAI;AACjC,mBAAiB,IAAI;AACzB;;;ACnBA,CAAC;AAEG,cAAY,IAAI;AAEhB,SAAO,IAAI;AAEX,SAAO;AACP,gBAAc,IAAI;AAElB,SAAO,WAAW,UAAU;AAE5B,SAAO,KAAK,aAAa,eAAe,MAAM;AAE9C,SAAO,QAAQ,CAAC,mBAAmB,QAAQ,CAAC;AAE5C,GAAC;AAEG,gBAAY,IAAI;AAEhB,WAAO,IAAI;AACf;AAEA,GAAC;AAEG,WAAO;AAEP,gBAAY,EAAE,EAAE,EAAE,IAAI,IAAI;AAC9B;AACJ;AAGA,CAAC,oBAAsB,CAAC;AAEpB,SAAO,KAAK,IAAI;AAEhB,SAAO;AAEP,SAAO;AACX;AAEA,CAAC,oBAAsB,CAAC;AAEpB,SAAO,KAAK;AAEZ,SAAO;AAEP,SAAO;AACX;AAEA,CAAC,oBAAsB,CAAC;AAEpB,SAAO,KAAK;AAEZ,SAAO;AAEP,SAAO;AACX;AAGA,CA5BwB,GA4BpB,CAAC;AAED,SAAO;AAEP,SAAO;AACX;AAEA,CA1BwB,GA0BpB,CAAC;AAED,SAAO;AAEP,SAAO;AACX;AAEA,CAxBwB,GAwBpB,CAAC;AAED,SAAO;AAEP,SAAO;AACX;AAGA,CAlDwB,GAkDpB,CAAC;AAED,SAAO;AAEP,SAAO;AACX;AAEA,CAhDwB,GAgDpB,CAAC;AAED,SAAO;AAEP,SAAO;AACX;AAEA,CA9CwB,GA8CpB,CAAC;AAED,SAAO;AAEP,SAAO;AACX;;;ACpGA,CAAC;AAEG,cAAY,IAAI;AAEhB,SAAO,OAAO;AACd,gBAAc,IAAI;AAElB,SAAO,cAAc,WAAW;AACpC;AAGA,CAAC;AAEG,cAAY,IAAI;AAEhB,SAAO,IAAI;AAEX,SAAO,KAAK,aAAa;AAEzB,SAAO,eAAe,OAAO;AAE7B,GAAC;AAEG,gBAAY,IAAI;AAEhB,WAAO,IAAI;AACf;AACJ;AAGA,CAAC,2BAA6B,CAAC;AAE3B,SAAO,KAAK;AAEZ,SAAO;AACX;AAEA,CAAC,2BAA6B,CAAC;AAE3B,SAAO,KAAK;AAEZ,SAAO;AACX;AAEA,CAAC,2BAA6B,CAAC;AAE3B,SAAO,KAAK;AAEZ,SAAO;AACX;AAGA,CAtB+B,GAsB3B,CAAC;AACD,SAAO;AACX;AAEA,CAnB+B,GAmB3B,CAAC;AACD,SAAO;AACX;AAEA,CAhB+B,GAgB3B,CAAC;AACD,SAAO;AACX;AAGA,CAnC+B,GAmC3B,CAAC;AACD,SAAO;AACX;AAEA,CAhC+B,GAgC3B,CAAC;AACD,SAAO;AACX;AAEA,CA7B+B,GA6B3B,CAAC;AACD,SAAO;AACX;;;AC/EA,CAAC,kBAAoB,CAAC;AAElB,SAAO,MAAM,MAAM,OAAO,SAAS,OAAO;AAE1C,SAAO,QAAQ,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;AACrC;AAEA,CAAC,kBAAoB,CAAC;AAElB,SAAO,MAAM,MAAM,OAAO,SAAS,OAAO;AAE1C,SAAO,KAAK,aAAa;AAC7B;AAEA,CAAC,kBAAoB,CAAC;AAElB,cAAY,IAAI;AAEhB,SAAO;AACP,gBAAc,IAAI;AAElB,SAAO,OAAO,gBAAgB;AAE9B,SAAO,WAAW;AACtB;AAEA,CAAC,kBAAoB,CAAC,mBAAqB;AAEvC,SAAO,KAAK,aAAa;AAEzB,SAAO;AACX;AAEA,CAAC,kBAAoB,CAAC;AAElB,SAAO,KAAK,aAAa;AAEzB,SAAO,IAAI;AACf;AAEA,CAAC,kBAAoB,CAAC;AAElB,SAAO;AACP,gBAAc,IAAI;AAElB,SAAO;AAEP,SAAO,KAAK,aAAa;AAEzB,SAAO,IAAI;AAEX,GAAC;AAEG,gBAAY,IAAI;AAEhB,WAAO,IAAI;AACf;AACJ;AAEA,CAAC,kBAAoB,CAAC,kBAAoB,CAAC;AACvC,aAAW,cAAc,MAAM;AACnC;AAEA,CAAC,kBAAoB,CAAC,kBAAoB,CAAC;AACvC,aAAW,eAAe,MAAM;AACpC;AAKA,CAAC,kBAAoB,CAAC,kBAAoB,CAAC;AAEvC,SAAO;AAEP,SAAO,IAAI;AACf;AAEA,CAAC,kBAAoB,CAAC,kBAAoB,CAAC;AAEvC,SAAO,SAAS;AAEhB,SAAO,IAAI;AACf;AAEA,CAAC,kBAAoB,CAAC,kBAAoB,CAAC;AAEvC,SAAO,SAAS;AAEhB,SAAO,IAAI;AACf;AAGA,CAAC,kBAAoB,CAAC,kBAAoB,CAtBC,GAsBG;AAE1C,SAAO;AAEP,SAAO;AACX;AAEA,CAAC,kBAAoB,CAAC,kBAAoB,CAtBC,GAsBG;AAE1C,SAAO;AAEP,SAAO;AACX;AAEA,CAAC,kBAAoB,CAAC,kBAAoB,CAtBC,GAsBG;AAE1C,SAAO;AAEP,SAAO;AACX;AAGA,CA5C2C,GA4CvC,CAAC,kBAAoB,CAAC;AAEtB,SAAO,IAAI,IAAI;AACnB;AAEA,CA1C2C,GA0CvC,CAAC,kBAAoB,CAAC;AAEtB,SAAO,IAAI,IAAI;AACnB;AAEA,CAxC2C,GAwCvC,CAAC,kBAAoB,CAAC;AAEtB,SAAO,KAAK,KAAK;AACrB;AAGA,CA5D2C,GA4DvC,CAAC,kBAAoB,CAAC;AAEtB,SAAO,KAAK;AAEZ,SAAO;AACX;AAEA,CA5D2C,GA4DvC,CAAC,kBAAoB,CAAC;AAEtB,SAAO,KAAK;AAEZ,SAAO;AACX;AAEA,CA5D2C,GA4DvC,CAAC,kBAAoB,CAAC;AAEtB,SAAO,KAAK;AAEZ,SAAO;AACX;AAGA,WA5Fe;AA6FX;AACI,aAAS;AACT,eAAW,MAAM;AACrB;AACA;AACI,aAAS;AACT,eAAW,MAAM;AACrB;AACJ;AAEA,WAnGe;AAoGX;AACI,aAAS;AACT,eAAW,MAAM;AACrB;AACA;AACI,aAAS;AACT,eAAW,MAAM;AACrB;AACJ;;;ACjLA,CAAC;AAEG,SAAO;AACX;AAEA,CAAC,uBAAyB,CAAC;AAEvB,SAAO;AAEP,SAAO,EAAE,CAAC,MAAM,EAAE,CAAC;AACvB;AAEA,CAAC,uBAAyB,CAAC;AAEvB,SAAO;AAEP,SAAO,EAAE,CAAC,MAAM,EAAE,CAAC;AACvB;AAEA,CAAC,uBAAyB,CAAC;AAEvB,SAAO;AAEP,SAAO,EAAE,CAAC,MAAM,EAAE,CAAC;AACvB;;;ACxBA,CAAC;AAEG,SAAO,IAAI;AACf;AAEA,CAAC,wBAA0B,CAAC;AAExB,SAAO;AAEP,SAAO;AACX;AAEA,CAAC,wBAA0B,CAAC;AAExB,SAAO;AAEP,SAAO;AACX;AAEA,CAAC,wBAA0B,CAAC;AAExB,SAAO;AAEP,SAAO;AACX;;;ACxBA,CAAC;AAEG,SAAO,KAAK,aAAa;AAEzB,SAAO;AAEP,SAAO,eAAe,YAAY,gBAAgB,QAAQ,CAAC,mBAAmB,QAAQ,CAAC;AAEvF,GAAC;AAEG,gBAAY,IAAI;AACpB;AACJ;AAEA,CAAC,8BAAgC,CAAC;AAC9B,SAAO,KAAK,KAAK;AACrB;AAEA,CAAC,8BAAgC,CAAC;AAC9B,SAAO,KAAK,KAAK;AACrB;AAEA,CAAC,8BAAgC,CAAC;AAC9B,SAAO,KAAK,KAAK;AACrB;;;ACxBA,CAAC;AACG,SAAO,KAAK;AAChB;AAEA,CAAC,uBAAyB,CAAC;AACvB,SAAO;AACX;AAEA,CAAC,uBAAyB,CAAC;AACvB,SAAO;AACX;AAEA,CAAC,uBAAyB,CAAC;AACvB,SAAO;AACX;","names":[]}
|