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

package/dist/squatch.esm.js

@@ -1234,629 +1234,6 @@ class EmbedWidget extends Widget {
     return isVerified && (noContainer || isComponent);
   }
 }
-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.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);
-      }
-    });
-  }
-  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}`);
-    if (!dialog) throw new Error("Could not determine container div");
-    dialog.close();
-    _log$6("Popup closed");
-  }
-  _clickedOutside({ target }) {
-  }
-  _error(rs, mode = "modal", style = "") {
-    const _style = "body { margin: 0; } .modal { box-shadow: none; border: 0; }";
-    return super._error(rs, mode, style || _style);
-  }
-}
-const _log$5 = browserExports.debug("squatch-js:widgets");
-class Widgets {
-  /**
-   * Initialize a new {@link Widgets} instance.
-   *
-   * @param {ConfigOptions} config Config details
-   *
-   * @example <caption>Browser example</caption>
-   * var widgets = new squatch.Widgets({tenantAlias:'test_12b5bo1b25125'});
-   *
-   * @example <caption>Browserify/Webpack example</caption>
-   * var Widgets = require('@saasquatch/squatch-js').Widgets;
-   * var widgets = new Widgets({tenantAlias:'test_12b5bo1b25125'});
-   *
-   * @example <caption>Babel+Browserify/Webpack example</caption>
-   * import {Widgets} from '@saasquatch/squatch-js';
-   * let widgets = new Widgets({tenantAlias:'test_12b5bo1b25125'});
-   */
-  constructor(configin) {
-    /**
-     * Instance of {@link WidgetApi}
-     */
-    __publicField(this, "api");
-    /**
-     * Tenant alias of SaaSquatch tenant
-     */
-    __publicField(this, "tenantAlias");
-    /**
-     * SaaSquatch domain for API requests
-     * @default "https://app.referralsaasquatch.com"
-     */
-    __publicField(this, "domain");
-    /**
-     * Hosted CDN for npm packages
-     * @default "https://fast.ssqt.io/npm"
-     */
-    __publicField(this, "npmCdn");
-    const config = validateConfig(configin);
-    this.tenantAlias = config.tenantAlias;
-    this.domain = config.domain;
-    this.npmCdn = config.npmCdn;
-    this.api = new WidgetApi(config);
-  }
-  /**
-   * This function calls the {@link WidgetApi.upsertUser} method, and it renders
-   * the widget if it is successful. Otherwise it shows the "error" widget.
-   *
-   * @param {Object} config Config details
-   * @param {Object} config.user The user details
-   * @param {string} config.user.id The user id
-   * @param {string} config.user.accountId The user account id
-   * @param {WidgetType} config.widgetType The content of the widget
-   * @param {EngagementMedium} config.engagementMedium How to display the widget
-   * @param {string} config.jwt the JSON Web Token (JWT) that is used to validate the data (can be disabled)
-   * @param {HTMLElement | string | undefined} config.container Element to load the widget into
-   * @param {string | undefined} config.trigger Trigger element for opening the popup widget
-   *
-   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details
-   */
-  async upsertUser(config) {
-    const raw = config;
-    const clean = validateWidgetConfig(raw);
-    try {
-      const response = await this.api.upsertUser(clean);
-      return {
-        widget: this._renderWidget(response, clean, {
-          type: "upsert",
-          user: clean.user,
-          engagementMedium: config.engagementMedium,
-          container: config.container,
-          trigger: config.trigger,
-          widgetConfig: {
-            values: {
-              brandingConfig: response == null ? void 0 : response.brandingConfig
-            }
-          }
-        }),
-        user: response.user
-      };
-    } catch (err) {
-      _log$5(err);
-      if (err.apiErrorCode) {
-        this._renderErrorWidget(err, config.engagementMedium);
-      }
-      throw new Error(err);
-    }
-  }
-  /**
-   * This function calls the {@link WidgetApi.render} method, and it renders
-   * the widget if it is successful. Otherwise it shows the "error" widget.
-   *
-   * @param {Object} config Config details
-   * @param {Object} config.user The user details
-   * @param {string} config.user.id The user id
-   * @param {string} config.user.accountId The user account id
-   * @param {WidgetType} config.widgetType The content of the widget
-   * @param {EngagementMedium} config.engagementMedium How to display the widget
-   * @param {string} config.jwt the JSON Web Token (JWT) that is used
-   *                            to validate the data (can be disabled)
-   *
-   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details
-   */
-  async render(config) {
-    const raw = config;
-    const clean = validatePasswordlessConfig(raw);
-    try {
-      const response = await this.api.render(clean);
-      return {
-        widget: this._renderWidget(response, clean, {
-          type: "passwordless",
-          engagementMedium: clean.engagementMedium,
-          container: clean.container,
-          trigger: clean.trigger,
-          widgetConfig: {
-            values: {
-              brandingConfig: response == null ? void 0 : response.brandingConfig
-            }
-          }
-        }),
-        user: response.user
-      };
-    } catch (err) {
-      if (err.apiErrorCode) {
-        this._renderErrorWidget(err, clean.engagementMedium);
-      }
-      throw new Error(err);
-    }
-  }
-  /**
-   * Autofills a referral code into an element when someone has been referred.
-   * Uses {@link WidgetApi.squatchReferralCookie} behind the scenes.
-   *
-   * @param selector Element class/id selector, or a callback function
-   * @returns
-   */
-  async autofill(selector) {
-    const input = selector;
-    if (typeof input === "function") {
-      try {
-        const response = await this.api.squatchReferralCookie();
-        input(response);
-      } catch (e) {
-        _log$5("Autofill error", e);
-        throw new Error(e);
-      }
-      return;
-    }
-    if (typeof input !== "string")
-      throw new Error("Autofill accepts a string or function");
-    let elems = document.querySelectorAll(input);
-    let elem;
-    if (elems.length > 0) {
-      elem = elems[0];
-    } else {
-      _log$5("Element id/class or function missing");
-      throw new Error("Element id/class or function missing");
-    }
-    try {
-      const response = await this.api.squatchReferralCookie();
-      elem.value = response.codes[0];
-    } catch (e) {
-      throw new Error(e);
-    }
-  }
-  /**
-   * @hidden
-   * @param {Object} response The json object return from the WidgetApi
-   * @param {Object} config Config details
-   * @param {string} config.widgetType The widget type (REFERRER_WIDGET, CONVERSION_WIDGET)
-   * @param {string} config.engagementMedium (POPUP, EMBED)
-   * @returns {Widget} widget (PopupWidget or EmbedWidget)
-   */
-  _renderWidget(response, config, context) {
-    var _a2;
-    _log$5("Rendering Widget...");
-    if (!response) throw new Error("Unable to get a response");
-    let widget2;
-    let displayOnLoad = !!config.displayOnLoad;
-    const opts = response.jsOptions || {};
-    const params = {
-      content: response.template,
-      type: config.widgetType || ((_a2 = opts.widget) == null ? void 0 : _a2.defaultWidgetType),
-      api: this.api,
-      domain: this.domain,
-      npmCdn: this.npmCdn,
-      context
-    };
-    if (opts.widgetUrlMappings) {
-      opts.widgetUrlMappings.forEach((rule) => {
-        var _a3, _b;
-        if (Widgets._matchesUrl(rule.url)) {
-          if (rule.widgetType !== "CONVERSION_WIDGET" || ((_b = (_a3 = response.user) == null ? void 0 : _a3.referredBy) == null ? void 0 : _b.code)) {
-            displayOnLoad = rule.displayOnLoad;
-            _log$5(`Display ${rule.widgetType} on ${rule.url}`);
-          } else {
-            _log$5(
-              `Don't display ${rule.widgetType} when no referral on widget rule match ${rule.url}`
-            );
-          }
-        }
-      });
-    }
-    if (opts.fuelTankAutofillUrls) {
-      _log$5("We found a fuel tank autofill!");
-      opts.fuelTankAutofillUrls.forEach(({ url, formSelector }) => {
-        var _a3, _b, _c;
-        if (Widgets._matchesUrl(url)) {
-          _log$5("Fuel Tank URL matches");
-          if ((_b = (_a3 = response.user) == null ? void 0 : _a3.referredBy) == null ? void 0 : _b.code) {
-            const formAutofill = document.querySelector(formSelector);
-            if (formAutofill) {
-              formAutofill.value = ((_c = response.user.referredBy.referredReward) == null ? void 0 : _c.fuelTankCode) || "";
-            } else {
-              _log$5(
-                new Error(
-                  `Element with id/class ${formSelector} was not found.`
-                )
-              );
-            }
-          }
-        }
-      });
-    }
-    if (config.engagementMedium === "EMBED") {
-      widget2 = this._renderEmbedWidget(params);
-    } else {
-      widget2 = this._renderPopupWidget(params);
-      if (displayOnLoad) widget2.open();
-    }
-    return widget2;
-  }
-  _renderPopupWidget(params) {
-    const widget2 = new PopupWidget(params, params.context.trigger);
-    widget2.load();
-    return widget2;
-  }
-  _renderEmbedWidget(params) {
-    const widget2 = new EmbedWidget(params, params.context.container);
-    widget2.load();
-    return widget2;
-  }
-  /**
-   * @hidden
-   * @param {Object} error The json object containing the error details
-   * @param {string} em The engagementMedium
-   * @returns {void}
-   */
-  _renderErrorWidget(props, em = "POPUP") {
-    const { apiErrorCode, rsCode, message } = props;
-    _log$5(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
-    const params = {
-      content: "error",
-      rsCode,
-      api: this.api,
-      domain: this.domain,
-      npmCdn: this.npmCdn,
-      type: "ERROR_WIDGET",
-      context: { type: "error" }
-    };
-    let widget2;
-    if (em === "EMBED") {
-      widget2 = new EmbedWidget(params);
-      widget2.load();
-    } else if (em === "POPUP") {
-      widget2 = new PopupWidget(params);
-      widget2.load();
-    }
-  }
-  /**
-   * @hidden
-   * @param {string} rule A regular expression
-   * @returns {boolean} true if rule matches Url, false otherwise
-   */
-  static _matchesUrl(rule) {
-    return window.location.href.match(new RegExp(rule)) ? true : false;
-  }
-}
-class EventsApi {
-  /**
-   * Initialize a new {@link EventsApi} instance.
-   *
-   * @param {ConfigOptions} config Config details
-   *
-   * @example <caption>Browser example</caption>
-   * var squatchApi = new squatch.EventsApi({tenantAlias:'test_12b5bo1b25125'});
-   *
-   * @example <caption>Browserify/Webpack example</caption>
-   * var EventsApi = require('@saasquatch/squatch-js').EventsApi;
-   * var squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
-   *
-   * @example <caption>Babel+Browserify/Webpack example</caption>
-   * import {EventsApi} from '@saasquatch/squatch-js';
-   * let squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
-   */
-  constructor(config) {
-    __publicField(this, "tenantAlias");
-    __publicField(this, "domain");
-    const raw = config;
-    const clean = validateConfig(raw);
-    this.tenantAlias = clean.tenantAlias;
-    this.domain = clean.domain;
-  }
-  /**
-   * Track an event for a user
-   *
-   * @param params Parameters for request
-   * @param options.jwt the JSON Web Token (JWT) that is used to authenticate the user
-   *
-   * @return An ID to confirm the event has been accepted for asynchronous processing
-   */
-  track(params, options) {
-    const raw = params;
-    const rawOpts = options;
-    const body = _validateEvent(raw);
-    const { jwt } = _validateTrackOptions(rawOpts);
-    const ta = encodeURIComponent(this.tenantAlias);
-    const userId = encodeURIComponent(body.userId);
-    const accountId = encodeURIComponent(body.accountId);
-    const path = `/api/v1/${ta}/open/account/${accountId}/user/${userId}/events`;
-    const url = this.domain + path;
-    return doPost(url, JSON.stringify(body), jwt);
-  }
-}
-function _validateEvent(raw) {
-  if (!isObject$1(raw)) throw new Error("tracking parameter must be an object");
-  if (!(raw == null ? void 0 : raw["accountId"])) throw new Error("accountId field is required");
-  if (!(raw == null ? void 0 : raw["events"])) throw new Error("events field is required");
-  if (!(raw == null ? void 0 : raw["userId"])) throw new Error("userId field is required");
-  const clean = raw;
-  if (!Array.isArray(clean.events))
-    throw new Error("'events' should be an array");
-  return clean;
-}
-function _validateTrackOptions(raw) {
-  if (!isObject$1(raw)) throw new Error("'options' should be an object");
-  return raw;
-}
-function asyncLoad() {
-  var _a2;
-  const namespace = window[IMPACT_NAMESPACE] ? IMPACT_NAMESPACE : DEFAULT_NAMESPACE;
-  const cached = ((_a2 = window["_" + namespace]) == null ? void 0 : _a2.ready) || [];
-  const declarativeCache = window.impactOnReady || window.squatchOnReady;
-  const readyFns = [...cached, declarativeCache].filter((a) => !!a);
-  setTimeout(() => {
-    if (!window[DEFAULT_NAMESPACE]) return;
-    window[IMPACT_NAMESPACE] = window[DEFAULT_NAMESPACE];
-    readyFns.forEach((cb) => cb());
-    window[DEFAULT_NAMESPACE]._auto();
-    window["_" + namespace] = void 0;
-    delete window["_" + namespace];
-  }, 0);
-}
-const _log$4 = browserExports.debug("squatch-js");
-const isObject = (item) => typeof item === "object" && !Array.isArray(item);
-const deepMerge = (target, source) => {
-  const isDeep = (prop) => isObject(source[prop]) && target.hasOwnProperty(prop) && isObject(target[prop]);
-  const replaced = Object.getOwnPropertyNames(source).map((prop) => ({
-    [prop]: isDeep(prop) ? deepMerge(target[prop], source[prop]) : source[prop]
-  })).reduce((a, b) => ({ ...a, ...b }), {});
-  return {
-    ...target,
-    ...replaced
-  };
-};
-function b64decode(input) {
-  const binary = atob(input.replace(/_/g, "/").replace(/-/g, "+"));
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return new TextDecoder("utf8").decode(bytes);
-}
-function b64encode(input) {
-  const encodedInput = new TextEncoder().encode(input);
-  const binary = Array.from(
-    encodedInput,
-    (byte) => String.fromCodePoint(byte)
-  ).join("");
-  return btoa(binary).replace(/=/g, "").replace(/\+/g, "-").replace(/\//g, "_");
-}
-function getTopDomain() {
-  var i, h, weird_cookie = "weird_get_top_level_domain=cookie", hostname = document.location.hostname.split(".");
-  for (i = hostname.length - 1; i >= 0; i--) {
-    h = hostname.slice(i).join(".");
-    document.cookie = weird_cookie + ";domain=." + h + ";";
-    if (document.cookie.indexOf(weird_cookie) > -1) {
-      document.cookie = weird_cookie.split("=")[0] + "=;domain=." + h + ";expires=Thu, 01 Jan 1970 00:00:01 GMT;";
-      return h;
-    }
-  }
-}
-function _pushCookie() {
-  const queryString = window.location.search;
-  const urlParams = new URLSearchParams(queryString);
-  const refParam = urlParams.get("_saasquatch") || "";
-  if (refParam) {
-    let paramsJSON = "", existingCookie = "", reEncodedCookie = "";
-    try {
-      paramsJSON = JSON.parse(b64decode(refParam));
-    } catch (error) {
-      _log$4("Unable to decode params", error);
-      return;
-    }
-    try {
-      existingCookie = JSON.parse(b64decode(api$1.get("_saasquatch")));
-      _log$4("existing cookie", existingCookie);
-    } catch (error) {
-      _log$4("Unable to retrieve cookie", error);
-    }
-    try {
-      const domain = getTopDomain();
-      _log$4("domain retrieved:", domain);
-      if (existingCookie) {
-        const newCookie = deepMerge(existingCookie, paramsJSON);
-        reEncodedCookie = b64encode(JSON.stringify(newCookie));
-        _log$4("cookie to store:", newCookie);
-      } else {
-        reEncodedCookie = b64encode(JSON.stringify(paramsJSON));
-        _log$4("cookie to store:", paramsJSON);
-      }
-      api$1.set("_saasquatch", reEncodedCookie, {
-        expires: 365,
-        secure: false,
-        sameSite: "Lax",
-        domain,
-        path: "/"
-      });
-    } catch (error) {
-      _log$4("Unable to set cookie", error);
-    }
-  }
-}
-const _log$3 = browserExports.debug("squatch-js");
-function _getAutoConfig() {
-  var _a2;
-  const queryString = window.location.search;
-  const urlParams = new URLSearchParams(queryString);
-  const refParam = urlParams.get("_saasquatchExtra") || "";
-  if (!refParam) {
-    _log$3("No _saasquatchExtra param");
-    return;
-  }
-  const config = validateConfig({
-    tenantAlias: "UNKNOWN"
-  });
-  if (!config.domain) {
-    _log$3("domain must be provided in config to use _saasquatchExtra");
-    return;
-  }
-  let raw;
-  try {
-    raw = JSON.parse(b64decode(refParam));
-  } catch (e) {
-    _log$3("Unable to decode _saasquatchExtra config");
-    return;
-  }
-  function normalizeDomain(domain) {
-    return domain.replace(/^https?:\/\//, "");
-  }
-  const normalizedDomain = normalizeDomain(config.domain);
-  const tenantAlias = Object.keys((raw == null ? void 0 : raw[normalizedDomain]) || {})[0];
-  const widgetConfig = (_a2 = raw == null ? void 0 : raw[normalizedDomain]) == null ? void 0 : _a2[tenantAlias];
-  if (!widgetConfig) {
-    _log$3("_saasquatchExtra did not have an expected structure");
-    return void 0;
-  }
-  const { autoPopupWidgetType, ...rest } = widgetConfig;
-  return {
-    widgetConfig: {
-      widgetType: autoPopupWidgetType,
-      displayOnLoad: true,
-      ...rest
-    },
-    squatchConfig: {
-      ...config,
-      tenantAlias
-    }
-  };
-}
 const getSkeleton = ({
   type = "verified-access",
   height = "500px",
@@ -2069,52 +1446,743 @@ const getSkeleton = ({
         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 */
+      .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);
+    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.close();
+    _log$6("Popup closed");
+  }
+  _clickedOutside({ target }) {
+  }
+  _error(rs, mode = "modal", style = "") {
+    const _style = "body { margin: 0; } .modal { box-shadow: none; border: 0; }";
+    return super._error(rs, mode, style || _style);
+  }
+}
+const _log$5 = browserExports.debug("squatch-js:widgets");
+class Widgets {
+  /**
+   * Initialize a new {@link Widgets} instance.
+   *
+   * @param {ConfigOptions} config Config details
+   *
+   * @example <caption>Browser example</caption>
+   * var widgets = new squatch.Widgets({tenantAlias:'test_12b5bo1b25125'});
+   *
+   * @example <caption>Browserify/Webpack example</caption>
+   * var Widgets = require('@saasquatch/squatch-js').Widgets;
+   * var widgets = new Widgets({tenantAlias:'test_12b5bo1b25125'});
+   *
+   * @example <caption>Babel+Browserify/Webpack example</caption>
+   * import {Widgets} from '@saasquatch/squatch-js';
+   * let widgets = new Widgets({tenantAlias:'test_12b5bo1b25125'});
+   */
+  constructor(configin) {
+    /**
+     * Instance of {@link WidgetApi}
+     */
+    __publicField(this, "api");
+    /**
+     * Tenant alias of SaaSquatch tenant
+     */
+    __publicField(this, "tenantAlias");
+    /**
+     * SaaSquatch domain for API requests
+     * @default "https://app.referralsaasquatch.com"
+     */
+    __publicField(this, "domain");
+    /**
+     * Hosted CDN for npm packages
+     * @default "https://fast.ssqt.io/npm"
+     */
+    __publicField(this, "npmCdn");
+    const config = validateConfig(configin);
+    this.tenantAlias = config.tenantAlias;
+    this.domain = config.domain;
+    this.npmCdn = config.npmCdn;
+    this.api = new WidgetApi(config);
+  }
+  /**
+   * This function calls the {@link WidgetApi.upsertUser} method, and it renders
+   * the widget if it is successful. Otherwise it shows the "error" widget.
+   *
+   * @param {Object} config Config details
+   * @param {Object} config.user The user details
+   * @param {string} config.user.id The user id
+   * @param {string} config.user.accountId The user account id
+   * @param {WidgetType} config.widgetType The content of the widget
+   * @param {EngagementMedium} config.engagementMedium How to display the widget
+   * @param {string} config.jwt the JSON Web Token (JWT) that is used to validate the data (can be disabled)
+   * @param {HTMLElement | string | undefined} config.container Element to load the widget into
+   * @param {string | undefined} config.trigger Trigger element for opening the popup widget
+   *
+   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details
+   */
+  async upsertUser(config) {
+    const raw = config;
+    const clean = validateWidgetConfig(raw);
+    try {
+      const response = await this.api.upsertUser(clean);
+      return {
+        widget: this._renderWidget(response, clean, {
+          type: "upsert",
+          user: clean.user,
+          engagementMedium: config.engagementMedium,
+          container: config.container,
+          trigger: config.trigger,
+          widgetConfig: {
+            values: {
+              brandingConfig: response == null ? void 0 : response.brandingConfig
+            }
+          }
+        }),
+        user: response.user
+      };
+    } catch (err) {
+      _log$5(err);
+      if (err.apiErrorCode) {
+        this._renderErrorWidget(err, config.engagementMedium);
+      }
+      throw new Error(err);
+    }
+  }
+  /**
+   * This function calls the {@link WidgetApi.render} method, and it renders
+   * the widget if it is successful. Otherwise it shows the "error" widget.
+   *
+   * @param {Object} config Config details
+   * @param {Object} config.user The user details
+   * @param {string} config.user.id The user id
+   * @param {string} config.user.accountId The user account id
+   * @param {WidgetType} config.widgetType The content of the widget
+   * @param {EngagementMedium} config.engagementMedium How to display the widget
+   * @param {string} config.jwt the JSON Web Token (JWT) that is used
+   *                            to validate the data (can be disabled)
+   *
+   * @return {Promise<WidgetResult>} json object if true, with a Widget and user details
+   */
+  async render(config) {
+    const raw = config;
+    const clean = validatePasswordlessConfig(raw);
+    try {
+      const response = await this.api.render(clean);
+      return {
+        widget: this._renderWidget(response, clean, {
+          type: "passwordless",
+          engagementMedium: clean.engagementMedium,
+          container: clean.container,
+          trigger: clean.trigger,
+          widgetConfig: {
+            values: {
+              brandingConfig: response == null ? void 0 : response.brandingConfig
+            }
+          }
+        }),
+        user: response.user
+      };
+    } catch (err) {
+      if (err.apiErrorCode) {
+        this._renderErrorWidget(err, clean.engagementMedium);
       }
-      
-      .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; }
+      throw new Error(err);
+    }
+  }
+  /**
+   * Autofills a referral code into an element when someone has been referred.
+   * Uses {@link WidgetApi.squatchReferralCookie} behind the scenes.
+   *
+   * @param selector Element class/id selector, or a callback function
+   * @returns
+   */
+  async autofill(selector) {
+    const input = selector;
+    if (typeof input === "function") {
+      try {
+        const response = await this.api.squatchReferralCookie();
+        input(response);
+      } catch (e) {
+        _log$5("Autofill error", e);
+        throw new Error(e);
       }
-    </style>
-
-    <div class="widget-container">
-      ${type === "verified-access" ? referrerHTML : instantAccessHTML}
-    </div>
-  `;
+      return;
+    }
+    if (typeof input !== "string")
+      throw new Error("Autofill accepts a string or function");
+    let elems = document.querySelectorAll(input);
+    let elem;
+    if (elems.length > 0) {
+      elem = elems[0];
+    } else {
+      _log$5("Element id/class or function missing");
+      throw new Error("Element id/class or function missing");
+    }
+    try {
+      const response = await this.api.squatchReferralCookie();
+      elem.value = response.codes[0];
+    } catch (e) {
+      throw new Error(e);
+    }
+  }
+  /**
+   * @hidden
+   * @param {Object} response The json object return from the WidgetApi
+   * @param {Object} config Config details
+   * @param {string} config.widgetType The widget type (REFERRER_WIDGET, CONVERSION_WIDGET)
+   * @param {string} config.engagementMedium (POPUP, EMBED)
+   * @returns {Widget} widget (PopupWidget or EmbedWidget)
+   */
+  _renderWidget(response, config, context) {
+    var _a2;
+    _log$5("Rendering Widget...");
+    if (!response) throw new Error("Unable to get a response");
+    let widget2;
+    let displayOnLoad = !!config.displayOnLoad;
+    const opts = response.jsOptions || {};
+    const params = {
+      content: response.template,
+      type: config.widgetType || ((_a2 = opts.widget) == null ? void 0 : _a2.defaultWidgetType),
+      api: this.api,
+      domain: this.domain,
+      npmCdn: this.npmCdn,
+      context
+    };
+    if (opts.widgetUrlMappings) {
+      opts.widgetUrlMappings.forEach((rule) => {
+        var _a3, _b;
+        if (Widgets._matchesUrl(rule.url)) {
+          if (rule.widgetType !== "CONVERSION_WIDGET" || ((_b = (_a3 = response.user) == null ? void 0 : _a3.referredBy) == null ? void 0 : _b.code)) {
+            displayOnLoad = rule.displayOnLoad;
+            _log$5(`Display ${rule.widgetType} on ${rule.url}`);
+          } else {
+            _log$5(
+              `Don't display ${rule.widgetType} when no referral on widget rule match ${rule.url}`
+            );
+          }
+        }
+      });
+    }
+    if (opts.fuelTankAutofillUrls) {
+      _log$5("We found a fuel tank autofill!");
+      opts.fuelTankAutofillUrls.forEach(({ url, formSelector }) => {
+        var _a3, _b, _c;
+        if (Widgets._matchesUrl(url)) {
+          _log$5("Fuel Tank URL matches");
+          if ((_b = (_a3 = response.user) == null ? void 0 : _a3.referredBy) == null ? void 0 : _b.code) {
+            const formAutofill = document.querySelector(formSelector);
+            if (formAutofill) {
+              formAutofill.value = ((_c = response.user.referredBy.referredReward) == null ? void 0 : _c.fuelTankCode) || "";
+            } else {
+              _log$5(
+                new Error(
+                  `Element with id/class ${formSelector} was not found.`
+                )
+              );
+            }
+          }
+        }
+      });
+    }
+    if (config.engagementMedium === "EMBED") {
+      widget2 = this._renderEmbedWidget(params);
+    } else {
+      widget2 = this._renderPopupWidget(params);
+      if (displayOnLoad) widget2.open();
+    }
+    return widget2;
+  }
+  _renderPopupWidget(params) {
+    const widget2 = new PopupWidget(params, params.context.trigger);
+    widget2.load();
+    return widget2;
+  }
+  _renderEmbedWidget(params) {
+    const widget2 = new EmbedWidget(params, params.context.container);
+    widget2.load();
+    return widget2;
+  }
+  /**
+   * @hidden
+   * @param {Object} error The json object containing the error details
+   * @param {string} em The engagementMedium
+   * @returns {void}
+   */
+  _renderErrorWidget(props, em = "POPUP") {
+    const { apiErrorCode, rsCode, message } = props;
+    _log$5(new Error(`${apiErrorCode} (${rsCode}) ${message}`));
+    const params = {
+      content: "error",
+      rsCode,
+      api: this.api,
+      domain: this.domain,
+      npmCdn: this.npmCdn,
+      type: "ERROR_WIDGET",
+      context: { type: "error" }
+    };
+    let widget2;
+    if (em === "EMBED") {
+      widget2 = new EmbedWidget(params);
+      widget2.load();
+    } else if (em === "POPUP") {
+      widget2 = new PopupWidget(params);
+      widget2.load();
+    }
+  }
+  /**
+   * @hidden
+   * @param {string} rule A regular expression
+   * @returns {boolean} true if rule matches Url, false otherwise
+   */
+  static _matchesUrl(rule) {
+    return window.location.href.match(new RegExp(rule)) ? true : false;
+  }
+}
+class EventsApi {
+  /**
+   * Initialize a new {@link EventsApi} instance.
+   *
+   * @param {ConfigOptions} config Config details
+   *
+   * @example <caption>Browser example</caption>
+   * var squatchApi = new squatch.EventsApi({tenantAlias:'test_12b5bo1b25125'});
+   *
+   * @example <caption>Browserify/Webpack example</caption>
+   * var EventsApi = require('@saasquatch/squatch-js').EventsApi;
+   * var squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
+   *
+   * @example <caption>Babel+Browserify/Webpack example</caption>
+   * import {EventsApi} from '@saasquatch/squatch-js';
+   * let squatchApi = new EventsApi({tenantAlias:'test_12b5bo1b25125'});
+   */
+  constructor(config) {
+    __publicField(this, "tenantAlias");
+    __publicField(this, "domain");
+    const raw = config;
+    const clean = validateConfig(raw);
+    this.tenantAlias = clean.tenantAlias;
+    this.domain = clean.domain;
+  }
+  /**
+   * Track an event for a user
+   *
+   * @param params Parameters for request
+   * @param options.jwt the JSON Web Token (JWT) that is used to authenticate the user
+   *
+   * @return An ID to confirm the event has been accepted for asynchronous processing
+   */
+  track(params, options) {
+    const raw = params;
+    const rawOpts = options;
+    const body = _validateEvent(raw);
+    const { jwt } = _validateTrackOptions(rawOpts);
+    const ta = encodeURIComponent(this.tenantAlias);
+    const userId = encodeURIComponent(body.userId);
+    const accountId = encodeURIComponent(body.accountId);
+    const path = `/api/v1/${ta}/open/account/${accountId}/user/${userId}/events`;
+    const url = this.domain + path;
+    return doPost(url, JSON.stringify(body), jwt);
+  }
+}
+function _validateEvent(raw) {
+  if (!isObject$1(raw)) throw new Error("tracking parameter must be an object");
+  if (!(raw == null ? void 0 : raw["accountId"])) throw new Error("accountId field is required");
+  if (!(raw == null ? void 0 : raw["events"])) throw new Error("events field is required");
+  if (!(raw == null ? void 0 : raw["userId"])) throw new Error("userId field is required");
+  const clean = raw;
+  if (!Array.isArray(clean.events))
+    throw new Error("'events' should be an array");
+  return clean;
+}
+function _validateTrackOptions(raw) {
+  if (!isObject$1(raw)) throw new Error("'options' should be an object");
+  return raw;
+}
+function asyncLoad() {
+  var _a2;
+  const namespace = window[IMPACT_NAMESPACE] ? IMPACT_NAMESPACE : DEFAULT_NAMESPACE;
+  const cached = ((_a2 = window["_" + namespace]) == null ? void 0 : _a2.ready) || [];
+  const declarativeCache = window.impactOnReady || window.squatchOnReady;
+  const readyFns = [...cached, declarativeCache].filter((a) => !!a);
+  setTimeout(() => {
+    if (!window[DEFAULT_NAMESPACE]) return;
+    window[IMPACT_NAMESPACE] = window[DEFAULT_NAMESPACE];
+    readyFns.forEach((cb) => cb());
+    window[DEFAULT_NAMESPACE]._auto();
+    window["_" + namespace] = void 0;
+    delete window["_" + namespace];
+  }, 0);
+}
+const _log$4 = browserExports.debug("squatch-js");
+const isObject = (item) => typeof item === "object" && !Array.isArray(item);
+const deepMerge = (target, source) => {
+  const isDeep = (prop) => isObject(source[prop]) && target.hasOwnProperty(prop) && isObject(target[prop]);
+  const replaced = Object.getOwnPropertyNames(source).map((prop) => ({
+    [prop]: isDeep(prop) ? deepMerge(target[prop], source[prop]) : source[prop]
+  })).reduce((a, b) => ({ ...a, ...b }), {});
+  return {
+    ...target,
+    ...replaced
+  };
 };
