@saasquatch/squatch-js 2.8.2-32 → 2.8.2-33

package/dist/squatch.cjs.js

@@ -1236,462 +1236,148 @@ class EmbedWidget extends Widget {
     return isVerified && (noContainer || isComponent);
   }
 }
-const getSkeleton = ({
-  type = "verified-access",
-  height = "500px",
-  skeletonBackgroundColor = "#e0e0e0",
-  skeletonShimmerColor = "#f5f5f5"
-}) => {
-  const referrerHTML = `
-    <div class="hero-section">
-        <div class="hero-content">
-          <div class="skeleton sk-title-lg"></div>
-          <div class="skeleton sk-text"></div>
-          <div class="skeleton sk-text sk-text-short"></div>
-        </div>
-        <div class="skeleton hero-image"></div>
-    </div>
-
-    <div class="share-section">
-      <div class="skeleton sk-label"></div>
-      <div class="skeleton sk-input"></div>
-      <div class="social-buttons">
-        <div class="skeleton sk-btn-social"></div>
-        <div class="skeleton sk-btn-social"></div>
-        <div class="skeleton sk-btn-social"></div>
-        <div class="skeleton sk-btn-social"></div>
-      </div>
-    </div>
-
-    <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
-    <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
-
-    <div class="stats-section">
-      <div class="stat-card">
-        <div class="skeleton sk-stat-num"></div>
-        <div class="skeleton sk-stat-label"></div>
-      </div>
-      <div class="stat-card stat-divider">
-        <div class="skeleton sk-stat-num"></div>
-        <div class="skeleton sk-stat-label"></div>
-      </div>
-    </div>
-
-    <div class="skeleton sk-title-md"></div>
-
-    <div class="table-header">
-      <div class="skeleton sk-th col-user"></div>
-      <div class="skeleton sk-th col-status"></div>
-      <div class="skeleton sk-th col-reward"></div>
-      <div class="skeleton sk-th col-date"></div>
-    </div>
-
-    <div class="table-row">
-      <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
-      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
-      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
-      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
-    </div>
-    
-    <div class="table-row">
-      <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
-      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
-      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
-      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
-    </div>
-
-    <div class="table-row">
-      <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
-      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
-      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
-      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
-    </div>
-
-    <div class="pagination">
-      <div class="skeleton sk-btn-page"></div>
-      <div class="skeleton sk-btn-page"></div>
-    </div>
-  `;
-  const instantAccessHTML = `
-    <div class="hero-section instant-access-layout">
-        <div class="skeleton hero-image ia-image"></div>
-        
-        <div class="hero-content ia-content">
-          <div class="skeleton sk-title-lg ia-center"></div>
-          <div class="skeleton sk-text ia-center"></div>
-          
-          <div class="skeleton sk-btn-action"></div>
-
-           <div class="skeleton sk-label"></div>
-           <div class="input-group">
-             <div class="skeleton sk-input"></div>
-             <div class="skeleton sk-btn-copy"></div>
-           </div>
-
-           <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
-           <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
-        </div>
-    </div>
-  `;
-  return `
+const _log$6 = browserExports.debug("squatch-js:POPUPwidget");
+let popupId = 0;
+class PopupWidget extends Widget {
+  constructor(params, trigger = ".squatchpop") {
+    super(params);
+    __publicField(this, "trigger");
+    __publicField(this, "id");
+    __publicField(this, "show", this.open);
+    __publicField(this, "hide", this.close);
+    this.trigger = trigger;
+    if (this.container) {
+      this.id = "squatchModal";
+    } else {
+      this.id = popupId === 0 ? `squatchModal` : `squatchModal__${popupId}`;
+      popupId = popupId + 1;
+    }
+    document.head.insertAdjacentHTML(
+      "beforeend",
+      `<style>#${this.id}::-webkit-scrollbar { display: none; }</style>`
+    );
+  }
+  _initialiseCTA() {
+    if (!this.trigger) return;
+    let triggerElement;
+    try {
+      triggerElement = document.querySelector(this.trigger) || document.querySelector(".impactpop");
+      if (this.trigger && !triggerElement)
+        _log$6("No element found with trigger selector", this.trigger);
+    } catch {
+      _log$6("Not a valid selector", this.trigger);
+    }
+    if (triggerElement) {
+      triggerElement.onclick = () => {
+        this.open();
+      };
+    }
+  }
+  _createPopupDialog() {
+    var _a2, _b, _c;
+    const dialog = document.createElement("dialog");
+    const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
+    const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.popupWidgets;
+    const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "auto";
+    const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "500px";
+    dialog.id = this.id;
+    dialog.setAttribute(
+      "style",
+      `width: 100%; min-width: ${minWidth}; max-width: ${maxWidth}; border: none; padding: 0;`
+    );
+    const onClick = (e) => {
+      e.stopPropagation();
+      if (e.target === dialog) dialog.close();
+    };
+    dialog.addEventListener("click", onClick);
+    return dialog;
+  }
+  async load() {
+    var _a2;
+    const frame = this._createFrame();
+    this._initialiseCTA();
+    const element = this.container ? this._findElement() : document.body;
+    const dialogParent = element.shadowRoot || element;
+    const dialog = this._createPopupDialog();
+    dialog.appendChild(frame);
+    if (((_a2 = dialogParent.lastChild) == null ? void 0 : _a2.nodeName) === "DIALOG") {
+      dialogParent.replaceChild(dialog, dialogParent.lastChild);
+    } else {
+      dialogParent.appendChild(dialog);
+    }
+    const { contentWindow } = frame;
+    if (!contentWindow) {
+      throw new Error("Frame needs a content window");
+    }
+    const frameDoc = contentWindow.document;
+    frameDoc.open();
+    frameDoc.write(this.content);
+    frameDoc.write(
+      `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
+    );
+    frameDoc.write(`
     <style>
-        * {
-          box-sizing: border-box;
-          padding: 0;
-          margin: 0;
-        }
-
-      .widget-container {
-        background: white;
-        width: 100%;
-        padding: 40px;
-        box-sizing: border-box;
-        overflow: hidden; 
-      }
-
-      @keyframes shimmer {
-        0% { background-position: -100% 0; }
-        100% { background-position: 100% 0; }
+      body {
+        height: 600px; 
+        border: 2px solid #ccc;
+        background-color: #f9f9f9;
+        margin: 0; 
+        padding: 0; 
+        box-sizing: border-box; 
       }
-
-      .skeleton {
-        background: ${skeletonBackgroundColor};
-        background: linear-gradient(
-          90deg,
-          ${skeletonBackgroundColor} 25%,
-          ${skeletonShimmerColor} 50%,
-          ${skeletonBackgroundColor} 75%
-        );
-        background-size: 200% 100%;
-        animation: shimmer 1.5s infinite linear;
-        border-radius: 6px;
-        margin-bottom: 12px;
+    </style>
+  `);
+    frameDoc.close();
+    _log$6("Popup template loaded into iframe");
+    await this._setupResizeHandler(frame);
+  }
+  async _setupResizeHandler(frame) {
+    const { contentWindow } = frame;
+    if (!contentWindow) {
+      throw new Error("Frame needs a content window");
+    }
+    const frameDoc = contentWindow.document;
+    domready(frameDoc, async () => {
+      frameDoc.body.style.overflowY = "hidden";
+      frame.height = `${frameDoc.body.offsetHeight}px`;
+      const ro = new contentWindow["ResizeObserver"]((entries) => {
+        for (const entry of entries) {
+          const { top, bottom } = entry.contentRect;
+          const computedHeight = bottom + top;
+          frame.height = computedHeight + "";
+          entry.target.style = ``;
+        }
+      });
+      ro.observe(await this._findInnerContainer(frame));
+    });
+  }
+  open() {
+    const element = this.container ? this._findElement() : document.body;
+    const parent = element.shadowRoot || element;
+    const dialog = parent.querySelector(`#${this.id}`);
+    if (!dialog) throw new Error("Could not determine container div");
+    dialog.showModal();
+    const frame = this._findFrame();
+    if (!frame) throw new Error("Could not find iframe");
+    const { contentWindow } = frame;
+    if (!contentWindow) throw new Error("Squatch.js has an empty iframe");
+    const frameDoc = contentWindow.document;
+    domready(frameDoc, () => {
+      var _a2;
+      const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
+      (_a2 = frame.contentDocument) == null ? void 0 : _a2.dispatchEvent(new CustomEvent("sq:refresh"));
+      if (this.context.user) {
+        this._loadEvent(_sqh);
+        _log$6("Popup opened");
+      } else {
+        this._attachLoadEventListener(frameDoc, _sqh);
       }
-
-      /* Typography Skeletons */
-      .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
-      .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
-      .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
-      .sk-text-short { width: 40%; }
-      .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
-
-      /* Layouts */
-      .hero-section {
-        display: flex;
-        gap: 40px;
-        margin-bottom: 40px;
-        padding-bottom: 40px;
-        flex-direction: row;
-        height: 100%;
-        /* Removed border-bottom */
-      }
-      
-      .hero-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      
-      .hero-image {
-        flex: 1;
-        height: 300px;
-        border-radius: 12px;
-      }
-
-      /* -- Specific Instant Access Overrides -- */
-      .instant-access-layout {
-         margin-bottom: 0;
-         padding-bottom: 0;
-         align-items: center; 
-      }
-      .ia-image {
-         height: 400px; 
-      }
-      .ia-center {
-         margin-left: auto;
-         margin-right: auto;
-      }
-      .ia-content {
-         align-items: center; 
-         text-align: center;
-      }
-      .sk-btn-action {
-         height: 45px;
-         width: 140px;
-         border-radius: 6px;
-         margin: 24px auto;
-      }
-      .input-group {
-         display: flex;
-         gap: 10px;
-         width: 100%;
-         max-width: 400px;
-      }
-      .sk-btn-copy {
-         height: 50px;
-         width: 120px;
-         border-radius: 8px;
-      }
-      /* ------------------------------------- */
-
-      .share-section { margin-bottom: 40px; }
-      .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
-      
-      .social-buttons { display: flex; gap: 12px; }
-      .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
-
-      .stats-section {
-        display: flex;
-        gap: 24px;
-        margin-bottom: 40px;
-        padding: 30px 0;
-        /* Removed border-top and border-bottom */
-      }
-      .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
-      .stat-divider { padding-left: 24px; }
-      .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
-      .sk-stat-label { height: 18px; width: 80px; }
-
-      /* Table Styles */
-      .table-header { display: flex; gap: 16px; margin-bottom: 16px; }
-      .sk-th { height: 16px; }
-      .table-row { 
-        display: flex; 
-        align-items: center; 
-        gap: 16px; 
-        padding: 16px 0; 
-        /* Removed border-bottom */
-      }
-      
-      .col-user { flex: 2; }
-      .col-status { flex: 1; }
-      .col-reward { flex: 2; }
-      .col-date { flex: 1; }
-
-      .sk-badge { height: 28px; width: 90px; border-radius: 14px; }
-      .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
-
-      .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
-      .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
-
-      @media (max-width: 768px) {
-        body { padding: 20px; }
-        .widget-container { padding: 24px; }
-
-        .hero-section { flex-direction: column-reverse; gap: 24px; }
-        .instant-access-layout { flex-direction: column; }
-        
-        .hero-image { height: 220px; width: 100%; }
-        .sk-title-lg { width: 100%; }
-
-        .col-date { display: none; }
-      }
-    </style>
-
-    <div class="widget-container">
-      ${type === "verified-access" ? referrerHTML : instantAccessHTML}
-    </div>
-  `;
-};
-const _log$6 = browserExports.debug("squatch-js:POPUPwidget");
-let popupId = 0;
-class PopupWidget extends Widget {
-  constructor(params, trigger = ".squatchpop") {
-    super(params);
-    __publicField(this, "trigger");
-    __publicField(this, "id");
-    __publicField(this, "show", this.open);
-    __publicField(this, "hide", this.close);
-    this.trigger = trigger;
-    if (this.container) {
-      this.id = "squatchModal";
-    } else {
-      this.id = popupId === 0 ? `squatchModal` : `squatchModal__${popupId}`;
-      popupId = popupId + 1;
-    }
-    document.head.insertAdjacentHTML(
-      "beforeend",
-      `<style>#${this.id}::-webkit-scrollbar { display: none; }</style>`
-    );
-  }
-  _initialiseCTA() {
-    if (!this.trigger) return;
-    let triggerElement;
-    try {
-      triggerElement = document.querySelector(this.trigger) || document.querySelector(".impactpop");
-      if (this.trigger && !triggerElement)
-        _log$6("No element found with trigger selector", this.trigger);
-    } catch {
-      _log$6("Not a valid selector", this.trigger);
-    }
-    if (triggerElement) {
-      triggerElement.onclick = () => {
-        this.open();
-      };
-    }
-  }
-  _createPopupDialog() {
-    var _a2, _b, _c;
-    const dialog = document.createElement("dialog");
-    const brandingConfig = (_b = (_a2 = this.context.widgetConfig) == null ? void 0 : _a2.values) == null ? void 0 : _b.brandingConfig;
-    const sizes = (_c = brandingConfig == null ? void 0 : brandingConfig.widgetSize) == null ? void 0 : _c.popupWidgets;
-    const minWidth = (sizes == null ? void 0 : sizes.minWidth) ? formatWidth(sizes.minWidth) : "auto";
-    const maxWidth = (sizes == null ? void 0 : sizes.maxWidth) ? formatWidth(sizes.maxWidth) : "500px";
-    dialog.id = this.id;
-    dialog.setAttribute(
-      "style",
-      `width: 100%; min-width: ${minWidth}; max-width: ${maxWidth}; border: none; padding: 0;`
-    );
-    const onClick = (e) => {
-      e.stopPropagation();
-      if (e.target === dialog) dialog.close();
-    };
-    dialog.addEventListener("click", onClick);
-    return dialog;
-  }
-  /*
-    async load() {
-      const frame = this._createFrame();
-      this._initialiseCTA();
-  
-      const element = this.container ? this._findElement() : document.body;
-  
-      const dialogParent = element.shadowRoot || element;
-      const dialog = this._createPopupDialog();
-      dialog.appendChild(frame);
-  
-      const skeletonHTML = getSkeleton({
-        height: "100%",
-        type: "verified-access",
-      });
-  
-      const skeletonContainer = document.createElement("div");
-      skeletonContainer.id = "loading-skeleton";
-      skeletonContainer.innerHTML = skeletonHTML;
-  
-      if (dialogParent.lastChild?.nodeName === "DIALOG") {
-        // Was reloaded
-        dialogParent.replaceChild(dialog, dialogParent.lastChild);
-      } else {
-        // First time rendering
-        dialogParent.appendChild(dialog);
-      }
-  
-      const { contentWindow } = frame;
-      if (!contentWindow) {
-        throw new Error("Frame needs a content window");
-      }
-  
-      const frameDoc = contentWindow.document;
-      frameDoc.open();
-      frameDoc.write(this.content);
-      frameDoc.write(
-        `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
-      );
-      frameDoc.close();
-      _log("Popup template loaded into iframe");
-      await this._setupResizeHandler(frame);
-    }
-    */
-  async load() {
-    var _a2;
-    const frame = this._createFrame();
-    this._initialiseCTA();
-    const element = this.container ? this._findElement() : document.body;
-    const dialogParent = element.shadowRoot || element;
-    const dialog = this._createPopupDialog();
-    const skeletonHTML = getSkeleton({
-      height: "100%",
-      type: "verified-access"
-    });
-    const skeletonContainer = document.createElement("div");
-    skeletonContainer.id = "loading-skeleton";
-    skeletonContainer.innerHTML = skeletonHTML;
-    skeletonContainer.style.width = "100%";
-    frame.style.display = "none";
-    dialog.appendChild(skeletonContainer);
-    dialog.appendChild(frame);
-    if (((_a2 = dialogParent.lastChild) == null ? void 0 : _a2.nodeName) === "DIALOG") {
-      dialogParent.replaceChild(dialog, dialogParent.lastChild);
-    } else {
-      dialogParent.appendChild(dialog);
-    }
-    const removeSkeleton = () => {
-      const skel = dialog.querySelector("#loading-skeleton");
-      if (skel) {
-        skel.remove();
-      }
-      frame.style.display = "block";
-    };
-    frame.addEventListener("sq:load", removeSkeleton);
-    frame.addEventListener("load", removeSkeleton);
-    const safetyTimer = setTimeout(() => {
-      removeSkeleton();
-    }, 5e3);
-    const { contentWindow } = frame;
-    if (!contentWindow) {
-      throw new Error("Frame needs a content window");
-    }
-    const frameDoc = contentWindow.document;
-    frameDoc.open();
-    frameDoc.write(this.content);
-    frameDoc.write(
-      `<script src="${this.npmCdn}/resize-observer-polyfill@1.5.x"><\/script>`
-    );
-    frameDoc.close();
-    _log$6("Popup template loaded into iframe");
-    await this._setupResizeHandler(frame);
-    clearTimeout(safetyTimer);
-    removeSkeleton();
-  }
-  async _setupResizeHandler(frame) {
-    const { contentWindow } = frame;
-    if (!contentWindow) {
-      throw new Error("Frame needs a content window");
-    }
-    const frameDoc = contentWindow.document;
-    domready(frameDoc, async () => {
-      frameDoc.body.style.overflowY = "hidden";
-      frame.height = `${frameDoc.body.offsetHeight}px`;
-      const ro = new contentWindow["ResizeObserver"]((entries) => {
-        for (const entry of entries) {
-          const { top, bottom } = entry.contentRect;
-          const computedHeight = bottom + top;
-          frame.height = computedHeight + "";
-          entry.target.style = ``;
-        }
-      });
-      ro.observe(await this._findInnerContainer(frame));
     });
   }
-  open() {
-    const element = this.container ? this._findElement() : document.body;
-    const parent = element.shadowRoot || element;
-    const dialog = parent.querySelector(`#${this.id}`);
-    if (!dialog) throw new Error("Could not determine container div");
-    dialog.showModal();
-    const frame = this._findFrame();
-    if (!frame) throw new Error("Could not find iframe");
-    const { contentWindow } = frame;
-    if (!contentWindow) throw new Error("Squatch.js has an empty iframe");
-    const frameDoc = contentWindow.document;
-    domready(frameDoc, () => {
-      var _a2;
-      const _sqh = contentWindow.squatch || contentWindow.widgetIdent;
-      (_a2 = frame.contentDocument) == null ? void 0 : _a2.dispatchEvent(new CustomEvent("sq:refresh"));
-      if (this.context.user) {
-        this._loadEvent(_sqh);
-        _log$6("Popup opened");
-      } else {
-        this._attachLoadEventListener(frameDoc, _sqh);
-      }
-    });
-  }
-  close() {
-    const frame = this._findFrame();
-    if (frame == null ? void 0 : frame.contentDocument)
-      this._detachLoadEventListener(frame.contentDocument);
+  close() {
+    const frame = this._findFrame();
+    if (frame == null ? void 0 : frame.contentDocument)
+      this._detachLoadEventListener(frame.contentDocument);
     const element = this.container ? this._findElement() : document.body;
     const parent = element.shadowRoot || element;
     const dialog = parent.querySelector(`#${this.id}`);
@@ -2185,6 +1871,264 @@ function _getAutoConfig() {
     }
   };
 }
+const getSkeleton = ({
+  type = "verified-access",
+  height = "500px",
+  skeletonBackgroundColor = "#e0e0e0",
+  skeletonShimmerColor = "#f5f5f5"
+}) => {
+  const referrerHTML = `
+    <div class="hero-section">
+        <div class="hero-content">
+          <div class="skeleton sk-title-lg"></div>
+          <div class="skeleton sk-text"></div>
+          <div class="skeleton sk-text sk-text-short"></div>
+        </div>
+        <div class="skeleton hero-image"></div>
+    </div>
+
+    <div class="share-section">
+      <div class="skeleton sk-label"></div>
+      <div class="skeleton sk-input"></div>
+      <div class="social-buttons">
+        <div class="skeleton sk-btn-social"></div>
+        <div class="skeleton sk-btn-social"></div>
+        <div class="skeleton sk-btn-social"></div>
+        <div class="skeleton sk-btn-social"></div>
+      </div>
+    </div>
+
+    <div class="skeleton sk-title-md" style="margin-top: 0; width: 30%; margin-left: auto; margin-right: auto"></div>
+    <div class="skeleton sk-text" style="width: 60%; margin-left: auto; margin-right: auto"></div>
+
+    <div class="stats-section">
+      <div class="stat-card">
+        <div class="skeleton sk-stat-num"></div>
+        <div class="skeleton sk-stat-label"></div>
+      </div>
+      <div class="stat-card stat-divider">
+        <div class="skeleton sk-stat-num"></div>
+        <div class="skeleton sk-stat-label"></div>
+      </div>
+    </div>
+
+    <div class="skeleton sk-title-md"></div>
+
+    <div class="table-header">
+      <div class="skeleton sk-th col-user"></div>
+      <div class="skeleton sk-th col-status"></div>
+      <div class="skeleton sk-th col-reward"></div>
+      <div class="skeleton sk-th col-date"></div>
+    </div>
+
+    <div class="table-row">
+      <div class="col-user"><div class="skeleton sk-text" style="width: 70%; margin: 0"></div></div>
+      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
+      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
+      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
+    </div>
+    
+    <div class="table-row">
+      <div class="col-user"><div class="skeleton sk-text" style="width: 60%; margin: 0"></div></div>
+      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
+      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
+      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
+    </div>
+
+    <div class="table-row">
+      <div class="col-user"><div class="skeleton sk-text" style="width: 75%; margin: 0"></div></div>
+      <div class="col-status"><div class="skeleton sk-badge" style="margin: 0"></div></div>
+      <div class="col-reward"><div class="skeleton sk-reward-block" style="margin: 0"></div></div>
+      <div class="col-date"><div class="skeleton sk-text" style="width: 80%; margin: 0"></div></div>
+    </div>
+
+    <div class="pagination">
+      <div class="skeleton sk-btn-page"></div>
+      <div class="skeleton sk-btn-page"></div>
+    </div>
+  `;
+  const instantAccessHTML = `
+    <div class="hero-section instant-access-layout">
+        <div class="skeleton hero-image ia-image"></div>
+        
+        <div class="hero-content ia-content">
+          <div class="skeleton sk-title-lg ia-center"></div>
+          <div class="skeleton sk-text ia-center"></div>
+          
+          <div class="skeleton sk-btn-action"></div>
+
+           <div class="skeleton sk-label"></div>
+           <div class="input-group">
+             <div class="skeleton sk-input"></div>
+             <div class="skeleton sk-btn-copy"></div>
+           </div>
+
+           <div class="skeleton sk-text-short ia-center" style="margin-top: 20px; width: 30%"></div>
+           <div class="skeleton sk-text-short ia-center" style="width: 20%"></div>
+        </div>
+    </div>
+  `;
+  return `
+    <style>
+        * {
+          box-sizing: border-box;
+          padding: 0;
+          margin: 0;
+        }
+
+      .widget-container {
+        background: white;
+        width: 100%;
+        padding: 40px;
+        box-sizing: border-box;
+        overflow: hidden; 
+      }
+
+      @keyframes shimmer {
+        0% { background-position: -100% 0; }
+        100% { background-position: 100% 0; }
+      }
+
+      .skeleton {
+        background: ${skeletonBackgroundColor};
+        background: linear-gradient(
+          90deg,
+          ${skeletonBackgroundColor} 25%,
+          ${skeletonShimmerColor} 50%,
+          ${skeletonBackgroundColor} 75%
+        );
+        background-size: 200% 100%;
+        animation: shimmer 1.5s infinite linear;
+        border-radius: 6px;
+        margin-bottom: 12px;
+      }
+
+      /* Typography Skeletons */
+      .sk-title-lg { height: 36px; width: 80%; margin-bottom: 16px; }
+      .sk-title-md { height: 28px; width: 30%; margin-bottom: 20px; margin-top: 40px; }
+      .sk-text { height: 16px; width: 90%; margin-bottom: 8px; }
+      .sk-text-short { width: 40%; }
+      .sk-label { height: 14px; width: 25%; margin-bottom: 10px; }
+
+      /* Layouts */
+      .hero-section {
+        display: flex;
+        gap: 40px;
+        margin-bottom: 40px;
+        padding-bottom: 40px;
+        flex-direction: row;
+        height: 100%;
+        /* Removed border-bottom */
+      }
+      
+      .hero-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      
+      .hero-image {
+        flex: 1;
+        height: 300px;
+        border-radius: 12px;
+      }
+
+      /* -- Specific Instant Access Overrides -- */
+      .instant-access-layout {
+         margin-bottom: 0;
+         padding-bottom: 0;
+         align-items: center; 
+      }
+      .ia-image {
+         height: 400px; 
+      }
+      .ia-center {
+         margin-left: auto;
+         margin-right: auto;
+      }
+      .ia-content {
+         align-items: center; 
+         text-align: center;
+      }
+      .sk-btn-action {
+         height: 45px;
+         width: 140px;
+         border-radius: 6px;
+         margin: 24px auto;
+      }
+      .input-group {
+         display: flex;
+         gap: 10px;
+         width: 100%;
+         max-width: 400px;
+      }
+      .sk-btn-copy {
+         height: 50px;
+         width: 120px;
+         border-radius: 8px;
+      }
+      /* ------------------------------------- */
+
+      .share-section { margin-bottom: 40px; }
+      .sk-input { height: 50px; width: 100%; border-radius: 8px; margin-bottom: 16px; }
+      
+      .social-buttons { display: flex; gap: 12px; }
+      .sk-btn-social { flex: 1; height: 50px; border-radius: 8px; }
+
+      .stats-section {
+        display: flex;
+        gap: 24px;
+        margin-bottom: 40px;
+        padding: 30px 0;
+        /* Removed border-top and border-bottom */
+      }
+      .stat-card { flex: 1; display: flex; flex-direction: column; align-items: center; }
+      .stat-divider { padding-left: 24px; }
+      .sk-stat-num { height: 48px; width: 120px; margin-bottom: 8px; }
+      .sk-stat-label { height: 18px; width: 80px; }
+
+      /* Table Styles */
+      .table-header { display: flex; gap: 16px; margin-bottom: 16px; }
+      .sk-th { height: 16px; }
+      .table-row { 
+        display: flex; 
+        align-items: center; 
+        gap: 16px; 
+        padding: 16px 0; 
+        /* Removed border-bottom */
+      }
+      
+      .col-user { flex: 2; }
+      .col-status { flex: 1; }
+      .col-reward { flex: 2; }
+      .col-date { flex: 1; }
+
+      .sk-badge { height: 28px; width: 90px; border-radius: 14px; }
+      .sk-reward-block { height: 36px; width: 100%; border-radius: 6px; }
+
+      .pagination { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
+      .sk-btn-page { height: 36px; width: 64px; border-radius: 6px; margin-bottom: 0; }
+
+      @media (max-width: 768px) {
+        body { padding: 20px; }
+        .widget-container { padding: 24px; }
+
+        .hero-section { flex-direction: column-reverse; gap: 24px; }
+        .instant-access-layout { flex-direction: column; }
+        
+        .hero-image { height: 220px; width: 100%; }
+        .sk-title-lg { width: 100%; }
+
+        .col-date { display: none; }
+      }
+    </style>
+
+    <div class="widget-container">
+      ${type === "verified-access" ? referrerHTML : instantAccessHTML}
+    </div>
+  `;
+};
 const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
 function decodeUserJwt(tokenStr) {
   var _a2;