@liquidcommercedev/rmn-sdk 1.4.6-beta.8 → 1.5.0-beta.1

package/dist/index.cjs

@@ -15000,7 +15000,7 @@ class BaseApi extends BaseApiAbstract {
      */
     async post(path, data, configOverrides) {
         let requestData = data;
-        if (this.authInfo.env !== exports.RMN_ENV.LOCAL) {
+        if (![exports.RMN_ENV.LOCAL, exports.RMN_ENV.DEVELOPMENT].includes(this.authInfo.env)) {
             const timestamp = new Date().getTime();
             configOverrides = {
                 ...configOverrides,
@@ -15205,6 +15205,78 @@ class IntersectionObserverService {
     }
 }
 
+class LocalStorage {
+    constructor() {
+        this.spots = new Map();
+        // Sync local storage with the current state
+        this.syncLocalStorage();
+        // Remove expired spots
+        this.removeExpiredSpots();
+    }
+    static getInstance() {
+        if (!LocalStorage.instance) {
+            LocalStorage.instance = new LocalStorage();
+        }
+        return LocalStorage.instance;
+    }
+    syncLocalStorage() {
+        const localStorageData = localStorage.getItem(LocalStorage.localStorageKey);
+        // TODO: Encrypt the data before storing it in the local storage
+        if (localStorageData) {
+            try {
+                const parsedData = JSON.parse(localStorageData);
+                if (parsedData && typeof parsedData === 'object') {
+                    this.spots = this.objToMap(parsedData);
+                }
+                else {
+                    this.clearLocalStorage();
+                }
+            }
+            catch (_a) {
+                // If there is an error parsing the data, clear the local storage to prevent any issues
+                this.clearLocalStorage();
+            }
+        }
+    }
+    setSpot(spotId, data) {
+        data.createdAt = Date.now();
+        this.spots.set(spotId, data);
+        this.updateLocalStorage();
+    }
+    getSpot(spotId) {
+        return this.spots.get(spotId);
+    }
+    removeSpot(spotId) {
+        this.spots.delete(spotId);
+        this.updateLocalStorage();
+    }
+    updateLocalStorage() {
+        const data = this.mapToObj(this.spots);
+        localStorage.setItem(LocalStorage.localStorageKey, JSON.stringify(data));
+    }
+    clearLocalStorage() {
+        localStorage.removeItem(LocalStorage.localStorageKey);
+    }
+    removeExpiredSpots() {
+        const currentTime = Date.now();
+        this.spots.forEach((spot, spotId) => {
+            var _a;
+            if (currentTime - ((_a = spot.createdAt) !== null && _a !== void 0 ? _a : 0) > LocalStorage.spotExpirationTime) {
+                this.spots.delete(spotId);
+            }
+        });
+        this.updateLocalStorage();
+    }
+    mapToObj(map) {
+        return Object.fromEntries(map);
+    }
+    objToMap(obj) {
+        return new Map(Object.entries(obj));
+    }
+}
+LocalStorage.localStorageKey = 'lc_rmn';
+LocalStorage.spotExpirationTime = 1000 * 60 * 60 * 24 * 7; // 7 days
+
 class ResizeObserverService {
     constructor({ element, maxSize, minScale }) {
         this.element = element;
@@ -15337,11 +15409,25 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
         display: flex;
         align-items: center;
         gap: 8px;
+        opacity: var(--opacity, 1);
     }
 
-    .dots .dot {
+    .dots.small .dot {
+        width: 8px;
+        height: 8px;
+    }
+
+    .dots.base .dot {
         width: 12px;
         height: 12px;
+    }
+
+    .dots.large .dot {
+        width: 16px;
+        height: 16px;
+    }
+
+    .dots .dot {
         border-radius: 50%;
         cursor: pointer;
         transition: all 0.3s ease;
@@ -15389,6 +15475,10 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
         flex-direction: column;
     }
 
+    .buttons {
+        opacity: var(--opacity, 1);
+    }
+
     .buttons button {
         background-color: #00000080;
         color: #fff;
@@ -15398,6 +15488,18 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
         transition: background-color 0.3s ease;
     }
 
+    .buttons.small button {
+        padding: 6px;
+    }
+
+    .buttons.base button {
+        padding: 10px;
+    }
+
+    .buttons.large button {
+        padding: 14px;
+    }
+
     .buttons button:hover {
         background-color: #000000b3;
     }
@@ -15470,11 +15572,6 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
             padding: 8px 12px;
             font-size: 14px;
         }
-
-        .dots .dot {
-            width: 8px;
-            height: 8px;
-        }
     }
 `;
 
@@ -15514,6 +15611,8 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 position: 'bottom-center',
                 color: '#d9d9d9',
                 activeColor: '#b5914a',
+                size: 'base',
+                opacity: 1,
                 ...(typeof ((_j = this.data) === null || _j === void 0 ? void 0 : _j.useDots) === 'object' ? this.data.useDots : {}),
             };
             this.buttonsOptions = {
@@ -15524,6 +15623,8 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 borderRadius: '50%',
                 prev: 'Prev',
                 next: 'Next',
+                size: 'base',
+                opacity: 1,
                 ...(typeof ((_k = this.data) === null || _k === void 0 ? void 0 : _k.useButtons) === 'object' ? this.data.useButtons : {}),
             };
             this.validateOptions();
@@ -15609,7 +15710,8 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         }
         renderDots() {
             const dotsContainer = document.createElement('div');
-            dotsContainer.className = `dots ${this.dotsOptions.position}`;
+            dotsContainer.className = `dots ${this.dotsOptions.position} ${this.dotsOptions.size}`;
+            dotsContainer.style.cssText = `--opacity: ${this.dotsOptions.opacity}`;
             this.slides.forEach((_, index) => {
                 const dot = document.createElement('span');
                 dot.className = `dot ${index === this.currentSlide ? 'active' : ''}`;
@@ -15623,7 +15725,8 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             const buttonsClass = this.buttonsOptions.together
                 ? `buttons-together ${this.buttonsOptions.position}`
                 : 'buttons-separate';
-            buttonsContainer.className = `buttons ${buttonsClass}`;
+            buttonsContainer.className = `buttons ${buttonsClass} ${this.buttonsOptions.size}`;
+            buttonsContainer.style.cssText = `--opacity: ${this.buttonsOptions.opacity}`;
             this.prevButton = this.createButton('prev-button', this.buttonsOptions.prev);
             this.nextButton = this.createButton('next-button', this.buttonsOptions.next);
             buttonsContainer.appendChild(this.prevButton);
@@ -15857,14 +15960,15 @@ class ElementService {
      * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
      */
     createSpotElement({ content, config }) {
-        var _a;
+        var _a, _b;
         if (!this.ensureBrowserEnvironmentAndDefineElement()) {
             return null;
         }
         const spot = document.createElement(SPOT_ELEMENT_TAG);
+        spot.setAttribute('type', (_a = config === null || config === void 0 ? void 0 : config.spot) !== null && _a !== void 0 ? _a : '');
         spot.data = {
             spot: config === null || config === void 0 ? void 0 : config.spot,
-            fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
+            fluid: (_b = config === null || config === void 0 ? void 0 : config.fluid) !== null && _b !== void 0 ? _b : false,
             ...config,
         };
         spot.content = content;
@@ -15930,11 +16034,172 @@ class ElementService {
     }
 }
 
-function linearGradientColorStop(overlay, fallback) {
-    if (!overlay || overlay.length === 0) {
+class UniqueIdGenerator {
+    /**
+     * Initialize the generator with a node ID
+     * @param nodeId Number between 0-1023 to identify this instance
+     */
+    static initialize(nodeId = Math.floor(Math.random() * 1024)) {
+        if (nodeId < 0 || nodeId >= 1 << this.nodeBits) {
+            throw new Error(`Node ID must be between 0 and ${(1 << this.nodeBits) - 1}`);
+        }
+        this.nodeId = nodeId;
+    }
+    /**
+     * Convert a number to base32 string with specified length
+     */
+    static toBase32(num, length) {
+        let result = '';
+        while (num > 0) {
+            result = this.base32Chars[Number(num % BigInt(32))] + result;
+            // @ts-expect-error - TS doesn't support bigint division
+            num = num / 32n;
+        }
+        return result.padStart(length, '0');
+    }
+    /**
+     * Generate a cryptographically secure random number
+     */
+    static getSecureRandom() {
+        if (typeof crypto !== 'undefined') {
+            const buffer = new Uint32Array(1);
+            crypto.getRandomValues(buffer);
+            return buffer[0];
+        }
+        return Math.floor(Math.random() * 0xffffffff);
+    }
+    /**
+     * Wait until next millisecond
+     */
+    static waitNextMillis(lastTimestamp) {
+        let timestamp = Date.now();
+        while (timestamp <= lastTimestamp) {
+            timestamp = Date.now();
+        }
+        return timestamp;
+    }
+    /**
+     * Generates a highly unique ID with the following format:
+     * TTTTTTTTTTCCCCNNNNNRRRR
+     * T: Timestamp (10 chars)
+     * C: Counter (4 chars)
+     * N: Node ID (5 chars)
+     * R: Random (4 chars)
+     *
+     * Total length: 23 characters, always uppercase alphanumeric
+     */
+    static generate() {
+        if (this.nodeId === undefined) {
+            this.initialize();
+        }
+        let timestamp = Date.now() - this.epoch;
+        // Handle clock moving backwards or same millisecond
+        if (timestamp < this.lastTimestamp) {
+            throw new Error('Clock moved backwards. Refusing to generate ID.');
+        }
+        if (timestamp === this.lastTimestamp) {
+            this.sequence = (this.sequence + 1) & ((1 << this.sequenceBits) - 1);
+            if (this.sequence === 0) {
+                timestamp = this.waitNextMillis(this.lastTimestamp);
+            }
+        }
+        else {
+            this.sequence = 0;
+        }
+        this.lastTimestamp = timestamp;
+        // Generate random component
+        const random = this.getSecureRandom() & 0xffff; // 16 bits of randomness
+        // Combine all components into a BigInt
+        // const id =
+        //   (BigInt(timestamp) << BigInt(this.nodeBits + this.sequenceBits + 16)) |
+        //   (BigInt(this.nodeId) << BigInt(this.sequenceBits + 16)) |
+        //   (BigInt(this.sequence) << BigInt(16)) |
+        //   BigInt(random);
+        // Convert to base32 representation
+        const timeComponent = this.toBase32(BigInt(timestamp), 10);
+        const counterComponent = this.toBase32(BigInt(this.sequence), 4);
+        const nodeComponent = this.toBase32(BigInt(this.nodeId), 5);
+        const randomComponent = this.toBase32(BigInt(random), 4);
+        return `${timeComponent}${counterComponent}${nodeComponent}${randomComponent}`;
+    }
+    /**
+     * Validates if a string matches the expected ID format
+     */
+    static isValid(id) {
+        if (!/^[0-9A-HJ-NP-Z]{23}$/.test(id))
+            return false;
+        try {
+            const timeComponent = id.slice(0, 10);
+            const timestamp = this.decodeBase32(timeComponent);
+            const now = Date.now() - this.epoch;
+            return timestamp >= 0 && timestamp <= now;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /**
+     * Decode base32 string to number
+     */
+    static decodeBase32(str) {
+        let result = 0;
+        for (const char of str) {
+            result = result * 32 + this.base32Chars.indexOf(char);
+        }
+        return result;
+    }
+    /**
+     * Extract timestamp from ID
+     */
+    static getTimestamp(id) {
+        if (!this.isValid(id))
+            throw new Error('Invalid ID format');
+        const timeComponent = id.slice(0, 10);
+        const timestamp = this.decodeBase32(timeComponent);
+        return new Date(timestamp + this.epoch);
+    }
+}
+// Constants for bit manipulation
+UniqueIdGenerator.epoch = 1577836800000; // 2020-01-01 as epoch
+UniqueIdGenerator.nodeBits = 10;
+UniqueIdGenerator.sequenceBits = 12;
+// Instance variables
+UniqueIdGenerator.lastTimestamp = -1;
+UniqueIdGenerator.sequence = 0;
+// Character set for base32 encoding (excluding similar looking characters)
+UniqueIdGenerator.base32Chars = '0123456789ABCDEFGHJKMNPQRSTVWXYZ';
+
+function convertHexToRgba(hex, opacity = 1) {
+    // Remove # if present
+    const cleanHex = hex.replace('#', '');
+    // Convert hex to RGB
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+    // Return rgba string
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function generateGradientColor(overlay, fallback = '') {
+    if (!overlay) {
         return fallback;
     }
-    return overlay.map(({ color, colorStop }) => `${color} ${colorStop}`).join(', ');
+    const OVERLAY_SIZE = {
+        small: 10,
+        base: 30,
+        large: 50,
+    };
+    const OVERLAY_OPACITY = {
+        light: 0.1,
+        medium: 0.4,
+        dark: 0.6,
+    };
+    const { size, opacity, color } = overlay;
+    const goTo = OVERLAY_SIZE[size];
+    const overlayOpacity = OVERLAY_OPACITY[opacity];
+    const fullColor = convertHexToRgba(color, 1);
+    const transparentColor = convertHexToRgba(color, 0);
+    const gradientColor = convertHexToRgba(color, overlayOpacity);
+    return `${fullColor} 0%, ${gradientColor} ${goTo}%, ${transparentColor} 100%`;
 }
 function spotHtmlStringToElement(htmlString) {
     const spot = document.createElement('div');
@@ -16798,7 +17063,7 @@ function rbCollectionBannerWithoutTextBlockTemplate(spot, config) {
 }
 
 const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
-    const linearGradient = linearGradientColorStop(overlay || [], 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
+    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
     return `
         <style>
             .${prefix} {
@@ -17289,7 +17554,7 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
 }
 
 const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
-    const linearGradient = linearGradientColorStop(overlay || [], 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
     return `
     <style>
       .${prefix} {
@@ -17426,7 +17691,7 @@ function rbLargeCategoryImageToutTemplate(spot, config) {
 }
 
 const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix, overlay }) => {
-    const linearGradient = linearGradientColorStop(overlay || [], 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
     return `
   <style>
     .${prefix} {
@@ -17443,11 +17708,7 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       background-position: center;
       background-repeat: no-repeat;
       container-type: inline-size;
-    }
-
-    .${prefix}__text {
-      padding: 15px 10%;
-      width: fit-content;
+      position: relative;
     }
 
     .${prefix}__header {
@@ -17458,6 +17719,7 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       font-family: "Source Sans 3", system-ui;
       font-style: normal;
       margin: 0;
+      padding: 15px 10%;
     }
 
     @container (min-width: 640px) {
@@ -17493,15 +17755,13 @@ function rbNavigationBannerTemplate(spot, config) {
     ${GFONT_SOURCE_SANS_3}
     ${STYLES$2(spot, config)}
     <div class="${prefix}">
-      <div class="${prefix}__text">
         ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-      </div>
     </div>
   `;
 }
 
 const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix, overlay }) => {
-    const linearGradient = linearGradientColorStop(overlay || [], 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
     return `
     <style>
       .${prefix} {
@@ -17697,8 +17957,8 @@ const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     if (!variantTemplate) {
         return null;
     }
-    // Generate a random prefix to avoid conflicts with other elements.
-    const prefix = 's' + Math.random().toString(36).substring(6);
+    // Generate a highly unique prefix to avoid conflicts with other elements.
+    const prefix = 's' + UniqueIdGenerator.generate().toLowerCase();
     const spotHtmlString = variantTemplate(spot, { ...config, prefix });
     return spotHtmlStringToElement(spotHtmlString);
 };
@@ -17715,6 +17975,12 @@ class PubSub {
          */
         this.subscribers = {};
     }
+    static getInstance() {
+        if (!PubSub.instance) {
+            PubSub.instance = new PubSub();
+        }
+        return PubSub.instance;
+    }
     /**
      * Subscribe to an event
      * @param eventType - The type of event to subscribe to
@@ -17780,7 +18046,8 @@ class PubSub {
 
 class EventService {
     constructor() {
-        this.pubSub = new PubSub();
+        this.pubSub = PubSub.getInstance();
+        this.localStorage = LocalStorage.getInstance();
         this.activeSpots = new Map();
         this.spotStates = new Map();
         this.intersectionObserver = new IntersectionObserverService();
@@ -17797,6 +18064,59 @@ class EventService {
     publish(eventType, data) {
         this.pubSub.publish(eventType, data);
     }
+    registerSpot(params) {
+        const { placementId, spot, spotElement } = params;
+        this.activeSpots.set(placementId, { spotElement });
+        // Fire impression event
+        this.fireImpressionEvent(placementId, spot, spotElement);
+        // Handle intersection observer
+        this.handleIntersectionObserver(placementId, spot, spotElement);
+        // Attach click event listener
+        spotElement.addEventListener('click', async () => await this.handleClick(params));
+    }
+    unregisterSpot(placementId) {
+        const placementIdClean = placementId.replace('#', '');
+        const spotData = this.activeSpots.get(placementIdClean);
+        if (!spotData) {
+            this.handleSpotState(placementIdClean, {
+                state: {
+                    error: `Active spot with placementId ${placementIdClean} not found.`,
+                },
+            });
+            return;
+        }
+        this.intersectionObserver.unobserve(spotData.spotElement);
+        this.handleSpotState(placementIdClean, {
+            dom: {
+                spotElement: undefined,
+                visibleOnViewport: false,
+            },
+            state: {
+                unmounted: true,
+                mounted: false,
+            },
+        });
+        this.activeSpots.delete(placementIdClean);
+        const placementElement = document.getElementById(placementIdClean);
+        if (!placementElement) {
+            this.handleSpotState(placementIdClean, {
+                state: {
+                    error: `Placement element with id ${placementIdClean} not found.`,
+                },
+            });
+            return;
+        }
+        placementElement.innerHTML = '';
+    }
+    /**
+     * Updates the state of a spot.
+     *
+     * @param {string} placementId - The placement ID of the spot.
+     * @param {Partial<ILifecycleState>} updates - The updates to apply to the spot state.
+     * @param {boolean} publish - Whether to publish the updated state.
+     *
+     * @returns {void}
+     */
     handleSpotState(placementId, updates, publish = true) {
         let currentState = this.spotStates.get(placementId);
         if (!currentState) {
@@ -17807,8 +18127,8 @@ class EventService {
                     spotType: '',
                 },
                 dom: {
-                    element: undefined,
-                    visible: false,
+                    spotElement: undefined,
+                    visibleOnViewport: false,
                 },
                 state: {
                     mounted: false,
@@ -17823,81 +18143,57 @@ class EventService {
                 },
             };
         }
-        this.spotStates.set(placementId, {
-            ...currentState,
-            ...updates,
-        });
+        this.spotStates.set(placementId, { ...currentState, ...updates });
         if (publish) {
             this.pubSub.publish(exports.RMN_SPOT_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
         }
     }
-    registerSpot({ placementId, element, spot }) {
-        this.activeSpots.set(spot.id, {
+    async handleClick({ placementId, spot, spotElement, }) {
+        var _a, _b, _c;
+        // Publish click event
+        this.pubSub.publish(exports.RMN_SPOT_EVENT.CLICK, {
             placementId,
-            element,
-            impressionTracked: false,
+            spotId: spot.id,
+            spotElement,
         });
-        // Handle intersection observer
-        this.handleIntersectionObserver(placementId, spot, element);
-        // Attach click event listener
-        element.addEventListener('click', async () => {
-            var _a, _b;
-            this.pubSub.publish(exports.RMN_SPOT_EVENT.CLICK, {
-                placementId,
-                spotId: spot.id,
-                element,
-            });
-            // Fire click event
-            await this.fireEvent({
-                event: exports.RMN_SPOT_EVENT.CLICK,
-                eventUrl: (_b = (_a = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.CLICK)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
-            });
+        // Fire click event
+        await this.fireEvent({
+            event: exports.RMN_SPOT_EVENT.CLICK,
+            eventUrl: (_b = (_a = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.CLICK)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+        });
+        // Save spot to local storage for event tracking
+        this.localStorage.setSpot(spot.id, {
+            spotId: spot.id,
+            spotType: spot.spot,
+            events: spot.events,
+            productIds: (_c = spot.productIds) !== null && _c !== void 0 ? _c : [1, 'GROUPING-12345', 'DAN-12345', 131398103],
         });
     }
-    unregisterSpot(spotId) {
-        const spotData = this.activeSpots.get(spotId);
-        if (spotData) {
-            this.intersectionObserver.unobserve(spotData.element);
-            this.handleSpotState(spotData.placementId, {
+    handleIntersectionObserver(placementId, _spot, spotElement) {
+        const spotIsVisibleCallback = async () => {
+            this.intersectionObserver.unobserve(spotElement);
+            this.handleSpotState(placementId, {
                 dom: {
-                    element: undefined,
-                    visible: false,
-                },
-                state: {
-                    unmounted: true,
-                    mounted: false,
+                    spotElement,
+                    visibleOnViewport: true,
                 },
             });
-            this.activeSpots.delete(spotId);
-        }
+        };
+        this.intersectionObserver.observe(spotElement, spotIsVisibleCallback);
     }
-    handleIntersectionObserver(placementId, spot, element) {
-        const spotIsVisibleCb = async () => {
+    fireImpressionEvent(placementId, spot, spotElement) {
+        this.pubSub.publish(exports.RMN_SPOT_EVENT.IMPRESSION, {
+            placementId,
+            spotId: spot.id,
+            spotElement,
+        });
+        (async () => {
             var _a, _b;
-            this.pubSub.publish(exports.RMN_SPOT_EVENT.IMPRESSION, {
-                placementId,
-                spotId: spot.id,
-                element,
-            });
-            this.intersectionObserver.unobserve(element);
-            this.activeSpots.set(spot.id, {
-                placementId,
-                element,
-                impressionTracked: true,
-            });
-            this.handleSpotState(placementId, {
-                dom: {
-                    element,
-                    visible: true,
-                },
-            });
-            // Fire impression event
             await this.fireEvent({
                 event: exports.RMN_SPOT_EVENT.IMPRESSION,
                 eventUrl: (_b = (_a = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.IMPRESSION)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
             });
-        };
-        this.intersectionObserver.observe(element, spotIsVisibleCb);
+        })();
     }
     /**
      * Fires an event using the navigator.sendBeacon method and redirects the user if the event is a click event.
@@ -17962,23 +18258,178 @@ class SelectionService extends BaseApi {
     }
 }
 
+const SPOT_EVENTS_EXAMPLE = [
+    {
+        event: exports.RMN_SPOT_EVENT.CLICK,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwidXIiOm51bGx9&s=hWz37kbxi_u95EVNn2aoQhc5Aas',
+    },
+    {
+        event: exports.RMN_SPOT_EVENT.IMPRESSION,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiYmEiOjEsImZxIjowfQ&s=djoysjCimurf-5T11AlNAwwLSS8',
+    },
+    {
+        event: exports.RMN_SPOT_EVENT.PURCHASE,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjU5fQ&s=AAPAw-3SfZ0JMzjEGFSwt9L-2S4',
+    },
+    {
+        event: exports.RMN_SPOT_EVENT.ADD_TO_CART,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjYwfQ&s=uzQFcjgL7m9XqUG8FvTPVN5YkZY',
+    },
+    {
+        event: exports.RMN_SPOT_EVENT.ADD_TO_WISHLIST,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjYzfQ&s=m3ISU_iIy-OFtXrTKpI6cJAEC0k',
+    },
+    {
+        event: exports.RMN_SPOT_EVENT.BUY_NOW,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjY5fQ&s=l6MOscQC-q-FkC2Ksd7w6jjySCQ',
+    },
+];
+const RB_SPOTS_SELECTION_EXAMPLE = {
+    rbHomepageHeroFullImage: [
+        {
+            id: '111111_111111',
+            spot: exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            variant: exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            width: 1140,
+            height: 640,
+            header: 'Artisanal Craft Beer Collection',
+            description: 'Discover our curated selection of small-batch, flavor-packed craft beers.',
+            ctaText: 'Explore the Collection',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Craft+Beer+Collection',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Craft+Beer',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+        {
+            id: '222222_222222',
+            spot: exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            variant: exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            width: 1140,
+            height: 640,
+            header: 'Summer Wine Spectacular',
+            description: 'Refresh your palate with our handpicked selection of crisp, summer wines.',
+            ctaText: 'Shop Summer Wines',
+            textColor: '#000000',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Summer+Wines',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Summer+Wines',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbHomepageHeroTwoTile: [
+        {
+            id: '333333_333333',
+            spot: exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            variant: exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Whiskey Wonderland',
+            description: 'Embark on a journey through our premium whiskey selection.',
+            ctaText: 'Discover Whiskeys',
+            textColor: '#ffffff',
+            backgroundColor: '#2c1a05',
+            ctaTextColor: '#2c1a05',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Whiskey+Collection',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Whiskey',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbHomepageHeroThreeTile: [
+        {
+            id: '444444_444444',
+            spot: exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            variant: exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Cocktail Essentials',
+            description: 'Stock your bar with premium spirits and mixers for the perfect cocktail.',
+            ctaText: 'Build Your Bar',
+            textColor: '#ffffff',
+            backgroundColor: '#1a3c4d',
+            ctaTextColor: '#1a3c4d',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Cocktail+Spirits',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Cocktail+Mixers',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Cocktail+Kit',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Cocktail+Mixers',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbLargeCategoryImageTout: [
+        {
+            id: '555555_555555',
+            spot: exports.RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
+            variant: exports.RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
+            width: 468,
+            height: 410,
+            header: 'Rare & Limited Edition',
+            description: 'Discover our collection of hard-to-find and limited release spirits.',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/468x410/png?text=Rare+Spirits',
+            mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Rare+Spirits',
+            ctaText: 'Shop Rare Spirits',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbSmallDiscoverTout: [
+        {
+            id: '666666_666666',
+            spot: exports.RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            variant: exports.RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            width: 224,
+            height: 378,
+            header: 'Château Margaux 2015 Bordeaux',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x378/png?text=Château+Margaux',
+            mobilePrimaryImage: 'https://placehold.co/224x378/png?text=Mobile+Château+Margaux',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbSmallCategoryImageTout: [
+        {
+            id: '777777_777777',
+            spot: exports.RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
+            variant: exports.RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
+            width: 224,
+            height: 410,
+            header: 'Japanese Sake',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x410/png?text=Japanese+Sake',
+            mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Japanese+Sake',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbCollectionBannerWithoutTextBlock: [
+        {
+            id: '888888_888888',
+            spot: exports.RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
+            variant: exports.RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
+            width: 887,
+            height: 344,
+            primaryImage: 'https://placehold.co/887x344/png?text=Summer+Cocktails',
+            mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Summer+Cocktails',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbNavigationBanner: [
+        {
+            id: '999999_999999',
+            spot: exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            variant: exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            width: 440,
+            height: 220,
+            header: 'Explore Tequilas',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/440x220/png?text=Tequila+Collection',
+            mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Tequila+Collection',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+};
+
 class LiquidCommerceRmnClient {
     constructor(auth) {
-        /**
-         * Returns the event manager instance.
-         *
-         * @return {EventService} - The event manager instance.
-         */
-        this.eventManager = {
-            subscribe: (eventType, callback
-            /* eslint-disable arrow-body-style */
-            ) => {
-                return this.eventService.subscribe(eventType, callback);
-            },
-            publish: (eventType, data) => {
-                this.eventService.publish(eventType, data);
-            },
-        };
         this.selectionService = SelectionService.getInstance(auth);
         this.elementService = ElementService.getInstance();
         this.eventService = EventService.getInstance();
@@ -18026,6 +18477,7 @@ class LiquidCommerceRmnClient {
         inject = this.preventNonExistentSpotTypes(inject);
         // Make the spot selection request
         const response = await this.spotSelectionRequest({ ...params, inject });
+        // const response = await this.useSpotSelectionExample(inject);
         // Handle the response
         if (typeof response === 'object' && 'error' in response) {
             this.eventService.handleSpotState('all', {
@@ -18058,6 +18510,15 @@ class LiquidCommerceRmnClient {
                 });
                 continue;
             }
+            // Take over placement styles
+            placement.removeAttribute('style');
+            placement.removeAttribute('class');
+            Object.assign(placement.style, {
+                width: '100%',
+                height: 'auto',
+                display: 'flex',
+                justifyContent: 'center',
+            });
             if (spots.length === 1) {
                 const isInjected = this.injectOneSpotElement(item, placement, spots[0], itemConfig);
                 if (!isInjected) {
@@ -18084,14 +18545,12 @@ class LiquidCommerceRmnClient {
         const request = {
             url: config === null || config === void 0 ? void 0 : config.url,
             filter,
-            spots: inject.map((item) => {
-                return {
-                    placementId: item.placementId,
-                    spot: item.spotType,
-                    count: item === null || item === void 0 ? void 0 : item.count,
-                    ...item === null || item === void 0 ? void 0 : item.filter,
-                };
-            }),
+            spots: inject.map((item) => ({
+                placementId: item.placementId,
+                spot: item.spotType,
+                count: item === null || item === void 0 ? void 0 : item.count,
+                ...item === null || item === void 0 ? void 0 : item.filter,
+            })),
         };
         return this.spotSelection(request);
     }
@@ -18129,17 +18588,15 @@ class LiquidCommerceRmnClient {
             this.eventService.registerSpot({
                 spot,
                 placementId: placement.id,
-                element: content,
+                spotElement: content,
             });
             carouselSlides.push(content);
         }
         // Get the max width and height of the spots
-        const { maxWidth, maxHeight } = spots.reduce((max, spot) => {
-            return {
-                maxWidth: Math.max(max.maxWidth, spot.width),
-                maxHeight: Math.max(max.maxHeight, spot.height),
-            };
-        }, { maxWidth: 0, maxHeight: 0 });
+        const { maxWidth, maxHeight } = spots.reduce((max, spot) => ({
+            maxWidth: Math.max(max.maxWidth, spot.width),
+            maxHeight: Math.max(max.maxHeight, spot.height),
+        }), { maxWidth: 0, maxHeight: 0 });
         // Create the carousel element
         const carouselElement = this.elementService.createCarouselElement({
             slides: carouselSlides,
@@ -18163,7 +18620,7 @@ class LiquidCommerceRmnClient {
         placement.replaceChildren(carouselElement);
         this.eventService.handleSpotState(placement.id, {
             dom: {
-                element: carouselElement,
+                spotElement: carouselElement,
             },
             state: {
                 mounted: true,
@@ -18224,12 +18681,12 @@ class LiquidCommerceRmnClient {
         this.eventService.registerSpot({
             spot: spotData,
             placementId: injectItem.placementId,
-            element: spotElement,
+            spotElement,
         });
         placement.replaceChildren(spotElement);
         this.eventService.handleSpotState(injectItem.placementId, {
             dom: {
-                element: spotElement,
+                spotElement,
             },
             state: {
                 mounted: true,
@@ -18290,6 +18747,17 @@ class LiquidCommerceRmnClient {
             });
         }
     }
+    useSpotSelectionExample(inject) {
+        const examples = RB_SPOTS_SELECTION_EXAMPLE;
+        const data = {};
+        inject.map((item) => {
+            var _a, _b, _c;
+            data[item.placementId] = (_c = (_a = examples[item.spotType]) === null || _a === void 0 ? void 0 : _a.slice(0, (_b = item.count) !== null && _b !== void 0 ? _b : 1)) !== null && _c !== void 0 ? _c : [];
+        });
+        return new Promise((resolve) => {
+            resolve(data);
+        });
+    }
 }
 /**
  * Creates a new instance of the RmnClient.
@@ -18304,6 +18772,36 @@ async function RmnClient(apiKey, config) {
     const credentials = await authService.initialize();
     return new LiquidCommerceRmnClient(credentials);
 }
+/**
+ * Creates a new instance of the RmnEventManager.
+ *
+ * @return {IRmnEventManager} - The RmnEventManager instance.
+ */
+function RmnEventManager() {
+    const eventService = EventService.getInstance();
+    return {
+        /**
+         * Subscribes to an event type.
+         */
+        subscribe: (eventType, callback
+        /* eslint-disable arrow-body-style */
+        ) => {
+            return eventService.subscribe(eventType, callback);
+        },
+        /**
+         * Publishes an event type.
+         */
+        publish: (eventType, data) => {
+            eventService.publish(eventType, data);
+        },
+        /**
+         * Destroys a spot element
+         */
+        destroySpot: (placementId) => {
+            eventService.unregisterSpot(placementId);
+        },
+    };
+}
 /**
  * Creates the spot html element based on the provided data using shadow dom.
  *
@@ -18339,3 +18837,4 @@ function RmnCreateSpotElement(spot, config) {
 exports.LiquidCommerceRmnClient = LiquidCommerceRmnClient;
 exports.RmnClient = RmnClient;
 exports.RmnCreateSpotElement = RmnCreateSpotElement;
+exports.RmnEventManager = RmnEventManager;