@lukso/transaction-view-core 0.7.8 → 0.7.9-dev.4059436

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.
@@ -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