@nattstack/ui 0.0.85 → 0.0.86

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 (169) hide show
  1. package/dist/components/button/button-spinner.css +97 -0
  2. package/dist/components/button/button-spinner.js +14 -0
  3. package/dist/components/button/button-spinner.module.js +8 -0
  4. package/dist/components/button/button.css +191 -0
  5. package/dist/components/button/button.d.ts +25 -0
  6. package/dist/components/button/button.js +54 -0
  7. package/dist/components/button/button.module.js +21 -0
  8. package/dist/components/button-link/button-link.d.ts +18 -0
  9. package/dist/components/button-link/button-link.js +23 -0
  10. package/dist/components/checkbox/checkbox-icon.js +22 -0
  11. package/dist/components/checkbox/checkbox.css +55 -0
  12. package/dist/components/checkbox/checkbox.d.ts +8 -0
  13. package/dist/components/checkbox/checkbox.js +21 -0
  14. package/dist/components/checkbox/checkbox.module.js +9 -0
  15. package/dist/components/column/column.css +6 -0
  16. package/dist/components/column/column.d.ts +16 -0
  17. package/dist/components/column/column.js +23 -0
  18. package/dist/components/column/column.module.js +5 -0
  19. package/dist/components/dialog-responsive/dialog-responsive-backdrop.css +28 -0
  20. package/dist/components/dialog-responsive/dialog-responsive-backdrop.js +17 -0
  21. package/dist/components/dialog-responsive/dialog-responsive-backdrop.module.js +5 -0
  22. package/dist/components/dialog-responsive/dialog-responsive-bar.css +16 -0
  23. package/dist/components/dialog-responsive/dialog-responsive-bar.js +15 -0
  24. package/dist/components/dialog-responsive/dialog-responsive-bar.module.js +5 -0
  25. package/dist/components/dialog-responsive/dialog-responsive-popup.css +56 -0
  26. package/dist/components/dialog-responsive/dialog-responsive-popup.d.ts +8 -0
  27. package/dist/components/dialog-responsive/dialog-responsive-popup.js +22 -0
  28. package/dist/components/dialog-responsive/dialog-responsive-popup.module.js +5 -0
  29. package/dist/components/dialog-responsive/dialog-responsive-portal.css +7 -0
  30. package/dist/components/dialog-responsive/dialog-responsive-portal.js +17 -0
  31. package/dist/components/dialog-responsive/dialog-responsive-portal.module.js +5 -0
  32. package/dist/components/dialog-responsive/dialog-responsive-trigger.d.ts +7 -0
  33. package/dist/components/dialog-responsive/dialog-responsive-trigger.js +12 -0
  34. package/dist/components/dialog-responsive/dialog-responsive-viewport.css +18 -0
  35. package/dist/components/dialog-responsive/dialog-responsive-viewport.js +17 -0
  36. package/dist/components/dialog-responsive/dialog-responsive-viewport.module.js +5 -0
  37. package/dist/components/dialog-responsive/dialog-responsive.d.ts +10 -0
  38. package/dist/components/dialog-responsive/dialog-responsive.js +15 -0
  39. package/dist/components/icon-button/icon-button.css +25 -0
  40. package/dist/components/icon-button/icon-button.d.ts +12 -0
  41. package/dist/components/icon-button/icon-button.js +34 -0
  42. package/dist/components/icon-button/icon-button.module.js +12 -0
  43. package/dist/components/index.d.ts +46 -359
  44. package/dist/components/index.js +46 -1034
  45. package/dist/components/input/input.css +84 -0
  46. package/dist/components/input/input.d.ts +22 -0
  47. package/dist/components/input/input.js +44 -0
  48. package/dist/components/input/input.module.js +14 -0
  49. package/dist/components/label/label.css +7 -0
  50. package/dist/components/label/label.d.ts +7 -0
  51. package/dist/components/label/label.js +16 -0
  52. package/dist/components/label/label.module.js +5 -0
  53. package/dist/components/menu/menu-checkbox-item.d.ts +14 -0
  54. package/dist/components/menu/menu-checkbox-item.js +44 -0
  55. package/dist/components/menu/menu-class-names.d.ts +23 -0
  56. package/dist/components/menu/menu-class-names.js +24 -0
  57. package/dist/components/menu/menu-content.d.ts +11 -0
  58. package/dist/components/menu/menu-content.js +38 -0
  59. package/dist/components/menu/menu-group-label.d.ts +9 -0
  60. package/dist/components/menu/menu-group-label.js +16 -0
  61. package/dist/components/menu/menu-group.d.ts +9 -0
  62. package/dist/components/menu/menu-group.js +16 -0
  63. package/dist/components/menu/menu-item.d.ts +10 -0
  64. package/dist/components/menu/menu-item.js +18 -0
  65. package/dist/components/menu/menu-link-item.d.ts +7 -0
  66. package/dist/components/menu/menu-link-item.js +13 -0
  67. package/dist/components/menu/menu-radio-group.d.ts +10 -0
  68. package/dist/components/menu/menu-radio-group.js +17 -0
  69. package/dist/components/menu/menu-radio-item.d.ts +12 -0
  70. package/dist/components/menu/menu-radio-item.js +43 -0
  71. package/dist/components/menu/menu-separator.d.ts +9 -0
  72. package/dist/components/menu/menu-separator.js +16 -0
  73. package/dist/components/menu/menu-submenu-trigger.d.ts +7 -0
  74. package/dist/components/menu/menu-submenu-trigger.js +13 -0
  75. package/dist/components/menu/menu-submenu.d.ts +11 -0
  76. package/dist/components/menu/menu-submenu.js +15 -0
  77. package/dist/components/menu/menu-trigger.d.ts +7 -0
  78. package/dist/components/menu/menu-trigger.js +12 -0
  79. package/dist/components/menu/menu-viewport.d.ts +9 -0
  80. package/dist/components/menu/menu-viewport.js +16 -0
  81. package/dist/components/menu/menu.css +209 -0
  82. package/dist/components/menu/menu.d.ts +12 -0
  83. package/dist/components/menu/menu.js +16 -0
  84. package/dist/components/menu/menu.module.js +24 -0
  85. package/dist/components/otp-field/otp-field-input.css +33 -0
  86. package/dist/components/otp-field/otp-field-input.d.ts +8 -0
  87. package/dist/components/otp-field/otp-field-input.js +16 -0
  88. package/dist/components/otp-field/otp-field-input.module.js +5 -0
  89. package/dist/components/otp-field/otp-field.css +13 -0
  90. package/dist/components/otp-field/otp-field.d.ts +13 -0
  91. package/dist/components/otp-field/otp-field.js +27 -0
  92. package/dist/components/otp-field/otp-field.module.js +8 -0
  93. package/dist/components/row/row.css +6 -0
  94. package/dist/components/row/row.d.ts +16 -0
  95. package/dist/components/row/row.js +23 -0
  96. package/dist/components/row/row.module.js +5 -0
  97. package/dist/components/spacer/spacer.css +5 -0
  98. package/dist/components/spacer/spacer.d.ts +10 -0
  99. package/dist/components/spacer/spacer.js +19 -0
  100. package/dist/components/spacer/spacer.module.js +5 -0
  101. package/dist/components/switch/switch.css +54 -0
  102. package/dist/components/switch/switch.d.ts +19 -0
  103. package/dist/components/switch/switch.js +31 -0
  104. package/dist/components/switch/switch.module.js +10 -0
  105. package/dist/components/tabs/tabs-panel.css +14 -0
  106. package/dist/components/tabs/tabs-panel.d.ts +8 -0
  107. package/dist/components/tabs/tabs-panel.js +17 -0
  108. package/dist/components/tabs/tabs-panel.module.js +5 -0
  109. package/dist/components/tabs/tabs.css +6 -0
  110. package/dist/components/tabs/tabs.d.ts +8 -0
  111. package/dist/components/tabs/tabs.js +17 -0
  112. package/dist/components/tabs/tabs.module.js +5 -0
  113. package/dist/components/tabs-pill/tabs-pill-indicator.css +14 -0
  114. package/dist/components/tabs-pill/tabs-pill-indicator.js +18 -0
  115. package/dist/components/tabs-pill/tabs-pill-indicator.module.js +5 -0
  116. package/dist/components/tabs-pill/tabs-pill-list.css +9 -0
  117. package/dist/components/tabs-pill/tabs-pill-list.d.ts +8 -0
  118. package/dist/components/tabs-pill/tabs-pill-list.js +19 -0
  119. package/dist/components/tabs-pill/tabs-pill-list.module.js +5 -0
  120. package/dist/components/tabs-pill/tabs-pill-tab.css +66 -0
  121. package/dist/components/tabs-pill/tabs-pill-tab.d.ts +10 -0
  122. package/dist/components/tabs-pill/tabs-pill-tab.js +21 -0
  123. package/dist/components/tabs-pill/tabs-pill-tab.module.js +9 -0
  124. package/dist/components/tabs-segmented/tabs-segmented-indicator.css +14 -0
  125. package/dist/components/tabs-segmented/tabs-segmented-indicator.js +18 -0
  126. package/dist/components/tabs-segmented/tabs-segmented-indicator.module.js +5 -0
  127. package/dist/components/tabs-segmented/tabs-segmented-list.css +13 -0
  128. package/dist/components/tabs-segmented/tabs-segmented-list.d.ts +8 -0
  129. package/dist/components/tabs-segmented/tabs-segmented-list.js +19 -0
  130. package/dist/components/tabs-segmented/tabs-segmented-list.module.js +5 -0
  131. package/dist/components/tabs-segmented/tabs-segmented-tab.css +37 -0
  132. package/dist/components/tabs-segmented/tabs-segmented-tab.d.ts +10 -0
  133. package/dist/components/tabs-segmented/tabs-segmented-tab.js +18 -0
  134. package/dist/components/tabs-segmented/tabs-segmented-tab.module.js +5 -0
  135. package/dist/components/tabs-underline/tabs-underline-indicator.css +12 -0
  136. package/dist/components/tabs-underline/tabs-underline-indicator.js +18 -0
  137. package/dist/components/tabs-underline/tabs-underline-indicator.module.js +5 -0
  138. package/dist/components/tabs-underline/tabs-underline-list.css +10 -0
  139. package/dist/components/tabs-underline/tabs-underline-list.d.ts +8 -0
  140. package/dist/components/tabs-underline/tabs-underline-list.js +19 -0
  141. package/dist/components/tabs-underline/tabs-underline-list.module.js +5 -0
  142. package/dist/components/tabs-underline/tabs-underline-tab.css +36 -0
  143. package/dist/components/tabs-underline/tabs-underline-tab.d.ts +10 -0
  144. package/dist/components/tabs-underline/tabs-underline-tab.js +18 -0
  145. package/dist/components/tabs-underline/tabs-underline-tab.module.js +5 -0
  146. package/dist/components/textarea/textarea.css +9 -0
  147. package/dist/components/textarea/textarea.d.ts +17 -0
  148. package/dist/components/textarea/textarea.js +31 -0
  149. package/dist/components/textarea/textarea.module.js +5 -0
  150. package/dist/components/toggle-group/toggle-group-item.css +47 -0
  151. package/dist/components/toggle-group/toggle-group-item.d.ts +11 -0
  152. package/dist/components/toggle-group/toggle-group-item.js +18 -0
  153. package/dist/components/toggle-group/toggle-group-item.module.js +5 -0
  154. package/dist/components/toggle-group/toggle-group.css +7 -0
  155. package/dist/components/toggle-group/toggle-group.d.ts +12 -0
  156. package/dist/components/toggle-group/toggle-group.js +19 -0
  157. package/dist/components/toggle-group/toggle-group.module.js +5 -0
  158. package/dist/components/tooltip/tooltip-popup.css +32 -0
  159. package/dist/components/tooltip/tooltip-popup.d.ts +8 -0
  160. package/dist/components/tooltip/tooltip-popup.js +25 -0
  161. package/dist/components/tooltip/tooltip-popup.module.js +8 -0
  162. package/dist/components/tooltip/tooltip-provider.d.ts +7 -0
  163. package/dist/components/tooltip/tooltip-provider.js +12 -0
  164. package/dist/components/tooltip/tooltip-trigger.d.ts +7 -0
  165. package/dist/components/tooltip/tooltip-trigger.js +12 -0
  166. package/dist/components/tooltip/tooltip.d.ts +10 -0
  167. package/dist/components/tooltip/tooltip.js +14 -0
  168. package/package.json +6 -3
  169. package/dist/components/style.css +0 -1182
