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

package/dist/index.cjs

@@ -0,0 +1,4573 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AddressDisplay: () => AddressDisplay,
+  AddressView: () => AddressView,
+  CustomOption: () => CustomOption,
+  CustomSelect: () => CustomSelect,
+  DefaultViewRegistry: () => import_transaction_view_headless12.DefaultViewRegistry,
+  FunctionNameView: () => FunctionNameView,
+  GasProviderView: () => GasProviderView,
+  IconView: () => IconView,
+  ImageLoaderController: () => ImageLoaderController,
+  LitViewLoader: () => LitViewLoader,
+  MultiSignalController: () => MultiSignalController,
+  NotificationView: () => NotificationView,
+  ProgressView: () => ProgressView,
+  ScrollToBottomButton: () => ScrollToBottomButton,
+  SignalController: () => SignalController,
+  TransactionSignalController: () => TransactionSignalController,
+  TransactionViewController: () => TransactionViewController,
+  UrlView: () => UrlView,
+  ValueView: () => ValueView,
+  getGlobalLitLoader: () => getGlobalLitLoader,
+  getGlobalRegistry: () => import_transaction_view_headless12.getGlobalRegistry,
+  resetGlobalLitLoader: () => resetGlobalLitLoader,
+  resetGlobalRegistry: () => import_transaction_view_headless12.resetGlobalRegistry,
+  setGlobalLitLoader: () => setGlobalLitLoader,
+  setGlobalRegistry: () => import_transaction_view_headless12.setGlobalRegistry,
+  useImageLoader: () => useImageLoader3,
+  useSignal: () => useSignal,
+  useSignals: () => useSignals,
+  useTransactionSignal: () => useTransactionSignal,
+  useTransactionView: () => useTransactionView
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/shared/address-display.ts
+var import_task = require("@lit/task");
+var import_transaction_view_headless = require("@lukso/transaction-view-headless");
+var import_lit = require("lit");
+var import_decorators = require("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 import_lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.showCopyButton = false;
+    this.nameOnly = false;
+    this.maxWidth = 200;
+    this.isLoadingImage = false;
+    // Composables
+    this.imageLoader = (0, import_transaction_view_headless.useImageLoader)();
+    this.addressResolver = (0, import_transaction_view_headless.useAddressResolver)();
+    // Task for loading profile image
+    this.imageTask = new import_task.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 import_lit.html`
+      <div class="address-container">
+        ${this.label ? import_lit.html`<div class="label">${this.label}</div>` : ""}
+        
+        <div class="address-display" @click=${this.handleAddressClick}>
+          <!-- Identity prefix (if present) -->
+          ${this.resolved?.__identity ? import_lit.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 ? import_lit.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>
+          ` : import_lit.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 ? import_lit.html`
+            <button 
+              class="copy-button"
+              @click=${this.handleCopy}
+              title="Copy address"
+            >
+              📋
+            </button>
+          ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+AddressDisplay.styles = import_lit.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([
+  (0, import_decorators.property)()
+], AddressDisplay.prototype, "value", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], AddressDisplay.prototype, "address", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Object })
+], AddressDisplay.prototype, "resolved", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], AddressDisplay.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], AddressDisplay.prototype, "label", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, attribute: "show-copy-button" })
+], AddressDisplay.prototype, "showCopyButton", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, attribute: "name-only" })
+], AddressDisplay.prototype, "nameOnly", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number, attribute: "max-width" })
+], AddressDisplay.prototype, "maxWidth", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], AddressDisplay.prototype, "imageData", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], AddressDisplay.prototype, "isLoadingImage", 2);
+AddressDisplay = __decorateClass([
+  safeCustomElement("address-display")
+], AddressDisplay);
+
+// src/shared/address-view.ts
+var import_task2 = require("@lit/task");
+var import_transaction_view_headless2 = require("@lukso/transaction-view-headless");
+var import_ethereum_blockies_base64 = __toESM(require("ethereum-blockies-base64"), 1);
+var import_lit3 = require("lit");
+var import_decorators2 = require("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
+var import_lit2 = require("lit");
+var style = import_lit2.css`
+  ${(0, import_lit2.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 import_lit2.LitElement {
+  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 = (0, import_transaction_view_headless2.useAddressResolver)();
+    // Task for resolving address data
+    this.addressTask = new import_task2.Task(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 = (0, import_ethereum_blockies_base64.default)(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 import_lit3.html`
+      <!-- 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 import_lit3.html`
+      <!-- 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 import_lit3.html`
+      <!-- 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 import_lit3.html`
+      <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 ? import_lit3.html`<div class="inline-flex items-center gap-2 font-semibold text-neutral-20 ${this.getLabelClass()}">${this.label}</div>` : import_lit3.html`<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 import_lit3.html`
+        <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 ? import_lit3.html`<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>` : import_lit3.html``}
+          </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 import_lit3.html`
+      <div class="inline-flex items-center cursor-pointer gap-1" @click=${this.handleClick}>
+        ${this.renderIdenticon()}
+        <!-- Inline Variants -->
+        ${this.renderInlineVariant(displayName)}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  (0, import_decorators2.property)()
+], AddressView.prototype, "address", 2);
+__decorateClass([
+  (0, import_decorators2.property)()
+], AddressView.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, attribute: "name-only" })
+], AddressView.prototype, "nameOnly", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, attribute: "address-only" })
+], AddressView.prototype, "addressOnly", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, attribute: "is-card-view" })
+], AddressView.prototype, "isCardView", 2);
+__decorateClass([
+  (0, import_decorators2.property)()
+], AddressView.prototype, "label", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, attribute: "show-copy-button" })
+], AddressView.prototype, "showCopyButton", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Number, attribute: "max-width" })
+], AddressView.prototype, "maxWidth", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, attribute: "show-identicon" })
+], AddressView.prototype, "showIdenticon", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: String, attribute: "address-color" })
+], AddressView.prototype, "addressColor", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: String, attribute: "name-color" })
+], AddressView.prototype, "nameColor", 2);
+__decorateClass([
+  (0, import_decorators2.state)()
+], AddressView.prototype, "isLoadingAddress", 2);
+__decorateClass([
+  (0, import_decorators2.state)()
+], AddressView.prototype, "identicon", 2);
+AddressView = __decorateClass([
+  safeCustomElement("address-view")
+], AddressView);
+
+// src/shared/custom-select.ts
+var import_lit4 = require("lit");
+var import_decorators3 = require("lit/decorators.js");
+var import_ethereum_blockies_base642 = __toESM(require("ethereum-blockies-base64"), 1);
+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 import_lit4.html`<button class="${base}${hover}${selected}${disabled}" ?disabled=${this.disabled}><slot></slot></button>`;
+  }
+};
+__decorateClass([
+  (0, import_decorators3.property)({ type: Boolean, reflect: true })
+], CustomOption.prototype, "selected", 2);
+__decorateClass([
+  (0, import_decorators3.property)({ type: Boolean, reflect: true })
+], CustomOption.prototype, "disabled", 2);
+__decorateClass([
+  (0, import_decorators3.property)({ 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 = (0, import_ethereum_blockies_base642.default)(address.toLowerCase());
+    return import_lit4.html`
+      <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") ? import_lit4.html`<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>` : import_lit4.html`<url-view url=${option.value} label=${option.label} size="x-small"></url-view>`;
+  }
+  render() {
+    const selectedOption = this.getSelectedOption();
+    return import_lit4.html`
+      <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 ? import_lit4.html`<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) => import_lit4.html`<custom-option .selected=${opt.value === this.value} .disabled=${opt.disabled} @click=${() => this.onOptionClick(opt)}>
+              ${this.renderOptionLabel(opt)}
+              </custom-option>`
+    )}
+            </div>` : ""}
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  (0, import_decorators3.property)()
+], CustomSelect.prototype, "value", 2);
+__decorateClass([
+  (0, import_decorators3.property)({ type: Boolean })
+], CustomSelect.prototype, "open", 2);
+__decorateClass([
+  (0, import_decorators3.property)({ type: Array })
+], CustomSelect.prototype, "options", 2);
+__decorateClass([
+  (0, import_decorators3.property)({ type: String })
+], CustomSelect.prototype, "size", 2);
+CustomSelect = __decorateClass([
+  safeCustomElement("custom-select")
+], CustomSelect);
+
+// src/shared/function-name-view.ts
+var import_lit5 = require("lit");
+var import_decorators4 = require("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 import_lit5.html`
+      <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([
+  (0, import_decorators4.property)()
+], FunctionNameView.prototype, "label", 2);
+__decorateClass([
+  (0, import_decorators4.property)()
+], FunctionNameView.prototype, "icon", 2);
+__decorateClass([
+  (0, import_decorators4.property)()
+], FunctionNameView.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators4.property)({ attribute: "color" })
+], FunctionNameView.prototype, "color", 2);
+FunctionNameView = __decorateClass([
+  safeCustomElement("function-name-view")
+], FunctionNameView);
+
+// src/shared/gas-provider-view.ts
+var import_lit6 = require("lit");
+var import_decorators5 = require("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 import_lit6.html`<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 import_lit6.html`
+      <div class="w-full">
+        <custom-select .value=${selectedValue} .options=${options} @change=${this.onSelectChanged}></custom-select>
+          ${this.selectedGasProvider ? import_lit6.html`<div class="mt-2">
+          ${this.selectedGasProvider?.type === "controller" ? this.renderControllerProgress() : this.renderRelayerProgress()}
+          ${this.selectedGasProvider?.type === "relayer" ? import_lit6.html`<span class="text-[12px] text-neutral-60 mt-2 block">
+          Your total of ${this.relayerAvailable}M resets on ${this.displayRelayerResetDate()}.
+        </span>` : import_lit6.html``}
+        </div>` : import_lit6.html``}
+       
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  (0, import_decorators5.property)({ type: Array, reflect: true })
+], GasProviderView.prototype, "allRelayers", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ type: Number, reflect: true })
+], GasProviderView.prototype, "balance", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ type: Object, attribute: "selected-gas-provider", reflect: true })
+], GasProviderView.prototype, "selectedGasProvider", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ attribute: "controller-address", reflect: true })
+], GasProviderView.prototype, "controllerAddress", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ attribute: "controller-name", reflect: true })
+], GasProviderView.prototype, "controllerName", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ attribute: "symbol", reflect: true })
+], GasProviderView.prototype, "symbol", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ type: Number, reflect: true })
+], GasProviderView.prototype, "decimals", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ type: Number, attribute: "transaction-fee", reflect: true })
+], GasProviderView.prototype, "transactionFee", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ type: Number, attribute: "relayer-available", reflect: true })
+], GasProviderView.prototype, "relayerAvailable", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ type: Number, attribute: "relayer-used", reflect: true })
+], GasProviderView.prototype, "relayerUsed", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ type: Number, attribute: "relayer-to-be-used", reflect: true })
+], GasProviderView.prototype, "relayerToBeUsed", 2);
+__decorateClass([
+  (0, import_decorators5.property)({ attribute: "relayer-reset-date", reflect: true })
+], GasProviderView.prototype, "relayerResetDate", 2);
+GasProviderView = __decorateClass([
+  safeCustomElement("gas-provider-view")
+], GasProviderView);
+
+// src/shared/icon-view.ts
+var import_task3 = require("@lit/task");
+var import_transaction_view_headless3 = require("@lukso/transaction-view-headless");
+var import_lit7 = require("lit");
+var import_decorators6 = require("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 = (0, import_transaction_view_headless3.useImageLoader)();
+    this.addressResolver = (0, import_transaction_view_headless3.useAddressResolver)();
+    // Task for resolving address data
+    this.addressTask = new import_task3.Task(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 import_task3.Task(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 import_lit7.html`
+      <div class="${containerClass === "row" ? "flex items-start gap-1" : "flex flex-col items-center gap-1"}">
+        ${this.label ? import_lit7.html`<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 ? import_lit7.html`
+                <address-view
+                  class="leading-none"
+                  address=${this.address}
+                  .showIdenticon=${this.showLabelIdenticon}
+                  size=${this.size}
+                  max-width=${this.maxWidth}
+                ></address-view>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  (0, import_decorators6.property)()
+], IconView.prototype, "address", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ type: Object })
+], IconView.prototype, "resolved", 2);
+__decorateClass([
+  (0, import_decorators6.property)()
+], IconView.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators6.property)()
+], IconView.prototype, "label", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ type: Boolean, attribute: "show-name" })
+], IconView.prototype, "showName", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ attribute: "name-position" })
+], IconView.prototype, "namePosition", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ type: Number, attribute: "max-width" })
+], IconView.prototype, "maxWidth", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ type: Boolean, attribute: "show-icon-identicon" })
+], IconView.prototype, "showIconIdenticon", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ type: Boolean, attribute: "show-label-identicon" })
+], IconView.prototype, "showLabelIdenticon", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ type: Boolean, attribute: "force-unresolved" })
+], IconView.prototype, "forceUnresolved", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ type: String, attribute: "image-hint" })
+], IconView.prototype, "imageHint", 2);
+__decorateClass([
+  (0, import_decorators6.property)({ type: Number, attribute: "image-index" })
+], IconView.prototype, "imageIndex", 2);
+__decorateClass([
+  (0, import_decorators6.state)()
+], IconView.prototype, "imageData", 2);
+__decorateClass([
+  (0, import_decorators6.state)()
+], IconView.prototype, "isLoadingImage", 2);
+__decorateClass([
+  (0, import_decorators6.state)()
+], IconView.prototype, "isLoadingAddress", 2);
+IconView = __decorateClass([
+  safeCustomElement("icon-view")
+], IconView);
+
+// src/shared/image-loader-controller.ts
+var import_transaction_view_headless4 = require("@lukso/transaction-view-headless");
+var ImageLoaderController = class {
+  constructor(host) {
+    this.headlessLoader = (0, import_transaction_view_headless4.useImageLoader)();
+    // 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
+var import_lit8 = require("lit");
+var import_decorators7 = require("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 import_lit8.html``;
+    return import_lit8.html`
+      <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 ? import_lit8.html`<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 ? import_lit8.html`
+                <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([
+  (0, import_decorators7.property)()
+], NotificationView.prototype, "variant", 2);
+__decorateClass([
+  (0, import_decorators7.property)()
+], NotificationView.prototype, "message", 2);
+__decorateClass([
+  (0, import_decorators7.property)()
+], NotificationView.prototype, "title", 2);
+__decorateClass([
+  (0, import_decorators7.property)({ type: Boolean, attribute: "acknowledgeable" })
+], NotificationView.prototype, "acknowledgeable", 2);
+__decorateClass([
+  (0, import_decorators7.property)({ attribute: "acknowledge-text" })
+], NotificationView.prototype, "acknowledgeText", 2);
+__decorateClass([
+  (0, import_decorators7.state)()
+], NotificationView.prototype, "acknowledged", 2);
+__decorateClass([
+  (0, import_decorators7.property)({ type: Boolean, reflect: true })
+], NotificationView.prototype, "checked", 2);
+NotificationView = __decorateClass([
+  safeCustomElement("notification-view")
+], NotificationView);
+
+// src/shared/progress-view.ts
+var import_lit9 = require("lit");
+var import_decorators8 = require("lit/decorators.js");
+var ProgressView = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.data = [];
+    this.labelPosition = "right";
+  }
+  renderGasProviderLabel() {
+    return import_lit9.html`
+    ${this.label ? import_lit9.html`
+          <span class="progress-label-value">${this.label}</span>
+          ${this.unit ? import_lit9.html`<span class="progress-label-unit" data-testid="unit">${this.unit}</span>` : ""}
+        ` : import_lit9.html`
+          <slot></slot>
+          ${this.unit ? import_lit9.html`<span class="progress-label-unit" data-testid="unit">${this.unit}</span>` : ""}
+        `}
+    `;
+  }
+  renderAddressLabel() {
+    return import_lit9.html`
+      <value-view
+        .value=${this.address}
+        .unit=${this.unit}
+      ></value-view>
+    `;
+  }
+  render() {
+    const isError = (this.className || "").split(/\s+/).includes("error");
+    return import_lit9.html`
+      <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 import_lit9.html`<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([
+  (0, import_decorators8.property)({ type: Array })
+], ProgressView.prototype, "data", 2);
+__decorateClass([
+  (0, import_decorators8.property)()
+], ProgressView.prototype, "label", 2);
+__decorateClass([
+  (0, import_decorators8.property)()
+], ProgressView.prototype, "unit", 2);
+__decorateClass([
+  (0, import_decorators8.property)()
+], ProgressView.prototype, "address", 2);
+__decorateClass([
+  (0, import_decorators8.property)({ attribute: "label-position" })
+], ProgressView.prototype, "labelPosition", 2);
+ProgressView = __decorateClass([
+  safeCustomElement("progress-view")
+], ProgressView);
+
+// src/shared/scroll-to-bottom-button.ts
+var import_lit10 = require("lit");
+var import_decorators9 = require("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 import_lit10.html`
+      <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([
+  (0, import_decorators9.property)({ type: Boolean, attribute: "show" })
+], ScrollToBottomButton.prototype, "show", 2);
+__decorateClass([
+  (0, import_decorators9.property)()
+], ScrollToBottomButton.prototype, "color", 2);
+__decorateClass([
+  (0, import_decorators9.property)({ attribute: "icon-size" })
+], ScrollToBottomButton.prototype, "iconSize", 2);
+__decorateClass([
+  (0, import_decorators9.property)({ 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
+var import_transaction_view_headless5 = require("@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 (0, import_transaction_view_headless5.findBestTransactionView)(transaction, framework);
+  }
+  /**
+   * Get all matching views without loading
+   */
+  static findAllMatches(transaction, framework = "lit") {
+    return (0, import_transaction_view_headless5.findAllTransactionViews)(transaction, framework);
+  }
+  initialize() {
+    try {
+      this.headlessInstance = (0, import_transaction_view_headless5.useTransactionView)(
+        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
+var import_lit11 = require("lit");
+var import_decorators10 = require("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 import_lit11.html`
+      <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 ? import_lit11.html`
+                <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 ? import_lit11.html`<img
+                        src=${this.favicon}
+                        style="width:${sizePx}px;height:${sizePx}px;"
+                        alt="favicon"
+                        @error=${this.handleImageError}
+                      />` : import_lit11.html`<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([
+  (0, import_decorators10.property)()
+], UrlView.prototype, "url", 2);
+__decorateClass([
+  (0, import_decorators10.property)()
+], UrlView.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators10.property)()
+], UrlView.prototype, "label", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ type: Boolean, attribute: "show-logo" })
+], UrlView.prototype, "showLogo", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ attribute: "logo-url" })
+], UrlView.prototype, "logoUrl", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ type: Number, attribute: "max-width" })
+], UrlView.prototype, "maxWidth", 2);
+__decorateClass([
+  (0, import_decorators10.state)()
+], UrlView.prototype, "favicon", 2);
+__decorateClass([
+  (0, import_decorators10.state)()
+], UrlView.prototype, "displayName", 2);
+UrlView = __decorateClass([
+  safeCustomElement("url-view")
+], UrlView);
+
+// src/shared/value-view.ts
+var import_task4 = require("@lit/task");
+var import_transaction_view_headless6 = require("@lukso/transaction-view-headless");
+var import_lit12 = require("lit");
+var import_decorators11 = require("lit/decorators.js");
+var import_when = require("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 import_task4.Task(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 (0, import_transaction_view_headless6.useAddressResolver)();
+    } 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 = import_lit12.html`
+        <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 = import_lit12.html`
+              <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 = import_lit12.html`
+              <span class="inline-block overflow-hidden text-ellipsis whitespace-nowrap min-w-0 ${this.getNumericClass()}">${numeric}</span>
+          `;
+        }
+      }
+      return import_lit12.html`
+          <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 ? import_lit12.html`<div class="${this.getLabelClass()} text-neutral-20 overflow-hidden text-ellipsis whitespace-nowrap">${headerText}</div>` : import_lit12.html``}
+            ${this.showCopyButton ? import_lit12.html`
+                    <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>
+                  ` : import_lit12.html``}
+          </div>
+            ${(0, import_when.when)(
+        !this._hasSlotContent,
+        () => import_lit12.html`
+                <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 import_lit12.html`
+      <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 ? import_lit12.html`
+                <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([
+  (0, import_decorators11.property)()
+], ValueView.prototype, "value", 2);
+__decorateClass([
+  (0, import_decorators11.property)({ attribute: "key-name" })
+], ValueView.prototype, "keyName", 2);
+__decorateClass([
+  (0, import_decorators11.property)({ type: String, attribute: "container-class-names" })
+], ValueView.prototype, "containerClassNames", 2);
+__decorateClass([
+  (0, import_decorators11.property)()
+], ValueView.prototype, "type", 2);
+__decorateClass([
+  (0, import_decorators11.property)({ attribute: "currency-symbol" })
+], ValueView.prototype, "currencySymbol", 2);
+__decorateClass([
+  (0, import_decorators11.property)({ type: Number })
+], ValueView.prototype, "decimals", 2);
+__decorateClass([
+  (0, import_decorators11.property)()
+], ValueView.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators11.property)({ type: Boolean, attribute: "show-copy-button" })
+], ValueView.prototype, "showCopyButton", 2);
+__decorateClass([
+  (0, import_decorators11.property)({ type: Boolean, attribute: "is-card-view" })
+], ValueView.prototype, "isCardView", 2);
+__decorateClass([
+  (0, import_decorators11.property)()
+], ValueView.prototype, "label", 2);
+__decorateClass([
+  (0, import_decorators11.property)({ type: Number, attribute: "max-width" })
+], ValueView.prototype, "maxWidth", 2);
+__decorateClass([
+  (0, import_decorators11.property)()
+], ValueView.prototype, "address", 2);
+__decorateClass([
+  (0, import_decorators11.state)()
+], ValueView.prototype, "resolvedMetadata", 2);
+__decorateClass([
+  (0, import_decorators11.state)()
+], ValueView.prototype, "_hasSlotContent", 2);
+ValueView = __decorateClass([
+  safeCustomElement("value-view")
+], ValueView);
+
+// src/shared/image-list.ts
+var import_task5 = require("@lit/task");
+var import_transaction_view_headless7 = require("@lukso/transaction-view-headless");
+var import_lit13 = require("lit");
+var import_decorators12 = require("lit/decorators.js");
+var import_repeat = require("lit/directives/repeat.js");
+var ImageList = class extends CoreLitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "small";
+    this.isCardView = false;
+    this.isLoading = false;
+    // Composables
+    this.addressResolver = (0, import_transaction_view_headless7.useAddressResolver)();
+    // Task for resolving address data
+    this.addressTask = new import_task5.Task(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 import_lit13.html`
+          <div class="image-item broken-image-item">
+            <div class="broken-image-icon">🖼️❌</div>
+            ${item.index !== void 0 ? import_lit13.html`<div class="broken-image-label">#${item.index}</div>` : ""}
+            <div class="broken-image-text">No image</div>
+          </div>
+        `;
+      }
+      return import_lit13.html`
+        <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 ? import_lit13.html`<div class="image-label">#${item.index}</div>` : ""}
+        </div>
+      `;
+    } else {
+      return import_lit13.html`
+        <div class="image-item file-item">
+          <div class="file-icon">${this.getFileTypeIcon(item)}</div>
+          ${item.index !== void 0 ? import_lit13.html`<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 import_lit13.html`
+        <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 import_lit13.html`
+        <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 = import_lit13.html`
+      <div class="grid grid-cols-[repeat(auto-fill,minmax(${this.getImageMinSizePx()}px,300px))] gap-3 p-2">
+        ${(0, import_repeat.repeat)(
+      items,
+      (item, index) => item.index ?? index,
+      (item, index) => this.renderImageItem(item, index)
+    )}
+      </div>
+    `;
+    return this.isCardView ? import_lit13.html`<div class="flex flex-row flex-wrap border border-neutral-90 rounded-xl p-3 bg-neutral-100">${grid}</div>` : grid;
+  }
+};
+__decorateClass([
+  (0, import_decorators12.property)()
+], ImageList.prototype, "address", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: String, attribute: "image-hint" })
+], ImageList.prototype, "imageHint", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: Number, attribute: "min-index" })
+], ImageList.prototype, "minIndex", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: Number, attribute: "max-index" })
+], ImageList.prototype, "maxIndex", 2);
+__decorateClass([
+  (0, import_decorators12.property)()
+], ImageList.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: Boolean, attribute: "is-card-view" })
+], ImageList.prototype, "isCardView", 2);
+__decorateClass([
+  (0, import_decorators12.state)()
+], ImageList.prototype, "isLoading", 2);
+ImageList = __decorateClass([
+  safeCustomElement("image-list")
+], ImageList);
+
+// src/components/info-panel.ts
+var import_task6 = require("@lit/task");
+var import_transaction_view_headless8 = require("@lukso/transaction-view-headless");
+var import_lit14 = require("lit");
+var import_decorators13 = require("lit/decorators.js");
+var import_class_map = require("lit/directives/class-map.js");
+var import_repeat2 = require("lit/directives/repeat.js");
+var import_when2 = require("lit/directives/when.js");
+var InfoPanel = class extends import_lit14.LitElement {
+  constructor() {
+    super(...arguments);
+    this.address = "";
+    this.open = false;
+    this.standard = "";
+    this.type = "transfer";
+    this._isAnimating = false;
+    this._resolutionTask = new import_task6.Task(this, {
+      task: async ([address]) => {
+        if (!address) return null;
+        const { resolveAddress } = (0, import_transaction_view_headless8.useAddressResolver)();
+        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 import_lit14.html`
+      <div class="header">
+        ${(0, import_when2.when)(
+      this.address,
+      () => import_lit14.html`
+            <icon-view
+              address="${this.address}"
+              size="large"
+              class="header-icon"
+            ></icon-view>
+          `,
+      () => import_lit14.html`
+            <div class="loading-placeholder">🪙</div>
+          `
+    )}
+        <div class="header-title">${name}</div>
+      </div>
+    `;
+  }
+  _renderContractAddress() {
+    const contractAddress = this._extractBaseAddress(this.address);
+    if (!contractAddress) return "";
+    return import_lit14.html`
+      <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 import_lit14.html`
+      <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 import_lit14.html`
+      <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 import_lit14.html`
+      <div class="section">
+        <div class="section-title">🔗 Links</div>
+        <ul class="links-list">
+          ${(0, import_repeat2.repeat)(
+      links,
+      (link) => link.url,
+      (link) => import_lit14.html`
+              <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 import_lit14.html`
+      <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 import_lit14.html`
+      <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 import_lit14.html`
+      <div class=${(0, import_class_map.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 = import_lit14.css`
+    :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([
+  (0, import_decorators13.property)({ type: String })
+], InfoPanel.prototype, "address", 2);
+__decorateClass([
+  (0, import_decorators13.property)({ type: Boolean, attribute: "open" })
+], InfoPanel.prototype, "open", 2);
+__decorateClass([
+  (0, import_decorators13.property)({ type: String })
+], InfoPanel.prototype, "standard", 2);
+__decorateClass([
+  (0, import_decorators13.property)({ type: String })
+], InfoPanel.prototype, "type", 2);
+__decorateClass([
+  (0, import_decorators13.state)()
+], InfoPanel.prototype, "_isAnimating", 2);
+__decorateClass([
+  (0, import_decorators13.state)()
+], InfoPanel.prototype, "_resolvedData", 2);
+InfoPanel = __decorateClass([
+  safeCustomElement("info-panel")
+], InfoPanel);
+
+// src/components/asset-card.ts
+var import_lit15 = require("lit");
+var import_decorators14 = require("lit/decorators.js");
+var import_repeat3 = require("lit/directives/repeat.js");
+var import_when3 = require("lit/directives/when.js");
+var import_web_components = require("@lukso/web-components");
+var import_task7 = require("@lit/task");
+var import_transaction_view_headless9 = require("@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 = (0, import_transaction_view_headless9.useAddressResolver)();
+    this._resolutionTask = new import_task7.Task(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 import_lit15.html`
+      <div class="flex items-center justify-between cursor-pointer">
+        ${(0, import_when3.when)(
+      data.lsp4TokenSymbol,
+      () => import_lit15.html`
+             <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>
+          `
+    )}
+        ${(0, import_when3.when)(
+      this.showInfoButton,
+      () => import_lit15.html`
+          <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 import_lit15.html`
+        <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 import_lit15.html`
+        <div class="section">
+           ${(0, import_when3.when)(
+      data.lsp4TokenSymbol,
+      () => import_lit15.html`
+             <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 import_lit15.html`
+          ${(0, import_when3.when)(
+      data?.lsp4TokenName,
+      () => import_lit15.html`
+              <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 import_lit15.html`
+          ${(0, import_when3.when)(
+      data?.lsp4TokenSymbol,
+      () => import_lit15.html`
+              <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 import_lit15.html`
+        <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 import_lit15.html`
+        <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 import_lit15.html`
+        <div class="section">
+          <div class="section-title">🔗 Links</div>
+          <ul class="links-list">
+            ${(0, import_repeat3.repeat)(
+      links,
+      (link) => link.url,
+      (link) => import_lit15.html`
+                <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 import_lit15.html`
+          <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 import_lit15.html`
+        <div class="section">
+          <div class="section-title">Assets</div>
+          <image-list
+            address=${this.address}
+            image-hint="assets"
+            size="medium"
+          ></image-list>
+        </div>
+      `;
+  }
+  _renderStandards() {
+    return import_lit15.html`
+        <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 import_lit15.html`
+      <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 import_lit15.html`
+      <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 import_lit15.html`
+    <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">
+            ${(0, import_when3.when)(
+      this.amount,
+      () => import_lit15.html`
+                <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>
+              `,
+      () => import_lit15.html`${this._resolvedData?.lsp4TokenSymbol || ""}`
+    )}
+          </div>
+          
+           ${(0, import_when3.when)(
+      this.displayedTokenId,
+      () => import_lit15.html`<div class="text-[14px] font-medium text-neutral-60"><span class="font-bold">#${this.displayedTokenId}</span></div>`
+    )}
+          <div class="mt-4">
+          ${(0, import_when3.when)(this.showCreator, () => this._renderCreatorSection())}
+          </div>
+        </div>
+      </div>
+      <div class="border-neutral-90 pt-2">
+        ${this._renderTokenDetails()}
+      </div>
+    </div>
+    `;
+  }
+};
+__decorateClass([
+  (0, import_decorators14.property)()
+], AssetCard.prototype, "address", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: String, attribute: "token-id" })
+], AssetCard.prototype, "tokenId", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: String })
+], AssetCard.prototype, "amount", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: String, attribute: "function-name" })
+], AssetCard.prototype, "functionName", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: String, attribute: "standard" })
+], AssetCard.prototype, "standard", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: String, attribute: "function-icon" })
+], AssetCard.prototype, "functionIcon", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: String })
+], AssetCard.prototype, "size", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: Boolean, attribute: "show-info-button" })
+], AssetCard.prototype, "showInfoButton", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: Boolean, attribute: "show-creator" })
+], AssetCard.prototype, "showCreator", 2);
+__decorateClass([
+  (0, import_decorators14.state)()
+], AssetCard.prototype, "displayDetails", 2);
+__decorateClass([
+  (0, import_decorators14.state)()
+], AssetCard.prototype, "_resolvedData", 2);
+__decorateClass([
+  (0, import_decorators14.state)()
+], AssetCard.prototype, "_imageError", 2);
+AssetCard = __decorateClass([
+  safeCustomElement("asset-card")
+], AssetCard);
+
+// src/components/description-view.ts
+var import_lit16 = require("lit");
+var import_decorators15 = require("lit/decorators.js");
+var import_repeat4 = require("lit/directives/repeat.js");
+var import_when4 = require("lit/directives/when.js");
+var DescriptionView = class extends import_lit16.LitElement {
+  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 import_lit16.html`
+      <div class="header">
+        ${(0, import_when4.when)(
+      this.data.title,
+      () => import_lit16.html`
+            <h2 class="title">
+              ${this.data.title}
+              ${(0, import_when4.when)(
+        this.data.type,
+        () => import_lit16.html`
+                  <span class="type-badge ${this.data.type}">
+                    ${this.data.type}
+                  </span>
+                `
+      )}
+            </h2>
+          `
+    )}
+        
+        ${(0, import_when4.when)(
+      this.data.description,
+      () => import_lit16.html`
+            <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 import_lit16.html`
+      <div class="items-list">
+        ${(0, import_repeat4.repeat)(
+      items,
+      (item) => `${item.label}-${item.value}`,
+      (item) => import_lit16.html`
+            <div
+              class="description-item ${item.highlighted ? "highlighted" : ""} ${item.link ? "clickable" : ""}"
+              @click=${item.link ? () => this._handleItemClick(item) : void 0}
+            >
+              <div class="item-label">
+                ${(0, import_when4.when)(
+        item.icon,
+        () => import_lit16.html`<span class="item-icon">${item.icon}</span>`
+      )}
+                ${item.label}
+              </div>
+              
+              <div class="item-value-section">
+                <div class="item-value">
+                  ${item.link ? import_lit16.html`<a class="external-link" href="${item.link}" target="_blank" rel="noopener noreferrer">${item.value}</a>` : item.value}
+                </div>
+                ${(0, import_when4.when)(
+        item.subtitle,
+        () => import_lit16.html`<div class="item-subtitle">${item.subtitle}</div>`
+      )}
+              </div>
+              
+              <div class="item-actions">
+                ${(0, import_when4.when)(
+        item.copyable,
+        () => import_lit16.html`
+                    <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 import_lit16.html`
+        <div class="description-container">
+          <div class="loading-state">
+            <div class="loading-spinner">⏳</div>
+            <div class="loading-text">Loading details...</div>
+          </div>
+        </div>
+      `;
+    }
+    return import_lit16.html`
+      <div class="${this.variant} description-view">
+        <div class="description-container">
+          ${this._renderHeader()}
+          ${this._renderItems()}
+        </div>
+      </div>
+    `;
+  }
+};
+DescriptionView.styles = import_lit16.css`
+    :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([
+  (0, import_decorators15.property)({ type: Object })
+], DescriptionView.prototype, "data", 2);
+__decorateClass([
+  (0, import_decorators15.property)({ type: String })
+], DescriptionView.prototype, "variant", 2);
+DescriptionView = __decorateClass([
+  safeCustomElement("description-view")
+], DescriptionView);
+
+// src/components/universal-token-view.ts
+var import_lit17 = require("lit");
+var import_decorators16 = require("lit/decorators.js");
+var import_when5 = require("lit/directives/when.js");
+var UniversalTokenView = class extends import_lit17.LitElement {
+  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 import_lit17.html`
+      <div class="loading-state">
+        <div class="loading-spinner">⏳</div>
+        <div class="loading-text">Loading transaction details...</div>
+      </div>
+    `;
+  }
+  _renderErrorState(message) {
+    return import_lit17.html`
+      <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 import_lit17.html`
+      <div class="universal-view">
+        <!-- Title wrapper with title and LSP tag - exact match -->
+        <div class="title-wrapper">
+          <div class="title-section">
+            ${(0, import_when5.when)(
+      this.data.icon,
+      () => import_lit17.html`
+                <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>
+          ${(0, import_when5.when)(
+      this.data.standard,
+      () => import_lit17.html`<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 = import_lit17.css`
+    :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([
+  (0, import_decorators16.property)({ type: Object })
+], UniversalTokenView.prototype, "data", 2);
+__decorateClass([
+  (0, import_decorators16.state)()
+], UniversalTokenView.prototype, "_infoPanelOpen", 2);
+UniversalTokenView = __decorateClass([
+  safeCustomElement("universal-token-view")
+], UniversalTokenView);
+
+// src/components/contract-card.ts
+var import_task8 = require("@lit/task");
+var import_transaction_view_headless10 = require("@lukso/transaction-view-headless");
+var import_lit18 = require("lit");
+var import_decorators17 = require("lit/decorators.js");
+var ContractCard = class extends import_lit18.LitElement {
+  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 import_task8.Task(this, {
+      task: async ([address, resolved]) => {
+        if (resolved) {
+          this._resolvedData = resolved;
+          return resolved;
+        }
+        const { resolveAddress } = (0, import_transaction_view_headless10.useAddressResolver)();
+        const baseAddress = this._extractBaseAddress(address);
+        const data = await resolveAddress(baseAddress);
+        this._resolvedData = data;
+        return data;
+      },
+      args: () => [this.address, this.resolved]
+    });
+    this._profileImageTask = new import_task8.Task(this, {
+      task: async ([resolved]) => {
+        const { loadProfileImage } = (0, import_transaction_view_headless10.useImageLoader)();
+        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 import_task8.Task(this, {
+      task: async ([resolved]) => {
+        const { loadBackgroundImage } = (0, import_transaction_view_headless10.useImageLoader)();
+        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 import_lit18.html`
+      <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 = import_lit18.css`
+    :host {
+      display: block;
+    }
+  `;
+__decorateClass([
+  (0, import_decorators17.property)()
+], ContractCard.prototype, "address", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Object })
+], ContractCard.prototype, "resolved", 2);
+__decorateClass([
+  (0, import_decorators17.property)()
+], ContractCard.prototype, "variant", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ attribute: "border-radius" })
+], ContractCard.prototype, "borderRadius", 2);
+__decorateClass([
+  (0, import_decorators17.property)()
+], ContractCard.prototype, "shadow", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number })
+], ContractCard.prototype, "width", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number })
+], ContractCard.prototype, "height", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Boolean, attribute: "is-hoverable" })
+], ContractCard.prototype, "isHoverable", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Boolean, attribute: "has-overlay" })
+], ContractCard.prototype, "hasOverlay", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ attribute: "custom-class" })
+], ContractCard.prototype, "customClass", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ attribute: "header-class" })
+], ContractCard.prototype, "headerClass", 2);
+__decorateClass([
+  (0, import_decorators17.state)()
+], ContractCard.prototype, "_resolvedData", 2);
+__decorateClass([
+  (0, import_decorators17.state)()
+], ContractCard.prototype, "_profileImageUrl", 2);
+__decorateClass([
+  (0, import_decorators17.state)()
+], ContractCard.prototype, "_backgroundImageUrl", 2);
+ContractCard = __decorateClass([
+  safeCustomElement("contract-card")
+], ContractCard);
+
+// src/components/permissions-block.ts
+var import_lit19 = require("lit");
+var import_decorators18 = require("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 import_lit19.html`
+			<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 ? import_lit19.html`<lukso-icon
+								name=${this.icon}
+								size="x-small"
+								color=${this.color}
+							></lukso-icon>` : import_lit19.nothing}
+					<div class="ml-2 heading-inter-14-bold">${this.title}</div>
+				</div>
+
+				${this.description ? import_lit19.html`<div class="text-[var(--neutral-40)] paragraph-inter-12-regular">
+							${this.description}
+						</div>` : import_lit19.nothing}
+
+				<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 import_lit19.html`
+			<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 ? import_lit19.html`<lukso-icon
+							name="complete-filled"
+							width="20"
+							height="20"
+							secondary-color="neutral-100"
+              color="green-54"
+							stroke-width="1.5"
+						></lukso-icon>` : import_lit19.html`<lukso-icon
+							name="cross-outline"
+							width="20"
+							height="20"
+							color="red-65"
+							stroke-width="1.5"
+						></lukso-icon>`}
+			</div>
+		`;
+  }
+};
+__decorateClass([
+  (0, import_decorators18.property)({ type: String })
+], PermissionsBlock.prototype, "icon", 2);
+__decorateClass([
+  (0, import_decorators18.property)({ type: String, attribute: "action-icon" })
+], PermissionsBlock.prototype, "actionIcon", 2);
+__decorateClass([
+  (0, import_decorators18.property)({ type: String })
+], PermissionsBlock.prototype, "color", 2);
+__decorateClass([
+  (0, import_decorators18.property)({ type: String })
+], PermissionsBlock.prototype, "title", 2);
+__decorateClass([
+  (0, import_decorators18.property)({ type: String })
+], PermissionsBlock.prototype, "description", 2);
+__decorateClass([
+  (0, import_decorators18.property)({ type: String })
+], PermissionsBlock.prototype, "control", 2);
+__decorateClass([
+  (0, import_decorators18.property)({ type: Array })
+], PermissionsBlock.prototype, "permissions", 2);
+PermissionsBlock = __decorateClass([
+  safeCustomElement("permissions-block")
+], PermissionsBlock);
+
+// src/registry/index.ts
+var import_transaction_view_headless12 = require("@lukso/transaction-view-headless");
+
+// src/registry/lit-view-loader.ts
+var import_transaction_view_headless11 = require("@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 import_transaction_view_headless11.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 import_transaction_view_headless11.ViewLoadingError(
+            `Unsupported loader type: ${loader.type}`,
+            loader,
+            config
+          );
+      }
+      this.loadedComponents.set(component, loadedComponent);
+      return loadedComponent;
+    } catch (error) {
+      throw new import_transaction_view_headless11.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 module3 = await path();
+      return module3.default || module3;
+    }
+    const module2 = await import(
+      /* @vite-ignore */
+      path
+    );
+    return module2.default || module2;
+  }
+  /**
+   * 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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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,
+  useImageLoader,
+  useSignal,
+  useSignals,
+  useTransactionSignal,
+  useTransactionView
+});
+//# sourceMappingURL=index.cjs.map