@lukso/transaction-view-core 0.7.8 → 0.7.9-dev.1664335
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/CHANGELOG.md +9 -0
- package/package.json +7 -6
- package/.turbo/turbo-build.log +0 -31
- package/.turbo/turbo-typecheck.log +0 -2
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.cts +0 -594
- package/dist/index.d.ts +0 -594
- package/dist/index.js +0 -4826
- package/dist/index.js.map +0 -1
- package/dist/shared/index.cjs +0 -2449
- package/dist/shared/index.cjs.map +0 -1
- package/dist/shared/index.d.cts +0 -876
- package/dist/shared/index.d.ts +0 -876
- package/dist/shared/index.js +0 -2407
- package/dist/shared/index.js.map +0 -1
- package/dist/styles/index.cjs +0 -58
- package/dist/styles/index.cjs.map +0 -1
- package/dist/styles/index.d.cts +0 -9
- package/dist/styles/index.d.ts +0 -9
- package/dist/styles/index.js +0 -31
- package/dist/styles/index.js.map +0 -1
- package/publish.log +0 -1
package/dist/shared/index.js
DELETED
|
@@ -1,2407 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
-
if (decorator = decorators[i])
|
|
7
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
-
if (kind && result) __defProp(target, key, result);
|
|
9
|
-
return result;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
// src/shared/index.ts
|
|
13
|
-
import { safeCustomElement as safeCustomElement12 } from "@lukso/core/utils";
|
|
14
|
-
|
|
15
|
-
// src/shared/address-display.ts
|
|
16
|
-
import { Task } from "@lit/task";
|
|
17
|
-
import { safeCustomElement } from "@lukso/core/utils";
|
|
18
|
-
import {
|
|
19
|
-
useAddressResolver,
|
|
20
|
-
useImageLoader
|
|
21
|
-
} from "@lukso/transaction-view-headless";
|
|
22
|
-
import { css, html, LitElement } from "lit";
|
|
23
|
-
import { property } from "lit/decorators.js";
|
|
24
|
-
var AddressDisplay = class extends LitElement {
|
|
25
|
-
constructor() {
|
|
26
|
-
super(...arguments);
|
|
27
|
-
this.size = "small";
|
|
28
|
-
this.showCopyButton = false;
|
|
29
|
-
this.nameOnly = false;
|
|
30
|
-
this.maxWidth = 200;
|
|
31
|
-
// Composables
|
|
32
|
-
this.imageLoader = useImageLoader();
|
|
33
|
-
this.addressResolver = useAddressResolver();
|
|
34
|
-
this.isLoadingImage = false;
|
|
35
|
-
// Task for loading profile image
|
|
36
|
-
this.imageTask = new Task(this, {
|
|
37
|
-
task: async ([resolved]) => {
|
|
38
|
-
if (!resolved) return null;
|
|
39
|
-
this.isLoadingImage = true;
|
|
40
|
-
try {
|
|
41
|
-
const image = await this.imageLoader.loadProfileImage(resolved, {
|
|
42
|
-
width: this.getSizePixels(),
|
|
43
|
-
height: this.getSizePixels(),
|
|
44
|
-
dpr: window.devicePixelRatio || 1
|
|
45
|
-
});
|
|
46
|
-
return image || this.imageLoader.getFallbackImage(resolved);
|
|
47
|
-
} catch (error) {
|
|
48
|
-
console.warn("Failed to load address image:", error);
|
|
49
|
-
return this.imageLoader.getFallbackImage(resolved || {});
|
|
50
|
-
} finally {
|
|
51
|
-
this.isLoadingImage = false;
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
args: () => [this.resolved]
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* Get the effective address value (supports both `value` and legacy `address` props)
|
|
59
|
-
*/
|
|
60
|
-
get effectiveAddress() {
|
|
61
|
-
return this.value || this.address || "";
|
|
62
|
-
}
|
|
63
|
-
/**
|
|
64
|
-
* Get pixel size for the current size setting
|
|
65
|
-
*/
|
|
66
|
-
getSizePixels() {
|
|
67
|
-
switch (this.size) {
|
|
68
|
-
case "x-small":
|
|
69
|
-
return 16;
|
|
70
|
-
case "small":
|
|
71
|
-
return 24;
|
|
72
|
-
case "medium":
|
|
73
|
-
return 32;
|
|
74
|
-
case "large":
|
|
75
|
-
return 48;
|
|
76
|
-
default:
|
|
77
|
-
return 24;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* Get display name for the address
|
|
82
|
-
*/
|
|
83
|
-
getDisplayName() {
|
|
84
|
-
if (!this.resolved) return "Anonymous";
|
|
85
|
-
const computedName = this.addressResolver.formatDisplayName(this.resolved);
|
|
86
|
-
return computedName || "Anonymous";
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* Check if this is a contract address (shows square icon)
|
|
90
|
-
*/
|
|
91
|
-
get isContract() {
|
|
92
|
-
return this.resolved ? this.imageLoader.isContractAddress(this.resolved) : false;
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* Get prefix for the address display
|
|
96
|
-
*/
|
|
97
|
-
get addressPrefix() {
|
|
98
|
-
return this.resolved ? this.addressResolver.getAddressPrefix(this.resolved) : "@";
|
|
99
|
-
}
|
|
100
|
-
/**
|
|
101
|
-
* Check if should show name colors
|
|
102
|
-
*/
|
|
103
|
-
get shouldShowNameColor() {
|
|
104
|
-
return this.resolved ? this.addressResolver.shouldShowNameColor(this.resolved) : true;
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* Handle copy button click
|
|
108
|
-
*/
|
|
109
|
-
handleCopy() {
|
|
110
|
-
if (navigator.clipboard) {
|
|
111
|
-
navigator.clipboard.writeText(this.effectiveAddress);
|
|
112
|
-
this.dispatchEvent(
|
|
113
|
-
new CustomEvent("address-copied", {
|
|
114
|
-
detail: { address: this.effectiveAddress },
|
|
115
|
-
bubbles: true
|
|
116
|
-
})
|
|
117
|
-
);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
/**
|
|
121
|
-
* Handle address click
|
|
122
|
-
*/
|
|
123
|
-
handleAddressClick() {
|
|
124
|
-
this.dispatchEvent(
|
|
125
|
-
new CustomEvent("address-click", {
|
|
126
|
-
detail: {
|
|
127
|
-
address: this.effectiveAddress,
|
|
128
|
-
resolved: this.resolved
|
|
129
|
-
},
|
|
130
|
-
bubbles: true
|
|
131
|
-
})
|
|
132
|
-
);
|
|
133
|
-
}
|
|
134
|
-
render() {
|
|
135
|
-
const imageResult = this.imageTask.value;
|
|
136
|
-
return html`
|
|
137
|
-
<div class="address-container">
|
|
138
|
-
${this.label ? html`<div class="label">${this.label}</div>` : ""}
|
|
139
|
-
|
|
140
|
-
<div class="address-display" @click=${this.handleAddressClick}>
|
|
141
|
-
<!-- Identity prefix (if present) -->
|
|
142
|
-
${this.resolved?.__identity ? html`
|
|
143
|
-
<span class="identity">
|
|
144
|
-
${this.resolved.__identity}
|
|
145
|
-
<lukso-username
|
|
146
|
-
address=${this.resolved.identity}
|
|
147
|
-
size=${this.size}
|
|
148
|
-
max-width="200"
|
|
149
|
-
has-name-color="false"
|
|
150
|
-
has-address-color="false"
|
|
151
|
-
></lukso-username>
|
|
152
|
-
of
|
|
153
|
-
</span>
|
|
154
|
-
` : ""}
|
|
155
|
-
|
|
156
|
-
<!-- Profile image and name -->
|
|
157
|
-
<lukso-profile
|
|
158
|
-
size=${this.size}
|
|
159
|
-
profile-address=${this.effectiveAddress}
|
|
160
|
-
profile-url=${imageResult?.src || ""}
|
|
161
|
-
has-identicon
|
|
162
|
-
?is-square=${this.isContract}
|
|
163
|
-
></lukso-profile>
|
|
164
|
-
|
|
165
|
-
<!-- Address/Name display -->
|
|
166
|
-
${this.nameOnly ? html`
|
|
167
|
-
<lukso-username
|
|
168
|
-
name=${this.getDisplayName()}
|
|
169
|
-
size=${this.size}
|
|
170
|
-
max-width=${this.maxWidth}
|
|
171
|
-
prefix=${this.addressPrefix}
|
|
172
|
-
?has-name-color=${this.shouldShowNameColor}
|
|
173
|
-
has-address-color="false"
|
|
174
|
-
></lukso-username>
|
|
175
|
-
` : html`
|
|
176
|
-
<lukso-username
|
|
177
|
-
name=${this.getDisplayName()}
|
|
178
|
-
address=${!this.isContract ? this.effectiveAddress : void 0}
|
|
179
|
-
size=${this.size}
|
|
180
|
-
max-width=${this.maxWidth}
|
|
181
|
-
prefix=${this.addressPrefix}
|
|
182
|
-
?has-name-color=${this.shouldShowNameColor}
|
|
183
|
-
?has-address-color=${this.shouldShowNameColor}
|
|
184
|
-
></lukso-username>
|
|
185
|
-
`}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
<!-- Copy button -->
|
|
189
|
-
${this.showCopyButton ? html`
|
|
190
|
-
<button
|
|
191
|
-
class="copy-button"
|
|
192
|
-
@click=${this.handleCopy}
|
|
193
|
-
title="Copy address"
|
|
194
|
-
>
|
|
195
|
-
📋
|
|
196
|
-
</button>
|
|
197
|
-
` : ""}
|
|
198
|
-
</div>
|
|
199
|
-
</div>
|
|
200
|
-
`;
|
|
201
|
-
}
|
|
202
|
-
};
|
|
203
|
-
AddressDisplay.styles = css`
|
|
204
|
-
:host {
|
|
205
|
-
display: inline-block;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.address-container {
|
|
209
|
-
display: flex;
|
|
210
|
-
flex-direction: column;
|
|
211
|
-
gap: 4px;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.label {
|
|
215
|
-
font-size: 12px;
|
|
216
|
-
color: var(--neutral-60, #666);
|
|
217
|
-
font-weight: 500;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.address-display {
|
|
221
|
-
display: inline-flex;
|
|
222
|
-
align-items: center;
|
|
223
|
-
gap: 8px;
|
|
224
|
-
cursor: pointer;
|
|
225
|
-
padding: 4px;
|
|
226
|
-
border-radius: 4px;
|
|
227
|
-
transition: background-color 0.2s;
|
|
228
|
-
min-width: 200px;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
.address-display:hover {
|
|
232
|
-
background-color: var(--neutral-95, #f5f5f5);
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
.identity {
|
|
236
|
-
font-size: 12px;
|
|
237
|
-
color: var(--neutral-60, #666);
|
|
238
|
-
margin-right: 4px;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.copy-button {
|
|
242
|
-
background: none;
|
|
243
|
-
border: 1px solid var(--neutral-80, #ccc);
|
|
244
|
-
border-radius: 4px;
|
|
245
|
-
padding: 2px 4px;
|
|
246
|
-
cursor: pointer;
|
|
247
|
-
font-size: 12px;
|
|
248
|
-
opacity: 0;
|
|
249
|
-
transition: opacity 0.2s;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.copy-button:hover {
|
|
253
|
-
background-color: var(--neutral-90, #eee);
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
.address-display:hover .copy-button {
|
|
257
|
-
opacity: 1;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
/* Ensure LUKSO web components are properly styled */
|
|
262
|
-
lukso-profile,
|
|
263
|
-
lukso-username {
|
|
264
|
-
display: inline-flex;
|
|
265
|
-
align-items: center;
|
|
266
|
-
}
|
|
267
|
-
`;
|
|
268
|
-
__decorateClass([
|
|
269
|
-
property()
|
|
270
|
-
], AddressDisplay.prototype, "value", 2);
|
|
271
|
-
__decorateClass([
|
|
272
|
-
property()
|
|
273
|
-
], AddressDisplay.prototype, "address", 2);
|
|
274
|
-
__decorateClass([
|
|
275
|
-
property({ type: Object })
|
|
276
|
-
], AddressDisplay.prototype, "resolved", 2);
|
|
277
|
-
__decorateClass([
|
|
278
|
-
property()
|
|
279
|
-
], AddressDisplay.prototype, "size", 2);
|
|
280
|
-
__decorateClass([
|
|
281
|
-
property()
|
|
282
|
-
], AddressDisplay.prototype, "label", 2);
|
|
283
|
-
__decorateClass([
|
|
284
|
-
property({ type: Boolean, attribute: "show-copy-button" })
|
|
285
|
-
], AddressDisplay.prototype, "showCopyButton", 2);
|
|
286
|
-
__decorateClass([
|
|
287
|
-
property({ type: Boolean, attribute: "name-only" })
|
|
288
|
-
], AddressDisplay.prototype, "nameOnly", 2);
|
|
289
|
-
__decorateClass([
|
|
290
|
-
property({ type: Number, attribute: "max-width" })
|
|
291
|
-
], AddressDisplay.prototype, "maxWidth", 2);
|
|
292
|
-
AddressDisplay = __decorateClass([
|
|
293
|
-
safeCustomElement("address-display")
|
|
294
|
-
], AddressDisplay);
|
|
295
|
-
|
|
296
|
-
// src/shared/address-view.ts
|
|
297
|
-
import { Task as Task2 } from "@lit/task";
|
|
298
|
-
import { safeCustomElement as safeCustomElement2 } from "@lukso/core/utils";
|
|
299
|
-
import { useAddressResolver as useAddressResolver2 } from "@lukso/transaction-view-headless";
|
|
300
|
-
import makeBlockie from "ethereum-blockies-base64";
|
|
301
|
-
import { html as html2 } from "lit";
|
|
302
|
-
import { property as property2, state } from "lit/decorators.js";
|
|
303
|
-
|
|
304
|
-
// src/shared/load-web-components.ts
|
|
305
|
-
var originalDefine = typeof customElements !== "undefined" ? customElements.define.bind(customElements) : null;
|
|
306
|
-
if (typeof customElements !== "undefined" && originalDefine) {
|
|
307
|
-
customElements.define = (name, constructor, options) => {
|
|
308
|
-
if (!customElements.get(name)) {
|
|
309
|
-
originalDefine(name, constructor, options);
|
|
310
|
-
}
|
|
311
|
-
};
|
|
312
|
-
}
|
|
313
|
-
if (originalDefine && typeof customElements !== "undefined") {
|
|
314
|
-
customElements.define = originalDefine;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
// src/styles/styles.css?__raw__
|
|
318
|
-
var styles_default = '/**\n * @file Main styles\n *\n * This file contain general styles that should be applied to host page.\n */\n:root {\n --neutral-10: #121b21;\n --neutral-15: #1b2832;\n --neutral-20: #243542;\n --neutral-25: #2d4253;\n --neutral-30: #365063;\n --neutral-35: #3e5d74;\n --neutral-40: #476a85;\n --neutral-45: #507795;\n --neutral-50: #5985a6;\n --neutral-55: #6a91af;\n --neutral-60: #7a9db8;\n --neutral-65: #8ba9c1;\n --neutral-70: #9cb6c9;\n --neutral-75: #acc2d2;\n --neutral-80: #bdcedb;\n --neutral-85: #cddae4;\n --neutral-90: #dee7ed;\n --neutral-95: #eef3f6;\n --neutral-97: #f5f8fa;\n --neutral-98: #f8fafb;\n --neutral-100: #ffffff;\n --honey-72: #fad275;\n --honey-75: #fbd784;\n --honey-82: #fce2a6;\n --honey-85: #fce7b5;\n --honey-92: #fef2d8;\n --coral-65: #f37c58;\n --coral-74: #f69e83;\n --coral-75: #f7a288;\n --coral-84: #fac3b3;\n --coral-85: #fac7b7;\n --coral-94: #fde9e2;\n --warm-77: #ffbb8a;\n --warm-87: #ffd8bd;\n --warm-97: #fff6f0;\n --sea-salt-57: #7fa4a4;\n --sea-salt-67: #9db9b9;\n --sea-salt-88: #dbe6e6;\n --cloud-43: #447c97;\n --cloud-75: #a7c7d7;\n --cloud-88: #d5e4ec;\n --ocean-38: #3c6286;\n --ocean-75: #a7c0d7;\n --ocean-88: #d5e1ec;\n --sky-64: #68a5de;\n --sky-75: #96c1e8;\n --sky-85: #c0daf1;\n --lukso-50: #aa5578;\n --lukso-60: #bb7793;\n --lukso-70: #cc99ae;\n --lukso-80: #ddbbc9;\n --lukso-90: #eedde4;\n --yellow-25: #804d00;\n --yellow-55: #ffa31a;\n --yellow-65: #ffb84d;\n --yellow-75: #ffcc80;\n --yellow-85: #ffe0b3;\n --yellow-95: #fff5e5;\n --green-45: #31b452;\n --green-54: #47cd68;\n --green-63: #6bd686;\n --green-75: #9be4ad;\n --green-85: #c3efce;\n --green-95: #ebfaef;\n --blue-40: #0452c8;\n --blue-50: #0567fa;\n --blue-60: #3785fb;\n --blue-75: #82b3fc;\n --blue-85: #b4d1fd;\n --blue-95: #e6f0fe;\n --red-55: #e23636;\n --red-65: #e96363;\n --red-75: #ef8f8f;\n --red-85: #f5bcbc;\n --red-95: #fce9e9;\n --purple-15: #1d202f;\n --purple-18: #232739;\n --purple-31: #3c4262;\n --purple-41: #4f5882;\n --purple-51: #646ea0;\n --purple-58: #7a83ae;\n --purple-63: #8a92b7;\n --purple-82: #c6cadc;\n --purple-94: #ecedf3;\n --pink-90: #f8dad3;\n --pink-91: #f9ddd7;\n --pink-92: #f9e1dc;\n --pink-93: #fae5e0;\n --pink-94: #fbe9e5;\n --pink-95: #fcece9;\n --pink-96: #fcf0ed;\n --pink-97: #fdf4f2;\n --measure-50: #e8178a;\n --measure-70: #f174b9;\n --measure-80: #f6a2d0;\n --measure-97: #fef1f8;\n --grey-10: #1a1a1a;\n --grey-15: #262626;\n --grey-20: #333333;\n --grey-25: #404040;\n --grey-30: #4d4d4d;\n --grey-35: #595959;\n --grey-40: #666666;\n --grey-45: #737373;\n --grey-50: #808080;\n --grey-55: #8c8c8c;\n --grey-60: #999999;\n --grey-65: #a6a6a6;\n --grey-70: #b3b3b3;\n --grey-75: #bfbfbf;\n --grey-80: #cccccc;\n --gradient-1-start: #D39B9D;\n --gradient-1-end: #9071D1;\n --gradient-2-start: #F8DAD3;\n --gradient-2-end: #CC99AE;\n --gradient-3-start: #393e56;\n --gradient-3-end: #646ea0;\n}\n/**\n * @file Fonts\n *\n * This file contains all fonts used in designs.\n */\n@font-face {\n font-family: Inter;\n src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: Inter;\n src: url("/assets/fonts/Inter-ExtraBold.woff2") format("woff2");\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: Inter;\n src: url("/assets/fonts/Inter-Bold.woff2") format("woff2");\n font-weight: bold;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: Inter;\n src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: Inter;\n src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: Inter;\n src: url("/assets/fonts/Inter-Thin.woff2") format("woff2");\n font-weight: 100;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: "PT Mono";\n src: url("/assets/fonts/PT-Mono-Regular.woff2") format("woff2");\n font-weight: normal;\n font-style: normal;\n}\n@font-face {\n font-family: "PT Mono";\n src: url("/assets/fonts/PT-Mono-Bold.woff2") format("woff2");\n font-weight: bold;\n font-style: normal;\n}\n/**\n * @file Typography\n *\n * This file contains all typography classes used in designs.\n * They should be used instead of individual font attributes.\n *\n * You can use them same as the normal Tailwind classes, e.g.: class="heading-inter-26-semi-bold"\n */\n/**\n * @file Variables\n *\n * This file contains all CSS variables used in designs.\n */\n/**\n * Tailwind v4 shadow system variables\n * Web components use Tailwind v4 internally, which requires these CSS variables\n * to be initialized for box-shadow to render correctly in Tailwind v3 consumers.\n */\n*,\n::after,\n::before,\n::backdrop,\n::file-selector-button {\n --tw-border-style: solid;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-colored: 0 0 #0000;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n}\n.tippy-box[data-animation=fade][data-state=hidden] {\n opacity: 0;\n}\n.tippy-arrow::before {\n content: "";\n position: absolute;\n border-color: transparent;\n border-style: solid;\n}\n.tippy-box[data-placement^=top] > .tippy-arrow::before {\n border-top-color: initial;\n transform-origin: center top;\n}\n.tippy-box[data-placement^=bottom] > .tippy-arrow::before {\n border-bottom-color: initial;\n transform-origin: center bottom;\n}\n.tippy-box[data-placement^=left] > .tippy-arrow::before {\n border-left-color: initial;\n transform-origin: center left;\n}\n.tippy-box[data-placement^=right] > .tippy-arrow::before {\n border-right-color: initial;\n transform-origin: center right;\n}\n.tippy-box[data-inertia][data-state=visible] {\n transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);\n}\n.tippy-arrow {\n width: 16px;\n height: 16px;\n}\n.tippy-size-medium {\n border-radius: 4px;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 10px;\n font-weight: 600;\n font-style: normal;\n line-height: 12px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-size-medium[data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-size-medium[data-placement^=top] > .tippy-arrow::before {\n bottom: -6px;\n left: 2px;\n border-width: 6px 6px 0;\n}\n.tippy-size-medium[data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-size-medium[data-placement^=bottom] > .tippy-arrow::before {\n top: -6px;\n left: 2px;\n border-width: 0 6px 6px;\n}\n.tippy-size-medium[data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-size-medium[data-placement^=left] > .tippy-arrow::before {\n border-width: 6px 0 6px 6px;\n right: -6px;\n top: 2px;\n}\n.tippy-size-medium[data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-size-medium[data-placement^=right] > .tippy-arrow::before {\n left: -6px;\n top: 2px;\n border-width: 6px 6px 6px 0;\n}\n.tippy-size-large {\n border-radius: 8px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n font-style: normal;\n line-height: 20px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-size-large[data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-size-large[data-placement^=top] > .tippy-arrow::before {\n bottom: -8px;\n left: 0;\n border-width: 8px 8px 0;\n}\n.tippy-size-large[data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-size-large[data-placement^=bottom] > .tippy-arrow::before {\n top: -8px;\n left: 0;\n border-width: 0 8px 8px;\n}\n.tippy-size-large[data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-size-large[data-placement^=left] > .tippy-arrow::before {\n border-width: 8px 0 8px 8px;\n right: -8px;\n}\n.tippy-size-large[data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-size-large[data-placement^=right] > .tippy-arrow::before {\n left: -8px;\n border-width: 8px 8px 8px 0;\n}\n.tippy-variant-dark {\n --tw-bg-opacity: 1;\n background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-variant-dark[data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-dark[data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-dark[data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-dark[data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-dark > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-variant-dark > .tippy-svg-arrow {\n fill: #365063;\n}\n.tippy-variant-light {\n --tw-bg-opacity: 1;\n background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-variant-light[data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-light[data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-light[data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-light[data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-light > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n}\n.tippy-variant-light > .tippy-svg-arrow {\n fill: #f5f8fa;\n}\n.tippy-variant-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-variant-white[data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-white[data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-white[data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-white[data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-white > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.tippy-variant-white > .tippy-svg-arrow {\n fill: #ffffff;\n}\n.tippy-variant-success {\n --tw-bg-opacity: 1;\n background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-variant-success[data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-success[data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-success[data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-success[data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-success > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n}\n.tippy-variant-success > .tippy-svg-arrow {\n fill: #47cd68;\n}\n.tippy-variant-danger {\n --tw-bg-opacity: 1;\n background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-variant-danger[data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-danger[data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-danger[data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-danger[data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-variant-danger > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-variant-danger > .tippy-svg-arrow {\n fill: #e96363;\n}\n.tippy-box[data-theme~=dark-medium] {\n border-radius: 4px;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 10px;\n font-weight: 600;\n font-style: normal;\n line-height: 12px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=top] > .tippy-arrow::before {\n bottom: -6px;\n left: 2px;\n border-width: 6px 6px 0;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=bottom] > .tippy-arrow::before {\n top: -6px;\n left: 2px;\n border-width: 0 6px 6px;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=left] > .tippy-arrow::before {\n border-width: 6px 0 6px 6px;\n right: -6px;\n top: 2px;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=right] > .tippy-arrow::before {\n left: -6px;\n top: 2px;\n border-width: 6px 6px 6px 0;\n}\n.tippy-box[data-theme~=dark-medium] {\n --tw-bg-opacity: 1;\n background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium][data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium] > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=dark-medium] > .tippy-svg-arrow {\n fill: #365063;\n}\n.tippy-box[data-theme~=dark-large] {\n border-radius: 8px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n font-style: normal;\n line-height: 20px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=dark-large][data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=top] > .tippy-arrow::before {\n bottom: -8px;\n left: 0;\n border-width: 8px 8px 0;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=bottom] > .tippy-arrow::before {\n top: -8px;\n left: 0;\n border-width: 0 8px 8px;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=left] > .tippy-arrow::before {\n border-width: 8px 0 8px 8px;\n right: -8px;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-box[data-theme~=dark-large][data-placement^=right] > .tippy-arrow::before {\n left: -8px;\n border-width: 8px 8px 8px 0;\n}\n.tippy-box[data-theme~=dark-large] {\n --tw-bg-opacity: 1;\n background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large][data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large][data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large][data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large][data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(54 80 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large] > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(54 80 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=dark-large] > .tippy-svg-arrow {\n fill: #365063;\n}\n.tippy-box[data-theme~=light-medium] {\n border-radius: 4px;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 10px;\n font-weight: 600;\n font-style: normal;\n line-height: 12px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=light-medium][data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=top] > .tippy-arrow::before {\n bottom: -6px;\n left: 2px;\n border-width: 6px 6px 0;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=bottom] > .tippy-arrow::before {\n top: -6px;\n left: 2px;\n border-width: 0 6px 6px;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=left] > .tippy-arrow::before {\n border-width: 6px 0 6px 6px;\n right: -6px;\n top: 2px;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-box[data-theme~=light-medium][data-placement^=right] > .tippy-arrow::before {\n left: -6px;\n top: 2px;\n border-width: 6px 6px 6px 0;\n}\n.tippy-box[data-theme~=light-medium] {\n --tw-bg-opacity: 1;\n background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium][data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium][data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium][data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium][data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium] > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=light-medium] > .tippy-svg-arrow {\n fill: #f5f8fa;\n}\n.tippy-box[data-theme~=light-large] {\n border-radius: 8px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n font-style: normal;\n line-height: 20px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=light-large][data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-box[data-theme~=light-large][data-placement^=top] > .tippy-arrow::before {\n bottom: -8px;\n left: 0;\n border-width: 8px 8px 0;\n}\n.tippy-box[data-theme~=light-large][data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-box[data-theme~=light-large][data-placement^=bottom] > .tippy-arrow::before {\n top: -8px;\n left: 0;\n border-width: 0 8px 8px;\n}\n.tippy-box[data-theme~=light-large][data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-box[data-theme~=light-large][data-placement^=left] > .tippy-arrow::before {\n border-width: 8px 0 8px 8px;\n right: -8px;\n}\n.tippy-box[data-theme~=light-large][data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-box[data-theme~=light-large][data-placement^=right] > .tippy-arrow::before {\n left: -8px;\n border-width: 8px 8px 8px 0;\n}\n.tippy-box[data-theme~=light-large] {\n --tw-bg-opacity: 1;\n background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=light-large][data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-large][data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-large][data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-large][data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(245 248 250 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=light-large] > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(245 248 250 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=light-large] > .tippy-svg-arrow {\n fill: #f5f8fa;\n}\n.tippy-box[data-theme~=white-medium] {\n border-radius: 4px;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 10px;\n font-weight: 600;\n font-style: normal;\n line-height: 12px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=white-medium][data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=top] > .tippy-arrow::before {\n bottom: -6px;\n left: 2px;\n border-width: 6px 6px 0;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=bottom] > .tippy-arrow::before {\n top: -6px;\n left: 2px;\n border-width: 0 6px 6px;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=left] > .tippy-arrow::before {\n border-width: 6px 0 6px 6px;\n right: -6px;\n top: 2px;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-box[data-theme~=white-medium][data-placement^=right] > .tippy-arrow::before {\n left: -6px;\n top: 2px;\n border-width: 6px 6px 6px 0;\n}\n.tippy-box[data-theme~=white-medium] {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium][data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium][data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium][data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium][data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium] > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=white-medium] > .tippy-svg-arrow {\n fill: #ffffff;\n}\n.tippy-box[data-theme~=white-large] {\n border-radius: 8px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n font-style: normal;\n line-height: 20px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=white-large][data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-box[data-theme~=white-large][data-placement^=top] > .tippy-arrow::before {\n bottom: -8px;\n left: 0;\n border-width: 8px 8px 0;\n}\n.tippy-box[data-theme~=white-large][data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-box[data-theme~=white-large][data-placement^=bottom] > .tippy-arrow::before {\n top: -8px;\n left: 0;\n border-width: 0 8px 8px;\n}\n.tippy-box[data-theme~=white-large][data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-box[data-theme~=white-large][data-placement^=left] > .tippy-arrow::before {\n border-width: 8px 0 8px 8px;\n right: -8px;\n}\n.tippy-box[data-theme~=white-large][data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-box[data-theme~=white-large][data-placement^=right] > .tippy-arrow::before {\n left: -8px;\n border-width: 8px 8px 8px 0;\n}\n.tippy-box[data-theme~=white-large] {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=white-large][data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-large][data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-large][data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-large][data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(255 255 255 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=white-large] > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=white-large] > .tippy-svg-arrow {\n fill: #ffffff;\n}\n.tippy-box[data-theme~=success-medium] {\n border-radius: 4px;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 10px;\n font-weight: 600;\n font-style: normal;\n line-height: 12px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=success-medium][data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=top] > .tippy-arrow::before {\n bottom: -6px;\n left: 2px;\n border-width: 6px 6px 0;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=bottom] > .tippy-arrow::before {\n top: -6px;\n left: 2px;\n border-width: 0 6px 6px;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=left] > .tippy-arrow::before {\n border-width: 6px 0 6px 6px;\n right: -6px;\n top: 2px;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-box[data-theme~=success-medium][data-placement^=right] > .tippy-arrow::before {\n left: -6px;\n top: 2px;\n border-width: 6px 6px 6px 0;\n}\n.tippy-box[data-theme~=success-medium] {\n --tw-bg-opacity: 1;\n background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium][data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium][data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium][data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium][data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium] > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=success-medium] > .tippy-svg-arrow {\n fill: #47cd68;\n}\n.tippy-box[data-theme~=success-large] {\n border-radius: 8px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n font-style: normal;\n line-height: 20px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=success-large][data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-box[data-theme~=success-large][data-placement^=top] > .tippy-arrow::before {\n bottom: -8px;\n left: 0;\n border-width: 8px 8px 0;\n}\n.tippy-box[data-theme~=success-large][data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-box[data-theme~=success-large][data-placement^=bottom] > .tippy-arrow::before {\n top: -8px;\n left: 0;\n border-width: 0 8px 8px;\n}\n.tippy-box[data-theme~=success-large][data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-box[data-theme~=success-large][data-placement^=left] > .tippy-arrow::before {\n border-width: 8px 0 8px 8px;\n right: -8px;\n}\n.tippy-box[data-theme~=success-large][data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-box[data-theme~=success-large][data-placement^=right] > .tippy-arrow::before {\n left: -8px;\n border-width: 8px 8px 8px 0;\n}\n.tippy-box[data-theme~=success-large] {\n --tw-bg-opacity: 1;\n background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=success-large][data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-large][data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-large][data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-large][data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(71 205 104 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=success-large] > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(71 205 104 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=success-large] > .tippy-svg-arrow {\n fill: #47cd68;\n}\n.tippy-box[data-theme~=danger-medium] {\n border-radius: 4px;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 10px;\n font-weight: 600;\n font-style: normal;\n line-height: 12px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=top] > .tippy-arrow::before {\n bottom: -6px;\n left: 2px;\n border-width: 6px 6px 0;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=bottom] > .tippy-arrow::before {\n top: -6px;\n left: 2px;\n border-width: 0 6px 6px;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=left] > .tippy-arrow::before {\n border-width: 6px 0 6px 6px;\n right: -6px;\n top: 2px;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=right] > .tippy-arrow::before {\n left: -6px;\n top: 2px;\n border-width: 6px 6px 6px 0;\n}\n.tippy-box[data-theme~=danger-medium] {\n --tw-bg-opacity: 1;\n background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium][data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium] > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=danger-medium] > .tippy-svg-arrow {\n fill: #e96363;\n}\n.tippy-box[data-theme~=danger-large] {\n border-radius: 8px;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n font-style: normal;\n line-height: 20px;\n --tw-shadow: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);\n --tw-shadow-colored: 0px 27px 12px 0px var(--tw-shadow-color), 0px 18px 7px 0px var(--tw-shadow-color), 0px 10px 6px 0px var(--tw-shadow-color), 0px 4px 4px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 0px 14px 0px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tippy-box[data-theme~=danger-large][data-placement^=top] > .tippy-arrow {\n bottom: 0;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=top] > .tippy-arrow::before {\n bottom: -8px;\n left: 0;\n border-width: 8px 8px 0;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=bottom] > .tippy-arrow {\n top: 0;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=bottom] > .tippy-arrow::before {\n top: -8px;\n left: 0;\n border-width: 0 8px 8px;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=left] > .tippy-arrow {\n right: 0;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=left] > .tippy-arrow::before {\n border-width: 8px 0 8px 8px;\n right: -8px;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=right] > .tippy-arrow {\n left: 0;\n}\n.tippy-box[data-theme~=danger-large][data-placement^=right] > .tippy-arrow::before {\n left: -8px;\n border-width: 8px 8px 8px 0;\n}\n.tippy-box[data-theme~=danger-large] {\n --tw-bg-opacity: 1;\n background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large][data-placement^=top] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-top-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large][data-placement^=bottom] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-bottom-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large][data-placement^=left] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-left-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large][data-placement^=right] .tippy-arrow::before {\n --tw-border-opacity: 1;\n border-right-color: rgb(233 99 99 / var(--tw-border-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large] > .tippy-backdrop {\n --tw-bg-opacity: 1;\n background-color: rgb(233 99 99 / var(--tw-bg-opacity, 1));\n}\n.tippy-box[data-theme~=danger-large] > .tippy-svg-arrow {\n fill: #e96363;\n}\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n --tw-contain-size: ;\n --tw-contain-layout: ;\n --tw-contain-paint: ;\n --tw-contain-style: ;\n}\n/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com\n */\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: #e5e7eb; /* 2 */\n}\n::before,\n::after {\n --tw-content: \'\';\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user\'s configured `sans` font-family by default.\n5. Use the user\'s configured `sans` font-feature-settings by default.\n6. Use the user\'s configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -moz-tab-size: 4; /* 3 */\n -o-tab-size: 4;\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n/*\n1. Use the user\'s configured `mono` font-family by default.\n2. Use the user\'s configured `mono` font-feature-settings by default.\n3. Use the user\'s configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n font-family: "PT Mono", sans-serif; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n letter-spacing: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type=\'button\']),\ninput:where([type=\'reset\']),\ninput:where([type=\'submit\']) {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type=\'search\'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n display: list-item;\n}\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\nfieldset {\n margin: 0;\n padding: 0;\n}\nlegend {\n padding: 0;\n}\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user\'s configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role="button"] {\n cursor: pointer;\n}\n/*\nMake sure disabled buttons don\'t get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden="until-found"])) {\n display: none;\n}\n.heading-inter-21-semi-bold {\n font-family: Inter, sans-serif;\n font-size: 21px;\n font-weight: 600;\n font-style: normal;\n line-height: 26px;\n}\n.heading-inter-17-semi-bold {\n font-family: Inter, sans-serif;\n font-size: 17px;\n font-weight: 600;\n font-style: normal;\n line-height: 22px;\n}\n.heading-inter-14-bold {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 700;\n font-style: normal;\n line-height: 17px;\n}\n.paragraph-inter-20-regular {\n font-family: Inter, sans-serif;\n font-size: 20px;\n font-weight: 400;\n font-style: normal;\n line-height: 32px;\n}\n.paragraph-inter-16-regular {\n font-family: Inter, sans-serif;\n font-size: 16px;\n font-weight: 400;\n font-style: normal;\n line-height: 24px;\n}\n.paragraph-inter-14-regular {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n font-style: normal;\n line-height: 22px;\n}\n.paragraph-inter-14-semi-bold {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 600;\n font-style: normal;\n line-height: 22px;\n}\n.paragraph-inter-12-regular {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n font-style: normal;\n line-height: 20px;\n}\n.paragraph-inter-12-medium {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n line-height: 20px;\n}\n.paragraph-inter-12-semi-bold {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 600;\n font-style: normal;\n line-height: 20px;\n}\n.paragraph-ptmono-24-bold {\n font-family: "PT Mono", sans-serif;\n font-size: 24px;\n font-weight: 700;\n font-style: normal;\n line-height: 26px;\n}\n.paragraph-ptmono-16-bold {\n font-family: "PT Mono", sans-serif;\n font-size: 16px;\n font-weight: 700;\n font-style: normal;\n line-height: 22px;\n}\n.paragraph-ptmono-14-bold {\n font-family: "PT Mono", sans-serif;\n font-size: 14px;\n font-weight: 700;\n font-style: normal;\n line-height: 20px;\n}\n.paragraph-ptmono-12-bold {\n font-family: "PT Mono", sans-serif;\n font-size: 12px;\n font-weight: 700;\n font-style: normal;\n line-height: 14px;\n}\n.container {\n width: 100%;\n}\n@media (min-width: 640px) {\n .container {\n max-width: 640px;\n }\n}\n@media (min-width: 768px) {\n .container {\n max-width: 768px;\n }\n}\n@media (min-width: 1024px) {\n .container {\n max-width: 1024px;\n }\n}\n@media (min-width: 1280px) {\n .container {\n max-width: 1280px;\n }\n}\n@media (min-width: 1536px) {\n .container {\n max-width: 1536px;\n }\n}\n.prose {\n color: var(--tw-prose-body);\n max-width: 65ch;\n}\n.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n}\n.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-lead);\n font-size: 1.25em;\n line-height: 1.6;\n margin-top: 1.2em;\n margin-bottom: 1.2em;\n}\n.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-links);\n text-decoration: underline;\n font-weight: 500;\n}\n.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-bold);\n font-weight: 600;\n}\n.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: inherit;\n}\n.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: inherit;\n}\n.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: inherit;\n}\n.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: decimal;\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n padding-inline-start: 1.625em;\n}\n.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: upper-alpha;\n}\n.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: lower-alpha;\n}\n.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: upper-alpha;\n}\n.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: lower-alpha;\n}\n.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: upper-roman;\n}\n.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: lower-roman;\n}\n.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: upper-roman;\n}\n.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: lower-roman;\n}\n.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: decimal;\n}\n.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n list-style-type: disc;\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n padding-inline-start: 1.625em;\n}\n.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {\n font-weight: 400;\n color: var(--tw-prose-counters);\n}\n.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {\n color: var(--tw-prose-bullets);\n}\n.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n margin-top: 1.25em;\n}\n.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n border-color: var(--tw-prose-hr);\n border-top-width: 1px;\n margin-top: 3em;\n margin-bottom: 3em;\n}\n.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-weight: 500;\n font-style: italic;\n color: var(--tw-prose-quotes);\n border-inline-start-width: 0.25rem;\n border-inline-start-color: var(--tw-prose-quote-borders);\n quotes: "\\201C""\\201D""\\2018""\\2019";\n margin-top: 1.6em;\n margin-bottom: 1.6em;\n padding-inline-start: 1em;\n}\n.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {\n content: open-quote;\n}\n.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {\n content: close-quote;\n}\n.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 800;\n font-size: 2.25em;\n margin-top: 0;\n margin-bottom: 0.8888889em;\n line-height: 1.1111111;\n}\n.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-weight: 900;\n color: inherit;\n}\n.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 700;\n font-size: 1.5em;\n margin-top: 2em;\n margin-bottom: 1em;\n line-height: 1.3333333;\n}\n.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-weight: 800;\n color: inherit;\n}\n.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n font-size: 1.25em;\n margin-top: 1.6em;\n margin-bottom: 0.6em;\n line-height: 1.6;\n}\n.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-weight: 700;\n color: inherit;\n}\n.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n line-height: 1.5;\n}\n.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-weight: 700;\n color: inherit;\n}\n.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n display: block;\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-weight: 500;\n font-family: inherit;\n color: var(--tw-prose-kbd);\n box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);\n font-size: 0.875em;\n border-radius: 0.3125rem;\n padding-top: 0.1875em;\n padding-inline-end: 0.375em;\n padding-bottom: 0.1875em;\n padding-inline-start: 0.375em;\n}\n.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-code);\n font-weight: 600;\n font-size: 0.875em;\n}\n.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {\n content: "`";\n}\n.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {\n content: "`";\n}\n.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: inherit;\n}\n.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: inherit;\n}\n.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: inherit;\n font-size: 0.875em;\n}\n.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: inherit;\n font-size: 0.9em;\n}\n.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: inherit;\n}\n.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: inherit;\n}\n.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: inherit;\n}\n.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-pre-code);\n background-color: var(--tw-prose-pre-bg);\n overflow-x: auto;\n font-weight: 400;\n font-size: 0.875em;\n line-height: 1.7142857;\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n border-radius: 0.375rem;\n padding-top: 0.8571429em;\n padding-inline-end: 1.1428571em;\n padding-bottom: 0.8571429em;\n padding-inline-start: 1.1428571em;\n}\n.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n background-color: transparent;\n border-width: 0;\n border-radius: 0;\n padding: 0;\n font-weight: inherit;\n color: inherit;\n font-size: inherit;\n font-family: inherit;\n line-height: inherit;\n}\n.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {\n content: none;\n}\n.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {\n content: none;\n}\n.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n width: 100%;\n table-layout: auto;\n margin-top: 2em;\n margin-bottom: 2em;\n font-size: 0.875em;\n line-height: 1.7142857;\n}\n.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n border-bottom-width: 1px;\n border-bottom-color: var(--tw-prose-th-borders);\n}\n.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-headings);\n font-weight: 600;\n vertical-align: bottom;\n padding-inline-end: 0.5714286em;\n padding-bottom: 0.5714286em;\n padding-inline-start: 0.5714286em;\n}\n.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n border-bottom-width: 1px;\n border-bottom-color: var(--tw-prose-td-borders);\n}\n.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n border-bottom-width: 0;\n}\n.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n vertical-align: baseline;\n}\n.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n border-top-width: 1px;\n border-top-color: var(--tw-prose-th-borders);\n}\n.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n vertical-align: top;\n}\n.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n text-align: start;\n}\n.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-captions);\n font-size: 0.875em;\n line-height: 1.4285714;\n margin-top: 0.8571429em;\n}\n.prose {\n --tw-prose-body: oklch(37.3% 0.034 259.733);\n --tw-prose-headings: oklch(21% 0.034 264.665);\n --tw-prose-lead: oklch(44.6% 0.03 256.802);\n --tw-prose-links: oklch(21% 0.034 264.665);\n --tw-prose-bold: oklch(21% 0.034 264.665);\n --tw-prose-counters: oklch(55.1% 0.027 264.364);\n --tw-prose-bullets: oklch(87.2% 0.01 258.338);\n --tw-prose-hr: oklch(92.8% 0.006 264.531);\n --tw-prose-quotes: oklch(21% 0.034 264.665);\n --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);\n --tw-prose-captions: oklch(55.1% 0.027 264.364);\n --tw-prose-kbd: oklch(21% 0.034 264.665);\n --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);\n --tw-prose-code: oklch(21% 0.034 264.665);\n --tw-prose-pre-code: oklch(92.8% 0.006 264.531);\n --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);\n --tw-prose-th-borders: oklch(87.2% 0.01 258.338);\n --tw-prose-td-borders: oklch(92.8% 0.006 264.531);\n --tw-prose-invert-body: oklch(87.2% 0.01 258.338);\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);\n --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);\n --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);\n --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);\n --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);\n --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);\n --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);\n font-size: 1rem;\n line-height: 1.75;\n}\n.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n}\n.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.375em;\n}\n.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.375em;\n}\n.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.75em;\n margin-bottom: 0.75em;\n}\n.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.25em;\n}\n.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.25em;\n}\n.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.25em;\n}\n.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.25em;\n}\n.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.75em;\n margin-bottom: 0.75em;\n}\n.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n}\n.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n padding-inline-start: 1.625em;\n}\n.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-top: 0.5714286em;\n padding-inline-end: 0.5714286em;\n padding-bottom: 0.5714286em;\n padding-inline-start: 0.5714286em;\n}\n.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 0;\n}\n.prose-sm {\n font-size: 0.875rem;\n line-height: 1.6;\n}\n.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n line-height: 1.5;\n}\n.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.2857143em;\n line-height: 1.5555556;\n margin-top: 0.8888889em;\n margin-bottom: 0.8888889em;\n}\n.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1.1111111em;\n padding-left: 1em;\n border-left-width: 0.25rem;\n font-style: italic;\n color: inherit;\n}\n.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 2.1428571em;\n margin-top: 0.75em;\n margin-bottom: 0.5em;\n line-height: 1.2;\n}\n.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.4285714em;\n margin-top: 0.65em;\n margin-bottom: 0.45em;\n line-height: 1.25;\n}\n.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.2857143em;\n margin-top: 0.6em;\n margin-bottom: 0.4em;\n line-height: 1.3;\n}\n.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.35em;\n line-height: 1.35;\n}\n.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8571429em;\n border-radius: 0.3125rem;\n padding-top: 0.1428571em;\n padding-inline-end: 0.3571429em;\n padding-bottom: 0.1428571em;\n padding-inline-start: 0.3571429em;\n}\n.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8571429em;\n}\n.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.9em;\n}\n.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8888889em;\n}\n.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8571429em;\n line-height: 1.45;\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n border-radius: 0.25rem;\n padding-top: 0.6666667em;\n padding-inline-end: 1em;\n padding-bottom: 0.6666667em;\n padding-inline-start: 1em;\n box-sizing: border-box;\n max-width: 100%;\n overflow-x: auto;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n}\n.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1.5714286em;\n padding-left: 1.25em;\n}\n.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1.5714286em;\n padding-left: 1.25em;\n}\n.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n}\n.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.4285714em;\n}\n.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.4285714em;\n}\n.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5714286em;\n margin-bottom: 0.5714286em;\n}\n.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.1428571em;\n}\n.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.1428571em;\n}\n.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.1428571em;\n}\n.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.1428571em;\n}\n.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n}\n.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.1428571em;\n margin-bottom: 1.1428571em;\n}\n.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.1428571em;\n}\n.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.2857143em;\n padding-inline-start: 1.5714286em;\n}\n.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8571429em;\n line-height: 1.5;\n}\n.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 1em;\n padding-bottom: 0.6666667em;\n padding-inline-start: 1em;\n}\n.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-top: 0.6666667em;\n padding-inline-end: 1em;\n padding-bottom: 0.6666667em;\n padding-inline-start: 1em;\n}\n.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.7142857em;\n margin-bottom: 1.7142857em;\n}\n.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8571429em;\n line-height: 1.3333333;\n margin-top: 0.6666667em;\n}\n.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 0;\n}\n.prose-sm {\n max-width: none;\n}\n.prose-sm :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.45em;\n margin-bottom: 0.3em;\n line-height: 1.4;\n}\n.prose-sm :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.4em;\n margin-bottom: 0.25em;\n line-height: 1.45;\n}\n.prose-sm :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-links);\n text-decoration: underline;\n font-weight: 500;\n}\n.prose-sm :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {\n color: var(--tw-prose-links-hover, var(--tw-prose-links));\n text-decoration: none;\n}\n.prose-base {\n font-size: 1rem;\n line-height: 1.6;\n}\n.prose-base :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n line-height: 1.5;\n}\n.prose-base :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.25em;\n line-height: 1.6;\n margin-top: 1.2em;\n margin-bottom: 1.2em;\n}\n.prose-base :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1em;\n padding-left: 1em;\n border-left-width: 0.25rem;\n font-style: italic;\n color: inherit;\n}\n.prose-base :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 2.25em;\n margin-top: 0.75em;\n margin-bottom: 0.5em;\n line-height: 1.2;\n}\n.prose-base :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.5em;\n margin-top: 0.65em;\n margin-bottom: 0.45em;\n line-height: 1.25;\n}\n.prose-base :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.25em;\n margin-top: 0.6em;\n margin-bottom: 0.4em;\n line-height: 1.3;\n}\n.prose-base :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.35em;\n line-height: 1.35;\n}\n.prose-base :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-base :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-base :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose-base :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-base :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.875em;\n border-radius: 0.3125rem;\n padding-top: 0.1875em;\n padding-inline-end: 0.375em;\n padding-bottom: 0.1875em;\n padding-inline-start: 0.375em;\n}\n.prose-base :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.875em;\n}\n.prose-base :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.875em;\n}\n.prose-base :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.9em;\n}\n.prose-base :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.875em;\n line-height: 1.45;\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n border-radius: 0.375rem;\n padding-top: 0.8571429em;\n padding-inline-end: 1.1428571em;\n padding-bottom: 0.8571429em;\n padding-inline-start: 1.1428571em;\n box-sizing: border-box;\n max-width: 100%;\n overflow-x: auto;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n}\n.prose-base :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1.625em;\n padding-left: 1.25em;\n}\n.prose-base :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1.625em;\n padding-left: 1.25em;\n}\n.prose-base :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n}\n.prose-base :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.375em;\n}\n.prose-base :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.375em;\n}\n.prose-base :where(.prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.75em;\n margin-bottom: 0.75em;\n}\n.prose-base :where(.prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.25em;\n}\n.prose-base :where(.prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.25em;\n}\n.prose-base :where(.prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.25em;\n}\n.prose-base :where(.prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.25em;\n}\n.prose-base :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n}\n.prose-base :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.25em;\n margin-bottom: 1.25em;\n}\n.prose-base :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.25em;\n}\n.prose-base :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n padding-inline-start: 1.625em;\n}\n.prose-base :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-base :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-base :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-base :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-base :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-base :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.875em;\n line-height: 1.7142857;\n}\n.prose-base :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0.5714286em;\n padding-bottom: 0.5714286em;\n padding-inline-start: 0.5714286em;\n}\n.prose-base :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose-base :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose-base :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-top: 0.5714286em;\n padding-inline-end: 0.5714286em;\n padding-bottom: 0.5714286em;\n padding-inline-start: 0.5714286em;\n}\n.prose-base :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose-base :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose-base :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-base :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose-base :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.875em;\n line-height: 1.4285714;\n margin-top: 0.8571429em;\n}\n.prose-base :where(.prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-base :where(.prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 0;\n}\n.prose-base {\n max-width: none;\n}\n.prose-base :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.45em;\n margin-bottom: 0.3em;\n line-height: 1.4;\n}\n.prose-base :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.4em;\n margin-bottom: 0.25em;\n line-height: 1.45;\n}\n.prose-base :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-links);\n text-decoration: underline;\n font-weight: 500;\n}\n.prose-base :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {\n color: var(--tw-prose-links-hover, var(--tw-prose-links));\n text-decoration: none;\n}\n.prose-lg {\n font-size: 1.125rem;\n line-height: 1.6;\n}\n.prose-lg :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n line-height: 1.5;\n}\n.prose-lg :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.2222222em;\n line-height: 1.4545455;\n margin-top: 1.0909091em;\n margin-bottom: 1.0909091em;\n}\n.prose-lg :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1em;\n padding-left: 1em;\n border-left-width: 0.25rem;\n font-style: italic;\n color: inherit;\n}\n.prose-lg :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 2.6666667em;\n margin-top: 0.75em;\n margin-bottom: 0.5em;\n line-height: 1.2;\n}\n.prose-lg :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.6666667em;\n margin-top: 0.65em;\n margin-bottom: 0.45em;\n line-height: 1.25;\n}\n.prose-lg :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.3333333em;\n margin-top: 0.6em;\n margin-bottom: 0.4em;\n line-height: 1.3;\n}\n.prose-lg :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.35em;\n line-height: 1.35;\n}\n.prose-lg :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.7777778em;\n margin-bottom: 1.7777778em;\n}\n.prose-lg :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.7777778em;\n margin-bottom: 1.7777778em;\n}\n.prose-lg :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose-lg :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.7777778em;\n margin-bottom: 1.7777778em;\n}\n.prose-lg :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8888889em;\n border-radius: 0.3125rem;\n padding-top: 0.2222222em;\n padding-inline-end: 0.4444444em;\n padding-bottom: 0.2222222em;\n padding-inline-start: 0.4444444em;\n}\n.prose-lg :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8888889em;\n}\n.prose-lg :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8666667em;\n}\n.prose-lg :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.875em;\n}\n.prose-lg :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8888889em;\n line-height: 1.45;\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n border-radius: 0.375rem;\n padding-top: 1em;\n padding-inline-end: 1.5em;\n padding-bottom: 1em;\n padding-inline-start: 1.5em;\n box-sizing: border-box;\n max-width: 100%;\n overflow-x: auto;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n}\n.prose-lg :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1.5555556em;\n padding-left: 1.25em;\n}\n.prose-lg :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1.5555556em;\n padding-left: 1.25em;\n}\n.prose-lg :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n}\n.prose-lg :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.4444444em;\n}\n.prose-lg :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.4444444em;\n}\n.prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.8888889em;\n margin-bottom: 0.8888889em;\n}\n.prose-lg :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n}\n.prose-lg :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.3333333em;\n}\n.prose-lg :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n}\n.prose-lg :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.3333333em;\n}\n.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n}\n.prose-lg :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n margin-bottom: 1.3333333em;\n}\n.prose-lg :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n}\n.prose-lg :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.6666667em;\n padding-inline-start: 1.5555556em;\n}\n.prose-lg :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-lg :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-lg :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-lg :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-lg :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-lg :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8888889em;\n line-height: 1.5;\n}\n.prose-lg :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0.75em;\n padding-bottom: 0.75em;\n padding-inline-start: 0.75em;\n}\n.prose-lg :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-top: 0.75em;\n padding-inline-end: 0.75em;\n padding-bottom: 0.75em;\n padding-inline-start: 0.75em;\n}\n.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose-lg :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.7777778em;\n margin-bottom: 1.7777778em;\n}\n.prose-lg :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose-lg :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8888889em;\n line-height: 1.5;\n margin-top: 1em;\n}\n.prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 0;\n}\n.prose-lg {\n max-width: none;\n}\n.prose-lg :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.45em;\n margin-bottom: 0.3em;\n line-height: 1.4;\n}\n.prose-lg :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.4em;\n margin-bottom: 0.25em;\n line-height: 1.45;\n}\n.prose-lg :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-links);\n text-decoration: underline;\n font-weight: 500;\n}\n.prose-lg :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {\n color: var(--tw-prose-links-hover, var(--tw-prose-links));\n text-decoration: none;\n}\n.prose-xl {\n font-size: 1.25rem;\n line-height: 1.6;\n}\n.prose-xl :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n line-height: 1.5;\n}\n.prose-xl :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.2em;\n line-height: 1.5;\n margin-top: 1em;\n margin-bottom: 1em;\n}\n.prose-xl :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1.0666667em;\n padding-left: 1em;\n border-left-width: 0.25rem;\n font-style: italic;\n color: inherit;\n}\n.prose-xl :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 2.8em;\n margin-top: 0.75em;\n margin-bottom: 0.5em;\n line-height: 1.2;\n}\n.prose-xl :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.8em;\n margin-top: 0.65em;\n margin-bottom: 0.45em;\n line-height: 1.25;\n}\n.prose-xl :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.5em;\n margin-top: 0.6em;\n margin-bottom: 0.4em;\n line-height: 1.3;\n}\n.prose-xl :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.35em;\n line-height: 1.35;\n}\n.prose-xl :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-xl :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-xl :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose-xl :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-xl :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.9em;\n border-radius: 0.3125rem;\n padding-top: 0.25em;\n padding-inline-end: 0.4em;\n padding-bottom: 0.25em;\n padding-inline-start: 0.4em;\n}\n.prose-xl :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.9em;\n}\n.prose-xl :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8611111em;\n}\n.prose-xl :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.9em;\n}\n.prose-xl :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.9em;\n line-height: 1.45;\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n border-radius: 0.5rem;\n padding-top: 1.1111111em;\n padding-inline-end: 1.3333333em;\n padding-bottom: 1.1111111em;\n padding-inline-start: 1.3333333em;\n box-sizing: border-box;\n max-width: 100%;\n overflow-x: auto;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n}\n.prose-xl :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1.6em;\n padding-left: 1.25em;\n}\n.prose-xl :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n padding-inline-start: 1.6em;\n padding-left: 1.25em;\n}\n.prose-xl :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n}\n.prose-xl :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.4em;\n}\n.prose-xl :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.4em;\n}\n.prose-xl :where(.prose-xl > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.8em;\n margin-bottom: 0.8em;\n}\n.prose-xl :where(.prose-xl > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.2em;\n}\n.prose-xl :where(.prose-xl > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.2em;\n}\n.prose-xl :where(.prose-xl > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.2em;\n}\n.prose-xl :where(.prose-xl > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.2em;\n}\n.prose-xl :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.25em;\n margin-bottom: 0.25em;\n}\n.prose-xl :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.2em;\n margin-bottom: 1.2em;\n}\n.prose-xl :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.2em;\n}\n.prose-xl :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.6em;\n padding-inline-start: 1.6em;\n}\n.prose-xl :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-xl :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-xl :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-xl :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-xl :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-xl :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.9em;\n line-height: 1.5555556;\n}\n.prose-xl :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0.6666667em;\n padding-bottom: 0.8888889em;\n padding-inline-start: 0.6666667em;\n}\n.prose-xl :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose-xl :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose-xl :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-top: 0.8888889em;\n padding-inline-end: 0.6666667em;\n padding-bottom: 0.8888889em;\n padding-inline-start: 0.6666667em;\n}\n.prose-xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose-xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose-xl :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-xl :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose-xl :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.9em;\n line-height: 1.5555556;\n margin-top: 1em;\n}\n.prose-xl :where(.prose-xl > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-xl :where(.prose-xl > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 0;\n}\n.prose-xl {\n max-width: none;\n}\n.prose-xl :where(h5):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.45em;\n margin-bottom: 0.3em;\n line-height: 1.4;\n}\n.prose-xl :where(h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.4em;\n margin-bottom: 0.25em;\n line-height: 1.45;\n}\n.prose-xl :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n color: var(--tw-prose-links);\n text-decoration: underline;\n font-weight: 500;\n}\n.prose-xl :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {\n color: var(--tw-prose-links-hover, var(--tw-prose-links));\n text-decoration: none;\n}\n.prose-2xl {\n font-size: 1.5rem;\n line-height: 1.6666667;\n}\n.prose-2xl :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n margin-bottom: 1.3333333em;\n}\n.prose-2xl :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.25em;\n line-height: 1.4666667;\n margin-top: 1.0666667em;\n margin-bottom: 1.0666667em;\n}\n.prose-2xl :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.7777778em;\n margin-bottom: 1.7777778em;\n padding-inline-start: 1.1111111em;\n}\n.prose-2xl :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 2.6666667em;\n margin-top: 0;\n margin-bottom: 0.875em;\n line-height: 1;\n}\n.prose-2xl :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 2em;\n margin-top: 1.5em;\n margin-bottom: 0.8333333em;\n line-height: 1.0833333;\n}\n.prose-2xl :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 1.5em;\n margin-top: 1.5555556em;\n margin-bottom: 0.6666667em;\n line-height: 1.2222222;\n}\n.prose-2xl :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.6666667em;\n margin-bottom: 0.6666667em;\n line-height: 1.5;\n}\n.prose-2xl :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-2xl :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-2xl :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose-2xl :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-2xl :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8333333em;\n border-radius: 0.375rem;\n padding-top: 0.25em;\n padding-inline-end: 0.3333333em;\n padding-bottom: 0.25em;\n padding-inline-start: 0.3333333em;\n}\n.prose-2xl :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8333333em;\n}\n.prose-2xl :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.875em;\n}\n.prose-2xl :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8888889em;\n}\n.prose-2xl :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8333333em;\n line-height: 1.8;\n margin-top: 2em;\n margin-bottom: 2em;\n border-radius: 0.5rem;\n padding-top: 1.2em;\n padding-inline-end: 1.6em;\n padding-bottom: 1.2em;\n padding-inline-start: 1.6em;\n}\n.prose-2xl :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n margin-bottom: 1.3333333em;\n padding-inline-start: 1.5833333em;\n}\n.prose-2xl :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n margin-bottom: 1.3333333em;\n padding-inline-start: 1.5833333em;\n}\n.prose-2xl :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n}\n.prose-2xl :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.4166667em;\n}\n.prose-2xl :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0.4166667em;\n}\n.prose-2xl :where(.prose-2xl > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.8333333em;\n margin-bottom: 0.8333333em;\n}\n.prose-2xl :where(.prose-2xl > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n}\n.prose-2xl :where(.prose-2xl > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.3333333em;\n}\n.prose-2xl :where(.prose-2xl > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n}\n.prose-2xl :where(.prose-2xl > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 1.3333333em;\n}\n.prose-2xl :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.6666667em;\n margin-bottom: 0.6666667em;\n}\n.prose-2xl :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n margin-bottom: 1.3333333em;\n}\n.prose-2xl :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 1.3333333em;\n}\n.prose-2xl :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0.5em;\n padding-inline-start: 1.5833333em;\n}\n.prose-2xl :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 3em;\n margin-bottom: 3em;\n}\n.prose-2xl :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-2xl :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-2xl :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-2xl :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-2xl :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8333333em;\n line-height: 1.4;\n}\n.prose-2xl :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0.6em;\n padding-bottom: 0.8em;\n padding-inline-start: 0.6em;\n}\n.prose-2xl :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose-2xl :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose-2xl :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-top: 0.8em;\n padding-inline-end: 0.6em;\n padding-bottom: 0.8em;\n padding-inline-start: 0.6em;\n}\n.prose-2xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-start: 0;\n}\n.prose-2xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n padding-inline-end: 0;\n}\n.prose-2xl :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 2em;\n margin-bottom: 2em;\n}\n.prose-2xl :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n margin-bottom: 0;\n}\n.prose-2xl :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n font-size: 0.8333333em;\n line-height: 1.6;\n margin-top: 1em;\n}\n.prose-2xl :where(.prose-2xl > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-top: 0;\n}\n.prose-2xl :where(.prose-2xl > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {\n margin-bottom: 0;\n}\n.prose-slate {\n --tw-prose-body: oklch(37.2% 0.044 257.287);\n --tw-prose-headings: oklch(20.8% 0.042 265.755);\n --tw-prose-lead: oklch(44.6% 0.043 257.281);\n --tw-prose-links: oklch(20.8% 0.042 265.755);\n --tw-prose-bold: oklch(20.8% 0.042 265.755);\n --tw-prose-counters: oklch(55.4% 0.046 257.417);\n --tw-prose-bullets: oklch(86.9% 0.022 252.894);\n --tw-prose-hr: oklch(92.9% 0.013 255.508);\n --tw-prose-quotes: oklch(20.8% 0.042 265.755);\n --tw-prose-quote-borders: oklch(92.9% 0.013 255.508);\n --tw-prose-captions: oklch(55.4% 0.046 257.417);\n --tw-prose-kbd: oklch(20.8% 0.042 265.755);\n --tw-prose-kbd-shadows: color-mix(in oklab, oklch(20.8% 0.042 265.755) 10%, transparent);\n --tw-prose-code: oklch(20.8% 0.042 265.755);\n --tw-prose-pre-code: oklch(92.9% 0.013 255.508);\n --tw-prose-pre-bg: oklch(27.9% 0.041 260.031);\n --tw-prose-th-borders: oklch(86.9% 0.022 252.894);\n --tw-prose-td-borders: oklch(92.9% 0.013 255.508);\n --tw-prose-invert-body: oklch(86.9% 0.022 252.894);\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: oklch(70.4% 0.04 256.788);\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: oklch(70.4% 0.04 256.788);\n --tw-prose-invert-bullets: oklch(44.6% 0.043 257.281);\n --tw-prose-invert-hr: oklch(37.2% 0.044 257.287);\n --tw-prose-invert-quotes: oklch(96.8% 0.007 247.896);\n --tw-prose-invert-quote-borders: oklch(37.2% 0.044 257.287);\n --tw-prose-invert-captions: oklch(70.4% 0.04 256.788);\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: oklch(86.9% 0.022 252.894);\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: oklch(44.6% 0.043 257.281);\n --tw-prose-invert-td-borders: oklch(37.2% 0.044 257.287);\n}\n.prose-gray {\n --tw-prose-body: oklch(37.3% 0.034 259.733);\n --tw-prose-headings: oklch(21% 0.034 264.665);\n --tw-prose-lead: oklch(44.6% 0.03 256.802);\n --tw-prose-links: oklch(21% 0.034 264.665);\n --tw-prose-bold: oklch(21% 0.034 264.665);\n --tw-prose-counters: oklch(55.1% 0.027 264.364);\n --tw-prose-bullets: oklch(87.2% 0.01 258.338);\n --tw-prose-hr: oklch(92.8% 0.006 264.531);\n --tw-prose-quotes: oklch(21% 0.034 264.665);\n --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);\n --tw-prose-captions: oklch(55.1% 0.027 264.364);\n --tw-prose-kbd: oklch(21% 0.034 264.665);\n --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);\n --tw-prose-code: oklch(21% 0.034 264.665);\n --tw-prose-pre-code: oklch(92.8% 0.006 264.531);\n --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);\n --tw-prose-th-borders: oklch(87.2% 0.01 258.338);\n --tw-prose-td-borders: oklch(92.8% 0.006 264.531);\n --tw-prose-invert-body: oklch(87.2% 0.01 258.338);\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);\n --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);\n --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);\n --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);\n --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);\n --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);\n --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);\n}\n.prose-zinc {\n --tw-prose-body: oklch(37% 0.013 285.805);\n --tw-prose-headings: oklch(21% 0.006 285.885);\n --tw-prose-lead: oklch(44.2% 0.017 285.786);\n --tw-prose-links: oklch(21% 0.006 285.885);\n --tw-prose-bold: oklch(21% 0.006 285.885);\n --tw-prose-counters: oklch(55.2% 0.016 285.938);\n --tw-prose-bullets: oklch(87.1% 0.006 286.286);\n --tw-prose-hr: oklch(92% 0.004 286.32);\n --tw-prose-quotes: oklch(21% 0.006 285.885);\n --tw-prose-quote-borders: oklch(92% 0.004 286.32);\n --tw-prose-captions: oklch(55.2% 0.016 285.938);\n --tw-prose-kbd: oklch(21% 0.006 285.885);\n --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.006 285.885) 10%, transparent);\n --tw-prose-code: oklch(21% 0.006 285.885);\n --tw-prose-pre-code: oklch(92% 0.004 286.32);\n --tw-prose-pre-bg: oklch(27.4% 0.006 286.033);\n --tw-prose-th-borders: oklch(87.1% 0.006 286.286);\n --tw-prose-td-borders: oklch(92% 0.004 286.32);\n --tw-prose-invert-body: oklch(87.1% 0.006 286.286);\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: oklch(70.5% 0.015 286.067);\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: oklch(70.5% 0.015 286.067);\n --tw-prose-invert-bullets: oklch(44.2% 0.017 285.786);\n --tw-prose-invert-hr: oklch(37% 0.013 285.805);\n --tw-prose-invert-quotes: oklch(96.7% 0.001 286.375);\n --tw-prose-invert-quote-borders: oklch(37% 0.013 285.805);\n --tw-prose-invert-captions: oklch(70.5% 0.015 286.067);\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: oklch(87.1% 0.006 286.286);\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: oklch(44.2% 0.017 285.786);\n --tw-prose-invert-td-borders: oklch(37% 0.013 285.805);\n}\n.prose-neutral {\n --tw-prose-body: oklch(37.1% 0 0);\n --tw-prose-headings: oklch(20.5% 0 0);\n --tw-prose-lead: oklch(43.9% 0 0);\n --tw-prose-links: oklch(20.5% 0 0);\n --tw-prose-bold: oklch(20.5% 0 0);\n --tw-prose-counters: oklch(55.6% 0 0);\n --tw-prose-bullets: oklch(87% 0 0);\n --tw-prose-hr: oklch(92.2% 0 0);\n --tw-prose-quotes: oklch(20.5% 0 0);\n --tw-prose-quote-borders: oklch(92.2% 0 0);\n --tw-prose-captions: oklch(55.6% 0 0);\n --tw-prose-kbd: oklch(20.5% 0 0);\n --tw-prose-kbd-shadows: color-mix(in oklab, oklch(20.5% 0 0) 10%, transparent);\n --tw-prose-code: oklch(20.5% 0 0);\n --tw-prose-pre-code: oklch(92.2% 0 0);\n --tw-prose-pre-bg: oklch(26.9% 0 0);\n --tw-prose-th-borders: oklch(87% 0 0);\n --tw-prose-td-borders: oklch(92.2% 0 0);\n --tw-prose-invert-body: oklch(87% 0 0);\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: oklch(70.8% 0 0);\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: oklch(70.8% 0 0);\n --tw-prose-invert-bullets: oklch(43.9% 0 0);\n --tw-prose-invert-hr: oklch(37.1% 0 0);\n --tw-prose-invert-quotes: oklch(97% 0 0);\n --tw-prose-invert-quote-borders: oklch(37.1% 0 0);\n --tw-prose-invert-captions: oklch(70.8% 0 0);\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: oklch(87% 0 0);\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: oklch(43.9% 0 0);\n --tw-prose-invert-td-borders: oklch(37.1% 0 0);\n}\n.prose-stone {\n --tw-prose-body: oklch(37.4% 0.01 67.558);\n --tw-prose-headings: oklch(21.6% 0.006 56.043);\n --tw-prose-lead: oklch(44.4% 0.011 73.639);\n --tw-prose-links: oklch(21.6% 0.006 56.043);\n --tw-prose-bold: oklch(21.6% 0.006 56.043);\n --tw-prose-counters: oklch(55.3% 0.013 58.071);\n --tw-prose-bullets: oklch(86.9% 0.005 56.366);\n --tw-prose-hr: oklch(92.3% 0.003 48.717);\n --tw-prose-quotes: oklch(21.6% 0.006 56.043);\n --tw-prose-quote-borders: oklch(92.3% 0.003 48.717);\n --tw-prose-captions: oklch(55.3% 0.013 58.071);\n --tw-prose-kbd: oklch(21.6% 0.006 56.043);\n --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21.6% 0.006 56.043) 10%, transparent);\n --tw-prose-code: oklch(21.6% 0.006 56.043);\n --tw-prose-pre-code: oklch(92.3% 0.003 48.717);\n --tw-prose-pre-bg: oklch(26.8% 0.007 34.298);\n --tw-prose-th-borders: oklch(86.9% 0.005 56.366);\n --tw-prose-td-borders: oklch(92.3% 0.003 48.717);\n --tw-prose-invert-body: oklch(86.9% 0.005 56.366);\n --tw-prose-invert-headings: #fff;\n --tw-prose-invert-lead: oklch(70.9% 0.01 56.259);\n --tw-prose-invert-links: #fff;\n --tw-prose-invert-bold: #fff;\n --tw-prose-invert-counters: oklch(70.9% 0.01 56.259);\n --tw-prose-invert-bullets: oklch(44.4% 0.011 73.639);\n --tw-prose-invert-hr: oklch(37.4% 0.01 67.558);\n --tw-prose-invert-quotes: oklch(97% 0.001 106.424);\n --tw-prose-invert-quote-borders: oklch(37.4% 0.01 67.558);\n --tw-prose-invert-captions: oklch(70.9% 0.01 56.259);\n --tw-prose-invert-kbd: #fff;\n --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);\n --tw-prose-invert-code: #fff;\n --tw-prose-invert-pre-code: oklch(86.9% 0.005 56.366);\n --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n --tw-prose-invert-th-borders: oklch(44.4% 0.011 73.639);\n --tw-prose-invert-td-borders: oklch(37.4% 0.01 67.558);\n}\n.prose-red {\n --tw-prose-links: oklch(57.7% 0.245 27.325);\n --tw-prose-invert-links: oklch(63.7% 0.237 25.331);\n}\n.prose-orange {\n --tw-prose-links: oklch(64.6% 0.222 41.116);\n --tw-prose-invert-links: oklch(70.5% 0.213 47.604);\n}\n.prose-amber {\n --tw-prose-links: oklch(66.6% 0.179 58.318);\n --tw-prose-invert-links: oklch(76.9% 0.188 70.08);\n}\n.prose-yellow {\n --tw-prose-links: oklch(68.1% 0.162 75.834);\n --tw-prose-invert-links: oklch(79.5% 0.184 86.047);\n}\n.prose-lime {\n --tw-prose-links: oklch(64.8% 0.2 131.684);\n --tw-prose-invert-links: oklch(76.8% 0.233 130.85);\n}\n.prose-green {\n --tw-prose-links: oklch(62.7% 0.194 149.214);\n --tw-prose-invert-links: oklch(72.3% 0.219 149.579);\n}\n.prose-emerald {\n --tw-prose-links: oklch(59.6% 0.145 163.225);\n --tw-prose-invert-links: oklch(69.6% 0.17 162.48);\n}\n.prose-teal {\n --tw-prose-links: oklch(60% 0.118 184.704);\n --tw-prose-invert-links: oklch(70.4% 0.14 182.503);\n}\n.prose-cyan {\n --tw-prose-links: oklch(60.9% 0.126 221.723);\n --tw-prose-invert-links: oklch(71.5% 0.143 215.221);\n}\n.prose-sky {\n --tw-prose-links: oklch(58.8% 0.158 241.966);\n --tw-prose-invert-links: oklch(68.5% 0.169 237.323);\n}\n.prose-blue {\n --tw-prose-links: oklch(54.6% 0.245 262.881);\n --tw-prose-invert-links: oklch(62.3% 0.214 259.815);\n}\n.prose-indigo {\n --tw-prose-links: oklch(51.1% 0.262 276.966);\n --tw-prose-invert-links: oklch(58.5% 0.233 277.117);\n}\n.prose-violet {\n --tw-prose-links: oklch(54.1% 0.281 293.009);\n --tw-prose-invert-links: oklch(60.6% 0.25 292.717);\n}\n.prose-purple {\n --tw-prose-links: oklch(55.8% 0.288 302.321);\n --tw-prose-invert-links: oklch(62.7% 0.265 303.9);\n}\n.prose-fuchsia {\n --tw-prose-links: oklch(59.1% 0.293 322.896);\n --tw-prose-invert-links: oklch(66.7% 0.295 322.15);\n}\n.prose-pink {\n --tw-prose-links: oklch(59.2% 0.249 0.584);\n --tw-prose-invert-links: oklch(65.6% 0.241 354.308);\n}\n.prose-rose {\n --tw-prose-links: oklch(58.6% 0.253 17.585);\n --tw-prose-invert-links: oklch(64.5% 0.246 16.439);\n}\n.prose-invert {\n --tw-prose-body: var(--tw-prose-invert-body);\n --tw-prose-headings: var(--tw-prose-invert-headings);\n --tw-prose-lead: var(--tw-prose-invert-lead);\n --tw-prose-links: var(--tw-prose-invert-links);\n --tw-prose-bold: var(--tw-prose-invert-bold);\n --tw-prose-counters: var(--tw-prose-invert-counters);\n --tw-prose-bullets: var(--tw-prose-invert-bullets);\n --tw-prose-hr: var(--tw-prose-invert-hr);\n --tw-prose-quotes: var(--tw-prose-invert-quotes);\n --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);\n --tw-prose-captions: var(--tw-prose-invert-captions);\n --tw-prose-kbd: var(--tw-prose-invert-kbd);\n --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);\n --tw-prose-code: var(--tw-prose-invert-code);\n --tw-prose-pre-code: var(--tw-prose-invert-pre-code);\n --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);\n --tw-prose-th-borders: var(--tw-prose-invert-th-borders);\n --tw-prose-td-borders: var(--tw-prose-invert-td-borders);\n}\n.prose-inherit {\n --tw-prose-body: inherit;\n --tw-prose-headings: inherit;\n --tw-prose-lead: inherit;\n --tw-prose-links: inherit;\n --tw-prose-bold: inherit;\n --tw-prose-counters: inherit;\n --tw-prose-bullets: inherit;\n}\n.visible {\n visibility: visible;\n}\n.static {\n position: static;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.left-0 {\n left: 0px;\n}\n.left-3 {\n left: 0.75rem;\n}\n.right-4 {\n right: 1rem;\n}\n.top-0 {\n top: 0px;\n}\n.top-3 {\n top: 0.75rem;\n}\n.top-\\[calc\\(100\\%\\+8px\\)\\] {\n top: calc(100% + 8px);\n}\n.-z-10 {\n z-index: -10;\n}\n.z-10 {\n z-index: 10;\n}\n.z-\\[1000\\] {\n z-index: 1000;\n}\n.z-\\[99\\] {\n z-index: 99;\n}\n.col-\\[1\\] {\n grid-column: 1;\n}\n.row-\\[1\\] {\n grid-row: 1;\n}\n.m-5 {\n margin: 1.25rem;\n}\n.my-3 {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n.mb-1 {\n margin-bottom: 0.25rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.mb-4 {\n margin-bottom: 1rem;\n}\n.mb-6 {\n margin-bottom: 1.5rem;\n}\n.ml-1 {\n margin-left: 0.25rem;\n}\n.ml-2 {\n margin-left: 0.5rem;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.mt-4 {\n margin-top: 1rem;\n}\n.mt-6 {\n margin-top: 1.5rem;\n}\n.box-border {\n box-sizing: border-box;\n}\n.block {\n display: block;\n}\n.inline-block {\n display: inline-block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.grid {\n display: grid;\n}\n.contents {\n display: contents;\n}\n.hidden {\n display: none;\n}\n.h-10 {\n height: 2.5rem;\n}\n.h-12 {\n height: 3rem;\n}\n.h-14 {\n height: 3.5rem;\n}\n.h-6 {\n height: 1.5rem;\n}\n.h-7 {\n height: 1.75rem;\n}\n.h-8 {\n height: 2rem;\n}\n.h-\\[29px\\] {\n height: 29px;\n}\n.h-full {\n height: 100%;\n}\n.h-px {\n height: 1px;\n}\n.min-h-20 {\n min-height: 5rem;\n}\n.w-10 {\n width: 2.5rem;\n}\n.w-6 {\n width: 1.5rem;\n}\n.w-\\[140px\\] {\n width: 140px;\n}\n.w-\\[48\\%\\] {\n width: 48%;\n}\n.w-\\[51\\%\\] {\n width: 51%;\n}\n.w-full {\n width: 100%;\n}\n.min-w-0 {\n min-width: 0px;\n}\n.min-w-20 {\n min-width: 5rem;\n}\n.min-w-\\[280px\\] {\n min-width: 280px;\n}\n.min-w-\\[320px\\] {\n min-width: 320px;\n}\n.min-w-\\[360px\\] {\n min-width: 360px;\n}\n.max-w-\\[60px\\] {\n max-width: 60px;\n}\n.max-w-none {\n max-width: none;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.flex-none {\n flex: none;\n}\n.flex-shrink {\n flex-shrink: 1;\n}\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.rotate-180 {\n --tw-rotate: 180deg;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8,0,1,1);\n }\n 50% {\n transform: none;\n animation-timing-function: cubic-bezier(0,0,0.2,1);\n }\n}\n.animate-bounce {\n animation: bounce 1s infinite;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.grid-cols-\\[24px_1fr\\] {\n grid-template-columns: 24px 1fr;\n}\n.grid-cols-\\[40px\\2c 1fr\\2c 20px\\] {\n grid-template-columns: 40px 1fr 20px;\n}\n.grid-cols-\\[repeat\\(auto-fill\\2c minmax\\(\\$\\{this\\.getImageMinSizePx\\(\\)\\}px\\2c 300px\\)\\)\\] {\n grid-template-columns: repeat(auto-fill,minmax(${this.getImageMinSizePx()}px,300px));\n}\n.flex-row {\n flex-direction: row;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-1\\.5 {\n gap: 0.375rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.gap-x-2 {\n -moz-column-gap: 0.5rem;\n column-gap: 0.5rem;\n}\n.self-center {\n align-self: center;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-visible {\n overflow: visible;\n}\n.text-ellipsis {\n text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.text-wrap {\n text-wrap: wrap;\n}\n.break-words {\n overflow-wrap: break-word;\n}\n.break-all {\n word-break: break-all;\n}\n.rounded {\n border-radius: 0.25rem;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.rounded-t-\\[120px\\] {\n border-top-left-radius: 120px;\n border-top-right-radius: 120px;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-\\[var\\(--neutral-90\\)\\] {\n border-color: var(--neutral-90);\n}\n.border-neutral-20 {\n --tw-border-opacity: 1;\n border-color: rgb(36 53 66 / var(--tw-border-opacity, 1));\n}\n.border-neutral-90 {\n --tw-border-opacity: 1;\n border-color: rgb(222 231 237 / var(--tw-border-opacity, 1));\n}\n.border-red-200 {\n --tw-border-opacity: 1;\n border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.bg-\\[var\\(--neutral-100\\)\\] {\n background-color: var(--neutral-100);\n}\n.bg-\\[var\\(--neutral-90\\)\\] {\n background-color: var(--neutral-90);\n}\n.bg-blue-85 {\n --tw-bg-opacity: 1;\n background-color: rgb(180 209 253 / var(--tw-bg-opacity, 1));\n}\n.bg-green-85 {\n --tw-bg-opacity: 1;\n background-color: rgb(195 239 206 / var(--tw-bg-opacity, 1));\n}\n.bg-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(18 27 33 / var(--tw-bg-opacity, 1));\n}\n.bg-neutral-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-neutral-90 {\n --tw-bg-opacity: 1;\n background-color: rgb(222 231 237 / var(--tw-bg-opacity, 1));\n}\n.bg-neutral-95 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 243 246 / var(--tw-bg-opacity, 1));\n}\n.bg-neutral-98 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 251 / var(--tw-bg-opacity, 1));\n}\n.bg-red-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.bg-red-85 {\n --tw-bg-opacity: 1;\n background-color: rgb(245 188 188 / var(--tw-bg-opacity, 1));\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-85 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 224 179 / var(--tw-bg-opacity, 1));\n}\n.bg-\\[radial-gradient\\(ellipse_75px_52px_at_bottom_center\\2c rgba\\(255\\2c 255\\2c 255\\2c 0\\.78\\)_0\\%\\2c rgba\\(255\\2c 255\\2c 255\\2c 0\\)_112\\.5\\%\\)\\] {\n background-image: radial-gradient(ellipse 75px 52px at bottom center,rgba(255,255,255,0.78) 0%,rgba(255,255,255,0) 112.5%);\n}\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n.p-0 {\n padding: 0px;\n}\n.p-0\\.5 {\n padding: 0.125rem;\n}\n.p-1 {\n padding: 0.25rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-2\\.5 {\n padding: 0.625rem;\n}\n.p-3 {\n padding: 0.75rem;\n}\n.p-4 {\n padding: 1rem;\n}\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-2\\.5 {\n padding-left: 0.625rem;\n padding-right: 0.625rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.py-0\\.5 {\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n}\n.py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.pt-2 {\n padding-top: 0.5rem;\n}\n.pt-4 {\n padding-top: 1rem;\n}\n.text-center {\n text-align: center;\n}\n.align-middle {\n vertical-align: middle;\n}\n.font-mono {\n font-family: "PT Mono", sans-serif;\n}\n.text-12 {\n font-size: 12px;\n}\n.text-14 {\n font-size: 14px;\n}\n.text-16 {\n font-size: 16px;\n}\n.text-32 {\n font-size: 32px;\n}\n.text-48 {\n font-size: 48px;\n}\n.text-\\[10px\\] {\n font-size: 10px;\n}\n.text-\\[12px\\] {\n font-size: 12px;\n}\n.text-\\[13px\\] {\n font-size: 13px;\n}\n.text-\\[14px\\] {\n font-size: 14px;\n}\n.text-\\[16px\\] {\n font-size: 16px;\n}\n.text-\\[17px\\] {\n font-size: 17px;\n}\n.text-\\[18px\\] {\n font-size: 18px;\n}\n.text-\\[24px\\] {\n font-size: 24px;\n}\n.font-500 {\n font-weight: 500;\n}\n.font-600 {\n font-weight: 600;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-normal {\n font-weight: 400;\n}\n.font-semibold {\n font-weight: 600;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.italic {\n font-style: italic;\n}\n.leading-none {\n line-height: 1;\n}\n.leading-normal {\n line-height: 1.5;\n}\n.leading-snug {\n line-height: 1.375;\n}\n.leading-tight {\n line-height: 1.25;\n}\n.text-\\[var\\(--neutral-40\\)\\] {\n color: var(--neutral-40);\n}\n.text-green-600 {\n --tw-text-opacity: 1;\n color: rgb(22 163 74 / var(--tw-text-opacity, 1));\n}\n.text-neutral-10 {\n --tw-text-opacity: 1;\n color: rgb(18 27 33 / var(--tw-text-opacity, 1));\n}\n.text-neutral-100 {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.text-neutral-20 {\n --tw-text-opacity: 1;\n color: rgb(36 53 66 / var(--tw-text-opacity, 1));\n}\n.text-neutral-60 {\n --tw-text-opacity: 1;\n color: rgb(122 157 184 / var(--tw-text-opacity, 1));\n}\n.text-neutral-70 {\n --tw-text-opacity: 1;\n color: rgb(156 182 201 / var(--tw-text-opacity, 1));\n}\n.text-neutral-80 {\n --tw-text-opacity: 1;\n color: rgb(189 206 219 / var(--tw-text-opacity, 1));\n}\n.text-red-600 {\n --tw-text-opacity: 1;\n color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.underline {\n text-decoration-line: underline;\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.mix-blend-difference {\n mix-blend-mode: difference;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-\\[0_0_16px_rgba\\(189\\2c 206\\2c 219\\2c 0\\.4\\)\\] {\n --tw-shadow: 0 0 16px rgba(189,206,219,0.4);\n --tw-shadow-colored: 0 0 16px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-neutral-90 {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(222 231 237 / var(--tw-ring-opacity, 1));\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-200 {\n transition-duration: 200ms;\n}\n.duration-700 {\n transition-duration: 700ms;\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\nstrong {\n font-weight: 600;\n}\n.hover\\:scale-105:hover {\n --tw-scale-x: 1.05;\n --tw-scale-y: 1.05;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:bg-neutral-90:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(222 231 237 / var(--tw-bg-opacity, 1));\n}\n.hover\\:bg-neutral-95:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(238 243 246 / var(--tw-bg-opacity, 1));\n}\n';
|
|
319
|
-
|
|
320
|
-
// src/styles/index.ts
|
|
321
|
-
import { css as css2, LitElement as LitElement2, unsafeCSS } from "lit";
|
|
322
|
-
var style = css2`
|
|
323
|
-
${unsafeCSS(styles_default)}
|
|
324
|
-
|
|
325
|
-
:host([is-inline]) {
|
|
326
|
-
display: inline-flex;
|
|
327
|
-
align-items: center;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
:host([is-full-width]) {
|
|
331
|
-
width: 100%;
|
|
332
|
-
flex: 1;
|
|
333
|
-
display: flex;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
`;
|
|
337
|
-
var CoreLitElement = class extends LitElement2 {
|
|
338
|
-
static {
|
|
339
|
-
this.styles = [style];
|
|
340
|
-
}
|
|
341
|
-
};
|
|
342
|
-
|
|
343
|
-
// src/shared/address-view.ts
|
|
344
|
-
var AddressView = class extends CoreLitElement {
|
|
345
|
-
constructor() {
|
|
346
|
-
super(...arguments);
|
|
347
|
-
this.size = "small";
|
|
348
|
-
this.nameOnly = false;
|
|
349
|
-
this.addressOnly = false;
|
|
350
|
-
this.isCardView = false;
|
|
351
|
-
this.showCopyButton = false;
|
|
352
|
-
this.maxWidth = 200;
|
|
353
|
-
this.showIdenticon = true;
|
|
354
|
-
this.isLoadingAddress = false;
|
|
355
|
-
// Composables
|
|
356
|
-
this.addressResolver = useAddressResolver2();
|
|
357
|
-
// Task for resolving address data
|
|
358
|
-
this.addressTask = new Task2(this, {
|
|
359
|
-
task: async ([address]) => {
|
|
360
|
-
if (!address) return null;
|
|
361
|
-
this.isLoadingAddress = true;
|
|
362
|
-
try {
|
|
363
|
-
const resolved = await this.addressResolver.resolveAddress(address);
|
|
364
|
-
this.requestUpdate();
|
|
365
|
-
return resolved;
|
|
366
|
-
} catch (_error) {
|
|
367
|
-
return null;
|
|
368
|
-
} finally {
|
|
369
|
-
this.isLoadingAddress = false;
|
|
370
|
-
}
|
|
371
|
-
},
|
|
372
|
-
args: () => [this.address]
|
|
373
|
-
});
|
|
374
|
-
}
|
|
375
|
-
/**
|
|
376
|
-
* Get the display address (first segment only for compound addresses)
|
|
377
|
-
* e.g., "0x123...-0x456..." becomes "0x123..."
|
|
378
|
-
*/
|
|
379
|
-
get displayAddress() {
|
|
380
|
-
return this.address.split("-")[0];
|
|
381
|
-
}
|
|
382
|
-
/**
|
|
383
|
-
* Get display name for the address
|
|
384
|
-
*/
|
|
385
|
-
getDisplayName() {
|
|
386
|
-
const resolved = this.addressTask.value;
|
|
387
|
-
if (!resolved) {
|
|
388
|
-
return this.isLoadingAddress ? "Loading..." : "Anonymous";
|
|
389
|
-
}
|
|
390
|
-
const computedName = this.addressResolver.formatDisplayName(resolved);
|
|
391
|
-
return this.label || computedName || "Anonymous";
|
|
392
|
-
}
|
|
393
|
-
/**
|
|
394
|
-
* Get prefix for the address display
|
|
395
|
-
*/
|
|
396
|
-
get addressPrefix() {
|
|
397
|
-
const resolved = this.addressTask.value;
|
|
398
|
-
return resolved?.hasProfile ? "@" : "";
|
|
399
|
-
}
|
|
400
|
-
/**
|
|
401
|
-
* Check if should show name colors
|
|
402
|
-
*/
|
|
403
|
-
get shouldShowNameColor() {
|
|
404
|
-
const resolved = this.addressTask.value;
|
|
405
|
-
return resolved ? this.addressResolver.shouldShowNameColor(resolved) : true;
|
|
406
|
-
}
|
|
407
|
-
/**
|
|
408
|
-
* Handle address click
|
|
409
|
-
*/
|
|
410
|
-
handleClick() {
|
|
411
|
-
this.dispatchEvent(
|
|
412
|
-
new CustomEvent("address-click", {
|
|
413
|
-
detail: {
|
|
414
|
-
address: this.address,
|
|
415
|
-
resolved: this.addressTask.value
|
|
416
|
-
},
|
|
417
|
-
bubbles: true
|
|
418
|
-
})
|
|
419
|
-
);
|
|
420
|
-
}
|
|
421
|
-
/** Generate identicon when address changes */
|
|
422
|
-
willUpdate(changed) {
|
|
423
|
-
if (changed.has("address") && this.address) {
|
|
424
|
-
try {
|
|
425
|
-
this.identicon = makeBlockie(this.displayAddress.toLowerCase());
|
|
426
|
-
} catch {
|
|
427
|
-
this.identicon = void 0;
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
}
|
|
431
|
-
/** Copy the display address to clipboard (card view) */
|
|
432
|
-
handleCopy(event) {
|
|
433
|
-
if (event) event.stopPropagation();
|
|
434
|
-
if (navigator.clipboard) {
|
|
435
|
-
navigator.clipboard.writeText(this.displayAddress);
|
|
436
|
-
this.dispatchEvent(
|
|
437
|
-
new CustomEvent("address-copied", {
|
|
438
|
-
detail: { address: this.displayAddress },
|
|
439
|
-
bubbles: true
|
|
440
|
-
})
|
|
441
|
-
);
|
|
442
|
-
}
|
|
443
|
-
}
|
|
444
|
-
/** ========== RENDER HELPERS (Use Cases) ========== */
|
|
445
|
-
/** Pixel size mapping for identicon based on component size */
|
|
446
|
-
getIdenticonSizePx() {
|
|
447
|
-
switch (this.size) {
|
|
448
|
-
case "x-small":
|
|
449
|
-
return 10;
|
|
450
|
-
case "small":
|
|
451
|
-
return 12;
|
|
452
|
-
case "medium":
|
|
453
|
-
return 14;
|
|
454
|
-
case "large":
|
|
455
|
-
return 16;
|
|
456
|
-
default:
|
|
457
|
-
return 14;
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
/**
|
|
461
|
-
* Render only the name (and optionally the address hash when allowed for profiles)
|
|
462
|
-
*/
|
|
463
|
-
renderNameOnly(displayName) {
|
|
464
|
-
return html2`
|
|
465
|
-
<!-- Name Only Use Case -->
|
|
466
|
-
<lukso-username
|
|
467
|
-
class="inline-block align-middle"
|
|
468
|
-
name=${displayName}
|
|
469
|
-
address=${this.address}
|
|
470
|
-
size=${this.size}
|
|
471
|
-
max-width=${this.maxWidth}
|
|
472
|
-
prefix=${this.addressPrefix}
|
|
473
|
-
address-color=${this.addressColor}
|
|
474
|
-
name-color=${this.nameColor}
|
|
475
|
-
></lukso-username>
|
|
476
|
-
`;
|
|
477
|
-
}
|
|
478
|
-
/**
|
|
479
|
-
* Render only the raw address (no name)
|
|
480
|
-
*/
|
|
481
|
-
renderAddressOnly() {
|
|
482
|
-
return html2`
|
|
483
|
-
<!-- Address Only Use Case -->
|
|
484
|
-
<lukso-username
|
|
485
|
-
class="inline-block align-middle"
|
|
486
|
-
address=${this.displayAddress}
|
|
487
|
-
size=${this.size}
|
|
488
|
-
max-width=${this.maxWidth}
|
|
489
|
-
has-name-color="false"
|
|
490
|
-
?has-address-color=${this.shouldShowNameColor}
|
|
491
|
-
></lukso-username>
|
|
492
|
-
`;
|
|
493
|
-
}
|
|
494
|
-
/**
|
|
495
|
-
* Render both name and (conditionally) the address hash (profiles show hash, contracts may hide it)
|
|
496
|
-
*/
|
|
497
|
-
renderNameAndAddress(displayName) {
|
|
498
|
-
return html2`
|
|
499
|
-
<!-- Name + Address Use Case -->
|
|
500
|
-
<lukso-username
|
|
501
|
-
class="inline-block align-middle"
|
|
502
|
-
name=${displayName}
|
|
503
|
-
address=${this.address}
|
|
504
|
-
size=${this.size}
|
|
505
|
-
max-width=${this.maxWidth}
|
|
506
|
-
prefix=${this.addressPrefix}
|
|
507
|
-
address-color=${this.addressColor}
|
|
508
|
-
name-color=${this.nameColor}
|
|
509
|
-
></lukso-username>
|
|
510
|
-
`;
|
|
511
|
-
}
|
|
512
|
-
renderIdenticon() {
|
|
513
|
-
if (!this.showIdenticon || !this.identicon) return "";
|
|
514
|
-
const size = this.getIdenticonSizePx();
|
|
515
|
-
return html2`
|
|
516
|
-
<div class="inline-flex items-center justify-center align-middle">
|
|
517
|
-
<img
|
|
518
|
-
class="inline-block rounded-full ring-1 ring-neutral-90 shrink-0"
|
|
519
|
-
src=${this.identicon}
|
|
520
|
-
alt="identicon"
|
|
521
|
-
style="width:${size}px;height:${size}px;image-rendering:pixelated;"
|
|
522
|
-
/>
|
|
523
|
-
</div>
|
|
524
|
-
`;
|
|
525
|
-
}
|
|
526
|
-
/** Map size to a typography class for the label */
|
|
527
|
-
getLabelClass() {
|
|
528
|
-
switch (this.size) {
|
|
529
|
-
case "x-small":
|
|
530
|
-
return "paragraph-inter-12-semi-bold";
|
|
531
|
-
case "small":
|
|
532
|
-
return "heading-inter-14-bold";
|
|
533
|
-
case "medium":
|
|
534
|
-
return "heading-inter-17-semi-bold";
|
|
535
|
-
case "large":
|
|
536
|
-
return "heading-inter-21-semi-bold";
|
|
537
|
-
default:
|
|
538
|
-
return "heading-inter-17-semi-bold";
|
|
539
|
-
}
|
|
540
|
-
}
|
|
541
|
-
renderDisplayName() {
|
|
542
|
-
const displayName = this.getDisplayName();
|
|
543
|
-
return this.label ? html2`<div class="inline-flex items-center gap-2 font-semibold text-neutral-20 ${this.getLabelClass()}">${this.label}</div>` : html2`<lukso-username
|
|
544
|
-
class="inline-block align-middle"
|
|
545
|
-
name=${displayName}
|
|
546
|
-
size=${this.size}
|
|
547
|
-
?has-name-color=${this.shouldShowNameColor}
|
|
548
|
-
></lukso-username>`;
|
|
549
|
-
}
|
|
550
|
-
/**
|
|
551
|
-
* Decide which of the three core inline variants to render
|
|
552
|
-
*/
|
|
553
|
-
renderInlineVariant(displayName) {
|
|
554
|
-
if (this.nameOnly) return this.renderNameOnly(displayName);
|
|
555
|
-
if (this.addressOnly) return this.renderAddressOnly();
|
|
556
|
-
return this.renderNameAndAddress(displayName);
|
|
557
|
-
}
|
|
558
|
-
render() {
|
|
559
|
-
const displayName = this.getDisplayName();
|
|
560
|
-
if (this.isCardView) {
|
|
561
|
-
return html2`
|
|
562
|
-
<div class="block border border-neutral-90 rounded-xl py-3 px-4 bg-neutral-100 min-w-[280px]" @click=${this.handleClick}>
|
|
563
|
-
<div class="flex items-center justify-between mb-2">
|
|
564
|
-
<div class="inline-flex items-center font-normal gap-1">
|
|
565
|
-
${this.renderIdenticon()}
|
|
566
|
-
${this.renderDisplayName()}
|
|
567
|
-
</div>
|
|
568
|
-
${this.showCopyButton ? html2`<button
|
|
569
|
-
class="bg-neutral-100 border-0 rounded-lg w-6 h-6 flex items-center justify-center cursor-pointer text-neutral-20 hover:bg-neutral-95"
|
|
570
|
-
@click=${(e) => this.handleCopy(e)}
|
|
571
|
-
title="Copy address"
|
|
572
|
-
>
|
|
573
|
-
<lukso-icon name="copy" size="small"></lukso-icon>
|
|
574
|
-
</button>` : html2``}
|
|
575
|
-
</div>
|
|
576
|
-
<div class="font-semibold text-neutral-20 break-all flex items-center gap-2">
|
|
577
|
-
|
|
578
|
-
<lukso-username
|
|
579
|
-
address=${this.displayAddress}
|
|
580
|
-
size=${this.size}
|
|
581
|
-
max-width=${this.maxWidth}
|
|
582
|
-
has-name-color="false"
|
|
583
|
-
slice-by="24"
|
|
584
|
-
?has-address-color=${this.shouldShowNameColor}
|
|
585
|
-
></lukso-username>
|
|
586
|
-
</div>
|
|
587
|
-
</div>
|
|
588
|
-
`;
|
|
589
|
-
}
|
|
590
|
-
return html2`
|
|
591
|
-
<div class="inline-flex items-center cursor-pointer gap-1" @click=${this.handleClick}>
|
|
592
|
-
${this.renderIdenticon()}
|
|
593
|
-
<!-- Inline Variants -->
|
|
594
|
-
${this.renderInlineVariant(displayName)}
|
|
595
|
-
</div>
|
|
596
|
-
`;
|
|
597
|
-
}
|
|
598
|
-
};
|
|
599
|
-
__decorateClass([
|
|
600
|
-
property2()
|
|
601
|
-
], AddressView.prototype, "address", 2);
|
|
602
|
-
__decorateClass([
|
|
603
|
-
property2()
|
|
604
|
-
], AddressView.prototype, "size", 2);
|
|
605
|
-
__decorateClass([
|
|
606
|
-
property2({ type: Boolean, attribute: "name-only" })
|
|
607
|
-
], AddressView.prototype, "nameOnly", 2);
|
|
608
|
-
__decorateClass([
|
|
609
|
-
property2({ type: Boolean, attribute: "address-only" })
|
|
610
|
-
], AddressView.prototype, "addressOnly", 2);
|
|
611
|
-
__decorateClass([
|
|
612
|
-
property2({ type: Boolean, attribute: "is-card-view" })
|
|
613
|
-
], AddressView.prototype, "isCardView", 2);
|
|
614
|
-
__decorateClass([
|
|
615
|
-
property2()
|
|
616
|
-
], AddressView.prototype, "label", 2);
|
|
617
|
-
__decorateClass([
|
|
618
|
-
property2({ type: Boolean, attribute: "show-copy-button" })
|
|
619
|
-
], AddressView.prototype, "showCopyButton", 2);
|
|
620
|
-
__decorateClass([
|
|
621
|
-
property2({ type: Number, attribute: "max-width" })
|
|
622
|
-
], AddressView.prototype, "maxWidth", 2);
|
|
623
|
-
__decorateClass([
|
|
624
|
-
property2({ type: Boolean, attribute: "show-identicon" })
|
|
625
|
-
], AddressView.prototype, "showIdenticon", 2);
|
|
626
|
-
__decorateClass([
|
|
627
|
-
property2({ type: String, attribute: "address-color" })
|
|
628
|
-
], AddressView.prototype, "addressColor", 2);
|
|
629
|
-
__decorateClass([
|
|
630
|
-
property2({ type: String, attribute: "name-color" })
|
|
631
|
-
], AddressView.prototype, "nameColor", 2);
|
|
632
|
-
__decorateClass([
|
|
633
|
-
state()
|
|
634
|
-
], AddressView.prototype, "isLoadingAddress", 2);
|
|
635
|
-
__decorateClass([
|
|
636
|
-
state()
|
|
637
|
-
], AddressView.prototype, "identicon", 2);
|
|
638
|
-
AddressView = __decorateClass([
|
|
639
|
-
safeCustomElement2("address-view")
|
|
640
|
-
], AddressView);
|
|
641
|
-
|
|
642
|
-
// src/shared/custom-select.ts
|
|
643
|
-
import { safeCustomElement as safeCustomElement3 } from "@lukso/core/utils";
|
|
644
|
-
import { html as html3 } from "lit";
|
|
645
|
-
import { property as property3 } from "lit/decorators.js";
|
|
646
|
-
import makeBlockie2 from "ethereum-blockies-base64";
|
|
647
|
-
var CustomOption = class extends CoreLitElement {
|
|
648
|
-
constructor() {
|
|
649
|
-
super(...arguments);
|
|
650
|
-
this.selected = false;
|
|
651
|
-
this.disabled = false;
|
|
652
|
-
this.hoverable = true;
|
|
653
|
-
}
|
|
654
|
-
render() {
|
|
655
|
-
const base = "flex flex-row flex-1 items-center px-2 py-1 gap-2 h-7 rounded-md border-0 cursor-pointer text-[14px] text-neutral-20 w-full justify-between";
|
|
656
|
-
const hover = this.hoverable ? " hover:bg-neutral-95" : "";
|
|
657
|
-
const selected = this.selected ? " bg-neutral-90 rounded" : "";
|
|
658
|
-
const disabled = this.disabled ? " text-neutral-60 cursor-not-allowed" : "";
|
|
659
|
-
return html3`<button class="${base}${hover}${selected}${disabled}" ?disabled=${this.disabled}><slot></slot></button>`;
|
|
660
|
-
}
|
|
661
|
-
};
|
|
662
|
-
__decorateClass([
|
|
663
|
-
property3({ type: Boolean, reflect: true })
|
|
664
|
-
], CustomOption.prototype, "selected", 2);
|
|
665
|
-
__decorateClass([
|
|
666
|
-
property3({ type: Boolean, reflect: true })
|
|
667
|
-
], CustomOption.prototype, "disabled", 2);
|
|
668
|
-
__decorateClass([
|
|
669
|
-
property3({ type: Boolean, reflect: true })
|
|
670
|
-
], CustomOption.prototype, "hoverable", 2);
|
|
671
|
-
CustomOption = __decorateClass([
|
|
672
|
-
safeCustomElement3("custom-option")
|
|
673
|
-
], CustomOption);
|
|
674
|
-
var CustomSelect = class extends CoreLitElement {
|
|
675
|
-
constructor() {
|
|
676
|
-
super(...arguments);
|
|
677
|
-
this.open = false;
|
|
678
|
-
this.options = [];
|
|
679
|
-
this.size = "small";
|
|
680
|
-
this.onOutsideClick = (e) => {
|
|
681
|
-
if (!this.open) return;
|
|
682
|
-
const path = e.composedPath();
|
|
683
|
-
if (!path.includes(this)) this.close();
|
|
684
|
-
};
|
|
685
|
-
}
|
|
686
|
-
toggleOpen() {
|
|
687
|
-
this.open = !this.open;
|
|
688
|
-
}
|
|
689
|
-
close() {
|
|
690
|
-
this.open = false;
|
|
691
|
-
}
|
|
692
|
-
onOptionClick(opt) {
|
|
693
|
-
if (opt.disabled) return;
|
|
694
|
-
this.value = opt.value;
|
|
695
|
-
this.dispatchEvent(new Event("change", { bubbles: true }));
|
|
696
|
-
this.close();
|
|
697
|
-
}
|
|
698
|
-
onKeyDown(e) {
|
|
699
|
-
if (e.key === "Escape") this.close();
|
|
700
|
-
}
|
|
701
|
-
connectedCallback() {
|
|
702
|
-
super.connectedCallback();
|
|
703
|
-
window.addEventListener("click", this.onOutsideClick, { capture: true });
|
|
704
|
-
}
|
|
705
|
-
disconnectedCallback() {
|
|
706
|
-
window.removeEventListener("click", this.onOutsideClick, { capture: true });
|
|
707
|
-
super.disconnectedCallback();
|
|
708
|
-
}
|
|
709
|
-
updated() {
|
|
710
|
-
const selectedOption = this.getSelectedOption();
|
|
711
|
-
if (selectedOption) {
|
|
712
|
-
this.value = selectedOption.value;
|
|
713
|
-
}
|
|
714
|
-
}
|
|
715
|
-
getSelectedOption() {
|
|
716
|
-
return this.options.find((o) => o.value === this.value);
|
|
717
|
-
}
|
|
718
|
-
getIdenticonSizePx() {
|
|
719
|
-
switch (this.size) {
|
|
720
|
-
case "x-small":
|
|
721
|
-
return 10;
|
|
722
|
-
case "small":
|
|
723
|
-
return 12;
|
|
724
|
-
case "medium":
|
|
725
|
-
return 14;
|
|
726
|
-
case "large":
|
|
727
|
-
return 16;
|
|
728
|
-
default:
|
|
729
|
-
return 14;
|
|
730
|
-
}
|
|
731
|
-
}
|
|
732
|
-
renderIdenticon(address) {
|
|
733
|
-
const size = this.getIdenticonSizePx();
|
|
734
|
-
const identicon = makeBlockie2(address.toLowerCase());
|
|
735
|
-
return html3`
|
|
736
|
-
<div class="inline-flex items-center p-1 justify-center rounded-lg bg-neutral-100 border border-neutral-90 overflow-hidden flex-none">
|
|
737
|
-
<img
|
|
738
|
-
class="block"
|
|
739
|
-
src=${identicon}
|
|
740
|
-
alt="identicon"
|
|
741
|
-
style="width:${size}px;height:${size}px;"
|
|
742
|
-
/>
|
|
743
|
-
</div>
|
|
744
|
-
`;
|
|
745
|
-
}
|
|
746
|
-
renderOptionLabel(option) {
|
|
747
|
-
return option.value.startsWith("0x") ? html3`<div class="inline-flex items-center gap-2 px-2.5 py-1.5 text-neutral-20 leading-tight font-semibold">${this.renderIdenticon(
|
|
748
|
-
option.value
|
|
749
|
-
)} <span class="whitespace-nowrap overflow-hidden text-ellipsis text-[14px]">${option.label}</span></div>` : html3`<url-view url=${option.value} label=${option.label} size="x-small"></url-view>`;
|
|
750
|
-
}
|
|
751
|
-
render() {
|
|
752
|
-
const selectedOption = this.getSelectedOption();
|
|
753
|
-
return html3`
|
|
754
|
-
<div class="relative w-full min-w-[360px]" @keydown=${this.onKeyDown}>
|
|
755
|
-
<button class="box-border flex flex-row flex-1 w-full items-center h-[29px] bg-white border border-neutral-90 rounded-lg text-neutral-20 cursor-pointer justify-between" @click=${this.toggleOpen} aria-haspopup="listbox" aria-expanded=${this.open}>
|
|
756
|
-
<custom-option is-full-width .hoverable=${false}>
|
|
757
|
-
<div class="flex flex-row flex-1 items-center justify-between">
|
|
758
|
-
<span>${selectedOption ? this.renderOptionLabel(selectedOption) : "Select option"}</span>
|
|
759
|
-
<lukso-icon class="transition-transform ${this.open ? "rotate-180" : ""}" name="arrow-down-sm" size="small" color="neutral-20" aria-hidden="true">
|
|
760
|
-
</lukso-icon>
|
|
761
|
-
</div>
|
|
762
|
-
</custom-option>
|
|
763
|
-
</button>
|
|
764
|
-
|
|
765
|
-
${this.open && this.options.length > 0 ? html3`<div class="absolute left-0 top-[calc(100%+8px)] w-full bg-white border border-neutral-90 shadow-[0_0_16px_rgba(189,206,219,0.4)] rounded-xl p-2.5 flex flex-col gap-1 z-[1000] overflow-hidden box-border" role="listbox">
|
|
766
|
-
${this.options.map(
|
|
767
|
-
(opt) => html3`<custom-option .selected=${opt.value === this.value} .disabled=${opt.disabled} @click=${() => this.onOptionClick(opt)}>
|
|
768
|
-
${this.renderOptionLabel(opt)}
|
|
769
|
-
</custom-option>`
|
|
770
|
-
)}
|
|
771
|
-
</div>` : ""}
|
|
772
|
-
</div>
|
|
773
|
-
`;
|
|
774
|
-
}
|
|
775
|
-
};
|
|
776
|
-
__decorateClass([
|
|
777
|
-
property3()
|
|
778
|
-
], CustomSelect.prototype, "value", 2);
|
|
779
|
-
__decorateClass([
|
|
780
|
-
property3({ type: Boolean })
|
|
781
|
-
], CustomSelect.prototype, "open", 2);
|
|
782
|
-
__decorateClass([
|
|
783
|
-
property3({ type: Array })
|
|
784
|
-
], CustomSelect.prototype, "options", 2);
|
|
785
|
-
__decorateClass([
|
|
786
|
-
property3({ type: String })
|
|
787
|
-
], CustomSelect.prototype, "size", 2);
|
|
788
|
-
CustomSelect = __decorateClass([
|
|
789
|
-
safeCustomElement3("custom-select")
|
|
790
|
-
], CustomSelect);
|
|
791
|
-
|
|
792
|
-
// src/shared/function-name-view.ts
|
|
793
|
-
import { safeCustomElement as safeCustomElement4 } from "@lukso/core/utils";
|
|
794
|
-
import { html as html4 } from "lit";
|
|
795
|
-
import { property as property4 } from "lit/decorators.js";
|
|
796
|
-
var FunctionNameView = class extends CoreLitElement {
|
|
797
|
-
constructor() {
|
|
798
|
-
super(...arguments);
|
|
799
|
-
this.label = "";
|
|
800
|
-
this.icon = "user";
|
|
801
|
-
this.size = "small";
|
|
802
|
-
}
|
|
803
|
-
getPadding() {
|
|
804
|
-
switch (this.size) {
|
|
805
|
-
case "x-small":
|
|
806
|
-
return "2px 8px";
|
|
807
|
-
case "small":
|
|
808
|
-
return "4px 10px";
|
|
809
|
-
case "medium":
|
|
810
|
-
return "6px 12px";
|
|
811
|
-
case "large":
|
|
812
|
-
return "8px 14px";
|
|
813
|
-
default:
|
|
814
|
-
return "4px 10px";
|
|
815
|
-
}
|
|
816
|
-
}
|
|
817
|
-
getFontSize() {
|
|
818
|
-
switch (this.size) {
|
|
819
|
-
case "x-small":
|
|
820
|
-
return "12px";
|
|
821
|
-
case "small":
|
|
822
|
-
return "14px";
|
|
823
|
-
case "medium":
|
|
824
|
-
return "16px";
|
|
825
|
-
case "large":
|
|
826
|
-
return "18px";
|
|
827
|
-
default:
|
|
828
|
-
return "14px";
|
|
829
|
-
}
|
|
830
|
-
}
|
|
831
|
-
getIconSize() {
|
|
832
|
-
return this.size;
|
|
833
|
-
}
|
|
834
|
-
getHeight() {
|
|
835
|
-
switch (this.size) {
|
|
836
|
-
case "x-small":
|
|
837
|
-
return "h-6";
|
|
838
|
-
case "small":
|
|
839
|
-
return "h-8";
|
|
840
|
-
case "medium":
|
|
841
|
-
return "h-10";
|
|
842
|
-
case "large":
|
|
843
|
-
return "h-12";
|
|
844
|
-
default:
|
|
845
|
-
return "h-8";
|
|
846
|
-
}
|
|
847
|
-
}
|
|
848
|
-
render() {
|
|
849
|
-
return html4`
|
|
850
|
-
<div class="inline-flex ${this.getHeight()} items-center gap-2 bg-neutral-90 text-neutral-20 rounded-xl leading-none font-semibold" style="padding:${this.getPadding()}; font-size:${this.getFontSize()};">
|
|
851
|
-
<lukso-icon name=${this.icon} size=${this.getIconSize()} color=${this.color || ""}></lukso-icon>
|
|
852
|
-
<span class="whitespace-nowrap"><slot>${this.label}</slot></span>
|
|
853
|
-
</div>
|
|
854
|
-
`;
|
|
855
|
-
}
|
|
856
|
-
};
|
|
857
|
-
__decorateClass([
|
|
858
|
-
property4()
|
|
859
|
-
], FunctionNameView.prototype, "label", 2);
|
|
860
|
-
__decorateClass([
|
|
861
|
-
property4()
|
|
862
|
-
], FunctionNameView.prototype, "icon", 2);
|
|
863
|
-
__decorateClass([
|
|
864
|
-
property4()
|
|
865
|
-
], FunctionNameView.prototype, "size", 2);
|
|
866
|
-
__decorateClass([
|
|
867
|
-
property4({ attribute: "color" })
|
|
868
|
-
], FunctionNameView.prototype, "color", 2);
|
|
869
|
-
FunctionNameView = __decorateClass([
|
|
870
|
-
safeCustomElement4("function-name-view")
|
|
871
|
-
], FunctionNameView);
|
|
872
|
-
|
|
873
|
-
// src/shared/gas-provider-view.ts
|
|
874
|
-
import { safeCustomElement as safeCustomElement5 } from "@lukso/core/utils";
|
|
875
|
-
import { html as html5 } from "lit";
|
|
876
|
-
import { property as property5 } from "lit/decorators.js";
|
|
877
|
-
var GasProviderView = class extends CoreLitElement {
|
|
878
|
-
constructor() {
|
|
879
|
-
super(...arguments);
|
|
880
|
-
this.allRelayers = [];
|
|
881
|
-
this.balance = 0;
|
|
882
|
-
this.symbol = "LYX";
|
|
883
|
-
this.decimals = 18;
|
|
884
|
-
this.transactionFee = 0;
|
|
885
|
-
this.relayerAvailable = 0;
|
|
886
|
-
this.relayerUsed = 0;
|
|
887
|
-
this.relayerToBeUsed = 0;
|
|
888
|
-
this.relayerResetDate = "N/A";
|
|
889
|
-
}
|
|
890
|
-
formatToken(amount) {
|
|
891
|
-
return (amount / 10 ** this.decimals).toLocaleString(void 0, {
|
|
892
|
-
maximumFractionDigits: 6
|
|
893
|
-
});
|
|
894
|
-
}
|
|
895
|
-
onSelectChanged(e) {
|
|
896
|
-
const value = e.target.value;
|
|
897
|
-
if (!value) return;
|
|
898
|
-
if (this.controllerAddress && value === this.controllerAddress) {
|
|
899
|
-
const next = {
|
|
900
|
-
type: "controller",
|
|
901
|
-
id: this.controllerAddress
|
|
902
|
-
};
|
|
903
|
-
if (!this.selectedGasProvider || this.selectedGasProvider.id !== next.id || this.selectedGasProvider.type !== next.type) {
|
|
904
|
-
this.selectedGasProvider = next;
|
|
905
|
-
this.dispatchEvent(
|
|
906
|
-
new CustomEvent("on-gas-provider-change", {
|
|
907
|
-
detail: next,
|
|
908
|
-
bubbles: true
|
|
909
|
-
})
|
|
910
|
-
);
|
|
911
|
-
}
|
|
912
|
-
return;
|
|
913
|
-
}
|
|
914
|
-
const match = this.allRelayers.find(
|
|
915
|
-
(r) => r.website === value || r.apiUrl === value
|
|
916
|
-
);
|
|
917
|
-
if (match) {
|
|
918
|
-
const next = { type: "relayer", id: match.id };
|
|
919
|
-
if (!this.selectedGasProvider || this.selectedGasProvider.id !== next.id || this.selectedGasProvider.type !== next.type) {
|
|
920
|
-
this.selectedGasProvider = next;
|
|
921
|
-
this.dispatchEvent(
|
|
922
|
-
new CustomEvent("on-gas-provider-change", {
|
|
923
|
-
detail: next,
|
|
924
|
-
bubbles: true
|
|
925
|
-
})
|
|
926
|
-
);
|
|
927
|
-
}
|
|
928
|
-
return;
|
|
929
|
-
}
|
|
930
|
-
}
|
|
931
|
-
renderProgress(totalAvailable, used, toBeUsed, symbol, hasError) {
|
|
932
|
-
const usedPercent = totalAvailable ? used / totalAvailable * 100 : 0;
|
|
933
|
-
const toBeUsedPercent = totalAvailable ? toBeUsed / totalAvailable * 100 : 0;
|
|
934
|
-
const barOverHalf = usedPercent > 50;
|
|
935
|
-
return html5`<progress-view
|
|
936
|
-
class=${hasError ? "error" : ""}
|
|
937
|
-
.data=${[
|
|
938
|
-
{
|
|
939
|
-
value: usedPercent,
|
|
940
|
-
color: "var(--green-54)",
|
|
941
|
-
title: `${usedPercent}%`
|
|
942
|
-
},
|
|
943
|
-
{
|
|
944
|
-
value: toBeUsedPercent,
|
|
945
|
-
color: "var(--neutral-60)",
|
|
946
|
-
title: `${toBeUsedPercent}%`
|
|
947
|
-
}
|
|
948
|
-
]}
|
|
949
|
-
label-position=${barOverHalf ? "left" : "right"}
|
|
950
|
-
.label=${`${toBeUsed} / ${String(totalAvailable)} ${symbol}`}
|
|
951
|
-
>
|
|
952
|
-
</progress-view>`;
|
|
953
|
-
}
|
|
954
|
-
renderControllerProgress() {
|
|
955
|
-
return this.renderProgress(
|
|
956
|
-
this.balance,
|
|
957
|
-
0,
|
|
958
|
-
this.transactionFee,
|
|
959
|
-
this.symbol,
|
|
960
|
-
this.transactionFee > this.balance
|
|
961
|
-
);
|
|
962
|
-
}
|
|
963
|
-
renderRelayerProgress() {
|
|
964
|
-
return this.renderProgress(
|
|
965
|
-
this.relayerAvailable,
|
|
966
|
-
this.relayerUsed,
|
|
967
|
-
this.relayerToBeUsed,
|
|
968
|
-
"M GAS",
|
|
969
|
-
this.relayerToBeUsed > this.relayerAvailable
|
|
970
|
-
);
|
|
971
|
-
}
|
|
972
|
-
displayRelayerResetDate() {
|
|
973
|
-
const date = new Date(this.relayerResetDate);
|
|
974
|
-
return Number.isNaN(date.getTime()) ? "N/A" : date.toLocaleDateString();
|
|
975
|
-
}
|
|
976
|
-
render() {
|
|
977
|
-
const formatted = this.formatToken(this.balance);
|
|
978
|
-
const relayerOptions = this.allRelayers.map((r) => ({
|
|
979
|
-
value: r.website || r.apiUrl || `relayer:${r.id}`,
|
|
980
|
-
label: r.name,
|
|
981
|
-
disabled: false
|
|
982
|
-
}));
|
|
983
|
-
const controllerOption = this.controllerAddress ? [
|
|
984
|
-
{
|
|
985
|
-
value: this.controllerAddress,
|
|
986
|
-
label: this.controllerName ? `${this.controllerName} (${formatted} ${this.symbol})` : `UP Browser Extension (${formatted} ${this.symbol})`,
|
|
987
|
-
disabled: false
|
|
988
|
-
}
|
|
989
|
-
] : [];
|
|
990
|
-
const options = [...relayerOptions, ...controllerOption];
|
|
991
|
-
const selectedValue = this.selectedGasProvider ? this.selectedGasProvider.type === "controller" ? this.controllerAddress : (() => {
|
|
992
|
-
const r = this.allRelayers.find(
|
|
993
|
-
(x) => x.id === this.selectedGasProvider?.id
|
|
994
|
-
);
|
|
995
|
-
return r?.website || r?.apiUrl || `relayer:${this.selectedGasProvider?.id}`;
|
|
996
|
-
})() : void 0;
|
|
997
|
-
return html5`
|
|
998
|
-
<div class="w-full">
|
|
999
|
-
<custom-select .value=${selectedValue} .options=${options} @change=${this.onSelectChanged}></custom-select>
|
|
1000
|
-
${this.selectedGasProvider ? html5`<div class="mt-2">
|
|
1001
|
-
${this.selectedGasProvider?.type === "controller" ? this.renderControllerProgress() : this.renderRelayerProgress()}
|
|
1002
|
-
${this.selectedGasProvider?.type === "relayer" ? html5`<span class="text-[12px] text-neutral-60 mt-2 block">
|
|
1003
|
-
Your total of ${this.relayerAvailable}M resets on ${this.displayRelayerResetDate()}.
|
|
1004
|
-
</span>` : html5``}
|
|
1005
|
-
</div>` : html5``}
|
|
1006
|
-
|
|
1007
|
-
</div>
|
|
1008
|
-
`;
|
|
1009
|
-
}
|
|
1010
|
-
};
|
|
1011
|
-
__decorateClass([
|
|
1012
|
-
property5({ type: Array, reflect: true })
|
|
1013
|
-
], GasProviderView.prototype, "allRelayers", 2);
|
|
1014
|
-
__decorateClass([
|
|
1015
|
-
property5({ type: Number, reflect: true })
|
|
1016
|
-
], GasProviderView.prototype, "balance", 2);
|
|
1017
|
-
__decorateClass([
|
|
1018
|
-
property5({ type: Object, attribute: "selected-gas-provider", reflect: true })
|
|
1019
|
-
], GasProviderView.prototype, "selectedGasProvider", 2);
|
|
1020
|
-
__decorateClass([
|
|
1021
|
-
property5({ attribute: "controller-address", reflect: true })
|
|
1022
|
-
], GasProviderView.prototype, "controllerAddress", 2);
|
|
1023
|
-
__decorateClass([
|
|
1024
|
-
property5({ attribute: "controller-name", reflect: true })
|
|
1025
|
-
], GasProviderView.prototype, "controllerName", 2);
|
|
1026
|
-
__decorateClass([
|
|
1027
|
-
property5({ attribute: "symbol", reflect: true })
|
|
1028
|
-
], GasProviderView.prototype, "symbol", 2);
|
|
1029
|
-
__decorateClass([
|
|
1030
|
-
property5({ type: Number, reflect: true })
|
|
1031
|
-
], GasProviderView.prototype, "decimals", 2);
|
|
1032
|
-
__decorateClass([
|
|
1033
|
-
property5({ type: Number, attribute: "transaction-fee", reflect: true })
|
|
1034
|
-
], GasProviderView.prototype, "transactionFee", 2);
|
|
1035
|
-
__decorateClass([
|
|
1036
|
-
property5({ type: Number, attribute: "relayer-available", reflect: true })
|
|
1037
|
-
], GasProviderView.prototype, "relayerAvailable", 2);
|
|
1038
|
-
__decorateClass([
|
|
1039
|
-
property5({ type: Number, attribute: "relayer-used", reflect: true })
|
|
1040
|
-
], GasProviderView.prototype, "relayerUsed", 2);
|
|
1041
|
-
__decorateClass([
|
|
1042
|
-
property5({ type: Number, attribute: "relayer-to-be-used", reflect: true })
|
|
1043
|
-
], GasProviderView.prototype, "relayerToBeUsed", 2);
|
|
1044
|
-
__decorateClass([
|
|
1045
|
-
property5({ attribute: "relayer-reset-date", reflect: true })
|
|
1046
|
-
], GasProviderView.prototype, "relayerResetDate", 2);
|
|
1047
|
-
GasProviderView = __decorateClass([
|
|
1048
|
-
safeCustomElement5("gas-provider-view")
|
|
1049
|
-
], GasProviderView);
|
|
1050
|
-
|
|
1051
|
-
// src/shared/icon-view.ts
|
|
1052
|
-
import { Task as Task3 } from "@lit/task";
|
|
1053
|
-
import { safeCustomElement as safeCustomElement6 } from "@lukso/core/utils";
|
|
1054
|
-
import {
|
|
1055
|
-
useAddressResolver as useAddressResolver3,
|
|
1056
|
-
useImageLoader as useImageLoader2
|
|
1057
|
-
} from "@lukso/transaction-view-headless";
|
|
1058
|
-
import { html as html6 } from "lit";
|
|
1059
|
-
import { property as property6 } from "lit/decorators.js";
|
|
1060
|
-
var IconView = class extends CoreLitElement {
|
|
1061
|
-
constructor() {
|
|
1062
|
-
super(...arguments);
|
|
1063
|
-
this.size = "small";
|
|
1064
|
-
this.showName = true;
|
|
1065
|
-
this.namePosition = "below";
|
|
1066
|
-
this.maxWidth = 200;
|
|
1067
|
-
this.showIconIdenticon = true;
|
|
1068
|
-
this.showLabelIdenticon = false;
|
|
1069
|
-
this.forceUnresolved = false;
|
|
1070
|
-
// Composables
|
|
1071
|
-
this.imageLoader = useImageLoader2();
|
|
1072
|
-
this.addressResolver = useAddressResolver3();
|
|
1073
|
-
this.isLoadingAddress = false;
|
|
1074
|
-
this.isLoadingImage = false;
|
|
1075
|
-
// Task for resolving address data
|
|
1076
|
-
this.addressTask = new Task3(this, {
|
|
1077
|
-
task: async ([address]) => {
|
|
1078
|
-
if (!address) return null;
|
|
1079
|
-
this.isLoadingAddress = true;
|
|
1080
|
-
try {
|
|
1081
|
-
const resolved = await this.addressResolver.resolveAddress(address);
|
|
1082
|
-
this.requestUpdate();
|
|
1083
|
-
return resolved;
|
|
1084
|
-
} catch (error) {
|
|
1085
|
-
console.warn("\u274C IconView: Failed to resolve address:", error);
|
|
1086
|
-
return null;
|
|
1087
|
-
} finally {
|
|
1088
|
-
this.isLoadingAddress = false;
|
|
1089
|
-
}
|
|
1090
|
-
},
|
|
1091
|
-
args: () => [this.address]
|
|
1092
|
-
});
|
|
1093
|
-
// Task for loading profile image
|
|
1094
|
-
this.imageTask = new Task3(this, {
|
|
1095
|
-
task: async ([resolved]) => {
|
|
1096
|
-
if (!resolved) return null;
|
|
1097
|
-
this.isLoadingImage = true;
|
|
1098
|
-
try {
|
|
1099
|
-
let image = null;
|
|
1100
|
-
if (this.imageHint && resolved[this.imageHint]) {
|
|
1101
|
-
const imageArray = resolved[this.imageHint];
|
|
1102
|
-
if (Array.isArray(imageArray) && imageArray.length > 0) {
|
|
1103
|
-
image = await this.imageLoader.loadImage(imageArray, {
|
|
1104
|
-
width: this.getSizePixels(),
|
|
1105
|
-
height: this.getSizePixels(),
|
|
1106
|
-
dpr: window.devicePixelRatio || 1,
|
|
1107
|
-
index: this.imageIndex
|
|
1108
|
-
});
|
|
1109
|
-
}
|
|
1110
|
-
} else {
|
|
1111
|
-
image = await this.imageLoader.loadProfileImage(resolved, {
|
|
1112
|
-
width: this.getSizePixels(),
|
|
1113
|
-
height: this.getSizePixels(),
|
|
1114
|
-
dpr: window.devicePixelRatio || 1,
|
|
1115
|
-
index: this.imageIndex
|
|
1116
|
-
});
|
|
1117
|
-
}
|
|
1118
|
-
return image || this.imageLoader.getFallbackImage(resolved);
|
|
1119
|
-
} catch (error) {
|
|
1120
|
-
console.warn("Failed to load address image:", error);
|
|
1121
|
-
return this.imageLoader.getFallbackImage(resolved || {});
|
|
1122
|
-
} finally {
|
|
1123
|
-
this.isLoadingImage = false;
|
|
1124
|
-
}
|
|
1125
|
-
},
|
|
1126
|
-
args: () => [this.addressTask.value]
|
|
1127
|
-
});
|
|
1128
|
-
}
|
|
1129
|
-
/**
|
|
1130
|
-
* Get pixel size for the current size setting
|
|
1131
|
-
*/
|
|
1132
|
-
getSizePixels() {
|
|
1133
|
-
switch (this.size) {
|
|
1134
|
-
case "x-small":
|
|
1135
|
-
return 16;
|
|
1136
|
-
case "small":
|
|
1137
|
-
return 24;
|
|
1138
|
-
case "medium":
|
|
1139
|
-
return 32;
|
|
1140
|
-
case "large":
|
|
1141
|
-
return 48;
|
|
1142
|
-
case "2x-large":
|
|
1143
|
-
return 124;
|
|
1144
|
-
default:
|
|
1145
|
-
return 24;
|
|
1146
|
-
}
|
|
1147
|
-
}
|
|
1148
|
-
/**
|
|
1149
|
-
* Check if this is a contract address (shows square icon)
|
|
1150
|
-
*/
|
|
1151
|
-
get isContract() {
|
|
1152
|
-
const resolved = this.addressTask.value;
|
|
1153
|
-
return resolved ? this.imageLoader.isContractAddress(resolved) : false;
|
|
1154
|
-
}
|
|
1155
|
-
/**
|
|
1156
|
-
* Handle icon click
|
|
1157
|
-
*/
|
|
1158
|
-
handleClick() {
|
|
1159
|
-
this.dispatchEvent(
|
|
1160
|
-
new CustomEvent("address-click", {
|
|
1161
|
-
detail: {
|
|
1162
|
-
address: this.address,
|
|
1163
|
-
resolved: this.addressTask.value
|
|
1164
|
-
},
|
|
1165
|
-
bubbles: true
|
|
1166
|
-
})
|
|
1167
|
-
);
|
|
1168
|
-
}
|
|
1169
|
-
render() {
|
|
1170
|
-
const imageResult = this.imageTask.value;
|
|
1171
|
-
const containerClass = this.namePosition === "beside" ? "row" : "column";
|
|
1172
|
-
return html6`
|
|
1173
|
-
<div class="${containerClass === "row" ? "flex items-start gap-1" : "flex flex-col items-center gap-1"}">
|
|
1174
|
-
${this.label ? html6`<div class="text-[12px] text-neutral-60 font-medium">${this.label}</div>` : ""}
|
|
1175
|
-
|
|
1176
|
-
<div class="${this.namePosition === "beside" ? "inline-flex flex-row items-center gap-2" : "inline-flex flex-col items-center gap-1.5"}">
|
|
1177
|
-
<lukso-profile
|
|
1178
|
-
size=${this.size}
|
|
1179
|
-
profile-address=${this.address}
|
|
1180
|
-
profile-url=${imageResult?.src || ""}
|
|
1181
|
-
?has-identicon=${this.showIconIdenticon}
|
|
1182
|
-
?is-square=${this.isContract}
|
|
1183
|
-
class="inline-flex items-center cursor-pointer transition-transform duration-200 hover:scale-105"
|
|
1184
|
-
@click=${this.handleClick}
|
|
1185
|
-
></lukso-profile>
|
|
1186
|
-
|
|
1187
|
-
${this.showName ? html6`
|
|
1188
|
-
<address-view
|
|
1189
|
-
class="leading-none"
|
|
1190
|
-
address=${this.address}
|
|
1191
|
-
.showIdenticon=${this.showLabelIdenticon}
|
|
1192
|
-
size=${this.size}
|
|
1193
|
-
max-width=${this.maxWidth}
|
|
1194
|
-
></address-view>
|
|
1195
|
-
` : ""}
|
|
1196
|
-
</div>
|
|
1197
|
-
</div>
|
|
1198
|
-
`;
|
|
1199
|
-
}
|
|
1200
|
-
};
|
|
1201
|
-
__decorateClass([
|
|
1202
|
-
property6()
|
|
1203
|
-
], IconView.prototype, "address", 2);
|
|
1204
|
-
__decorateClass([
|
|
1205
|
-
property6({ type: Object })
|
|
1206
|
-
], IconView.prototype, "resolved", 2);
|
|
1207
|
-
__decorateClass([
|
|
1208
|
-
property6()
|
|
1209
|
-
], IconView.prototype, "size", 2);
|
|
1210
|
-
__decorateClass([
|
|
1211
|
-
property6()
|
|
1212
|
-
], IconView.prototype, "label", 2);
|
|
1213
|
-
__decorateClass([
|
|
1214
|
-
property6({ type: Boolean, attribute: "show-name" })
|
|
1215
|
-
], IconView.prototype, "showName", 2);
|
|
1216
|
-
__decorateClass([
|
|
1217
|
-
property6({ attribute: "name-position" })
|
|
1218
|
-
], IconView.prototype, "namePosition", 2);
|
|
1219
|
-
__decorateClass([
|
|
1220
|
-
property6({ type: Number, attribute: "max-width" })
|
|
1221
|
-
], IconView.prototype, "maxWidth", 2);
|
|
1222
|
-
__decorateClass([
|
|
1223
|
-
property6({ type: Boolean, attribute: "show-icon-identicon" })
|
|
1224
|
-
], IconView.prototype, "showIconIdenticon", 2);
|
|
1225
|
-
__decorateClass([
|
|
1226
|
-
property6({ type: Boolean, attribute: "show-label-identicon" })
|
|
1227
|
-
], IconView.prototype, "showLabelIdenticon", 2);
|
|
1228
|
-
__decorateClass([
|
|
1229
|
-
property6({ type: Boolean, attribute: "force-unresolved" })
|
|
1230
|
-
], IconView.prototype, "forceUnresolved", 2);
|
|
1231
|
-
__decorateClass([
|
|
1232
|
-
property6({ type: String, attribute: "image-hint" })
|
|
1233
|
-
], IconView.prototype, "imageHint", 2);
|
|
1234
|
-
__decorateClass([
|
|
1235
|
-
property6({ type: Number, attribute: "image-index" })
|
|
1236
|
-
], IconView.prototype, "imageIndex", 2);
|
|
1237
|
-
IconView = __decorateClass([
|
|
1238
|
-
safeCustomElement6("icon-view")
|
|
1239
|
-
], IconView);
|
|
1240
|
-
|
|
1241
|
-
// src/shared/image-loader-controller.ts
|
|
1242
|
-
import {
|
|
1243
|
-
useImageLoader as useImageLoaderHeadless
|
|
1244
|
-
} from "@lukso/transaction-view-headless";
|
|
1245
|
-
var ImageLoaderController = class {
|
|
1246
|
-
constructor(host) {
|
|
1247
|
-
this.headlessLoader = useImageLoaderHeadless();
|
|
1248
|
-
// Internal state
|
|
1249
|
-
this._state = {
|
|
1250
|
-
result: null,
|
|
1251
|
-
loading: false,
|
|
1252
|
-
error: null
|
|
1253
|
-
};
|
|
1254
|
-
this.host = host;
|
|
1255
|
-
host.addController(this);
|
|
1256
|
-
}
|
|
1257
|
-
hostConnected() {
|
|
1258
|
-
}
|
|
1259
|
-
hostDisconnected() {
|
|
1260
|
-
}
|
|
1261
|
-
get state() {
|
|
1262
|
-
return this._state;
|
|
1263
|
-
}
|
|
1264
|
-
get isLoading() {
|
|
1265
|
-
return this._state.loading;
|
|
1266
|
-
}
|
|
1267
|
-
get error() {
|
|
1268
|
-
return this._state.error;
|
|
1269
|
-
}
|
|
1270
|
-
get result() {
|
|
1271
|
-
return this._state.result;
|
|
1272
|
-
}
|
|
1273
|
-
/**
|
|
1274
|
-
* Load image from data array
|
|
1275
|
-
*/
|
|
1276
|
-
async loadImage(imageData, options = {}) {
|
|
1277
|
-
this.updateState({ loading: true, error: null });
|
|
1278
|
-
try {
|
|
1279
|
-
const result = await this.headlessLoader.loadImage(imageData, options);
|
|
1280
|
-
this.updateState({ result, loading: false });
|
|
1281
|
-
return result;
|
|
1282
|
-
} catch (err) {
|
|
1283
|
-
const error = err instanceof Error ? err.message : "Failed to load image";
|
|
1284
|
-
this.updateState({ loading: false, error });
|
|
1285
|
-
return null;
|
|
1286
|
-
}
|
|
1287
|
-
}
|
|
1288
|
-
/**
|
|
1289
|
-
* Load profile image from address data
|
|
1290
|
-
*/
|
|
1291
|
-
async loadProfileImage(addressData, options = {}) {
|
|
1292
|
-
this.updateState({ loading: true, error: null });
|
|
1293
|
-
try {
|
|
1294
|
-
const result = await this.headlessLoader.loadProfileImage(addressData, options) || this.headlessLoader.getFallbackImage(addressData);
|
|
1295
|
-
this.updateState({ result, loading: false });
|
|
1296
|
-
return result;
|
|
1297
|
-
} catch (err) {
|
|
1298
|
-
const error = err instanceof Error ? err.message : "Failed to load profile image";
|
|
1299
|
-
const fallback = this.headlessLoader.getFallbackImage(addressData);
|
|
1300
|
-
this.updateState({ result: fallback, loading: false, error });
|
|
1301
|
-
return fallback;
|
|
1302
|
-
}
|
|
1303
|
-
}
|
|
1304
|
-
/**
|
|
1305
|
-
* Load image from address signal (reactive)
|
|
1306
|
-
*/
|
|
1307
|
-
loadFromSignal(addressSignal, options = {}) {
|
|
1308
|
-
const addressData = addressSignal.value?.data;
|
|
1309
|
-
if (!addressData) {
|
|
1310
|
-
const fallback = this.headlessLoader.getFallbackImage({});
|
|
1311
|
-
this.updateState({ result: fallback, loading: false, error: null });
|
|
1312
|
-
return;
|
|
1313
|
-
}
|
|
1314
|
-
this.loadProfileImage(addressData, options);
|
|
1315
|
-
}
|
|
1316
|
-
/**
|
|
1317
|
-
* Get fallback image synchronously
|
|
1318
|
-
*/
|
|
1319
|
-
getFallbackImage(addressData) {
|
|
1320
|
-
return this.headlessLoader.getFallbackImage(addressData);
|
|
1321
|
-
}
|
|
1322
|
-
/**
|
|
1323
|
-
* Check if address is a contract
|
|
1324
|
-
*/
|
|
1325
|
-
isContractAddress(addressData) {
|
|
1326
|
-
return this.headlessLoader.isContractAddress(addressData);
|
|
1327
|
-
}
|
|
1328
|
-
/**
|
|
1329
|
-
* Clear current state
|
|
1330
|
-
*/
|
|
1331
|
-
clear() {
|
|
1332
|
-
this.updateState({ result: null, loading: false, error: null });
|
|
1333
|
-
}
|
|
1334
|
-
updateState(updates) {
|
|
1335
|
-
this._state = { ...this._state, ...updates };
|
|
1336
|
-
this.host.requestUpdate();
|
|
1337
|
-
}
|
|
1338
|
-
};
|
|
1339
|
-
function useImageLoader3(host) {
|
|
1340
|
-
return new ImageLoaderController(host);
|
|
1341
|
-
}
|
|
1342
|
-
|
|
1343
|
-
// src/shared/notification-view.ts
|
|
1344
|
-
import { safeCustomElement as safeCustomElement7 } from "@lukso/core/utils";
|
|
1345
|
-
import { html as html7 } from "lit";
|
|
1346
|
-
import { property as property7, state as state2 } from "lit/decorators.js";
|
|
1347
|
-
var NotificationView = class extends CoreLitElement {
|
|
1348
|
-
constructor() {
|
|
1349
|
-
super(...arguments);
|
|
1350
|
-
this.variant = "info";
|
|
1351
|
-
this.message = "";
|
|
1352
|
-
this.title = "";
|
|
1353
|
-
this.acknowledgeable = false;
|
|
1354
|
-
this.acknowledgeText = "I understand and want to continue";
|
|
1355
|
-
this.acknowledged = false;
|
|
1356
|
-
this.checked = false;
|
|
1357
|
-
}
|
|
1358
|
-
handleAcknowledgeChange(e) {
|
|
1359
|
-
e.stopPropagation();
|
|
1360
|
-
const target = e.target;
|
|
1361
|
-
const checked = !!(target?.checked ?? e.detail?.checked ?? false);
|
|
1362
|
-
if (checked !== this.checked) {
|
|
1363
|
-
this.checked = checked;
|
|
1364
|
-
}
|
|
1365
|
-
if (this.checked) {
|
|
1366
|
-
this.acknowledged = true;
|
|
1367
|
-
this.dispatchEvent(
|
|
1368
|
-
new CustomEvent("notification-acknowledged", {
|
|
1369
|
-
detail: {
|
|
1370
|
-
variant: this.variant,
|
|
1371
|
-
message: this.message,
|
|
1372
|
-
title: this.title,
|
|
1373
|
-
checked: this.checked
|
|
1374
|
-
},
|
|
1375
|
-
bubbles: true
|
|
1376
|
-
})
|
|
1377
|
-
);
|
|
1378
|
-
}
|
|
1379
|
-
}
|
|
1380
|
-
render() {
|
|
1381
|
-
if (this.acknowledged) return html7``;
|
|
1382
|
-
return html7`
|
|
1383
|
-
<div class="grid grid-cols-[24px_1fr] items-start gap-3 p-3 rounded-xl text-neutral-10 leading-snug ${this.getVariantBackgroundClass()}">
|
|
1384
|
-
<div class="flex items-center justify-center text-[16px] text-neutral-20 self-center" aria-hidden="true">
|
|
1385
|
-
<lukso-icon name="${this.renderIcon()}" size="small" color="${this.getVariantColor()}"></lukso-icon>
|
|
1386
|
-
</div>
|
|
1387
|
-
<div class="text-[14px] flex flex-col gap-1.5">
|
|
1388
|
-
${this.title ? html7`<div class="font-semibold text-neutral-20 paragraph-inter-14-semi-bold">${this.title}</div>` : ""}
|
|
1389
|
-
<div class="text-neutral-20"><slot>${this.message}</slot></div>
|
|
1390
|
-
${this.acknowledgeable ? html7`
|
|
1391
|
-
<div class="inline-flex items-center gap-2 mt-1 text-[12px] text-neutral-20 select-none cursor-pointer paragraph-inter-12-medium">
|
|
1392
|
-
<lukso-checkbox
|
|
1393
|
-
size="x-small"
|
|
1394
|
-
?checked=${this.checked}
|
|
1395
|
-
@change=${this.handleAcknowledgeChange}
|
|
1396
|
-
><span class="paragraph-inter-14-semi-bold">${this.acknowledgeText}</span></lukso-checkbox>
|
|
1397
|
-
</div>
|
|
1398
|
-
` : ""}
|
|
1399
|
-
</div>
|
|
1400
|
-
</div>
|
|
1401
|
-
`;
|
|
1402
|
-
}
|
|
1403
|
-
renderIcon() {
|
|
1404
|
-
switch (this.variant) {
|
|
1405
|
-
case "success":
|
|
1406
|
-
return "bulb-outline";
|
|
1407
|
-
case "warning":
|
|
1408
|
-
return "warning-round";
|
|
1409
|
-
case "error":
|
|
1410
|
-
return "warning-triangle";
|
|
1411
|
-
default:
|
|
1412
|
-
return "bulb-outline";
|
|
1413
|
-
}
|
|
1414
|
-
}
|
|
1415
|
-
getVariantColor() {
|
|
1416
|
-
switch (this.variant) {
|
|
1417
|
-
case "success":
|
|
1418
|
-
return "green-45";
|
|
1419
|
-
case "warning":
|
|
1420
|
-
return "yellow-55";
|
|
1421
|
-
case "error":
|
|
1422
|
-
return "red-55";
|
|
1423
|
-
default:
|
|
1424
|
-
return "blue-50";
|
|
1425
|
-
}
|
|
1426
|
-
}
|
|
1427
|
-
getVariantBackgroundClass() {
|
|
1428
|
-
switch (this.variant) {
|
|
1429
|
-
case "success":
|
|
1430
|
-
return "bg-green-85";
|
|
1431
|
-
case "warning":
|
|
1432
|
-
return "bg-yellow-85";
|
|
1433
|
-
case "error":
|
|
1434
|
-
return "bg-red-85";
|
|
1435
|
-
default:
|
|
1436
|
-
return "bg-blue-85";
|
|
1437
|
-
}
|
|
1438
|
-
}
|
|
1439
|
-
};
|
|
1440
|
-
__decorateClass([
|
|
1441
|
-
property7()
|
|
1442
|
-
], NotificationView.prototype, "variant", 2);
|
|
1443
|
-
__decorateClass([
|
|
1444
|
-
property7()
|
|
1445
|
-
], NotificationView.prototype, "message", 2);
|
|
1446
|
-
__decorateClass([
|
|
1447
|
-
property7()
|
|
1448
|
-
], NotificationView.prototype, "title", 2);
|
|
1449
|
-
__decorateClass([
|
|
1450
|
-
property7({ type: Boolean, attribute: "acknowledgeable" })
|
|
1451
|
-
], NotificationView.prototype, "acknowledgeable", 2);
|
|
1452
|
-
__decorateClass([
|
|
1453
|
-
property7({ attribute: "acknowledge-text" })
|
|
1454
|
-
], NotificationView.prototype, "acknowledgeText", 2);
|
|
1455
|
-
__decorateClass([
|
|
1456
|
-
state2()
|
|
1457
|
-
], NotificationView.prototype, "acknowledged", 2);
|
|
1458
|
-
__decorateClass([
|
|
1459
|
-
property7({ type: Boolean, reflect: true })
|
|
1460
|
-
], NotificationView.prototype, "checked", 2);
|
|
1461
|
-
NotificationView = __decorateClass([
|
|
1462
|
-
safeCustomElement7("notification-view")
|
|
1463
|
-
], NotificationView);
|
|
1464
|
-
|
|
1465
|
-
// src/shared/progress-view.ts
|
|
1466
|
-
import { safeCustomElement as safeCustomElement8 } from "@lukso/core/utils";
|
|
1467
|
-
import { html as html8 } from "lit";
|
|
1468
|
-
import { property as property8 } from "lit/decorators.js";
|
|
1469
|
-
var ProgressView = class extends CoreLitElement {
|
|
1470
|
-
constructor() {
|
|
1471
|
-
super(...arguments);
|
|
1472
|
-
this.data = [];
|
|
1473
|
-
this.labelPosition = "right";
|
|
1474
|
-
}
|
|
1475
|
-
renderGasProviderLabel() {
|
|
1476
|
-
return html8`
|
|
1477
|
-
${this.label ? html8`
|
|
1478
|
-
<span class="progress-label-value">${this.label}</span>
|
|
1479
|
-
${this.unit ? html8`<span class="progress-label-unit" data-testid="unit">${this.unit}</span>` : ""}
|
|
1480
|
-
` : html8`
|
|
1481
|
-
<slot></slot>
|
|
1482
|
-
${this.unit ? html8`<span class="progress-label-unit" data-testid="unit">${this.unit}</span>` : ""}
|
|
1483
|
-
`}
|
|
1484
|
-
`;
|
|
1485
|
-
}
|
|
1486
|
-
render() {
|
|
1487
|
-
const isError = (this.className || "").split(/\s+/).includes("error");
|
|
1488
|
-
return html8`
|
|
1489
|
-
<div class="relative grid w-full ${this.className || ""}">
|
|
1490
|
-
<div class="flex bg-neutral-95 h-6 rounded-lg relative col-[1] row-[1] overflow-hidden" style=${isError ? "background-color: var(--red-65);" : ""} role="progressbar">
|
|
1491
|
-
${this.data.map((seg, index) => {
|
|
1492
|
-
const width = `${Math.max(0, Math.min(100, Number(seg.value || 0)))}%`;
|
|
1493
|
-
const backgroundColor = seg.color || "var(--neutral-90)";
|
|
1494
|
-
const title = seg.title || "";
|
|
1495
|
-
return html8`<div
|
|
1496
|
-
class="h-full flex items-center justify-center text-[10px] font-semibold"
|
|
1497
|
-
style=${`width:${width};background-color:${backgroundColor};`}
|
|
1498
|
-
data-testid=${`value-${index}`}
|
|
1499
|
-
>${title}</div>`;
|
|
1500
|
-
})}
|
|
1501
|
-
</div>
|
|
1502
|
-
<div class=${`flex items-center absolute h-6 rounded-lg overflow-visible w-full col-[1] row-[1] top-0 left-0 ${this.labelPosition === "left" ? "justify-start" : "justify-end"}`} data-testid="progress-labels">
|
|
1503
|
-
<div class="text-[13px] font-semibold text-white mix-blend-difference h-inherit flex items-center p-0 right-4 absolute" data-testid="label">
|
|
1504
|
-
${this.renderGasProviderLabel()}
|
|
1505
|
-
</div>
|
|
1506
|
-
</div>
|
|
1507
|
-
</div>
|
|
1508
|
-
`;
|
|
1509
|
-
}
|
|
1510
|
-
};
|
|
1511
|
-
__decorateClass([
|
|
1512
|
-
property8({ type: Array })
|
|
1513
|
-
], ProgressView.prototype, "data", 2);
|
|
1514
|
-
__decorateClass([
|
|
1515
|
-
property8()
|
|
1516
|
-
], ProgressView.prototype, "label", 2);
|
|
1517
|
-
__decorateClass([
|
|
1518
|
-
property8()
|
|
1519
|
-
], ProgressView.prototype, "unit", 2);
|
|
1520
|
-
__decorateClass([
|
|
1521
|
-
property8()
|
|
1522
|
-
], ProgressView.prototype, "address", 2);
|
|
1523
|
-
__decorateClass([
|
|
1524
|
-
property8({ attribute: "label-position" })
|
|
1525
|
-
], ProgressView.prototype, "labelPosition", 2);
|
|
1526
|
-
ProgressView = __decorateClass([
|
|
1527
|
-
safeCustomElement8("progress-view")
|
|
1528
|
-
], ProgressView);
|
|
1529
|
-
|
|
1530
|
-
// src/shared/scroll-to-bottom-button.ts
|
|
1531
|
-
import { safeCustomElement as safeCustomElement9 } from "@lukso/core/utils";
|
|
1532
|
-
import { html as html9 } from "lit";
|
|
1533
|
-
import { property as property9 } from "lit/decorators.js";
|
|
1534
|
-
var ScrollToBottomButton = class extends CoreLitElement {
|
|
1535
|
-
constructor() {
|
|
1536
|
-
super(...arguments);
|
|
1537
|
-
this.show = false;
|
|
1538
|
-
this.color = "neutral-20";
|
|
1539
|
-
this.iconSize = "medium";
|
|
1540
|
-
this.iconName = "arrow-down-lg";
|
|
1541
|
-
}
|
|
1542
|
-
handleClick() {
|
|
1543
|
-
this.dispatchEvent(new CustomEvent("scroll-to-bottom", { bubbles: true }));
|
|
1544
|
-
}
|
|
1545
|
-
render() {
|
|
1546
|
-
return html9`
|
|
1547
|
-
<div class="h-14 w-[140px] self-center rounded-t-[120px] bg-[radial-gradient(ellipse_75px_52px_at_bottom_center,rgba(255,255,255,0.78)_0%,rgba(255,255,255,0)_112.5%)] flex justify-center items-center transition-opacity duration-700 ease-in-out ${this.show ? "opacity-100 z-10" : "opacity-0 -z-10"}">
|
|
1548
|
-
<div class="flex justify-center items-center w-10 h-10 rounded-full border border-neutral-90 shadow-[0_0_16px_rgba(189,206,219,0.4)] bg-neutral-100 cursor-pointer animate-bounce" @click=${this.handleClick}>
|
|
1549
|
-
<lukso-icon
|
|
1550
|
-
name=${this.iconName}
|
|
1551
|
-
size=${this.iconSize}
|
|
1552
|
-
color=${this.color}
|
|
1553
|
-
></lukso-icon>
|
|
1554
|
-
</div>
|
|
1555
|
-
</div>
|
|
1556
|
-
`;
|
|
1557
|
-
}
|
|
1558
|
-
};
|
|
1559
|
-
__decorateClass([
|
|
1560
|
-
property9({ type: Boolean, attribute: "show" })
|
|
1561
|
-
], ScrollToBottomButton.prototype, "show", 2);
|
|
1562
|
-
__decorateClass([
|
|
1563
|
-
property9()
|
|
1564
|
-
], ScrollToBottomButton.prototype, "color", 2);
|
|
1565
|
-
__decorateClass([
|
|
1566
|
-
property9({ attribute: "icon-size" })
|
|
1567
|
-
], ScrollToBottomButton.prototype, "iconSize", 2);
|
|
1568
|
-
__decorateClass([
|
|
1569
|
-
property9({ attribute: "icon-name" })
|
|
1570
|
-
], ScrollToBottomButton.prototype, "iconName", 2);
|
|
1571
|
-
ScrollToBottomButton = __decorateClass([
|
|
1572
|
-
safeCustomElement9("scroll-to-bottom-button")
|
|
1573
|
-
], ScrollToBottomButton);
|
|
1574
|
-
|
|
1575
|
-
// src/shared/signal-controller.ts
|
|
1576
|
-
var SignalController = class _SignalController {
|
|
1577
|
-
constructor(host, signal) {
|
|
1578
|
-
this.host = host;
|
|
1579
|
-
this.signal = signal;
|
|
1580
|
-
host.addController(this);
|
|
1581
|
-
}
|
|
1582
|
-
hostConnected() {
|
|
1583
|
-
let lastValue = this.signal.value;
|
|
1584
|
-
const check = () => {
|
|
1585
|
-
const currentValue = this.signal.value;
|
|
1586
|
-
if (currentValue !== lastValue) {
|
|
1587
|
-
lastValue = currentValue;
|
|
1588
|
-
this.host.requestUpdate();
|
|
1589
|
-
}
|
|
1590
|
-
};
|
|
1591
|
-
const interval = setInterval(check, 50);
|
|
1592
|
-
this.unsubscribe = () => clearInterval(interval);
|
|
1593
|
-
}
|
|
1594
|
-
hostDisconnected() {
|
|
1595
|
-
if (this.unsubscribe) {
|
|
1596
|
-
this.unsubscribe();
|
|
1597
|
-
this.unsubscribe = void 0;
|
|
1598
|
-
}
|
|
1599
|
-
}
|
|
1600
|
-
get value() {
|
|
1601
|
-
return this.signal.value;
|
|
1602
|
-
}
|
|
1603
|
-
/**
|
|
1604
|
-
* Create a new SignalController for a different signal
|
|
1605
|
-
*/
|
|
1606
|
-
static create(host, signal) {
|
|
1607
|
-
return new _SignalController(host, signal);
|
|
1608
|
-
}
|
|
1609
|
-
};
|
|
1610
|
-
var MultiSignalController = class {
|
|
1611
|
-
constructor(host, signals) {
|
|
1612
|
-
this.unsubscribes = [];
|
|
1613
|
-
this.host = host;
|
|
1614
|
-
this.signals = signals;
|
|
1615
|
-
host.addController(this);
|
|
1616
|
-
}
|
|
1617
|
-
hostConnected() {
|
|
1618
|
-
this.signals.forEach((signal, index) => {
|
|
1619
|
-
let lastValue = signal.value;
|
|
1620
|
-
const check = () => {
|
|
1621
|
-
const currentValue = signal.value;
|
|
1622
|
-
if (currentValue !== lastValue) {
|
|
1623
|
-
lastValue = currentValue;
|
|
1624
|
-
this.host.requestUpdate();
|
|
1625
|
-
}
|
|
1626
|
-
};
|
|
1627
|
-
const interval = setInterval(check, 50);
|
|
1628
|
-
this.unsubscribes[index] = () => clearInterval(interval);
|
|
1629
|
-
});
|
|
1630
|
-
}
|
|
1631
|
-
hostDisconnected() {
|
|
1632
|
-
this.unsubscribes.forEach((unsubscribe) => {
|
|
1633
|
-
unsubscribe();
|
|
1634
|
-
});
|
|
1635
|
-
this.unsubscribes = [];
|
|
1636
|
-
}
|
|
1637
|
-
getValue(index) {
|
|
1638
|
-
return this.signals[index]?.value;
|
|
1639
|
-
}
|
|
1640
|
-
getValues() {
|
|
1641
|
-
return this.signals.map((signal) => signal.value);
|
|
1642
|
-
}
|
|
1643
|
-
};
|
|
1644
|
-
function useSignal(host, signal) {
|
|
1645
|
-
return new SignalController(host, signal);
|
|
1646
|
-
}
|
|
1647
|
-
function useSignals(host, signals) {
|
|
1648
|
-
return new MultiSignalController(host, signals);
|
|
1649
|
-
}
|
|
1650
|
-
|
|
1651
|
-
// src/shared/transaction-view-controller.ts
|
|
1652
|
-
import {
|
|
1653
|
-
findAllTransactionViews,
|
|
1654
|
-
findBestTransactionView,
|
|
1655
|
-
useTransactionView as useTransactionViewHeadless
|
|
1656
|
-
} from "@lukso/transaction-view-headless";
|
|
1657
|
-
var TransactionViewController = class {
|
|
1658
|
-
constructor(host, transaction, options) {
|
|
1659
|
-
this.transaction = transaction;
|
|
1660
|
-
this.options = options;
|
|
1661
|
-
this.headlessInstance = null;
|
|
1662
|
-
// Internal state
|
|
1663
|
-
this._state = {
|
|
1664
|
-
matches: [],
|
|
1665
|
-
bestMatch: null,
|
|
1666
|
-
component: null,
|
|
1667
|
-
loading: false,
|
|
1668
|
-
error: null,
|
|
1669
|
-
isResolvingAddresses: false,
|
|
1670
|
-
resolvedAddresses: {}
|
|
1671
|
-
};
|
|
1672
|
-
this.host = host;
|
|
1673
|
-
host.addController(this);
|
|
1674
|
-
this.initialize();
|
|
1675
|
-
}
|
|
1676
|
-
hostConnected() {
|
|
1677
|
-
this.setupSync();
|
|
1678
|
-
}
|
|
1679
|
-
hostDisconnected() {
|
|
1680
|
-
if (this.syncInterval) {
|
|
1681
|
-
clearInterval(this.syncInterval);
|
|
1682
|
-
this.syncInterval = void 0;
|
|
1683
|
-
}
|
|
1684
|
-
}
|
|
1685
|
-
get state() {
|
|
1686
|
-
return this._state;
|
|
1687
|
-
}
|
|
1688
|
-
get matches() {
|
|
1689
|
-
return this._state.matches;
|
|
1690
|
-
}
|
|
1691
|
-
get bestMatch() {
|
|
1692
|
-
return this._state.bestMatch;
|
|
1693
|
-
}
|
|
1694
|
-
get component() {
|
|
1695
|
-
return this._state.component;
|
|
1696
|
-
}
|
|
1697
|
-
get isLoading() {
|
|
1698
|
-
return this._state.loading;
|
|
1699
|
-
}
|
|
1700
|
-
get error() {
|
|
1701
|
-
return this._state.error;
|
|
1702
|
-
}
|
|
1703
|
-
get isResolvingAddresses() {
|
|
1704
|
-
return this._state.isResolvingAddresses;
|
|
1705
|
-
}
|
|
1706
|
-
get resolvedAddresses() {
|
|
1707
|
-
return this._state.resolvedAddresses;
|
|
1708
|
-
}
|
|
1709
|
-
/**
|
|
1710
|
-
* Load a specific match
|
|
1711
|
-
*/
|
|
1712
|
-
async loadMatch(match) {
|
|
1713
|
-
if (!this.headlessInstance) {
|
|
1714
|
-
throw new Error("Transaction view not initialized");
|
|
1715
|
-
}
|
|
1716
|
-
try {
|
|
1717
|
-
const result = await this.headlessInstance.loadMatch(match);
|
|
1718
|
-
this.syncState();
|
|
1719
|
-
return result;
|
|
1720
|
-
} catch (err) {
|
|
1721
|
-
this.syncState();
|
|
1722
|
-
throw err;
|
|
1723
|
-
}
|
|
1724
|
-
}
|
|
1725
|
-
/**
|
|
1726
|
-
* Load the best match
|
|
1727
|
-
*/
|
|
1728
|
-
async loadBestMatch() {
|
|
1729
|
-
if (!this.headlessInstance) {
|
|
1730
|
-
throw new Error("Transaction view not initialized");
|
|
1731
|
-
}
|
|
1732
|
-
try {
|
|
1733
|
-
const result = await this.headlessInstance.loadBestMatch();
|
|
1734
|
-
this.syncState();
|
|
1735
|
-
return result;
|
|
1736
|
-
} catch (err) {
|
|
1737
|
-
this.syncState();
|
|
1738
|
-
throw err;
|
|
1739
|
-
}
|
|
1740
|
-
}
|
|
1741
|
-
/**
|
|
1742
|
-
* Refresh matches
|
|
1743
|
-
*/
|
|
1744
|
-
refreshMatches() {
|
|
1745
|
-
if (!this.headlessInstance) {
|
|
1746
|
-
console.warn("Transaction view not initialized, cannot refresh matches");
|
|
1747
|
-
return;
|
|
1748
|
-
}
|
|
1749
|
-
this.headlessInstance.refreshMatches();
|
|
1750
|
-
this.syncState();
|
|
1751
|
-
}
|
|
1752
|
-
/**
|
|
1753
|
-
* Resolve addresses
|
|
1754
|
-
*/
|
|
1755
|
-
async resolveAddresses() {
|
|
1756
|
-
if (!this.headlessInstance) {
|
|
1757
|
-
throw new Error("Transaction view not initialized");
|
|
1758
|
-
}
|
|
1759
|
-
try {
|
|
1760
|
-
await this.headlessInstance.resolveAddresses();
|
|
1761
|
-
this.syncState();
|
|
1762
|
-
} catch (err) {
|
|
1763
|
-
this.syncState();
|
|
1764
|
-
throw err;
|
|
1765
|
-
}
|
|
1766
|
-
}
|
|
1767
|
-
/**
|
|
1768
|
-
* Update transaction and options
|
|
1769
|
-
*/
|
|
1770
|
-
update(transaction, options) {
|
|
1771
|
-
this.transaction = transaction;
|
|
1772
|
-
this.options = options;
|
|
1773
|
-
this.initialize();
|
|
1774
|
-
}
|
|
1775
|
-
/**
|
|
1776
|
-
* Get the best matching view without loading
|
|
1777
|
-
*/
|
|
1778
|
-
static findBestMatch(transaction, framework = "lit") {
|
|
1779
|
-
return findBestTransactionView(transaction, framework);
|
|
1780
|
-
}
|
|
1781
|
-
/**
|
|
1782
|
-
* Get all matching views without loading
|
|
1783
|
-
*/
|
|
1784
|
-
static findAllMatches(transaction, framework = "lit") {
|
|
1785
|
-
return findAllTransactionViews(transaction, framework);
|
|
1786
|
-
}
|
|
1787
|
-
initialize() {
|
|
1788
|
-
try {
|
|
1789
|
-
this.headlessInstance = useTransactionViewHeadless(
|
|
1790
|
-
this.transaction,
|
|
1791
|
-
this.options
|
|
1792
|
-
);
|
|
1793
|
-
this.syncState();
|
|
1794
|
-
} catch (err) {
|
|
1795
|
-
this.updateState({
|
|
1796
|
-
error: err instanceof Error ? err : new Error("Failed to initialize transaction view")
|
|
1797
|
-
});
|
|
1798
|
-
console.error("Failed to initialize transaction view:", err);
|
|
1799
|
-
}
|
|
1800
|
-
}
|
|
1801
|
-
setupSync() {
|
|
1802
|
-
this.syncState();
|
|
1803
|
-
this.syncInterval = setInterval(() => {
|
|
1804
|
-
this.syncState();
|
|
1805
|
-
}, 100);
|
|
1806
|
-
}
|
|
1807
|
-
syncState() {
|
|
1808
|
-
if (!this.headlessInstance) return;
|
|
1809
|
-
this.updateState({
|
|
1810
|
-
matches: this.headlessInstance.matches,
|
|
1811
|
-
bestMatch: this.headlessInstance.bestMatch,
|
|
1812
|
-
component: this.headlessInstance.component,
|
|
1813
|
-
loading: this.headlessInstance.isLoading,
|
|
1814
|
-
error: this.headlessInstance.error,
|
|
1815
|
-
isResolvingAddresses: this.headlessInstance.isResolvingAddresses,
|
|
1816
|
-
resolvedAddresses: this.headlessInstance.resolvedAddresses
|
|
1817
|
-
});
|
|
1818
|
-
}
|
|
1819
|
-
updateState(updates) {
|
|
1820
|
-
this._state = { ...this._state, ...updates };
|
|
1821
|
-
this.host.requestUpdate();
|
|
1822
|
-
}
|
|
1823
|
-
};
|
|
1824
|
-
function useTransactionView(host, transaction, options) {
|
|
1825
|
-
return new TransactionViewController(host, transaction, options);
|
|
1826
|
-
}
|
|
1827
|
-
var TransactionSignalController = class {
|
|
1828
|
-
constructor(host, signal) {
|
|
1829
|
-
this._data = null;
|
|
1830
|
-
this._loading = false;
|
|
1831
|
-
this._error = null;
|
|
1832
|
-
this.host = host;
|
|
1833
|
-
this.signal = signal;
|
|
1834
|
-
host.addController(this);
|
|
1835
|
-
}
|
|
1836
|
-
hostConnected() {
|
|
1837
|
-
this.setupSignalSync();
|
|
1838
|
-
}
|
|
1839
|
-
hostDisconnected() {
|
|
1840
|
-
if (this.unsubscribe) {
|
|
1841
|
-
this.unsubscribe();
|
|
1842
|
-
this.unsubscribe = void 0;
|
|
1843
|
-
}
|
|
1844
|
-
}
|
|
1845
|
-
get data() {
|
|
1846
|
-
return this._data;
|
|
1847
|
-
}
|
|
1848
|
-
get loading() {
|
|
1849
|
-
return this._loading;
|
|
1850
|
-
}
|
|
1851
|
-
get error() {
|
|
1852
|
-
return this._error;
|
|
1853
|
-
}
|
|
1854
|
-
get isReady() {
|
|
1855
|
-
return !this._loading && this._data !== null && !this._error;
|
|
1856
|
-
}
|
|
1857
|
-
setupSignalSync() {
|
|
1858
|
-
const sync = () => {
|
|
1859
|
-
const signalValue = this.signal.value;
|
|
1860
|
-
const newData = signalValue?.data || null;
|
|
1861
|
-
const newLoading = signalValue?.loading || false;
|
|
1862
|
-
const newError = signalValue?.error || null;
|
|
1863
|
-
if (newData !== this._data || newLoading !== this._loading || newError !== this._error) {
|
|
1864
|
-
this._data = newData;
|
|
1865
|
-
this._loading = newLoading;
|
|
1866
|
-
this._error = newError;
|
|
1867
|
-
this.host.requestUpdate();
|
|
1868
|
-
}
|
|
1869
|
-
};
|
|
1870
|
-
sync();
|
|
1871
|
-
const interval = setInterval(sync, 50);
|
|
1872
|
-
this.unsubscribe = () => clearInterval(interval);
|
|
1873
|
-
}
|
|
1874
|
-
};
|
|
1875
|
-
function useTransactionSignal(host, signal) {
|
|
1876
|
-
return new TransactionSignalController(host, signal);
|
|
1877
|
-
}
|
|
1878
|
-
|
|
1879
|
-
// src/shared/url-view.ts
|
|
1880
|
-
import { safeCustomElement as safeCustomElement10 } from "@lukso/core/utils";
|
|
1881
|
-
import { html as html10 } from "lit";
|
|
1882
|
-
import { property as property10, state as state3 } from "lit/decorators.js";
|
|
1883
|
-
var UrlView = class extends CoreLitElement {
|
|
1884
|
-
constructor() {
|
|
1885
|
-
super(...arguments);
|
|
1886
|
-
this.size = "small";
|
|
1887
|
-
this.showLogo = true;
|
|
1888
|
-
this.maxWidth = 240;
|
|
1889
|
-
this.displayName = "";
|
|
1890
|
-
this.faviconCandidates = [];
|
|
1891
|
-
this.faviconIndex = 0;
|
|
1892
|
-
}
|
|
1893
|
-
willUpdate(changed) {
|
|
1894
|
-
if (changed.has("url") || changed.has("label") || changed.has("logoUrl")) {
|
|
1895
|
-
this.computeMeta();
|
|
1896
|
-
}
|
|
1897
|
-
}
|
|
1898
|
-
computeMeta() {
|
|
1899
|
-
try {
|
|
1900
|
-
const u = new URL(this.url);
|
|
1901
|
-
const origin = u.origin;
|
|
1902
|
-
this.faviconCandidates = [];
|
|
1903
|
-
if (this.logoUrl) this.faviconCandidates.push(this.logoUrl);
|
|
1904
|
-
this.faviconCandidates.push(
|
|
1905
|
-
`${origin}/favicon.ico`,
|
|
1906
|
-
`${origin}/favicon.png`
|
|
1907
|
-
);
|
|
1908
|
-
this.faviconIndex = 0;
|
|
1909
|
-
this.favicon = this.faviconCandidates[this.faviconIndex];
|
|
1910
|
-
const hostname = u.hostname.replace(/^www\./, "");
|
|
1911
|
-
const hostnamePretty = hostname.split(".").filter(Boolean).slice(-2).join(" ").replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
|
1912
|
-
if (this.label?.trim()) {
|
|
1913
|
-
this.displayName = this.label.trim();
|
|
1914
|
-
} else {
|
|
1915
|
-
this.displayName = hostnamePretty || this.url;
|
|
1916
|
-
}
|
|
1917
|
-
} catch {
|
|
1918
|
-
this.favicon = void 0;
|
|
1919
|
-
this.displayName = this.label?.trim() ? this.label : this.url;
|
|
1920
|
-
}
|
|
1921
|
-
}
|
|
1922
|
-
handleImageError() {
|
|
1923
|
-
this.faviconIndex += 1;
|
|
1924
|
-
if (this.faviconIndex < this.faviconCandidates.length) {
|
|
1925
|
-
this.favicon = this.faviconCandidates[this.faviconIndex];
|
|
1926
|
-
} else {
|
|
1927
|
-
this.favicon = void 0;
|
|
1928
|
-
}
|
|
1929
|
-
}
|
|
1930
|
-
getSizePixels() {
|
|
1931
|
-
switch (this.size) {
|
|
1932
|
-
case "x-small":
|
|
1933
|
-
return 14;
|
|
1934
|
-
case "small":
|
|
1935
|
-
return 16;
|
|
1936
|
-
case "medium":
|
|
1937
|
-
return 20;
|
|
1938
|
-
case "large":
|
|
1939
|
-
return 24;
|
|
1940
|
-
default:
|
|
1941
|
-
return 16;
|
|
1942
|
-
}
|
|
1943
|
-
}
|
|
1944
|
-
render() {
|
|
1945
|
-
const sizePx = this.getSizePixels();
|
|
1946
|
-
return html10`
|
|
1947
|
-
<div class="inline-flex flex-col gap-1">
|
|
1948
|
-
<div class="inline-flex items-center gap-2 px-2.5 py-1.5 text-neutral-20 leading-tight font-semibold">
|
|
1949
|
-
${this.showLogo ? html10`
|
|
1950
|
-
<div class="inline-flex items-center p-1 justify-center rounded-lg bg-neutral-100 border border-neutral-90 overflow-hidden flex-none">
|
|
1951
|
-
${this.favicon ? html10`<img
|
|
1952
|
-
src=${this.favicon}
|
|
1953
|
-
style="width:${sizePx}px;height:${sizePx}px;"
|
|
1954
|
-
alt="favicon"
|
|
1955
|
-
@error=${this.handleImageError}
|
|
1956
|
-
/>` : html10`<lukso-icon name="globe" size=${this.size} color="blue-85"></lukso-icon>`}
|
|
1957
|
-
</div>
|
|
1958
|
-
` : ""}
|
|
1959
|
-
<span class="whitespace-nowrap overflow-hidden text-ellipsis leading-tight" style=${`max-width:${this.maxWidth}px;font-size: ${sizePx}px;`}>${this.displayName}</span>
|
|
1960
|
-
</div>
|
|
1961
|
-
</div>
|
|
1962
|
-
`;
|
|
1963
|
-
}
|
|
1964
|
-
};
|
|
1965
|
-
__decorateClass([
|
|
1966
|
-
property10()
|
|
1967
|
-
], UrlView.prototype, "url", 2);
|
|
1968
|
-
__decorateClass([
|
|
1969
|
-
property10()
|
|
1970
|
-
], UrlView.prototype, "size", 2);
|
|
1971
|
-
__decorateClass([
|
|
1972
|
-
property10()
|
|
1973
|
-
], UrlView.prototype, "label", 2);
|
|
1974
|
-
__decorateClass([
|
|
1975
|
-
property10({ type: Boolean, attribute: "show-logo" })
|
|
1976
|
-
], UrlView.prototype, "showLogo", 2);
|
|
1977
|
-
__decorateClass([
|
|
1978
|
-
property10({ attribute: "logo-url" })
|
|
1979
|
-
], UrlView.prototype, "logoUrl", 2);
|
|
1980
|
-
__decorateClass([
|
|
1981
|
-
property10({ type: Number, attribute: "max-width" })
|
|
1982
|
-
], UrlView.prototype, "maxWidth", 2);
|
|
1983
|
-
__decorateClass([
|
|
1984
|
-
state3()
|
|
1985
|
-
], UrlView.prototype, "favicon", 2);
|
|
1986
|
-
__decorateClass([
|
|
1987
|
-
state3()
|
|
1988
|
-
], UrlView.prototype, "displayName", 2);
|
|
1989
|
-
UrlView = __decorateClass([
|
|
1990
|
-
safeCustomElement10("url-view")
|
|
1991
|
-
], UrlView);
|
|
1992
|
-
|
|
1993
|
-
// src/shared/value-view.ts
|
|
1994
|
-
import { Task as Task4 } from "@lit/task";
|
|
1995
|
-
import { safeCustomElement as safeCustomElement11 } from "@lukso/core/utils";
|
|
1996
|
-
import { useAddressResolver as useAddressResolver4 } from "@lukso/transaction-view-headless";
|
|
1997
|
-
import { html as html11 } from "lit";
|
|
1998
|
-
import { property as property11, state as state4 } from "lit/decorators.js";
|
|
1999
|
-
import { when } from "lit/directives/when.js";
|
|
2000
|
-
|
|
2001
|
-
// src/utils.ts
|
|
2002
|
-
function formatUnits(value, decimals = 18) {
|
|
2003
|
-
const divisor = 10n ** BigInt(decimals);
|
|
2004
|
-
const quotient = value / divisor;
|
|
2005
|
-
const remainder = value % divisor;
|
|
2006
|
-
if (remainder === 0n) {
|
|
2007
|
-
return quotient.toString();
|
|
2008
|
-
}
|
|
2009
|
-
const remainderStr = remainder.toString().padStart(decimals, "0");
|
|
2010
|
-
const trimmed = remainderStr.replace(/0+$/, "");
|
|
2011
|
-
return `${quotient}.${trimmed}`;
|
|
2012
|
-
}
|
|
2013
|
-
|
|
2014
|
-
// src/shared/value-view.ts
|
|
2015
|
-
var ValueView = class extends CoreLitElement {
|
|
2016
|
-
constructor() {
|
|
2017
|
-
super(...arguments);
|
|
2018
|
-
this.type = "auto";
|
|
2019
|
-
this.currencySymbol = "LYX";
|
|
2020
|
-
this.decimals = 18;
|
|
2021
|
-
this.size = "medium";
|
|
2022
|
-
this.showCopyButton = false;
|
|
2023
|
-
this.isCardView = false;
|
|
2024
|
-
this._hasSlotContent = false;
|
|
2025
|
-
// Task for resolving address metadata
|
|
2026
|
-
this.addressTask = new Task4(this, {
|
|
2027
|
-
task: async ([address]) => {
|
|
2028
|
-
if (!address) return null;
|
|
2029
|
-
try {
|
|
2030
|
-
return this.addressResolver.resolveAddress(address);
|
|
2031
|
-
} catch (error) {
|
|
2032
|
-
console.warn("ValueView: Failed to resolve address metadata:", error);
|
|
2033
|
-
return null;
|
|
2034
|
-
}
|
|
2035
|
-
},
|
|
2036
|
-
args: () => [this.address]
|
|
2037
|
-
});
|
|
2038
|
-
}
|
|
2039
|
-
_onSlotChange(e) {
|
|
2040
|
-
const slot = e.target;
|
|
2041
|
-
const assigned = slot?.assignedNodes({ flatten: true }) ?? [];
|
|
2042
|
-
this._hasSlotContent = assigned.length > 0;
|
|
2043
|
-
}
|
|
2044
|
-
firstUpdated() {
|
|
2045
|
-
const slot = this.renderRoot.querySelector("slot");
|
|
2046
|
-
if (slot) {
|
|
2047
|
-
const assigned = slot.assignedNodes({ flatten: true });
|
|
2048
|
-
this._hasSlotContent = assigned.length > 0;
|
|
2049
|
-
}
|
|
2050
|
-
}
|
|
2051
|
-
// Address resolution utilities (lazy initialization)
|
|
2052
|
-
get addressResolver() {
|
|
2053
|
-
try {
|
|
2054
|
-
return useAddressResolver4();
|
|
2055
|
-
} catch (error) {
|
|
2056
|
-
console.warn("ValueView: Address resolver not available:", error);
|
|
2057
|
-
return {
|
|
2058
|
-
resolveAddress: async () => null
|
|
2059
|
-
};
|
|
2060
|
-
}
|
|
2061
|
-
}
|
|
2062
|
-
/**
|
|
2063
|
-
* Get the effective type for the value
|
|
2064
|
-
*/
|
|
2065
|
-
getEffectiveType() {
|
|
2066
|
-
if (this.type !== "auto") return this.type;
|
|
2067
|
-
const value = this.value;
|
|
2068
|
-
if (value === null || value === void 0) return "null";
|
|
2069
|
-
if (typeof value === "string") return "string";
|
|
2070
|
-
if (typeof value === "number") return "number";
|
|
2071
|
-
if (typeof value === "boolean") return "boolean";
|
|
2072
|
-
if (typeof value === "bigint") {
|
|
2073
|
-
if (this.keyName === "value") return "currency";
|
|
2074
|
-
return "bigint";
|
|
2075
|
-
}
|
|
2076
|
-
return "string";
|
|
2077
|
-
}
|
|
2078
|
-
/**
|
|
2079
|
-
* Get CSS class for the value type
|
|
2080
|
-
*/
|
|
2081
|
-
getValueClass() {
|
|
2082
|
-
const effectiveType = this.getEffectiveType();
|
|
2083
|
-
switch (effectiveType) {
|
|
2084
|
-
case "string":
|
|
2085
|
-
return "text-success-60";
|
|
2086
|
-
case "number":
|
|
2087
|
-
return "text-info-60";
|
|
2088
|
-
case "boolean":
|
|
2089
|
-
return "text-error-60";
|
|
2090
|
-
case "currency":
|
|
2091
|
-
return "text-warning-60 font-medium";
|
|
2092
|
-
case "bigint":
|
|
2093
|
-
return "text-secondary-60";
|
|
2094
|
-
case "address":
|
|
2095
|
-
return "text-info-60 font-mono";
|
|
2096
|
-
case "null":
|
|
2097
|
-
return "text-neutral-70 italic";
|
|
2098
|
-
default:
|
|
2099
|
-
return "text-neutral-10";
|
|
2100
|
-
}
|
|
2101
|
-
}
|
|
2102
|
-
/**
|
|
2103
|
-
* Format the value for display
|
|
2104
|
-
*/
|
|
2105
|
-
getFormattedValue() {
|
|
2106
|
-
const value = this.value;
|
|
2107
|
-
const effectiveType = this.getEffectiveType();
|
|
2108
|
-
if (value === null) return "null";
|
|
2109
|
-
if (value === void 0) return "undefined";
|
|
2110
|
-
switch (effectiveType) {
|
|
2111
|
-
case "currency": {
|
|
2112
|
-
const { numeric, symbol } = this.getCurrencyParts();
|
|
2113
|
-
return `${numeric} ${symbol}`;
|
|
2114
|
-
}
|
|
2115
|
-
case "bigint":
|
|
2116
|
-
if (typeof value === "bigint") {
|
|
2117
|
-
return `${value.toString()}n`;
|
|
2118
|
-
}
|
|
2119
|
-
return `${String(value)}n`;
|
|
2120
|
-
case "boolean":
|
|
2121
|
-
return value ? "true" : "false";
|
|
2122
|
-
case "number":
|
|
2123
|
-
if (typeof value === "number") {
|
|
2124
|
-
return value.toLocaleString();
|
|
2125
|
-
}
|
|
2126
|
-
return String(value);
|
|
2127
|
-
case "string":
|
|
2128
|
-
return String(value);
|
|
2129
|
-
case "null":
|
|
2130
|
-
return "null";
|
|
2131
|
-
default:
|
|
2132
|
-
return String(value);
|
|
2133
|
-
}
|
|
2134
|
-
}
|
|
2135
|
-
/**
|
|
2136
|
-
* Compute currency display parts: numeric portion and symbol
|
|
2137
|
-
*/
|
|
2138
|
-
getCurrencyParts() {
|
|
2139
|
-
const value = this.value;
|
|
2140
|
-
const resolvedData = this.addressTask.value;
|
|
2141
|
-
const effectiveDecimals = resolvedData?.lsp4TokenSymbol ? resolvedData.baseAsset?.decimals ?? resolvedData.decimals ?? this.decimals : this.decimals;
|
|
2142
|
-
const effectiveSymbol = resolvedData?.lsp4TokenSymbol || resolvedData?.baseAsset?.lsp4TokenSymbol || this.currencySymbol;
|
|
2143
|
-
let numeric = String(value ?? "");
|
|
2144
|
-
try {
|
|
2145
|
-
if (typeof value === "bigint") {
|
|
2146
|
-
numeric = formatUnits(value, effectiveDecimals);
|
|
2147
|
-
} else if (typeof value === "string" && !Number.isNaN(Number(value))) {
|
|
2148
|
-
const bigintValue = BigInt(value);
|
|
2149
|
-
numeric = formatUnits(bigintValue, effectiveDecimals);
|
|
2150
|
-
}
|
|
2151
|
-
} catch {
|
|
2152
|
-
numeric = String(value ?? "");
|
|
2153
|
-
}
|
|
2154
|
-
return { numeric, symbol: effectiveSymbol };
|
|
2155
|
-
}
|
|
2156
|
-
/** Typography class for numeric value based on size */
|
|
2157
|
-
getNumericClass() {
|
|
2158
|
-
switch (this.size) {
|
|
2159
|
-
case "x-small":
|
|
2160
|
-
return "paragraph-ptmono-12-bold";
|
|
2161
|
-
case "small":
|
|
2162
|
-
return "paragraph-ptmono-14-bold";
|
|
2163
|
-
case "medium":
|
|
2164
|
-
return "paragraph-ptmono-16-bold";
|
|
2165
|
-
case "large":
|
|
2166
|
-
return "paragraph-ptmono-24-bold";
|
|
2167
|
-
default:
|
|
2168
|
-
return "paragraph-ptmono-16-bold";
|
|
2169
|
-
}
|
|
2170
|
-
}
|
|
2171
|
-
/** Typography class for currency symbol based on size */
|
|
2172
|
-
getCurrencyClass() {
|
|
2173
|
-
switch (this.size) {
|
|
2174
|
-
case "x-small":
|
|
2175
|
-
return "paragraph-inter-12-regular";
|
|
2176
|
-
case "small":
|
|
2177
|
-
return "paragraph-inter-14-regular";
|
|
2178
|
-
case "medium":
|
|
2179
|
-
return "paragraph-inter-16-regular";
|
|
2180
|
-
case "large":
|
|
2181
|
-
return "paragraph-inter-20-regular";
|
|
2182
|
-
default:
|
|
2183
|
-
return "paragraph-inter-16-regular";
|
|
2184
|
-
}
|
|
2185
|
-
}
|
|
2186
|
-
/**
|
|
2187
|
-
* Get size-appropriate font size
|
|
2188
|
-
*/
|
|
2189
|
-
getContainerTextClass() {
|
|
2190
|
-
switch (this.size) {
|
|
2191
|
-
case "x-small":
|
|
2192
|
-
return "text-[12px]";
|
|
2193
|
-
case "small":
|
|
2194
|
-
return "text-[14px]";
|
|
2195
|
-
case "medium":
|
|
2196
|
-
return "text-[16px]";
|
|
2197
|
-
case "large":
|
|
2198
|
-
return "text-[18px]";
|
|
2199
|
-
default:
|
|
2200
|
-
return "text-[16px]";
|
|
2201
|
-
}
|
|
2202
|
-
}
|
|
2203
|
-
/**
|
|
2204
|
-
* Handle copy to clipboard
|
|
2205
|
-
*/
|
|
2206
|
-
async handleCopy(e) {
|
|
2207
|
-
if (e) e.stopPropagation();
|
|
2208
|
-
const textToCopy = String(this.value);
|
|
2209
|
-
try {
|
|
2210
|
-
await navigator.clipboard.writeText(textToCopy);
|
|
2211
|
-
this.dispatchEvent(
|
|
2212
|
-
new CustomEvent("value-copied", {
|
|
2213
|
-
detail: { value: textToCopy },
|
|
2214
|
-
bubbles: true
|
|
2215
|
-
})
|
|
2216
|
-
);
|
|
2217
|
-
} catch (error) {
|
|
2218
|
-
console.error("Failed to copy value:", error);
|
|
2219
|
-
}
|
|
2220
|
-
}
|
|
2221
|
-
/**
|
|
2222
|
-
* Handle value click
|
|
2223
|
-
*/
|
|
2224
|
-
handleClick() {
|
|
2225
|
-
this.dispatchEvent(
|
|
2226
|
-
new CustomEvent("value-click", {
|
|
2227
|
-
detail: {
|
|
2228
|
-
value: this.value,
|
|
2229
|
-
formattedValue: this.getFormattedValue(),
|
|
2230
|
-
type: this.getEffectiveType()
|
|
2231
|
-
},
|
|
2232
|
-
bubbles: true
|
|
2233
|
-
})
|
|
2234
|
-
);
|
|
2235
|
-
}
|
|
2236
|
-
render() {
|
|
2237
|
-
const formattedValue = this.getFormattedValue();
|
|
2238
|
-
const valueClass = this.getValueClass();
|
|
2239
|
-
if (this.isCardView) {
|
|
2240
|
-
const effectiveType = this.getEffectiveType();
|
|
2241
|
-
let headerText = this.label || "";
|
|
2242
|
-
let contentTemplate = html11`
|
|
2243
|
-
<span class="inline-block text-wrap min-w-0 text-center">${formattedValue}</span>
|
|
2244
|
-
`;
|
|
2245
|
-
if (effectiveType === "currency") {
|
|
2246
|
-
const { numeric, symbol } = this.getCurrencyParts();
|
|
2247
|
-
if (this.label) {
|
|
2248
|
-
headerText = this.label;
|
|
2249
|
-
contentTemplate = html11`
|
|
2250
|
-
<span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>
|
|
2251
|
-
<span class="inline-block ${this.getCurrencyClass()}"> ${symbol}</span>
|
|
2252
|
-
`;
|
|
2253
|
-
} else {
|
|
2254
|
-
headerText = symbol;
|
|
2255
|
-
contentTemplate = html11`
|
|
2256
|
-
<span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>
|
|
2257
|
-
`;
|
|
2258
|
-
}
|
|
2259
|
-
}
|
|
2260
|
-
return html11`
|
|
2261
|
-
<div
|
|
2262
|
-
class="block border border-neutral-90 rounded-xl bg-white py-3 px-4 min-w-[320px] ${this.containerClassNames || ""}"
|
|
2263
|
-
@click=${this.handleClick}
|
|
2264
|
-
style="${this.maxWidth ? `max-width: ${this.maxWidth}px` : ""}"
|
|
2265
|
-
>
|
|
2266
|
-
<div class="flex items-center justify-between mb-2">
|
|
2267
|
-
${headerText ? html11`<div class="${this.getLabelClass()} text-neutral-20 overflow-hidden text-ellipsis whitespace-nowrap">${headerText}</div>` : html11``}
|
|
2268
|
-
${this.showCopyButton ? html11`
|
|
2269
|
-
<button
|
|
2270
|
-
class="bg-white rounded-lg w-6 h-6 flex items-center justify-center cursor-pointer text-neutral-20 hover:bg-neutral-95"
|
|
2271
|
-
@click=${(e) => this.handleCopy(e)}
|
|
2272
|
-
title="Copy value"
|
|
2273
|
-
aria-label="Copy"
|
|
2274
|
-
>
|
|
2275
|
-
<lukso-icon name="copy" size="small"></lukso-icon>
|
|
2276
|
-
</button>
|
|
2277
|
-
` : html11``}
|
|
2278
|
-
</div>
|
|
2279
|
-
${when(
|
|
2280
|
-
!this._hasSlotContent,
|
|
2281
|
-
() => html11`
|
|
2282
|
-
<div class="font-semibold text-neutral-10 break-words flex items-center gap-2 text-wrap ${this.getUseMonospace() ? "font-mono" : ""}">
|
|
2283
|
-
${contentTemplate}
|
|
2284
|
-
</div>
|
|
2285
|
-
`
|
|
2286
|
-
)}
|
|
2287
|
-
<slot @slotchange=${this._onSlotChange}></slot>
|
|
2288
|
-
</div>
|
|
2289
|
-
`;
|
|
2290
|
-
}
|
|
2291
|
-
return html11`
|
|
2292
|
-
<div
|
|
2293
|
-
class="inline-flex items-center gap-1.5 cursor-pointer transition-all duration-200 rounded px-1 py-0.5 hover:bg-neutral-95 min-w-[320px] ${this.getContainerTextClass()} ${this.containerClassNames || ""}"
|
|
2294
|
-
@click=${this.handleClick}
|
|
2295
|
-
style="${this.maxWidth ? `max-width: ${this.maxWidth}px` : ""}"
|
|
2296
|
-
>
|
|
2297
|
-
<span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${valueClass}">
|
|
2298
|
-
${formattedValue}
|
|
2299
|
-
</span>
|
|
2300
|
-
${this.showCopyButton ? html11`
|
|
2301
|
-
<button
|
|
2302
|
-
class="inline-flex items-center justify-center bg-transparent border-0 cursor-pointer text-neutral-70 p-0.5 rounded transition-all duration-200 hover:text-primary-50 hover:bg-neutral-90 flex-shrink-0"
|
|
2303
|
-
@click=${(e) => this.handleCopy(e)}
|
|
2304
|
-
title="Copy value"
|
|
2305
|
-
aria-label="Copy value to clipboard"
|
|
2306
|
-
>
|
|
2307
|
-
<lukso-icon name="copy" size="small"></lukso-icon>
|
|
2308
|
-
</button>
|
|
2309
|
-
` : ""}
|
|
2310
|
-
</div>
|
|
2311
|
-
`;
|
|
2312
|
-
}
|
|
2313
|
-
/** Whether to use monospace font for the value content */
|
|
2314
|
-
getUseMonospace() {
|
|
2315
|
-
const t = this.getEffectiveType();
|
|
2316
|
-
if (t === "address" || t === "bigint" || this.value?.toString().startsWith("0x"))
|
|
2317
|
-
return true;
|
|
2318
|
-
if (t === "string") {
|
|
2319
|
-
const s = String(this.value ?? "");
|
|
2320
|
-
return /^0x[0-9a-fA-F]+$/.test(s) || s.length > 32;
|
|
2321
|
-
}
|
|
2322
|
-
return false;
|
|
2323
|
-
}
|
|
2324
|
-
/** Map size to a typography class for the label */
|
|
2325
|
-
getLabelClass() {
|
|
2326
|
-
switch (this.size) {
|
|
2327
|
-
case "x-small":
|
|
2328
|
-
return "paragraph-inter-12-semi-bold";
|
|
2329
|
-
case "small":
|
|
2330
|
-
return "heading-inter-14-bold";
|
|
2331
|
-
case "medium":
|
|
2332
|
-
return "heading-inter-17-semi-bold";
|
|
2333
|
-
case "large":
|
|
2334
|
-
return "heading-inter-21-semi-bold";
|
|
2335
|
-
default:
|
|
2336
|
-
return "heading-inter-17-semi-bold";
|
|
2337
|
-
}
|
|
2338
|
-
}
|
|
2339
|
-
};
|
|
2340
|
-
__decorateClass([
|
|
2341
|
-
property11()
|
|
2342
|
-
], ValueView.prototype, "value", 2);
|
|
2343
|
-
__decorateClass([
|
|
2344
|
-
property11({ attribute: "key-name" })
|
|
2345
|
-
], ValueView.prototype, "keyName", 2);
|
|
2346
|
-
__decorateClass([
|
|
2347
|
-
property11({ type: String, attribute: "container-class-names" })
|
|
2348
|
-
], ValueView.prototype, "containerClassNames", 2);
|
|
2349
|
-
__decorateClass([
|
|
2350
|
-
property11()
|
|
2351
|
-
], ValueView.prototype, "type", 2);
|
|
2352
|
-
__decorateClass([
|
|
2353
|
-
property11({ attribute: "currency-symbol" })
|
|
2354
|
-
], ValueView.prototype, "currencySymbol", 2);
|
|
2355
|
-
__decorateClass([
|
|
2356
|
-
property11({ type: Number })
|
|
2357
|
-
], ValueView.prototype, "decimals", 2);
|
|
2358
|
-
__decorateClass([
|
|
2359
|
-
property11()
|
|
2360
|
-
], ValueView.prototype, "size", 2);
|
|
2361
|
-
__decorateClass([
|
|
2362
|
-
property11({ type: Boolean, attribute: "show-copy-button" })
|
|
2363
|
-
], ValueView.prototype, "showCopyButton", 2);
|
|
2364
|
-
__decorateClass([
|
|
2365
|
-
property11({ type: Boolean, attribute: "is-card-view" })
|
|
2366
|
-
], ValueView.prototype, "isCardView", 2);
|
|
2367
|
-
__decorateClass([
|
|
2368
|
-
property11()
|
|
2369
|
-
], ValueView.prototype, "label", 2);
|
|
2370
|
-
__decorateClass([
|
|
2371
|
-
property11({ type: Number, attribute: "max-width" })
|
|
2372
|
-
], ValueView.prototype, "maxWidth", 2);
|
|
2373
|
-
__decorateClass([
|
|
2374
|
-
property11()
|
|
2375
|
-
], ValueView.prototype, "address", 2);
|
|
2376
|
-
__decorateClass([
|
|
2377
|
-
state4()
|
|
2378
|
-
], ValueView.prototype, "_hasSlotContent", 2);
|
|
2379
|
-
ValueView = __decorateClass([
|
|
2380
|
-
safeCustomElement11("value-view")
|
|
2381
|
-
], ValueView);
|
|
2382
|
-
export {
|
|
2383
|
-
AddressDisplay,
|
|
2384
|
-
AddressView,
|
|
2385
|
-
CustomOption,
|
|
2386
|
-
CustomSelect,
|
|
2387
|
-
FunctionNameView,
|
|
2388
|
-
GasProviderView,
|
|
2389
|
-
IconView,
|
|
2390
|
-
ImageLoaderController,
|
|
2391
|
-
MultiSignalController,
|
|
2392
|
-
NotificationView,
|
|
2393
|
-
ProgressView,
|
|
2394
|
-
ScrollToBottomButton,
|
|
2395
|
-
SignalController,
|
|
2396
|
-
TransactionSignalController,
|
|
2397
|
-
TransactionViewController,
|
|
2398
|
-
UrlView,
|
|
2399
|
-
ValueView,
|
|
2400
|
-
safeCustomElement12 as safeCustomElement,
|
|
2401
|
-
useImageLoader3 as useImageLoader,
|
|
2402
|
-
useSignal,
|
|
2403
|
-
useSignals,
|
|
2404
|
-
useTransactionSignal,
|
|
2405
|
-
useTransactionView
|
|
2406
|
-
};
|
|
2407
|
-
//# sourceMappingURL=index.js.map
|