@@ -1,1182 +0,0 @@
1
- @layer components {
2
- .button-spinner-module_base_UApLZa {
3
- height: var(--size);
4
- width: var(--size);
5
- animation: 1s steps(12, end) infinite button-spinner-module_spinner_UApLZa;
6
- position: absolute;
7
- scale: -1 1;
8
- }
9
-
10
- @keyframes button-spinner-module_spinner_UApLZa {
11
- to {
12
- rotate: 1turn;
13
- }
14
- }
15
-
16
- .button-spinner-module_base_UApLZa > div {
17
- height: calc(var(--size) / 12);
18
- pointer-events: none;
19
- transform-origin: 0;
20
- width: calc(var(--size) / 2);
21
- transition: all .15s;
22
- position: absolute;
23
- top: 50%;
24
- right: 0;
25
- translate: 0 -50%;
26
- }
27
-
28
- .button-spinner-module_base_UApLZa > div:after {
29
- content: "";
30
- background-color: currentColor;
31
- border-radius: 9999px;
32
- width: 50%;
33
- height: 100%;
34
- position: absolute;
35
- right: 0;
36
- }
37
-
38
- .button-spinner-module_base_UApLZa > div:first-child {
39
- opacity: 1;
40
- rotate: 0deg;
41
- }
42
-
43
- .button-spinner-module_base_UApLZa > div:nth-child(2) {
44
- opacity: .925;
45
- rotate: 30deg;
46
- }
47
-
48
- .button-spinner-module_base_UApLZa > div:nth-child(3) {
49
- opacity: .85;
50
- rotate: 60deg;
51
- }
52
-
53
- .button-spinner-module_base_UApLZa > div:nth-child(4) {
54
- opacity: .775;
55
- rotate: 90deg;
56
- }
57
-
58
- .button-spinner-module_base_UApLZa > div:nth-child(5) {
59
- opacity: .7;
60
- rotate: 120deg;
61
- }
62
-
63
- .button-spinner-module_base_UApLZa > div:nth-child(6) {
64
- opacity: .625;
65
- rotate: 150deg;
66
- }
67
-
68
- .button-spinner-module_base_UApLZa > div:nth-child(7) {
69
- opacity: .55;
70
- rotate: 180deg;
71
- }
72
-
73
- .button-spinner-module_base_UApLZa > div:nth-child(8) {
74
- opacity: .475;
75
- rotate: 210deg;
76
- }
77
-
78
- .button-spinner-module_base_UApLZa > div:nth-child(9) {
79
- opacity: .4;
80
- rotate: 240deg;
81
- }
82
-
83
- .button-spinner-module_base_UApLZa > div:nth-child(10) {
84
- opacity: .325;
85
- rotate: 270deg;
86
- }
87
-
88
- .button-spinner-module_base_UApLZa > div:nth-child(11) {
89
- opacity: .25;
90
- rotate: 300deg;
91
- }
92
-
93
- .button-spinner-module_base_UApLZa > div:nth-child(12) {
94
- opacity: .15;
95
- rotate: 330deg;
96
- }
97
- }
98
- @layer components {
99
- .button-module_base_4nLWdW {
100
- cursor: pointer;
101
- outline-offset: 2px;
102
- user-select: none;
103
- outline: 2px solid #0000;
104
- justify-content: center;
105
- align-items: center;
106
- column-gap: 8px;
107
- font-size: 14px;
108
- font-weight: 500;
109
- transition-property: background-color, box-shadow, translate;
110
- transition-duration: .15s;
111
- display: inline-flex;
112
- position: relative;
113
- overflow: hidden;
114
- }
115
-
116
- .button-module_base_4nLWdW:active:not(:disabled) {
117
- translate: 0 1px;
118
- }
119
-
120
- .button-module_base_4nLWdW:focus-visible {
121
- outline-color: var(--color-outline);
122
- }
123
-
124
- .button-module_disabled_4nLWdW, .button-module_loading_4nLWdW {
125
- cursor: not-allowed;
126
- opacity: .5;
127
- }
128
-
129
- .button-module_loading_4nLWdW > :not([data-slot="button-spinner"]) {
130
- color: #0000;
131
- text-shadow: none;
132
- }
133
-
134
- .button-module_rounded_base_4nLWdW.button-module_size_32_4nLWdW {
135
- border-radius: 8px;
136
- padding: 0 12px;
137
- }
138
-
139
- .button-module_rounded_base_4nLWdW.button-module_size_36_4nLWdW {
140
- border-radius: 9px;
141
- padding: 0 14px;
142
- }
143
-
144
- .button-module_rounded_base_4nLWdW.button-module_size_40_4nLWdW {
145
- border-radius: 10px;
146
- padding: 0 16px;
147
- }
148
-
149
- .button-module_rounded_base_4nLWdW.button-module_size_44_4nLWdW {
150
- border-radius: 11px;
151
- padding: 0 18px;
152
- }
153
-
154
- .button-module_rounded_base_4nLWdW.button-module_size_48_4nLWdW {
155
- border-radius: 12px;
156
- padding: 0 20px;
157
- }
158
-
159
- .button-module_rounded_full_4nLWdW.button-module_size_32_4nLWdW {
160
- border-radius: 16px;
161
- padding: 0 12px;
162
- }
163
-
164
- .button-module_rounded_full_4nLWdW.button-module_size_36_4nLWdW {
165
- border-radius: 18px;
166
- padding: 0 17px;
167
- }
168
-
169
- .button-module_rounded_full_4nLWdW.button-module_size_40_4nLWdW {
170
- border-radius: 20px;
171
- padding: 0 20px;
172
- }
173
-
174
- .button-module_rounded_full_4nLWdW.button-module_size_44_4nLWdW {
175
- border-radius: 22px;
176
- padding: 0 23px;
177
- }
178
-
179
- .button-module_rounded_full_4nLWdW.button-module_size_48_4nLWdW {
180
- border-radius: 24px;
181
- padding: 0 28px;
182
- }
183
-
184
- .button-module_size_32_4nLWdW {
185
- height: 32px;
186
- }
187
-
188
- .button-module_size_36_4nLWdW {
189
- height: 36px;
190
- }
191
-
192
- .button-module_size_40_4nLWdW {
193
- height: 40px;
194
- }
195
-
196
- .button-module_size_44_4nLWdW {
197
- height: 44px;
198
- }
199
-
200
- .button-module_size_48_4nLWdW {
201
- height: 48px;
202
- }
203
-
204
- .button-module_variant_ghost_4nLWdW {
205
- color: #000;
206
- background-color: #0000;
207
- }
208
-
209
- .button-module_variant_ghost_4nLWdW:hover:not(:disabled) {
210
- background-color: var(--color-gray-4);
211
- }
212
-
213
- .dark .button-module_variant_ghost_4nLWdW {
214
- color: #fff;
215
- }
216
-
217
- .button-module_variant_primary_4nLWdW {
218
- background-color: var(--color-primary);
219
- box-shadow: inset 0 0 0 1px var(--color-primary),
220
- inset 0 1px 0 1px #ffffff40;
221
- color: #fff;
222
- isolation: isolate;
223
- }
224
-
225
- .button-module_variant_primary_4nLWdW:after {
226
- content: "";
227
- mix-blend-mode: overlay;
228
- pointer-events: none;
229
- transition-duration: inherit;
230
- background-image: radial-gradient(75% 100% at 50% -50%, #ffffff40, #0000);
231
- transition-property: opacity;
232
- position: absolute;
233
- inset: 0;
234
- }
235
-
236
- .button-module_variant_primary_4nLWdW:hover:not(:disabled):after {
237
- opacity: 0;
238
- }
239
-
240
- .dark .button-module_variant_primary_4nLWdW {
241
- box-shadow: inset 0 1px #ffffff40;
242
- }
243
-
244
- .button-module_variant_primary_4nLWdW:hover:not(:disabled) {
245
- --color-mixed: #000;
246
- background-color: color-mix(in oklab, var(--color-primary) 100%, var(--color-mixed) 10%);
247
- box-shadow: none;
248
- }
249
-
250
- .dark .button-module_variant_primary_4nLWdW:hover:not(:disabled) {
251
- --color-mixed: #fff;
252
- }
253
-
254
- .button-module_variant_primary_4nLWdW > * {
255
- --opacity: .25;
256
- filter: drop-shadow(0 1px 1px hsla(0, 0%, 0%, var(--opacity)));
257
- transition-duration: inherit;
258
- transition-property: filter;
259
- }
260
-
261
- .button-module_variant_primary_4nLWdW:hover:not(:disabled) > * {
262
- --opacity: 0;
263
- }
264
-
265
- .button-module_variant_secondary_4nLWdW {
266
- --color-text: #000;
267
- background-color: var(--color-bg-shell-outer);
268
- box-shadow: inset 0 0 0 1px var(--color-border);
269
- color: var(--color-text);
270
- }
271
-
272
- .dark .button-module_variant_secondary_4nLWdW {
273
- --color-text: #fff;
274
- }
275
-
276
- .button-module_variant_secondary_4nLWdW:hover:not(:disabled) {
277
- background-color: var(--color-gray-4);
278
- box-shadow: none;
279
- }
280
-
281
- .button-module_width_base_4nLWdW {
282
- width: fit-content;
283
- }
284
-
285
- .button-module_width_full_4nLWdW {
286
- width: stretch;
287
- }
288
- }
289
- @layer components {
290
- .checkbox-module_checkbox_tQ0i7W {
291
- --size: 16px;
292
- background-color: var(--color-bg-shell-inner);
293
- border: 1px solid var(--color-border);
294
- cursor: pointer;
295
- height: var(--size);
296
- outline-color: var(--color-primary);
297
- outline-offset: 2px;
298
- width: var(--size);
299
- border-radius: 4px;
300
- outline-width: 0;
301
- outline-style: solid;
302
- justify-content: center;
303
- align-items: center;
304
- transition-property: background-color, border-color;
305
- transition-duration: .15s;
306
- display: flex;
307
- }
308
-
309
- .checkbox-module_checkbox_tQ0i7W:focus-visible {
310
- outline-width: 2px;
311
- }
312
-
313
- .checkbox-module_checkbox_tQ0i7W:hover {
314
- background-color: var(--color-gray-3);
315
- border-color: var(--color-gray-6);
316
- }
317
-
318
- .checkbox-module_checkbox_tQ0i7W[data-checked] {
319
- background-color: var(--color-primary);
320
- border-color: #0000;
321
- }
322
-
323
- .checkbox-module_indicator_tQ0i7W {
324
- opacity: 0;
325
- transition-property: opacity;
326
- transition-duration: .15s;
327
- }
328
-
329
- .checkbox-module_indicator_tQ0i7W[data-checked] {
330
- opacity: 1;
331
- }
332
-
333
- .checkbox-module_icon_tQ0i7W {
334
- --size: 12px;
335
- height: var(--size);
336
- width: var(--size);
337
-
338
- & > path {
339
- stroke-width: 3px;
340
- stroke: #fff;
341
- }
342
- }
343
- }
344
- @layer components {
345
- .column-module_column_CgFaGG {
346
- flex-direction: column;
347
- display: flex;
348
- }
349
- }
350
- @layer components {
351
- .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq {
352
- --backdrop-opacity: .25;
353
- opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
354
- outline-color: var(--color-primary-9);
355
- background-color: #000;
356
- transition-property: opacity;
357
- transition-duration: .15s;
358
- position: fixed;
359
- inset: 0;
360
- }
361
-
362
- .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq[data-ending-style], .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq[data-starting-style] {
363
- opacity: 0;
364
- }
365
-
366
- .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq[data-ending-style] {
367
- transition-duration: calc(var(--drawer-swipe-strength) * .4s);
368
- }
369
-
370
- .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq[data-swiping] {
371
- transition-duration: 0s;
372
- }
373
-
374
- .dark .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq {
375
- --backdrop-opacity: .75;
376
- }
377
- }
378
- @layer components {
379
- .dialog-responsive-bar-module_dialog_responsive_bar_iUwUCq {
380
- background-color: var(--color-gray-4);
381
- border-radius: 9999px;
382
- width: 48px;
383
- height: 4px;
384
- margin: 12px auto;
385
- display: none;
386
- }
387
-
388
- @media (width <= 640px) {
389
- .dialog-responsive-bar-module_dialog_responsive_bar_iUwUCq {
390
- display: block;
391
- }
392
- }
393
- }
394
- @layer components {
395
- .dialog-responsive-portal-module_dialog_responsive_portal_keH0Tq {
396
- isolation: isolate;
397
- z-index: 30;
398
- position: relative;
399
- }
400
- }
401
- @layer components {
402
- .dialog-responsive-viewport-module_dialog_responsive_viewport_b5ZINa {
403
- cursor: pointer;
404
- justify-content: safe center;
405
- align-items: safe center;
406
- padding: 24px;
407
- display: flex;
408
- position: fixed;
409
- inset: 0;
410
- }
411
-
412
- @media (width <= 640px) {
413
- .dialog-responsive-viewport-module_dialog_responsive_viewport_b5ZINa {
414
- align-items: safe flex-end;
415
- padding: 48px 0 0;
416
- }
417
- }
418
- }
419
- @layer components {
420
- .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq {
421
- background-color: var(--color-gray-1);
422
- cursor: auto;
423
- outline-color: var(--color-primary-9);
424
- outline-offset: -4px;
425
- will-change: opacity, transform;
426
- border-radius: 16px;
427
- outline-width: 0;
428
- outline-style: solid;
429
- flex-direction: column;
430
- width: 100%;
431
- max-width: 640px;
432
- padding: 16px;
433
- transition-property: opacity, transform;
434
- transition-duration: .15s;
435
- display: flex;
436
- }
437
-
438
- .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq:focus-visible {
439
- outline-width: 2px;
440
- }
441
-
442
- .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-ending-style], .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-starting-style] {
443
- opacity: 0;
444
- transform: scale(.975);
445
- }
446
-
447
- .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-swiping] {
448
- user-select: none;
449
- }
450
-
451
- @media (width <= 640px) {
452
- .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq {
453
- --radius-mobile: 24px;
454
- border-bottom-right-radius: 0;
455
- border-bottom-left-radius: 0;
456
- border-top-left-radius: var(--radius-mobile);
457
- border-top-right-radius: var(--radius-mobile);
458
- transform: translateY(var(--drawer-swipe-movement-y));
459
- padding-top: 0;
460
- transition-property: transform;
461
- transition-duration: .45s;
462
- transition-timing-function: cubic-bezier(.32, .72, 0, 1);
463
- }
464
-
465
- .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-ending-style], .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-starting-style] {
466
- opacity: 1;
467
- transform: scale(1) translateY(100%);
468
- }
469
-
470
- .dialog-responsive-popup-module_dialog_responsive_popup_cgfWTq[data-ending-style] {
471
- transition-duration: calc(var(--drawer-swipe-strength) * .3s);
472
- }
473
- }
474
- }
475
- @layer components {
476
- .icon-button-module_base_gxECxa {
477
- padding: 0;
478
- }
479
-
480
- .icon-button-module_size_32_gxECxa {
481
- width: 32px;
482
- }
483
-
484
- .icon-button-module_size_36_gxECxa {
485
- width: 36px;
486
- }
487
-
488
- .icon-button-module_size_40_gxECxa {
489
- width: 40px;
490
- }
491
-
492
- .icon-button-module_size_44_gxECxa {
493
- width: 44px;
494
- }
495
-
496
- .icon-button-module_size_48_gxECxa {
497
- width: 48px;
498
- }
499
- }
500
- @layer components {
501
- .input-module_input_o34hyq {
502
- appearance: none;
503
- background-color: var(--color-bg-shell-inner);
504
- box-shadow: 0 0 0 1px var(--color-border) inset;
505
- color: var(--color-text-primary);
506
- cursor: text;
507
- font-family: var(--font-body);
508
- outline-offset: -2px;
509
- border-style: none;
510
- outline: 2px solid #0000;
511
- width: 100%;
512
- font-size: 14px;
513
- font-weight: 400;
514
- line-height: 1.5;
515
- text-decoration: none;
516
- transition-property: box-shadow, opacity;
517
- transition-duration: .15s;
518
- }
519
-
520
- .input-module_input_o34hyq::placeholder {
521
- color: var(--color-gray-9);
522
- user-select: none;
523
- }
524
-
525
- .input-module_input_o34hyq:disabled {
526
- cursor: not-allowed;
527
- opacity: .5;
528
- }
529
-
530
- .input-module_input_o34hyq:enabled:active, .input-module_input_o34hyq:enabled:focus, .input-module_input_o34hyq:enabled:hover, .input-module_input_o34hyq:enabled[data-is-active="true"] {
531
- box-shadow: 0 0 0 1px var(--color-gray-6) inset;
532
- }
533
-
534
- .input-module_input_o34hyq[data-is-valid="true"] {
535
- outline-color: #30a46c;
536
- }
537
-
538
- .input-module_input_o34hyq[data-is-invalid="true"] {
539
- outline-color: #e5484d;
540
- }
541
-
542
- .input-module_input_o34hyq:focus-visible {
543
- outline-color: var(--color-outline);
544
- }
545
-
546
- .input-module_input__rounded_base_o34hyq {
547
- border-radius: 12px;
548
- }
549
-
550
- .input-module_input_o34hyq.input-module_input__rounded_full_o34hyq {
551
- border-radius: 9999px;
552
- }
553
-
554
- .input-module_input__size_32_o34hyq {
555
- border-radius: 8px;
556
- min-height: 32px;
557
- padding: 0 8px;
558
- }
559
-
560
- .input-module_input__size_36_o34hyq {
561
- border-radius: 9px;
562
- min-height: 36px;
563
- padding: 0 10px;
564
- }
565
-
566
- .input-module_input__size_40_o34hyq {
567
- border-radius: 10px;
568
- min-height: 40px;
569
- padding: 0 12px;
570
- }
571
-
572
- .input-module_input__size_44_o34hyq {
573
- border-radius: 11px;
574
- min-height: 44px;
575
- padding: 0 14px;
576
- }
577
-
578
- .input-module_input__size_48_o34hyq {
579
- border-radius: 12px;
580
- min-height: 48px;
581
- padding: 0 16px;
582
- }
583
- }
584
- @layer components {
585
- .label-module_label_iQZ4sG {
586
- color: var(--color-text-secondary);
587
- width: fit-content;
588
- font-size: 14px;
589
- }
590
- }
591
- @layer components {
592
- .menu-module_menu_trigger_7pJHya {
593
- background-color: var(--color-gray-2);
594
- box-shadow: 0 0 0 1px var(--color-gray-4) inset;
595
- color: var(--color-text-primary);
596
- cursor: pointer;
597
- font-family: var(--font-body);
598
- outline-color: var(--color-primary-9);
599
- outline-offset: 2px;
600
- user-select: none;
601
- background-image: linear-gradient(oklab(0% none none / 0) 50%, oklab(0% none none / .0196078) 50%);
602
- border-style: none;
603
- border-radius: 10px;
604
- outline-width: 0;
605
- outline-style: solid;
606
- flex-shrink: 0;
607
- justify-content: safe center;
608
- align-items: safe center;
609
- column-gap: 8px;
610
- width: max-content;
611
- height: 40px;
612
- padding: 0 14px;
613
- font-size: 14px;
614
- font-weight: 500;
615
- line-height: 1.5;
616
- transition-property: background-color, opacity, translate;
617
- transition-duration: .15s;
618
- display: inline-flex;
619
- overflow: hidden;
620
- }
621
-
622
- .menu-module_menu_trigger_7pJHya:hover:not(:disabled), .menu-module_menu_trigger_7pJHya[data-popup-open] {
623
- background-color: var(--color-gray-3);
624
- }
625
-
626
- .menu-module_menu_trigger_7pJHya:active:not(:disabled), .menu-module_menu_trigger_7pJHya[data-pressed] {
627
- translate: 0 1px;
628
- }
629
-
630
- .menu-module_menu_trigger_7pJHya:disabled {
631
- cursor: not-allowed;
632
- opacity: .5;
633
- }
634
-
635
- .menu-module_menu_trigger_7pJHya:focus-visible {
636
- outline-width: 2px;
637
- }
638
-
639
- .menu-module_menu_trigger_7pJHya > svg {
640
- --size-icon: 16px;
641
- height: var(--size-icon);
642
- width: var(--size-icon);
643
- }
644
-
645
- .dark .menu-module_menu_trigger_7pJHya {
646
- background-image: linear-gradient(oklab(100% 0 5.96046e-8 / .00990099) 50%, oklab(0% 0 0 / 0) 50%);
647
- }
648
-
649
- .menu-module_menu_content_positioner_7pJHya {
650
- isolation: isolate;
651
- z-index: 50;
652
- }
653
-
654
- .menu-module_menu_content_7pJHya {
655
- background-color: var(--color-bg-shell-inner);
656
- box-shadow: 0 0 0 1px var(--color-border) inset,
657
- 0 16px 32px oklab(0% none none / .16);
658
- color: var(--color-text-primary);
659
- font-family: var(--font-body);
660
- max-height: min(var(--available-height), 480px);
661
- max-width: min(var(--available-width), 320px);
662
- outline-color: var(--color-primary-9);
663
- outline-offset: -2px;
664
- min-width: 180px;
665
- transform-origin: var(--transform-origin);
666
- will-change: opacity, transform;
667
- border-radius: 12px;
668
- outline-width: 0;
669
- outline-style: solid;
670
- flex-direction: column;
671
- padding: 4px;
672
- transition-property: opacity, transform;
673
- transition-duration: .15s;
674
- display: flex;
675
- overflow: auto;
676
- }
677
-
678
- .menu-module_menu_content_7pJHya:focus-visible {
679
- outline-width: 2px;
680
- }
681
-
682
- .menu-module_menu_content_7pJHya[data-ending-style], .menu-module_menu_content_7pJHya[data-starting-style] {
683
- opacity: 0;
684
- transform: scale(.975);
685
- }
686
-
687
- .menu-module_menu_content_7pJHya[data-side="top"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="top"][data-starting-style] {
688
- transform: scale(.975) translateY(4px);
689
- }
690
-
691
- .menu-module_menu_content_7pJHya[data-side="bottom"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="bottom"][data-starting-style] {
692
- transform: scale(.975) translateY(-4px);
693
- }
694
-
695
- .menu-module_menu_content_7pJHya[data-side="left"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="left"][data-starting-style], .menu-module_menu_content_7pJHya[data-side="inline-start"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="inline-start"][data-starting-style] {
696
- transform: scale(.975) translateX(4px);
697
- }
698
-
699
- .menu-module_menu_content_7pJHya[data-side="right"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="right"][data-starting-style], .menu-module_menu_content_7pJHya[data-side="inline-end"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="inline-end"][data-starting-style] {
700
- transform: scale(.975) translateX(-4px);
701
- }
702
-
703
- .menu-module_menu_content_arrow_7pJHya {
704
- color: var(--color-bg-primary);
705
- display: flex;
706
- }
707
-
708
- .menu-module_menu_content_arrow__icon_7pJHya {
709
- fill: currentColor;
710
- filter: drop-shadow(0 -1px 0 var(--color-border));
711
- display: block;
712
- }
713
-
714
- .menu-module_menu_content_arrow_7pJHya[data-side="top"] {
715
- rotate: 180deg;
716
- }
717
-
718
- .menu-module_menu_content_arrow_7pJHya[data-side="left"], .menu-module_menu_content_arrow_7pJHya[data-side="inline-start"] {
719
- rotate: 90deg;
720
- }
721
-
722
- .menu-module_menu_content_arrow_7pJHya[data-side="right"], .menu-module_menu_content_arrow_7pJHya[data-side="inline-end"] {
723
- rotate: -90deg;
724
- }
725
-
726
- .menu-module_menu_checkbox_item_7pJHya, .menu-module_menu_item_7pJHya, .menu-module_menu_link_item_7pJHya, .menu-module_menu_radio_item_7pJHya, .menu-module_menu_submenu_trigger_7pJHya {
727
- color: var(--color-text-primary);
728
- cursor: pointer;
729
- user-select: none;
730
- border-radius: 8px;
731
- outline: none;
732
- align-items: safe center;
733
- column-gap: 8px;
734
- min-height: 32px;
735
- padding: 0 8px;
736
- font-size: 14px;
737
- font-weight: 500;
738
- line-height: 1.5;
739
- text-decoration: none;
740
- display: flex;
741
- position: relative;
742
- }
743
-
744
- .menu-module_menu_checkbox_item_7pJHya[data-highlighted], .menu-module_menu_item_7pJHya[data-highlighted], .menu-module_menu_link_item_7pJHya[data-highlighted], .menu-module_menu_radio_item_7pJHya[data-highlighted], .menu-module_menu_submenu_trigger_7pJHya[data-highlighted], .menu-module_menu_submenu_trigger_7pJHya[data-popup-open] {
745
- background-color: var(--color-gray-3);
746
- }
747
-
748
- .menu-module_menu_checkbox_item_7pJHya[data-disabled], .menu-module_menu_item_7pJHya[data-disabled], .menu-module_menu_radio_item_7pJHya[data-disabled], .menu-module_menu_submenu_trigger_7pJHya[data-disabled] {
749
- cursor: not-allowed;
750
- opacity: .5;
751
- }
752
-
753
- .menu-module_menu_item__icon_7pJHya, .menu-module_menu_item__indicator_7pJHya {
754
- color: var(--color-text-secondary);
755
- flex-shrink: 0;
756
- justify-content: safe center;
757
- align-items: safe center;
758
- width: 16px;
759
- height: 16px;
760
- display: flex;
761
- }
762
-
763
- .menu-module_menu_item__indicator_7pJHya {
764
- color: var(--color-primary-9);
765
- }
766
-
767
- .menu-module_menu_item__icon_7pJHya > svg, .menu-module_menu_item__indicator_7pJHya > svg {
768
- width: 16px;
769
- height: 16px;
770
- }
771
-
772
- .menu-module_menu_item__label_7pJHya {
773
- text-overflow: ellipsis;
774
- white-space: nowrap;
775
- flex: auto;
776
- min-width: 0;
777
- overflow: hidden;
778
- }
779
-
780
- .menu-module_menu_group_7pJHya, .menu-module_menu_radio_group_7pJHya, .menu-module_menu_viewport_7pJHya {
781
- flex-direction: column;
782
- display: flex;
783
- }
784
-
785
- .menu-module_menu_group_label_7pJHya {
786
- color: var(--color-text-secondary);
787
- padding: 6px 8px 4px;
788
- font-size: 12px;
789
- font-weight: 600;
790
- line-height: 1.5;
791
- }
792
-
793
- .menu-module_menu_separator_7pJHya {
794
- background-color: var(--color-border);
795
- flex-shrink: 0;
796
- height: 1px;
797
- margin: 4px;
798
- }
799
- }
800
- @layer components {
801
- .otp-field-module_otp_field_6ylpka {
802
- flex-wrap: wrap;
803
- justify-content: center;
804
- gap: 8px;
805
- width: fit-content;
806
- display: flex;
807
- }
808
-
809
- .otp-field-module_otp_field__masked_6ylpka > input {
810
- font-family: var(--font-code);
811
- }
812
- }
813
- @layer components {
814
- .otp-field-input-module_otp_field_input_7VaNVa {
815
- background-color: var(--color-gray-3);
816
- box-shadow: 0 0 0 1px var(--color-border) inset;
817
- color: var(--color-text-primary);
818
- font-family: var(--font-body);
819
- outline-color: var(--color-outline);
820
- outline-offset: -2px;
821
- text-align: center;
822
- border-radius: 14px;
823
- outline-width: 0;
824
- outline-style: solid;
825
- width: 40px;
826
- height: 48px;
827
- font-size: 14px;
828
- font-weight: 500;
829
- transition-property: box-shadow;
830
- transition-duration: .15s;
831
- }
832
-
833
- .otp-field-input-module_otp_field_input_7VaNVa:enabled:hover {
834
- box-shadow: 0 0 0 1px var(--color-gray-6) inset;
835
- }
836
-
837
- .otp-field-input-module_otp_field_input_7VaNVa:disabled {
838
- cursor: not-allowed;
839
- opacity: .5;
840
- }
841
-
842
- .otp-field-input-module_otp_field_input_7VaNVa:focus-visible {
843
- outline-width: 2px;
844
- }
845
- }
846
- @layer components {
847
- .row-module_row_FQp50q {
848
- flex-direction: row;
849
- display: flex;
850
- }
851
- }
852
- @layer components {
853
- .spacer-module_spacer_liXYKW {
854
- flex-shrink: 0;
855
- }
856
- }
857
- @layer components {
858
- .switch-module_switch_K0d9Sa {
859
- background-color: var(--color-gray-6);
860
- cursor: pointer;
861
- outline-color: var(--color-primary-9);
862
- outline-offset: 2px;
863
- border-radius: 9999px;
864
- outline-width: 0;
865
- outline-style: solid;
866
- padding: 2px;
867
- transition-property: background-color;
868
- transition-duration: .15s;
869
- display: flex;
870
- overflow: hidden;
871
- }
872
-
873
- .switch-module_switch_K0d9Sa:focus-visible {
874
- outline-width: 2px;
875
- }
876
-
877
- .switch-module_switch_K0d9Sa[data-checked] {
878
- background-color: var(--color-primary-9);
879
- }
880
-
881
- .switch-module_switch_K0d9Sa[data-disabled] {
882
- cursor: not-allowed;
883
- opacity: .5;
884
- }
885
-
886
- .switch-module_switch__thumb_K0d9Sa {
887
- aspect-ratio: 1;
888
- background-color: #fff;
889
- border-radius: 9999px;
890
- height: 100%;
891
- transition-property: transform;
892
- transition-duration: .15s;
893
- }
894
-
895
- .switch-module_switch__thumb_K0d9Sa[data-checked] {
896
- transform: translateX(var(--translateX));
897
- }
898
-
899
- .switch-module_switch__size_18_K0d9Sa {
900
- --translateX: 12px;
901
- width: 30px;
902
- height: 18px;
903
- }
904
-
905
- .switch-module_switch__size_24_K0d9Sa {
906
- --translateX: 16px;
907
- width: 40px;
908
- height: 24px;
909
- }
910
- }
911
- @layer components {
912
- .tabs-pill-indicator-module_tabs_pill_indicator_PiFilW {
913
- background-color: var(--color-gray-12);
914
- height: var(--active-tab-height);
915
- left: var(--active-tab-left);
916
- top: var(--active-tab-top);
917
- width: var(--active-tab-width);
918
- z-index: -1;
919
- border-radius: 12px;
920
- transition-property: left, width;
921
- transition-duration: .15s;
922
- position: absolute;
923
- }
924
- }
925
- @layer components {
926
- .tabs-pill-list-module_tabs_pill_list_3ahKPW {
927
- isolation: isolate;
928
- column-gap: 8px;
929
- display: flex;
930
- position: relative;
931
- overflow-x: auto;
932
- }
933
- }
934
- @layer components {
935
- .tabs-pill-tab-module_tabs_pill_tab_nxQ-sW {
936
- border-radius: var(--border-radius);
937
- color: #000;
938
- cursor: pointer;
939
- outline-color: var(--color-primary-9);
940
- outline-offset: -4px;
941
- white-space: nowrap;
942
- outline-width: 0;
943
- outline-style: solid;
944
- flex-shrink: 0;
945
- justify-content: center;
946
- align-items: center;
947
- column-gap: 8px;
948
- height: 40px;
949
- padding: 0 14px;
950
- font-size: 14px;
951
- font-weight: 500;
952
- transition-property: background-color, color;
953
- transition-duration: .15s;
954
- display: flex;
955
- }
956
-
957
- .tabs-pill-tab-module_tabs_pill_tab_nxQ-sW:focus-visible {
958
- outline-width: 2px;
959
- }
960
-
961
- .tabs-pill-tab-module_tabs_pill_tab_nxQ-sW:hover {
962
- background-color: var(--color-gray-4);
963
- }
964
-
965
- .tabs-pill-tab-module_tabs_pill_tab_nxQ-sW[data-active] {
966
- color: #fff;
967
- background-color: #0000;
968
- }
969
-
970
- .dark .tabs-pill-tab-module_tabs_pill_tab_nxQ-sW {
971
- color: #fff;
972
- }
973
-
974
- .dark .tabs-pill-tab-module_tabs_pill_tab_nxQ-sW[data-active] {
975
- color: #000;
976
- }
977
-
978
- .tabs-pill-tab-module_tabs_pill_tab_nxQ-sW > svg {
979
- --size-icon: 16px;
980
- height: var(--size-icon);
981
- width: var(--size-icon);
982
- }
983
-
984
- .tabs-pill-tab-module_tabs_pill_tab_wrapper_nxQ-sW {
985
- --border-radius: 12px;
986
- border-radius: var(--border-radius);
987
- flex-shrink: 0;
988
- display: flex;
989
- position: relative;
990
- overflow: hidden;
991
- }
992
-
993
- .tabs-pill-tab-module_tabs_pill_tab_background_nxQ-sW {
994
- background-color: var(--color-gray-3);
995
- z-index: -2;
996
- position: absolute;
997
- inset: 0;
998
- }
999
- }
1000
- @layer components {
1001
- .tabs-segmented-indicator-module_tabs_segmented_indicator_3DY8Ta {
1002
- background-color: var(--color-gray-1);
1003
- height: var(--active-tab-height);
1004
- left: var(--active-tab-left);
1005
- top: var(--active-tab-top);
1006
- width: var(--active-tab-width);
1007
- z-index: -1;
1008
- border-radius: 10px;
1009
- transition-property: left, width;
1010
- transition-duration: .15s;
1011
- position: absolute;
1012
- }
1013
- }
1014
- @layer components {
1015
- .tabs-segmented-list-module_tabs_segmented_list_wG8CPq {
1016
- background-color: var(--color-gray-3);
1017
- isolation: isolate;
1018
- border-radius: 12px;
1019
- width: fit-content;
1020
- height: 40px;
1021
- padding: 2px;
1022
- display: flex;
1023
- position: relative;
1024
- overflow-x: auto;
1025
- }
1026
- }
1027
- @layer components {
1028
- .tabs-segmented-tab-module_tabs_segmented_tab_du-IJG {
1029
- color: var(--color-gray-11);
1030
- cursor: pointer;
1031
- outline-color: var(--color-primary-9);
1032
- outline-offset: -4px;
1033
- white-space: nowrap;
1034
- border-radius: 10px;
1035
- outline-width: 0;
1036
- outline-style: solid;
1037
- flex-shrink: 0;
1038
- justify-content: center;
1039
- align-items: center;
1040
- column-gap: 8px;
1041
- height: 100%;
1042
- padding: 0 14px;
1043
- font-size: 14px;
1044
- font-weight: 500;
1045
- transition-property: color;
1046
- transition-duration: .15s;
1047
- display: flex;
1048
- }
1049
-
1050
- .tabs-segmented-tab-module_tabs_segmented_tab_du-IJG:focus-visible {
1051
- outline-width: 2px;
1052
- }
1053
-
1054
- .tabs-segmented-tab-module_tabs_segmented_tab_du-IJG:hover, .tabs-segmented-tab-module_tabs_segmented_tab_du-IJG[data-active] {
1055
- color: var(--color-gray-12);
1056
- }
1057
-
1058
- .tabs-segmented-tab-module_tabs_segmented_tab_du-IJG > svg {
1059
- --size-icon: 16px;
1060
- height: var(--size-icon);
1061
- width: var(--size-icon);
1062
- }
1063
- }
1064
- @layer components {
1065
- .tabs-underline-indicator-module_tabs_underline_indicator_Gl55Ba {
1066
- background-color: var(--color-primary-9);
1067
- height: 2px;
1068
- bottom: 0;
1069
- left: var(--active-tab-left);
1070
- width: var(--active-tab-width);
1071
- transition-property: left, width;
1072
- transition-duration: .15s;
1073
- position: absolute;
1074
- }
1075
- }
1076
- @layer components {
1077
- .tabs-underline-list-module_tabs_underline_list_3MpMpG {
1078
- border-bottom-color: var(--color-gray-4);
1079
- border-bottom-style: solid;
1080
- border-bottom-width: 1px;
1081
- display: flex;
1082
- position: relative;
1083
- overflow-x: auto;
1084
- }
1085
- }
1086
- @layer components {
1087
- .tabs-underline-tab-module_tabs_underline_tab_lcqfQW {
1088
- color: var(--color-gray-11);
1089
- cursor: pointer;
1090
- outline-color: var(--color-primary-9);
1091
- outline-offset: -2px;
1092
- white-space: nowrap;
1093
- border-radius: 8px;
1094
- outline-width: 0;
1095
- outline-style: solid;
1096
- flex-shrink: 0;
1097
- align-items: center;
1098
- column-gap: 8px;
1099
- margin-bottom: 6px;
1100
- padding: 6px 12px;
1101
- font-size: 14px;
1102
- font-weight: 500;
1103
- transition-property: color;
1104
- transition-duration: .15s;
1105
- display: flex;
1106
- }
1107
-
1108
- .tabs-underline-tab-module_tabs_underline_tab_lcqfQW:focus-visible {
1109
- outline-width: 2px;
1110
- }
1111
-
1112
- .tabs-underline-tab-module_tabs_underline_tab_lcqfQW:hover, .tabs-underline-tab-module_tabs_underline_tab_lcqfQW[data-active] {
1113
- color: var(--color-gray-12);
1114
- }
1115
-
1116
- .tabs-underline-tab-module_tabs_underline_tab_lcqfQW > svg {
1117
- --size-icon: 16px;
1118
- height: var(--size-icon);
1119
- width: var(--size-icon);
1120
- }
1121
- }
1122
- @layer components {
1123
- .tabs-module_tabs__1Jl1W {
1124
- flex-direction: column;
1125
- display: flex;
1126
- }
1127
- }
1128
- @layer components {
1129
- .tabs-panel-module_tabs_panel_AXj2FW {
1130
- outline-color: var(--color-primary-9);
1131
- outline-offset: -2px;
1132
- outline-width: 0;
1133
- outline-style: solid;
1134
- flex-direction: column;
1135
- display: flex;
1136
- }
1137
-
1138
- .tabs-panel-module_tabs_panel_AXj2FW:focus-visible {
1139
- outline-width: 2px;
1140
- }
1141
- }
1142
- @layer components {
1143
- .textarea-module_textarea_jT_oOq {
1144
- resize: vertical;
1145
- height: auto;
1146
- min-height: 66px;
1147
- max-height: none;
1148
- padding: 12px;
1149
- }
1150
- }
1151
- @layer components {
1152
- .tooltip-popup-module_tooltip_popup_SLo08q {
1153
- background-color: var(--color-gray-dark-1);
1154
- color: var(--color-gray-dark-12);
1155
- transform-origin: var(--transform-origin);
1156
- border-radius: 8px;
1157
- padding: 4px 8px;
1158
- font-size: 13px;
1159
- font-weight: 500;
1160
- transition-property: opacity, scale;
1161
- transition-duration: .15s;
1162
- box-shadow: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
1163
- }
1164
-
1165
- .tooltip-popup-module_tooltip_popup_SLo08q[data-ending-style], .tooltip-popup-module_tooltip_popup_SLo08q[data-starting-style] {
1166
- opacity: 0;
1167
- scale: .975;
1168
- }
1169
-
1170
- .tooltip-popup-module_tooltip_popup_SLo08q[data-instant] {
1171
- transition: none;
1172
- }
1173
-
1174
- .tooltip-popup-module_tooltip_popup_portal_SLo08q {
1175
- z-index: 50;
1176
- }
1177
-
1178
- .dark .tooltip-popup-module_tooltip_popup_SLo08q {
1179
- background-color: var(--color-gray-light-1);
1180
- color: var(--color-gray-light-12);
1181
- }
1182
- }