+function b64decode(input) {
+  const binary = atob(input.replace(/_/g, "/").replace(/-/g, "+"));
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new TextDecoder("utf8").decode(bytes);
+}
+function b64encode(input) {
+  const encodedInput = new TextEncoder().encode(input);
+  const binary = Array.from(
+    encodedInput,
+    (byte) => String.fromCodePoint(byte)
+  ).join("");
+  return btoa(binary).replace(/=/g, "").replace(/\+/g, "-").replace(/\//g, "_");
+}
+function getTopDomain() {
+  var i, h, weird_cookie = "weird_get_top_level_domain=cookie", hostname = document.location.hostname.split(".");
+  for (i = hostname.length - 1; i >= 0; i--) {
+    h = hostname.slice(i).join(".");
+    document.cookie = weird_cookie + ";domain=." + h + ";";
+    if (document.cookie.indexOf(weird_cookie) > -1) {
+      document.cookie = weird_cookie.split("=")[0] + "=;domain=." + h + ";expires=Thu, 01 Jan 1970 00:00:01 GMT;";
+      return h;
+    }
+  }
+}
+function _pushCookie() {
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  const refParam = urlParams.get("_saasquatch") || "";
+  if (refParam) {
+    let paramsJSON = "", existingCookie = "", reEncodedCookie = "";
+    try {
+      paramsJSON = JSON.parse(b64decode(refParam));
+    } catch (error) {
+      _log$4("Unable to decode params", error);
+      return;
+    }
+    try {
+      existingCookie = JSON.parse(b64decode(api$1.get("_saasquatch")));
+      _log$4("existing cookie", existingCookie);
+    } catch (error) {
+      _log$4("Unable to retrieve cookie", error);
+    }
+    try {
+      const domain = getTopDomain();
+      _log$4("domain retrieved:", domain);
+      if (existingCookie) {
+        const newCookie = deepMerge(existingCookie, paramsJSON);
+        reEncodedCookie = b64encode(JSON.stringify(newCookie));
+        _log$4("cookie to store:", newCookie);
+      } else {
+        reEncodedCookie = b64encode(JSON.stringify(paramsJSON));
+        _log$4("cookie to store:", paramsJSON);
+      }
+      api$1.set("_saasquatch", reEncodedCookie, {
+        expires: 365,
+        secure: false,
+        sameSite: "Lax",
+        domain,
+        path: "/"
+      });
+    } catch (error) {
+      _log$4("Unable to set cookie", error);
+    }
+  }
+}
+const _log$3 = browserExports.debug("squatch-js");
+function _getAutoConfig() {
+  var _a2;
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  const refParam = urlParams.get("_saasquatchExtra") || "";
+  if (!refParam) {
+    _log$3("No _saasquatchExtra param");
+    return;
+  }
+  const config = validateConfig({
+    tenantAlias: "UNKNOWN"
+  });
+  if (!config.domain) {
+    _log$3("domain must be provided in config to use _saasquatchExtra");
+    return;
+  }
+  let raw;
+  try {
+    raw = JSON.parse(b64decode(refParam));
+  } catch (e) {
+    _log$3("Unable to decode _saasquatchExtra config");
+    return;
+  }
+  function normalizeDomain(domain) {
+    return domain.replace(/^https?:\/\//, "");
+  }
+  const normalizedDomain = normalizeDomain(config.domain);
+  const tenantAlias = Object.keys((raw == null ? void 0 : raw[normalizedDomain]) || {})[0];
+  const widgetConfig = (_a2 = raw == null ? void 0 : raw[normalizedDomain]) == null ? void 0 : _a2[tenantAlias];
+  if (!widgetConfig) {
+    _log$3("_saasquatchExtra did not have an expected structure");
+    return void 0;
+  }
+  const { autoPopupWidgetType, ...rest } = widgetConfig;
+  return {
+    widgetConfig: {
+      widgetType: autoPopupWidgetType,
+      displayOnLoad: true,
+      ...rest
+    },
+    squatchConfig: {
+      ...config,
+      tenantAlias
+    }
+  };
+}
 const _log$2 = browserExports.debug("squatch-js:decodeUserJwt");
 function decodeUserJwt(tokenStr) {
   var _a2;
@@ -2412,8 +2480,12 @@ class DeclarativePopupWidget extends DeclarativeWidget {
     skeletonContainer.id = "loading-skeleton";
     skeletonContainer.innerHTML = skeletonHTML;
     const root = this.shadowRoot || this.attachShadow({ mode: "open" });
-    root.innerHTML = "";
-    root.appendChild(skeletonContainer);
+    const container = root.getElementById("#squatchModal");
+    console.log("Container is ", container);
+    if (container) {
+      container.innerHTML = "";
+      container.appendChild(skeletonContainer);
+    }
     await this.renderWidget();
     const loadingElement = root.getElementById("loading-skeleton");
     if (loadingElement) {