@liquidcommercedev/rmn-sdk 1.5.0-beta.2 → 1.5.0-beta.21

package/dist/index.cjs

@@ -3,6 +3,7 @@
 exports.RMN_SPOT_TYPE = void 0;
 (function (RMN_SPOT_TYPE) {
     // Reserve Bar Spot Types
+    RMN_SPOT_TYPE["RB_HOMEPAGE_HERO"] = "rbHomepageHero";
     RMN_SPOT_TYPE["RB_HOMEPAGE_HERO_THREE_TILE"] = "rbHomepageHeroThreeTile";
     RMN_SPOT_TYPE["RB_HOMEPAGE_HERO_TWO_TILE"] = "rbHomepageHeroTwoTile";
     RMN_SPOT_TYPE["RB_HOMEPAGE_HERO_FULL_IMAGE"] = "rbHomepageHeroFullImage";
@@ -54,14 +55,21 @@ exports.RMN_FILTER_PROPERTIES = void 0;
     RMN_FILTER_PROPERTIES["PUBLISHERS"] = "publishers";
     RMN_FILTER_PROPERTIES["SECTION"] = "section";
 })(exports.RMN_FILTER_PROPERTIES || (exports.RMN_FILTER_PROPERTIES = {}));
+exports.RMN_EVENT = void 0;
+(function (RMN_EVENT) {
+    RMN_EVENT["LIFECYCLE_STATE"] = "LIFECYCLE_STATE";
+    RMN_EVENT["SPOT_EVENT"] = "SPOT_EVENT";
+})(exports.RMN_EVENT || (exports.RMN_EVENT = {}));
 exports.RMN_SPOT_EVENT = void 0;
 (function (RMN_SPOT_EVENT) {
-    RMN_SPOT_EVENT["LIFECYCLE_STATE"] = "LIFECYCLE_STATE";
     RMN_SPOT_EVENT["IMPRESSION"] = "IMPRESSION";
     RMN_SPOT_EVENT["CLICK"] = "CLICK";
     RMN_SPOT_EVENT["PURCHASE"] = "PURCHASE";
     RMN_SPOT_EVENT["ADD_TO_CART"] = "ADD_TO_CART";
+    RMN_SPOT_EVENT["REMOVE_FROM_CART"] = "REMOVE_FROM_CART";
+    RMN_SPOT_EVENT["ADD_TO_CART_FROM_DETAILS"] = "ADD_TO_CART_FROM_DETAILS";
     RMN_SPOT_EVENT["ADD_TO_WISHLIST"] = "ADD_TO_WISHLIST";
+    RMN_SPOT_EVENT["EXPAND_PRODUCT"] = "EXPAND_PRODUCT";
     RMN_SPOT_EVENT["BUY_NOW"] = "BUY_NOW";
 })(exports.RMN_SPOT_EVENT || (exports.RMN_SPOT_EVENT = {}));
 exports.RMN_ENV = void 0;
@@ -6034,6 +6042,241 @@ axios.HttpStatusCode = HttpStatusCode;
 
 axios.default = axios;
 
+/**
+ * Keyword patterns for each RMN_SPOT_EVENT.
+ * Each event type has required keywords that must be present and optional ones.
+ *
+ * Note: The order of checks matters - more specific patterns must be checked before general ones
+ * to avoid incorrect matches.
+ */
+const EVENT_KEYWORDS = {
+    [exports.RMN_SPOT_EVENT.ADD_TO_CART_FROM_DETAILS]: {
+        required: ['add', 'cart'],
+        optional: ['details', 'detail', 'single', 'profile', 'page', 'pdp'],
+    },
+    [exports.RMN_SPOT_EVENT.BUY_NOW]: {
+        required: ['buy', 'now'],
+    },
+    [exports.RMN_SPOT_EVENT.EXPAND_PRODUCT]: {
+        required: ['product'],
+        optional: ['details', 'expand', 'modal', 'popup', 'quickview', 'view'],
+    },
+    [exports.RMN_SPOT_EVENT.ADD_TO_WISHLIST]: {
+        required: ['add', 'wishlist'],
+    },
+    [exports.RMN_SPOT_EVENT.REMOVE_FROM_CART]: {
+        required: ['remove', 'cart'],
+    },
+    [exports.RMN_SPOT_EVENT.PURCHASE]: {
+        required: ['purchase'],
+    },
+    [exports.RMN_SPOT_EVENT.ADD_TO_CART]: {
+        required: ['add', 'cart'],
+    },
+};
+/**
+ * Normalizes an event name by converting to lowercase, removing special characters,
+ * and splitting into words.
+ */
+function normalizeEventName(event) {
+    return event
+        .toLowerCase()
+        .replace(/[^a-z0-9\s]+/g, ' ') // Replace special chars with spaces
+        .split(/\s+/) // Split on whitespace
+        .filter(Boolean); // Remove empty strings
+}
+/**
+ * Checks if a word matches a keyword, considering word boundaries.
+ * This prevents partial word matches (e.g., "card" shouldn't match "cart").
+ */
+function wordMatchesKeyword(word, keyword) {
+    // Create a RegExp that matches the keyword as a whole word
+    const keywordRegex = new RegExp(`^${keyword}s?$|${keyword}s?\\W|\\W${keyword}s?$|\\W${keyword}s?\\W`);
+    return keywordRegex.test(` ${word} `); // Add spaces to handle word boundaries
+}
+/**
+ * Checks if all required keywords and at least one optional keyword (if specified) are present.
+ */
+function matchesKeywordPattern(words, required, optional) {
+    // Check if all required keywords are present as whole words
+    const hasAllRequired = required.every((keyword) => words.some((word) => wordMatchesKeyword(word, keyword)));
+    if (!hasAllRequired) {
+        return false;
+    }
+    // If no optional keywords are specified, return true
+    if (!(optional === null || optional === void 0 ? void 0 : optional.length)) {
+        return true;
+    }
+    // If optional keywords exist, check if at least one matches as a whole word
+    return optional.some((keyword) => words.some((word) => wordMatchesKeyword(word, keyword)));
+}
+/**
+ * Determines the event type from a raw event string by checking for keyword patterns.
+ *
+ * @param {string} [event] - The raw event string to evaluate
+ * @returns {RMN_SPOT_EVENT | null} - The corresponding RMN_SPOT_EVENT or null if no match
+ */
+function getEventTypeFromRawEvent(event) {
+    if (!(event === null || event === void 0 ? void 0 : event.trim())) {
+        return null;
+    }
+    const words = normalizeEventName(event);
+    // Use Object.entries to maintain the exact order defined in EVENT_KEYWORDS
+    for (const [eventType, { required, optional }] of Object.entries(EVENT_KEYWORDS)) {
+        if (matchesKeywordPattern(words, required, optional)) {
+            return eventType;
+        }
+    }
+    return null;
+}
+
+// Configuration object with target field names
+const extractorConfig = {
+    ids: [
+        // Ps: The function handles all the variations of keywords that end with "id" or "ids"
+        // Universal product identifiers
+        'gtin',
+        'gtin8',
+        'gtin12',
+        'gtin13',
+        'gtin14',
+        'mpn',
+        'sku',
+        'upc',
+        'ean',
+        'isbn',
+        'isbn10',
+        'isbn13',
+        'asin',
+        // Product codes and references
+        'coupon',
+        'barcode',
+        'product_code',
+        'part_number',
+        'model_number',
+        'item_variant',
+        'item_number',
+        'article_number',
+        'reference',
+    ],
+    price: [
+        'price',
+        'unitPrice',
+        'cost',
+        'current_price',
+        'sale_price',
+        'price_value',
+        'sale_price_value',
+        'regular_price',
+        'discount_price',
+        'unit_price',
+        'original_price',
+        'final_price',
+        'retail_price',
+    ],
+};
+/**
+ * Extracts deep values from an object based on specified target type
+ * @param data - The source data object to extract values from
+ * @param target - The type of values to extract ('ids' or 'price')
+ * @param options - Optional configuration for the extraction process
+ * @returns Array of extracted values or a single value if onlyFirst is true
+ */
+function extractDeepValues(data, target, options = {}) {
+    const { 
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    onlyFirst = false, shouldIncludeZero = false, } = options;
+    const values = [];
+    const targetProperties = new Set(extractorConfig[target].map((name) => name.toLowerCase()));
+    /**
+     * Checks if a property name matches the target criteria
+     */
+    const isTargetField = (key) => {
+        const normalizedKey = key.toLowerCase();
+        const hasTarget = targetProperties.has(normalizedKey);
+        if (target === 'ids') {
+            return normalizedKey.endsWith('id') || normalizedKey.endsWith('ids') || hasTarget;
+        }
+        return hasTarget;
+    };
+    /**
+     * Validates and normalizes extracted values
+     */
+    const validateValue = (value) => {
+        if (typeof value === 'string') {
+            return value.trim().length > 0;
+        }
+        if (typeof value === 'number') {
+            return !isNaN(value) && (shouldIncludeZero || value !== 0);
+        }
+        return false;
+    };
+    /**
+     * Processes a value and extracts matching fields
+     */
+    const processValue = (value, currentKey) => {
+        // Early exit conditions
+        if (value == null || (onlyFirst && values.length > 0))
+            return;
+        // Process current value if it matches target criteria
+        if (currentKey && isTargetField(currentKey)) {
+            if (Array.isArray(value)) {
+                const validValues = value.filter(validateValue);
+                values.push(...validValues);
+            }
+            else if (validateValue(value)) {
+                values.push(value);
+            }
+            return;
+        }
+        // Recursive processing for nested structures
+        if (Array.isArray(value)) {
+            value.forEach((item) => processValue(item));
+        }
+        else if (typeof value === 'object') {
+            Object.entries(value).forEach(([key, val]) => processValue(val, key));
+        }
+    };
+    processValue(data);
+    // Return based on options
+    if (values.length === 0)
+        return undefined;
+    return onlyFirst ? values[0] : values;
+}
+/**
+ * Cleans and normalizes an array of product IDs by:
+ * 1. Converting all IDs to strings
+ * 2. Trimming whitespace
+ * 3. Removing leading zeros while preserving single "0"
+ * 4. Filtering out empty/invalid values
+ *
+ * @param productIds - Array of product IDs that can be either strings or numbers
+ * @returns Array of cleaned string IDs
+ *
+ * @example
+ * cleanProductIds(["001", " 123 ", 456, "0"]) // ["1", "123", "456", "0"]
+ */
+function cleanProductIds(productIds) {
+    if (!Array.isArray(productIds)) {
+        return [];
+    }
+    return productIds
+        .map((id) => {
+        // Guard against null/undefined
+        if (id == null) {
+            return '';
+        }
+        // Convert to string and trim
+        const stringId = String(id).trim();
+        if (!stringId) {
+            return '';
+        }
+        // Remove leading zeros while preserving single "0"
+        return stringId === '0' ? '0' : stringId.replace(/^0+/, '');
+    })
+        .filter((id) => id !== ''); // Remove empty strings
+}
+
 class SingletonManager {
     /**
      * Retrieves an instance of the specified class using the provided instance creator function.
@@ -6199,126 +6442,406 @@ class ObjectHelper {
     }
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function a () {
-			if (this instanceof a) {
-        return Reflect.construct(f, arguments, this.constructor);
-			}
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
+// Fallback method using fetch if sendBeacon isn't available
+async function fallbackEventFire(url) {
+    try {
+        const racePromise = Promise.race([
+            // Promise #1: The fetch request
+            fetch(url, {
+                method: 'POST',
+                keepalive: true,
+            }),
+            // Promise #2: The timeout
+            new Promise((_, reject) => setTimeout(() => reject(new Error('Request timeout')), 2000)),
+        ]);
+        /**
+         * Prevent requests from hanging indefinitely
+         * Improve user experience by failing fast
+         * Handle slow network conditions gracefully
+         * Ensure resources are freed up in a timely manner
+         */
+        const response = await racePromise;
+        return response.ok;
+    }
+    catch (_a) {
+        return false;
+    }
 }
-
-var cryptoJs = {exports: {}};
-
-function commonjsRequire(path) {
-	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
+/**
+ * Helper function to decode base64 string and parse JSON
+ *
+ * @param {string} base64String - The base64 encoded JSON string
+ * @returns {T | null} - Decoded and parsed object or null if invalid
+ */
+function decodeBase64Json(base64String) {
+    try {
+        return JSON.parse(atob(base64String));
+    }
+    catch (_a) {
+        return null;
+    }
+}
+/**
+ * Extracts and decodes a URL from a base64-encoded query parameter.
+ *
+ * @param {string} url - The URL containing the base64-encoded query parameter.
+ * @returns {string | null} - The decoded URL or null if not found or invalid.
+ * @throws {Error} - If URL is malformed or payload is invalid.
+ */
+function getRedirectUrlFromPayload(url) {
+    if (!url)
+        return null;
+    try {
+        // Extract initial payload
+        const payload = new URL(url).searchParams.get('p');
+        if (!payload)
+            return null;
+        // Decode first layer
+        const decodedData = decodeBase64Json(payload);
+        if (!(decodedData === null || decodedData === void 0 ? void 0 : decodedData.u))
+            return null;
+        // Extract URL from nested query
+        const eventPayload = new URLSearchParams(decodedData.u).get('e');
+        if (!eventPayload)
+            return null;
+        // Decode second layer
+        const eventData = decodeBase64Json(eventPayload);
+        return (eventData === null || eventData === void 0 ? void 0 : eventData.ur) || null;
+    }
+    catch (_a) {
+        console.warn('RmnSdk: Failed to extract redirect URL from payload.');
+        return null;
+    }
+}
+/**
+ * Fires an event using the navigator.sendBeacon method or a fallback method if sendBeacon is not available.
+ * If the event is a click event and a redirect URL is found, it redirects the user to that URL.
+ *
+ * @param {IFireEventParams} params - The parameters for firing the event.
+ * @param {RMN_SPOT_EVENT} params.event - The event type.
+ * @param {string} params.eventUrl - The URL to which the event is sent.
+ * @returns {Promise<void>} - A promise that resolves when the event is fired.
+ */
+async function fireEvent({ event, eventUrl }) {
+    var _a;
+    try {
+        const didFireEvent = ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.sendBeacon) === null || _a === void 0 ? void 0 : _a.call(navigator, eventUrl)) || (await fallbackEventFire(eventUrl));
+        if (!didFireEvent) {
+            return;
+        }
+        if (event === exports.RMN_SPOT_EVENT.CLICK) {
+            const redirectUrl = getRedirectUrlFromPayload(eventUrl);
+            if (redirectUrl) {
+                window.location.href = redirectUrl;
+            }
+        }
+    }
+    catch (_b) {
+        // Handle errors silently
+    }
+}
+function calculateScaleFactor(elementScale) {
+    // Step 1: Apply square root for non-linear scaling
+    // This creates a more gradual scaling effect, especially for larger changes
+    // For example:
+    // - elementScale of 0.25 (1/4 size) becomes 0.5
+    // - elementScale of 1 (unchanged) remains 1
+    // - elementScale of 4 (4x size) becomes 2
+    const baseFactor = Math.sqrt(elementScale);
+    // Step 2: Apply additional dampening to further soften the scaling effect
+    // The dampening factor (0.5) can be adjusted:
+    // - Lower values (closer to 0) make scaling more subtle
+    // - Higher values (closer to 1) make scaling more pronounced
+    const dampening = 0.35;
+    // Calculate the scaleFactor:
+    // 1. (baseFactor - 1) represents the change from the original size
+    // 2. Multiply by dampening to reduce the effect
+    // 3. Add 1 to center the scaling around the original size
+    // For example, if baseFactor is 2:
+    // scaleFactor = 1 + (2 - 1) * 0.5 = 1.5
+    const scaleFactor = 1 + (baseFactor - 1) * dampening;
+    // Step 3: Define the allowed range for the scale factor
+    // This ensures that the font size never changes too drastically
+    const minScale = 0.35; // Font will never be smaller than 50% of original
+    const maxScale = 1.5; // Font will never be larger than 150% of original
+    // Step 4: Clamp the scale factor to the defined range
+    // Math.min ensures the value doesn't exceed maxScale
+    // Math.max ensures the value isn't less than minScale
+    return Math.max(minScale, Math.min(maxScale, scaleFactor));
+}
+/**
+ * Converts an object to a query string.
+ *
+ * @param {Record<string, string|number|undefined|null>} obj - The object to be converted to a query string.
+ * @returns {string} - The query string.
+ */
+function objectToQueryParams(obj) {
+    return Object.entries(obj !== null && obj !== void 0 ? obj : {})
+        .map(([key, value]) => {
+        if (value == null) {
+            return '';
+        }
+        return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+    })
+        .filter(Boolean)
+        .join('&');
 }
 
