@lukso/transaction-view-core 0.3.1-dev.a8c9315

package/dist/index.js

@@ -0,0 +1,4534 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/shared/address-display.ts
+import { Task } from "@lit/task";
+import {
+  useAddressResolver,
+  useImageLoader
+} from "@lukso/transaction-view-headless";
+import { css, html, LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+
+// src/shared/safe-custom-element.ts
+function safeCustomElement(tagName) {
+  return (classOrDescriptor) => {
+    if (typeof customElements !== "undefined" && !customElements.get(tagName)) {
+      customElements.define(tagName, classOrDescriptor);
+    }
+    return classOrDescriptor;
+  };
+}
+
+// src/shared/address-display.ts
+var AddressDisplay = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.showCopyButton = false;
+    this.nameOnly = false;
+    this.maxWidth = 200;
+    this.isLoadingImage = false;
+    // Composables
+    this.imageLoader = useImageLoader();
+    this.addressResolver = useAddressResolver();
+    // Task for loading profile image
+    this.imageTask = new Task(this, {
+      task: async ([resolved], { signal }) => {
+        if (!resolved) return null;
+        this.isLoadingImage = true;
+        try {
+          const image = await this.imageLoader.loadProfileImage(resolved, {
+            width: this.getSizePixels(),
+            height: this.getSizePixels(),
+            dpr: window.devicePixelRatio || 1
+          });
+          return image || this.imageLoader.getFallbackImage(resolved);
+        } catch (error) {
+          console.warn("Failed to load address image:", error);
+          return this.imageLoader.getFallbackImage(resolved || {});
+        } finally {
+          this.isLoadingImage = false;
+        }
+      },
+      args: () => [this.resolved]
+    });
+  }
+  /**
+   * Get the effective address value (supports both `value` and legacy `address` props)
+   */
+  get effectiveAddress() {
+    return this.value || this.address || "";
+  }
+  /**
+   * Get pixel size for the current size setting
+   */
+  getSizePixels() {
+    switch (this.size) {
+      case "x-small":
+        return 16;
+      case "small":
+        return 24;
+      case "medium":
+        return 32;
+      case "large":
+        return 48;
+      default:
+        return 24;
+    }
+  }
+  /**
+   * Get display name for the address
+   */
+  getDisplayName() {
+    if (!this.resolved) return "Anonymous";
+    const computedName = this.addressResolver.formatDisplayName(this.resolved);
+    return computedName || "Anonymous";
+  }
+  /**
+   * Check if this is a contract address (shows square icon)
+   */
+  get isContract() {
+    return this.resolved ? this.imageLoader.isContractAddress(this.resolved) : false;
+  }
+  /**
+   * Get prefix for the address display
+   */
+  get addressPrefix() {
+    return this.resolved ? this.addressResolver.getAddressPrefix(this.resolved) : "@";
+  }
+  /**
+   * Check if should show name colors
+   */
+  get shouldShowNameColor() {
+    return this.resolved ? this.addressResolver.shouldShowNameColor(this.resolved) : true;
+  }
+  /**
+   * Handle copy button click
+   */
+  handleCopy() {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(this.effectiveAddress);
+      this.dispatchEvent(
+        new CustomEvent("address-copied", {
+          detail: { address: this.effectiveAddress },
+          bubbles: true
+        })
+      );
+    }
+  }
+  /**
+   * Handle address click
+   */
+  handleAddressClick() {
+    this.dispatchEvent(
+      new CustomEvent("address-click", {
+        detail: {
+          address: this.effectiveAddress,
+          resolved: this.resolved
+        },
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    const imageResult = this.imageTask.value;
+    return html`
+      <div class="address-container">
+        ${this.label ? html`<div class="label">${this.label}</div>` : ""}
+        
+        <div class="address-display" @click=${this.handleAddressClick}>
+          <!-- Identity prefix (if present) -->
+          ${this.resolved?.__identity ? html`
+            <span class="identity">
+              ${this.resolved.__identity}
+              <lukso-username
+                address=${this.resolved.identity}
+                size=${this.size}
+                max-width="200"
+                has-name-color="false"
+                has-address-color="false"
+              ></lukso-username>
+              of
+            </span>
+          ` : ""}
+
+          <!-- Profile image and name -->
+          <lukso-profile
+            size=${this.size}
+            profile-address=${this.effectiveAddress}
+            profile-url=${imageResult?.src || ""}
+            has-identicon
+            ?is-square=${this.isContract}
+          ></lukso-profile>
+
+          <!-- Address/Name display -->
+          ${this.nameOnly ? html`
+            <lukso-username
+              name=${this.getDisplayName()}
+              size=${this.size}
+              max-width=${this.maxWidth}
+              prefix=${this.addressPrefix}
+              ?has-name-color=${this.shouldShowNameColor}
+              has-address-color="false"
+            ></lukso-username>
+          ` : html`
+            <lukso-username
+              name=${this.getDisplayName()}
+              address=${!this.isContract ? this.effectiveAddress : void 0}
+              size=${this.size}
+              max-width=${this.maxWidth}
+              prefix=${this.addressPrefix}
+              ?has-name-color=${this.shouldShowNameColor}
+              ?has-address-color=${this.shouldShowNameColor}
+            ></lukso-username>
+          `}
+
+
+          <!-- Copy button -->
+          ${this.showCopyButton ? html`
+            <button 
+              class="copy-button"
+              @click=${this.handleCopy}
+              title="Copy address"
+            >
+              📋
+            </button>
+          ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+AddressDisplay.styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .address-container {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .label {
+      font-size: 12px;
+      color: var(--neutral-60, #666);
+      font-weight: 500;
+    }
+
+    .address-display {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      transition: background-color 0.2s;
+      min-width: 200px;
+    }
+
+    .address-display:hover {
+      background-color: var(--neutral-95, #f5f5f5);
+    }
+
+    .identity {
+      font-size: 12px;
+      color: var(--neutral-60, #666);
+      margin-right: 4px;
+    }
+
+    .copy-button {
+      background: none;
+      border: 1px solid var(--neutral-80, #ccc);
+      border-radius: 4px;
+      padding: 2px 4px;
+      cursor: pointer;
+      font-size: 12px;
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+
+    .copy-button:hover {
+      background-color: var(--neutral-90, #eee);
+    }
+
+    .address-display:hover .copy-button {
+      opacity: 1;
+    }
+
+
+    /* Ensure LUKSO web components are properly styled */
+    lukso-profile,
+    lukso-username {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  property()
+], AddressDisplay.prototype, "value", 2);
+__decorateClass([
+  property()
+], AddressDisplay.prototype, "address", 2);
+__decorateClass([
+  property({ type: Object })
+], AddressDisplay.prototype, "resolved", 2);
+__decorateClass([
+  property()
+], AddressDisplay.prototype, "size", 2);
+__decorateClass([
+  property()
+], AddressDisplay.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-copy-button" })
+], AddressDisplay.prototype, "showCopyButton", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "name-only" })
+], AddressDisplay.prototype, "nameOnly", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-width" })
+], AddressDisplay.prototype, "maxWidth", 2);
+__decorateClass([
+  state()
+], AddressDisplay.prototype, "imageData", 2);
+__decorateClass([
+  state()
+], AddressDisplay.prototype, "isLoadingImage", 2);
+AddressDisplay = __decorateClass([
+  safeCustomElement("address-display")
+], AddressDisplay);
+
+// src/shared/address-view.ts
+import { Task as Task2 } from "@lit/task";
+import { useAddressResolver as useAddressResolver2 } from "@lukso/transaction-view-headless";
+import makeBlockie from "ethereum-blockies-base64";
+import { html as html2 } from "lit";
+import { property as property2, state as state2 } from "lit/decorators.js";
+
+// src/shared/load-web-components.ts
+var originalDefine = typeof customElements !== "undefined" ? customElements.define.bind(customElements) : null;
+if (typeof customElements !== "undefined" && originalDefine) {
+  customElements.define = function(name, constructor, options) {
+    if (!customElements.get(name)) {
+      originalDefine(name, constructor, options);
+    }
+  };
+}
+if (originalDefine && typeof customElements !== "undefined") {
+  customElements.define = originalDefine;
+}
+
+// src/styles/styles.css?__raw__
+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.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.18 | 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: #374151;\n  --tw-prose-headings: #111827;\n  --tw-prose-lead: #4b5563;\n  --tw-prose-links: #111827;\n  --tw-prose-bold: #111827;\n  --tw-prose-counters: #6b7280;\n  --tw-prose-bullets: #d1d5db;\n  --tw-prose-hr: #e5e7eb;\n  --tw-prose-quotes: #111827;\n  --tw-prose-quote-borders: #e5e7eb;\n  --tw-prose-captions: #6b7280;\n  --tw-prose-kbd: #111827;\n  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);\n  --tw-prose-code: #111827;\n  --tw-prose-pre-code: #e5e7eb;\n  --tw-prose-pre-bg: #1f2937;\n  --tw-prose-th-borders: #d1d5db;\n  --tw-prose-td-borders: #e5e7eb;\n  --tw-prose-invert-body: #d1d5db;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #9ca3af;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #9ca3af;\n  --tw-prose-invert-bullets: #4b5563;\n  --tw-prose-invert-hr: #374151;\n  --tw-prose-invert-quotes: #f3f4f6;\n  --tw-prose-invert-quote-borders: #374151;\n  --tw-prose-invert-captions: #9ca3af;\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: #d1d5db;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #4b5563;\n  --tw-prose-invert-td-borders: #374151;\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: #334155;\n  --tw-prose-headings: #0f172a;\n  --tw-prose-lead: #475569;\n  --tw-prose-links: #0f172a;\n  --tw-prose-bold: #0f172a;\n  --tw-prose-counters: #64748b;\n  --tw-prose-bullets: #cbd5e1;\n  --tw-prose-hr: #e2e8f0;\n  --tw-prose-quotes: #0f172a;\n  --tw-prose-quote-borders: #e2e8f0;\n  --tw-prose-captions: #64748b;\n  --tw-prose-kbd: #0f172a;\n  --tw-prose-kbd-shadows: rgb(15 23 42 / 10%);\n  --tw-prose-code: #0f172a;\n  --tw-prose-pre-code: #e2e8f0;\n  --tw-prose-pre-bg: #1e293b;\n  --tw-prose-th-borders: #cbd5e1;\n  --tw-prose-td-borders: #e2e8f0;\n  --tw-prose-invert-body: #cbd5e1;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #94a3b8;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #94a3b8;\n  --tw-prose-invert-bullets: #475569;\n  --tw-prose-invert-hr: #334155;\n  --tw-prose-invert-quotes: #f1f5f9;\n  --tw-prose-invert-quote-borders: #334155;\n  --tw-prose-invert-captions: #94a3b8;\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: #cbd5e1;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #475569;\n  --tw-prose-invert-td-borders: #334155;\n}\n.prose-gray {\n  --tw-prose-body: #374151;\n  --tw-prose-headings: #111827;\n  --tw-prose-lead: #4b5563;\n  --tw-prose-links: #111827;\n  --tw-prose-bold: #111827;\n  --tw-prose-counters: #6b7280;\n  --tw-prose-bullets: #d1d5db;\n  --tw-prose-hr: #e5e7eb;\n  --tw-prose-quotes: #111827;\n  --tw-prose-quote-borders: #e5e7eb;\n  --tw-prose-captions: #6b7280;\n  --tw-prose-kbd: #111827;\n  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);\n  --tw-prose-code: #111827;\n  --tw-prose-pre-code: #e5e7eb;\n  --tw-prose-pre-bg: #1f2937;\n  --tw-prose-th-borders: #d1d5db;\n  --tw-prose-td-borders: #e5e7eb;\n  --tw-prose-invert-body: #d1d5db;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #9ca3af;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #9ca3af;\n  --tw-prose-invert-bullets: #4b5563;\n  --tw-prose-invert-hr: #374151;\n  --tw-prose-invert-quotes: #f3f4f6;\n  --tw-prose-invert-quote-borders: #374151;\n  --tw-prose-invert-captions: #9ca3af;\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: #d1d5db;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #4b5563;\n  --tw-prose-invert-td-borders: #374151;\n}\n.prose-zinc {\n  --tw-prose-body: #3f3f46;\n  --tw-prose-headings: #18181b;\n  --tw-prose-lead: #52525b;\n  --tw-prose-links: #18181b;\n  --tw-prose-bold: #18181b;\n  --tw-prose-counters: #71717a;\n  --tw-prose-bullets: #d4d4d8;\n  --tw-prose-hr: #e4e4e7;\n  --tw-prose-quotes: #18181b;\n  --tw-prose-quote-borders: #e4e4e7;\n  --tw-prose-captions: #71717a;\n  --tw-prose-kbd: #18181b;\n  --tw-prose-kbd-shadows: rgb(24 24 27 / 10%);\n  --tw-prose-code: #18181b;\n  --tw-prose-pre-code: #e4e4e7;\n  --tw-prose-pre-bg: #27272a;\n  --tw-prose-th-borders: #d4d4d8;\n  --tw-prose-td-borders: #e4e4e7;\n  --tw-prose-invert-body: #d4d4d8;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #a1a1aa;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #a1a1aa;\n  --tw-prose-invert-bullets: #52525b;\n  --tw-prose-invert-hr: #3f3f46;\n  --tw-prose-invert-quotes: #f4f4f5;\n  --tw-prose-invert-quote-borders: #3f3f46;\n  --tw-prose-invert-captions: #a1a1aa;\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: #d4d4d8;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #52525b;\n  --tw-prose-invert-td-borders: #3f3f46;\n}\n.prose-neutral {\n  --tw-prose-body: #404040;\n  --tw-prose-headings: #171717;\n  --tw-prose-lead: #525252;\n  --tw-prose-links: #171717;\n  --tw-prose-bold: #171717;\n  --tw-prose-counters: #737373;\n  --tw-prose-bullets: #d4d4d4;\n  --tw-prose-hr: #e5e5e5;\n  --tw-prose-quotes: #171717;\n  --tw-prose-quote-borders: #e5e5e5;\n  --tw-prose-captions: #737373;\n  --tw-prose-kbd: #171717;\n  --tw-prose-kbd-shadows: rgb(23 23 23 / 10%);\n  --tw-prose-code: #171717;\n  --tw-prose-pre-code: #e5e5e5;\n  --tw-prose-pre-bg: #262626;\n  --tw-prose-th-borders: #d4d4d4;\n  --tw-prose-td-borders: #e5e5e5;\n  --tw-prose-invert-body: #d4d4d4;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #a3a3a3;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #a3a3a3;\n  --tw-prose-invert-bullets: #525252;\n  --tw-prose-invert-hr: #404040;\n  --tw-prose-invert-quotes: #f5f5f5;\n  --tw-prose-invert-quote-borders: #404040;\n  --tw-prose-invert-captions: #a3a3a3;\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: #d4d4d4;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #525252;\n  --tw-prose-invert-td-borders: #404040;\n}\n.prose-stone {\n  --tw-prose-body: #44403c;\n  --tw-prose-headings: #1c1917;\n  --tw-prose-lead: #57534e;\n  --tw-prose-links: #1c1917;\n  --tw-prose-bold: #1c1917;\n  --tw-prose-counters: #78716c;\n  --tw-prose-bullets: #d6d3d1;\n  --tw-prose-hr: #e7e5e4;\n  --tw-prose-quotes: #1c1917;\n  --tw-prose-quote-borders: #e7e5e4;\n  --tw-prose-captions: #78716c;\n  --tw-prose-kbd: #1c1917;\n  --tw-prose-kbd-shadows: rgb(28 25 23 / 10%);\n  --tw-prose-code: #1c1917;\n  --tw-prose-pre-code: #e7e5e4;\n  --tw-prose-pre-bg: #292524;\n  --tw-prose-th-borders: #d6d3d1;\n  --tw-prose-td-borders: #e7e5e4;\n  --tw-prose-invert-body: #d6d3d1;\n  --tw-prose-invert-headings: #fff;\n  --tw-prose-invert-lead: #a8a29e;\n  --tw-prose-invert-links: #fff;\n  --tw-prose-invert-bold: #fff;\n  --tw-prose-invert-counters: #a8a29e;\n  --tw-prose-invert-bullets: #57534e;\n  --tw-prose-invert-hr: #44403c;\n  --tw-prose-invert-quotes: #f5f5f4;\n  --tw-prose-invert-quote-borders: #44403c;\n  --tw-prose-invert-captions: #a8a29e;\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: #d6d3d1;\n  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);\n  --tw-prose-invert-th-borders: #57534e;\n  --tw-prose-invert-td-borders: #44403c;\n}\n.prose-red {\n  --tw-prose-links: #dc2626;\n  --tw-prose-invert-links: #ef4444;\n}\n.prose-orange {\n  --tw-prose-links: #ea580c;\n  --tw-prose-invert-links: #f97316;\n}\n.prose-amber {\n  --tw-prose-links: #d97706;\n  --tw-prose-invert-links: #f59e0b;\n}\n.prose-yellow {\n  --tw-prose-links: #ca8a04;\n  --tw-prose-invert-links: #eab308;\n}\n.prose-lime {\n  --tw-prose-links: #65a30d;\n  --tw-prose-invert-links: #84cc16;\n}\n.prose-green {\n  --tw-prose-links: #16a34a;\n  --tw-prose-invert-links: #22c55e;\n}\n.prose-emerald {\n  --tw-prose-links: #059669;\n  --tw-prose-invert-links: #10b981;\n}\n.prose-teal {\n  --tw-prose-links: #0d9488;\n  --tw-prose-invert-links: #14b8a6;\n}\n.prose-cyan {\n  --tw-prose-links: #0891b2;\n  --tw-prose-invert-links: #06b6d4;\n}\n.prose-sky {\n  --tw-prose-links: #0284c7;\n  --tw-prose-invert-links: #0ea5e9;\n}\n.prose-blue {\n  --tw-prose-links: #2563eb;\n  --tw-prose-invert-links: #3b82f6;\n}\n.prose-indigo {\n  --tw-prose-links: #4f46e5;\n  --tw-prose-invert-links: #6366f1;\n}\n.prose-violet {\n  --tw-prose-links: #7c3aed;\n  --tw-prose-invert-links: #8b5cf6;\n}\n.prose-purple {\n  --tw-prose-links: #9333ea;\n  --tw-prose-invert-links: #a855f7;\n}\n.prose-fuchsia {\n  --tw-prose-links: #c026d3;\n  --tw-prose-invert-links: #d946ef;\n}\n.prose-pink {\n  --tw-prose-links: #db2777;\n  --tw-prose-invert-links: #ec4899;\n}\n.prose-rose {\n  --tw-prose-links: #e11d48;\n  --tw-prose-invert-links: #f43f5e;\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.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-2 {\n  margin-bottom: 0.5rem;\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.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-\\[var\\(--neutral-90\\)\\] {\n  border-color: var(--neutral-90);\n}\n.border-neutral-90 {\n  --tw-border-opacity: 1;\n  border-color: rgb(222 231 237 / 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-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-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-\\[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-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-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-neutral-10 {\n  --tw-text-opacity: 1;\n  color: rgb(18 27 33 / 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-30 {\n  --tw-text-opacity: 1;\n  color: rgb(54 80 99 / 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-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';
+
+// src/styles/index.ts
+import { css as css2, LitElement as LitElement2, unsafeCSS } from "lit";
+var style = css2`
+  ${unsafeCSS(styles_default)}
+
+  :host([is-inline]) {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :host([is-full-width]) {
+    width: 100%;
+    flex: 1;
+    display: flex;
+  }
+
+`;
+var CoreLitElement = class extends LitElement2 {
+  static {
+    this.styles = [style];
+  }
+};
+
+// src/shared/address-view.ts
+var AddressView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.nameOnly = false;
+    this.addressOnly = false;
+    this.isCardView = false;
+    this.showCopyButton = false;
+    this.maxWidth = 200;
+    this.showIdenticon = true;
+    this.isLoadingAddress = false;
+    // Composables
+    this.addressResolver = useAddressResolver2();
+    // Task for resolving address data
+    this.addressTask = new Task2(this, {
+      task: async ([address], { signal }) => {
+        if (!address) return null;
+        this.isLoadingAddress = true;
+        try {
+          const resolved = await this.addressResolver.resolveAddress(address);
+          this.requestUpdate();
+          return resolved;
+        } catch (error) {
+          return null;
+        } finally {
+          this.isLoadingAddress = false;
+        }
+      },
+      args: () => [this.address]
+    });
+  }
+  /**
+   * Get the display address (first segment only for compound addresses)
+   * e.g., "0x123...-0x456..." becomes "0x123..."
+   */
+  get displayAddress() {
+    return this.address.split("-")[0];
+  }
+  /**
+   * Get display name for the address
+   */
+  getDisplayName() {
+    const resolved = this.addressTask.value;
+    if (!resolved) {
+      return this.isLoadingAddress ? "Loading..." : "Anonymous";
+    }
+    const computedName = this.addressResolver.formatDisplayName(resolved);
+    return this.label || computedName || "Anonymous";
+  }
+  /**
+   * Check if this is a contract address (non-profile)
+   */
+  get isContract() {
+    const resolved = this.addressTask.value;
+    return resolved ? resolved.__gqltype !== "Profile" : false;
+  }
+  /**
+   * Check if this should show the address hash (profiles show hash, contracts don't)
+   */
+  get shouldShowAddressHash() {
+    const resolved = this.addressTask.value;
+    return resolved ? resolved.__gqltype === "Profile" : true;
+  }
+  /**
+   * Get prefix for the address display
+   */
+  get addressPrefix() {
+    const resolved = this.addressTask.value;
+    return resolved?.hasProfile ? "@" : "";
+  }
+  /**
+   * Check if should show name colors
+   */
+  get shouldShowNameColor() {
+    const resolved = this.addressTask.value;
+    return resolved ? this.addressResolver.shouldShowNameColor(resolved) : true;
+  }
+  /**
+   * Handle address click
+   */
+  handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("address-click", {
+        detail: {
+          address: this.address,
+          resolved: this.addressTask.value
+        },
+        bubbles: true
+      })
+    );
+  }
+  /** Generate identicon when address changes */
+  willUpdate(changed) {
+    if (changed.has("address") && this.address) {
+      try {
+        this.identicon = makeBlockie(this.displayAddress.toLowerCase());
+      } catch {
+        this.identicon = void 0;
+      }
+    }
+  }
+  /** Copy the display address to clipboard (card view) */
+  handleCopy(event) {
+    if (event) event.stopPropagation();
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(this.displayAddress);
+      this.dispatchEvent(
+        new CustomEvent("address-copied", {
+          detail: { address: this.displayAddress },
+          bubbles: true
+        })
+      );
+    }
+  }
+  /** ========== RENDER HELPERS (Use Cases) ========== */
+  /** Pixel size mapping for identicon based on component size */
+  getIdenticonSizePx() {
+    switch (this.size) {
+      case "x-small":
+        return 10;
+      case "small":
+        return 12;
+      case "medium":
+        return 14;
+      case "large":
+        return 16;
+      default:
+        return 14;
+    }
+  }
+  /**
+   * Render only the name (and optionally the address hash when allowed for profiles)
+   */
+  renderNameOnly(displayName) {
+    return html2`
+      <!-- Name Only Use Case -->
+      <lukso-username
+        class="inline-block align-middle"
+        name=${displayName}
+        address=${this.address}
+        size=${this.size}
+        max-width=${this.maxWidth}
+        prefix=${this.addressPrefix}
+        address-color=${this.addressColor}
+        name-color=${this.nameColor}
+      ></lukso-username>
+    `;
+  }
+  /**
+   * Render only the raw address (no name)
+   */
+  renderAddressOnly() {
+    return html2`
+      <!-- Address Only Use Case -->
+      <lukso-username
+        class="inline-block align-middle"
+        address=${this.displayAddress}
+        size=${this.size}
+        max-width=${this.maxWidth}
+        has-name-color="false"
+        ?has-address-color=${this.shouldShowNameColor}
+      ></lukso-username>
+    `;
+  }
+  /**
+   * Render both name and (conditionally) the address hash (profiles show hash, contracts may hide it)
+   */
+  renderNameAndAddress(displayName) {
+    return html2`
+      <!-- Name + Address Use Case -->
+      <lukso-username
+        class="inline-block align-middle"
+        name=${displayName}
+        address=${this.address}
+        size=${this.size}
+        max-width=${this.maxWidth}
+        prefix=${this.addressPrefix}
+        address-color=${this.addressColor}
+        name-color=${this.nameColor}
+      ></lukso-username>
+    `;
+  }
+  renderIdenticon() {
+    if (!this.showIdenticon || !this.identicon) return "";
+    const size = this.getIdenticonSizePx();
+    return html2`
+      <div class="inline-flex items-center justify-center align-middle">
+        <img
+          class="inline-block rounded-full ring-1 ring-neutral-90 shrink-0"
+          src=${this.identicon}
+          alt="identicon"
+          style="width:${size}px;height:${size}px;image-rendering:pixelated;"
+        />
+      </div>
+    `;
+  }
+  /** Map size to a typography class for the label */
+  getLabelClass() {
+    switch (this.size) {
+      case "x-small":
+        return "paragraph-inter-12-semi-bold";
+      case "small":
+        return "heading-inter-14-bold";
+      case "medium":
+        return "heading-inter-17-semi-bold";
+      case "large":
+        return "heading-inter-21-semi-bold";
+      default:
+        return "heading-inter-17-semi-bold";
+    }
+  }
+  renderDisplayName() {
+    const displayName = this.getDisplayName();
+    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
+              class="inline-block align-middle"
+              name=${displayName}
+              size=${this.size}
+              ?has-name-color=${this.shouldShowNameColor}
+            ></lukso-username>`;
+  }
+  /**
+   * Decide which of the three core inline variants to render
+   */
+  renderInlineVariant(displayName) {
+    if (this.nameOnly) return this.renderNameOnly(displayName);
+    if (this.addressOnly) return this.renderAddressOnly();
+    return this.renderNameAndAddress(displayName);
+  }
+  render() {
+    const displayName = this.getDisplayName();
+    if (this.isCardView) {
+      return html2`
+        <div class="block border border-neutral-90 rounded-xl py-3 px-4 bg-neutral-100 min-w-[280px]" @click=${this.handleClick}>
+          <div class="flex items-center justify-between mb-2">
+          <div class="inline-flex items-center font-normal gap-1">
+            ${this.renderIdenticon()}
+            ${this.renderDisplayName()}
+          </div>
+            ${this.showCopyButton ? html2`<button
+                  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"
+                  @click=${(e) => this.handleCopy(e)}
+                  title="Copy address"
+                >
+                  <lukso-icon name="copy" size="small"></lukso-icon>
+                </button>` : html2``}
+          </div>
+          <div class="font-semibold text-neutral-20 break-all flex items-center gap-2">
+            
+            <lukso-username
+              address=${this.displayAddress}
+              size=${this.size}
+              max-width=${this.maxWidth}
+              has-name-color="false"
+              slice-by="24"
+              ?has-address-color=${this.shouldShowNameColor}
+            ></lukso-username>
+          </div>
+        </div>
+      `;
+    }
+    return html2`
+      <div class="inline-flex items-center cursor-pointer gap-1" @click=${this.handleClick}>
+        ${this.renderIdenticon()}
+        <!-- Inline Variants -->
+        ${this.renderInlineVariant(displayName)}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property2()
+], AddressView.prototype, "address", 2);
+__decorateClass([
+  property2()
+], AddressView.prototype, "size", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "name-only" })
+], AddressView.prototype, "nameOnly", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "address-only" })
+], AddressView.prototype, "addressOnly", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "is-card-view" })
+], AddressView.prototype, "isCardView", 2);
+__decorateClass([
+  property2()
+], AddressView.prototype, "label", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "show-copy-button" })
+], AddressView.prototype, "showCopyButton", 2);
+__decorateClass([
+  property2({ type: Number, attribute: "max-width" })
+], AddressView.prototype, "maxWidth", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "show-identicon" })
+], AddressView.prototype, "showIdenticon", 2);
+__decorateClass([
+  property2({ type: String, attribute: "address-color" })
+], AddressView.prototype, "addressColor", 2);
+__decorateClass([
+  property2({ type: String, attribute: "name-color" })
+], AddressView.prototype, "nameColor", 2);
+__decorateClass([
+  state2()
+], AddressView.prototype, "isLoadingAddress", 2);
+__decorateClass([
+  state2()
+], AddressView.prototype, "identicon", 2);
+AddressView = __decorateClass([
+  safeCustomElement("address-view")
+], AddressView);
+
+// src/shared/custom-select.ts
+import { html as html3 } from "lit";
+import { property as property3 } from "lit/decorators.js";
+import makeBlockie2 from "ethereum-blockies-base64";
+var CustomOption = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+    this.disabled = false;
+    this.hoverable = true;
+  }
+  render() {
+    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";
+    const hover = this.hoverable ? " hover:bg-neutral-95" : "";
+    const selected = this.selected ? " bg-neutral-90 rounded" : "";
+    const disabled = this.disabled ? " text-neutral-60 cursor-not-allowed" : "";
+    return html3`<button class="${base}${hover}${selected}${disabled}" ?disabled=${this.disabled}><slot></slot></button>`;
+  }
+};
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], CustomOption.prototype, "selected", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], CustomOption.prototype, "disabled", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], CustomOption.prototype, "hoverable", 2);
+CustomOption = __decorateClass([
+  safeCustomElement("custom-option")
+], CustomOption);
+var CustomSelect = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.options = [];
+    this.size = "small";
+    this.onOutsideClick = (e) => {
+      if (!this.open) return;
+      const path = e.composedPath();
+      if (!path.includes(this)) this.close();
+    };
+  }
+  toggleOpen() {
+    this.open = !this.open;
+  }
+  close() {
+    this.open = false;
+  }
+  onOptionClick(opt) {
+    if (opt.disabled) return;
+    this.value = opt.value;
+    this.dispatchEvent(new Event("change", { bubbles: true }));
+    this.close();
+  }
+  onKeyDown(e) {
+    if (e.key === "Escape") this.close();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("click", this.onOutsideClick, { capture: true });
+  }
+  disconnectedCallback() {
+    window.removeEventListener("click", this.onOutsideClick, { capture: true });
+    super.disconnectedCallback();
+  }
+  updated() {
+    const selectedOption = this.getSelectedOption();
+    if (selectedOption) {
+      this.value = selectedOption.value;
+    }
+  }
+  getSelectedOption() {
+    return this.options.find((o) => o.value === this.value);
+  }
+  getIdenticonSizePx() {
+    switch (this.size) {
+      case "x-small":
+        return 10;
+      case "small":
+        return 12;
+      case "medium":
+        return 14;
+      case "large":
+        return 16;
+      default:
+        return 14;
+    }
+  }
+  renderIdenticon(address) {
+    const size = this.getIdenticonSizePx();
+    const identicon = makeBlockie2(address.toLowerCase());
+    return html3`
+      <div class="inline-flex items-center p-1 justify-center rounded-lg bg-neutral-100 border border-neutral-90 overflow-hidden flex-none">
+        <img
+          class="block"
+          src=${identicon}
+          alt="identicon"
+          style="width:${size}px;height:${size}px;"
+        />
+      </div>
+    `;
+  }
+  renderOptionLabel(option) {
+    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(
+      option.value
+    )} <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>`;
+  }
+  render() {
+    const selectedOption = this.getSelectedOption();
+    return html3`
+      <div class="relative w-full min-w-[360px]" @keydown=${this.onKeyDown}>
+        <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}>
+            <custom-option is-full-width .hoverable=${false}>
+            <div class="flex flex-row flex-1 items-center justify-between">
+              <span>${selectedOption ? this.renderOptionLabel(selectedOption) : "Select option"}</span>
+              <lukso-icon class="transition-transform ${this.open ? "rotate-180" : ""}" name="arrow-down-sm" size="small" color="neutral-20" aria-hidden="true">
+            </lukso-icon>
+            </div>
+          </custom-option>
+        </button>
+
+        ${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">
+              ${this.options.map(
+      (opt) => html3`<custom-option .selected=${opt.value === this.value} .disabled=${opt.disabled} @click=${() => this.onOptionClick(opt)}>
+              ${this.renderOptionLabel(opt)}
+              </custom-option>`
+    )}
+            </div>` : ""}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property3()
+], CustomSelect.prototype, "value", 2);
+__decorateClass([
+  property3({ type: Boolean })
+], CustomSelect.prototype, "open", 2);
+__decorateClass([
+  property3({ type: Array })
+], CustomSelect.prototype, "options", 2);
+__decorateClass([
+  property3({ type: String })
+], CustomSelect.prototype, "size", 2);
+CustomSelect = __decorateClass([
+  safeCustomElement("custom-select")
+], CustomSelect);
+
+// src/shared/function-name-view.ts
+import { html as html4 } from "lit";
+import { property as property4 } from "lit/decorators.js";
+var FunctionNameView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.icon = "user";
+    this.size = "small";
+  }
+  getPadding() {
+    switch (this.size) {
+      case "x-small":
+        return "2px 8px";
+      case "small":
+        return "4px 10px";
+      case "medium":
+        return "6px 12px";
+      case "large":
+        return "8px 14px";
+      default:
+        return "4px 10px";
+    }
+  }
+  getFontSize() {
+    switch (this.size) {
+      case "x-small":
+        return "12px";
+      case "small":
+        return "14px";
+      case "medium":
+        return "16px";
+      case "large":
+        return "18px";
+      default:
+        return "14px";
+    }
+  }
+  getIconSize() {
+    return this.size;
+  }
+  getHeight() {
+    switch (this.size) {
+      case "x-small":
+        return "h-6";
+      case "small":
+        return "h-8";
+      case "medium":
+        return "h-10";
+      case "large":
+        return "h-12";
+      default:
+        return "h-8";
+    }
+  }
+  render() {
+    return html4`
+      <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()};">
+        <lukso-icon name=${this.icon} size=${this.getIconSize()} color=${this.color || ""}></lukso-icon>
+        <span class="whitespace-nowrap"><slot>${this.label}</slot></span>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property4()
+], FunctionNameView.prototype, "label", 2);
+__decorateClass([
+  property4()
+], FunctionNameView.prototype, "icon", 2);
+__decorateClass([
+  property4()
+], FunctionNameView.prototype, "size", 2);
+__decorateClass([
+  property4({ attribute: "color" })
+], FunctionNameView.prototype, "color", 2);
+FunctionNameView = __decorateClass([
+  safeCustomElement("function-name-view")
+], FunctionNameView);
+
+// src/shared/gas-provider-view.ts
+import { html as html5 } from "lit";
+import { property as property5 } from "lit/decorators.js";
+var GasProviderView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.allRelayers = [];
+    this.balance = 0;
+    this.symbol = "LYX";
+    this.decimals = 18;
+    this.transactionFee = 0;
+    this.relayerAvailable = 0;
+    this.relayerUsed = 0;
+    this.relayerToBeUsed = 0;
+    this.relayerResetDate = "N/A";
+  }
+  formatToken(amount) {
+    return (amount / 10 ** this.decimals).toLocaleString(void 0, {
+      maximumFractionDigits: 6
+    });
+  }
+  onSelectChanged(e) {
+    const value = e.target.value;
+    if (!value) return;
+    if (this.controllerAddress && value === this.controllerAddress) {
+      const next = {
+        type: "controller",
+        id: this.controllerAddress
+      };
+      if (!this.selectedGasProvider || this.selectedGasProvider.id !== next.id || this.selectedGasProvider.type !== next.type) {
+        this.selectedGasProvider = next;
+        this.dispatchEvent(
+          new CustomEvent("on-gas-provider-change", {
+            detail: next,
+            bubbles: true
+          })
+        );
+      }
+      return;
+    }
+    const match = this.allRelayers.find(
+      (r) => r.website === value || r.apiUrl === value
+    );
+    if (match) {
+      const next = { type: "relayer", id: match.id };
+      if (!this.selectedGasProvider || this.selectedGasProvider.id !== next.id || this.selectedGasProvider.type !== next.type) {
+        this.selectedGasProvider = next;
+        this.dispatchEvent(
+          new CustomEvent("on-gas-provider-change", {
+            detail: next,
+            bubbles: true
+          })
+        );
+      }
+      return;
+    }
+  }
+  renderProgress(totalAvailable, used, toBeUsed, symbol, hasError) {
+    const usedPercent = totalAvailable ? used / totalAvailable * 100 : 0;
+    const toBeUsedPercent = totalAvailable ? toBeUsed / totalAvailable * 100 : 0;
+    const barOverHalf = usedPercent > 50;
+    return html5`<progress-view
+            class=${hasError ? "error" : ""}
+            .data=${[
+      {
+        value: usedPercent,
+        color: "var(--green-54)",
+        title: `${usedPercent}%`
+      },
+      {
+        value: toBeUsedPercent,
+        color: "var(--neutral-60)",
+        title: `${toBeUsedPercent}%`
+      }
+    ]}
+            label-position=${barOverHalf ? "left" : "right"}
+            .label=${`${toBeUsed} / ${String(totalAvailable)} ${symbol}`}
+          >
+          </progress-view>`;
+  }
+  renderControllerProgress() {
+    return this.renderProgress(
+      this.balance,
+      0,
+      this.transactionFee,
+      this.symbol,
+      this.transactionFee > this.balance
+    );
+  }
+  renderRelayerProgress() {
+    return this.renderProgress(
+      this.relayerAvailable,
+      this.relayerUsed,
+      this.relayerToBeUsed,
+      "M GAS",
+      this.relayerToBeUsed > this.relayerAvailable
+    );
+  }
+  displayRelayerResetDate() {
+    const date = new Date(this.relayerResetDate);
+    return isNaN(date.getTime()) ? "N/A" : date.toLocaleDateString();
+  }
+  render() {
+    const formatted = this.formatToken(this.balance);
+    const relayerOptions = this.allRelayers.map((r) => ({
+      value: r.website || r.apiUrl || `relayer:${r.id}`,
+      label: r.name,
+      disabled: false
+    }));
+    const controllerOption = this.controllerAddress ? [
+      {
+        value: this.controllerAddress,
+        label: this.controllerName ? `${this.controllerName} (${formatted} ${this.symbol})` : `UP Browser Extension (${formatted} ${this.symbol})`,
+        disabled: false
+      }
+    ] : [];
+    const options = [...relayerOptions, ...controllerOption];
+    const selectedValue = this.selectedGasProvider ? this.selectedGasProvider.type === "controller" ? this.controllerAddress : (() => {
+      const r = this.allRelayers.find(
+        (x) => x.id === this.selectedGasProvider.id
+      );
+      return r?.website || r?.apiUrl || `relayer:${this.selectedGasProvider.id}`;
+    })() : void 0;
+    return html5`
+      <div class="w-full">
+        <custom-select .value=${selectedValue} .options=${options} @change=${this.onSelectChanged}></custom-select>
+          ${this.selectedGasProvider ? html5`<div class="mt-2">
+          ${this.selectedGasProvider?.type === "controller" ? this.renderControllerProgress() : this.renderRelayerProgress()}
+          ${this.selectedGasProvider?.type === "relayer" ? html5`<span class="text-[12px] text-neutral-60 mt-2 block">
+          Your total of ${this.relayerAvailable}M resets on ${this.displayRelayerResetDate()}.
+        </span>` : html5``}
+        </div>` : html5``}
+       
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property5({ type: Array, reflect: true })
+], GasProviderView.prototype, "allRelayers", 2);
+__decorateClass([
+  property5({ type: Number, reflect: true })
+], GasProviderView.prototype, "balance", 2);
+__decorateClass([
+  property5({ type: Object, attribute: "selected-gas-provider", reflect: true })
+], GasProviderView.prototype, "selectedGasProvider", 2);
+__decorateClass([
+  property5({ attribute: "controller-address", reflect: true })
+], GasProviderView.prototype, "controllerAddress", 2);
+__decorateClass([
+  property5({ attribute: "controller-name", reflect: true })
+], GasProviderView.prototype, "controllerName", 2);
+__decorateClass([
+  property5({ attribute: "symbol", reflect: true })
+], GasProviderView.prototype, "symbol", 2);
+__decorateClass([
+  property5({ type: Number, reflect: true })
+], GasProviderView.prototype, "decimals", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "transaction-fee", reflect: true })
+], GasProviderView.prototype, "transactionFee", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "relayer-available", reflect: true })
+], GasProviderView.prototype, "relayerAvailable", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "relayer-used", reflect: true })
+], GasProviderView.prototype, "relayerUsed", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "relayer-to-be-used", reflect: true })
+], GasProviderView.prototype, "relayerToBeUsed", 2);
+__decorateClass([
+  property5({ attribute: "relayer-reset-date", reflect: true })
+], GasProviderView.prototype, "relayerResetDate", 2);
+GasProviderView = __decorateClass([
+  safeCustomElement("gas-provider-view")
+], GasProviderView);
+
+// src/shared/icon-view.ts
+import { Task as Task3 } from "@lit/task";
+import {
+  useAddressResolver as useAddressResolver3,
+  useImageLoader as useImageLoader2
+} from "@lukso/transaction-view-headless";
+import { html as html6 } from "lit";
+import { property as property6, state as state5 } from "lit/decorators.js";
+var IconView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.showName = true;
+    this.namePosition = "below";
+    this.maxWidth = 200;
+    this.showIconIdenticon = true;
+    this.showLabelIdenticon = false;
+    this.forceUnresolved = false;
+    this.isLoadingImage = false;
+    this.isLoadingAddress = false;
+    // Composables
+    this.imageLoader = useImageLoader2();
+    this.addressResolver = useAddressResolver3();
+    // Task for resolving address data
+    this.addressTask = new Task3(this, {
+      task: async ([address], { signal }) => {
+        if (!address) return null;
+        this.isLoadingAddress = true;
+        try {
+          const resolved = await this.addressResolver.resolveAddress(address);
+          this.requestUpdate();
+          return resolved;
+        } catch (error) {
+          console.warn("\u274C IconView: Failed to resolve address:", error);
+          return null;
+        } finally {
+          this.isLoadingAddress = false;
+        }
+      },
+      args: () => [this.address]
+    });
+    // Task for loading profile image
+    this.imageTask = new Task3(this, {
+      task: async ([resolved], { signal }) => {
+        if (!resolved) return null;
+        this.isLoadingImage = true;
+        try {
+          let image;
+          if (this.imageHint && resolved[this.imageHint]) {
+            const imageArray = resolved[this.imageHint];
+            if (Array.isArray(imageArray) && imageArray.length > 0) {
+              image = await this.imageLoader.loadImage(imageArray, {
+                width: this.getSizePixels(),
+                height: this.getSizePixels(),
+                dpr: window.devicePixelRatio || 1,
+                index: this.imageIndex
+              });
+            }
+          } else {
+            image = await this.imageLoader.loadProfileImage(resolved, {
+              width: this.getSizePixels(),
+              height: this.getSizePixels(),
+              dpr: window.devicePixelRatio || 1,
+              index: this.imageIndex
+            });
+          }
+          return image || this.imageLoader.getFallbackImage(resolved);
+        } catch (error) {
+          console.warn("Failed to load address image:", error);
+          return this.imageLoader.getFallbackImage(resolved || {});
+        } finally {
+          this.isLoadingImage = false;
+        }
+      },
+      args: () => [this.addressTask.value]
+    });
+  }
+  /**
+   * Get pixel size for the current size setting
+   */
+  getSizePixels() {
+    switch (this.size) {
+      case "x-small":
+        return 16;
+      case "small":
+        return 24;
+      case "medium":
+        return 32;
+      case "large":
+        return 48;
+      case "2x-large":
+        return 124;
+      default:
+        return 24;
+    }
+  }
+  /**
+   * Check if this is a contract address (shows square icon)
+   */
+  get isContract() {
+    const resolved = this.addressTask.value;
+    return resolved ? this.imageLoader.isContractAddress(resolved) : false;
+  }
+  /**
+   * Handle icon click
+   */
+  handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("address-click", {
+        detail: {
+          address: this.address,
+          resolved: this.addressTask.value
+        },
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    const imageResult = this.imageTask.value;
+    const containerClass = this.namePosition === "beside" ? "row" : "column";
+    return html6`
+      <div class="${containerClass === "row" ? "flex items-start gap-1" : "flex flex-col items-center gap-1"}">
+        ${this.label ? html6`<div class="text-[12px] text-neutral-60 font-medium">${this.label}</div>` : ""}
+
+        <div class="${this.namePosition === "beside" ? "inline-flex flex-row items-center gap-2" : "inline-flex flex-col items-center gap-1.5"}">
+          <lukso-profile
+            size=${this.size}
+            profile-address=${this.address}
+            profile-url=${imageResult?.src || ""}
+            ?has-identicon=${this.showIconIdenticon}
+            ?is-square=${this.isContract}
+            class="inline-flex items-center cursor-pointer transition-transform duration-200 hover:scale-105"
+            @click=${this.handleClick}
+          ></lukso-profile>
+
+          ${this.showName ? html6`
+                <address-view
+                  class="leading-none"
+                  address=${this.address}
+                  .showIdenticon=${this.showLabelIdenticon}
+                  size=${this.size}
+                  max-width=${this.maxWidth}
+                ></address-view>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property6()
+], IconView.prototype, "address", 2);
+__decorateClass([
+  property6({ type: Object })
+], IconView.prototype, "resolved", 2);
+__decorateClass([
+  property6()
+], IconView.prototype, "size", 2);
+__decorateClass([
+  property6()
+], IconView.prototype, "label", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "show-name" })
+], IconView.prototype, "showName", 2);
+__decorateClass([
+  property6({ attribute: "name-position" })
+], IconView.prototype, "namePosition", 2);
+__decorateClass([
+  property6({ type: Number, attribute: "max-width" })
+], IconView.prototype, "maxWidth", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "show-icon-identicon" })
+], IconView.prototype, "showIconIdenticon", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "show-label-identicon" })
+], IconView.prototype, "showLabelIdenticon", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "force-unresolved" })
+], IconView.prototype, "forceUnresolved", 2);
+__decorateClass([
+  property6({ type: String, attribute: "image-hint" })
+], IconView.prototype, "imageHint", 2);
+__decorateClass([
+  property6({ type: Number, attribute: "image-index" })
+], IconView.prototype, "imageIndex", 2);
+__decorateClass([
+  state5()
+], IconView.prototype, "imageData", 2);
+__decorateClass([
+  state5()
+], IconView.prototype, "isLoadingImage", 2);
+__decorateClass([
+  state5()
+], IconView.prototype, "isLoadingAddress", 2);
+IconView = __decorateClass([
+  safeCustomElement("icon-view")
+], IconView);
+
+// src/shared/image-loader-controller.ts
+import {
+  useImageLoader as useImageLoaderHeadless
+} from "@lukso/transaction-view-headless";
+var ImageLoaderController = class {
+  constructor(host) {
+    this.headlessLoader = useImageLoaderHeadless();
+    // Internal state
+    this._state = {
+      result: null,
+      loading: false,
+      error: null
+    };
+    this.host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+  }
+  get state() {
+    return this._state;
+  }
+  get isLoading() {
+    return this._state.loading;
+  }
+  get error() {
+    return this._state.error;
+  }
+  get result() {
+    return this._state.result;
+  }
+  /**
+   * Load image from data array
+   */
+  async loadImage(imageData, options = {}) {
+    this.updateState({ loading: true, error: null });
+    try {
+      const result = await this.headlessLoader.loadImage(imageData, options);
+      this.updateState({ result, loading: false });
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err.message : "Failed to load image";
+      this.updateState({ loading: false, error });
+      return null;
+    }
+  }
+  /**
+   * Load profile image from address data
+   */
+  async loadProfileImage(addressData, options = {}) {
+    this.updateState({ loading: true, error: null });
+    try {
+      const result = await this.headlessLoader.loadProfileImage(addressData, options) || this.headlessLoader.getFallbackImage(addressData);
+      this.updateState({ result, loading: false });
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err.message : "Failed to load profile image";
+      const fallback = this.headlessLoader.getFallbackImage(addressData);
+      this.updateState({ result: fallback, loading: false, error });
+      return fallback;
+    }
+  }
+  /**
+   * Load image from address signal (reactive)
+   */
+  loadFromSignal(addressSignal, options = {}) {
+    const addressData = addressSignal.value?.data;
+    if (!addressData) {
+      const fallback = this.headlessLoader.getFallbackImage({});
+      this.updateState({ result: fallback, loading: false, error: null });
+      return;
+    }
+    this.loadProfileImage(addressData, options);
+  }
+  /**
+   * Get fallback image synchronously
+   */
+  getFallbackImage(addressData) {
+    return this.headlessLoader.getFallbackImage(addressData);
+  }
+  /**
+   * Check if address is a contract
+   */
+  isContractAddress(addressData) {
+    return this.headlessLoader.isContractAddress(addressData);
+  }
+  /**
+   * Clear current state
+   */
+  clear() {
+    this.updateState({ result: null, loading: false, error: null });
+  }
+  updateState(updates) {
+    this._state = { ...this._state, ...updates };
+    this.host.requestUpdate();
+  }
+};
+function useImageLoader3(host) {
+  return new ImageLoaderController(host);
+}
+
+// src/shared/notification-view.ts
+import { html as html7 } from "lit";
+import { property as property7, state as state6 } from "lit/decorators.js";
+var NotificationView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "info";
+    this.message = "";
+    this.title = "";
+    this.acknowledgeable = false;
+    this.acknowledgeText = "I understand and want to continue";
+    this.acknowledged = false;
+    this.checked = false;
+  }
+  handleAcknowledgeChange(e) {
+    e.stopPropagation();
+    const target = e.target;
+    const checked = !!(target?.checked ?? e.detail?.checked ?? false);
+    if (checked !== this.checked) {
+      this.checked = checked;
+    }
+    if (this.checked) {
+      this.acknowledged = true;
+      this.dispatchEvent(
+        new CustomEvent("notification-acknowledged", {
+          detail: {
+            variant: this.variant,
+            message: this.message,
+            title: this.title,
+            checked: this.checked
+          },
+          bubbles: true
+        })
+      );
+    }
+  }
+  render() {
+    if (this.acknowledged) return html7``;
+    return html7`
+      <div class="grid grid-cols-[24px_1fr] items-start gap-3 p-3 rounded-xl text-neutral-10 leading-snug ${this.getVariantBackgroundClass()}">
+        <div class="flex items-center justify-center text-[16px] text-neutral-20 self-center" aria-hidden="true">
+        <lukso-icon name="${this.renderIcon()}" size="large" color="${this.getVariantColor()}"></lukso-icon>
+        </div>
+        <div class="text-[14px] flex flex-col gap-1.5">
+          ${this.title ? html7`<div class="font-semibold text-neutral-20 paragraph-inter-14-semi-bold">${this.title}</div>` : ""}
+          <div class="text-neutral-30"><slot>${this.message}</slot></div>
+          ${this.acknowledgeable ? html7`
+                <div class="inline-flex items-center gap-2 mt-1 text-[12px] text-neutral-20 select-none cursor-pointer paragraph-inter-12-medium">
+                  <lukso-checkbox 
+                    size="x-small" 
+                    ?checked=${this.checked}
+                    @change=${this.handleAcknowledgeChange}
+                  ><span class="paragraph-inter-14-semi-bold">${this.acknowledgeText}</span></lukso-checkbox>
+                </div>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+  renderIcon() {
+    switch (this.variant) {
+      case "success":
+        return "bulb-outline";
+      case "warning":
+        return "warning-round";
+      case "error":
+        return "warning-triangle";
+      default:
+        return "bulb-outline";
+    }
+  }
+  getVariantColor() {
+    switch (this.variant) {
+      case "success":
+        return "green-45";
+      case "warning":
+        return "yellow-55";
+      case "error":
+        return "red-55";
+      default:
+        return "blue-50";
+    }
+  }
+  getVariantBackgroundClass() {
+    switch (this.variant) {
+      case "success":
+        return "bg-green-85";
+      case "warning":
+        return "bg-yellow-85";
+      case "error":
+        return "bg-red-85";
+      default:
+        return "bg-blue-85";
+    }
+  }
+};
+__decorateClass([
+  property7()
+], NotificationView.prototype, "variant", 2);
+__decorateClass([
+  property7()
+], NotificationView.prototype, "message", 2);
+__decorateClass([
+  property7()
+], NotificationView.prototype, "title", 2);
+__decorateClass([
+  property7({ type: Boolean, attribute: "acknowledgeable" })
+], NotificationView.prototype, "acknowledgeable", 2);
+__decorateClass([
+  property7({ attribute: "acknowledge-text" })
+], NotificationView.prototype, "acknowledgeText", 2);
+__decorateClass([
+  state6()
+], NotificationView.prototype, "acknowledged", 2);
+__decorateClass([
+  property7({ type: Boolean, reflect: true })
+], NotificationView.prototype, "checked", 2);
+NotificationView = __decorateClass([
+  safeCustomElement("notification-view")
+], NotificationView);
+
+// src/shared/progress-view.ts
+import { html as html8 } from "lit";
+import { property as property8 } from "lit/decorators.js";
+var ProgressView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.data = [];
+    this.labelPosition = "right";
+  }
+  renderGasProviderLabel() {
+    return html8`
+    ${this.label ? html8`
+          <span class="progress-label-value">${this.label}</span>
+          ${this.unit ? html8`<span class="progress-label-unit" data-testid="unit">${this.unit}</span>` : ""}
+        ` : html8`
+          <slot></slot>
+          ${this.unit ? html8`<span class="progress-label-unit" data-testid="unit">${this.unit}</span>` : ""}
+        `}
+    `;
+  }
+  renderAddressLabel() {
+    return html8`
+      <value-view
+        .value=${this.address}
+        .unit=${this.unit}
+      ></value-view>
+    `;
+  }
+  render() {
+    const isError = (this.className || "").split(/\s+/).includes("error");
+    return html8`
+      <div class="relative grid w-full ${this.className || ""}">
+        <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">
+          ${this.data.map((seg, index) => {
+      const width = `${Math.max(0, Math.min(100, Number(seg.value || 0)))}%`;
+      const backgroundColor = seg.color || "var(--neutral-90)";
+      const title = seg.title || "";
+      return html8`<div
+              class="h-full flex items-center justify-center text-[10px] font-semibold"
+              style=${`width:${width};background-color:${backgroundColor};`}
+              data-testid=${`value-${index}`}
+            >${title}</div>`;
+    })}
+        </div>
+        <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">
+          <div class="text-[13px] font-semibold text-white mix-blend-difference h-inherit flex items-center p-0 right-4 absolute" data-testid="label">
+            ${this.renderGasProviderLabel()}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property8({ type: Array })
+], ProgressView.prototype, "data", 2);
+__decorateClass([
+  property8()
+], ProgressView.prototype, "label", 2);
+__decorateClass([
+  property8()
+], ProgressView.prototype, "unit", 2);
+__decorateClass([
+  property8()
+], ProgressView.prototype, "address", 2);
+__decorateClass([
+  property8({ attribute: "label-position" })
+], ProgressView.prototype, "labelPosition", 2);
+ProgressView = __decorateClass([
+  safeCustomElement("progress-view")
+], ProgressView);
+
+// src/shared/scroll-to-bottom-button.ts
+import { html as html9 } from "lit";
+import { property as property9 } from "lit/decorators.js";
+var ScrollToBottomButton = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.show = false;
+    this.color = "neutral-20";
+    this.iconSize = "medium";
+    this.iconName = "arrow-down-lg";
+  }
+  handleClick() {
+    this.dispatchEvent(new CustomEvent("scroll-to-bottom", { bubbles: true }));
+  }
+  render() {
+    return html9`
+      <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"}">
+        <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}>
+            <lukso-icon
+              name=${this.iconName}
+              size=${this.iconSize}
+              color=${this.color}
+            ></lukso-icon>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property9({ type: Boolean, attribute: "show" })
+], ScrollToBottomButton.prototype, "show", 2);
+__decorateClass([
+  property9()
+], ScrollToBottomButton.prototype, "color", 2);
+__decorateClass([
+  property9({ attribute: "icon-size" })
+], ScrollToBottomButton.prototype, "iconSize", 2);
+__decorateClass([
+  property9({ attribute: "icon-name" })
+], ScrollToBottomButton.prototype, "iconName", 2);
+ScrollToBottomButton = __decorateClass([
+  safeCustomElement("scroll-to-bottom-button")
+], ScrollToBottomButton);
+
+// src/shared/signal-controller.ts
+var SignalController = class _SignalController {
+  constructor(host, signal) {
+    this.host = host;
+    this.signal = signal;
+    host.addController(this);
+  }
+  hostConnected() {
+    let lastValue = this.signal.value;
+    const check = () => {
+      const currentValue = this.signal.value;
+      if (currentValue !== lastValue) {
+        lastValue = currentValue;
+        this.host.requestUpdate();
+      }
+    };
+    const interval = setInterval(check, 50);
+    this.unsubscribe = () => clearInterval(interval);
+  }
+  hostDisconnected() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = void 0;
+    }
+  }
+  get value() {
+    return this.signal.value;
+  }
+  /**
+   * Create a new SignalController for a different signal
+   */
+  static create(host, signal) {
+    return new _SignalController(host, signal);
+  }
+};
+var MultiSignalController = class {
+  constructor(host, signals) {
+    this.unsubscribes = [];
+    this.host = host;
+    this.signals = signals;
+    host.addController(this);
+  }
+  hostConnected() {
+    this.signals.forEach((signal, index) => {
+      let lastValue = signal.value;
+      const check = () => {
+        const currentValue = signal.value;
+        if (currentValue !== lastValue) {
+          lastValue = currentValue;
+          this.host.requestUpdate();
+        }
+      };
+      const interval = setInterval(check, 50);
+      this.unsubscribes[index] = () => clearInterval(interval);
+    });
+  }
+  hostDisconnected() {
+    this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+    this.unsubscribes = [];
+  }
+  getValue(index) {
+    return this.signals[index]?.value;
+  }
+  getValues() {
+    return this.signals.map((signal) => signal.value);
+  }
+};
+function useSignal(host, signal) {
+  return new SignalController(host, signal);
+}
+function useSignals(host, signals) {
+  return new MultiSignalController(host, signals);
+}
+
+// src/shared/transaction-view-controller.ts
+import {
+  findAllTransactionViews,
+  findBestTransactionView,
+  useTransactionView as useTransactionViewHeadless
+} from "@lukso/transaction-view-headless";
+var TransactionViewController = class {
+  constructor(host, transaction, options) {
+    this.transaction = transaction;
+    this.options = options;
+    this.headlessInstance = null;
+    // Internal state
+    this._state = {
+      matches: [],
+      bestMatch: null,
+      component: null,
+      loading: false,
+      error: null,
+      isResolvingAddresses: false,
+      resolvedAddresses: {}
+    };
+    this.host = host;
+    host.addController(this);
+    this.initialize();
+  }
+  hostConnected() {
+    this.setupSync();
+  }
+  hostDisconnected() {
+    if (this.syncInterval) {
+      clearInterval(this.syncInterval);
+      this.syncInterval = void 0;
+    }
+  }
+  get state() {
+    return this._state;
+  }
+  get matches() {
+    return this._state.matches;
+  }
+  get bestMatch() {
+    return this._state.bestMatch;
+  }
+  get component() {
+    return this._state.component;
+  }
+  get isLoading() {
+    return this._state.loading;
+  }
+  get error() {
+    return this._state.error;
+  }
+  get isResolvingAddresses() {
+    return this._state.isResolvingAddresses;
+  }
+  get resolvedAddresses() {
+    return this._state.resolvedAddresses;
+  }
+  /**
+   * Load a specific match
+   */
+  async loadMatch(match) {
+    if (!this.headlessInstance) {
+      throw new Error("Transaction view not initialized");
+    }
+    try {
+      const result = await this.headlessInstance.loadMatch(match);
+      this.syncState();
+      return result;
+    } catch (err) {
+      this.syncState();
+      throw err;
+    }
+  }
+  /**
+   * Load the best match
+   */
+  async loadBestMatch() {
+    if (!this.headlessInstance) {
+      throw new Error("Transaction view not initialized");
+    }
+    try {
+      const result = await this.headlessInstance.loadBestMatch();
+      this.syncState();
+      return result;
+    } catch (err) {
+      this.syncState();
+      throw err;
+    }
+  }
+  /**
+   * Refresh matches
+   */
+  refreshMatches() {
+    if (!this.headlessInstance) {
+      console.warn("Transaction view not initialized, cannot refresh matches");
+      return;
+    }
+    this.headlessInstance.refreshMatches();
+    this.syncState();
+  }
+  /**
+   * Resolve addresses
+   */
+  async resolveAddresses() {
+    if (!this.headlessInstance) {
+      throw new Error("Transaction view not initialized");
+    }
+    try {
+      await this.headlessInstance.resolveAddresses();
+      this.syncState();
+    } catch (err) {
+      this.syncState();
+      throw err;
+    }
+  }
+  /**
+   * Update transaction and options
+   */
+  update(transaction, options) {
+    this.transaction = transaction;
+    this.options = options;
+    this.initialize();
+  }
+  /**
+   * Get the best matching view without loading
+   */
+  static findBestMatch(transaction, framework = "lit") {
+    return findBestTransactionView(transaction, framework);
+  }
+  /**
+   * Get all matching views without loading
+   */
+  static findAllMatches(transaction, framework = "lit") {
+    return findAllTransactionViews(transaction, framework);
+  }
+  initialize() {
+    try {
+      this.headlessInstance = useTransactionViewHeadless(
+        this.transaction,
+        this.options
+      );
+      this.syncState();
+    } catch (err) {
+      this.updateState({
+        error: err instanceof Error ? err : new Error("Failed to initialize transaction view")
+      });
+      console.error("Failed to initialize transaction view:", err);
+    }
+  }
+  setupSync() {
+    this.syncState();
+    this.syncInterval = setInterval(() => {
+      this.syncState();
+    }, 100);
+  }
+  syncState() {
+    if (!this.headlessInstance) return;
+    this.updateState({
+      matches: this.headlessInstance.matches,
+      bestMatch: this.headlessInstance.bestMatch,
+      component: this.headlessInstance.component,
+      loading: this.headlessInstance.isLoading,
+      error: this.headlessInstance.error,
+      isResolvingAddresses: this.headlessInstance.isResolvingAddresses,
+      resolvedAddresses: this.headlessInstance.resolvedAddresses
+    });
+  }
+  updateState(updates) {
+    this._state = { ...this._state, ...updates };
+    this.host.requestUpdate();
+  }
+};
+function useTransactionView(host, transaction, options) {
+  return new TransactionViewController(host, transaction, options);
+}
+var TransactionSignalController = class {
+  constructor(host, signal) {
+    this._data = null;
+    this._loading = false;
+    this._error = null;
+    this.host = host;
+    this.signal = signal;
+    host.addController(this);
+  }
+  hostConnected() {
+    this.setupSignalSync();
+  }
+  hostDisconnected() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = void 0;
+    }
+  }
+  get data() {
+    return this._data;
+  }
+  get loading() {
+    return this._loading;
+  }
+  get error() {
+    return this._error;
+  }
+  get isReady() {
+    return !this._loading && this._data !== null && !this._error;
+  }
+  setupSignalSync() {
+    const sync = () => {
+      const signalValue = this.signal.value;
+      const newData = signalValue?.data || null;
+      const newLoading = signalValue?.loading || false;
+      const newError = signalValue?.error || null;
+      if (newData !== this._data || newLoading !== this._loading || newError !== this._error) {
+        this._data = newData;
+        this._loading = newLoading;
+        this._error = newError;
+        this.host.requestUpdate();
+      }
+    };
+    sync();
+    const interval = setInterval(sync, 50);
+    this.unsubscribe = () => clearInterval(interval);
+  }
+};
+function useTransactionSignal(host, signal) {
+  return new TransactionSignalController(host, signal);
+}
+
+// src/shared/url-view.ts
+import { html as html10 } from "lit";
+import { property as property10, state as state7 } from "lit/decorators.js";
+var UrlView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.showLogo = true;
+    this.maxWidth = 240;
+    this.displayName = "";
+    this.faviconCandidates = [];
+    this.faviconIndex = 0;
+  }
+  willUpdate(changed) {
+    if (changed.has("url") || changed.has("label") || changed.has("logoUrl")) {
+      this.computeMeta();
+    }
+  }
+  computeMeta() {
+    try {
+      const u = new URL(this.url);
+      const origin = u.origin;
+      this.faviconCandidates = [];
+      if (this.logoUrl) this.faviconCandidates.push(this.logoUrl);
+      this.faviconCandidates.push(
+        `${origin}/favicon.ico`,
+        `${origin}/favicon.png`
+      );
+      this.faviconIndex = 0;
+      this.favicon = this.faviconCandidates[this.faviconIndex];
+      const hostname = u.hostname.replace(/^www\./, "");
+      const hostnamePretty = hostname.split(".").filter(Boolean).slice(-2).join(" ").replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+      if (this.label && this.label.trim()) {
+        this.displayName = this.label.trim();
+      } else {
+        this.displayName = hostnamePretty || this.url;
+      }
+    } catch {
+      this.favicon = void 0;
+      this.displayName = this.label && this.label.trim() ? this.label : this.url;
+    }
+  }
+  handleImageError() {
+    this.faviconIndex += 1;
+    if (this.faviconIndex < this.faviconCandidates.length) {
+      this.favicon = this.faviconCandidates[this.faviconIndex];
+    } else {
+      this.favicon = void 0;
+    }
+  }
+  getSizePixels() {
+    switch (this.size) {
+      case "x-small":
+        return 14;
+      case "small":
+        return 16;
+      case "medium":
+        return 20;
+      case "large":
+        return 24;
+      default:
+        return 16;
+    }
+  }
+  render() {
+    const sizePx = this.getSizePixels();
+    return html10`
+      <div class="inline-flex flex-col gap-1">
+        <div class="inline-flex items-center gap-2 px-2.5 py-1.5 text-neutral-20 leading-tight font-semibold">
+          ${this.showLogo ? html10`
+                <div class="inline-flex items-center p-1 justify-center rounded-lg bg-neutral-100 border border-neutral-90 overflow-hidden flex-none">
+                  ${this.favicon ? html10`<img
+                        src=${this.favicon}
+                        style="width:${sizePx}px;height:${sizePx}px;"
+                        alt="favicon"
+                        @error=${this.handleImageError}
+                      />` : html10`<lukso-icon name="globe" size=${this.size} color="blue-85"></lukso-icon>`}
+                </div>
+              ` : ""}
+          <span class="whitespace-nowrap overflow-hidden text-ellipsis leading-tight" style=${`max-width:${this.maxWidth}px;font-size: ${sizePx}px;`}>${this.displayName}</span>
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property10()
+], UrlView.prototype, "url", 2);
+__decorateClass([
+  property10()
+], UrlView.prototype, "size", 2);
+__decorateClass([
+  property10()
+], UrlView.prototype, "label", 2);
+__decorateClass([
+  property10({ type: Boolean, attribute: "show-logo" })
+], UrlView.prototype, "showLogo", 2);
+__decorateClass([
+  property10({ attribute: "logo-url" })
+], UrlView.prototype, "logoUrl", 2);
+__decorateClass([
+  property10({ type: Number, attribute: "max-width" })
+], UrlView.prototype, "maxWidth", 2);
+__decorateClass([
+  state7()
+], UrlView.prototype, "favicon", 2);
+__decorateClass([
+  state7()
+], UrlView.prototype, "displayName", 2);
+UrlView = __decorateClass([
+  safeCustomElement("url-view")
+], UrlView);
+
+// src/shared/value-view.ts
+import { Task as Task4 } from "@lit/task";
+import { useAddressResolver as useAddressResolver4 } from "@lukso/transaction-view-headless";
+import { html as html11 } from "lit";
+import { property as property11, state as state8 } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+function formatUnits(value, decimals = 18) {
+  const divisor = 10n ** BigInt(decimals);
+  const quotient = value / divisor;
+  const remainder = value % divisor;
+  if (remainder === 0n) {
+    return quotient.toString();
+  }
+  const remainderStr = remainder.toString().padStart(decimals, "0");
+  const trimmed = remainderStr.replace(/0+$/, "");
+  return `${quotient}.${trimmed}`;
+}
+var ValueView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.type = "auto";
+    this.currencySymbol = "LYX";
+    this.decimals = 18;
+    this.size = "medium";
+    this.showCopyButton = false;
+    this.isCardView = false;
+    this._hasSlotContent = false;
+    // Task for resolving address metadata
+    this.addressTask = new Task4(this, {
+      task: async ([address]) => {
+        if (!address) return null;
+        try {
+          return this.addressResolver.resolveAddress(address);
+        } catch (error) {
+          console.warn("ValueView: Failed to resolve address metadata:", error);
+          return null;
+        }
+      },
+      args: () => [this.address]
+    });
+  }
+  _onSlotChange(e) {
+    const slot = e.target;
+    const assigned = slot?.assignedNodes({ flatten: true }) ?? [];
+    this._hasSlotContent = assigned.length > 0;
+  }
+  firstUpdated() {
+    const slot = this.renderRoot.querySelector("slot");
+    if (slot) {
+      const assigned = slot.assignedNodes({ flatten: true });
+      this._hasSlotContent = assigned.length > 0;
+    }
+  }
+  // Address resolution utilities (lazy initialization)
+  get addressResolver() {
+    try {
+      return useAddressResolver4();
+    } catch (error) {
+      console.warn("ValueView: Address resolver not available:", error);
+      return {
+        resolveAddress: async () => null
+      };
+    }
+  }
+  /**
+   * Get the effective type for the value
+   */
+  getEffectiveType() {
+    if (this.type !== "auto") return this.type;
+    const value = this.value;
+    if (value === null || value === void 0) return "null";
+    if (typeof value === "string") return "string";
+    if (typeof value === "number") return "number";
+    if (typeof value === "boolean") return "boolean";
+    if (typeof value === "bigint") {
+      if (this.keyName === "value") return "currency";
+      return "bigint";
+    }
+    return "string";
+  }
+  /**
+   * Get CSS class for the value type
+   */
+  getValueClass() {
+    const effectiveType = this.getEffectiveType();
+    switch (effectiveType) {
+      case "string":
+        return "text-success-60";
+      case "number":
+        return "text-info-60";
+      case "boolean":
+        return "text-error-60";
+      case "currency":
+        return "text-warning-60 font-medium";
+      case "bigint":
+        return "text-secondary-60";
+      case "address":
+        return "text-info-60 font-mono";
+      case "null":
+        return "text-neutral-70 italic";
+      default:
+        return "text-neutral-10";
+    }
+  }
+  /**
+   * Format the value for display
+   */
+  getFormattedValue() {
+    const value = this.value;
+    const effectiveType = this.getEffectiveType();
+    if (value === null) return "null";
+    if (value === void 0) return "undefined";
+    switch (effectiveType) {
+      case "currency":
+        const { numeric, symbol } = this.getCurrencyParts();
+        return `${numeric} ${symbol}`;
+      case "bigint":
+        if (typeof value === "bigint") {
+          return value.toString() + "n";
+        }
+        return String(value) + "n";
+      case "boolean":
+        return value ? "true" : "false";
+      case "number":
+        if (typeof value === "number") {
+          return value.toLocaleString();
+        }
+        return String(value);
+      case "string":
+        return String(value);
+      case "null":
+        return "null";
+      default:
+        return String(value);
+    }
+  }
+  /**
+   * Compute currency display parts: numeric portion and symbol
+   */
+  getCurrencyParts() {
+    const value = this.value;
+    const resolvedData = this.addressTask.value;
+    const effectiveDecimals = resolvedData?.lsp4TokenSymbol ? resolvedData.baseAsset?.decimals ?? resolvedData.decimals ?? this.decimals : this.decimals;
+    const effectiveSymbol = resolvedData?.lsp4TokenSymbol || resolvedData?.baseAsset?.lsp4TokenSymbol || this.currencySymbol;
+    let numeric = String(value ?? "");
+    try {
+      if (typeof value === "bigint") {
+        numeric = formatUnits(value, effectiveDecimals);
+      } else if (typeof value === "string" && !isNaN(Number(value))) {
+        const bigintValue = BigInt(value);
+        numeric = formatUnits(bigintValue, effectiveDecimals);
+      }
+    } catch {
+      numeric = String(value ?? "");
+    }
+    return { numeric, symbol: effectiveSymbol };
+  }
+  /** Typography class for numeric value based on size */
+  getNumericClass() {
+    switch (this.size) {
+      case "x-small":
+        return "paragraph-ptmono-12-bold";
+      case "small":
+        return "paragraph-ptmono-14-bold";
+      case "medium":
+        return "paragraph-ptmono-16-bold";
+      case "large":
+        return "paragraph-ptmono-24-bold";
+      default:
+        return "paragraph-ptmono-16-bold";
+    }
+  }
+  /** Typography class for currency symbol based on size */
+  getCurrencyClass() {
+    switch (this.size) {
+      case "x-small":
+        return "paragraph-inter-12-regular";
+      case "small":
+        return "paragraph-inter-14-regular";
+      case "medium":
+        return "paragraph-inter-16-regular";
+      case "large":
+        return "paragraph-inter-20-regular";
+      default:
+        return "paragraph-inter-16-regular";
+    }
+  }
+  /**
+   * Get size-appropriate font size
+   */
+  getContainerTextClass() {
+    switch (this.size) {
+      case "x-small":
+        return "text-[12px]";
+      case "small":
+        return "text-[14px]";
+      case "medium":
+        return "text-[16px]";
+      case "large":
+        return "text-[18px]";
+      default:
+        return "text-[16px]";
+    }
+  }
+  /**
+   * Handle copy to clipboard
+   */
+  async handleCopy(e) {
+    if (e) e.stopPropagation();
+    const textToCopy = String(this.value);
+    try {
+      await navigator.clipboard.writeText(textToCopy);
+      this.dispatchEvent(
+        new CustomEvent("value-copied", {
+          detail: { value: textToCopy },
+          bubbles: true
+        })
+      );
+    } catch (error) {
+      console.error("Failed to copy value:", error);
+    }
+  }
+  /**
+   * Handle value click
+   */
+  handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("value-click", {
+        detail: {
+          value: this.value,
+          formattedValue: this.getFormattedValue(),
+          type: this.getEffectiveType()
+        },
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    const formattedValue = this.getFormattedValue();
+    const valueClass = this.getValueClass();
+    if (this.isCardView) {
+      const effectiveType = this.getEffectiveType();
+      let headerText = this.label || "";
+      let contentTemplate = html11`
+        <span class="inline-block text-wrap min-w-0 text-center">${formattedValue}</span>
+      `;
+      if (effectiveType === "currency") {
+        const { numeric, symbol } = this.getCurrencyParts();
+        if (this.label && this.label.trim() !== "") {
+          headerText = this.label;
+          contentTemplate = html11`
+              <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>
+              <span class="inline-block ${this.getCurrencyClass()}"> ${symbol}</span>
+          `;
+        } else {
+          headerText = symbol;
+          contentTemplate = html11`
+              <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>
+          `;
+        }
+      }
+      return html11`
+          <div
+            class="block border border-neutral-90 rounded-xl bg-white py-3 px-4 min-w-[320px] ${this.containerClassNames || ""}"
+            @click=${this.handleClick}
+            style="${this.maxWidth ? `max-width: ${this.maxWidth}px` : ""}"
+          >
+            <div class="flex items-center justify-between mb-2">
+            ${headerText ? html11`<div class="${this.getLabelClass()} text-neutral-20 overflow-hidden text-ellipsis whitespace-nowrap">${headerText}</div>` : html11``}
+            ${this.showCopyButton ? html11`
+                    <button
+                      class="bg-white rounded-lg w-6 h-6 flex items-center justify-center cursor-pointer text-neutral-20 hover:bg-neutral-95"
+                      @click=${(e) => this.handleCopy(e)}
+                      title="Copy value"
+                      aria-label="Copy"
+                    >
+                      <lukso-icon name="copy" size="small"></lukso-icon>
+                    </button>
+                  ` : html11``}
+          </div>
+            ${when(
+        !this._hasSlotContent,
+        () => html11`
+                <div class="font-semibold text-neutral-10 break-words flex items-center gap-2 text-wrap ${this.getUseMonospace() ? "font-mono" : ""}">
+                  ${contentTemplate}
+                </div>
+              `
+      )}
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+      `;
+    }
+    return html11`
+      <div
+        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 || ""}"
+        @click=${this.handleClick}
+        style="${this.maxWidth ? `max-width: ${this.maxWidth}px` : ""}"
+      >
+        <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${valueClass}">
+          ${formattedValue}
+        </span>
+        ${this.showCopyButton ? html11`
+                <button
+                  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"
+                  @click=${(e) => this.handleCopy(e)}
+                  title="Copy value"
+                  aria-label="Copy value to clipboard"
+                >
+                  <lukso-icon name="copy" size="small"></lukso-icon>
+                </button>
+              ` : ""}
+      </div>
+    `;
+  }
+  /** Whether to use monospace font for the value content */
+  getUseMonospace() {
+    const t = this.getEffectiveType();
+    if (t === "address" || t === "bigint" || this.value?.toString().startsWith("0x"))
+      return true;
+    if (t === "string") {
+      const s = String(this.value ?? "");
+      return /^0x[0-9a-fA-F]+$/.test(s) || s.length > 32;
+    }
+    return false;
+  }
+  /** Map size to a typography class for the label */
+  getLabelClass() {
+    switch (this.size) {
+      case "x-small":
+        return "paragraph-inter-12-semi-bold";
+      case "small":
+        return "heading-inter-14-bold";
+      case "medium":
+        return "heading-inter-17-semi-bold";
+      case "large":
+        return "heading-inter-21-semi-bold";
+      default:
+        return "heading-inter-17-semi-bold";
+    }
+  }
+};
+__decorateClass([
+  property11()
+], ValueView.prototype, "value", 2);
+__decorateClass([
+  property11({ attribute: "key-name" })
+], ValueView.prototype, "keyName", 2);
+__decorateClass([
+  property11({ type: String, attribute: "container-class-names" })
+], ValueView.prototype, "containerClassNames", 2);
+__decorateClass([
+  property11()
+], ValueView.prototype, "type", 2);
+__decorateClass([
+  property11({ attribute: "currency-symbol" })
+], ValueView.prototype, "currencySymbol", 2);
+__decorateClass([
+  property11({ type: Number })
+], ValueView.prototype, "decimals", 2);
+__decorateClass([
+  property11()
+], ValueView.prototype, "size", 2);
+__decorateClass([
+  property11({ type: Boolean, attribute: "show-copy-button" })
+], ValueView.prototype, "showCopyButton", 2);
+__decorateClass([
+  property11({ type: Boolean, attribute: "is-card-view" })
+], ValueView.prototype, "isCardView", 2);
+__decorateClass([
+  property11()
+], ValueView.prototype, "label", 2);
+__decorateClass([
+  property11({ type: Number, attribute: "max-width" })
+], ValueView.prototype, "maxWidth", 2);
+__decorateClass([
+  property11()
+], ValueView.prototype, "address", 2);
+__decorateClass([
+  state8()
+], ValueView.prototype, "resolvedMetadata", 2);
+__decorateClass([
+  state8()
+], ValueView.prototype, "_hasSlotContent", 2);
+ValueView = __decorateClass([
+  safeCustomElement("value-view")
+], ValueView);
+
+// src/shared/image-list.ts
+import { Task as Task5 } from "@lit/task";
+import { useAddressResolver as useAddressResolver5 } from "@lukso/transaction-view-headless";
+import { html as html12 } from "lit";
+import { property as property12, state as state9 } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+var ImageList = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.isCardView = false;
+    this.isLoading = false;
+    // Composables
+    this.addressResolver = useAddressResolver5();
+    // Task for resolving address data
+    this.addressTask = new Task5(this, {
+      task: async ([address], { signal }) => {
+        if (!address) return null;
+        this.isLoading = true;
+        try {
+          const resolved = await this.addressResolver.resolveAddress(address);
+          return resolved;
+        } catch (error) {
+          console.warn("\u274C ImageList: Failed to resolve address:", error);
+          return null;
+        } finally {
+          this.isLoading = false;
+        }
+      },
+      args: () => [this.address]
+    });
+  }
+  /**
+   * Get the list of items to display from resolved data
+   */
+  getDisplayItems() {
+    const resolved = this.addressTask.value;
+    if (!resolved) return [];
+    console.log("resolved images are", resolved);
+    const items = resolved[this.imageHint];
+    if (!Array.isArray(items)) return [];
+    const hasIndex = items.length > 0 && items[0]?.index !== void 0;
+    if (!hasIndex) {
+      return items;
+    }
+    return items.filter((item) => {
+      const index = item.index;
+      if (this.minIndex !== void 0 && index < this.minIndex) return false;
+      if (this.maxIndex !== void 0 && index > this.maxIndex) return false;
+      return true;
+    });
+  }
+  /**
+   * Check if an item is an actual image based on fileType
+   */
+  isImageFile(item) {
+    if (!item.fileType) return true;
+    return item.fileType.startsWith("image/");
+  }
+  /**
+   * Get file type icon for non-image files
+   */
+  getFileTypeIcon(item) {
+    if (!item.fileType) return "\u{1F4C4}";
+    if (item.fileType.startsWith("video/")) return "\u{1F3A5}";
+    if (item.fileType.startsWith("audio/")) return "\u{1F3B5}";
+    if (item.fileType.startsWith("application/pdf")) return "\u{1F4D5}";
+    return "\u{1F4C4}";
+  }
+  /**
+   * Render a single image item
+   */
+  renderImageItem(item, index) {
+    const itemIndex = item.index !== void 0 ? item.index : index;
+    const isImage = this.isImageFile(item);
+    if (isImage) {
+      const imageSrc = item.src || item.url;
+      if (!imageSrc) {
+        return html12`
+          <div class="image-item broken-image-item">
+            <div class="broken-image-icon">🖼️❌</div>
+            ${item.index !== void 0 ? html12`<div class="broken-image-label">#${item.index}</div>` : ""}
+            <div class="broken-image-text">No image</div>
+          </div>
+        `;
+      }
+      return html12`
+        <div class="">
+          <img
+            class="min-h-20 min-w-20 object-cover rounded-lg"
+            src=${imageSrc}
+            alt=${item.index !== void 0 ? `#${item.index}` : "Image"}
+            @error=${(e) => {
+        const target = e.target;
+        target.style.display = "none";
+        const parent = target.parentElement;
+        if (parent) {
+          parent.innerHTML = `
+                  <div class="broken-image-icon">\u{1F5BC}\uFE0F\u274C</div>
+                  <div class="broken-image-text">Failed to load</div>
+                `;
+        }
+      }}
+          />
+          ${item.index !== void 0 ? html12`<div class="image-label">#${item.index}</div>` : ""}
+        </div>
+      `;
+    } else {
+      return html12`
+        <div class="image-item file-item">
+          <div class="file-icon">${this.getFileTypeIcon(item)}</div>
+          ${item.index !== void 0 ? html12`<div class="file-label">#${item.index}</div>` : ""}
+          <div class="file-type">${item.fileType || "Unknown"}</div>
+        </div>
+      `;
+    }
+  }
+  getImageMinSizePx() {
+    switch (this.size) {
+      case "x-small":
+        return 80;
+      case "small":
+        return 120;
+      case "medium":
+        return 160;
+      case "large":
+        return 240;
+      default:
+        return 160;
+    }
+  }
+  render() {
+    if (this.isLoading) {
+      return html12`
+        <div class="flex flex-col items-center justify-center py-10 px-5 text-neutral-60">
+          <div class="text-[24px] mb-2 animate-spin">⏳</div>
+          <div class="text-[14px]">Loading images...</div>
+        </div>
+      `;
+    }
+    const items = this.getDisplayItems();
+    if (items.length === 0) {
+      return html12`
+        <div class="flex flex-col items-center justify-center py-10 px-5 text-neutral-70">
+          <div class="text-[14px]">No images found</div>
+        </div>
+      `;
+    }
+    const grid = html12`
+      <div class="grid grid-cols-[repeat(auto-fill,minmax(${this.getImageMinSizePx()}px,300px))] gap-3 p-2">
+        ${repeat(
+      items,
+      (item, index) => item.index ?? index,
+      (item, index) => this.renderImageItem(item, index)
+    )}
+      </div>
+    `;
+    return this.isCardView ? html12`<div class="flex flex-row flex-wrap border border-neutral-90 rounded-xl p-3 bg-neutral-100">${grid}</div>` : grid;
+  }
+};
+__decorateClass([
+  property12()
+], ImageList.prototype, "address", 2);
+__decorateClass([
+  property12({ type: String, attribute: "image-hint" })
+], ImageList.prototype, "imageHint", 2);
+__decorateClass([
+  property12({ type: Number, attribute: "min-index" })
+], ImageList.prototype, "minIndex", 2);
+__decorateClass([
+  property12({ type: Number, attribute: "max-index" })
+], ImageList.prototype, "maxIndex", 2);
+__decorateClass([
+  property12()
+], ImageList.prototype, "size", 2);
+__decorateClass([
+  property12({ type: Boolean, attribute: "is-card-view" })
+], ImageList.prototype, "isCardView", 2);
+__decorateClass([
+  state9()
+], ImageList.prototype, "isLoading", 2);
+ImageList = __decorateClass([
+  safeCustomElement("image-list")
+], ImageList);
+
+// src/components/info-panel.ts
+import { Task as Task6 } from "@lit/task";
+import {
+  useAddressResolver as useAddressResolver6
+} from "@lukso/transaction-view-headless";
+import { css as css4, html as html13, LitElement as LitElement3 } from "lit";
+import { property as property13, state as state10 } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { repeat as repeat2 } from "lit/directives/repeat.js";
+import { when as when2 } from "lit/directives/when.js";
+var InfoPanel = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    this.address = "";
+    this.open = false;
+    this.standard = "";
+    this.type = "transfer";
+    this._isAnimating = false;
+    this._resolutionTask = new Task6(this, {
+      task: async ([address]) => {
+        if (!address) return null;
+        const { resolveAddress } = useAddressResolver6();
+        const data = await resolveAddress(address);
+        this._resolvedData = data;
+        return data;
+      },
+      args: () => [this.address]
+    });
+  }
+  _extractBaseAddress(addressOrComposite) {
+    return addressOrComposite.split("-")[0];
+  }
+  _extractTokenId(addressOrComposite) {
+    const parts = addressOrComposite.split("-");
+    return parts.length > 1 ? parts[1] : void 0;
+  }
+  _handleClose() {
+    this.dispatchEvent(new CustomEvent("close"));
+  }
+  _copyToClipboard(text) {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(text);
+      this.dispatchEvent(new CustomEvent("copied", { detail: { text } }));
+    }
+  }
+  _renderHeader() {
+    const name = this._resolvedData?.lsp4TokenName || this._resolvedData?.name || "Digital Asset";
+    return html13`
+      <div class="header">
+        ${when2(
+      this.address,
+      () => html13`
+            <icon-view
+              address="${this.address}"
+              size="large"
+              class="header-icon"
+            ></icon-view>
+          `,
+      () => html13`
+            <div class="loading-placeholder">🪙</div>
+          `
+    )}
+        <div class="header-title">${name}</div>
+      </div>
+    `;
+  }
+  _renderContractAddress() {
+    const contractAddress = this._extractBaseAddress(this.address);
+    if (!contractAddress) return "";
+    return html13`
+      <div class="section">
+        <div class="section-title">
+          📄 Contract Address
+          <button
+            class="copy-button"
+            @click=${() => this._copyToClipboard(contractAddress)}
+            title="Copy to clipboard"
+          >
+            📋
+          </button>
+        </div>
+        <div class="section-content">
+          <address-view
+            .address=${contractAddress}
+            format="truncated"
+          ></address-view>
+        </div>
+      </div>
+    `;
+  }
+  _renderTokenId() {
+    const tokenId = this._extractTokenId(this.address);
+    if (!tokenId) return "";
+    const formattedTokenId = this._resolvedData?.formattedTokenId;
+    const displayTokenId = formattedTokenId ? `#${formattedTokenId}` : tokenId || "";
+    return html13`
+      <div class="section">
+        <div class="section-title">
+          🏷️ Token ID
+          <button
+            class="copy-button"
+            @click=${() => this._copyToClipboard(tokenId)}
+            title="Copy to clipboard"
+          >
+            📋
+          </button>
+        </div>
+        <div class="section-content">${displayTokenId}</div>
+      </div>
+    `;
+  }
+  _renderDescription() {
+    const description = this._resolvedData?.description;
+    if (!description) return "";
+    return html13`
+      <div class="section">
+        <div class="section-title">📝 Description</div>
+        <div class="section-content description">${description}</div>
+      </div>
+    `;
+  }
+  _renderLinks() {
+    const links = this._resolvedData?.links || [];
+    if (!links.length) return "";
+    return html13`
+      <div class="section">
+        <div class="section-title">🔗 Links</div>
+        <ul class="links-list">
+          ${repeat2(
+      links,
+      (link) => link.url,
+      (link) => html13`
+              <li class="link-item">
+                <a
+                  class="external-link"
+                  href="${link.url}"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  ${link.title || link.url}
+                  <span>↗</span>
+                </a>
+              </li>
+            `
+    )}
+        </ul>
+      </div>
+    `;
+  }
+  _renderImages() {
+    const images = this._resolvedData?.images || [];
+    if (!images.length) return "";
+    return html13`
+      <div class="section">
+        <div class="section-title">🖼️ Images</div>
+        <image-list
+          address=${this.address}
+          image-hint="images"
+          size="medium"
+        ></image-list>
+      </div>
+    `;
+  }
+  _renderAssets() {
+    const assets = this._resolvedData?.assets || [];
+    if (!assets.length) return "";
+    return html13`
+      <div class="section">
+        <div class="section-title">📦 Assets</div>
+        <image-list
+          address=${this.address}
+          image-hint="assets"
+          size="medium"
+        ></image-list>
+      </div>
+    `;
+  }
+  _handleBackdropClick(e) {
+    if (e.target === e.currentTarget) {
+      this._handleClose();
+    }
+  }
+  render() {
+    const panelClasses = {
+      panel: true,
+      open: this.open
+    };
+    return html13`
+      <div class=${classMap(panelClasses)} @click=${this._handleBackdropClick}>
+        <div class="panel-content" @click=${(e) => e.stopPropagation()}>
+          <button class="close-button" @click=${this._handleClose}>×</button>
+
+          ${this._renderHeader()}
+          ${this._renderContractAddress()}
+          ${this._renderTokenId()}
+          ${this._renderDescription()}
+          ${this._renderLinks()}
+          ${this._renderImages()}
+          ${this._renderAssets()}
+        </div>
+      </div>
+    `;
+  }
+};
+InfoPanel.styles = css4`
+    :host {
+      display: block;
+      position: relative;
+      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    .panel {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+    }
+
+    .panel.open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .panel-content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100%;
+      max-width: 400px;
+      height: 100%;
+      background: white;
+      transform: translateX(100%);
+      transition: transform 0.3s ease;
+      overflow-y: auto;
+      padding: 24px;
+      box-sizing: border-box;
+    }
+
+    .panel.open .panel-content {
+      transform: translateX(0);
+    }
+
+    .close-button {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      color: #6b7280;
+      padding: 4px;
+      border-radius: 4px;
+      transition: background-color 0.2s;
+    }
+
+    .close-button:hover {
+      background-color: #f3f4f6;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 24px;
+      padding-top: 20px;
+    }
+
+    .header-icon {
+      margin-right: 12px;
+    }
+
+    .header-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #111827;
+      text-align: center;
+    }
+
+    .section {
+      margin-bottom: 20px;
+      padding: 16px;
+      background: #f9fafb;
+      border-radius: 12px;
+      border: 1px solid #e5e7eb;
+    }
+
+    .section-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #374151;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .section-content {
+      font-size: 14px;
+      color: #6b7280;
+      word-break: break-all;
+    }
+
+    .copy-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      color: #6b7280;
+      transition: background-color 0.2s;
+    }
+
+    .copy-button:hover {
+      background-color: #e5e7eb;
+    }
+
+    .links-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .link-item {
+      margin-bottom: 8px;
+    }
+
+    .link-item:last-child {
+      margin-bottom: 0;
+    }
+
+    .external-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      color: #3b82f6;
+      text-decoration: none;
+      font-size: 14px;
+      padding: 6px 12px;
+      border-radius: 6px;
+      transition: background-color 0.2s;
+    }
+
+    .external-link:hover {
+      background-color: #eff6ff;
+    }
+
+    .description {
+      line-height: 1.6;
+      color: #374151;
+    }
+
+    .loading-placeholder {
+      width: 96px;
+      height: 96px;
+      background: #f3f4f6;
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #9ca3af;
+      font-size: 32px;
+    }
+
+    @media (max-width: 640px) {
+      .panel-content {
+        max-width: 100%;
+      }
+    }
+  `;
+__decorateClass([
+  property13({ type: String })
+], InfoPanel.prototype, "address", 2);
+__decorateClass([
+  property13({ type: Boolean, attribute: "open" })
+], InfoPanel.prototype, "open", 2);
+__decorateClass([
+  property13({ type: String })
+], InfoPanel.prototype, "standard", 2);
+__decorateClass([
+  property13({ type: String })
+], InfoPanel.prototype, "type", 2);
+__decorateClass([
+  state10()
+], InfoPanel.prototype, "_isAnimating", 2);
+__decorateClass([
+  state10()
+], InfoPanel.prototype, "_resolvedData", 2);
+InfoPanel = __decorateClass([
+  safeCustomElement("info-panel")
+], InfoPanel);
+
+// src/components/asset-card.ts
+import { html as html14 } from "lit";
+import { property as property14, state as state11 } from "lit/decorators.js";
+import { repeat as repeat3 } from "lit/directives/repeat.js";
+import { when as when3 } from "lit/directives/when.js";
+import "@lukso/web-components";
+import { Task as Task7 } from "@lit/task";
+import {
+  useAddressResolver as useAddressResolver7
+} from "@lukso/transaction-view-headless";
+function formatUnits2(value, decimals = 18) {
+  const divisor = 10n ** BigInt(decimals);
+  const quotient = value / divisor;
+  const remainder = value % divisor;
+  if (remainder === 0n) {
+    return quotient.toString();
+  }
+  const remainderStr = remainder.toString().padStart(decimals, "0");
+  const trimmed = remainderStr.replace(/0+$/, "");
+  return `${quotient}.${trimmed}`;
+}
+var AssetCard = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.functionIcon = "code-outline";
+    this.size = "medium";
+    this.showInfoButton = true;
+    this.showCreator = true;
+    this.displayDetails = false;
+    this._imageError = false;
+    // Composables
+    this.addressResolver = useAddressResolver7();
+    this._resolutionTask = new Task7(this, {
+      task: async ([address]) => {
+        if (!address) return null;
+        const { resolveAddress } = this.addressResolver;
+        const data = await resolveAddress(address);
+        this._resolvedData = data;
+        return data;
+      },
+      args: () => [this.address]
+    });
+  }
+  _handleImageError() {
+    this._imageError = true;
+  }
+  _handleInfoClick() {
+    this.displayDetails = !this.displayDetails;
+  }
+  _extractBaseAddress(addressOrComposite) {
+    return addressOrComposite.split("-")[0];
+  }
+  _extractTokenId(addressOrComposite) {
+    const parts = addressOrComposite.split("-");
+    return parts.length > 1 ? parts[1] : void 0;
+  }
+  _copyToClipboard(text) {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(text);
+      this.dispatchEvent(new CustomEvent("copied", { detail: { text } }));
+    }
+  }
+  _renderAddressSection() {
+    const data = this._resolutionTask.value;
+    if (!data) return "";
+    return html14`
+      <div class="flex items-center justify-between cursor-pointer">
+        ${when3(
+      data.lsp4TokenSymbol,
+      () => html14`
+             <address-view
+              address=${this._extractBaseAddress(data.address)}
+              size="medium"
+              max-width=${100}
+              .showIdenticon=${false}
+              ?is-card-view=${false}
+              ?show-copy-button=${false}
+              address-color="neutral-60"
+            ></address-view>
+          `
+    )}
+        ${when3(
+      this.showInfoButton,
+      () => html14`
+          <lukso-icon name="information" size="small" @click=${this._handleInfoClick}></lukso-icon>
+          `
+    )}
+      </div>
+    `;
+  }
+  _renderCreatorSection() {
+    const owner = this._resolvedData?.owner_id;
+    const creators = this._resolvedData?.lsp4Creators || [];
+    const resolvedCreator = owner || creators[0]?.profile_id;
+    if (!resolvedCreator) return "";
+    return html14`
+        <div class="gap-2">
+          <div class="text-neutral-60 text-[12px] font-normal">Created by</div>
+          <div class="flex justify-center flex-col gap-1 text-[12px] font-bold font-mono">
+            <icon-view
+              address=${owner}
+              size="small"
+              name-position="beside"
+            ></icon-view>
+          </div>
+        </div>
+      `;
+  }
+  _renderContractAddress() {
+    const data = this._resolutionTask.value;
+    return html14`
+        <div class="section">
+           ${when3(
+      data.lsp4TokenSymbol,
+      () => html14`
+             <address-view
+              address=${data.address}
+              size="medium"
+              label=${data.lsp4TokenName}
+              max-width=${100}
+              .showIdenticon=${false}
+              ?is-card-view=${true}
+              ?show-copy-button=${true}
+              address-color="neutral-60"
+            ></address-view>
+          `
+    )}
+        </div>
+      `;
+  }
+  _renderAssetLongName() {
+    const data = this._resolutionTask.value;
+    return html14`
+          ${when3(
+      data?.lsp4TokenName,
+      () => html14`
+              <value-view 
+                ?is-card-view=${true}
+                ?show-copy-button=${true}
+                value=${data.lsp4TokenName}
+                label="Token Name"
+              ></value-view>
+            `
+    )}
+        `;
+  }
+  _renderAssetSymbol() {
+    const data = this._resolutionTask.value;
+    return html14`
+          ${when3(
+      data?.lsp4TokenSymbol,
+      () => html14`
+              <value-view 
+                ?is-card-view=${true}
+                ?show-copy-button=${true}
+                value=${data.lsp4TokenSymbol}
+                label="Symbol"
+              ></value-view>
+            `
+    )}
+        `;
+  }
+  get displayedTokenId() {
+    const formattedTokenId = this._resolvedData?.formattedTokenId;
+    const displayTokenId = formattedTokenId ? `${formattedTokenId}` : "";
+    if (displayTokenId) return displayTokenId;
+    return this.tokenId && !this._resolvedData?.isCollection ? `${parseInt(this.tokenId, 16)}` : void 0;
+  }
+  _renderTokenId() {
+    const displayTokenId = this.displayedTokenId;
+    if (!displayTokenId) return "";
+    return html14`
+        <value-view 
+          ?is-card-view=${true}
+          ?show-copy-button=${true}
+          value=${displayTokenId}
+          label="Token ID"
+        ></value-view>
+      `;
+  }
+  _renderDescription() {
+    const description = this._resolvedData?.description;
+    if (!description) return "";
+    return html14`
+        <value-view 
+          ?is-card-view=${true}
+          ?show-copy-button=${true}
+          value=${description}
+          label="Description"
+        >
+        </value-view>
+      `;
+  }
+  _renderLinks() {
+    const links = this._resolvedData?.links || [];
+    if (!links.length) return "";
+    return html14`
+        <div class="section">
+          <div class="section-title">🔗 Links</div>
+          <ul class="links-list">
+            ${repeat3(
+      links,
+      (link) => link.url,
+      (link) => html14`
+                <li class="link-item">
+                  <a
+                    class="external-link"
+                    href="${link.url}"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    ${link.title || link.url}
+                    <span>↗</span>
+                  </a>
+                </li>
+              `
+    )}
+          </ul>
+        </div>
+      `;
+  }
+  _renderImages() {
+    const images = this._resolvedData?.images || [];
+    if (images.length === 0) return "";
+    return html14`
+          <image-list
+            address=${this.address}
+            image-hint="images"
+            size="medium"
+            ?is-card-view=${true}
+          ></image-list>
+      `;
+  }
+  _renderAssets() {
+    const assets = this._resolvedData?.assets || [];
+    if (assets.length === 0) return "";
+    return html14`
+        <div class="section">
+          <div class="section-title">Assets</div>
+          <image-list
+            address=${this.address}
+            image-hint="assets"
+            size="medium"
+          ></image-list>
+        </div>
+      `;
+  }
+  _renderStandards() {
+    return html14`
+        <div class="flex justify-between items-center my-4">
+          <function-name-view 
+          label=${this.functionName}
+          size="small"
+          icon=${this.functionIcon ? this.functionIcon : "code-outline"}
+          ></function-name-view>
+          <function-name-view label=${this._resolvedData?.standard} size="small"></function-name-view>
+        </div>
+      `;
+  }
+  _renderTokenDetails() {
+    if (!this.displayDetails) return "";
+    return html14`
+      <div class="p-4 mt-6 flex flex-col border border-neutral-90 rounded-xl gap-4">
+          ${this._renderContractAddress()}
+          ${this._renderAssetLongName()}
+          ${this._renderAssetSymbol()}
+          ${this._renderTokenId()}
+          ${this._renderDescription()}
+          ${this._renderLinks()}
+          ${this._renderImages()}
+          ${this._renderAssets()}
+      </div>
+    `;
+  }
+  renderFormattedTokenIdBadge() {
+    if (!this.displayedTokenId) return "";
+    return html14`
+      <span class="absolute top-3 left-3 z-10 text-[12px] text-neutral-20 font-mono font-bold bg-neutral-98 px-2 rounded-full">#${this.displayedTokenId}</span>
+    `;
+  }
+  render() {
+    return html14`
+    <div >
+      ${this._renderStandards()}
+    <div class="mt-6 flex-col">
+      <div class="flex items-center justify-center gap-4">
+        <div class="flex justify-end w-[48%]">
+          <div class="border relative border-neutral-90 rounded-xl">
+          ${this.renderFormattedTokenIdBadge()}
+            <div class="p-2 relative">
+              <icon-view
+                address="${this.address}"
+                size="2x-large"
+                .showName=${false}
+              ></icon-view>
+            </div>
+            <div style="height: 1px;" class="bg-neutral-90 w-full"></div>
+            <div class="px-2">
+              ${this._renderAddressSection()}
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-1 w-[51%]">
+          <div class="text-[14px] font-bold text-neutral-20">
+            ${this._resolvedData?.lsp4TokenName || "UNKNOWN"}
+          </div>
+          <div class="text-[17px] font-semibold text-neutral-20">
+            ${when3(
+      this.amount,
+      () => html14`
+                <span class="">${formatUnits2(BigInt(this.amount), this._resolvedData?.decimals)}</span>
+                <span class="ml-1 text-neutral-60 max-w-[60px] whitespace-nowrap overflow-hidden text-ellipsis text-[14px] font-semibold">${this._resolvedData?.lsp4TokenSymbol || ""}</span>
+              `,
+      () => html14`${this._resolvedData?.lsp4TokenSymbol || ""}`
+    )}
+          </div>
+          
+           ${when3(
+      this.displayedTokenId,
+      () => html14`<div class="text-[14px] font-medium text-neutral-60"><span class="font-bold">#${this.displayedTokenId}</span></div>`
+    )}
+          <div class="mt-4">
+          ${when3(this.showCreator, () => this._renderCreatorSection())}
+          </div>
+        </div>
+      </div>
+      <div class="border-neutral-90 pt-2">
+        ${this._renderTokenDetails()}
+      </div>
+    </div>
+    `;
+  }
+};
+__decorateClass([
+  property14()
+], AssetCard.prototype, "address", 2);
+__decorateClass([
+  property14({ type: String, attribute: "token-id" })
+], AssetCard.prototype, "tokenId", 2);
+__decorateClass([
+  property14({ type: String })
+], AssetCard.prototype, "amount", 2);
+__decorateClass([
+  property14({ type: String, attribute: "function-name" })
+], AssetCard.prototype, "functionName", 2);
+__decorateClass([
+  property14({ type: String, attribute: "standard" })
+], AssetCard.prototype, "standard", 2);
+__decorateClass([
+  property14({ type: String, attribute: "function-icon" })
+], AssetCard.prototype, "functionIcon", 2);
+__decorateClass([
+  property14({ type: String })
+], AssetCard.prototype, "size", 2);
+__decorateClass([
+  property14({ type: Boolean, attribute: "show-info-button" })
+], AssetCard.prototype, "showInfoButton", 2);
+__decorateClass([
+  property14({ type: Boolean, attribute: "show-creator" })
+], AssetCard.prototype, "showCreator", 2);
+__decorateClass([
+  state11()
+], AssetCard.prototype, "displayDetails", 2);
+__decorateClass([
+  state11()
+], AssetCard.prototype, "_resolvedData", 2);
+__decorateClass([
+  state11()
+], AssetCard.prototype, "_imageError", 2);
+AssetCard = __decorateClass([
+  safeCustomElement("asset-card")
+], AssetCard);
+
+// src/components/description-view.ts
+import { css as css5, html as html15, LitElement as LitElement4 } from "lit";
+import { property as property15 } from "lit/decorators.js";
+import { repeat as repeat4 } from "lit/directives/repeat.js";
+import { when as when4 } from "lit/directives/when.js";
+var DescriptionView = class extends LitElement4 {
+  constructor() {
+    super(...arguments);
+    this.data = {};
+    this.variant = "default";
+  }
+  _copyToClipboard(text) {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(text);
+      this.dispatchEvent(
+        new CustomEvent("copied", {
+          detail: { text }
+        })
+      );
+    }
+  }
+  _handleItemClick(item) {
+    if (item.link) {
+      window.open(item.link, "_blank", "noopener,noreferrer");
+    }
+    this.dispatchEvent(
+      new CustomEvent("item-click", {
+        detail: { item }
+      })
+    );
+  }
+  _renderHeader() {
+    if (!this.data.title && !this.data.description && !this.data.type) return "";
+    return html15`
+      <div class="header">
+        ${when4(
+      this.data.title,
+      () => html15`
+            <h2 class="title">
+              ${this.data.title}
+              ${when4(
+        this.data.type,
+        () => html15`
+                  <span class="type-badge ${this.data.type}">
+                    ${this.data.type}
+                  </span>
+                `
+      )}
+            </h2>
+          `
+    )}
+        
+        ${when4(
+      this.data.description,
+      () => html15`
+            <p class="description">${this.data.description}</p>
+          `
+    )}
+      </div>
+    `;
+  }
+  _renderItems() {
+    const items = [];
+    if (this.data.address) {
+      const [contractAddress, tokenId] = this.data.address.split("-");
+      items.push({
+        label: "Contract Address",
+        value: contractAddress,
+        icon: "\u{1F4C4}",
+        copyable: true
+      });
+      if (tokenId) {
+        items.push({
+          label: "Token ID",
+          value: `#${tokenId}`,
+          subtitle: tokenId,
+          icon: "\u{1F3F7}\uFE0F",
+          copyable: true
+        });
+      }
+    }
+    if (this.data.value) {
+      items.push({
+        label: "Amount",
+        value: this.data.value.toString(),
+        icon: "\u{1F4B0}",
+        highlighted: true
+      });
+    }
+    if (this.data.transactionInfo) {
+      const txInfo = this.data.transactionInfo;
+      if (txInfo.hash) {
+        items.push({
+          label: "Transaction Hash",
+          value: txInfo.hash,
+          icon: "\u{1F517}",
+          copyable: true
+        });
+      }
+      if (txInfo.blockNumber) {
+        items.push({
+          label: "Block Number",
+          value: txInfo.blockNumber.toString(),
+          icon: "\u{1F9F1}"
+        });
+      }
+      if (txInfo.status) {
+        items.push({
+          label: "Status",
+          value: txInfo.status.charAt(0).toUpperCase() + txInfo.status.slice(1),
+          icon: txInfo.status === "success" ? "\u2705" : txInfo.status === "failed" ? "\u274C" : "\u23F3",
+          highlighted: txInfo.status !== "success"
+        });
+      }
+    }
+    if (this.data.enhancedInfo) {
+      const info = this.data.enhancedInfo;
+      if (info.name) {
+        items.push({
+          label: "Asset Name",
+          value: info.name,
+          icon: "\u{1F3F7}\uFE0F"
+        });
+      }
+      if (info.standard) {
+        items.push({
+          label: "Standard",
+          value: info.standard,
+          icon: "\u{1F4CB}"
+        });
+      }
+    }
+    if (this.data.customItems?.length) {
+      items.push(...this.data.customItems);
+    }
+    if (!items.length) return "";
+    return html15`
+      <div class="items-list">
+        ${repeat4(
+      items,
+      (item) => `${item.label}-${item.value}`,
+      (item) => html15`
+            <div
+              class="description-item ${item.highlighted ? "highlighted" : ""} ${item.link ? "clickable" : ""}"
+              @click=${item.link ? () => this._handleItemClick(item) : void 0}
+            >
+              <div class="item-label">
+                ${when4(
+        item.icon,
+        () => html15`<span class="item-icon">${item.icon}</span>`
+      )}
+                ${item.label}
+              </div>
+              
+              <div class="item-value-section">
+                <div class="item-value">
+                  ${item.link ? html15`<a class="external-link" href="${item.link}" target="_blank" rel="noopener noreferrer">${item.value}</a>` : item.value}
+                </div>
+                ${when4(
+        item.subtitle,
+        () => html15`<div class="item-subtitle">${item.subtitle}</div>`
+      )}
+              </div>
+              
+              <div class="item-actions">
+                ${when4(
+        item.copyable,
+        () => html15`
+                    <button
+                      class="copy-button"
+                      @click=${(e) => {
+          e.stopPropagation();
+          this._copyToClipboard(item.value);
+        }}
+                      title="Copy to clipboard"
+                    >
+                      📋
+                    </button>
+                  `
+      )}
+              </div>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  render() {
+    if (this.data.loading) {
+      return html15`
+        <div class="description-container">
+          <div class="loading-state">
+            <div class="loading-spinner">⏳</div>
+            <div class="loading-text">Loading details...</div>
+          </div>
+        </div>
+      `;
+    }
+    return html15`
+      <div class="${this.variant} description-view">
+        <div class="description-container">
+          ${this._renderHeader()}
+          ${this._renderItems()}
+        </div>
+      </div>
+    `;
+  }
+};
+DescriptionView.styles = css5`
+    :host {
+      display: block;
+      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    .description-container {
+      background: white;
+      border-radius: 12px;
+      padding: 16px;
+      border: 1px solid #e5e7eb;
+    }
+
+    .compact .description-container {
+      padding: 12px;
+      border-radius: 8px;
+    }
+
+    .detailed .description-container {
+      padding: 20px;
+      border-radius: 16px;
+    }
+
+    .header {
+      margin-bottom: 16px;
+    }
+
+    .compact .header {
+      margin-bottom: 12px;
+    }
+
+    .detailed .header {
+      margin-bottom: 20px;
+    }
+
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #111827;
+      margin: 0 0 8px 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .compact .title {
+      font-size: 14px;
+      margin-bottom: 6px;
+    }
+
+    .detailed .title {
+      font-size: 18px;
+      margin-bottom: 12px;
+    }
+
+    .type-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 8px;
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .type-badge.transfer {
+      background: #dbeafe;
+      color: #1d4ed8;
+    }
+
+    .type-badge.mint {
+      background: #d1fae5;
+      color: #059669;
+    }
+
+    .type-badge.burn {
+      background: #fee2e2;
+      color: #dc2626;
+    }
+
+    .type-badge.approve {
+      background: #fef3c7;
+      color: #d97706;
+    }
+
+    .type-badge.execute {
+      background: #e0e7ff;
+      color: #4338ca;
+    }
+
+    .type-badge.deploy {
+      background: #f3e8ff;
+      color: #7c3aed;
+    }
+
+    .description {
+      font-size: 14px;
+      line-height: 1.5;
+      color: #6b7280;
+      margin: 0;
+    }
+
+    .compact .description {
+      font-size: 13px;
+    }
+
+    .detailed .description {
+      font-size: 15px;
+      line-height: 1.6;
+    }
+
+    .items-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-top: 16px;
+    }
+
+    .compact .items-list {
+      gap: 8px;
+      margin-top: 12px;
+    }
+
+    .detailed .items-list {
+      gap: 16px;
+      margin-top: 20px;
+    }
+
+    .description-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 12px;
+      background: #f9fafb;
+      border-radius: 8px;
+      border: 1px solid #e5e7eb;
+      transition: all 0.2s ease;
+    }
+
+    .compact .description-item {
+      padding: 8px;
+      border-radius: 6px;
+    }
+
+    .detailed .description-item {
+      padding: 16px;
+      border-radius: 12px;
+    }
+
+    .description-item.highlighted {
+      background: #eff6ff;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
+    }
+
+    .description-item.clickable {
+      cursor: pointer;
+    }
+
+    .description-item.clickable:hover {
+      background: #f3f4f6;
+      border-color: #d1d5db;
+    }
+
+    .description-item.highlighted.clickable:hover {
+      background: #dbeafe;
+    }
+
+    .item-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      color: #374151;
+      flex-shrink: 0;
+      min-width: 0;
+    }
+
+    .compact .item-label {
+      font-size: 12px;
+      gap: 6px;
+    }
+
+    .detailed .item-label {
+      font-size: 14px;
+    }
+
+    .item-icon {
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    .item-value-section {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 4px;
+      min-width: 0;
+      flex: 1;
+      margin-left: 12px;
+    }
+
+    .item-value {
+      font-size: 14px;
+      font-weight: 500;
+      color: #111827;
+      word-break: break-all;
+      text-align: right;
+    }
+
+    .compact .item-value {
+      font-size: 13px;
+    }
+
+    .detailed .item-value {
+      font-size: 15px;
+    }
+
+    .item-subtitle {
+      font-size: 12px;
+      color: #6b7280;
+      text-align: right;
+    }
+
+    .compact .item-subtitle {
+      font-size: 11px;
+    }
+
+    .item-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-left: 8px;
+    }
+
+    .copy-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      color: #6b7280;
+      transition: all 0.2s ease;
+      font-size: 14px;
+    }
+
+    .copy-button:hover {
+      background-color: #e5e7eb;
+      color: #374151;
+    }
+
+    .external-link {
+      color: #3b82f6;
+      text-decoration: none;
+      font-size: 14px;
+    }
+
+    .external-link:hover {
+      text-decoration: underline;
+    }
+
+    .loading-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px 20px;
+      color: #6b7280;
+    }
+
+    .loading-spinner {
+      font-size: 24px;
+      margin-bottom: 12px;
+    }
+
+    .loading-text {
+      font-size: 14px;
+    }
+  `;
+__decorateClass([
+  property15({ type: Object })
+], DescriptionView.prototype, "data", 2);
+__decorateClass([
+  property15({ type: String })
+], DescriptionView.prototype, "variant", 2);
+DescriptionView = __decorateClass([
+  safeCustomElement("description-view")
+], DescriptionView);
+
+// src/components/universal-token-view.ts
+import { css as css6, html as html16, LitElement as LitElement5 } from "lit";
+import { property as property16, state as state12 } from "lit/decorators.js";
+import { when as when5 } from "lit/directives/when.js";
+var UniversalTokenView = class extends LitElement5 {
+  constructor() {
+    super(...arguments);
+    this.data = {};
+    this._infoPanelOpen = false;
+  }
+  _handleInfoPanelToggle() {
+    this._infoPanelOpen = !this._infoPanelOpen;
+  }
+  _handleInfoPanelClose() {
+    this._infoPanelOpen = false;
+  }
+  _buildAssetCardData() {
+    const [contractAddress, tokenId] = (this.data.address || "").split("-");
+    return {
+      name: this.data.enhancedInfo?.name,
+      symbol: this.data.enhancedInfo?.symbol || this.data.enhancedInfo?.lsp4TokenSymbol,
+      icon: this.data.enhancedInfo?.icon || this.data.enhancedInfo?.images?.[0]?.url,
+      address: contractAddress,
+      tokenId,
+      formattedTokenId: tokenId ? `${parseInt(tokenId, 16)}` : void 0,
+      amount: this.data.value?.toString(),
+      decimals: this.data.enhancedInfo?.decimals,
+      loadingImages: this.data.loading?.asset,
+      creator: this.data.enhancedInfo?.creator
+    };
+  }
+  _renderLoadingState() {
+    return html16`
+      <div class="loading-state">
+        <div class="loading-spinner">⏳</div>
+        <div class="loading-text">Loading transaction details...</div>
+      </div>
+    `;
+  }
+  _renderErrorState(message) {
+    return html16`
+      <div class="error-state">
+        <div class="error-icon">❌</div>
+        <div class="error-title">Error Loading Transaction</div>
+        <div class="error-message">${message}</div>
+      </div>
+    `;
+  }
+  render() {
+    const isLoading = this.data.loading?.transaction || this.data.loading?.metadata && !this.data.enhancedInfo || this.data.loading?.asset && !this.data.address;
+    if (isLoading) {
+      return this._renderLoadingState();
+    }
+    if (!this.data.address && !this.data.enhancedInfo && !this.data.transaction) {
+      return this._renderErrorState("No transaction data provided");
+    }
+    return html16`
+      <div class="universal-view">
+        <!-- Title wrapper with title and LSP tag - exact match -->
+        <div class="title-wrapper">
+          <div class="title-section">
+            ${when5(
+      this.data.icon,
+      () => html16`
+                <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M7 16l-4-4 4-4M17 8l4 4-4 4" />
+                </svg>
+              `
+    )}
+            ${this.data.title || "Transaction"}
+          </div>
+          ${when5(
+      this.data.standard,
+      () => html16`<div class="lsp-tag">${this.data.standard}</div>`
+    )}
+        </div>
+
+        <!-- AssetCard replaces DigitalAssetInfo - exact same functionality -->
+        <asset-card
+          .data=${this._buildAssetCardData()}
+          size="medium"
+          ?show-info-button=${true}
+          @info-click=${this._handleInfoPanelToggle}
+        ></asset-card>
+
+        <!-- InfoPanel replaces BackPanelAsset with class="mt-4" spacing -->
+        <info-panel
+          class="info-panel"
+          address=${this.data.address || ""}
+          ?open=${this._infoPanelOpen}
+          standard=${this.data.standard || this.data.enhancedInfo?.standard || ""}
+          type=${this.data.type || "transfer"}
+          @close=${this._handleInfoPanelClose}
+        ></info-panel>
+      </div>
+    `;
+  }
+};
+UniversalTokenView.styles = css6`
+    :host {
+      display: block;
+      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    /* Match the original LSP7Transfer.vue structure exactly */
+    .universal-view {
+      padding: 16px; /* matches p-4 in Tailwind */
+    }
+
+    /* Title wrapper - matches original layout */
+    .title-wrapper {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    /* Title section with icon - replicates Title.vue */
+    .title-section {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--neutral-20, #374151);
+    }
+
+    .title-icon {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      margin-right: 4px;
+    }
+
+    /* LSP tag - matches original styling exactly */
+    .lsp-tag {
+      background: #eedde4;
+      border-radius: 8px;
+      height: 28px;
+      padding: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 500;
+      color: #374151;
+    }
+
+    /* Info panel spacing - matches mt-4 */
+    .info-panel {
+      margin-top: 16px;
+    }
+
+    .loading-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      color: #6b7280;
+    }
+
+    .loading-spinner {
+      font-size: 32px;
+      margin-bottom: 16px;
+      animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    .loading-text {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .error-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      color: #dc2626;
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 12px;
+      margin: 20px;
+    }
+
+    .error-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+    }
+
+    .error-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .error-message {
+      font-size: 14px;
+      text-align: center;
+      line-height: 1.4;
+    }
+  `;
+__decorateClass([
+  property16({ type: Object })
+], UniversalTokenView.prototype, "data", 2);
+__decorateClass([
+  state12()
+], UniversalTokenView.prototype, "_infoPanelOpen", 2);
+UniversalTokenView = __decorateClass([
+  safeCustomElement("universal-token-view")
+], UniversalTokenView);
+
+// src/components/contract-card.ts
+import { Task as Task8 } from "@lit/task";
+import {
+  useAddressResolver as useAddressResolver8,
+  useImageLoader as useImageLoader4
+} from "@lukso/transaction-view-headless";
+import { css as css7, html as html17, LitElement as LitElement6 } from "lit";
+import { property as property17, state as state13 } from "lit/decorators.js";
+var ContractCard = class extends LitElement6 {
+  constructor() {
+    super(...arguments);
+    this.variant = "basic";
+    this.borderRadius = "medium";
+    this.shadow = "large";
+    this.isHoverable = false;
+    this.hasOverlay = false;
+    this.customClass = "";
+    this.headerClass = "";
+    this._resolutionTask = new Task8(this, {
+      task: async ([address, resolved]) => {
+        if (resolved) {
+          this._resolvedData = resolved;
+          return resolved;
+        }
+        const { resolveAddress } = useAddressResolver8();
+        const baseAddress = this._extractBaseAddress(address);
+        const data = await resolveAddress(baseAddress);
+        this._resolvedData = data;
+        return data;
+      },
+      args: () => [this.address, this.resolved]
+    });
+    this._profileImageTask = new Task8(this, {
+      task: async ([resolved]) => {
+        const { loadProfileImage } = useImageLoader4();
+        const data = resolved || this._resolvedData;
+        if (!data) return null;
+        const image = await loadProfileImage(data, {
+          width: 256,
+          height: 256,
+          dpr: window.devicePixelRatio || 1
+        });
+        if (image?.src) {
+          this._profileImageUrl = image.src;
+        }
+        return image;
+      },
+      args: () => [this._resolvedData]
+    });
+    this._backgroundImageTask = new Task8(this, {
+      task: async ([resolved]) => {
+        const { loadBackgroundImage } = useImageLoader4();
+        const data = resolved || this._resolvedData;
+        if (!data) return null;
+        const image = await loadBackgroundImage(data, {
+          width: 800,
+          height: 200,
+          dpr: window.devicePixelRatio || 1
+        });
+        if (image?.src) {
+          this._backgroundImageUrl = image.src;
+        }
+        return image;
+      },
+      args: () => [this._resolvedData]
+    });
+  }
+  _extractBaseAddress(addressOrComposite) {
+    return addressOrComposite.split("-")[0];
+  }
+  _handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("address-click", {
+        detail: {
+          address: this.address,
+          resolved: this._resolvedData
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    const baseAddress = this._extractBaseAddress(this.address);
+    const isEoa = !this._resolvedData?.__gqltype;
+    return html17`
+      <lukso-card
+        variant="${this.variant}"
+        border-radius="${this.borderRadius}"
+        shadow="${this.shadow}"
+        ?is-hoverable="${this.isHoverable}"
+        ?has-overlay="${this.hasOverlay}"
+        ?is-eoa="${isEoa}"
+        custom-class="${this.customClass}"
+        header-class="${this.headerClass}"
+        profile-url="${this._profileImageUrl || ""}"
+        background-url="${this._backgroundImageUrl || ""}"
+        profile-address="${baseAddress}"
+        .width="${this.width}"
+        .height="${this.height}"
+        @click="${this._handleClick}"
+      >
+        <!-- Pass through all slots -->
+        <slot name="header" slot="header"></slot>
+        <slot name="content" slot="content"></slot>
+        <slot name="bottom" slot="bottom"></slot>
+      </lukso-card>
+    `;
+  }
+};
+ContractCard.styles = css7`
+    :host {
+      display: block;
+    }
+  `;
+__decorateClass([
+  property17()
+], ContractCard.prototype, "address", 2);
+__decorateClass([
+  property17({ type: Object })
+], ContractCard.prototype, "resolved", 2);
+__decorateClass([
+  property17()
+], ContractCard.prototype, "variant", 2);
+__decorateClass([
+  property17({ attribute: "border-radius" })
+], ContractCard.prototype, "borderRadius", 2);
+__decorateClass([
+  property17()
+], ContractCard.prototype, "shadow", 2);
+__decorateClass([
+  property17({ type: Number })
+], ContractCard.prototype, "width", 2);
+__decorateClass([
+  property17({ type: Number })
+], ContractCard.prototype, "height", 2);
+__decorateClass([
+  property17({ type: Boolean, attribute: "is-hoverable" })
+], ContractCard.prototype, "isHoverable", 2);
+__decorateClass([
+  property17({ type: Boolean, attribute: "has-overlay" })
+], ContractCard.prototype, "hasOverlay", 2);
+__decorateClass([
+  property17({ attribute: "custom-class" })
+], ContractCard.prototype, "customClass", 2);
+__decorateClass([
+  property17({ attribute: "header-class" })
+], ContractCard.prototype, "headerClass", 2);
+__decorateClass([
+  state13()
+], ContractCard.prototype, "_resolvedData", 2);
+__decorateClass([
+  state13()
+], ContractCard.prototype, "_profileImageUrl", 2);
+__decorateClass([
+  state13()
+], ContractCard.prototype, "_backgroundImageUrl", 2);
+ContractCard = __decorateClass([
+  safeCustomElement("contract-card")
+], ContractCard);
+
+// src/components/permissions-block.ts
+import { html as html18, nothing as nothing2 } from "lit";
+import { property as property18 } from "lit/decorators.js";
+var PermissionsBlock = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = "";
+    this.actionIcon = "";
+    this.color = "var(--neutral-60)";
+    this.title = "";
+    this.description = "";
+    this.control = "";
+    this.permissions = [];
+  }
+  render() {
+    return html18`
+			<div
+				class="mb-6 p-4 bg-[var(--neutral-100)] border border-[var(--neutral-90)] rounded-lg"
+			>
+				<div class="flex items-center mb-2">
+					${this.icon ? html18`<lukso-icon
+								name=${this.icon}
+								size="x-small"
+								color=${this.color}
+							></lukso-icon>` : nothing2}
+					<div class="ml-2 heading-inter-14-bold">${this.title}</div>
+				</div>
+
+				${this.description ? html18`<div class="text-[var(--neutral-40)] paragraph-inter-12-regular">
+							${this.description}
+						</div>` : nothing2}
+
+				<div class="h-px w-full bg-[var(--neutral-90)] mt-4"></div>
+
+				<slot></slot>
+
+				${(this.permissions || []).map((p) => this.renderPermission(p))}
+			</div>
+		`;
+  }
+  renderPermission(p) {
+    const nameBase = (p.icon || p.permissionName || "").toLowerCase();
+    const activeIcon = `${nameBase}-activated`;
+    const inactiveIcon = `${nameBase}-inactive`;
+    return html18`
+			<div class="mt-4 grid grid-cols-[40px,1fr,20px] gap-x-2 items-start">
+				<div class="relative w-10 h-10">
+					<svg-icon
+						class="active absolute bottom-0 opacity-0 z-[99] transition-opacity duration-200 ${p.isActive ? "opacity-100" : ""}"
+						name=${activeIcon}
+						width="40"
+						height="40"
+						color=${this.color}
+					></svg-icon>
+					<svg-icon
+						class="inactive absolute bottom-0 ${p.isActive ? "opacity-0" : "opacity-100"}"
+						name=${inactiveIcon}
+						width="40"
+						height="40"
+						color=${this.color}
+					></svg-icon>
+				</div>
+
+				<div>
+					<span class="paragraph-inter-12-semi-bold ">${p.type}</span>
+					<div class="paragraph-inter-12-regular">${p.info}</div>
+				</div>
+
+				${p.isActive ? html18`<lukso-icon
+							name="complete-filled"
+							width="20"
+							height="20"
+							secondary-color="neutral-100"
+              color="green-54"
+							stroke-width="1.5"
+						></lukso-icon>` : html18`<lukso-icon
+							name="cross-outline"
+							width="20"
+							height="20"
+							color="red-65"
+							stroke-width="1.5"
+						></lukso-icon>`}
+			</div>
+		`;
+  }
+};
+__decorateClass([
+  property18({ type: String })
+], PermissionsBlock.prototype, "icon", 2);
+__decorateClass([
+  property18({ type: String, attribute: "action-icon" })
+], PermissionsBlock.prototype, "actionIcon", 2);
+__decorateClass([
+  property18({ type: String })
+], PermissionsBlock.prototype, "color", 2);
+__decorateClass([
+  property18({ type: String })
+], PermissionsBlock.prototype, "title", 2);
+__decorateClass([
+  property18({ type: String })
+], PermissionsBlock.prototype, "description", 2);
+__decorateClass([
+  property18({ type: String })
+], PermissionsBlock.prototype, "control", 2);
+__decorateClass([
+  property18({ type: Array })
+], PermissionsBlock.prototype, "permissions", 2);
+PermissionsBlock = __decorateClass([
+  safeCustomElement("permissions-block")
+], PermissionsBlock);
+
+// src/registry/index.ts
+import {
+  DefaultViewRegistry,
+  getGlobalRegistry,
+  resetGlobalRegistry,
+  setGlobalRegistry
+} from "@lukso/transaction-view-headless";
+
+// src/registry/lit-view-loader.ts
+import { ViewLoadingError } from "@lukso/transaction-view-headless";
+var LitViewLoader = class {
+  constructor() {
+    this.loadedComponents = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Load a component from a view match
+   */
+  async loadFromMatch(match) {
+    if (!match.frameworkConfig) {
+      throw new ViewLoadingError(
+        `No framework config for view "${match.view.id}"`,
+        { type: "custom-element", tagName: "" },
+        {}
+      );
+    }
+    return this.loadComponent(match.frameworkConfig);
+  }
+  /**
+   * Load a component based on framework config
+   */
+  async loadComponent(config) {
+    const { loader, component } = config;
+    if (this.loadedComponents.has(component)) {
+      return this.loadedComponents.get(component);
+    }
+    try {
+      let loadedComponent;
+      switch (loader.type) {
+        case "custom-element":
+          loadedComponent = await this.loadCustomElement(loader.tagName);
+          break;
+        case "dynamic-import":
+          loadedComponent = await this.loadDynamicImport(loader.path);
+          break;
+        case "static-import":
+          loadedComponent = await this.loadStaticImport(loader.path);
+          break;
+        case "custom":
+          loadedComponent = await loader.loader(config);
+          break;
+        default:
+          throw new ViewLoadingError(
+            `Unsupported loader type: ${loader.type}`,
+            loader,
+            config
+          );
+      }
+      this.loadedComponents.set(component, loadedComponent);
+      return loadedComponent;
+    } catch (error) {
+      throw new ViewLoadingError(
+        `Failed to load component "${component}"`,
+        loader,
+        config,
+        error instanceof Error ? error : new Error(String(error))
+      );
+    }
+  }
+  /**
+   * Load a custom element (Web Component)
+   */
+  async loadCustomElement(tagName) {
+    if (customElements.get(tagName)) {
+      return customElements.get(tagName);
+    }
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(
+          new Error(`Custom element "${tagName}" not found after 5s timeout`)
+        );
+      }, 5e3);
+      customElements.whenDefined(tagName).then(() => {
+        clearTimeout(timeout);
+        resolve(customElements.get(tagName));
+      }).catch(reject);
+    });
+  }
+  /**
+   * Load via dynamic import
+   */
+  async loadDynamicImport(path) {
+    if (typeof path === "function") {
+      const module2 = await path();
+      return module2.default || module2;
+    }
+    const module = await import(
+      /* @vite-ignore */
+      path
+    );
+    return module.default || module;
+  }
+  /**
+   * Load via static import (not really possible at runtime, but for completeness)
+   */
+  async loadStaticImport(path) {
+    return this.loadDynamicImport(path);
+  }
+  /**
+   * Create a component instance with data
+   */
+  createInstance(componentClass, data) {
+    const element = new componentClass();
+    Object.keys(data).forEach((key) => {
+      if (key in element) {
+        element[key] = data[key];
+      } else {
+        element.setAttribute(
+          key,
+          typeof data[key] === "object" ? JSON.stringify(data[key]) : String(data[key])
+        );
+      }
+    });
+    return element;
+  }
+  /**
+   * Clear component cache
+   */
+  clearCache() {
+    this.loadedComponents.clear();
+  }
+};
+var globalLitLoader = null;
+function getGlobalLitLoader() {
+  if (!globalLitLoader) {
+    globalLitLoader = new LitViewLoader();
+  }
+  return globalLitLoader;
+}
+function setGlobalLitLoader(loader) {
+  globalLitLoader = loader;
+}
+function resetGlobalLitLoader() {
+  globalLitLoader = null;
+}
+export {
+  AddressDisplay,
+  AddressView,
+  CustomOption,
+  CustomSelect,
+  DefaultViewRegistry,
+  FunctionNameView,
+  GasProviderView,
+  IconView,
+  ImageLoaderController,
+  LitViewLoader,
+  MultiSignalController,
+  NotificationView,
+  ProgressView,
+  ScrollToBottomButton,
+  SignalController,
+  TransactionSignalController,
+  TransactionViewController,
+  UrlView,
+  ValueView,
+  getGlobalLitLoader,
+  getGlobalRegistry,
+  resetGlobalLitLoader,
+  resetGlobalRegistry,
+  setGlobalLitLoader,
+  setGlobalRegistry,
+  useImageLoader3 as useImageLoader,
+  useSignal,
+  useSignals,
+  useTransactionSignal,
+  useTransactionView
+};
+//# sourceMappingURL=index.js.map