@prosdevlab/experience-sdk-plugins 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,11 +1,14 @@
 import { storagePlugin } from '@lytics/sdk-kit-plugins';
 
 // src/utils/sanitize.ts
-var ALLOWED_TAGS = ["strong", "em", "a", "br", "span", "b", "i", "p"];
+var ALLOWED_TAGS = ["strong", "em", "a", "br", "span", "b", "i", "p", "div", "ul", "li"];
 var ALLOWED_ATTRIBUTES = {
   a: ["href", "class", "style", "title"],
   span: ["class", "style"],
-  p: ["class", "style"]
+  p: ["class", "style"],
+  div: ["class", "style"],
+  ul: ["class", "style"],
+  li: ["class", "style"]
   // Other tags have no attributes allowed
 };
 function sanitizeHTML(html) {
@@ -115,15 +118,15 @@ var bannerPlugin = (plugin, instance, config) => {
         left: 0;
         right: 0;
         width: 100%;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        font-size: 14px;
-        line-height: 1.5;
+        font-family: var(--xp-banner-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+        font-size: var(--xp-banner-font-size, 14px);
+        line-height: var(--xp-banner-line-height, 1.5);
         box-sizing: border-box;
-        z-index: 10000;
-        background: #ffffff;
-        color: #111827;
-        border-bottom: 1px solid #e5e7eb;
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+        z-index: var(--xp-banner-z-index, 10000);
+        background: var(--xp-banner-bg, #ffffff);
+        color: var(--xp-banner-color, #111827);
+        border-bottom: var(--xp-banner-border-width, 1px) solid var(--xp-banner-border-color, #e5e7eb);
+        box-shadow: var(--xp-banner-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.05));
       }
       
       .xp-banner--top {
@@ -133,17 +136,17 @@ var bannerPlugin = (plugin, instance, config) => {
       .xp-banner--bottom {
         bottom: 0;
         border-bottom: none;
-        border-top: 1px solid #e5e7eb;
-        box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.05);
+        border-top: var(--xp-banner-border-width, 1px) solid var(--xp-banner-border-color, #e5e7eb);
+        box-shadow: var(--xp-banner-shadow-bottom, 0 -1px 3px 0 rgba(0, 0, 0, 0.05));
       }
       
       .xp-banner__container {
         display: flex;
         align-items: center;
-        gap: 16px;
-        max-width: 1280px;
+        gap: var(--xp-banner-gap, 16px);
+        max-width: var(--xp-banner-max-width, 1280px);
         margin: 0 auto;
-        padding: 14px 24px;
+        padding: var(--xp-banner-padding, 14px 24px);
       }
       
       .xp-banner__content {
@@ -151,36 +154,37 @@ var bannerPlugin = (plugin, instance, config) => {
         min-width: 0;
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: var(--xp-banner-content-gap, 4px);
       }
       
       .xp-banner__title {
-        font-weight: 600;
+        font-weight: var(--xp-banner-title-weight, 600);
         margin: 0;
-        font-size: 15px;
-        line-height: 1.4;
+        font-size: var(--xp-banner-title-size, 15px);
+        line-height: var(--xp-banner-title-line-height, 1.4);
+        color: var(--xp-banner-title-color, inherit);
       }
       
       .xp-banner__message {
         margin: 0;
-        font-size: 14px;
-        line-height: 1.5;
-        color: #6b7280;
+        font-size: var(--xp-banner-message-size, 14px);
+        line-height: var(--xp-banner-message-line-height, 1.5);
+        color: var(--xp-banner-message-color, #6b7280);
       }
       
       .xp-banner__buttons {
         display: flex;
         align-items: center;
-        gap: 8px;
+        gap: var(--xp-banner-buttons-gap, 8px);
         flex-shrink: 0;
       }
       
       .xp-banner__button {
-        padding: 8px 16px;
+        padding: var(--xp-banner-button-padding, 8px 16px);
         border: none;
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 500;
+        border-radius: var(--xp-banner-button-radius, 6px);
+        font-size: var(--xp-banner-button-font-size, 14px);
+        font-weight: var(--xp-banner-button-font-weight, 500);
         cursor: pointer;
         transition: all 0.2s;
         text-decoration: none;
@@ -191,64 +195,64 @@ var bannerPlugin = (plugin, instance, config) => {
       }
       
       .xp-banner__button--primary {
-        background: #2563eb;
-        color: #ffffff;
+        background: var(--xp-banner-button-primary-bg, #2563eb);
+        color: var(--xp-banner-button-primary-color, #ffffff);
       }
       
       .xp-banner__button--primary:hover {
-        background: #1d4ed8;
+        background: var(--xp-banner-button-primary-bg-hover, #1d4ed8);
       }
       
       .xp-banner__button--secondary {
-        background: #f3f4f6;
-        color: #374151;
-        border: 1px solid #e5e7eb;
+        background: var(--xp-banner-button-secondary-bg, #f3f4f6);
+        color: var(--xp-banner-button-secondary-color, #374151);
+        border: var(--xp-banner-border-width, 1px) solid var(--xp-banner-button-secondary-border, #e5e7eb);
       }
       
       .xp-banner__button--secondary:hover {
-        background: #e5e7eb;
+        background: var(--xp-banner-button-secondary-bg-hover, #e5e7eb);
       }
       
       .xp-banner__button--link {
         background: transparent;
-        color: #2563eb;
-        padding: 6px 12px;
-        font-weight: 400;
+        color: var(--xp-banner-button-link-color, #2563eb);
+        padding: var(--xp-banner-button-link-padding, 6px 12px);
+        font-weight: var(--xp-banner-button-link-font-weight, 400);
       }
       
       .xp-banner__button--link:hover {
-        background: #f3f4f6;
+        background: var(--xp-banner-button-link-bg-hover, #f3f4f6);
         text-decoration: underline;
       }
       
       .xp-banner__close {
         background: transparent;
         border: none;
-        color: #9ca3af;
-        font-size: 20px;
+        color: var(--xp-banner-close-color, #9ca3af);
+        font-size: var(--xp-banner-close-size, 20px);
         line-height: 1;
         cursor: pointer;
-        padding: 4px;
+        padding: var(--xp-banner-close-padding, 4px);
         margin: 0;
         transition: color 0.2s;
         flex-shrink: 0;
-        width: 28px;
-        height: 28px;
+        width: var(--xp-banner-close-width, 28px);
+        height: var(--xp-banner-close-height, 28px);
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: 4px;
+        border-radius: var(--xp-banner-close-radius, 4px);
       }
       
       .xp-banner__close:hover {
-        color: #111827;
-        background: #f3f4f6;
+        color: var(--xp-banner-close-color-hover, #111827);
+        background: var(--xp-banner-close-bg-hover, #f3f4f6);
       }
       
       @media (max-width: 640px) {
         .xp-banner__container {
           flex-wrap: wrap;
-          padding: 14px 16px;
+          padding: var(--xp-banner-padding-mobile, 14px 16px);
           position: relative;
         }
         
@@ -273,55 +277,55 @@ var bannerPlugin = (plugin, instance, config) => {
         }
       }
       
-      /* Dark mode support */
+      /* Dark mode support - override CSS variables */
       @media (prefers-color-scheme: dark) {
         .xp-banner {
-          background: #111827;
-          color: #f9fafb;
-          border-bottom-color: #1f2937;
+          background: var(--xp-banner-bg-dark, #111827);
+          color: var(--xp-banner-color-dark, #f9fafb);
+          border-bottom-color: var(--xp-banner-border-color-dark, #1f2937);
         }
         
         .xp-banner--bottom {
-          border-top-color: #1f2937;
+          border-top-color: var(--xp-banner-border-color-dark, #1f2937);
         }
         
         .xp-banner__message {
-          color: #9ca3af;
+          color: var(--xp-banner-message-color-dark, #9ca3af);
         }
         
         .xp-banner__button--primary {
-          background: #3b82f6;
+          background: var(--xp-banner-button-primary-bg-dark, #3b82f6);
         }
         
         .xp-banner__button--primary:hover {
-          background: #2563eb;
+          background: var(--xp-banner-button-primary-bg-hover-dark, #2563eb);
         }
         
         .xp-banner__button--secondary {
-          background: #1f2937;
-          color: #f9fafb;
-          border-color: #374151;
+          background: var(--xp-banner-button-secondary-bg-dark, #1f2937);
+          color: var(--xp-banner-button-secondary-color-dark, #f9fafb);
+          border-color: var(--xp-banner-button-secondary-border-dark, #374151);
         }
         
         .xp-banner__button--secondary:hover {
-          background: #374151;
+          background: var(--xp-banner-button-secondary-bg-hover-dark, #374151);
         }
         
         .xp-banner__button--link {
-          color: #60a5fa;
+          color: var(--xp-banner-button-link-color-dark, #60a5fa);
         }
         
         .xp-banner__button--link:hover {
-          background: #1f2937;
+          background: var(--xp-banner-button-link-bg-hover-dark, #1f2937);
         }
         
         .xp-banner__close {
-          color: #6b7280;
+          color: var(--xp-banner-close-color-dark, #6b7280);
         }
         
         .xp-banner__close:hover {
-          color: #f9fafb;
-          background: #1f2937;
+          color: var(--xp-banner-close-color-hover-dark, #f9fafb);
+          background: var(--xp-banner-close-bg-hover-dark, #1f2937);
         }
       }
     `;
@@ -726,10 +730,9 @@ var exitIntentPlugin = (plugin, instance, config) => {
     }
   });
   initialize();
-  const destroyHandler = () => {
+  instance.on("sdk:destroy", () => {
     cleanup();
-  };
-  instance.on("destroy", destroyHandler);
+  });
 };
 var frequencyPlugin = (plugin, instance, config) => {
   plugin.ns("frequency");
@@ -858,6 +861,1160 @@ var frequencyPlugin = (plugin, instance, config) => {
     });
   }
 };
+
+// src/inline/insertion.ts
+function insertContent(selector, content, position, experienceId) {
+  const target = document.querySelector(selector);
+  if (!target) {
+    return null;
+  }
+  const wrapper = document.createElement("div");
+  wrapper.className = "xp-inline";
+  wrapper.setAttribute("data-xp-id", experienceId);
+  wrapper.innerHTML = content;
+  switch (position) {
+    case "replace":
+      target.innerHTML = "";
+      target.appendChild(wrapper);
+      break;
+    case "append":
+      target.appendChild(wrapper);
+      break;
+    case "prepend":
+      target.insertBefore(wrapper, target.firstChild);
+      break;
+    case "before":
+      target.parentElement?.insertBefore(wrapper, target);
+      break;
+    case "after":
+      target.parentElement?.insertBefore(wrapper, target.nextSibling);
+      break;
+  }
+  return wrapper;
+}
+function removeContent(experienceId) {
+  const element = document.querySelector(`[data-xp-id="${experienceId}"]`);
+  if (!element) {
+    return false;
+  }
+  element.remove();
+  return true;
+}
+
+// src/inline/inline.ts
+var inlinePlugin = (plugin, instance, config) => {
+  plugin.ns("experiences.inline");
+  plugin.defaults({
+    inline: {
+      retry: false,
+      retryTimeout: 5e3
+    }
+  });
+  if (!instance.storage) {
+    instance.use(storagePlugin);
+  }
+  const sdkInstance = instance;
+  if (typeof document !== "undefined") {
+    const styleId = "xp-inline-styles";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = getInlineStyles();
+      document.head.appendChild(style);
+    }
+  }
+  const activeInlines = /* @__PURE__ */ new Map();
+  const show = (experience) => {
+    const { id, content } = experience;
+    if (activeInlines.has(id)) {
+      return;
+    }
+    if (content.persist && content.dismissable && sdkInstance.storage) {
+      const dismissed = sdkInstance.storage.get(`xp-inline-dismissed-${id}`);
+      if (dismissed) {
+        instance.emit("experiences:inline:dismissed", {
+          experienceId: id,
+          reason: "previously-dismissed",
+          timestamp: Date.now()
+        });
+        return;
+      }
+    }
+    const element = insertContent(
+      content.selector,
+      sanitizeHTML(content.message),
+      content.position || "replace",
+      id
+    );
+    if (!element) {
+      instance.emit("experiences:inline:error", {
+        experienceId: id,
+        error: "selector-not-found",
+        selector: content.selector,
+        timestamp: Date.now()
+      });
+      const retryEnabled = config.get("inline.retry") ?? false;
+      const retryTimeout = config.get("inline.retryTimeout") ?? 5e3;
+      if (retryEnabled) {
+        setTimeout(() => {
+          show(experience);
+        }, retryTimeout);
+      }
+      return;
+    }
+    activeInlines.set(id, element);
+    if (content.className) {
+      element.classList.add(content.className);
+    }
+    if (content.style) {
+      Object.assign(element.style, content.style);
+    }
+    if (content.dismissable) {
+      const closeBtn = document.createElement("button");
+      closeBtn.className = "xp-inline__close";
+      closeBtn.setAttribute("aria-label", "Close");
+      closeBtn.textContent = "\xD7";
+      closeBtn.onclick = () => {
+        remove(id);
+        if (content.persist && sdkInstance.storage) {
+          sdkInstance.storage.set(`xp-inline-dismissed-${id}`, true);
+        }
+        instance.emit("experiences:dismissed", {
+          experienceId: id,
+          timestamp: Date.now()
+        });
+      };
+      element.prepend(closeBtn);
+    }
+    instance.emit("experiences:shown", {
+      experienceId: id,
+      type: "inline",
+      selector: content.selector,
+      position: content.position || "replace",
+      timestamp: Date.now()
+    });
+  };
+  const remove = (experienceId) => {
+    const element = activeInlines.get(experienceId);
+    if (!element) return;
+    removeContent(experienceId);
+    activeInlines.delete(experienceId);
+  };
+  const isShowing = (experienceId) => {
+    if (experienceId) {
+      return activeInlines.has(experienceId);
+    }
+    return activeInlines.size > 0;
+  };
+  plugin.expose({
+    inline: {
+      show,
+      remove,
+      isShowing
+    }
+  });
+  instance.on("experiences:evaluated", (data) => {
+    if (data.decision?.show && data.experience?.type === "inline") {
+      show(data.experience);
+    }
+  });
+  instance.on("sdk:destroy", () => {
+    for (const id of Array.from(activeInlines.keys())) {
+      remove(id);
+    }
+  });
+};
+function getInlineStyles() {
+  return `
+    :root {
+      --xp-inline-close-size: 24px;
+      --xp-inline-close-color: #666;
+      --xp-inline-close-hover-color: #111;
+      --xp-inline-close-bg: transparent;
+      --xp-inline-close-hover-bg: rgba(0, 0, 0, 0.05);
+      --xp-inline-close-border-radius: 4px;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --xp-inline-close-color: #9ca3af;
+        --xp-inline-close-hover-color: #f9fafb;
+        --xp-inline-close-hover-bg: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    .xp-inline {
+      position: relative;
+      animation: xp-inline-enter 0.4s ease-out forwards;
+    }
+
+    @keyframes xp-inline-enter {
+      from {
+        opacity: 0;
+        transform: translateY(-8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Respect user's motion preferences */
+    @media (prefers-reduced-motion: reduce) {
+      .xp-inline {
+        animation: xp-inline-enter-reduced 0.2s ease-out forwards;
+      }
+      
+      @keyframes xp-inline-enter-reduced {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    }
+
+    .xp-inline__close {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: var(--xp-inline-close-size);
+      height: var(--xp-inline-close-size);
+      padding: 0;
+      border: none;
+      background: var(--xp-inline-close-bg);
+      color: var(--xp-inline-close-color);
+      font-size: 20px;
+      line-height: 1;
+      cursor: pointer;
+      border-radius: var(--xp-inline-close-border-radius);
+      transition: all 0.2s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+    }
+
+    .xp-inline__close:hover {
+      background: var(--xp-inline-close-hover-bg);
+      color: var(--xp-inline-close-hover-color);
+    }
+  `;
+}
+
+// src/modal/form-styles.ts
+function getFormStyles() {
+  return `
+    margin-top: var(--xp-form-spacing, 16px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--xp-form-gap, 16px);
+  `.trim();
+}
+function getFieldStyles() {
+  return `
+    display: flex;
+    flex-direction: column;
+    gap: var(--xp-field-gap, 6px);
+  `.trim();
+}
+function getLabelStyles() {
+  return `
+    font-size: var(--xp-label-font-size, 14px);
+    font-weight: var(--xp-label-font-weight, 500);
+    color: var(--xp-label-color, #374151);
+    line-height: 1.5;
+  `.trim();
+}
+function getRequiredStyles() {
+  return `
+    color: var(--xp-required-color, #ef4444);
+  `.trim();
+}
+function getInputStyles() {
+  return `
+    padding: var(--xp-input-padding, 8px 12px);
+    font-size: var(--xp-input-font-size, 14px);
+    line-height: 1.5;
+    color: var(--xp-input-color, #111827);
+    background-color: var(--xp-input-bg, white);
+    border: var(--xp-input-border-width, 1px) solid var(--xp-input-border-color, #d1d5db);
+    border-radius: var(--xp-input-radius, 6px);
+    transition: all 0.15s ease-in-out;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+  `.trim();
+}
+function getInputErrorStyles() {
+  return `
+    border-color: var(--xp-input-error-border, #ef4444);
+  `.trim();
+}
+function getErrorMessageStyles() {
+  return `
+    font-size: var(--xp-error-font-size, 13px);
+    color: var(--xp-error-color, #ef4444);
+    line-height: 1.4;
+    min-height: 18px;
+  `.trim();
+}
+function getSubmitButtonStyles() {
+  return `
+    margin-top: var(--xp-submit-margin-top, 8px);
+    padding: var(--xp-submit-padding, 10px 20px);
+    font-size: var(--xp-submit-font-size, 14px);
+    font-weight: var(--xp-submit-font-weight, 500);
+    color: var(--xp-submit-color, white);
+    background-color: var(--xp-submit-bg, #2563eb);
+    border: none;
+    border-radius: var(--xp-submit-radius, 6px);
+    cursor: pointer;
+    transition: all 0.2s;
+    width: 100%;
+  `.trim();
+}
+function getSubmitButtonHoverBg() {
+  return "var(--xp-submit-bg-hover, #1d4ed8)";
+}
+function getFormStateStyles() {
+  return `
+    padding: var(--xp-state-padding, 16px);
+    border-radius: var(--xp-state-radius, 8px);
+    text-align: center;
+  `.trim();
+}
+function getSuccessStateStyles() {
+  return `
+    background-color: var(--xp-success-bg, #f0fdf4);
+    border: var(--xp-state-border-width, 1px) solid var(--xp-success-border, #86efac);
+  `.trim();
+}
+function getErrorStateStyles() {
+  return `
+    background-color: var(--xp-error-bg, #fef2f2);
+    border: var(--xp-state-border-width, 1px) solid var(--xp-error-border, #fca5a5);
+  `.trim();
+}
+function getStateTitleStyles() {
+  return `
+    font-size: var(--xp-state-title-font-size, 16px);
+    font-weight: var(--xp-state-title-font-weight, 600);
+    margin: 0 0 var(--xp-state-title-margin-bottom, 8px) 0;
+    color: var(--xp-state-title-color, #111827);
+  `.trim();
+}
+function getStateMessageStyles() {
+  return `
+    font-size: var(--xp-state-message-font-size, 14px);
+    line-height: 1.5;
+    color: var(--xp-state-message-color, #374151);
+    margin: 0;
+  `.trim();
+}
+function getStateButtonsStyles() {
+  return `
+    margin-top: var(--xp-state-buttons-margin-top, 16px);
+    display: flex;
+    gap: var(--xp-state-buttons-gap, 8px);
+    justify-content: center;
+    flex-wrap: wrap;
+  `.trim();
+}
+
+// src/modal/form-rendering.ts
+function renderForm(experienceId, config) {
+  const form = document.createElement("form");
+  form.className = "xp-modal__form";
+  form.style.cssText = getFormStyles();
+  form.dataset.xpExperienceId = experienceId;
+  form.setAttribute("novalidate", "");
+  config.fields.forEach((field) => {
+    const fieldElement = renderFormField(experienceId, field);
+    form.appendChild(fieldElement);
+  });
+  const submitButton = renderSubmitButton(config.submitButton);
+  form.appendChild(submitButton);
+  return form;
+}
+function renderFormField(experienceId, field) {
+  const wrapper = document.createElement("div");
+  wrapper.className = "xp-form__field";
+  wrapper.style.cssText = getFieldStyles();
+  if (field.label) {
+    const label = document.createElement("label");
+    label.className = "xp-form__label";
+    label.style.cssText = getLabelStyles();
+    label.htmlFor = `${experienceId}-${field.name}`;
+    label.textContent = field.label;
+    if (field.required) {
+      const required = document.createElement("span");
+      required.className = "xp-form__required";
+      required.style.cssText = getRequiredStyles();
+      required.textContent = " *";
+      required.setAttribute("aria-label", "required");
+      label.appendChild(required);
+    }
+    wrapper.appendChild(label);
+  }
+  const input = field.type === "textarea" ? document.createElement("textarea") : document.createElement("input");
+  input.className = "xp-form__input";
+  input.style.cssText = getInputStyles();
+  input.id = `${experienceId}-${field.name}`;
+  input.name = field.name;
+  if (input instanceof HTMLInputElement) {
+    input.type = field.type;
+  }
+  if (field.placeholder) {
+    input.placeholder = field.placeholder;
+  }
+  if (field.required) {
+    input.required = true;
+  }
+  if (field.pattern && input instanceof HTMLInputElement) {
+    input.setAttribute("pattern", field.pattern);
+  }
+  input.setAttribute("aria-invalid", "false");
+  input.setAttribute("aria-describedby", `${experienceId}-${field.name}-error`);
+  if (field.className) {
+    input.className += ` ${field.className}`;
+  }
+  if (field.style) {
+    Object.assign(input.style, field.style);
+  }
+  wrapper.appendChild(input);
+  const error = document.createElement("div");
+  error.className = "xp-form__error";
+  error.style.cssText = getErrorMessageStyles();
+  error.id = `${experienceId}-${field.name}-error`;
+  error.setAttribute("role", "alert");
+  error.setAttribute("aria-live", "polite");
+  wrapper.appendChild(error);
+  return wrapper;
+}
+function renderSubmitButton(buttonConfig) {
+  const button = document.createElement("button");
+  button.type = "submit";
+  button.className = "xp-form__submit xp-modal__button";
+  button.style.cssText = getSubmitButtonStyles();
+  if (buttonConfig.variant) {
+    button.className += ` xp-modal__button--${buttonConfig.variant}`;
+  }
+  if (buttonConfig.className) {
+    button.className += ` ${buttonConfig.className}`;
+  }
+  button.textContent = buttonConfig.text;
+  const hoverBg = getSubmitButtonHoverBg();
+  button.onmouseover = () => {
+    button.style.backgroundColor = hoverBg;
+  };
+  button.onmouseout = () => {
+    button.style.backgroundColor = "";
+  };
+  if (buttonConfig.style) {
+    Object.assign(button.style, buttonConfig.style);
+  }
+  return button;
+}
+function renderFormState(state, stateConfig) {
+  const stateEl = document.createElement("div");
+  stateEl.className = `xp-form__state xp-form__state--${state}`;
+  const baseStyles = getFormStateStyles();
+  const stateStyles = state === "success" ? getSuccessStateStyles() : getErrorStateStyles();
+  stateEl.style.cssText = `${baseStyles}; ${stateStyles}`;
+  if (stateConfig.title) {
+    const title = document.createElement("h3");
+    title.className = "xp-form__state-title";
+    title.style.cssText = getStateTitleStyles();
+    title.textContent = stateConfig.title;
+    stateEl.appendChild(title);
+  }
+  const message = document.createElement("div");
+  message.className = "xp-form__state-message";
+  message.style.cssText = getStateMessageStyles();
+  message.textContent = stateConfig.message;
+  stateEl.appendChild(message);
+  if (stateConfig.buttons && stateConfig.buttons.length > 0) {
+    const buttonContainer = document.createElement("div");
+    buttonContainer.className = "xp-form__state-buttons";
+    buttonContainer.style.cssText = getStateButtonsStyles();
+    stateConfig.buttons.forEach((btnConfig) => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "xp-modal__button";
+      if (btnConfig.variant) {
+        btn.className += ` xp-modal__button--${btnConfig.variant}`;
+      }
+      if (btnConfig.className) {
+        btn.className += ` ${btnConfig.className}`;
+      }
+      btn.textContent = btnConfig.text;
+      if (btnConfig.style) {
+        Object.assign(btn.style, btnConfig.style);
+      }
+      if (btnConfig.action) {
+        btn.dataset.action = btnConfig.action;
+      }
+      if (btnConfig.dismiss) {
+        btn.dataset.dismiss = "true";
+      }
+      buttonContainer.appendChild(btn);
+    });
+    stateEl.appendChild(buttonContainer);
+  }
+  return stateEl;
+}
+
+// src/modal/form-validation.ts
+function validateField(field, value) {
+  const errors = {};
+  if (field.required && (!value || value.trim() === "")) {
+    errors[field.name] = field.errorMessage || `${field.label || field.name} is required`;
+    return { valid: false, errors };
+  }
+  if (!value || value.trim() === "") {
+    return { valid: true };
+  }
+  switch (field.type) {
+    case "email": {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(value)) {
+        errors[field.name] = field.errorMessage || "Please enter a valid email address";
+      }
+      break;
+    }
+    case "url": {
+      try {
+        new URL(value);
+      } catch {
+        errors[field.name] = field.errorMessage || "Please enter a valid URL";
+      }
+      break;
+    }
+    case "tel": {
+      const phoneRegex = /^[\d\s\-()+]+$/;
+      if (!phoneRegex.test(value)) {
+        errors[field.name] = field.errorMessage || "Please enter a valid phone number";
+      }
+      break;
+    }
+    case "number": {
+      if (Number.isNaN(Number(value))) {
+        errors[field.name] = field.errorMessage || "Please enter a valid number";
+      }
+      break;
+    }
+  }
+  if (field.pattern && value) {
+    try {
+      const regex = new RegExp(field.pattern);
+      if (!regex.test(value)) {
+        errors[field.name] = field.errorMessage || `Invalid format for ${field.label || field.name}`;
+      }
+    } catch (_error) {
+      console.warn(`Invalid regex pattern for field ${field.name}:`, field.pattern);
+    }
+  }
+  return {
+    valid: Object.keys(errors).length === 0,
+    errors: Object.keys(errors).length > 0 ? errors : void 0
+  };
+}
+function validateForm(config, data) {
+  const errors = {};
+  config.fields.forEach((field) => {
+    const value = data[field.name] || "";
+    const result = validateField(field, value);
+    if (!result.valid && result.errors) {
+      Object.assign(errors, result.errors);
+    }
+  });
+  if (config.validate) {
+    try {
+      const customResult = config.validate(data);
+      if (!customResult.valid && customResult.errors) {
+        Object.assign(errors, customResult.errors);
+      }
+    } catch (error) {
+      console.error("Custom validation function threw an error:", error);
+    }
+  }
+  return {
+    valid: Object.keys(errors).length === 0,
+    errors: Object.keys(errors).length > 0 ? errors : void 0
+  };
+}
+
+// src/modal/modal-styles.ts
+function getBackdropStyles() {
+  return `
+    position: absolute;
+    inset: 0;
+    background-color: var(--xp-modal-backdrop-bg, rgba(0, 0, 0, 0.5));
+  `.trim();
+}
+function getDialogStyles(params) {
+  return `
+    position: relative;
+    background: var(--xp-modal-dialog-bg, white);
+    border-radius: var(--xp-modal-dialog-radius, ${params.borderRadius});
+    box-shadow: var(--xp-modal-dialog-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+    max-width: ${params.width};
+    width: ${params.maxWidth};
+    height: ${params.height};
+    max-height: ${params.maxHeight};
+    overflow-y: auto;
+    padding: ${params.padding};
+  `.trim();
+}
+function getHeroImageStyles(params) {
+  return `
+    width: 100%;
+    height: auto;
+    max-height: ${params.maxHeight}px;
+    object-fit: cover;
+    border-radius: ${params.borderRadius};
+    display: block;
+    margin: 0;
+  `.trim();
+}
+function getCloseButtonStyles() {
+  return `
+    position: absolute;
+    top: var(--xp-modal-close-top, 16px);
+    right: var(--xp-modal-close-right, 16px);
+    background: none;
+    border: none;
+    font-size: var(--xp-modal-close-size, 24px);
+    line-height: 1;
+    cursor: pointer;
+    padding: var(--xp-modal-close-padding, 4px 8px);
+    color: var(--xp-modal-close-color, #666);
+    opacity: var(--xp-modal-close-opacity, 0.7);
+    transition: opacity 0.2s;
+  `.trim();
+}
+function getCloseButtonHoverOpacity() {
+  return "var(--xp-modal-close-hover-opacity, 1)";
+}
+function getCloseButtonDefaultOpacity() {
+  return "var(--xp-modal-close-opacity, 0.7)";
+}
+function getContentWrapperStyles(padding) {
+  return `padding: ${padding};`;
+}
+function getTitleStyles() {
+  return `
+    margin: 0 0 var(--xp-modal-title-margin-bottom, 16px) 0;
+    font-size: var(--xp-modal-title-size, 20px);
+    font-weight: var(--xp-modal-title-weight, 600);
+    color: var(--xp-modal-title-color, #111);
+  `.trim();
+}
+function getMessageStyles() {
+  return `
+    margin: 0 0 var(--xp-modal-message-margin-bottom, 20px) 0;
+    font-size: var(--xp-modal-message-size, 14px);
+    line-height: var(--xp-modal-message-line-height, 1.5);
+    color: var(--xp-modal-message-color, #444);
+  `.trim();
+}
+function getButtonContainerStyles() {
+  return `
+    display: flex;
+    gap: var(--xp-modal-buttons-gap, 8px);
+    flex-wrap: wrap;
+  `.trim();
+}
+function getPrimaryButtonStyles() {
+  return `
+    padding: var(--xp-button-padding, 10px 20px);
+    font-size: var(--xp-button-font-size, 14px);
+    font-weight: var(--xp-button-font-weight, 500);
+    border-radius: var(--xp-button-radius, 6px);
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+    background: var(--xp-button-primary-bg, #2563eb);
+    color: var(--xp-button-primary-color, white);
+  `.trim();
+}
+function getPrimaryButtonHoverBg() {
+  return "var(--xp-button-primary-bg-hover, #1d4ed8)";
+}
+function getPrimaryButtonDefaultBg() {
+  return "var(--xp-button-primary-bg, #2563eb)";
+}
+function getSecondaryButtonStyles() {
+  return `
+    padding: var(--xp-button-padding, 10px 20px);
+    font-size: var(--xp-button-font-size, 14px);
+    font-weight: var(--xp-button-font-weight, 500);
+    border-radius: var(--xp-button-radius, 6px);
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+    background: var(--xp-button-secondary-bg, #f3f4f6);
+    color: var(--xp-button-secondary-color, #374151);
+  `.trim();
+}
+function getSecondaryButtonHoverBg() {
+  return "var(--xp-button-secondary-bg-hover, #e5e7eb)";
+}
+function getSecondaryButtonDefaultBg() {
+  return "var(--xp-button-secondary-bg, #f3f4f6)";
+}
+
+// src/modal/modal.ts
+var modalPlugin = (plugin, instance) => {
+  plugin.ns("experiences.modal");
+  plugin.defaults({
+    modal: {
+      dismissable: true,
+      backdropDismiss: true,
+      zIndex: 10001,
+      size: "md",
+      mobileFullscreen: false,
+      position: "center",
+      animation: "fade",
+      animationDuration: 200
+    }
+  });
+  const activeModals = /* @__PURE__ */ new Map();
+  const previouslyFocusedElement = /* @__PURE__ */ new Map();
+  const formData = /* @__PURE__ */ new Map();
+  const getFocusableElements = (container) => {
+    const selector = 'a[href], button, textarea, input, select, details, [tabindex]:not([tabindex="-1"])';
+    return Array.from(container.querySelectorAll(selector)).filter(
+      (el) => !el.hasAttribute("disabled")
+    );
+  };
+  const createFocusTrap = (container) => {
+    const focusable = getFocusableElements(container);
+    if (focusable.length === 0) return () => {
+    };
+    const firstFocusable = focusable[0];
+    const lastFocusable = focusable[focusable.length - 1];
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          e.preventDefault();
+          lastFocusable.focus();
+        }
+      } else {
+        if (document.activeElement === lastFocusable) {
+          e.preventDefault();
+          firstFocusable.focus();
+        }
+      }
+    };
+    container.addEventListener("keydown", handleKeyDown);
+    firstFocusable.focus();
+    return () => {
+      container.removeEventListener("keydown", handleKeyDown);
+    };
+  };
+  const getSizeWidth = (size) => {
+    switch (size) {
+      case "sm":
+        return "400px";
+      case "md":
+        return "600px";
+      case "lg":
+        return "800px";
+      case "fullscreen":
+        return "100vw";
+      case "auto":
+        return "auto";
+      default:
+        return "600px";
+    }
+  };
+  const isMobile = () => {
+    return typeof window !== "undefined" && window.innerWidth < 640;
+  };
+  const renderModal = (experienceId, content) => {
+    const modalConfig = instance.get("modal") || {};
+    const zIndex = modalConfig.zIndex || 10001;
+    const size = modalConfig.size || "md";
+    const position = modalConfig.position || "center";
+    const animation = modalConfig.animation || "fade";
+    const animationDuration = modalConfig.animationDuration || 200;
+    const mobileFullscreen = modalConfig.mobileFullscreen !== void 0 ? modalConfig.mobileFullscreen : size === "lg";
+    const shouldBeFullscreen = size === "fullscreen" || mobileFullscreen && isMobile();
+    const container = document.createElement("div");
+    const sizeClass = shouldBeFullscreen ? "fullscreen" : size;
+    const positionClass = position === "bottom" ? "xp-modal--bottom" : "xp-modal--center";
+    const animationClass = animation !== "none" ? `xp-modal--${animation}` : "";
+    container.className = `xp-modal xp-modal--${sizeClass} ${positionClass} ${animationClass} ${content.className || ""}`.trim();
+    container.setAttribute("data-xp-id", experienceId);
+    container.setAttribute("role", "dialog");
+    container.setAttribute("aria-modal", "true");
+    if (content.title) {
+      container.setAttribute("aria-labelledby", `xp-modal-title-${experienceId}`);
+    }
+    const alignItems = position === "bottom" ? "flex-end" : "center";
+    container.style.cssText = `position: fixed; inset: 0; z-index: ${zIndex}; display: flex; align-items: ${alignItems}; justify-content: center;`;
+    if (animation !== "none") {
+      container.style.opacity = "0";
+      container.style.transition = `opacity ${animationDuration}ms ease-in-out`;
+      if (animation === "slide-up") {
+        container.style.transform = "translateY(100%)";
+        container.style.transition += `, transform ${animationDuration}ms ease-out`;
+      }
+    }
+    if (content.style) {
+      Object.entries(content.style).forEach(([key, value]) => {
+        container.style.setProperty(key, String(value));
+      });
+    }
+    const backdrop = document.createElement("div");
+    backdrop.className = "xp-modal__backdrop";
+    backdrop.style.cssText = getBackdropStyles();
+    container.appendChild(backdrop);
+    const dialog = document.createElement("div");
+    const dialogWidth = shouldBeFullscreen ? "100%" : size === "auto" ? "none" : getSizeWidth(size);
+    const dialogHeight = shouldBeFullscreen ? "100%" : "auto";
+    const dialogMaxWidth = shouldBeFullscreen ? "100%" : size === "auto" ? "none" : "90%";
+    const dialogBorderRadius = shouldBeFullscreen ? "0" : "8px";
+    const dialogPadding = content.image ? "0" : "24px";
+    dialog.className = `xp-modal__dialog${content.image ? " xp-modal__dialog--has-image" : ""}`;
+    dialog.style.cssText = getDialogStyles({
+      width: dialogWidth,
+      maxWidth: dialogMaxWidth,
+      height: dialogHeight,
+      maxHeight: shouldBeFullscreen ? "100%" : "90vh",
+      borderRadius: dialogBorderRadius,
+      padding: dialogPadding
+    });
+    container.appendChild(dialog);
+    if (content.image) {
+      const img = document.createElement("img");
+      img.className = "xp-modal__hero-image";
+      img.src = content.image.src;
+      img.alt = content.image.alt;
+      img.loading = "lazy";
+      const maxHeight = content.image.maxHeight || (isMobile() ? 200 : 300);
+      img.style.cssText = getHeroImageStyles({
+        maxHeight,
+        borderRadius: shouldBeFullscreen ? "0" : "8px 8px 0 0"
+      });
+      dialog.appendChild(img);
+    }
+    if (modalConfig.dismissable !== false) {
+      const closeButton = document.createElement("button");
+      closeButton.className = "xp-modal__close";
+      closeButton.setAttribute("aria-label", "Close dialog");
+      closeButton.innerHTML = "&times;";
+      closeButton.style.cssText = getCloseButtonStyles();
+      closeButton.onmouseover = () => {
+        closeButton.style.opacity = getCloseButtonHoverOpacity();
+      };
+      closeButton.onmouseout = () => {
+        closeButton.style.opacity = getCloseButtonDefaultOpacity();
+      };
+      closeButton.onclick = () => removeModal(experienceId);
+      dialog.appendChild(closeButton);
+    }
+    const contentWrapper = document.createElement("div");
+    contentWrapper.className = "xp-modal__content";
+    const contentPadding = content.image ? "24px" : "24px 24px 0 24px";
+    contentWrapper.style.cssText = getContentWrapperStyles(contentPadding);
+    if (content.title) {
+      const title = document.createElement("h2");
+      title.id = `xp-modal-title-${experienceId}`;
+      title.className = "xp-modal__title";
+      title.textContent = content.title;
+      title.style.cssText = getTitleStyles();
+      contentWrapper.appendChild(title);
+    }
+    const message = document.createElement("div");
+    message.className = "xp-modal__message";
+    message.innerHTML = sanitizeHTML(content.message);
+    message.style.cssText = getMessageStyles();
+    contentWrapper.appendChild(message);
+    if (content.form) {
+      const form = renderForm(experienceId, content.form);
+      contentWrapper.appendChild(form);
+      container.__formConfig = content.form;
+      const data = {};
+      content.form.fields.forEach((field) => {
+        data[field.name] = "";
+      });
+      formData.set(experienceId, data);
+      content.form.fields.forEach((field) => {
+        const input = form.querySelector(`#${experienceId}-${field.name}`);
+        const errorEl = form.querySelector(`#${experienceId}-${field.name}-error`);
+        if (!input) return;
+        input.addEventListener("input", () => {
+          const currentData = formData.get(experienceId) || {};
+          currentData[field.name] = input.value;
+          formData.set(experienceId, currentData);
+          instance.emit("experiences:modal:form:change", {
+            experienceId,
+            field: field.name,
+            value: input.value,
+            formData: { ...currentData },
+            timestamp: Date.now()
+          });
+        });
+        input.addEventListener("blur", () => {
+          const currentData = formData.get(experienceId) || {};
+          const result = validateField(field, currentData[field.name] || "");
+          if (!result.valid && result.errors) {
+            input.style.cssText += `; ${getInputErrorStyles()}`;
+            input.setAttribute("aria-invalid", "true");
+            errorEl.textContent = result.errors[field.name] || "";
+            instance.emit("experiences:modal:form:validation", {
+              experienceId,
+              field: field.name,
+              valid: false,
+              errors: result.errors,
+              timestamp: Date.now()
+            });
+          } else {
+            input.style.cssText = input.style.cssText.replace(getInputErrorStyles(), "");
+            input.setAttribute("aria-invalid", "false");
+            errorEl.textContent = "";
+            instance.emit("experiences:modal:form:validation", {
+              experienceId,
+              field: field.name,
+              valid: true,
+              timestamp: Date.now()
+            });
+          }
+        });
+      });
+      form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        if (!content.form) return;
+        const currentData = formData.get(experienceId) || {};
+        const result = validateForm(content.form, currentData);
+        if (!result.valid && result.errors) {
+          content.form.fields.forEach((field) => {
+            if (result.errors?.[field.name]) {
+              const input = form.querySelector(
+                `#${experienceId}-${field.name}`
+              );
+              const errorEl = form.querySelector(
+                `#${experienceId}-${field.name}-error`
+              );
+              if (input) {
+                input.style.cssText += `; ${getInputErrorStyles()}`;
+                input.setAttribute("aria-invalid", "true");
+              }
+              if (errorEl) {
+                errorEl.textContent = result.errors[field.name] || "";
+              }
+            }
+          });
+          instance.emit("experiences:modal:form:validation", {
+            experienceId,
+            valid: false,
+            errors: result.errors,
+            timestamp: Date.now()
+          });
+          return;
+        }
+        const submitButton = form.querySelector('button[type="submit"]');
+        if (submitButton) {
+          submitButton.disabled = true;
+          submitButton.textContent = "Submitting...";
+        }
+        instance.emit("experiences:modal:form:submit", {
+          experienceId,
+          formData: { ...currentData },
+          timestamp: Date.now()
+        });
+      });
+    } else if (content.buttons && content.buttons.length > 0) {
+      const buttonContainer = document.createElement("div");
+      buttonContainer.className = "xp-modal__buttons";
+      buttonContainer.style.cssText = getButtonContainerStyles();
+      content.buttons.forEach((button) => {
+        const btn = document.createElement("button");
+        btn.className = `xp-modal__button xp-modal__button--${button.variant || "secondary"}`;
+        btn.textContent = button.text;
+        if (button.variant === "primary") {
+          btn.style.cssText = getPrimaryButtonStyles();
+          btn.onmouseover = () => {
+            btn.style.background = getPrimaryButtonHoverBg();
+          };
+          btn.onmouseout = () => {
+            btn.style.background = getPrimaryButtonDefaultBg();
+          };
+        } else {
+          btn.style.cssText = getSecondaryButtonStyles();
+          btn.onmouseover = () => {
+            btn.style.background = getSecondaryButtonHoverBg();
+          };
+          btn.onmouseout = () => {
+            btn.style.background = getSecondaryButtonDefaultBg();
+          };
+        }
+        btn.onclick = () => {
+          instance.emit("experiences:action", {
+            experienceId,
+            action: button.action,
+            button,
+            timestamp: Date.now()
+          });
+          if (button.dismiss) {
+            removeModal(experienceId);
+          }
+          if (button.url) {
+            window.location.href = button.url;
+          }
+        };
+        buttonContainer.appendChild(btn);
+      });
+      contentWrapper.appendChild(buttonContainer);
+    }
+    dialog.appendChild(contentWrapper);
+    if (modalConfig.backdropDismiss !== false) {
+      backdrop.onclick = () => removeModal(experienceId);
+    }
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && modalConfig.dismissable !== false) {
+        removeModal(experienceId);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    container.__cleanupEscape = () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+    return container;
+  };
+  const showModal = (experience) => {
+    const experienceId = experience.id;
+    if (activeModals.has(experienceId)) return;
+    if (activeModals.size > 0) {
+      const existingIds = Array.from(activeModals.keys());
+      for (const id of existingIds) {
+        removeModal(id);
+      }
+    }
+    previouslyFocusedElement.set(experienceId, document.activeElement);
+    const modal = renderModal(experienceId, experience.content);
+    document.body.appendChild(modal);
+    activeModals.set(experienceId, modal);
+    const modalConfig = instance.get("modal") || {};
+    const animation = modalConfig.animation || "fade";
+    if (animation !== "none") {
+      requestAnimationFrame(() => {
+        modal.style.opacity = "1";
+        if (animation === "slide-up") {
+          modal.style.transform = "translateY(0)";
+        }
+      });
+    }
+    const cleanupFocusTrap = createFocusTrap(modal);
+    modal.__cleanupFocusTrap = cleanupFocusTrap;
+    instance.emit("experiences:shown", {
+      experienceId,
+      timestamp: Date.now()
+    });
+    instance.emit("trigger:modal", {
+      experienceId,
+      timestamp: Date.now(),
+      shown: true
+    });
+  };
+  const removeModal = (experienceId) => {
+    const modal = activeModals.get(experienceId);
+    if (!modal) return;
+    if (modal.__cleanupFocusTrap) {
+      modal.__cleanupFocusTrap();
+    }
+    if (modal.__cleanupEscape) {
+      modal.__cleanupEscape();
+    }
+    const previousElement = previouslyFocusedElement.get(experienceId);
+    if (previousElement && document.body.contains(previousElement)) {
+      previousElement.focus();
+    }
+    previouslyFocusedElement.delete(experienceId);
+    modal.remove();
+    activeModals.delete(experienceId);
+    instance.emit("experiences:dismissed", {
+      experienceId,
+      timestamp: Date.now()
+    });
+  };
+  const isShowing = (experienceId) => {
+    if (experienceId) {
+      return activeModals.has(experienceId);
+    }
+    return activeModals.size > 0;
+  };
+  const showFormState = (experienceId, state) => {
+    const modal = activeModals.get(experienceId);
+    if (!modal) return;
+    const form = modal.querySelector(".xp-modal__form");
+    if (!form) return;
+    const formConfig = modal.__formConfig;
+    if (!formConfig) return;
+    const stateConfig = state === "success" ? formConfig.successState : formConfig.errorState;
+    if (!stateConfig) return;
+    const stateEl = renderFormState(state, stateConfig);
+    form.replaceWith(stateEl);
+    instance.emit("experiences:modal:form:state", {
+      experienceId,
+      state,
+      timestamp: Date.now()
+    });
+  };
+  const resetForm = (experienceId) => {
+    const modal = activeModals.get(experienceId);
+    if (!modal) return;
+    const form = modal.querySelector(".xp-modal__form");
+    if (!form) return;
+    form.reset();
+    const data = formData.get(experienceId);
+    if (data) {
+      Object.keys(data).forEach((key) => {
+        data[key] = "";
+      });
+    }
+    const errors = form.querySelectorAll(".xp-form__error");
+    errors.forEach((error) => {
+      error.textContent = "";
+    });
+    const inputs = form.querySelectorAll(".xp-form__input");
+    inputs.forEach((input) => {
+      input.setAttribute("aria-invalid", "false");
+      input.style.cssText = input.style.cssText.replace(getInputErrorStyles(), "");
+    });
+  };
+  const getFormData = (experienceId) => {
+    return formData.get(experienceId) || null;
+  };
+  plugin.expose({
+    modal: {
+      show: showModal,
+      remove: removeModal,
+      isShowing,
+      showFormState,
+      resetForm,
+      getFormData
+    }
+  });
+  instance.on("experiences:evaluated", (data) => {
+    const { decision, experience } = data;
+    if (decision.show && decision.experienceId && experience) {
+      if (experience.type === "modal") {
+        showModal(experience);
+      }
+    }
+  });
+  instance.on("sdk:destroy", () => {
+    activeModals.forEach((_, id) => {
+      removeModal(id);
+    });
+  });
+};
 function respectsDNT() {
   if (typeof navigator === "undefined") return false;
   return navigator.doNotTrack === "1" || navigator.msDoNotTrack === "1" || window.doNotTrack === "1";
@@ -1175,10 +2332,9 @@ var scrollDepthPlugin = (plugin, instance, config) => {
     window.removeEventListener("scroll", throttledScrollHandler);
     window.removeEventListener("resize", throttledResizeHandler);
   }
-  const destroyHandler = () => {
+  instance.on("sdk:destroy", () => {
     cleanup();
-  };
-  instance.on("destroy", destroyHandler);
+  });
   plugin.expose({
     scrollDepth: {
       /**
@@ -1229,7 +2385,6 @@ var scrollDepthPlugin = (plugin, instance, config) => {
   }
   return () => {
     cleanup();
-    instance.off("destroy", destroyHandler);
   };
 };
 
@@ -1373,12 +2528,11 @@ var timeDelayPlugin = (plugin, instance, config) => {
     }
   });
   initialize();
-  const destroyHandler = () => {
+  instance.on("sdk:destroy", () => {
     cleanup();
-  };
-  instance.on("destroy", destroyHandler);
+  });
 };
 
-export { bannerPlugin, debugPlugin, exitIntentPlugin, frequencyPlugin, pageVisitsPlugin, scrollDepthPlugin, timeDelayPlugin };
+export { bannerPlugin, debugPlugin, exitIntentPlugin, frequencyPlugin, inlinePlugin, insertContent, modalPlugin, pageVisitsPlugin, removeContent, scrollDepthPlugin, timeDelayPlugin };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map