-var core = {exports: {}};
-
-var _polyfillNode_crypto = {};
-
-var _polyfillNode_crypto$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: _polyfillNode_crypto
-});
-
-var require$$0 = /*@__PURE__*/getAugmentedNamespace(_polyfillNode_crypto$1);
-
-var hasRequiredCore;
-
-function requireCore () {
-	if (hasRequiredCore) return core.exports;
-	hasRequiredCore = 1;
-	(function (module, exports) {
-(function (root, factory) {
-			{
-				// CommonJS
-				module.exports = factory();
-			}
-		}(commonjsGlobal, function () {
-
-			/*globals window, global, require*/
-
-			/**
-			 * CryptoJS core components.
-			 */
-			var CryptoJS = CryptoJS || (function (Math, undefined$1) {
-
-			    var crypto;
-
-			    // Native crypto from window (Browser)
-			    if (typeof window !== 'undefined' && window.crypto) {
-			        crypto = window.crypto;
-			    }
-
-			    // Native crypto in web worker (Browser)
-			    if (typeof self !== 'undefined' && self.crypto) {
-			        crypto = self.crypto;
-			    }
-
-			    // Native crypto from worker
-			    if (typeof globalThis !== 'undefined' && globalThis.crypto) {
-			        crypto = globalThis.crypto;
-			    }
-
-			    // Native (experimental IE 11) crypto from window (Browser)
-			    if (!crypto && typeof window !== 'undefined' && window.msCrypto) {
-			        crypto = window.msCrypto;
-			    }
-
-			    // Native crypto from global (NodeJS)
-			    if (!crypto && typeof commonjsGlobal !== 'undefined' && commonjsGlobal.crypto) {
-			        crypto = commonjsGlobal.crypto;
-			    }
-
-			    // Native crypto import via require (NodeJS)
-			    if (!crypto && typeof commonjsRequire === 'function') {
-			        try {
-			            crypto = require$$0;
-			        } catch (err) {}
-			    }
-
-			    /*
-			     * Cryptographically secure pseudorandom number generator
-			     *
-			     * As Math.random() is cryptographically not safe to use
-			     */
-			    var cryptoSecureRandomInt = function () {
-			        if (crypto) {
-			            // Use getRandomValues method (Browser)
-			            if (typeof crypto.getRandomValues === 'function') {
-			                try {
-			                    return crypto.getRandomValues(new Uint32Array(1))[0];
-			                } catch (err) {}
-			            }
-
-			            // Use randomBytes method (NodeJS)
-			            if (typeof crypto.randomBytes === 'function') {
-			                try {
-			                    return crypto.randomBytes(4).readInt32LE();
-			                } catch (err) {}
-			            }
-			        }
-
+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';
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			if (this instanceof a) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+var cryptoJs = {exports: {}};
+
+function commonjsRequire(path) {
+	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
+}
+
+var core = {exports: {}};
+
+var _polyfillNode_crypto = {};
+
+var _polyfillNode_crypto$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: _polyfillNode_crypto
+});
+
+var require$$0 = /*@__PURE__*/getAugmentedNamespace(_polyfillNode_crypto$1);
+
+var hasRequiredCore;
+
+function requireCore () {
+	if (hasRequiredCore) return core.exports;
+	hasRequiredCore = 1;
+	(function (module, exports) {
+(function (root, factory) {
+			{
+				// CommonJS
+				module.exports = factory();
+			}
+		}(commonjsGlobal, function () {
+
+			/*globals window, global, require*/
+
+			/**
+			 * CryptoJS core components.
+			 */
+			var CryptoJS = CryptoJS || (function (Math, undefined$1) {
+
+			    var crypto;
+
+			    // Native crypto from window (Browser)
+			    if (typeof window !== 'undefined' && window.crypto) {
+			        crypto = window.crypto;
+			    }
+
+			    // Native crypto in web worker (Browser)
+			    if (typeof self !== 'undefined' && self.crypto) {
+			        crypto = self.crypto;
+			    }
+
+			    // Native crypto from worker
+			    if (typeof globalThis !== 'undefined' && globalThis.crypto) {
+			        crypto = globalThis.crypto;
+			    }
+
+			    // Native (experimental IE 11) crypto from window (Browser)
+			    if (!crypto && typeof window !== 'undefined' && window.msCrypto) {
+			        crypto = window.msCrypto;
+			    }
+
+			    // Native crypto from global (NodeJS)
+			    if (!crypto && typeof commonjsGlobal !== 'undefined' && commonjsGlobal.crypto) {
+			        crypto = commonjsGlobal.crypto;
+			    }
+
+			    // Native crypto import via require (NodeJS)
+			    if (!crypto && typeof commonjsRequire === 'function') {
+			        try {
+			            crypto = require$$0;
+			        } catch (err) {}
+			    }
+
+			    /*
+			     * Cryptographically secure pseudorandom number generator
+			     *
+			     * As Math.random() is cryptographically not safe to use
+			     */
+			    var cryptoSecureRandomInt = function () {
+			        if (crypto) {
+			            // Use getRandomValues method (Browser)
+			            if (typeof crypto.getRandomValues === 'function') {
+			                try {
+			                    return crypto.getRandomValues(new Uint32Array(1))[0];
+			                } catch (err) {}
+			            }
+
+			            // Use randomBytes method (NodeJS)
+			            if (typeof crypto.randomBytes === 'function') {
+			                try {
+			                    return crypto.randomBytes(4).readInt32LE();
+			                } catch (err) {}
+			            }
+			        }
+
 			        throw new Error('Native crypto module could not be used to get secure random number.');
 			    };
 
@@ -15154,6 +15677,7 @@ class AuthService extends BaseApi {
 
 const SPOT_ELEMENT_TAG = 'spot-element';
 const CAROUSEL_ELEMENT_TAG = 'spot-carousel-element';
+const SKELETON_ELEMENT_TAG = 'spot-skeleton-element';
 const GFONT_PRECONNECT = `
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -15164,6 +15688,45 @@ const GFONT_SOURCE_SANS_3 = `
 const GFONT_CORMORANT = `
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
 `;
+const SPOT_DIMENSIONS = {
+    [exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO]: { width: 1140, height: 640 },
+    [exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE]: { width: 1140, height: 640 },
+    [exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE]: { width: 1140, height: 640 },
+    [exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE]: { width: 1140, height: 640 },
+    [exports.RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT]: { width: 468, height: 410 },
+    [exports.RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT]: { width: 224, height: 378 },
+    [exports.RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT]: { width: 224, height: 410 },
+    [exports.RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK]: { width: 887, height: 344 },
+    [exports.RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: { width: 1, height: 1 },
+    [exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER]: { width: 440, height: 220 },
+    [exports.RMN_SPOT_TYPE.SMALL_RECTANGLE]: { width: 180, height: 150 },
+    [exports.RMN_SPOT_TYPE.MEDIUM_RECTANGLE]: { width: 300, height: 250 },
+    [exports.RMN_SPOT_TYPE.LARGE_RECTANGLE]: { width: 336, height: 280 },
+    [exports.RMN_SPOT_TYPE.VERTICAL_RECTANGLE]: { width: 240, height: 400 },
+    [exports.RMN_SPOT_TYPE.BANNER]: { width: 468, height: 60 },
+    [exports.RMN_SPOT_TYPE.LEADERBOARD]: { width: 728, height: 90 },
+    [exports.RMN_SPOT_TYPE.LARGE_LEADERBOARD]: { width: 970, height: 90 },
+    [exports.RMN_SPOT_TYPE.BILLBOARD]: { width: 970, height: 250 },
+    [exports.RMN_SPOT_TYPE.SKYSCRAPER]: { width: 120, height: 600 },
+    [exports.RMN_SPOT_TYPE.WIDE_SKYSCRAPER]: { width: 160, height: 600 },
+    [exports.RMN_SPOT_TYPE.HALF_PAGE]: { width: 300, height: 600 },
+    [exports.RMN_SPOT_TYPE.SMALL_SQUARE]: { width: 200, height: 200 },
+    [exports.RMN_SPOT_TYPE.SQUARE]: { width: 250, height: 250 },
+    [exports.RMN_SPOT_TYPE.VERTICAL_BANNER]: { width: 120, height: 240 },
+    [exports.RMN_SPOT_TYPE.BUTTON_2]: { width: 120, height: 60 },
+    [exports.RMN_SPOT_TYPE.MICRO_BAR]: { width: 88, height: 31 },
+    [exports.RMN_SPOT_TYPE.POP_UP]: { width: 550, height: 480 },
+    [exports.RMN_SPOT_TYPE.PORTRAIT]: { width: 300, height: 1050 },
+    [exports.RMN_SPOT_TYPE.SMARTPHONE_BANNER_1]: { width: 300, height: 50 },
+    [exports.RMN_SPOT_TYPE.SMARTPHONE_BANNER_2]: { width: 320, height: 50 },
+    [exports.RMN_SPOT_TYPE.MOBILE_PHONE_INTERSTITIAL_1]: { width: 640, height: 1136 },
+    [exports.RMN_SPOT_TYPE.MOBILE_PHONE_INTERSTITIAL_2]: { width: 750, height: 1334 },
+    [exports.RMN_SPOT_TYPE.MOBILE_PHONE_INTERSTITIAL_3]: { width: 1080, height: 1920 },
+    [exports.RMN_SPOT_TYPE.FEATURE_PHONE_SMALL_BANNER]: { width: 120, height: 20 },
+    [exports.RMN_SPOT_TYPE.FEATURE_PHONE_MEDIUM_BANNER]: { width: 168, height: 28 },
+    [exports.RMN_SPOT_TYPE.FEATURE_PHONE_LARGE_BANNER]: { width: 216, height: 36 },
+    [exports.RMN_SPOT_TYPE.IN_TEXT]: { width: 1, height: 1 },
+};
 
 class IntersectionObserverService {
     constructor(defaultOptions = {}) {
@@ -15205,8 +15768,33 @@ class IntersectionObserverService {
     }
 }
 
-class LocalStorage {
+var ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX;
+(function (ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX) {
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["PLACEMENT_ID"] = 0] = "PLACEMENT_ID";
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["SPOT_ID"] = 1] = "SPOT_ID";
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["SPOT_TYPE"] = 2] = "SPOT_TYPE";
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["EVENTS"] = 3] = "EVENTS";
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["PRODUCT_IDS"] = 4] = "PRODUCT_IDS";
+    ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX["CREATED_AT"] = 5] = "CREATED_AT";
+})(ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX || (ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX = {}));
+const LOCAL_STORAGE_SPOT_EVENTS_ARRAY_INDEX = {
+    [exports.RMN_SPOT_EVENT.IMPRESSION]: 0,
+    [exports.RMN_SPOT_EVENT.CLICK]: 1,
+    [exports.RMN_SPOT_EVENT.PURCHASE]: 2,
+    [exports.RMN_SPOT_EVENT.ADD_TO_CART]: 3,
+    [exports.RMN_SPOT_EVENT.REMOVE_FROM_CART]: 4,
+    [exports.RMN_SPOT_EVENT.ADD_TO_CART_FROM_DETAILS]: 5,
+    [exports.RMN_SPOT_EVENT.ADD_TO_WISHLIST]: 6,
+    [exports.RMN_SPOT_EVENT.EXPAND_PRODUCT]: 7,
+    [exports.RMN_SPOT_EVENT.BUY_NOW]: 8,
+};
+class LocalStorageService {
     constructor() {
+        if (typeof window.localStorage === 'undefined') {
+            console.warn('Local storage is not supported in this environment');
+            return;
+        }
+        this.setUserId();
         this.spots = new Map();
         // Sync local storage with the current state
         this.syncLocalStorage();
@@ -15214,19 +15802,23 @@ class LocalStorage {
         this.removeExpiredSpots();
     }
     static getInstance() {
-        if (!LocalStorage.instance) {
-            LocalStorage.instance = new LocalStorage();
+        if (!LocalStorageService.instance) {
+            LocalStorageService.instance = new LocalStorageService();
         }
-        return LocalStorage.instance;
+        return LocalStorageService.instance;
     }
     syncLocalStorage() {
-        const localStorageData = localStorage.getItem(LocalStorage.localStorageKey);
-        // TODO: Encrypt the data before storing it in the local storage
+        const localStorageData = window.localStorage.getItem(LocalStorageService.localStorageKey);
         if (localStorageData) {
             try {
-                const parsedData = JSON.parse(localStorageData);
+                const decryptedData = this.decryptData(localStorageData);
+                const parsedData = JSON.parse(decryptedData);
                 if (parsedData && typeof parsedData === 'object') {
-                    this.spots = this.objToMap(parsedData);
+                    const data = {};
+                    for (const [key, value] of Object.entries(parsedData)) {
+                        data[key] = this.spotArrayToObject(value);
+                    }
+                    this.spots = this.objectToMap(data);
                 }
                 else {
                     this.clearLocalStorage();
@@ -15239,43 +15831,237 @@ class LocalStorage {
         }
     }
     setSpot(spotId, data) {
+        var _a;
         data.createdAt = Date.now();
-        this.spots.set(spotId, data);
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.set(spotId, data);
         this.updateLocalStorage();
     }
-    getSpot(spotId) {
-        return this.spots.get(spotId);
-    }
     removeSpot(spotId) {
-        this.spots.delete(spotId);
+        var _a;
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.delete(spotId);
         this.updateLocalStorage();
     }
+    getSpot(spotId) {
+        var _a;
+        return (_a = this.spots) === null || _a === void 0 ? void 0 : _a.get(spotId);
+    }
+    getSpots() {
+        if (!this.spots)
+            return undefined;
+        return this.mapToObject(this.spots);
+    }
     updateLocalStorage() {
-        const data = this.mapToObj(this.spots);
-        localStorage.setItem(LocalStorage.localStorageKey, JSON.stringify(data));
+        if (!this.spots)
+            return undefined;
+        const data = this.mapToObject(this.spots);
+        const dataArray = {};
+        for (const [key, value] of Object.entries(data)) {
+            dataArray[key] = this.spotObjectToArray(value);
+        }
+        try {
+            const encryptedData = this.encryptData(JSON.stringify(dataArray));
+            window.localStorage.setItem(LocalStorageService.localStorageKey, encryptedData);
+        }
+        catch (_a) {
+            // If there is an error parsing the data, clear the local storage to prevent any issues
+            this.clearLocalStorage();
+        }
     }
     clearLocalStorage() {
-        localStorage.removeItem(LocalStorage.localStorageKey);
+        window.localStorage.removeItem(LocalStorageService.localStorageKey);
     }
     removeExpiredSpots() {
+        var _a;
         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);
+        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.forEach((spot, spotId) => {
+            var _a, _b;
+            if (currentTime - ((_a = spot.createdAt) !== null && _a !== void 0 ? _a : 0) > LocalStorageService.spotExpirationTime) {
+                (_b = this.spots) === null || _b === void 0 ? void 0 : _b.delete(spotId);
             }
         });
         this.updateLocalStorage();
     }
-    mapToObj(map) {
+    // ======================== Utility functions ======================== //
+    getUserId() {
+        const key = LocalStorageService.localStorageKey;
+        if (!key) {
+            this.setUserId();
+        }
+        return key.replace(`${LocalStorageService.localStorageKeyPrefix}_`, '');
+    }
+    /**
+     * Sets the user ID in the local storage.
+     * If no existing key is found,
+     * it generates a new unique ID and sets it as the local storage key.
+     */
+    setUserId() {
+        const prefix = LocalStorageService.localStorageKeyPrefix;
+        const existingKeys = Object.keys(window.localStorage).filter((key) => key.startsWith(prefix));
+        const setNewKey = () => {
+            const uniqueId = UniqueIdGenerator.generate();
+            const newLocalStorageKey = `${prefix}_${uniqueId}`;
+            window.localStorage.setItem(newLocalStorageKey, '');
+            LocalStorageService.localStorageKey = newLocalStorageKey;
+        };
+        if (existingKeys.length === 0) {
+            setNewKey();
+        }
+        else {
+            const validKey = existingKeys.find((key) => UniqueIdGenerator.isValid(key.replace(`${prefix}_`, '')));
+            // Delete all other keys except the valid one
+            existingKeys.forEach((key) => {
+                if (key !== validKey) {
+                    window.localStorage.removeItem(key);
+                }
+            });
+            if (validKey) {
+                // Found a valid key, assign it to localStorageKey
+                LocalStorageService.localStorageKey = validKey;
+            }
+            else {
+                // No valid key found, generate a new key
+                setNewKey();
+            }
+        }
+    }
+    mapToObject(map) {
         return Object.fromEntries(map);
     }
-    objToMap(obj) {
+    objectToMap(obj) {
         return new Map(Object.entries(obj));
     }
+    spotEventObjectToArray(events) {
+        return Object.keys(LOCAL_STORAGE_SPOT_EVENTS_ARRAY_INDEX).map((type) => {
+            const result = events.find((item) => item.event === type);
+            return result && result.event === type ? result.url : '';
+        });
+    }
+    spotEventArrayToObject(arr) {
+        return Object.keys(LOCAL_STORAGE_SPOT_EVENTS_ARRAY_INDEX).map((type) => ({
+            event: type,
+            url: arr[LOCAL_STORAGE_SPOT_EVENTS_ARRAY_INDEX[type]],
+        }));
+    }
+    spotObjectToArray(obj) {
+        return [
+            obj.placementId,
+            obj.spotId,
+            obj.spotType,
+            this.spotEventObjectToArray(obj.events),
+            obj.productIds,
+            obj.createdAt,
+        ];
+    }
+    spotArrayToObject(arr) {
+        return {
+            placementId: arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.PLACEMENT_ID],
+            spotId: arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.SPOT_ID],
+            spotType: arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.SPOT_TYPE],
+            events: this.spotEventArrayToObject(arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.EVENTS]),
+            productIds: arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.PRODUCT_IDS],
+            createdAt: arr[ENUM_LOCAL_STORAGE_SPOT_ARRAY_INDEX.CREATED_AT],
+        };
+    }
+    encryptData(data) {
+        if (!LocalStorageService.encryptData)
+            return data;
+        // For now, we are using base64 encoding to encrypt the data
+        // Later we will use Jose encryption
+        return btoa(data);
+    }
+    decryptData(data) {
+        if (!LocalStorageService.encryptData)
+            return data;
+        // For now, we are using base64 encoding to encrypt
+        // Later we will use Jose encryption
+        return atob(data);
+    }
+}
+LocalStorageService.localStorageKeyPrefix = 'lc_rmn';
+LocalStorageService.localStorageKey = '';
+LocalStorageService.spotExpirationTime = 1000 * 60 * 60 * 24 * 7; // 7 days
+LocalStorageService.encryptData = true;
+
+/**
+ * PubsubService class
+ * Manages event subscriptions and publications
+ * @template IRmnEventMap A record type defining the structure of events and their data
+ */
+class PubsubService {
+    constructor() {
+        /**
+         * Object to store subscribers for each event type
+         */
+        this.subscribers = {};
+    }
+    static getInstance() {
+        if (!PubsubService.instance) {
+            PubsubService.instance = new PubsubService();
+        }
+        return PubsubService.instance;
+    }
+    /**
+     * Subscribe to an event
+     * @param eventType - The type of event to subscribe to
+     * @param callback - The function to be called when the event is published
+     * @returns A function to unsubscribe from the event
+     *
+     * @Example:
+     * const unsubscribe = pubSub.subscribe('userLogin', (data) => {
+     *   console.log(`User ${data.username} logged in`);
+     * });
+     */
+    subscribe(eventType, callback) {
+        if (!this.subscribers[eventType]) {
+            this.subscribers[eventType] = [];
+        }
+        this.subscribers[eventType].push(callback);
+        // Return an unsubscribe function
+        return () => {
+            this.subscribers[eventType] = this.subscribers[eventType].filter((cb) => cb !== callback);
+        };
+    }
+    /**
+     * Publish an event
+     * @param eventType - The type of event to publish
+     * @param data - The data to be passed to the event subscribers
+     *
+     * @Example:
+     * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
+     */
+    publish(eventType, data) {
+        if (!this.subscribers[eventType]) {
+            return;
+        }
+        this.subscribers[eventType].forEach((callback) => callback(data));
+    }
 }
-LocalStorage.localStorageKey = 'lc_rmn';
-LocalStorage.spotExpirationTime = 1000 * 60 * 60 * 24 * 7; // 7 days
+/**
+ * Usage Example:
+ *
+ * interface IRmnEventMap {
+ *   userLogin: { username: string; timestamp: number };
+ *   pageView: { url: string; timestamp: number };
+ * }
+ *
+ * const pubSub = new PubsubService<IRmnEventMap>();
+ *
+ * // Subscribe to events
+ * const unsubscribeLogin = pubSub.subscribe('userLogin', (data) => {
+ *   console.log(`User ${data.username} logged in at ${new Date(data.timestamp)}`);
+ * });
+ *
+ * pubSub.subscribe('pageView', (data) => {
+ *   console.log(`Page ${data.url} viewed at ${new Date(data.timestamp)}`);
+ * });
+ *
+ * // Publish events
+ * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
+ * pubSub.publish('pageView', { url: '/home', timestamp: Date.now() });
+ *
+ * // Unsubscribe from an event
+ * unsubscribeLogin();
+ */
 
 class ResizeObserverService {
     constructor({ element, maxSize, minScale }) {
@@ -15345,36 +16131,6 @@ class ResizeObserverService {
     }
 }
 
-function calculateScaleFactor(elementScale) {
-    // Step 1: Apply square root for non-linear scaling
-    // This creates a more gradual scaling effect, especially for larger changes
-    // For example:
-    // - elementScale of 0.25 (1/4 size) becomes 0.5
-    // - elementScale of 1 (unchanged) remains 1
-    // - elementScale of 4 (4x size) becomes 2
-    const baseFactor = Math.sqrt(elementScale);
-    // Step 2: Apply additional dampening to further soften the scaling effect
-    // The dampening factor (0.5) can be adjusted:
-    // - Lower values (closer to 0) make scaling more subtle
-    // - Higher values (closer to 1) make scaling more pronounced
-    const dampening = 0.35;
-    // Calculate the scaleFactor:
-    // 1. (baseFactor - 1) represents the change from the original size
-    // 2. Multiply by dampening to reduce the effect
-    // 3. Add 1 to center the scaling around the original size
-    // For example, if baseFactor is 2:
-    // scaleFactor = 1 + (2 - 1) * 0.5 = 1.5
-    const scaleFactor = 1 + (baseFactor - 1) * dampening;
-    // Step 3: Define the allowed range for the scale factor
-    // This ensures that the font size never changes too drastically
-    const minScale = 0.35; // Font will never be smaller than 50% of original
-    const maxScale = 1.5; // Font will never be larger than 150% of original
-    // Step 4: Clamp the scale factor to the defined range
-    // Math.min ensures the value doesn't exceed maxScale
-    // Math.max ensures the value isn't less than minScale
-    return Math.max(minScale, Math.min(maxScale, scaleFactor));
-}
-
 const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
     :host {
         position: relative;
@@ -15385,15 +16141,23 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
         height: ${fluid ? '100%' : `${height}px`};
     }
 
+    .container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
     .slides {
         position: relative;
         height: 100%;
         width: 100%;
+        display: flex;
+        transition: transform 0.5s ease-in-out;
     }
 
     .slide {
-        display: none;
-
+        flex: 0 0 100%;
+        display: flex;
         justify-content: center;
         align-items: center;
         height: 100%;
@@ -15578,57 +16342,74 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
 let CarouselElement;
 if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
     class CustomCarouselElement extends HTMLElement {
+        /**
+         * Initializes the web component and attaches shadow DOM
+         * Binds all event handlers to maintain proper 'this' context
+         */
         constructor() {
             super();
-            this.currentSlide = 0;
-            this.dotElements = [];
-            this.prevButton = null;
-            this.nextButton = null;
-            this.autoplayInterval = null;
-            this.useDots = false;
-            this.useButtons = false;
+            this.state = {
+                currentSlide: 0,
+                autoplayInterval: null,
+                isAutoplayPaused: false,
+                useDots: false,
+                useButtons: false,
+                autoplay: true,
+                interval: CustomCarouselElement.defaultConfigs.interval,
+                dots: { ...CustomCarouselElement.defaultConfigs.dots },
+                buttons: { ...CustomCarouselElement.defaultConfigs.buttons },
+                isDragging: false,
+                startX: 0,
+                currentX: 0,
+                dragStartTime: 0,
+                dragDistance: 0,
+                containerWidth: 0,
+                isTransitioning: false,
+                realIndex: 0, // Track the actual slide index
+                virtualIndex: 1, // Track the virtual slide position (start at 1 to show clone)
+                isVirtualizing: false, // Flag for handling virtual slide transitions
+            };
+            this.elements = {
+                slidesContainer: null,
+                dots: [],
+                prevButton: null,
+                nextButton: null,
+            };
             this.originalFontSizes = new Map();
+            this.cloneToOriginalMap = new WeakMap();
             this.attachShadow({ mode: 'open' });
+            this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+            this.handleTouchStart = this.handleTouchStart.bind(this);
+            this.handleTouchMove = this.handleTouchMove.bind(this);
+            this.handleTouchEnd = this.handleTouchEnd.bind(this);
+            this.handleDragStart = this.handleDragStart.bind(this);
+            this.handleDrag = this.handleDrag.bind(this);
+            this.handleDragEnd = this.handleDragEnd.bind(this);
+            this.updateContainerWidth = this.updateContainerWidth.bind(this);
         }
+        /**
+         * Web component lifecycle method called when element is added to DOM
+         * Initializes state, renders UI, sets up events and starts autoplay
+         */
         connectedCallback() {
-            this.initializeOptions();
-            this.setupResizeObserver();
+            this.initializeState();
             this.render();
             this.setupCarousel();
+            this.setupTouchEvents();
+            this.startAutoplayIfEnabled();
+            this.updateContainerWidth();
+            window.addEventListener('resize', this.updateContainerWidth.bind(this));
+            this.setupResizeObserver();
         }
+        /**
+         * Web component lifecycle method called when element is removed from DOM
+         * Cleans up all event listeners and intervals
+         */
         disconnectedCallback() {
             var _a;
-            this.stopAutoplay();
+            this.cleanupEventListeners();
             (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         }
-        initializeOptions() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            this.useDots = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.useDots) === true || typeof ((_b = this.data) === null || _b === void 0 ? void 0 : _b.useDots) === 'object';
-            this.useButtons = ((_c = this.data) === null || _c === void 0 ? void 0 : _c.useButtons) === true || typeof ((_d = this.data) === null || _d === void 0 ? void 0 : _d.useButtons) === 'object';
-            this.autoplay = (_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.autoplay) !== null && _f !== void 0 ? _f : true;
-            this.interval = (_h = (_g = this.data) === null || _g === void 0 ? void 0 : _g.interval) !== null && _h !== void 0 ? _h : CustomCarouselElement.defaultInterval;
-            this.dotsOptions = {
-                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 = {
-                together: false,
-                position: 'middle-sides',
-                textColor: '#000000',
-                backgroundColor: '#ffffff',
-                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();
-        }
         setupResizeObserver() {
             if (this.data && !this.data.fluid) {
                 this.resizeObserver = new ResizeObserverService({
@@ -15643,18 +16424,20 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             }
         }
         handleCarouselSizeChanged(event) {
-            const isRBSpot = 'rbHeroadaksda'.startsWith('rb');
-            if (!isRBSpot) {
-                // Adjust text elements font size based on the scale factor
-                this.adjustFontSize(event.detail.scale);
-            }
+            // Adjust text elements font size based on the scale factor
+            this.adjustFontSize(event.detail.scale);
         }
         adjustFontSize(elementScale) {
             var _a;
-            const scaleFactor = calculateScaleFactor(elementScale);
             // Find all text elements within the shadow root
-            const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h1, h2, h3, h4, p, span');
-            elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
+            const selectors = ['h1', 'h2', 'h3', 'h4', 'p', 'span']
+                .map((tag) => `[data-spot="iab"] ${tag}`)
+                .join(', ');
+            const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors);
+            if (!elements)
+                return;
+            const scaleFactor = calculateScaleFactor(elementScale);
+            elements.forEach((element) => {
                 if (element instanceof HTMLElement) {
                     if (!this.originalFontSizes.has(element)) {
                         const originalSize = parseFloat(window.getComputedStyle(element).fontSize);
@@ -15666,180 +16449,610 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 }
             });
         }
+        /** State and Configuration Management */
+        /**
+         * Initializes all state values from provided configuration
+         * Sets up dots, buttons, autoplay and other feature flags
+         */
+        initializeState() {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            this.state.useDots = Boolean((_a = this.data) === null || _a === void 0 ? void 0 : _a.useDots);
+            this.state.useButtons = Boolean((_b = this.data) === null || _b === void 0 ? void 0 : _b.useButtons);
+            this.state.autoplay = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.autoplay) !== null && _d !== void 0 ? _d : true;
+            this.state.interval = (_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.interval) !== null && _f !== void 0 ? _f : CustomCarouselElement.defaultConfigs.interval;
+            if (typeof ((_g = this.data) === null || _g === void 0 ? void 0 : _g.useDots) === 'object') {
+                this.state.dots = { ...this.state.dots, ...this.data.useDots };
+            }
+            if (typeof ((_h = this.data) === null || _h === void 0 ? void 0 : _h.useButtons) === 'object') {
+                this.state.buttons = { ...this.state.buttons, ...this.data.useButtons };
+            }
+            this.validateConfiguration();
+        }
+        /**
+         * Validates all configuration options
+         * Ensures positions and other settings are valid
+         */
+        validateConfiguration() {
+            this.validatePosition(this.state.dots.position, 'dotsPosition', 'bottom-center');
+            this.validateButtonsPosition();
+        }
+        /**
+         * Validates navigation element positions
+         * Ensures dots and buttons are placed in valid locations
+         */
+        validatePosition(position, optionName, defaultValue) {
+            if (!CustomCarouselElement.validPositions.has(position)) {
+                console.warn(`Invalid ${optionName}: ${position}. Defaulting to '${defaultValue}'.`);
+                if (optionName === 'dotsPosition') {
+                    this.state.dots.position = defaultValue;
+                }
+                else if (optionName === 'buttonsPosition') {
+                    this.state.buttons.position = defaultValue;
+                }
+            }
+        }
+        /** Rendering and DOM Management */
+        /**
+         * Main rendering function that builds the carousel structure
+         * Creates slides, dots, and navigation buttons
+         */
         render() {
-            var _a;
             if (!this.shadowRoot)
                 return;
             const style = document.createElement('style');
             style.textContent = CAROUSEL_COMPONENT_STYLE(this.data);
             this.shadowRoot.appendChild(style);
-            const slides = this.renderSlides();
-            this.shadowRoot.appendChild(slides);
-            this.slidesContainer = (_a = this.shadowRoot.querySelector('.slides')) !== null && _a !== void 0 ? _a : undefined;
-            if (this.useDots) {
-                const dots = this.renderDots();
-                if (dots)
-                    this.shadowRoot.appendChild(dots);
-            }
-            if (this.useButtons) {
-                const buttons = this.renderButtons();
-                if (buttons)
-                    this.shadowRoot.appendChild(buttons);
+            const carouselContainer = document.createElement('div');
+            carouselContainer.className = 'container';
+            const slides = this.createSlides();
+            carouselContainer.appendChild(slides);
+            if (this.state.useDots) {
+                const dots = this.createDots();
+                carouselContainer.appendChild(dots);
             }
-        }
-        setupCarousel() {
-            this.setupDots();
-            this.setupButtons();
-            if (this.autoplay) {
-                this.startAutoplay();
+            if (this.state.useButtons) {
+                const buttons = this.createButtons();
+                carouselContainer.appendChild(buttons);
             }
-            this.updateCarousel();
+            this.shadowRoot.appendChild(carouselContainer);
+            this.cacheElements();
         }
-        renderSlides() {
+        /**
+         * Creates the slides container with infinite scroll support
+         * Adds cloned slides at start and end for seamless scrolling
+         */
+        createSlides() {
             const slidesContainer = document.createElement('div');
             slidesContainer.className = 'slides';
-            this.slides.forEach((slide, index) => {
-                const slideElement = document.createElement('div');
-                slideElement.className = `slide ${index === this.currentSlide ? 'active' : ''}`;
-                if (slide instanceof HTMLElement) {
-                    slideElement.appendChild(slide);
-                }
-                slidesContainer.appendChild(slideElement);
+            // Add the last slide at the beginning for seamless backward transition
+            this.appendSlide(slidesContainer, this.slides.length - 1);
+            // Add all slides
+            this.slides.forEach((_, index) => {
+                this.appendSlide(slidesContainer, index);
             });
+            // Add the first slide at the end for seamless forward transition
+            this.appendSlide(slidesContainer, 0);
+            // Set initial position to show first real slide
+            slidesContainer.style.transform = 'translateX(-100%)';
             return slidesContainer;
         }
-        renderDots() {
+        /**
+         * Appends a single slide to the container
+         * Handles cloning of slide elements
+         */
+        appendSlide(container, index) {
+            const slideElement = document.createElement('div');
+            slideElement.className = 'slide';
+            if (this.slides[index] instanceof HTMLElement) {
+                // Clone the slide
+                const clonedSlide = this.slides[index].cloneNode(true);
+                // Map clone to original for event handling
+                this.cloneToOriginalMap.set(clonedSlide, this.slides[index]);
+                // Add event delegation to the slide container
+                slideElement.addEventListener('click', (e) => {
+                    const original = this.slides[index];
+                    // Dispatch a new event on the original element
+                    const cloneEvent = new Event(e.type, { bubbles: true, cancelable: true });
+                    original.dispatchEvent(cloneEvent);
+                });
+                slideElement.appendChild(clonedSlide);
+            }
+            container.appendChild(slideElement);
+        }
+        /**
+         * Creates navigation dots based on number of slides
+         * Sets up initial active state and styling
+         */
+        createDots() {
+            const { position, size, opacity, color } = this.state.dots;
             const dotsContainer = document.createElement('div');
-            dotsContainer.className = `dots ${this.dotsOptions.position} ${this.dotsOptions.size}`;
-            dotsContainer.style.cssText = `--opacity: ${this.dotsOptions.opacity}`;
+            dotsContainer.className = `dots ${position} ${size}`;
+            dotsContainer.style.setProperty('--opacity', opacity.toString());
             this.slides.forEach((_, index) => {
                 const dot = document.createElement('span');
-                dot.className = `dot ${index === this.currentSlide ? 'active' : ''}`;
-                dot.style.backgroundColor = this.dotsOptions.color;
+                dot.className = `dot ${index === this.state.currentSlide ? 'active' : ''}`;
+                dot.style.backgroundColor = color;
                 dotsContainer.appendChild(dot);
             });
             return dotsContainer;
         }
-        renderButtons() {
+        /**
+         * Creates navigation buttons (prev/next)
+         * Applies styling and position configuration
+         */
+        createButtons() {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const { together, position, size, opacity } = this.state.buttons;
             const buttonsContainer = document.createElement('div');
-            const buttonsClass = this.buttonsOptions.together
-                ? `buttons-together ${this.buttonsOptions.position}`
-                : 'buttons-separate';
-            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);
-            buttonsContainer.appendChild(this.nextButton);
+            const buttonsClass = together ? `buttons-together ${position}` : 'buttons-separate';
+            buttonsContainer.className = `buttons ${buttonsClass} ${size}`;
+            buttonsContainer.style.setProperty('--opacity', opacity.toString());
+            this.elements.prevButton = this.createButton('prev-button', this.state.buttons.prev);
+            this.elements.nextButton = this.createButton('next-button', this.state.buttons.next);
+            buttonsContainer.appendChild(this.elements.prevButton);
+            buttonsContainer.appendChild(this.elements.nextButton);
             return buttonsContainer;
         }
+        /**
+         * Creates a single button element with specified properties
+         * Used for both prev and next buttons
+         */
         createButton(className, text) {
+            const { textColor, backgroundColor, borderRadius } = this.state.buttons;
             const button = document.createElement('button');
             button.className = className;
             button.textContent = text;
-            button.style.color = this.buttonsOptions.textColor;
-            button.style.backgroundColor = this.buttonsOptions.backgroundColor;
-            button.style.borderRadius = this.buttonsOptions.borderRadius;
+            button.style.color = textColor;
+            button.style.backgroundColor = backgroundColor;
+            button.style.borderRadius = borderRadius;
             return button;
         }
-        setupDots() {
-            if (!this.shadowRoot || !this.useDots)
+        /**
+         * Caches references to important DOM elements
+         * Stores references to slides container, dots, and buttons
+         */
+        cacheElements() {
+            if (!this.shadowRoot)
                 return;
-            this.dotElements = Array.from(this.shadowRoot.querySelectorAll('.dot'));
-            this.dotElements.forEach((dot, index) => {
-                dot.addEventListener('click', () => {
-                    this.goToSlide(index);
-                    this.resetAutoplay();
-                });
-            });
+            this.elements.slidesContainer = this.shadowRoot.querySelector('.slides');
+            this.elements.dots = Array.from(this.shadowRoot.querySelectorAll('.dot'));
+            this.elements.prevButton = this.shadowRoot.querySelector('.prev-button');
+            this.elements.nextButton = this.shadowRoot.querySelector('.next-button');
         }
-        setupButtons() {
-            var _a, _b;
-            if (!this.useButtons)
+        /** Event Management */
+        /**
+         * Sets up all carousel event listeners
+         * Includes dots, buttons, and transition events
+         */
+        setupCarousel() {
+            this.setupEventListeners();
+            // Add transition event listener with bound method
+            if (this.elements.slidesContainer) {
+                this.elements.slidesContainer.addEventListener('transitionend', this.handleTransitionEnd);
+            }
+            this.updateCarousel(false);
+        }
+        /**
+         * Sets up touch and drag event listeners
+         * Handles both mobile touch and desktop mouse events
+         */
+        setupTouchEvents() {
+            if (!this.elements.slidesContainer)
                 return;
-            (_a = this.prevButton) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
-                this.prevSlide();
-                this.resetAutoplay();
+            // Touch events
+            this.elements.slidesContainer.addEventListener('touchstart', this.handleTouchStart, {
+                passive: true,
             });
-            (_b = this.nextButton) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => {
-                this.nextSlide();
-                this.resetAutoplay();
+            this.elements.slidesContainer.addEventListener('touchmove', this.handleTouchMove, {
+                passive: false,
             });
+            this.elements.slidesContainer.addEventListener('touchend', this.handleTouchEnd);
+            // Mouse drag events
+            this.elements.slidesContainer.addEventListener('mousedown', this.handleDragStart);
+            document.addEventListener('mousemove', this.handleDrag);
+            document.addEventListener('mouseup', this.handleDragEnd);
         }
-        nextSlide() {
-            this.goToSlide((this.currentSlide + 1) % this.slides.length);
-        }
-        prevSlide() {
-            this.goToSlide((this.currentSlide - 1 + this.slides.length) % this.slides.length);
+        /**
+         * Removes all event listeners
+         * Called during cleanup and before re-adding listeners
+         */
+        removeEventListeners() {
+            this.elements.dots.forEach((dot) => {
+                dot.replaceWith(dot.cloneNode(true));
+            });
+            if (this.elements.prevButton) {
+                this.elements.prevButton.replaceWith(this.elements.prevButton.cloneNode(true));
+            }
+            if (this.elements.nextButton) {
+                this.elements.nextButton.replaceWith(this.elements.nextButton.cloneNode(true));
+            }
         }
-        goToSlide(index) {
-            this.currentSlide = index;
-            this.updateCarousel();
+        /**
+         * Removes touch and drag event listeners
+         * Separate from other event listeners for better management
+         */
+        removeTouchEvents() {
+            if (!this.elements.slidesContainer)
+                return;
+            this.elements.slidesContainer.removeEventListener('touchstart', this.handleTouchStart);
+            this.elements.slidesContainer.removeEventListener('touchmove', this.handleTouchMove);
+            this.elements.slidesContainer.removeEventListener('touchend', this.handleTouchEnd);
+            this.elements.slidesContainer.removeEventListener('mousedown', this.handleDragStart);
+            document.removeEventListener('mousemove', this.handleDrag);
+            document.removeEventListener('mouseup', this.handleDragEnd);
+        }
+        /** Touch and Drag Event Handlers */
+        /**
+         * Handles start of touch interaction
+         * Initializes drag tracking and pauses autoplay
+         */
+        handleTouchStart(e) {
+            if (this.state.isTransitioning)
+                return;
+            this.pauseAutoplay();
+            this.state.startX = e.touches[0].clientX;
+            this.state.dragStartTime = Date.now();
+            this.state.isDragging = true;
+            this.state.dragDistance = 0;
         }
-        updateCarousel() {
-            if (!this.slidesContainer)
+        /**
+         * Handles touch movement
+         * Calculates drag distance and updates carousel position
+         */
+        handleTouchMove(e) {
+            if (!this.state.isDragging || this.state.isTransitioning)
                 return;
-            const slides = Array.from(this.slidesContainer.children);
-            slides.forEach((slide, index) => {
-                slide.classList.toggle('active', index === this.currentSlide);
-            });
-            this.updateDots();
+            e.preventDefault();
+            const currentX = e.touches[0].clientX;
+            this.state.dragDistance = this.state.startX - currentX;
+            this.updateDragPosition();
         }
-        updateDots() {
-            if (!this.useDots)
+        /**
+         * Handles end of touch interaction
+         * Determines if slide should change based on drag distance
+         */
+        handleTouchEnd() {
+            if (!this.state.isDragging)
                 return;
-            this.dotElements.forEach((dot, index) => {
-                const isActive = index === this.currentSlide;
-                dot.classList.toggle('active', isActive);
-                dot.style.backgroundColor = isActive
-                    ? this.dotsOptions.activeColor
-                    : this.dotsOptions.color;
-            });
+            const dragDuration = Date.now() - this.state.dragStartTime;
+            const velocity = Math.abs(this.state.dragDistance) / dragDuration;
+            const isQuickSwipe = velocity > 0.5;
+            this.handleDragComplete(isQuickSwipe);
+            setTimeout(() => this.resumeAutoplay(), 100);
         }
-        startAutoplay() {
-            this.autoplayInterval = window.setInterval(() => this.nextSlide(), this.interval);
+        /**
+         * Handles start of mouse drag
+         * Similar to touch start but for desktop interaction
+         */
+        handleDragStart(e) {
+            if (this.state.isTransitioning)
+                return;
+            this.pauseAutoplay();
+            this.state.startX = e.clientX;
+            this.state.dragStartTime = Date.now();
+            this.state.isDragging = true;
+            this.state.dragDistance = 0;
+            e.preventDefault();
         }
-        stopAutoplay() {
-            if (this.autoplayInterval !== null) {
-                window.clearInterval(this.autoplayInterval);
-                this.autoplayInterval = null;
-            }
+        /**
+         * Handles mouse movement during drag
+         * Updates carousel position during drag
+         */
+        handleDrag(e) {
+            if (!this.state.isDragging || this.state.isTransitioning)
+                return;
+            const currentX = e.clientX;
+            this.state.dragDistance = this.state.startX - currentX;
+            this.updateDragPosition();
         }
+        /**
+         * Handles end of mouse drag
+         * Determines final slide position based on drag
+         */
+        handleDragEnd() {
+            if (!this.state.isDragging)
+                return;
+            const dragDuration = Date.now() - this.state.dragStartTime;
+            const velocity = Math.abs(this.state.dragDistance) / dragDuration;
+            const isQuickSwipe = velocity > 0.5;
+            this.handleDragComplete(isQuickSwipe);
+            setTimeout(() => this.resumeAutoplay(), 100);
+        }
+        /** Navigation and Position Management */
+        /**
+         * Handles navigation button clicks and programmatic navigation
+         * Updates both real and virtual indices
+         */
+        handleNavigation(direction) {
+            if (this.state.isTransitioning)
+                return;
+            const totalSlides = this.slides.length;
+            if (direction === 'next') {
+                this.state.realIndex = (this.state.realIndex + 1) % totalSlides;
+                this.state.virtualIndex++;
+            }
+            else {
+                this.state.realIndex = (this.state.realIndex - 1 + totalSlides) % totalSlides;
+                this.state.virtualIndex--;
+            }
+            this.updateCarousel(true);
+        }
+        /**
+         * Handles dot navigation clicks
+         * Calculates shortest path to target slide
+         */
+        handleDotClick(index) {
+            const currentRealIndex = this.state.realIndex;
+            const totalSlides = this.slides.length;
+            // Calculate the shortest path to the target slide
+            let diff = index - currentRealIndex;
+            // Adjust for shortest path when crossing the boundary
+            if (Math.abs(diff) > totalSlides / 2) {
+                diff = diff > 0 ? diff - totalSlides : diff + totalSlides;
+            }
+            // Update both real and virtual indices
+            this.state.realIndex = index;
+            this.state.virtualIndex += diff;
+            this.updateCarousel(true);
+            this.resetAutoplay();
+        }
+        /**
+         * Completes a drag interaction
+         * Determines whether to change slides based on drag distance
+         */
+        handleDragComplete(isQuickSwipe) {
+            this.state.isDragging = false;
+            if (!this.elements.slidesContainer)
+                return;
+            const dragPercentage = this.state.dragDistance / this.state.containerWidth;
+            const threshold = isQuickSwipe ? 0.1 : CustomCarouselElement.defaultConfigs.dragThreshold;
+            if (Math.abs(dragPercentage) > threshold) {
+                if (this.state.dragDistance > 0) {
+                    this.handleNavigation('next');
+                }
+                else {
+                    this.handleNavigation('prev');
+                }
+            }
+            else {
+                this.updateCarousel(true);
+            }
+            this.state.dragDistance = 0;
+        }
+        /**
+         * Updates carousel position during drag
+         * Applies transform without transition
+         */
+        updateDragPosition() {
+            if (!this.elements.slidesContainer || this.state.isTransitioning)
+                return;
+            const translateX = -this.state.virtualIndex * 100 -
+                (this.state.dragDistance / this.state.containerWidth) * 100;
+            this.elements.slidesContainer.style.transform = `translateX(${translateX}%)`;
+            this.elements.slidesContainer.style.transition = 'none';
+        }
+        /**
+         * Navigates to a specific slide
+         * Used primarily by dot navigation
+         */
+        goToSlide(index) {
+            if (this.state.isTransitioning)
+                return;
+            this.state.currentSlide = index;
+            this.updateCarousel(true);
+        }
+        /** Transition and Animation Management */
+        /**
+         * Updates carousel position and state
+         * Handles both animated and immediate updates
+         */
+        updateCarousel(animated = true) {
+            if (!this.elements.slidesContainer)
+                return;
+            const totalSlides = this.slides.length;
+            // Calculate the translation for the current virtual position
+            const translateX = -this.state.virtualIndex * 100;
+            if (animated) {
+                this.state.isTransitioning = true;
+                this.elements.slidesContainer.style.transition = 'transform 0.3s ease-out';
+            }
+            else {
+                this.elements.slidesContainer.style.transition = 'none';
+            }
+            this.elements.slidesContainer.style.transform = `translateX(${translateX}%)`;
+            this.updateDots();
+            // Check if we need to reset virtual position
+            if (this.state.virtualIndex <= 0 || this.state.virtualIndex >= totalSlides + 1) {
+                this.state.isVirtualizing = true;
+            }
+        }
+        /**
+         * Handles the end of slide transitions
+         * Manages infinite scroll position reset
+         */
+        handleTransitionEnd(event) {
+            if (event.target !== this.elements.slidesContainer || event.propertyName !== 'transform')
+                return;
+            this.state.isTransitioning = false;
+            if (this.state.isVirtualizing) {
+                this.resetVirtualPosition();
+            }
+            if (this.elements.slidesContainer) {
+                this.elements.slidesContainer.style.transition = 'none';
+            }
+        }
+        /**
+         * Resets virtual position for infinite scroll
+         * Called after hitting first or last clone
+         */
+        resetVirtualPosition() {
+            var _a;
+            const totalSlides = this.slides.length;
+            if (this.state.virtualIndex <= 0) {
+                // If we've moved before the first clone, jump to the last real slide
+                this.state.virtualIndex = totalSlides;
+            }
+            else if (this.state.virtualIndex >= totalSlides + 1) {
+                // If we've moved after the last clone, jump to the first real slide
+                this.state.virtualIndex = 1;
+            }
+            if (this.elements.slidesContainer) {
+                this.elements.slidesContainer.style.transition = 'none';
+                this.elements.slidesContainer.style.transform = `translateX(${-this.state.virtualIndex * 100}%)`;
+            }
+            this.state.isVirtualizing = false;
+            // Force reflow to ensure the style change takes effect immediately
+            void ((_a = this.elements.slidesContainer) === null || _a === void 0 ? void 0 : _a.offsetHeight);
+        }
+        /**
+         * Updates dot active states
+         * Reflects current slide position in navigation
+         */
+        updateDots() {
+            if (!this.state.useDots)
+                return;
+            this.elements.dots.forEach((dot, index) => {
+                const isActive = index === this.state.realIndex;
+                dot.classList.toggle('active', isActive);
+                dot.style.backgroundColor = isActive ? this.state.dots.activeColor : this.state.dots.color;
+            });
+        }
+        /** Autoplay Management */
+        /**
+         * Starts autoplay if enabled
+         * Called during initialization
+         */
+        startAutoplayIfEnabled() {
+            if (this.state.autoplay && !this.state.isAutoplayPaused) {
+                this.startAutoplay();
+            }
+        }
+        /**
+         * Starts the autoplay interval
+         * Ensures only one interval is running
+         */
+        startAutoplay() {
+            this.stopAutoplay(); // Ensure any existing interval is cleared first
+            if (!this.state.isAutoplayPaused && this.state.autoplay) {
+                this.state.autoplayInterval = window.setInterval(() => this.handleNavigation('next'), this.state.interval);
+            }
+        }
+        /**
+         * Pauses autoplay
+         * Used during user interaction
+         */
+        pauseAutoplay() {
+            this.state.isAutoplayPaused = true;
+            this.stopAutoplay();
+        }
+        /**
+         * Resumes autoplay after pause
+         * Used after user interaction ends
+         */
+        resumeAutoplay() {
+            this.state.isAutoplayPaused = false;
+            if (this.state.autoplay) {
+                this.startAutoplay();
+            }
+        }
+        /**
+         * Stops autoplay completely
+         * Cleans up interval
+         */
+        stopAutoplay() {
+            if (this.state.autoplayInterval !== null) {
+                window.clearInterval(this.state.autoplayInterval);
+                this.state.autoplayInterval = null;
+            }
+        }
+        /**
+         * Resets autoplay interval
+         * Used after user interactions
+         */
         resetAutoplay() {
-            if (this.autoplay) {
+            if (!this.state.isDragging && this.state.autoplay) {
                 this.stopAutoplay();
                 this.startAutoplay();
             }
         }
-        validateOptions() {
-            this.validatePosition(this.dotsOptions.position, 'dotsPosition', 'bottom-center');
-            this.validateButtonsPosition();
+        /** Utility Methods */
+        /**
+         * Updates container width on resize
+         * Used for drag distance calculations
+         */
+        updateContainerWidth() {
+            if (this.elements.slidesContainer) {
+                this.state.containerWidth = this.elements.slidesContainer.offsetWidth;
+            }
         }
-        validatePosition(position, optionName, defaultValue) {
-            if (!CustomCarouselElement.validPositions.includes(position)) {
-                console.warn(`Invalid ${optionName}: ${position}. Defaulting to '${defaultValue}'.`);
-                if (optionName === 'dotsPosition') {
-                    this.dotsOptions.position = defaultValue;
-                }
-                else if (optionName === 'buttonsPosition') {
-                    this.buttonsOptions.position = defaultValue;
-                }
+        /**
+         * Cleans up all event listeners
+         * Called during component cleanup
+         */
+        cleanupEventListeners() {
+            this.stopAutoplay();
+            this.removeEventListeners();
+            this.removeTouchEvents();
+            // Remove transition listener
+            if (this.elements.slidesContainer) {
+                this.elements.slidesContainer.removeEventListener('transitionend', this.handleTransitionEnd);
+            }
+            window.removeEventListener('resize', this.updateContainerWidth);
+        }
+        /**
+         * Sets up all event listeners
+         * Includes dots, buttons, and transition events
+         */
+        setupEventListeners() {
+            var _a, _b;
+            if (this.state.useDots) {
+                this.elements.dots.forEach((dot, index) => {
+                    dot.addEventListener('click', () => this.handleDotClick(index));
+                });
+            }
+            if (this.state.useButtons) {
+                (_a = this.elements.prevButton) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => this.handleNavigation('prev'));
+                (_b = this.elements.nextButton) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => this.handleNavigation('next'));
             }
         }
+        /**
+         * Validates button position configuration
+         * Ensures only valid positions are used
+         */
         validateButtonsPosition() {
-            if (this.useButtons) {
-                if (this.buttonsOptions.together) {
-                    this.validatePosition(this.buttonsOptions.position, 'buttonsPosition', 'bottom-center');
-                }
-                else if (this.buttonsOptions.position !== 'middle-sides') {
-                    console.warn(`Invalid buttonsPosition: ${this.buttonsOptions.position}. When buttons are not together, only 'middle-sides' is allowed. Defaulting to 'middle-sides'.`);
-                    this.buttonsOptions.position = 'middle-sides';
-                }
+            if (this.state.useButtons &&
+                !this.state.buttons.together &&
+                this.state.buttons.position !== 'middle-sides') {
+                console.warn('When buttons are not together, only "middle-sides" is allowed. Defaulting to "middle-sides".');
+                this.state.buttons.position = 'middle-sides';
             }
         }
     }
-    CustomCarouselElement.defaultInterval = 5000;
-    CustomCarouselElement.validPositions = [
+    /** Core initialization and lifecycle methods */
+    CustomCarouselElement.defaultConfigs = {
+        interval: 5000,
+        touchThreshold: 50, // minimum swipe distance in pixels
+        dragThreshold: 0.2, // minimum drag percentage of carousel width
+        dots: {
+            position: 'bottom-center',
+            color: '#d9d9d9',
+            activeColor: '#b5914a',
+            size: 'base',
+            opacity: 1,
+        },
+        buttons: {
+            together: false,
+            position: 'middle-sides',
+            textColor: '#000000',
+            backgroundColor: '#ffffff',
+            borderRadius: '50%',
+            prev: 'Prev',
+            next: 'Next',
+            size: 'base',
+            opacity: 1,
+        },
+    };
+    CustomCarouselElement.validPositions = new Set([
         'top-left',
         'top-center',
         'top-right',
@@ -15849,10 +17062,122 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         'middle-left',
         'middle-right',
         'middle-sides',
-    ];
+    ]);
     CarouselElement = CustomCarouselElement;
 }
 
+function SkeletonTemplate({ fluid, width, height }) {
+    return `
+    <style>
+     :host {
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        overflow: hidden;
+        width: ${fluid ? '100%' : `${width}px`};
+        height: ${fluid ? '100%' : `${height}px`};
+        background: #ffffff;
+        padding: 20px;
+        border-radius: 5px;
+      }
+
+      .content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+
+      .image-placeholder {
+        width: 100%;
+        height: 100%;
+        background: #f0f0f0;
+        border-radius: 4px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .lines-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
+
+      .line {
+        height: 20px;
+        background: #f0f0f0;
+        border-radius: 4px;
+        margin-bottom: 15px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .image-placeholder::after,
+      .line::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0.5) 50%,
+          rgba(255, 255, 255, 0) 100%
+        );
+        animation: shimmer 1.5s infinite;
+      }
+
+      .line.header {
+        width: 25%;
+      }
+
+      .line.description {
+        width: 65%;
+      }
+
+      .line.button {
+        width: 40%;
+      }
+
+      @keyframes shimmer {
+        0% {
+          transform: translateX(-100%);
+        }
+        100% {
+          transform: translateX(100%);
+        }
+      }
+    </style>
+
+    <div class="content">
+     <div class="image-placeholder"></div>
+      <div class="lines-container">
+        <div class="line header"></div>
+        <div class="line description"></div>
+        <div class="line button"></div>
+      </div>
+    </div>
+  `;
+}
+
+let SkeletonElement;
+if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
+    class CustomSkeletonElement extends HTMLElement {
+        constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });
+        }
+        connectedCallback() {
+            if (!this.shadowRoot || !this.data)
+                return;
+            this.shadowRoot.innerHTML = SkeletonTemplate(this.data);
+        }
+    }
+    SkeletonElement = CustomSkeletonElement;
+}
+
 let SpotElement;
 if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
     class CustomSpotElement extends HTMLElement {
@@ -15892,19 +17217,20 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
          * #########################################################
          */
         handleSpotSizeChanged(event) {
-            var _a, _b, _c;
-            const isRBSpot = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.spot) === null || _b === void 0 ? void 0 : _b.startsWith('rb')) !== null && _c !== void 0 ? _c : false;
-            if (!isRBSpot) {
-                // Adjust text elements font size based on the scale factor
-                this.adjustFontSize(event.detail.scale);
-            }
+            // Adjust text elements font size based on the scale factor
+            this.adjustFontSize(event.detail.scale);
         }
         adjustFontSize(elementScale) {
             var _a;
-            const scaleFactor = calculateScaleFactor(elementScale);
             // Find all text elements within the shadow root
-            const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h1, h2, h3, h4, p, span');
-            elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
+            const selectors = ['h1', 'h2', 'h3', 'h4', 'p', 'span']
+                .map((tag) => `[data-spot="iab"] ${tag}`)
+                .join(', ');
+            const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors);
+            if (!elements)
+                return;
+            const scaleFactor = calculateScaleFactor(elementScale);
+            elements.forEach((element) => {
                 if (element instanceof HTMLElement) {
                     if (!this.originalFontSizes.has(element)) {
                         const originalSize = parseFloat(window.getComputedStyle(element).fontSize);
@@ -15960,15 +17286,14 @@ class ElementService {
      * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
      */
     createSpotElement({ content, config }) {
-        var _a, _b;
+        var _a;
         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: (_b = config === null || config === void 0 ? void 0 : config.fluid) !== null && _b !== void 0 ? _b : false,
+            fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
             ...config,
         };
         spot.content = content;
@@ -15996,6 +17321,27 @@ class ElementService {
         carousel.slides = slides;
         return carousel;
     }
+    /**
+     * Creates the skeleton html element based on the provided data using shadow dom.
+     *
+     * This method is only available in browser environments.
+     *
+     * @param {ICreateSkeletonElementParams} params - The parameters to create the final element.
+     *
+     * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
+     */
+    createSkeletonElement(params) {
+        if (!this.ensureBrowserEnvironmentAndDefineElement()) {
+            return null;
+        }
+        const skeleton = document.createElement(SKELETON_ELEMENT_TAG);
+        const dimensions = SPOT_DIMENSIONS[params.spotType];
+        skeleton.data = {
+            fluid: params.fluid,
+            ...dimensions,
+        };
+        return skeleton;
+    }
     /**
      * Overrides the spot colors with the provided colors.
      *
@@ -16030,158 +17376,26 @@ class ElementService {
         if (!window.customElements.get(CAROUSEL_ELEMENT_TAG)) {
             window.customElements.define(CAROUSEL_ELEMENT_TAG, CarouselElement);
         }
+        if (!window.customElements.get(SKELETON_ELEMENT_TAG)) {
+            window.customElements.define(SKELETON_ELEMENT_TAG, SkeletonElement);
+        }
         return true;
     }
 }
 
-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;
+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;
     }
     const OVERLAY_SIZE = {
         small: 10,
@@ -16201,17 +17415,19 @@ function generateGradientColor(overlay, fallback = '') {
     const gradientColor = convertHexToRgba(color, overlayOpacity);
     return `${fullColor} 0%, ${gradientColor} ${goTo}%, ${transparentColor} 100%`;
 }
-function spotHtmlStringToElement(htmlString) {
+function spotHtmlStringToElement(htmlString, spotType) {
     const spot = document.createElement('div');
+    spot.setAttribute('data-spot', spotType.startsWith('rb') ? 'rb' : 'iab');
     spot.className = 'spot';
     spot.innerHTML = htmlString;
     Object.assign(spot.style, {
-        position: 'relative',
         display: 'block',
         width: '100%',
         height: '100%',
         margin: '0',
         padding: '0',
+        containerType: 'inline-size',
+        position: 'relative',
     });
     return spot;
 }
@@ -17081,7 +18297,6 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 box-sizing: border-box;
                 color: ${textColor};
                 cursor: pointer;
-                container-type: inline-size;
             }
 
             .${prefix}__text {
@@ -17097,7 +18312,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
             .${prefix}__header {
                 font-size: 24px;
                 margin: 0;
-                font-family: "Cormorant";
+                font-family: "Cormorant", system-ui;
                 font-style: normal;
                 font-weight: 300;
                 line-height: normal;
@@ -17134,6 +18349,10 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 .${prefix} {
                     background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
                 }
+
+                .${prefix}__text {
+                    width: 70%;
+                }
             }
 
             @container (min-width: 768px) {
@@ -17216,7 +18435,6 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         height: 100%;
         display: block;
         position: relative;
-        container-type: inline-size;
     }
 
     .${prefix}__content {
@@ -17407,15 +18625,20 @@ function rbHomepageHeroThreeTileTemplate(spot, config) {
 const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
   <style>
     .${prefix} {
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .${prefix}__content {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column-reverse;
         background-color: transparent;
         gap: 6px;
-        cursor: pointer;
-        container-type: inline-size;
-        position: relative;
     }
 
     .${prefix}__image {
@@ -17446,7 +18669,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         font-size: 18px;
         margin: 0;
         color: inherit;
-        font-family: "Cormorant";
+        font-family: "Cormorant", system-ui;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
@@ -17488,7 +18711,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
     }
 
     @container (min-width: 768px) {
-        .${prefix} {
+        .${prefix}__content {
             flex-direction: row;
         }
         .${prefix}__image {
@@ -17543,12 +18766,14 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
     ${GFONT_CORMORANT}
     ${STYLES$4(spot, config)}
     <div class="${prefix}">
-        <div class="${prefix}__text">
-            ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-            ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
-            ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
-        </div>
-        <div class="${prefix}__image"></div>
+      <div class="${prefix}__content">
+          <div class="${prefix}__text">
+              ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+              ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
+              ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
+          </div>
+          <div class="${prefix}__image"></div>
+      </div>
     </div>
   `;
 }
@@ -17571,12 +18796,10 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         overflow: hidden;
         cursor: pointer;
         color: ${textColor};
-        container-type: inline-size;
       }
 
       .${prefix}__text {
         padding: 20px;
-        width: 70%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -17588,7 +18811,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         color: inherit;
         margin: 0;
         font-size: 20px;
-        font-family: "Cormorant";
+        font-family: "Cormorant", system-ui;
         font-style: normal;
         font-weight: 300;
         line-height: normal;
@@ -17707,7 +18930,6 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
-      container-type: inline-size;
       position: relative;
     }
 
@@ -17777,12 +18999,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         border-radius: 5px;
         overflow: hidden;
         cursor: pointer;
-        container-type: inline-size;
-      }
-
-      .${prefix}__text {
-        padding: 10px;
-        width: 70%;
+        position: relative;
       }
 
       .${prefix}__header {
@@ -17793,6 +19010,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         font-style: normal;
         font-weight: 400;
         margin: 0;
+        padding: 10px;
       }
 
       @container (min-width: 640px) {
@@ -17810,9 +19028,7 @@ function rbSmallCategoryImageToutTemplate(spot, config) {
     ${GFONT_CORMORANT}
     ${STYLES$1(spot, config)}
     <div class="${prefix}">
-      <div class="${prefix}__text">
-        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-      </div>
+      ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
     </div>
   `;
 }
@@ -17827,7 +19043,6 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       display: flex;
       flex-direction: column;
       border-radius: 5px;
-      container-type: inline-size;
     }
 
     .${prefix}__image {
@@ -17960,97 +19175,186 @@ const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     // 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);
+    return spotHtmlStringToElement(spotHtmlString, spot.spot);
 };
 
-/**
- * PubSub class
- * Manages event subscriptions and publications
- * @template IEventMap A record type defining the structure of events and their data
- */
-class PubSub {
+// For the moment, we will only focus on sites that use Google Analytics,
+// but we will add support for other analytics tools in the future.
+var AnalyticsTool;
+(function (AnalyticsTool) {
+    AnalyticsTool["GoogleAnalytics"] = "google-analytics";
+    AnalyticsTool["Other"] = "Other";
+})(AnalyticsTool || (AnalyticsTool = {}));
+
+class DataLayerMonitor {
     constructor() {
-        /**
-         * Object to store subscribers for each event type
-         */
-        this.subscribers = {};
+        if (!window.dataLayer) {
+            return;
+        }
+        this.originalPush = window.dataLayer.push;
     }
     static getInstance() {
-        if (!PubSub.instance) {
-            PubSub.instance = new PubSub();
-        }
-        return PubSub.instance;
+        if (!DataLayerMonitor.instance) {
+            DataLayerMonitor.instance = new DataLayerMonitor();
+        }
+        return DataLayerMonitor.instance;
+    }
+    setListener(listener) {
+        this.listener = listener;
+    }
+    start() {
+        window.dataLayer.push = (...args) => {
+            const result = this.originalPush.apply(window.dataLayer, args);
+            const pushedEvent = args[0];
+            if (this.listener) {
+                const normalizedData = this.cleanEventData(pushedEvent);
+                if (normalizedData) {
+                    this.listener(normalizedData);
+                }
+            }
+            return result;
+        };
     }
-    /**
-     * Subscribe to an event
-     * @param eventType - The type of event to subscribe to
-     * @param callback - The function to be called when the event is published
-     * @returns A function to unsubscribe from the event
-     *
-     * @Example:
-     * const unsubscribe = pubSub.subscribe('userLogin', (data) => {
-     *   console.log(`User ${data.username} logged in`);
-     * });
-     */
-    subscribe(eventType, callback) {
-        if (!this.subscribers[eventType]) {
-            this.subscribers[eventType] = [];
+    cleanEventData(data) {
+        const eventName = getEventTypeFromRawEvent(data.event);
+        if (!eventName) {
+            return null;
         }
-        this.subscribers[eventType].push(callback);
-        // Return an unsubscribe function
-        return () => {
-            this.subscribers[eventType] = this.subscribers[eventType].filter((cb) => cb !== callback);
+        const productIds = extractDeepValues(data, 'ids', {
+            onlyFirst: false,
+            shouldIncludeZero: true,
+        });
+        if (Array.isArray(productIds) && productIds.length === 0) {
+            return null;
+        }
+        const normalizedData = {
+            event: eventName,
+            productIds,
         };
+        if (eventName === exports.RMN_SPOT_EVENT.PURCHASE) {
+            const productPrice = extractDeepValues(data, 'price', {
+                onlyFirst: true,
+                shouldIncludeZero: true,
+            });
+            if (productPrice) {
+                normalizedData.productPrice = productPrice;
+            }
+        }
+        return normalizedData;
     }
-    /**
-     * Publish an event
-     * @param eventType - The type of event to publish
-     * @param data - The data to be passed to the event subscribers
-     *
-     * @Example:
-     * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
-     */
-    publish(eventType, data) {
-        if (!this.subscribers[eventType]) {
+    stop() {
+        if (this.originalPush) {
+            window.dataLayer.push = this.originalPush;
+        }
+        this.listener = undefined;
+    }
+}
+
+// @TODO: Add support for user to push events to our own data layer, if they don't use any analytics tool.
+// window.rmnDataLayer = window.rmnDataLayer || [];
+class MonitorService {
+    constructor() {
+        const analyticsTool = this.detectAnalyticsTool();
+        switch (analyticsTool) {
+            case AnalyticsTool.GoogleAnalytics:
+                this.implementedMonitor = DataLayerMonitor.getInstance();
+                break;
+            case AnalyticsTool.Other:
+            default:
+                console.warn('This site uses an unsupported analytics tool.');
+                break;
+        }
+        if (analyticsTool === AnalyticsTool.Other) {
             return;
         }
-        this.subscribers[eventType].forEach((callback) => callback(data));
+        this.pubSubService = PubsubService.getInstance();
+        this.localStorageService = LocalStorageService.getInstance();
+    }
+    static getInstance() {
+        if (!MonitorService.instance) {
+            MonitorService.instance = new MonitorService();
+        }
+        return MonitorService.instance;
+    }
+    start() {
+        if (!this.implementedMonitor)
+            return;
+        this.implementedMonitor.setListener(async (eventData) => {
+            var _a;
+            await this.matchAndFireEvent(eventData, (_a = this.localStorageService) === null || _a === void 0 ? void 0 : _a.getSpots());
+        });
+        this.implementedMonitor.start();
+    }
+    async matchAndFireEvent(eventData, spots) {
+        var _a, _b;
+        if (!spots)
+            return;
+        const eventProductIds = new Set(cleanProductIds(eventData.productIds));
+        for (const spot of Object.values(spots)) {
+            if (!spot.productIds.length)
+                continue;
+            const hasCommonProductIds = cleanProductIds(spot.productIds).find((productId) => eventProductIds.has(productId));
+            if (!hasCommonProductIds || !Object.values(exports.RMN_SPOT_EVENT).includes(eventData.event)) {
+                continue;
+            }
+            const eventUrl = (_b = (_a = spot.events.find((event) => event.event === eventData.event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '';
+            const additionalQueryParams = objectToQueryParams({
+                override: eventData.productPrice,
+            });
+            await this.fireAndPublishSpotEvent({
+                spotEvent: eventData.event,
+                eventUrl: `${eventUrl}${additionalQueryParams ? `&${additionalQueryParams}` : ''}`,
+                placementId: spot.placementId,
+                spotId: spot.spotId,
+            });
+        }
+    }
+    async fireAndPublishSpotEvent({ spotEvent, eventUrl, placementId, spotId, }) {
+        await fireEvent({
+            event: spotEvent,
+            eventUrl,
+        });
+        if (!this.pubSubService)
+            return;
+        this.pubSubService.publish(exports.RMN_EVENT.SPOT_EVENT, {
+            eventType: spotEvent,
+            placementId,
+            spotId,
+        });
+    }
+    detectAnalyticsTool() {
+        let analyticsTool = AnalyticsTool.Other;
+        // Check for Google Analytics
+        if (typeof window.ga !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Analytics 4
+        if (typeof window.gtag !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Tag Manager
+        if (typeof window.google_tag_manager !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // @TODO: Add support for other analytics tools
+        // Check for Heap Analytics
+        // Check for Mixpanel
+        // Check for Woopra
+        // Check for Segment
+        // Check for Amplitude
+        return analyticsTool;
     }
 }
-/**
- * Usage Example:
- *
- * interface IEventMap {
- *   userLogin: { username: string; timestamp: number };
- *   pageView: { url: string; timestamp: number };
- * }
- *
- * const pubSub = new PubSub<IEventMap>();
- *
- * // Subscribe to events
- * const unsubscribeLogin = pubSub.subscribe('userLogin', (data) => {
- *   console.log(`User ${data.username} logged in at ${new Date(data.timestamp)}`);
- * });
- *
- * pubSub.subscribe('pageView', (data) => {
- *   console.log(`Page ${data.url} viewed at ${new Date(data.timestamp)}`);
- * });
- *
- * // Publish events
- * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
- * pubSub.publish('pageView', { url: '/home', timestamp: Date.now() });
- *
- * // Unsubscribe from an event
- * unsubscribeLogin();
- */
 
 class EventService {
     constructor() {
-        this.pubSub = PubSub.getInstance();
-        this.localStorage = LocalStorage.getInstance();
+        this.pubSubService = PubsubService.getInstance();
+        this.localStorageService = LocalStorageService.getInstance();
         this.activeSpots = new Map();
         this.spotStates = new Map();
         this.intersectionObserver = new IntersectionObserverService();
+        // Start the user monitor, which will track and check user interactions
+        MonitorService.getInstance().start();
     }
     static getInstance() {
         if (!EventService.instance) {
@@ -18059,25 +19363,28 @@ class EventService {
         return EventService.instance;
     }
     subscribe(eventType, callback) {
-        return this.pubSub.subscribe(eventType, callback);
+        return this.pubSubService.subscribe(eventType, callback);
     }
     publish(eventType, data) {
-        this.pubSub.publish(eventType, data);
+        this.pubSubService.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));
+        this.activeSpots.set(spot.id, { placementId, spotElement });
+        // Handle Impression Event
+        this.handleImpressionEvent(placementId, spot);
+        // Handle Click Event
+        spotElement.addEventListener('click', async () => {
+            await this.handleClickEvent(params);
+        });
+        // Handle Intersection Observer
+        this.handleIntersectionObserver(placementId, spotElement);
     }
     unregisterSpot(placementId) {
         const placementIdClean = placementId.replace('#', '');
-        const spotData = this.activeSpots.get(placementIdClean);
-        if (!spotData) {
+        const spotId = this.getSpotIdByPlacementId(this.activeSpots, placementIdClean);
+        const data = this.activeSpots.get(placementIdClean !== null && placementIdClean !== void 0 ? placementIdClean : '');
+        if (!spotId || !data) {
             this.handleSpotState(placementIdClean, {
                 state: {
                     error: `Active spot with placementId ${placementIdClean} not found.`,
@@ -18085,7 +19392,7 @@ class EventService {
             });
             return;
         }
-        this.intersectionObserver.unobserve(spotData.spotElement);
+        this.intersectionObserver.unobserve(data.spotElement);
         this.handleSpotState(placementIdClean, {
             dom: {
                 spotElement: undefined,
@@ -18094,9 +19401,10 @@ class EventService {
             state: {
                 unmounted: true,
                 mounted: false,
+                loading: false,
             },
         });
-        this.activeSpots.delete(placementIdClean);
+        this.activeSpots.delete(spotId);
         const placementElement = document.getElementById(placementIdClean);
         if (!placementElement) {
             this.handleSpotState(placementIdClean, {
@@ -18143,128 +19451,77 @@ class EventService {
                 },
             };
         }
-        this.spotStates.set(placementId, { ...currentState, ...updates });
+        const merged = this.deepMerge(currentState, updates);
+        this.spotStates.set(placementId, merged);
         if (publish) {
-            this.pubSub.publish(exports.RMN_SPOT_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
+            this.pubSubService.publish(exports.RMN_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
         }
     }
-    async handleClick({ placementId, spot, spotElement, }) {
+    async handleClickEvent({ placementId, spot }) {
         var _a, _b, _c;
-        // Publish click event
-        this.pubSub.publish(exports.RMN_SPOT_EVENT.CLICK, {
+        this.pubSubService.publish(exports.RMN_EVENT.SPOT_EVENT, {
+            eventType: exports.RMN_SPOT_EVENT.CLICK,
             placementId,
             spotId: spot.id,
-            spotElement,
         });
-        // Fire click event
-        await this.fireEvent({
+        await 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, {
+        this.localStorageService.setSpot(spot.id, {
+            placementId,
             spotId: spot.id,
             spotType: spot.spot,
             events: spot.events,
-            productIds: (_c = spot.productIds) !== null && _c !== void 0 ? _c : [1, 'GROUPING-12345', 'DAN-12345', 131398103],
+            productIds: (_c = spot.productIds) !== null && _c !== void 0 ? _c : [],
         });
     }
-    handleIntersectionObserver(placementId, _spot, spotElement) {
-        const spotIsVisibleCallback = async () => {
-            this.intersectionObserver.unobserve(spotElement);
-            this.handleSpotState(placementId, {
-                dom: {
-                    spotElement,
-                    visibleOnViewport: true,
-                },
-            });
-        };
-        this.intersectionObserver.observe(spotElement, spotIsVisibleCallback);
-    }
-    fireImpressionEvent(placementId, spot, spotElement) {
-        this.pubSub.publish(exports.RMN_SPOT_EVENT.IMPRESSION, {
+    handleImpressionEvent(placementId, spot) {
+        this.pubSubService.publish(exports.RMN_EVENT.SPOT_EVENT, {
+            eventType: exports.RMN_SPOT_EVENT.IMPRESSION,
             placementId,
             spotId: spot.id,
-            spotElement,
         });
         (async () => {
             var _a, _b;
-            await this.fireEvent({
+            await 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 : '',
             });
         })();
     }
-    /**
-     * Fires an event using the navigator.sendBeacon method or a fallback method if sendBeacon is not available.
-     * If the event is a click event and a redirect URL is found, it redirects the user to that URL.
-     *
-     * @param {IFireEventParams} params - The parameters for firing the event.
-     * @param {RMN_SPOT_EVENT} params.event - The event type.
-     * @param {string} params.eventUrl - The URL to which the event is sent.
-     * @returns {Promise<void>} - A promise that resolves when the event is fired.
-     */
-    async fireEvent({ event, eventUrl }) {
-        var _a;
-        try {
-            const didFireEvent = ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.sendBeacon) === null || _a === void 0 ? void 0 : _a.call(navigator, eventUrl)) || (await this.fallbackEventFire(eventUrl));
-            if (!didFireEvent) {
-                return;
-            }
-            if (event === exports.RMN_SPOT_EVENT.CLICK) {
-                const redirectUrl = this.getRedirectUrlFromPayload(eventUrl);
-                if (redirectUrl) {
-                    window.location.href = redirectUrl;
-                }
+    getSpotIdByPlacementId(activeSpots, searchPlacementId) {
+        for (const [spotId, spotData] of activeSpots) {
+            if (spotData.placementId === searchPlacementId) {
+                return spotId;
             }
         }
-        catch (_b) {
-            // Handle errors silently
-        }
+        return null;
     }
-    // Fallback method using fetch if sendBeacon isn't available
-    async fallbackEventFire(url) {
-        try {
-            const racePromise = Promise.race([
-                // Promise #1: The fetch request
-                fetch(url, {
-                    method: 'POST',
-                    keepalive: true,
-                }),
-                // Promise #2: The timeout
-                new Promise((_, reject) => setTimeout(() => reject(new Error('Request timeout')), 2000)),
-            ]);
-            /**
-             * Prevent requests from hanging indefinitely
-             * Improve user experience by failing fast
-             * Handle slow network conditions gracefully
-             * Ensure resources are freed up in a timely manner
-             */
-            const response = await racePromise;
-            return response.ok;
-        }
-        catch (_a) {
-            return false;
-        }
+    deepMerge(current, updates) {
+        return {
+            identifier: updates.identifier
+                ? { ...current.identifier, ...updates.identifier }
+                : current.identifier,
+            dom: updates.dom ? { ...current.dom, ...updates.dom } : current.dom,
+            state: updates.state ? { ...current.state, ...updates.state } : current.state,
+            displayConfig: updates.displayConfig
+                ? { ...current.displayConfig, ...updates.displayConfig }
+                : current.displayConfig,
+        };
     }
-    /**
-     * Extracts and decodes a URL from a base64-encoded query parameter.
-     *
-     * @param {string} url - The URL containing the base64-encoded query parameter.
-     * @returns {string | null} - The decoded URL or null if not found or invalid.
-     */
-    getRedirectUrlFromPayload(url) {
-        try {
-            const base64String = new URL(url).searchParams.get('e');
-            if (!base64String) {
-                return null;
-            }
-            const data = JSON.parse(atob(base64String));
-            return data.ur || null;
-        }
-        catch (_a) {
-            return null;
-        }
+    handleIntersectionObserver(placementId, spotElement) {
+        const spotIsVisibleCallback = async () => {
+            this.intersectionObserver.unobserve(spotElement);
+            this.handleSpotState(placementId, {
+                dom: {
+                    spotElement,
+                    visibleOnViewport: true,
+                },
+            });
+        };
+        this.intersectionObserver.observe(spotElement, spotIsVisibleCallback);
     }
 }
 
@@ -18285,6 +19542,9 @@ class SelectionService extends BaseApi {
      * @return {Promise<ISpots | { error: string }>} - The spots response object.
      */
     async spotSelection(data) {
+        if (data.userId === undefined) {
+            data.userId = this.getUserId();
+        }
         const { isOk, val, isErr } = await this.post(SELECTION_API_PATH, data, {});
         if (isErr) {
             return { error: `There was an error during spot selection: (${isErr === null || isErr === void 0 ? void 0 : isErr.errorMessage})` };
@@ -18296,6 +19556,14 @@ class SelectionService extends BaseApi {
         }
         return { error: 'Spot selection response was not successful' };
     }
+    getUserId() {
+        const isWeb = typeof window !== 'undefined';
+        if (isWeb) {
+            const localStorageService = LocalStorageService.getInstance();
+            return localStorageService.getUserId();
+        }
+        return undefined;
+    }
 }
 
 const SPOT_EVENTS_EXAMPLE = [
@@ -18324,80 +19592,278 @@ const SPOT_EVENTS_EXAMPLE = [
         url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjY5fQ&s=l6MOscQC-q-FkC2Ksd7w6jjySCQ',
     },
 ];
-const RB_SPOTS_SELECTION_EXAMPLE = {
+({
+    rbHomepageHero: [
+        {
+            id: 'abc123',
+            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: 'Premium Wine Collection',
+            description: 'Discover our exclusive selection of vintage wines',
+            ctaText: 'Shop Wines',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Collection',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Wine',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [1, 2, 3],
+        },
+        {
+            id: 'jkl012',
+            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 Collection',
+            description: 'Premium whiskeys from around the world',
+            ctaText: 'Shop Whiskeys',
+            textColor: '#ffffff',
+            backgroundColor: '#2c1810',
+            ctaTextColor: '#2c1810',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Whiskey',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Whiskey',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [10, 11],
+        },
+        {
+            id: 'stu901',
+            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: 'Summer Cocktails',
+            description: 'Essential spirits for summer mixing',
+            ctaText: 'Mix It Up',
+            textColor: '#ffffff',
+            backgroundColor: '#4d3a0a',
+            ctaTextColor: '#4d3a0a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Cocktails',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Mixers',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Cocktails',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Mixers',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [16, 17, 18],
+        },
+        {
+            id: 'def456',
+            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: 'Craft Beer Festival',
+            description: 'Local breweries and exclusive releases',
+            ctaText: 'Explore Beers',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Beer+Festival',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Beer',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [4, 5, 6],
+        },
+        {
+            id: 'mno345',
+            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: 'Champagne Selection',
+            description: 'Finest champagnes for every occasion',
+            ctaText: 'View Champagnes',
+            textColor: '#ffffff',
+            backgroundColor: '#1a1a1a',
+            ctaTextColor: '#1a1a1a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Champagne',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Champagne',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [12, 13],
+        },
+        {
+            id: 'vwx234',
+            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: 'Wine Regions',
+            description: 'Explore wines from top regions',
+            ctaText: 'Tour Regions',
+            textColor: '#ffffff',
+            backgroundColor: '#4d0a0a',
+            ctaTextColor: '#4d0a0a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Regions',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Vineyards',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Regions',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Vineyards',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [19, 20, 21],
+        },
+        {
+            id: 'ghi789',
+            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: 'Rare Spirits',
+            description: 'Limited edition spirits collection',
+            ctaText: 'View Collection',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Rare+Spirits',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Spirits',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [7, 8, 9],
+        },
+        {
+            id: 'pqr678',
+            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: 'Gin Collection',
+            description: 'Artisanal gins and botanicals',
+            ctaText: 'Explore Gins',
+            textColor: '#ffffff',
+            backgroundColor: '#0a4d4d',
+            ctaTextColor: '#0a4d4d',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Gin',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Gin',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [14, 15],
+        },
+        {
+            id: 'yz5678',
+            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: 'Tequila Collection',
+            description: 'Premium tequilas and mezcals',
+            ctaText: 'Shop Tequila',
+            textColor: '#ffffff',
+            backgroundColor: '#0a4d2b',
+            ctaTextColor: '#0a4d2b',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Tequila',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Mezcal',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Tequila',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Mezcal',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [22, 23, 24],
+        },
+    ],
     rbHomepageHeroFullImage: [
         {
-            id: '111111_111111',
+            id: 'hjk567',
             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',
+            header: 'Holiday Gift Guide',
+            description: 'Perfect spirits for every occasion',
+            ctaText: 'Shop Gifts',
             textColor: '#ffffff',
             ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Craft+Beer+Collection',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Craft+Beer',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Gift+Guide',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Gifts',
             events: SPOT_EVENTS_EXAMPLE,
+            productIds: [25, 26],
         },
         {
-            id: '222222_222222',
+            id: 'qwe890',
             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',
+            header: 'Summer Wine Festival',
+            description: 'Refreshing wines for summer',
+            ctaText: 'Shop Festival',
+            textColor: '#ffffff',
             ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Summer+Wines',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Summer+Wines',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Festival',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Festival',
             events: SPOT_EVENTS_EXAMPLE,
+            productIds: [27, 28],
         },
     ],
     rbHomepageHeroTwoTile: [
         {
-            id: '333333_333333',
+            id: 'iop987',
             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',
+            header: 'Bourbon Selection',
+            description: "Kentucky's finest bourbons",
+            ctaText: 'Shop Bourbon',
             textColor: '#ffffff',
-            backgroundColor: '#2c1a05',
-            ctaTextColor: '#2c1a05',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Whiskey+Collection',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Whiskey',
+            backgroundColor: '#2c1810',
+            ctaTextColor: '#2c1810',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Bourbon',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Bourbon',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [29, 30],
+        },
+        {
+            id: 'lkj012',
+            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: 'Vodka Collection',
+            description: 'Premium vodkas from around the world',
+            ctaText: 'Shop Vodka',
+            textColor: '#ffffff',
+            backgroundColor: '#1a1a1a',
+            ctaTextColor: '#1a1a1a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Vodka',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Vodka',
             events: SPOT_EVENTS_EXAMPLE,
+            productIds: [31, 32],
         },
     ],
     rbHomepageHeroThreeTile: [
         {
-            id: '444444_444444',
+            id: 'bnm345',
+            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: 'Rum Collection',
+            description: 'Caribbean and craft rums',
+            ctaText: 'Shop Rum',
+            textColor: '#ffffff',
+            backgroundColor: '#4d3a0a',
+            ctaTextColor: '#4d3a0a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Rum',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Craft+Rum',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Rum',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Craft',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [33, 34],
+        },
+        {
+            id: 'fgh678',
             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',
+            header: 'Scotch Selection',
+            description: 'Single malts and blends',
+            ctaText: 'Shop Scotch',
             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',
+            backgroundColor: '#4d0a0a',
+            ctaTextColor: '#4d0a0a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Scotch',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Single+Malts',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Scotch',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Malts',
             events: SPOT_EVENTS_EXAMPLE,
+            productIds: [35, 36],
         },
     ],
     rbLargeCategoryImageTout: [
         {
-            id: '555555_555555',
+            id: 'cde567',
             spot: exports.RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
             variant: exports.RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
             width: 468,
@@ -18410,11 +19876,44 @@ const RB_SPOTS_SELECTION_EXAMPLE = {
             mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Rare+Spirits',
             ctaText: 'Shop Rare Spirits',
             events: SPOT_EVENTS_EXAMPLE,
+            productIds: [37, 38, 39, 40, 41],
+        },
+        {
+            id: 'efg789',
+            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: 'Vintage Champagnes',
+            description: 'Explore our prestigious collection of aged champagnes.',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/468x410/png?text=Vintage+Champagne',
+            mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Champagne',
+            ctaText: 'View Collection',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [42, 43, 44, 45, 46],
+        },
+        {
+            id: 'ghi012',
+            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: 'Small Batch Bourbon',
+            description: 'Hand-selected premium bourbon from craft distilleries.',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/468x410/png?text=Craft+Bourbon',
+            mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Bourbon',
+            ctaText: 'Explore Bourbon',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [47, 48, 49, 50, 51],
         },
     ],
     rbSmallDiscoverTout: [
         {
-            id: '666666_666666',
+            id: 'jkl345',
             spot: exports.RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
             variant: exports.RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
             width: 224,
@@ -18424,11 +19923,38 @@ const RB_SPOTS_SELECTION_EXAMPLE = {
             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,
+            productIds: [52, 53, 54, 55, 56],
+        },
+        {
+            id: 'lmn678',
+            spot: exports.RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            variant: exports.RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            width: 224,
+            height: 378,
+            header: 'Macallan 25 Year',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x378/png?text=Macallan+25',
+            mobilePrimaryImage: 'https://placehold.co/224x378/png?text=Mobile+Macallan',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [57, 58, 59, 60, 61],
+        },
+        {
+            id: 'nop901',
+            spot: exports.RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            variant: exports.RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            width: 224,
+            height: 378,
+            header: 'Louis XIII Cognac',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x378/png?text=Louis+XIII',
+            mobilePrimaryImage: 'https://placehold.co/224x378/png?text=Mobile+Louis+XIII',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [62, 63, 64, 65, 66],
         },
     ],
     rbSmallCategoryImageTout: [
         {
-            id: '777777_777777',
+            id: 'qrs234',
             spot: exports.RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
             variant: exports.RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
             width: 224,
@@ -18438,11 +19964,38 @@ const RB_SPOTS_SELECTION_EXAMPLE = {
             primaryImage: 'https://placehold.co/224x410/png?text=Japanese+Sake',
             mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Japanese+Sake',
             events: SPOT_EVENTS_EXAMPLE,
+            productIds: [67, 68, 69, 70, 71],
+        },
+        {
+            id: 'stu567',
+            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: 'Craft Vermouth',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x410/png?text=Craft+Vermouth',
+            mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Vermouth',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [72, 73, 74, 75, 76],
+        },
+        {
+            id: 'vwx890',
+            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: 'Premium Mezcal',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x410/png?text=Premium+Mezcal',
+            mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Mezcal',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [77, 78, 79, 80, 81],
         },
     ],
     rbCollectionBannerWithoutTextBlock: [
         {
-            id: '888888_888888',
+            id: 'yz1234',
             spot: exports.RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
             variant: exports.RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
             width: 887,
@@ -18450,11 +20003,34 @@ const RB_SPOTS_SELECTION_EXAMPLE = {
             primaryImage: 'https://placehold.co/887x344/png?text=Summer+Cocktails',
             mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Summer+Cocktails',
             events: SPOT_EVENTS_EXAMPLE,
+            productIds: [82, 83, 84, 85, 86],
+        },
+        {
+            id: 'abc567',
+            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=Holiday+Spirits',
+            mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Holiday+Spirits',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [87, 88, 89, 90, 91],
+        },
+        {
+            id: 'def901',
+            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=Wine+Essentials',
+            mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Wine+Essentials',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [92, 93, 94, 95, 96],
         },
     ],
     rbNavigationBanner: [
         {
-            id: '999999_999999',
+            id: 'ghi234',
             spot: exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
             variant: exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
             width: 440,
@@ -18464,15 +20040,227 @@ const RB_SPOTS_SELECTION_EXAMPLE = {
             primaryImage: 'https://placehold.co/440x220/png?text=Tequila+Collection',
             mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Tequila+Collection',
             events: SPOT_EVENTS_EXAMPLE,
+            productIds: [97, 98, 99, 100, 101],
+        },
+        {
+            id: 'jkl678',
+            spot: exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            variant: exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            width: 440,
+            height: 220,
+            header: 'Craft Gin Selection',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/440x220/png?text=Gin+Selection',
+            mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Gin+Selection',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [102, 103, 104, 105, 106],
+        },
+        {
+            id: 'mno012',
+            spot: exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            variant: exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            width: 440,
+            height: 220,
+            header: 'Premium Vodka',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/440x220/png?text=Vodka+Premium',
+            mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Vodka+Premium',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [107, 108, 109, 110, 111],
         },
     ],
-};
+});
+({
+    banner: [],
+    billboard: [
+        {
+            id: 'kol567',
+            spot: exports.RMN_SPOT_TYPE.BILLBOARD,
+            variant: `${exports.RMN_SPOT_TYPE.BILLBOARD}V2`,
+            width: 1140,
+            height: 640,
+            header: 'Holiday Gift Guide',
+            description: 'Perfect spirits for every occasion',
+            ctaText: 'Shop Gifts',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Gift+Guide',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Gifts',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [25, 26],
+        },
+        {
+            id: 'hpm390',
+            spot: exports.RMN_SPOT_TYPE.BILLBOARD,
+            variant: `${exports.RMN_SPOT_TYPE.BILLBOARD}V2`,
+            width: 1140,
+            height: 640,
+            header: 'Summer Wine Festival',
+            description: 'Refreshing wines for summer',
+            ctaText: 'Shop Festival',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Festival',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Festival',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [27, 28],
+        },
+    ],
+    button2: [],
+    featurePhoneLargeBanner: [],
+    featurePhoneMediumBanner: [],
+    featurePhoneSmallBanner: [],
+    halfPage: [],
+    inText: [],
+    largeLeaderboard: [],
+    largeRectangle: [],
+    leaderboard: [],
+    mediumRectangle: [],
+    microBar: [],
+    mobilePhoneInterstitial1: [],
+    mobilePhoneInterstitial2: [],
+    mobilePhoneInterstitial3: [],
+    popUp: [],
+    portrait: [],
+    rbProductUpcs: [],
+    skyscraper: [],
+    smallRectangle: [],
+    smallSquare: [],
+    smartphoneBanner1: [],
+    smartphoneBanner2: [],
+    square: [],
+    verticalBanner: [],
+    verticalRectangle: [],
+    wideSkyscraper: [],
+});
 
+/**
+ * Checks if the current environment is a browser environment.
+ *
+ * @return {boolean} - Whether the current environment is a browser environment.
+ */
+function isBrowserEnvironment() {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        console.warn('LiquidCommerce Rmn Sdk: Methods which create elements are only available in browser environments.');
+        return false;
+    }
+    return true;
+}
+/**
+ * Validates the inject data by preventing duplicate placement ids and non-existent spot types.
+ *
+ * @param {IInjectSpotElement[]} inject - The inject data.
+ * @return {IInjectSpotElement[]} - The validated inject data.
+ */
+function validateInjectData(inject) {
+    const eventService = EventService.getInstance();
+    const placementIds = new Set();
+    const validSpotTypes = new Set(Object.values(exports.RMN_SPOT_TYPE));
+    const validatedInject = [];
+    for (const item of inject) {
+        const placementId = item.placementId.replace('#', '');
+        // Check for duplicate placement ids
+        if (placementIds.has(placementId)) {
+            eventService.handleSpotState(placementId, {
+                state: {
+                    error: `Duplicate placement id (${placementId}) found. Please provide a unique placement id for each spot element.`,
+                },
+            });
+            continue;
+        }
+        // Check for non-existent spot types
+        if (!validSpotTypes.has(item.spotType)) {
+            eventService.handleSpotState(placementId, {
+                state: {
+                    error: `Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`,
+                },
+            });
+            continue;
+        }
+        placementIds.add(placementId);
+        validatedInject.push(item);
+    }
+    return validatedInject;
+}
+/**
+ * Clears the placement element by removing all its children.
+ *
+ * @param {string} placementId - The placement id.
+ *
+ * @return {void}
+ */
+function clearPlacement(placementId) {
+    var _a;
+    (_a = document.getElementById(placementId)) === null || _a === void 0 ? void 0 : _a.replaceChildren();
+}
+/**
+ * Prepares the spot placement for rendering by taking care of its styling.
+ *
+ * @param {HTMLElement} placement - The placement element.
+ *
+ * @return {void}
+ */
+function prepareSpotPlacement(placement) {
+    placement.removeAttribute('style');
+    placement.removeAttribute('class');
+    placement.setAttribute('data-spot-parent', 'true');
+    const styles = {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+    };
+    Object.assign(placement.style, styles);
+}
+// Sets the id for the user who is browsing the website
+// This id is used to identify the user and provide personalized content
+function setUserId() {
+    if (isBrowserEnvironment()) {
+        const localStorageService = LocalStorageService.getInstance();
+        localStorageService.setUserId();
+    }
+}
+function initDOMObserver(elementIds, callback) {
+    const checkElement = (element) => {
+        if (element.id &&
+            elementIds.includes(element.id) &&
+            !element.getAttribute('data-spot-parent')) {
+            callback(element);
+        }
+    };
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.type === 'childList') {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        checkElement(node);
+                        node
+                            .querySelectorAll('*')
+                            .forEach((el) => checkElement(el));
+                    }
+                });
+            }
+        });
+    });
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+    document.querySelectorAll('*').forEach((el) => checkElement(el));
+    return observer;
+}
+
+/**
+ * LiquidCommerce Rmn Client
+ *
+ * @class
+ */
 class LiquidCommerceRmnClient {
     constructor(auth) {
         this.selectionService = SelectionService.getInstance(auth);
         this.elementService = ElementService.getInstance();
         this.eventService = EventService.getInstance();
+        this.intersectionObserver = new IntersectionObserverService();
     }
     /**
      * Makes a selection request on our server based on the provided data.
@@ -18481,7 +20269,7 @@ class LiquidCommerceRmnClient {
      *
      * @param {ISpotSelectionParams} params - Spots selection parameters.
      *
-     * @return {Promise<ISpots | {error : string}>} - The spots response object.
+     * @return {Promise<ISpots | { error : string }>} - The spots response object.
      */
     async spotSelection(params) {
         return this.selectionService.spotSelection(params);
@@ -18494,105 +20282,188 @@ class LiquidCommerceRmnClient {
      * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
      */
     async injectSpotElement(params) {
-        var _a;
         const config = params.config;
-        let inject = params.inject;
-        if (!inject.length) {
+        // Handle no spots error state
+        if (!params.inject.length) {
             this.eventService.handleSpotState('all', {
                 state: {
                     error: 'No spot elements provided for injection.',
-                    loading: false,
-                },
-            });
-            return;
-        }
-        // Update the state of the spots to loading
-        this.updateSpotsState(inject);
-        // Prevent duplicate placement ids
-        const hasDuplicatePlacementIds = this.preventDuplicateSpotPlacementIds(inject);
-        if (!hasDuplicatePlacementIds) {
-            return;
-        }
-        // Prevent non-existent spot types
-        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', {
-                state: {
-                    error: response.error,
                 },
             });
             return;
         }
-        for (const item of inject) {
-            const itemConfig = (_a = item.config) !== null && _a !== void 0 ? _a : config;
-            const spots = response[item.placementId];
-            if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
-                this.eventService.handleSpotState(item.placementId, {
+        // Validate inject data
+        const inject = validateInjectData(params.inject);
+        const placementElementShowedInDOM = (placement) => {
+            var _a;
+            const data = inject.find((item) => item.placementId === placement.id);
+            // Handle placement not found error state
+            if (!data) {
+                this.eventService.handleSpotState(placement.id, {
                     state: {
-                        error: `No spots found for type "${item.spotType}".`,
+                        error: `Placement not found for id "${placement.id}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
-                continue;
+                return;
             }
-            const placementId = item.placementId.replace('#', '');
-            const placement = document.getElementById(placementId);
-            if (!placement) {
-                this.eventService.handleSpotState(item.placementId, {
+            // Identify the spot element
+            this.eventService.handleSpotState(data.placementId, {
+                identifier: {
+                    placementId: data.placementId,
+                    spotType: data.spotType,
+                },
+            }, false);
+            prepareSpotPlacement(placement);
+            const skeletonElement = this.elementService.createSkeletonElement({
+                fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
+                spotType: data.spotType,
+            });
+            // Handle skeleton loader error state
+            if (!skeletonElement) {
+                this.eventService.handleSpotState(data.placementId, {
                     state: {
-                        error: `Placement not found for id "${placementId}".`,
-                        loading: false,
+                        error: `Failed to create skeleton loader element.`,
+                        mounted: false,
+                        loading: true,
                     },
                 });
-                continue;
+                return;
             }
-            // 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) {
-                    continue;
+            placement.replaceChildren(skeletonElement);
+            const spotPlacementIsNearCallback = async () => {
+                var _a;
+                // Stop observing the placement, as we only need to do this once
+                this.intersectionObserver.unobserve(placement);
+                // Set the spot element to loading state
+                this.eventService.handleSpotState(data.placementId, { state: { loading: true } });
+                // Make the spot selection request
+                const response = await this.injectSpotSelectionRequest({ ...params, inject: [data] });
+                // const response = await useSpotSelectionExample(inject);
+                // Handle request error state
+                if (typeof response === 'object' && 'error' in response) {
+                    this.eventService.handleSpotState(data.placementId, {
+                        state: {
+                            error: response.error,
+                            mounted: false,
+                            loading: false,
+                        },
+                    });
+                    clearPlacement(data.placementId);
+                    return;
                 }
-            }
-            if (spots.length > 1) {
-                const isInjected = this.injectCarouselSpotElement(placement, spots, itemConfig);
-                if (!isInjected) {
-                    continue;
+                const itemConfig = (_a = data.config) !== null && _a !== void 0 ? _a : config;
+                const spots = response[data.placementId];
+                // Handle no spots found error state
+                if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
+                    this.eventService.handleSpotState(data.placementId, {
+                        state: {
+                            error: `No spots found for type "${data.spotType}".`,
+                            mounted: false,
+                            loading: false,
+                        },
+                    });
+                    clearPlacement(data.placementId);
+                    return;
                 }
-            }
-        }
+                // Handle single spot
+                if (spots.length === 1) {
+                    this.injectOneSpotElement(placement, spots[0], itemConfig);
+                }
+                // Handle multiple spots (carousel)
+                if (spots.length > 1) {
+                    this.injectCarouselSpotElement(placement, spots, itemConfig);
+                }
+            };
+            /**
+             * Observe the placement element to check if it is near the viewport.
+             * If it is near, make the spot selection request.
+             */
+            this.intersectionObserver.observe(placement, spotPlacementIsNearCallback, {
+                rootMargin: '1000px',
+                threshold: 0,
+            });
+        };
+        initDOMObserver(inject.map((item) => item.placementId), placementElementShowedInDOM);
     }
     /**
-     * Makes a selection request on our server based on the provided data.
+     * Injects a single spot element into the provided placement.
      *
-     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     * @param {HTMLElement} placement - The placement element.
+     * @param {ISpot} spot - The spot data.
+     * @param {IInjectSpotElementConfig} config - The configuration object.
      *
-     * @return {Promise<ISpots | {error: string}>} - The spots response object.
+     * @return {void}
      */
-    async spotSelectionRequest(params) {
-        const { inject, filter, config } = params;
-        const request = {
-            url: config === null || config === void 0 ? void 0 : config.url,
-            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);
+    injectOneSpotElement(placement, spot, config) {
+        var _a;
+        const placementId = placement.id;
+        const spotType = spot.spot;
+        this.eventService.handleSpotState(placementId, {
+            identifier: {
+                placementId,
+                spotType,
+                spotId: spot.id,
+            },
+            displayConfig: {
+                isSingleItem: true,
+                isCarousel: false,
+                isCarouselItem: false,
+            },
+        });
+        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
+        const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
+        if (!content) {
+            this.eventService.handleSpotState(placementId, {
+                state: {
+                    error: `Failed to inject spot element. Could not create element for type "${spotType}".`,
+                    mounted: false,
+                    loading: false,
+                },
+            });
+            clearPlacement(placementId);
+            return;
+        }
+        // Create the spot element
+        const spotElement = this.elementService.createSpotElement({
+            content,
+            config: {
+                fluid: config === null || config === void 0 ? void 0 : config.fluid,
+                spot: spot.spot,
+                width: spot.width,
+                height: spot.height,
+                minScale: (_a = config === null || config === void 0 ? void 0 : config.minScale) !== null && _a !== void 0 ? _a : 0.25, // Scale down to 25% of the original size
+            },
+        });
+        if (!spotElement) {
+            this.eventService.handleSpotState(placementId, {
+                state: {
+                    error: `Failed to inject spot element. Could not create element for type "${spotType}".`,
+                    mounted: false,
+                    loading: false,
+                },
+            });
+            clearPlacement(placementId);
+            return;
+        }
+        this.eventService.registerSpot({
+            spot: spotData,
+            placementId,
+            spotElement,
+        });
+        placement.replaceChildren(spotElement);
+        this.eventService.handleSpotState(placementId, {
+            dom: {
+                spotElement,
+                visibleOnViewport: false,
+            },
+            state: {
+                mounted: true,
+                loading: false,
+                error: undefined,
+            },
+        });
     }
     /**
      * Injects a carousel element with the provided spots into the placement.
@@ -18605,21 +20476,28 @@ class LiquidCommerceRmnClient {
      */
     injectCarouselSpotElement(placement, spots, config) {
         var _a;
+        const placementId = placement.id;
         const carouselSlides = [];
         for (const spotItem of spots) {
-            this.eventService.handleSpotState(placement.id, {
+            this.eventService.handleSpotState(placementId, {
+                identifier: {
+                    placementId,
+                    spotType: spotItem.spot,
+                    spotId: spotItem.id,
+                },
                 displayConfig: {
+                    isSingleItem: false,
                     isCarousel: true,
                     isCarouselItem: true,
-                    isSingleItem: false,
                 },
-            }, false);
+            });
             const spot = this.elementService.overrideSpotColors(spotItem, config === null || config === void 0 ? void 0 : config.colors);
             const content = SPOT_TEMPLATE_HTML_ELEMENT(spot, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
             if (!content) {
-                this.eventService.handleSpotState(placement.id, {
+                this.eventService.handleSpotState(placementId, {
                     state: {
                         error: `Failed to inject carousel spot item element. Could not create element for type "${spot.spot}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18627,7 +20505,7 @@ class LiquidCommerceRmnClient {
             }
             this.eventService.registerSpot({
                 spot,
-                placementId: placement.id,
+                placementId,
                 spotElement: content,
             });
             carouselSlides.push(content);
@@ -18649,154 +20527,50 @@ class LiquidCommerceRmnClient {
             },
         });
         if (!carouselElement) {
-            this.eventService.handleSpotState(placement.id, {
+            this.eventService.handleSpotState(placementId, {
                 state: {
                     error: `Failed to inject spot carousel element. Could not create spot carousel element.`,
+                    mounted: false,
                     loading: false,
                 },
             });
-            return false;
+            clearPlacement(placementId);
+            return;
         }
         placement.replaceChildren(carouselElement);
-        this.eventService.handleSpotState(placement.id, {
+        this.eventService.handleSpotState(placementId, {
             dom: {
                 spotElement: carouselElement,
+                visibleOnViewport: false,
             },
             state: {
                 mounted: true,
                 loading: false,
+                error: undefined,
             },
         });
-        return true;
-    }
-    /**
-     * Injects a single spot element into the provided placement.
-     *
-     * @param {IInjectSpotElement} injectItem - The inject item data.
-     * @param {HTMLElement} placement - The placement element.
-     * @param {ISpot} spot - The spot data.
-     * @param {IInjectSpotElementConfig} config - The configuration object.
-     *
-     * @return {void}
-     */
-    injectOneSpotElement(injectItem, placement, spot, config) {
-        var _a;
-        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
-        this.eventService.handleSpotState(injectItem.placementId, {
-            displayConfig: {
-                isSingleItem: true,
-            },
-        }, false);
-        // Create the spot template element
-        const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
-        if (!content) {
-            this.eventService.handleSpotState(injectItem.placementId, {
-                state: {
-                    error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
-                    loading: false,
-                },
-            });
-            return false;
-        }
-        // Create the spot element
-        const spotElement = this.elementService.createSpotElement({
-            content,
-            config: {
-                fluid: config === null || config === void 0 ? void 0 : config.fluid,
-                spot: spot.spot,
-                width: spot.width,
-                height: spot.height,
-                minScale: (_a = config === null || config === void 0 ? void 0 : config.minScale) !== null && _a !== void 0 ? _a : 0.25, // Scale down to 25% of the original size
-            },
-        });
-        if (!spotElement) {
-            this.eventService.handleSpotState(injectItem.placementId, {
-                state: {
-                    error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
-                    loading: false,
-                },
-            });
-            return false;
-        }
-        this.eventService.registerSpot({
-            spot: spotData,
-            placementId: injectItem.placementId,
-            spotElement,
-        });
-        placement.replaceChildren(spotElement);
-        this.eventService.handleSpotState(injectItem.placementId, {
-            dom: {
-                spotElement,
-            },
-            state: {
-                mounted: true,
-                loading: false,
-            },
-        });
-        return true;
     }
     /**
-     * Prevents duplicate placement ids in the inject data.
-     *
-     * @param {IInjectSpotElement[]} inject - The inject data.
+     * Makes a selection request on our server based on the provided data.
      *
-     * @throws {Error} - If a duplicate placement id is found.
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
      *
-     * @return {void}
+     * @return {Promise<ISpots | {error: string}>} - The spots response object.
      */
-    preventDuplicateSpotPlacementIds(inject) {
-        const placementIds = new Set();
-        for (const item of inject) {
-            if (placementIds.has(item.placementId)) {
-                this.eventService.handleSpotState(item.placementId, {
-                    state: {
-                        error: `Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`,
-                    },
-                });
-                return false;
-            }
-            placementIds.add(item.placementId);
-        }
-        return true;
-    }
-    preventNonExistentSpotTypes(inject) {
-        const newInject = [];
-        for (const item of inject) {
-            if (!Object.values(exports.RMN_SPOT_TYPE).includes(item.spotType)) {
-                this.eventService.handleSpotState(item.placementId, {
-                    state: {
-                        error: `Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`,
-                    },
-                });
-                continue;
-            }
-            newInject.push(item);
-        }
-        return newInject;
-    }
-    updateSpotsState(inject) {
-        for (const item of inject) {
-            this.eventService.handleSpotState(item.placementId, {
-                identifier: {
-                    placementId: item.placementId,
-                    spotType: item.spotType,
-                },
-                state: {
-                    loading: true,
-                },
-            });
-        }
-    }
-    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);
-        });
+    async injectSpotSelectionRequest(params) {
+        const { inject, filter, config } = params;
+        const 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,
+        }));
+        const request = {
+            url: config === null || config === void 0 ? void 0 : config.url,
+            filter,
+            spots,
+        };
+        return this.spotSelection(request);
     }
 }
 /**
@@ -18810,6 +20584,7 @@ class LiquidCommerceRmnClient {
 async function RmnClient(apiKey, config) {
     const authService = AuthService.getInstance(apiKey, config.env);
     const credentials = await authService.initialize();
+    setUserId();
     return new LiquidCommerceRmnClient(credentials);
 }
 /**