@wallet-ui/react 1.1.0-canary-20250412011829 → 1.1.0-canary-20250415022403

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 (18) hide show
  1. package/dist/index.browser.cjs +56 -46
  2. package/dist/index.browser.cjs.map +1 -1
  3. package/dist/index.browser.mjs +56 -46
  4. package/dist/index.browser.mjs.map +1 -1
  5. package/dist/index.css +326 -425
  6. package/dist/index.css.map +1 -1
  7. package/dist/index.native.mjs +56 -46
  8. package/dist/index.native.mjs.map +1 -1
  9. package/dist/index.node.cjs +56 -46
  10. package/dist/index.node.cjs.map +1 -1
  11. package/dist/index.node.mjs +56 -46
  12. package/dist/index.node.mjs.map +1 -1
  13. package/dist/types/base-dropdown.d.ts +3 -1
  14. package/dist/types/base-dropdown.d.ts.map +1 -1
  15. package/dist/types/use-wallet-ui-dropdown.d.ts.map +1 -1
  16. package/dist/types/wallet-ui-icon.d.ts.map +1 -1
  17. package/dist/types/wallet-ui-list-button.d.ts.map +1 -1
  18. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -1,544 +1,444 @@
1
1
  /* src/index.css */
2
- .wallet-ui-debug {
3
- border: 1px solid red;
4
- }
5
- :root {
6
- --padding-x: 1rem;
7
- --padding-y: 0.5rem;
8
- --border-radius: 0.375rem;
9
- --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
10
- --border-color-light: #edf2f7;
11
- --border-color-dark: #4a5568;
12
- --bg-color-light: #f7fafc;
13
- --bg-color-dark: #4a5568;
14
- --text-color-light: #4a5568;
15
- --text-color-dark: #edf2f7;
16
- --spacing: 0.25rem;
17
- --radius-xs: 0.125rem;
18
- --radius-sm: 0.375rem;
19
- --radius-md: 0.375rem;
20
- --radius-lg: 0.5rem;
21
- --radius-xl: 0.75rem;
22
- --color-black: #000;
23
- --color-gray-100: rgba(0, 0, 0, 0.1);
24
- --color-gray-200: rgba(0, 0, 0, 0.2);
25
- --color-gray-400: rgba(0, 0, 0, 0.4);
26
- --color-gray-500: rgba(0, 0, 0, 0.5);
27
- --color-gray-600: rgba(0, 0, 0, 0.6);
28
- --color-gray-700: rgba(0, 0, 0, 0.7);
29
- --color-gray-800: rgba(0, 0, 0, 0.8);
30
- --color-gray-900: rgba(0, 0, 0, 0.9);
31
- --color-white: #fff;
32
- --text-xs: 0.75rem;
33
- --text-sm: 0.875rem;
34
- --text-base: 1rem;
35
- --text-lg: 1.125rem;
36
- --text-xl: 1.25rem;
37
- --text-2xl: 1.5rem;
38
- --text-3xl: 1.875rem;
39
- --tw-font-weight-normal: 400;
40
- --tw-font-weight-semibold: 600;
41
- --tw-font-weight-bold: 700;
42
- --font-weight-light: 300;
43
- --font-weight-semibold: 600;
44
- --font-weight-bold: 700;
45
- --font-weight-normal: 400;
46
- --tw-leading: 1;
47
- --text-base--line-height: calc(1.5 / 1);
48
- --text-lg--line-height: calc(1.75 / 1.125);
49
- --text-xl--line-height: calc(1.75 / 1.25);
50
- --text-2xl--line-height: calc(2 / 1.5);
51
- --text-3xl--line-height: calc(2.25 / 1.875);
52
- --text-xs--line-height: calc(1 / 0.75);
53
- --text-sm--line-height: calc(1.25 / 0.875);
54
- --container-3xs: 16rem;
55
- --container-sm: 24rem;
56
- --container-lg: 32rem;
57
- }
58
- .wallet-ui-base-button {
59
- padding: var(--padding-y) var(--padding-x);
60
- border-radius: var(--border-radius);
61
- box-shadow: var(--box-shadow);
62
- border: 1px solid var(--border-color-light);
63
- background-color: var(--bg-color-light);
64
- color: var(--text-color-light);
65
- }
66
- @media (prefers-color-scheme: dark) {
67
- .wallet-ui-base-button {
68
- border-color: var(--border-color-dark);
69
- background-color: var(--bg-color-dark);
70
- color: var(--text-color-dark);
2
+ @layer theme, base, components, utilities;
3
+ @layer theme {
4
+ :root,
5
+ :host {
6
+ --color-neutral-50: oklch(0.985 0 0);
7
+ --color-neutral-100: oklch(0.97 0 0);
8
+ --color-neutral-200: oklch(0.922 0 0);
9
+ --color-neutral-400: oklch(0.708 0 0);
10
+ --color-neutral-500: oklch(0.556 0 0);
11
+ --color-neutral-800: oklch(0.269 0 0);
12
+ --color-neutral-900: oklch(0.205 0 0);
13
+ --color-neutral-950: oklch(0.145 0 0);
14
+ --color-black: #000;
15
+ --color-white: #fff;
16
+ --spacing: 0.25rem;
17
+ --container-3xs: 16rem;
18
+ --container-sm: 24rem;
19
+ --container-lg: 32rem;
20
+ --text-xs: 0.75rem;
21
+ --text-xs--line-height: calc(1 / 0.75);
22
+ --text-sm: 0.875rem;
23
+ --text-sm--line-height: calc(1.25 / 0.875);
24
+ --text-base: 1rem;
25
+ --text-base--line-height: calc(1.5 / 1);
26
+ --text-lg: 1.125rem;
27
+ --text-lg--line-height: calc(1.75 / 1.125);
28
+ --text-xl: 1.25rem;
29
+ --text-xl--line-height: calc(1.75 / 1.25);
30
+ --text-2xl: 1.5rem;
31
+ --text-2xl--line-height: calc(2 / 1.5);
32
+ --text-3xl: 1.875rem;
33
+ --text-3xl--line-height: calc(2.25 / 1.875);
34
+ --font-weight-light: 300;
35
+ --font-weight-normal: 400;
36
+ --font-weight-semibold: 600;
37
+ --font-weight-bold: 700;
38
+ --radius-xs: 0.125rem;
39
+ --radius-md: 0.375rem;
40
+ --radius-lg: 0.5rem;
41
+ --radius-xl: 0.75rem;
42
+ --color-border: var(--border);
43
+ --tw-leading: var(--text-base--line-height);
71
44
  }
72
45
  }
73
- .wallet-ui-base-button {
74
- background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
75
- color: var(--color-gray-800, oklch(0.278 0.033 256.848));
46
+ @layer utilities;
47
+ :root,
48
+ html.light:root,
49
+ [data-theme=light]:root {
50
+ --background: var(--color-neutral-50);
51
+ --background-hover: var(--color-neutral-100);
52
+ --border: var(--color-neutral-200);
53
+ --foreground: var(--color-neutral-950);
54
+ --foreground-hover: var(--color-neutral-900);
55
+ --primary-foreground: var(--color-neutral-100);
56
+ --primary: var(--color-neutral-950);
57
+ --ring: var(--color-neutral-400);
58
+ }
59
+ html.dark:root,
60
+ [data-theme=dark]:root {
61
+ --background: var(--color-neutral-950);
62
+ --background-hover: var(--color-neutral-900);
63
+ --border: var(--color-neutral-800);
64
+ --foreground: var(--color-neutral-100);
65
+ --foreground-hover: var(--color-white);
66
+ --primary-foreground: var(--color-neutral-950);
67
+ --primary: var(--color-neutral-100);
68
+ --ring: var(--color-neutral-500);
69
+ }
70
+ [data-ui=base-button] {
71
+ background: var(--background);
72
+ color: var(--foreground);
76
73
  border-style: var(--tw-border-style);
77
74
  border-width: 1px;
78
- border-color: var(--color-gray-200, oklch(0.928 0.006 264.531));
75
+ border-color: var(--color-border);
79
76
  cursor: pointer;
80
- border-radius: var(--radius-md, 0.375rem);
81
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
77
+ border-radius: var(--radius-md);
78
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
82
79
  box-shadow:
83
80
  var(--tw-inset-shadow),
84
81
  var(--tw-inset-ring-shadow),
85
82
  var(--tw-ring-offset-shadow),
86
83
  var(--tw-ring-shadow),
87
84
  var(--tw-shadow);
88
- justify-content: center;
85
+ display: flex;
89
86
  align-items: center;
90
- gap: calc(var(--spacing, 0.25rem) * 2);
87
+ justify-content: center;
88
+ gap: calc(var(--spacing) * 2);
91
89
  white-space: nowrap;
92
- display: flex;
93
- }
94
- @media (hover: hover) {
95
- .wallet-ui-base-button:hover {
96
- background-color: var(--color-gray-200, oklch(0.928 0.006 264.531));
97
- }
98
- }
99
- @media (prefers-color-scheme: dark) {
100
- .wallet-ui-base-button {
101
- background-color: var(--color-gray-800, oklch(0.278 0.033 256.848));
102
- }
103
- @media (hover: hover) {
104
- .wallet-ui-base-button:hover {
105
- background-color: var(--color-gray-700, oklch(0.373 0.034 259.733));
106
- }
90
+ &:disabled {
91
+ cursor: not-allowed;
107
92
  }
108
- }
109
- @media (hover: hover) {
110
- .wallet-ui-base-button:hover {
111
- color: var(--color-gray-900, oklch(0.21 0.034 264.665));
112
- }
113
- }
114
- @media (prefers-color-scheme: dark) {
115
- .wallet-ui-base-button {
116
- color: var(--color-gray-200, oklch(0.928 0.006 264.531));
117
- }
118
- @media (hover: hover) {
119
- .wallet-ui-base-button:hover {
120
- color: var(--color-white, #fff);
121
- }
122
- }
123
- .wallet-ui-base-button {
124
- border-color: var(--color-gray-700, oklch(0.373 0.034 259.733));
93
+ &:disabled {
94
+ opacity: 50%;
125
95
  }
126
96
  }
127
- .wallet-ui-base-button:disabled {
128
- cursor: not-allowed;
129
- opacity: 0.5;
130
- }
131
- .wallet-ui-base-button.sm {
132
- padding-inline: calc(var(--spacing, 0.25rem) * 3);
133
- padding-block: calc(var(--spacing, 0.25rem) * 1.5);
134
- font-size: var(--text-sm, 0.875rem);
135
- line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
136
- --tw-font-weight: var(--font-weight-normal, 400);
137
- font-weight: var(--font-weight-normal, 400);
138
- }
139
- .wallet-ui-base-button.md {
140
- padding-inline: calc(var(--spacing, 0.25rem) * 4);
141
- padding-block: calc(var(--spacing, 0.25rem) * 3);
142
- font-size: var(--text-base, 1rem);
143
- line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
144
- --tw-font-weight: var(--font-weight-semibold, 600);
145
- font-weight: var(--font-weight-semibold, 600);
146
- }
147
- .wallet-ui-base-button.lg {
148
- padding-inline: calc(var(--spacing, 0.25rem) * 6);
149
- padding-block: calc(var(--spacing, 0.25rem) * 4);
150
- font-size: var(--text-lg, 1.125rem);
151
- line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
152
- --tw-font-weight: var(--font-weight-bold, 700);
153
- font-weight: var(--font-weight-bold, 700);
154
- }
155
- .sm .wallet-ui-base-button-left-section {
156
- margin-right: calc(var(--spacing, 0.25rem) * 1);
157
- font-size: var(--text-xs, 0.75rem);
158
- line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
159
- }
160
- .md .wallet-ui-base-button-left-section {
161
- margin-right: calc(var(--spacing, 0.25rem) * 2);
162
- font-size: var(--text-sm, 0.875rem);
163
- line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
164
- }
165
- .lg .wallet-ui-base-button-left-section {
166
- margin-right: calc(var(--spacing, 0.25rem) * 4);
167
- font-size: var(--text-xl, 1.25rem);
168
- line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
169
- }
170
- .sm .wallet-ui-base-button-right-section {
171
- margin-left: calc(var(--spacing, 0.25rem) * 1);
172
- font-size: var(--text-xs, 0.75rem);
173
- line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
174
- }
175
- .md .wallet-ui-base-button-right-section {
176
- margin-left: calc(var(--spacing, 0.25rem) * 2);
177
- font-size: var(--text-sm, 0.875rem);
178
- line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
179
- }
180
- .lg .wallet-ui-base-button-right-section {
181
- margin-left: calc(var(--spacing, 0.25rem) * 4);
182
- font-size: var(--text-xl, 1.25rem);
183
- line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
184
- }
185
- .wallet-ui-base-dropdown-list {
186
- background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
97
+ [data-ui=base-button]:hover {
98
+ background: var(--background-hover);
99
+ color: var(--foreground-hover);
100
+ }
101
+ [data-ui=base-button].sm {
102
+ padding-inline: calc(var(--spacing) * 3);
103
+ padding-block: calc(var(--spacing) * 1.5);
104
+ font-size: var(--text-sm);
105
+ line-height: var(--tw-leading, var(--text-sm--line-height));
106
+ --tw-font-weight: var(--font-weight-normal);
107
+ font-weight: var(--font-weight-normal);
108
+ }
109
+ [data-ui=base-button].md {
110
+ padding-inline: calc(var(--spacing) * 4);
111
+ padding-block: calc(var(--spacing) * 3);
112
+ font-size: var(--text-base);
113
+ line-height: var(--tw-leading, var(--text-base--line-height));
114
+ --tw-font-weight: var(--font-weight-semibold);
115
+ font-weight: var(--font-weight-semibold);
116
+ }
117
+ [data-ui=base-button].lg {
118
+ padding-inline: calc(var(--spacing) * 6);
119
+ padding-block: calc(var(--spacing) * 4);
120
+ font-size: var(--text-lg);
121
+ line-height: var(--tw-leading, var(--text-lg--line-height));
122
+ --tw-font-weight: var(--font-weight-bold);
123
+ font-weight: var(--font-weight-bold);
124
+ }
125
+ .sm [data-ui=base-button-left-section] {
126
+ margin-right: calc(var(--spacing) * 1);
127
+ font-size: var(--text-xs);
128
+ line-height: var(--tw-leading, var(--text-xs--line-height));
129
+ }
130
+ .md [data-ui=base-button-left-section] {
131
+ margin-right: calc(var(--spacing) * 2);
132
+ font-size: var(--text-sm);
133
+ line-height: var(--tw-leading, var(--text-sm--line-height));
134
+ }
135
+ .lg [data-ui=base-button-left-section] {
136
+ margin-right: calc(var(--spacing) * 4);
137
+ font-size: var(--text-xl);
138
+ line-height: var(--tw-leading, var(--text-xl--line-height));
139
+ }
140
+ .sm [data-ui=base-button-right-section] {
141
+ margin-left: calc(var(--spacing) * 1);
142
+ font-size: var(--text-xs);
143
+ line-height: var(--tw-leading, var(--text-xs--line-height));
144
+ }
145
+ .md [data-ui=base-button-right-section] {
146
+ margin-left: calc(var(--spacing) * 2);
147
+ font-size: var(--text-sm);
148
+ line-height: var(--tw-leading, var(--text-sm--line-height));
149
+ }
150
+ .lg [data-ui=base-button-right-section] {
151
+ margin-left: calc(var(--spacing) * 4);
152
+ font-size: var(--text-xl);
153
+ line-height: var(--tw-leading, var(--text-xl--line-height));
154
+ }
155
+ [data-ui=base-dropdown-list] {
156
+ background: var(--background);
187
157
  border-style: var(--tw-border-style);
188
158
  border-width: 1px;
189
- border-color: var(--color-gray-200, oklch(0.928 0.006 264.531));
190
- border-radius: var(--radius-md, 0.375rem);
191
- }
192
- @media (prefers-color-scheme: dark) {
193
- .wallet-ui-base-dropdown-list {
194
- background-color: var(--color-gray-800, oklch(0.278 0.033 256.848));
195
- border-color: var(--color-gray-700, oklch(0.373 0.034 259.733));
196
- }
159
+ border-color: var(--color-border);
160
+ border-radius: var(--radius-md);
197
161
  }
198
- .wallet-ui-base-dropdown-item {
162
+ [data-ui=base-dropdown-item] {
163
+ background: var(--background);
164
+ color: var(--foreground);
165
+ display: flex;
199
166
  align-items: center;
200
- gap: calc(var(--spacing, 0.25rem) * 2);
201
- background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
202
- color: var(--color-gray-800, oklch(0.278 0.033 256.848));
203
- padding-inline: calc(var(--spacing, 0.25rem) * 4);
204
- padding-block: calc(var(--spacing, 0.25rem) * 2);
167
+ gap: calc(var(--spacing) * 2);
205
168
  cursor: pointer;
206
- display: flex;
207
169
  }
208
- @media (hover: hover) {
209
- .wallet-ui-base-dropdown-item:hover {
210
- background-color: var(--color-gray-200, oklch(0.928 0.006 264.531));
211
- }
170
+ [data-ui=base-dropdown-item]:hover {
171
+ background: var(--background-hover);
172
+ color: var(--foreground-hover);
212
173
  }
213
- @media (prefers-color-scheme: dark) {
214
- .wallet-ui-base-dropdown-item {
215
- background-color: var(--color-gray-800, oklch(0.278 0.033 256.848));
216
- }
217
- @media (hover: hover) {
218
- .wallet-ui-base-dropdown-item:hover {
219
- background-color: var(--color-gray-700, oklch(0.373 0.034 259.733));
220
- }
221
- }
174
+ [data-ui=base-dropdown-item].sm {
175
+ padding-inline: calc(var(--spacing) * 3);
176
+ padding-block: calc(var(--spacing) * 2);
177
+ font-size: var(--text-sm);
178
+ line-height: var(--tw-leading, var(--text-sm--line-height));
222
179
  }
223
- @media (hover: hover) {
224
- .wallet-ui-base-dropdown-item:hover {
225
- color: var(--color-gray-900, oklch(0.21 0.034 264.665));
226
- }
180
+ [data-ui=base-dropdown-item].md {
181
+ padding-inline: calc(var(--spacing) * 4);
182
+ padding-block: calc(var(--spacing) * 3);
183
+ font-size: var(--text-base);
184
+ line-height: var(--tw-leading, var(--text-base--line-height));
227
185
  }
228
- @media (prefers-color-scheme: dark) {
229
- .wallet-ui-base-dropdown-item {
230
- color: var(--color-gray-200, oklch(0.928 0.006 264.531));
231
- }
232
- @media (hover: hover) {
233
- .wallet-ui-base-dropdown-item:hover {
234
- color: var(--color-white, #fff);
235
- }
236
- }
186
+ [data-ui=base-dropdown-item].lg {
187
+ padding-inline: calc(var(--spacing) * 4);
188
+ padding-block: calc(var(--spacing) * 3);
189
+ font-size: var(--text-lg);
190
+ line-height: var(--tw-leading, var(--text-lg--line-height));
237
191
  }
238
- .wallet-ui-base-dropdown-item-left-section {
239
- margin-right: calc(var(--spacing, 0.25rem) * 1);
192
+ [data-ui=base-dropdown-item-left-section] {
193
+ margin-right: calc(var(--spacing) * 1);
240
194
  }
241
- .wallet-ui-base-dropdown-item-right-section {
242
- margin-left: calc(var(--spacing, 0.25rem) * 1);
195
+ [data-ui=base-dropdown-item-right-section] {
196
+ margin-left: calc(var(--spacing) * 1);
243
197
  }
244
198
  [data-scope=dialog][data-part=backdrop] {
245
- top: calc(var(--spacing, 0.25rem) * 0);
246
- bottom: calc(var(--spacing, 0.25rem) * 0);
247
- left: calc(var(--spacing, 0.25rem) * 0);
199
+ position: fixed;
200
+ top: calc(var(--spacing) * 0);
201
+ bottom: calc(var(--spacing) * 0);
202
+ left: calc(var(--spacing) * 0);
248
203
  z-index: 20;
249
- background-color: color-mix(in oklab, var(--color-black, #000) 40%, transparent);
250
204
  width: 100%;
251
- position: fixed;
252
- }
253
- @media (prefers-color-scheme: dark) {
254
- [data-scope=dialog][data-part=backdrop] {
255
- background-color: color-mix(in oklab, var(--color-black, #000) 70%, transparent);
205
+ background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
206
+ @media (prefers-color-scheme: dark) {
207
+ background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
256
208
  }
257
209
  }
258
210
  [data-scope=dialog][data-part=positioner] {
259
- top: calc(var(--spacing, 0.25rem) * 0);
260
- bottom: calc(var(--spacing, 0.25rem) * 0);
261
- left: calc(var(--spacing, 0.25rem) * 0);
211
+ position: fixed;
212
+ top: calc(var(--spacing) * 0);
213
+ bottom: calc(var(--spacing) * 0);
214
+ left: calc(var(--spacing) * 0);
262
215
  z-index: 20;
263
- justify-content: center;
264
- align-items: center;
265
216
  width: 100%;
266
217
  display: flex;
267
- position: fixed;
218
+ align-items: center;
219
+ justify-content: center;
268
220
  }
269
221
  [data-scope=dialog][data-part=content] {
270
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
222
+ background: var(--background);
223
+ border-style: var(--tw-border-style);
224
+ border-width: 1px;
225
+ border-color: var(--color-border);
271
226
  width: 100%;
227
+ overflow: hidden;
228
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
272
229
  box-shadow:
273
230
  var(--tw-inset-shadow),
274
231
  var(--tw-inset-ring-shadow),
275
232
  var(--tw-ring-offset-shadow),
276
233
  var(--tw-ring-shadow),
277
234
  var(--tw-shadow);
278
- background-color: var(--color-white, #fff);
279
- border-style: var(--tw-border-style);
280
- border-width: 1px;
281
- border-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
282
- border-radius: var(--radius-xl, 0.75rem);
235
+ border-radius: var(--radius-xl);
283
236
  outline-style: var(--tw-outline-style);
284
- outline-width: 0;
285
- overflow: hidden;
286
- }
287
- @media (prefers-color-scheme: dark) {
288
- [data-scope=dialog][data-part=content] {
289
- background-color: var(--color-gray-900, oklch(0.21 0.034 264.665));
290
- border-color: var(--color-gray-900, oklch(0.21 0.034 264.665));
291
- }
237
+ outline-width: 0px;
292
238
  }
293
239
  [data-scope=dialog][data-part=content] header {
294
- padding-bottom: calc(var(--spacing, 0.25rem) * 4);
295
- justify-content: flex-end;
296
- align-items: center;
297
240
  display: flex;
241
+ align-items: center;
242
+ justify-content: flex-end;
243
+ padding-bottom: calc(var(--spacing) * 4);
298
244
  }
299
245
  [data-scope=dialog][data-part=description] {
300
- text-align: center;
301
- color: var(--color-gray-900, oklch(0.21 0.034 264.665));
302
- justify-content: center;
303
- align-items: center;
304
246
  display: flex;
305
- }
306
- @media (prefers-color-scheme: dark) {
307
- [data-scope=dialog][data-part=description] {
308
- color: var(--color-gray-200, oklch(0.928 0.006 264.531));
309
- }
247
+ align-items: center;
248
+ justify-content: center;
249
+ color: var(--foreground);
310
250
  }
311
251
  [data-scope=dialog][data-part=close-trigger] {
312
252
  border-style: var(--tw-border-style);
313
253
  border-width: 1px;
314
- border-color: color-mix(in oklab, var(--color-gray-500, oklch(0.551 0.027 264.364)) 40%, transparent);
254
+ border-color: var(--color-border);
315
255
  cursor: pointer;
316
- color: var(--color-gray-700, oklch(0.373 0.034 259.733));
317
- justify-content: center;
318
- align-items: center;
319
256
  display: flex;
257
+ align-items: center;
258
+ justify-content: center;
259
+ color: var(--foreground);
320
260
  }
321
- @media (prefers-color-scheme: dark) {
322
- [data-scope=dialog][data-part=close-trigger] {
323
- border-color: color-mix(in oklab, var(--color-gray-600, oklch(0.446 0.03 256.802)) 40%, transparent);
324
- }
325
- }
326
- @media (hover: hover) {
327
- [data-scope=dialog][data-part=close-trigger]:hover {
328
- background-color: color-mix(in oklab, var(--color-gray-500, oklch(0.551 0.027 264.364)) 40%, transparent);
329
- }
330
- }
331
- @media (prefers-color-scheme: dark) {
332
- @media (hover: hover) {
333
- [data-scope=dialog][data-part=close-trigger]:hover {
334
- background-color: color-mix(in oklab, var(--color-gray-600, oklch(0.446 0.03 256.802)) 40%, transparent);
335
- }
336
- }
337
- }
338
- @media (hover: hover) {
339
- [data-scope=dialog][data-part=close-trigger]:hover {
340
- color: var(--color-gray-900, oklch(0.21 0.034 264.665));
341
- }
342
- }
343
- @media (prefers-color-scheme: dark) {
344
- [data-scope=dialog][data-part=close-trigger] {
345
- color: var(--color-gray-400, oklch(0.707 0.022 261.325));
346
- }
347
- @media (hover: hover) {
348
- [data-scope=dialog][data-part=close-trigger]:hover {
349
- color: var(--color-white, #fff);
350
- }
351
- }
261
+ [data-scope=dialog][data-part=close-trigger]:hover {
262
+ background: var(--background-hover);
263
+ color: var(--foreground-hover);
352
264
  }
353
265
  [data-scope=dialog][data-part=content][data-state=open] {
354
- animation: 0.3s ease-out anim-scale-in;
266
+ animation: anim-scale-in 300ms ease-out;
355
267
  }
356
268
  [data-scope=dialog][data-part=content][data-state=closed] {
357
- animation: 0.2s ease-in anim-scale-out;
269
+ animation: anim-scale-out 200ms ease-in;
358
270
  }
359
271
  [data-scope=dialog][data-part=content].sm {
360
- max-width: var(--container-3xs, 16rem);
361
- border-radius: var(--radius-md, 0.375rem);
362
- padding: calc(var(--spacing, 0.25rem) * 2);
272
+ max-width: var(--container-3xs);
273
+ border-radius: var(--radius-md);
274
+ padding: calc(var(--spacing) * 2);
363
275
  }
364
276
  [data-scope=dialog][data-part=content].md {
365
- margin-inline: calc(var(--spacing, 0.25rem) * 4);
366
- max-width: var(--container-sm, 24rem);
367
- border-radius: var(--radius-lg, 0.5rem);
368
- padding: calc(var(--spacing, 0.25rem) * 2);
277
+ margin-inline: calc(var(--spacing) * 4);
278
+ max-width: var(--container-sm);
279
+ border-radius: var(--radius-lg);
280
+ padding: calc(var(--spacing) * 2);
369
281
  }
370
282
  [data-scope=dialog][data-part=content].lg {
371
- max-width: var(--container-lg, 32rem);
372
- border-radius: var(--radius-xl, 0.75rem);
373
- padding: calc(var(--spacing, 0.25rem) * 4);
374
283
  margin-inline: auto;
284
+ max-width: var(--container-lg);
285
+ border-radius: var(--radius-xl);
286
+ padding: calc(var(--spacing) * 4);
375
287
  }
376
288
  [data-scope=dialog][data-part=content].sm header {
377
- padding-bottom: calc(var(--spacing, 0.25rem) * 2);
378
- font-size: var(--text-sm, 0.875rem);
379
- line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
289
+ padding-bottom: calc(var(--spacing) * 2);
290
+ font-size: var(--text-sm);
291
+ line-height: var(--tw-leading, var(--text-sm--line-height));
380
292
  }
381
293
  [data-scope=dialog][data-part=content].md header {
382
- padding-bottom: calc(var(--spacing, 0.25rem) * 4);
383
- font-size: var(--text-2xl, 1.5rem);
384
- line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
294
+ padding-bottom: calc(var(--spacing) * 4);
295
+ font-size: var(--text-2xl);
296
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
385
297
  }
386
298
  [data-scope=dialog][data-part=content].lg header {
387
- padding-bottom: calc(var(--spacing, 0.25rem) * 4);
388
- font-size: var(--text-3xl, 1.875rem);
389
- line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
299
+ padding-bottom: calc(var(--spacing) * 4);
300
+ font-size: var(--text-3xl);
301
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
390
302
  }
391
303
  .sm [data-scope=dialog][data-part=close-trigger] {
392
- height: calc(var(--spacing, 0.25rem) * 6);
393
- width: calc(var(--spacing, 0.25rem) * 6);
394
- border-radius: 3px;
304
+ height: calc(var(--spacing) * 6);
305
+ width: calc(var(--spacing) * 6);
306
+ border-radius: calc(infinity * 1px);
395
307
  }
396
308
  .md [data-scope=dialog][data-part=close-trigger] {
397
- height: calc(var(--spacing, 0.25rem) * 8);
398
- width: calc(var(--spacing, 0.25rem) * 8);
399
- border-radius: 3px;
309
+ height: calc(var(--spacing) * 8);
310
+ width: calc(var(--spacing) * 8);
311
+ border-radius: calc(infinity * 1px);
400
312
  }
401
313
  .lg [data-scope=dialog][data-part=close-trigger] {
402
- height: calc(var(--spacing, 0.25rem) * 10);
403
- width: calc(var(--spacing, 0.25rem) * 10);
404
- border-radius: 3px;
314
+ height: calc(var(--spacing) * 10);
315
+ width: calc(var(--spacing) * 10);
316
+ border-radius: calc(infinity * 1px);
405
317
  }
406
318
  .sm [data-scope=dialog][data-part=description] {
407
- padding-inline: calc(var(--spacing, 0.25rem) * 4);
408
- padding-bottom: calc(var(--spacing, 0.25rem) * 2);
409
- font-size: var(--text-sm, 0.875rem);
410
- line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
319
+ padding-inline: calc(var(--spacing) * 4);
320
+ padding-bottom: calc(var(--spacing) * 2);
321
+ font-size: var(--text-sm);
322
+ line-height: var(--tw-leading, var(--text-sm--line-height));
411
323
  }
412
324
  .md [data-scope=dialog][data-part=description] {
413
- padding-inline: calc(var(--spacing, 0.25rem) * 16);
414
- padding-bottom: calc(var(--spacing, 0.25rem) * 8);
415
- font-size: var(--text-2xl, 1.5rem);
416
- line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
325
+ padding-inline: calc(var(--spacing) * 16);
326
+ padding-bottom: calc(var(--spacing) * 8);
327
+ font-size: var(--text-2xl);
328
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
417
329
  }
418
330
  .lg [data-scope=dialog][data-part=description] {
419
- padding-inline: calc(var(--spacing, 0.25rem) * 16);
420
- padding-bottom: calc(var(--spacing, 0.25rem) * 8);
421
- font-size: var(--text-3xl, 1.875rem);
422
- line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
331
+ padding-inline: calc(var(--spacing) * 16);
332
+ padding-bottom: calc(var(--spacing) * 8);
333
+ font-size: var(--text-3xl);
334
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
335
+ }
336
+ @keyframes anim-scale-in {
337
+ from {
338
+ opacity: 0;
339
+ transform: scale(0.95);
340
+ }
341
+ to {
342
+ opacity: 1;
343
+ transform: scale(1);
344
+ }
345
+ }
346
+ @keyframes anim-scale-out {
347
+ from {
348
+ opacity: 1;
349
+ transform: scale(1);
350
+ }
351
+ to {
352
+ opacity: 0;
353
+ transform: scale(0.95);
354
+ }
423
355
  }
424
- .wallet-ui-list-icon {
356
+ [data-ui=wallet-ui-icon] {
425
357
  border-style: var(--tw-border-style);
426
- border-width: 0;
358
+ border-width: 0px;
427
359
  }
428
- .wallet-ui-list-icon.sm {
429
- border-radius: var(--radius-xs, 0.125rem);
430
- width: 16px;
360
+ [data-ui=wallet-ui-icon].sm {
361
+ border-radius: var(--radius-xs);
431
362
  height: 16px;
363
+ width: 16px;
432
364
  }
433
- .wallet-ui-list-icon.md {
434
- border-radius: var(--radius-md, 0.375rem);
435
- width: 24px;
365
+ [data-ui=wallet-ui-icon].md {
366
+ border-radius: var(--radius-md);
436
367
  height: 24px;
368
+ width: 24px;
437
369
  }
438
- .wallet-ui-list-icon.lg {
439
- border-radius: var(--radius-lg, 0.5rem);
440
- width: 32px;
370
+ [data-ui=wallet-ui-icon].lg {
371
+ border-radius: var(--radius-lg);
441
372
  height: 32px;
373
+ width: 32px;
442
374
  }
443
- .wallet-ui-list-label {
444
- color: var(--color-gray-500, oklch(0.551 0.027 264.364));
375
+ [data-ui=wallet-ui-label] {
376
+ color: var(--foreground);
445
377
  }
446
- @media (prefers-color-scheme: dark) {
447
- .wallet-ui-list-label {
448
- color: var(--color-gray-200, oklch(0.928 0.006 264.531));
449
- }
378
+ [data-ui=wallet-ui-label].sm {
379
+ font-size: var(--text-xs);
380
+ line-height: var(--tw-leading, var(--text-xs--line-height));
381
+ --tw-font-weight: var(--font-weight-light);
382
+ font-weight: var(--font-weight-light);
450
383
  }
451
- .wallet-ui-list-label.sm {
452
- font-size: var(--text-xs, 0.75rem);
453
- line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
454
- --tw-font-weight: var(--font-weight-light, 300);
455
- font-weight: var(--font-weight-light, 300);
456
- }
457
- .wallet-ui-list-label.md {
458
- font-size: var(--text-base, 1rem);
459
- line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
460
- --tw-font-weight: var(--font-weight-normal, 400);
461
- font-weight: var(--font-weight-normal, 400);
462
- }
463
- .wallet-ui-list-label.lg {
464
- font-size: var(--text-xl, 1.25rem);
465
- line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
466
- --tw-font-weight: var(--font-weight-semibold, 600);
467
- font-weight: var(--font-weight-semibold, 600);
468
- }
469
- .wallet-ui-list-button {
384
+ [data-ui=wallet-ui-label].md {
385
+ font-size: var(--text-base);
386
+ line-height: var(--tw-leading, var(--text-base--line-height));
387
+ --tw-font-weight: var(--font-weight-normal);
388
+ font-weight: var(--font-weight-normal);
389
+ }
390
+ [data-ui=wallet-ui-label].lg {
391
+ font-size: var(--text-xl);
392
+ line-height: var(--tw-leading, var(--text-xl--line-height));
393
+ --tw-font-weight: var(--font-weight-semibold);
394
+ font-weight: var(--font-weight-semibold);
395
+ }
396
+ [data-ui=wallet-ui-list-button] {
397
+ display: flex;
470
398
  align-items: center;
471
- gap: calc(var(--spacing, 0.25rem) * 2);
399
+ gap: calc(var(--spacing) * 2);
472
400
  white-space: nowrap;
473
401
  cursor: pointer;
474
402
  appearance: none;
475
403
  -webkit-user-select: none;
476
404
  user-select: none;
477
- display: flex;
478
- }
479
- .wallet-ui-list-button:disabled {
480
- cursor: not-allowed;
481
- opacity: 0.5;
482
- }
483
- @media (hover: hover) {
484
- .wallet-ui-list-button:hover {
485
- background-color: var(--color-gray-200, oklch(0.928 0.006 264.531));
405
+ &:disabled {
406
+ cursor: not-allowed;
486
407
  }
487
- }
488
- @media (prefers-color-scheme: dark) {
489
- @media (hover: hover) {
490
- .wallet-ui-list-button:hover {
491
- background-color: var(--color-gray-800, oklch(0.278 0.033 256.848));
492
- }
408
+ &:disabled {
409
+ opacity: 50%;
493
410
  }
494
411
  }
495
- .wallet-ui-list-button.sm {
496
- border-radius: var(--radius-md, 0.375rem);
497
- padding-inline: calc(var(--spacing, 0.25rem) * 1);
498
- padding-block: calc(var(--spacing, 0.25rem) * 1);
412
+ [data-ui=wallet-ui-list-button].hover {
413
+ background: var(--background-hover);
499
414
  }
500
- .wallet-ui-list-button.md {
501
- border-radius: var(--radius-lg, 0.5rem);
502
- padding-inline: calc(var(--spacing, 0.25rem) * 2);
503
- padding-block: calc(var(--spacing, 0.25rem) * 2);
415
+ [data-ui=wallet-ui-list-button].sm {
416
+ border-radius: var(--radius-md);
417
+ padding-inline: calc(var(--spacing) * 1);
418
+ padding-block: calc(var(--spacing) * 1);
504
419
  }
505
- .wallet-ui-list-button.lg {
506
- border-radius: var(--radius-xl, 0.75rem);
507
- padding-inline: calc(var(--spacing, 0.25rem) * 3);
508
- padding-block: calc(var(--spacing, 0.25rem) * 3);
420
+ [data-ui=wallet-ui-list-button].md {
421
+ border-radius: var(--radius-lg);
422
+ padding-inline: calc(var(--spacing) * 2);
423
+ padding-block: calc(var(--spacing) * 2);
509
424
  }
510
- .wallet-ui-list {
511
- flex-direction: column;
512
- display: flex;
513
- }
514
- .wallet-ui-list.sm {
515
- gap: calc(var(--spacing, 0.25rem) * 1);
425
+ [data-ui=wallet-ui-list-button].lg {
426
+ border-radius: var(--radius-xl);
427
+ padding-inline: calc(var(--spacing) * 3);
428
+ padding-block: calc(var(--spacing) * 3);
516
429
  }
517
- .wallet-ui-list.md {
518
- gap: calc(var(--spacing, 0.25rem) * 2);
430
+ [data-ui=wallet-ui-list] {
431
+ display: flex;
432
+ flex-direction: column;
519
433
  }
520
- .wallet-ui-list.lg {
521
- gap: calc(var(--spacing, 0.25rem) * 3);
434
+ [data-ui=wallet-ui-list].sm {
435
+ gap: calc(var(--spacing) * 1);
522
436
  }
523
- @keyframes anim-scale-in {
524
- from {
525
- opacity: 0;
526
- transform: scale(0.95);
527
- }
528
- to {
529
- opacity: 1;
530
- transform: scale(1);
531
- }
437
+ [data-ui=wallet-ui-list].md {
438
+ gap: calc(var(--spacing) * 2);
532
439
  }
533
- @keyframes anim-scale-out {
534
- from {
535
- opacity: 1;
536
- transform: scale(1);
537
- }
538
- to {
539
- opacity: 0;
540
- transform: scale(0.95);
541
- }
440
+ [data-ui=wallet-ui-list].lg {
441
+ gap: calc(var(--spacing) * 3);
542
442
  }
543
443
  @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
544
444
  @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@@ -550,10 +450,11 @@
550
450
  @property --tw-inset-ring-color { syntax: "*"; inherits: false; }
551
451
  @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
552
452
  @property --tw-ring-inset { syntax: "*"; inherits: false; }
553
- @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0; }
453
+ @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
554
454
  @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
555
455
  @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
556
456
  @property --tw-font-weight { syntax: "*"; inherits: false; }
557
457
  @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
558
458
  /*! tailwindcss v4.0.15 | MIT License | https://tailwindcss.com */
459
+ /*!* Shape *!*/
559
460
  /*# sourceMappingURL=index.css.map */