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

package/dist/index.esm.js

@@ -42,6 +42,7 @@ var RMN_SPOT_TYPE;
 var RMN_FILTER_PROPERTIES;
 (function (RMN_FILTER_PROPERTIES) {
     RMN_FILTER_PROPERTIES["KEYWORDS"] = "keywords";
+    RMN_FILTER_PROPERTIES["PAGE_LOCATION"] = "pageLocation";
     RMN_FILTER_PROPERTIES["PARENTCO"] = "parentCo";
     RMN_FILTER_PROPERTIES["BRAND"] = "brand";
     RMN_FILTER_PROPERTIES["CATEGORY"] = "category";
@@ -53,6 +54,7 @@ var RMN_FILTER_PROPERTIES;
 })(RMN_FILTER_PROPERTIES || (RMN_FILTER_PROPERTIES = {}));
 var RMN_SPOT_EVENT;
 (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";
@@ -60,7 +62,6 @@ var RMN_SPOT_EVENT;
     RMN_SPOT_EVENT["ADD_TO_WISHLIST"] = "ADD_TO_WISHLIST";
     RMN_SPOT_EVENT["BUY_NOW"] = "BUY_NOW";
 })(RMN_SPOT_EVENT || (RMN_SPOT_EVENT = {}));
-
 var RMN_ENV;
 (function (RMN_ENV) {
     RMN_ENV["LOCAL"] = "local";
@@ -14997,7 +14998,7 @@ class BaseApi extends BaseApiAbstract {
      */
     async post(path, data, configOverrides) {
         let requestData = data;
-        if (this.authInfo.env !== RMN_ENV.DEVELOPMENT) {
+        if (![RMN_ENV.LOCAL, RMN_ENV.DEVELOPMENT].includes(this.authInfo.env)) {
             const timestamp = new Date().getTime();
             configOverrides = {
                 ...configOverrides,
@@ -15150,9 +15151,7 @@ class AuthService extends BaseApi {
 }
 
 const SPOT_ELEMENT_TAG = 'spot-element';
-const SPOT_ELEMENT_SLOT_NAME = `${SPOT_ELEMENT_TAG}-custom-content`;
-const SPOTS_SELECTION_API_PATH = '/spots/selection';
-
+const CAROUSEL_ELEMENT_TAG = 'spot-carousel-element';
 const GFONT_PRECONNECT = `
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -15163,141 +15162,1156 @@ 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_ELEMENT_TEMPLATE = (width, height, hasCustomContent) => {
-    const style = document.createElement('style');
-    style.textContent = `
-    :host {
-      display: block;
-      position: relative;
-      container-type: inline-size;
-      overflow: hidden;
+
+class IntersectionObserverService {
+    constructor(defaultOptions = {}) {
+        this.observers = new Map();
+        this.defaultOptions = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 0.5,
+            ...defaultOptions,
+        };
     }
-    :host([fluid="true"]) {
-      width: 100%;
-      height: 100%;
+    observe(element, callback, options = {}) {
+        const mergedOptions = { ...this.defaultOptions, ...options };
+        const ioCallback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    callback(entry);
+                }
+            });
+        };
+        const observer = new IntersectionObserver(ioCallback, mergedOptions);
+        this.observers.set(element, observer);
+        observer.observe(element);
+    }
+    unobserve(element) {
+        const observer = this.observers.get(element);
+        if (observer) {
+            observer.unobserve(element);
+            observer.disconnect();
+            this.observers.delete(element);
+        }
     }
-    :host([fluid="false"]) {
-      width: ${width}px;
-      height: ${height}px;
+    unobserveAll() {
+        this.observers.forEach((observer, element) => {
+            observer.unobserve(element);
+            observer.disconnect();
+        });
+        this.observers.clear();
     }
-  `;
-    const wrapper = document.createElement('div');
-    wrapper.className = 'wrapper';
-    const slot = document.createElement('slot');
-    slot.name = SPOT_ELEMENT_SLOT_NAME;
-    if (!hasCustomContent) {
-        style.textContent += `
-      :host .wrapper {
-        position: absolute;
-        top: 0;
-        left: 0;
+}
+
+class LocalStorage {
+    constructor() {
+        this.spots = new Map();
+        // Sync local storage with the current state
+        this.syncLocalStorage();
+        // Remove expired spots
+        this.removeExpiredSpots();
+    }
+    static getInstance() {
+        if (!LocalStorage.instance) {
+            LocalStorage.instance = new LocalStorage();
+        }
+        return LocalStorage.instance;
+    }
+    syncLocalStorage() {
+        const localStorageData = localStorage.getItem(LocalStorage.localStorageKey);
+        // TODO: Encrypt the data before storing it in the local storage
+        if (localStorageData) {
+            try {
+                const parsedData = JSON.parse(localStorageData);
+                if (parsedData && typeof parsedData === 'object') {
+                    this.spots = this.objToMap(parsedData);
+                }
+                else {
+                    this.clearLocalStorage();
+                }
+            }
+            catch (_a) {
+                // If there is an error parsing the data, clear the local storage to prevent any issues
+                this.clearLocalStorage();
+            }
+        }
+    }
+    setSpot(spotId, data) {
+        data.createdAt = Date.now();
+        this.spots.set(spotId, data);
+        this.updateLocalStorage();
+    }
+    getSpot(spotId) {
+        return this.spots.get(spotId);
+    }
+    removeSpot(spotId) {
+        this.spots.delete(spotId);
+        this.updateLocalStorage();
+    }
+    updateLocalStorage() {
+        const data = this.mapToObj(this.spots);
+        localStorage.setItem(LocalStorage.localStorageKey, JSON.stringify(data));
+    }
+    clearLocalStorage() {
+        localStorage.removeItem(LocalStorage.localStorageKey);
+    }
+    removeExpiredSpots() {
+        const currentTime = Date.now();
+        this.spots.forEach((spot, spotId) => {
+            var _a;
+            if (currentTime - ((_a = spot.createdAt) !== null && _a !== void 0 ? _a : 0) > LocalStorage.spotExpirationTime) {
+                this.spots.delete(spotId);
+            }
+        });
+        this.updateLocalStorage();
+    }
+    mapToObj(map) {
+        return Object.fromEntries(map);
+    }
+    objToMap(obj) {
+        return new Map(Object.entries(obj));
+    }
+}
+LocalStorage.localStorageKey = 'lc_rmn';
+LocalStorage.spotExpirationTime = 1000 * 60 * 60 * 24 * 7; // 7 days
+
+class ResizeObserverService {
+    constructor({ element, maxSize, minScale }) {
+        this.element = element;
+        if (!element.parentElement) {
+            throw new Error('RmnSdk: Spot element must have a parent container.');
+        }
+        this.container = element.parentElement;
+        this.setDimensions(maxSize, minScale);
+        this.resizeObserver = new ResizeObserver(() => this.updateElementSize());
+        this.resizeObserver.observe(this.container);
+        // Initial size update
+        this.updateElementSize();
+    }
+    setDimensions(maxSize, minScale) {
+        if (minScale <= 0 || minScale > 1) {
+            throw new Error('RmnSdk: Invalid minScale value');
+        }
+        const minSize = {
+            width: maxSize.width * minScale,
+            height: maxSize.height * minScale,
+        };
+        if (maxSize.width <= 0 || maxSize.height <= 0 || minSize.width <= 0 || minSize.height <= 0) {
+            throw new Error('RmnSdk: Invalid dimensions');
+        }
+        if (minSize.width > maxSize.width || minSize.height > maxSize.height) {
+            throw new Error('RmnSdk: Minimum size cannot be greater than maximum size');
+        }
+        this.maxSize = maxSize;
+        this.minSize = minSize;
+        this.aspectRatio = this.maxSize.width / this.maxSize.height;
+    }
+    updateElementSize() {
+        const { clientWidth: containerWidth, clientHeight: containerHeight } = this.container;
+        let newWidth;
+        let newHeight;
+        // First, try to fit the maximum width
+        newWidth = Math.min(containerWidth, this.maxSize.width);
+        newHeight = newWidth / this.aspectRatio;
+        // If the height exceeds the container, adjust based on height
+        if (newWidth > containerWidth) {
+            newWidth = containerWidth;
+            newHeight = containerHeight * this.aspectRatio;
+        }
+        // Ensure we're not going below minimum dimensions
+        newWidth = Math.max(newWidth, this.minSize.width);
+        newHeight = Math.max(newHeight, this.minSize.height);
+        this.element.style.width = `${newWidth}px`;
+        this.element.style.height = `${newHeight}px`;
+        // Calculate the scale percentage
+        const scaleWidth = newWidth / this.maxSize.width;
+        const scaleHeight = newHeight / this.maxSize.height;
+        const scale = Math.min(scaleWidth, scaleHeight);
+        // Dispatch a custom event
+        this.element.dispatchEvent(new CustomEvent('spotSizeChanged', {
+            detail: {
+                width: this.maxSize.width,
+                height: this.maxSize.height,
+                newWidth,
+                newHeight,
+                scale,
+            },
+        }));
+    }
+    disconnect() {
+        this.resizeObserver.disconnect();
+    }
+}
+
+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;
+        display: inline-block;
+        margin: 0;
+        overflow: hidden;
+        width: ${fluid ? '100%' : `${width}px`};
+        height: ${fluid ? '100%' : `${height}px`};
+    }
+
+    .slides {
+        position: relative;
+        height: 100%;
         width: 100%;
+    }
+
+    .slide {
+        display: none;
+
+        justify-content: center;
+        align-items: center;
         height: 100%;
-        overflow: hidden;
-      }
-    `;
+        width: 100%;
     }
-    return { style, wrapper, slot };
-};
 
-const STYLES$i = ({ primaryImage, secondaryImage }) => `
-    <style>
-        .content {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: row;
-            background-color: #FFFFFF;
-            gap: 0.5cqw;
-            cursor: pointer;
-            color: inherit;
-        }
-        .big-image {
-            width: 65%;
-            height: 100%;
-            background-image: url("${primaryImage}");
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: cover;
+    .slide.active {
+        display: flex;
+    }
+
+    .dots {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        opacity: var(--opacity, 1);
+    }
+
+    .dots.small .dot {
+        width: 8px;
+        height: 8px;
+    }
+
+    .dots.base .dot {
+        width: 12px;
+        height: 12px;
+    }
+
+    .dots.large .dot {
+        width: 16px;
+        height: 16px;
+    }
+
+    .dots .dot {
+        border-radius: 50%;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .dots.top-left,
+    .dots.bottom-left {
+        left: 10px;
+    }
+
+    .dots.top-center,
+    .dots.bottom-center {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .dots.top-right,
+    .dots.bottom-right {
+        right: 10px;
+    }
+
+    .dots.top-left,
+    .dots.top-center,
+    .dots.top-right {
+        top: 10px;
+    }
+
+    .dots.bottom-left,
+    .dots.bottom-center,
+    .dots.bottom-right {
+        bottom: 10px;
+    }
+
+    .dots.middle-left {
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        flex-direction: column;
+    }
+
+    .dots.middle-right {
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        flex-direction: column;
+    }
+
+    .buttons {
+        opacity: var(--opacity, 1);
+    }
+
+    .buttons button {
+        background-color: #00000080;
+        color: #fff;
+        border: none;
+        padding: 10px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    .buttons.small button {
+        padding: 6px;
+    }
+
+    .buttons.base button {
+        padding: 10px;
+    }
+
+    .buttons.large button {
+        padding: 14px;
+    }
+
+    .buttons button:hover {
+        background-color: #000000b3;
+    }
+
+    .buttons.buttons-separate button {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .buttons.buttons-separate .prev-button {
+        left: 10px;
+    }
+
+    .buttons.buttons-separate .next-button {
+        right: 10px;
+    }
+
+    .buttons.buttons-together {
+        position: absolute;
+        display: flex;
+        gap: 10px;
+    }
+
+    .buttons.buttons-together.top-left,
+    .buttons.buttons-together.bottom-left {
+        left: 10px;
+    }
+
+    .buttons.buttons-together.top-center,
+    .buttons.buttons-together.bottom-center {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .buttons.buttons-together.top-right,
+    .buttons.buttons-together.bottom-right {
+        right: 10px;
+    }
+
+    .buttons.buttons-together.top-left,
+    .buttons.buttons-together.top-center,
+    .buttons.buttons-together.top-right {
+        top: 10px;
+    }
+
+    .buttons.buttons-together.bottom-left,
+    .buttons.buttons-together.bottom-center,
+    .buttons.buttons-together.bottom-right {
+        bottom: 10px;
+    }
+
+    .buttons.buttons-together.middle-left,
+    .buttons.buttons-together.middle-right {
+        top: 50%;
+        transform: translateY(-50%);
+        flex-direction: column;
+    }
+
+    .buttons.buttons-together.middle-left {
+        left: 10px;
+    }
+
+    .buttons.buttons-together.middle-right {
+        right: 10px;
+    }
+
+    @media (max-width: 768px) {
+        .buttons button {
+            padding: 8px 12px;
+            font-size: 14px;
         }
-        .main {
-            width: 35%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            gap: 0.5cqw;
+    }
+`;
+
+let CarouselElement;
+if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
+    class CustomCarouselElement extends HTMLElement {
+        constructor() {
+            super();
+            this.currentSlide = 0;
+            this.dotElements = [];
+            this.prevButton = null;
+            this.nextButton = null;
+            this.autoplayInterval = null;
+            this.useDots = false;
+            this.useButtons = false;
+            this.originalFontSizes = new Map();
+            this.attachShadow({ mode: 'open' });
         }
-        .small-image {
-            width: 100%;
-            height: 50%;
-            background-image: url("${secondaryImage}");
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: cover;
+        connectedCallback() {
+            this.initializeOptions();
+            this.setupResizeObserver();
+            this.render();
+            this.setupCarousel();
         }
-        .text {
-            background: #E8E6DE;
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 50%;
-            width: 100%;
-            padding: 5% 10%;
-            box-sizing: border-box;
-            font-family: "Source Sans 3", sans-serif;
+        disconnectedCallback() {
+            var _a;
+            this.stopAutoplay();
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         }
-        .header {
-            font-size: 2.2cqw;
-            color: #000000;
-            font-style: normal;
-            font-weight: 400;
-            font-family: "Cormorant", serif;
-            margin: 0;
+        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();
         }
-        .description {
-            font-size: 1.2cqw;
-            color: #000000;
-            font-style: normal;
-            font-weight: 400;
-            margin: 1cqh 0;
+        setupResizeObserver() {
+            if (this.data && !this.data.fluid) {
+                this.resizeObserver = new ResizeObserverService({
+                    element: this,
+                    maxSize: {
+                        width: this.data.width,
+                        height: this.data.height,
+                    },
+                    minScale: this.data.minScale,
+                });
+                this.addEventListener('spotSizeChanged', this.handleCarouselSizeChanged.bind(this));
+            }
         }
-        .button {
-            font-size: 1cqw;
-            color: #000000;
-            background-color: transparent;
-            font-style: normal;
-            font-weight: 700;
-            text-decoration: underline;
-            text-transform: uppercase;
-            border: none;
-            cursor: pointer;
-            padding: 0;
-            transition: opacity 0.3s ease;
+        handleCarouselSizeChanged(event) {
+            const isRBSpot = 'rbHeroadaksda'.startsWith('rb');
+            if (!isRBSpot) {
+                // Adjust text elements font size based on the scale factor
+                this.adjustFontSize(event.detail.scale);
+            }
         }
-        .content:hover .button {
-            opacity: 0.7;
+        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) => {
+                if (element instanceof HTMLElement) {
+                    if (!this.originalFontSizes.has(element)) {
+                        const originalSize = parseFloat(window.getComputedStyle(element).fontSize);
+                        this.originalFontSizes.set(element, originalSize);
+                    }
+                    const originalSize = this.originalFontSizes.get(element);
+                    const newFontSize = originalSize * scaleFactor;
+                    element.style.fontSize = `${newFontSize}px`;
+                }
+            });
         }
-        @container (max-width: 600px) {
-            .header {
-                font-size: 3cqw;
+        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);
             }
-            .description {
-                font-size: 1.6cqw;
-                margin: 0;
+            if (this.useButtons) {
+                const buttons = this.renderButtons();
+                if (buttons)
+                    this.shadowRoot.appendChild(buttons);
             }
-            .button {
-                font-size: 1.4cqw;
+        }
+        setupCarousel() {
+            this.setupDots();
+            this.setupButtons();
+            if (this.autoplay) {
+                this.startAutoplay();
             }
+            this.updateCarousel();
         }
-    </style>
-`;
-function billboardV1Template(spot) {
-    return `
-        ${GFONT_PRECONNECT}
-        ${GFONT_SOURCE_SANS_3}
-        ${GFONT_CORMORANT}
+        renderSlides() {
+            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);
+            });
+            return slidesContainer;
+        }
+        renderDots() {
+            const dotsContainer = document.createElement('div');
+            dotsContainer.className = `dots ${this.dotsOptions.position} ${this.dotsOptions.size}`;
+            dotsContainer.style.cssText = `--opacity: ${this.dotsOptions.opacity}`;
+            this.slides.forEach((_, index) => {
+                const dot = document.createElement('span');
+                dot.className = `dot ${index === this.currentSlide ? 'active' : ''}`;
+                dot.style.backgroundColor = this.dotsOptions.color;
+                dotsContainer.appendChild(dot);
+            });
+            return dotsContainer;
+        }
+        renderButtons() {
+            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);
+            return buttonsContainer;
+        }
+        createButton(className, text) {
+            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;
+            return button;
+        }
+        setupDots() {
+            if (!this.shadowRoot || !this.useDots)
+                return;
+            this.dotElements = Array.from(this.shadowRoot.querySelectorAll('.dot'));
+            this.dotElements.forEach((dot, index) => {
+                dot.addEventListener('click', () => {
+                    this.goToSlide(index);
+                    this.resetAutoplay();
+                });
+            });
+        }
+        setupButtons() {
+            var _a, _b;
+            if (!this.useButtons)
+                return;
+            (_a = this.prevButton) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+                this.prevSlide();
+                this.resetAutoplay();
+            });
+            (_b = this.nextButton) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => {
+                this.nextSlide();
+                this.resetAutoplay();
+            });
+        }
+        nextSlide() {
+            this.goToSlide((this.currentSlide + 1) % this.slides.length);
+        }
+        prevSlide() {
+            this.goToSlide((this.currentSlide - 1 + this.slides.length) % this.slides.length);
+        }
+        goToSlide(index) {
+            this.currentSlide = index;
+            this.updateCarousel();
+        }
+        updateCarousel() {
+            if (!this.slidesContainer)
+                return;
+            const slides = Array.from(this.slidesContainer.children);
+            slides.forEach((slide, index) => {
+                slide.classList.toggle('active', index === this.currentSlide);
+            });
+            this.updateDots();
+        }
+        updateDots() {
+            if (!this.useDots)
+                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;
+            });
+        }
+        startAutoplay() {
+            this.autoplayInterval = window.setInterval(() => this.nextSlide(), this.interval);
+        }
+        stopAutoplay() {
+            if (this.autoplayInterval !== null) {
+                window.clearInterval(this.autoplayInterval);
+                this.autoplayInterval = null;
+            }
+        }
+        resetAutoplay() {
+            if (this.autoplay) {
+                this.stopAutoplay();
+                this.startAutoplay();
+            }
+        }
+        validateOptions() {
+            this.validatePosition(this.dotsOptions.position, 'dotsPosition', 'bottom-center');
+            this.validateButtonsPosition();
+        }
+        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;
+                }
+            }
+        }
+        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';
+                }
+            }
+        }
+    }
+    CustomCarouselElement.defaultInterval = 5000;
+    CustomCarouselElement.validPositions = [
+        'top-left',
+        'top-center',
+        'top-right',
+        'bottom-left',
+        'bottom-center',
+        'bottom-right',
+        'middle-left',
+        'middle-right',
+        'middle-sides',
+    ];
+    CarouselElement = CustomCarouselElement;
+}
+
+let SpotElement;
+if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
+    class CustomSpotElement extends HTMLElement {
+        constructor() {
+            super();
+            this.originalFontSizes = new Map();
+            this.attachShadow({ mode: 'open' });
+        }
+        connectedCallback() {
+            this.setupResizeObserver();
+            this.render();
+        }
+        disconnectedCallback() {
+            var _a;
+            this.removeEventListener('spotSizeChanged', this.handleSpotSizeChanged);
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        }
+        /**
+         * Setup observers for the spot element
+         * #########################################################
+         */
+        setupResizeObserver() {
+            if (this.data && !this.data.fluid) {
+                this.resizeObserver = new ResizeObserverService({
+                    element: this,
+                    maxSize: {
+                        width: this.data.width,
+                        height: this.data.height,
+                    },
+                    minScale: this.data.minScale,
+                });
+                this.addEventListener('spotSizeChanged', this.handleSpotSizeChanged.bind(this));
+            }
+        }
+        /**
+         * Observer additional event handlers
+         * #########################################################
+         */
+        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);
+            }
+        }
+        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) => {
+                if (element instanceof HTMLElement) {
+                    if (!this.originalFontSizes.has(element)) {
+                        const originalSize = parseFloat(window.getComputedStyle(element).fontSize);
+                        this.originalFontSizes.set(element, originalSize);
+                    }
+                    const originalSize = this.originalFontSizes.get(element);
+                    const newFontSize = originalSize * scaleFactor;
+                    element.style.fontSize = `${newFontSize}px`;
+                }
+            });
+        }
+        /**
+         * Spot element rendering
+         * #########################################################
+         */
+        render() {
+            if (!this.shadowRoot || !this.data || !this.content)
+                return;
+            const style = this.getTemplateStyle(this.data.width, this.data.height);
+            if (this.content instanceof HTMLElement) {
+                this.shadowRoot.replaceChildren(style, this.content);
+            }
+        }
+        getTemplateStyle(width, height) {
+            const style = document.createElement('style');
+            style.textContent = `
+        :host {
+          display: block;
+          position: relative;
+          box-sizing: border-box;
+          overflow: hidden;
+          width: ${this.data.fluid ? '100%' : `${width}px`};
+          height: ${this.data.fluid ? '100%' : `${height}px`};
+        }
+      `;
+            return style;
+        }
+    }
+    SpotElement = CustomSpotElement;
+}
+
+class ElementService {
+    static getInstance() {
+        return SingletonManager.getInstance('ElementService', () => new ElementService());
+    }
+    /**
+     * Creates the html element based on the provided data, content and configs using shadow dom.
+     *
+     * This method is only available in browser environments.
+     *
+     * @param {ICreateSpotElementParams} params - The parameters to create the final element.
+     *
+     * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
+     */
+    createSpotElement({ content, config }) {
+        var _a, _b;
+        if (!this.ensureBrowserEnvironmentAndDefineElement()) {
+            return null;
+        }
+        const spot = document.createElement(SPOT_ELEMENT_TAG);
+        spot.setAttribute('type', (_a = config === null || config === void 0 ? void 0 : config.spot) !== null && _a !== void 0 ? _a : '');
+        spot.data = {
+            spot: config === null || config === void 0 ? void 0 : config.spot,
+            fluid: (_b = config === null || config === void 0 ? void 0 : config.fluid) !== null && _b !== void 0 ? _b : false,
+            ...config,
+        };
+        spot.content = content;
+        return spot;
+    }
+    /**
+     * Creates the carousel html element based on the provided slides and configs using shadow dom.
+     *
+     * This method is only available in browser environments.
+     *
+     * @param {ICreateCarouselElementParams} params - The parameters to create the final element.
+     *
+     * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
+     */
+    createCarouselElement({ slides, config, }) {
+        if (!this.ensureBrowserEnvironmentAndDefineElement()) {
+            return null;
+        }
+        const carousel = document.createElement(CAROUSEL_ELEMENT_TAG);
+        carousel.data = {
+            spot: config === null || config === void 0 ? void 0 : config.spot,
+            fluid: false,
+            ...config,
+        };
+        carousel.slides = slides;
+        return carousel;
+    }
+    /**
+     * Overrides the spot colors with the provided colors.
+     *
+     * @param {ISpot} spot - The spot data.
+     * @param {ISpotColors} colors - The colors to override.
+     *
+     * @return {ISpot} - The spot data with the colors overridden.
+     */
+    overrideSpotColors(spot, colors) {
+        if (!colors)
+            return spot;
+        const { textColor, backgroundColor, ctaTextColor, ctaBorderColor } = colors;
+        return {
+            ...spot,
+            textColor: textColor !== null && textColor !== void 0 ? textColor : spot.textColor,
+            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : spot.backgroundColor,
+            ctaTextColor: ctaTextColor !== null && ctaTextColor !== void 0 ? ctaTextColor : spot.ctaTextColor,
+            ctaBorderColor: ctaBorderColor !== null && ctaBorderColor !== void 0 ? ctaBorderColor : spot.ctaBorderColor,
+        };
+    }
+    /**
+     * @returns {boolean} - True if the browser environment is available and the element is defined.
+     */
+    ensureBrowserEnvironmentAndDefineElement() {
+        if (typeof window === 'undefined' || typeof document === 'undefined') {
+            console.warn('LiquidCommerce Rmn Sdk: Methods which create elements are only available in browser environments.');
+            return false;
+        }
+        if (!window.customElements.get(SPOT_ELEMENT_TAG)) {
+            window.customElements.define(SPOT_ELEMENT_TAG, SpotElement);
+        }
+        if (!window.customElements.get(CAROUSEL_ELEMENT_TAG)) {
+            window.customElements.define(CAROUSEL_ELEMENT_TAG, CarouselElement);
+        }
+        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;
+    }
+    const OVERLAY_SIZE = {
+        small: 10,
+        base: 30,
+        large: 50,
+    };
+    const OVERLAY_OPACITY = {
+        light: 0.1,
+        medium: 0.4,
+        dark: 0.6,
+    };
+    const { size, opacity, color } = overlay;
+    const goTo = OVERLAY_SIZE[size];
+    const overlayOpacity = OVERLAY_OPACITY[opacity];
+    const fullColor = convertHexToRgba(color, 1);
+    const transparentColor = convertHexToRgba(color, 0);
+    const gradientColor = convertHexToRgba(color, overlayOpacity);
+    return `${fullColor} 0%, ${gradientColor} ${goTo}%, ${transparentColor} 100%`;
+}
+function spotHtmlStringToElement(htmlString) {
+    const spot = document.createElement('div');
+    spot.className = 'spot';
+    spot.innerHTML = htmlString;
+    Object.assign(spot.style, {
+        position: 'relative',
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        margin: '0',
+        padding: '0',
+    });
+    return spot;
+}
+
+const STYLES$i = ({ primaryImage, secondaryImage }) => `
+    <style>
+        .content {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: row;
+            background-color: #FFFFFF;
+            gap: 0.5cqw;
+            cursor: pointer;
+            color: inherit;
+        }
+        .big-image {
+            width: 65%;
+            height: 100%;
+            background-image: url("${primaryImage}");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .main {
+            width: 35%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5cqw;
+        }
+        .small-image {
+            width: 100%;
+            height: 50%;
+            background-image: url("${secondaryImage}");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .text {
+            background: #E8E6DE;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 50%;
+            width: 100%;
+            padding: 5% 10%;
+            box-sizing: border-box;
+            font-family: "Source Sans 3", sans-serif;
+        }
+        .header {
+            font-size: 2.2cqw;
+            color: #000000;
+            font-style: normal;
+            font-weight: 400;
+            font-family: "Cormorant", serif;
+            margin: 0;
+        }
+        .description {
+            font-size: 1.2cqw;
+            color: #000000;
+            font-style: normal;
+            font-weight: 400;
+            margin: 1cqh 0;
+        }
+        .button {
+            font-size: 1cqw;
+            color: #000000;
+            background-color: transparent;
+            font-style: normal;
+            font-weight: 700;
+            text-decoration: underline;
+            text-transform: uppercase;
+            border: none;
+            cursor: pointer;
+            padding: 0;
+            transition: opacity 0.3s ease;
+        }
+        .content:hover .button {
+            opacity: 0.7;
+        }
+        @container (max-width: 600px) {
+            .header {
+                font-size: 3cqw;
+            }
+            .description {
+                font-size: 1.6cqw;
+                margin: 0;
+            }
+            .button {
+                font-size: 1.4cqw;
+            }
+        }
+    </style>
+`;
+function billboardV1Template(spot) {
+    return `
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$i(spot)}
         <div class="content">
             <div class="big-image"></div>
@@ -16017,185 +17031,204 @@ function wideSkyscraperV1Template(spot) {
     `;
 }
 
-const STYLES$7 = ({ primaryImage, mobilePrimaryImage = primaryImage }) => `
-  <style>
-    :host {
-      min-width: 320px;
-      min-height: 223px;
-    }
-    .content {
-      display: block;
-      width: 100%;
-      height: 100%;
-      background-image: url("${mobilePrimaryImage}");
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      cursor: pointer;
-    }
-    @media (min-width: 640px) {
-      .content {
-        background-image: url("${primaryImage}");
-      }
+const STYLES$7 = ({ primaryImage, mobilePrimaryImage = primaryImage }, { prefix }) => `
+<style>
+  .${prefix} {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-image: url("${mobilePrimaryImage}");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+    container-type: inline-size;
+  }
+
+  @container (min-width: 640px) {
+    .${prefix} {
+      background-image: url("${primaryImage}");
     }
-  </style>
+  }
+</style>
 `;
-function rbCollectionBannerWithoutTextBlockTemplate(spot) {
+function rbCollectionBannerWithoutTextBlockTemplate(spot, config) {
+    const { prefix = '' } = config;
     return `
-    ${STYLES$7(spot)}
-    <div class="content"></div>
+    ${STYLES$7(spot, config)}
+    <div class="${prefix}"></div>
   `;
 }
 
-const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
-    <style>
-        :host {
-            min-width: 320px;
-            min-height: 388px;
-        }
-        .content {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            align-items: flex-start;
-            width: 100%;
-            height: 100%;
-            background-image: url("${mobilePrimaryImage}");
-            background-size: cover;
-            background-repeat: no-repeat;
-            background-position: center;
-            padding: 3%;
-            box-sizing: border-box;
-            color: ${textColor};
-            cursor: pointer;
-        }
-        .text {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: flex-start;
-            width: 100%;
-            height: fit-content;
-            gap: 5px;
-        }
-        .header {
-            font-size: 18px;
-            margin: 0;
-            font-family: "Cormorant";
-            font-style: normal;
-            font-weight: 300;
-            line-height: normal;
-        }
-        .description {
-            font-size: 10px;
-            font-family: "Source Sans 3", system-ui;
-            font-style: normal;
-            font-weight: 400;
-            line-height: 20px;
-            margin: 0;
-        }
-        .cta-button {
-            font-size: 8px;
-            font-family: "Source Sans 3", system-ui;
-            font-style: normal;
-            font-weight: 400;
-            line-height: 18px;
-            border-radius: 5px;
-            border: 0.5px solid ${ctaBorderColor};
-            display: inline-block;
-            padding: 7px 20px;
-            color: ${ctaTextColor};
-            transition: background-color 0.3s ease;
-        }
-        .content:hover .cta-button {
-            background-color: ${ctaBorderColor.length === 7 ? `${ctaBorderColor}15` : `${ctaBorderColor}`};
-        }
-        @media (min-width: 640px) {
-            .content {
-                background-image: url("${primaryImage}");
-            }
-        }
-        @media (min-width: 768px) {
-            .primary-image {
-                width: 66.66666%;
-                height: 100%;
-            }
-            .main {
+const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
+    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
+    return `
+        <style>
+            .${prefix} {
+                display: flex;
                 flex-direction: column;
+                justify-content: flex-end;
+                align-items: flex-start;
+                width: 100%;
                 height: 100%;
-                width: 33.33333%;
+                background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position: center;
+                padding: 3%;
+                box-sizing: border-box;
+                color: ${textColor};
+                cursor: pointer;
+                container-type: inline-size;
             }
-            .secondary-image {
+
+            .${prefix}__text {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                align-items: flex-start;
                 width: 100%;
-                height: 50%;
+                height: fit-content;
+                gap: 8px;
             }
-            .header {
-                font-size: 22px;
-            }
-            .description {
-                font-size: 12px;
-            }
-            .cta-button {
-                font-size: 12px;
-            }
-        }
-        @media (min-width: 1024px) {
-            .header {
+
+            .${prefix}__header {
                 font-size: 24px;
+                margin: 0;
+                font-family: "Cormorant";
+                font-style: normal;
+                font-weight: 300;
+                line-height: normal;
             }
-            .description {
-                font-size: 13px;
+
+            .${prefix}__description {
+                font-size: 10px;
+                font-family: "Source Sans 3", system-ui;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 20px;
+                margin: 0;
             }
-            .cta-button {
-                font-size: 13px;
+
+            .${prefix}__cta-button {
+                font-size: 8px;
+                font-family: "Source Sans 3", system-ui;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 18px;
+                border-radius: 5px;
+                border: 0.5px solid ${ctaBorderColor};
+                display: inline-block;
+                padding: 7px 20px;
+                color: ${ctaTextColor};
+                transition: background-color 0.3s ease;
             }
-        }
-        @media (min-width: 1280px) {
-            .header {
-                font-size: 28px;
+
+            .${prefix}:hover .cta-button {
+                background-color: ${ctaBorderColor.length === 7 ? `${ctaBorderColor}15` : `${ctaBorderColor}`};
             }
-            .description {
-                font-size: 14px;
+
+            @container (min-width: 640px) {
+                .${prefix} {
+                    background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+                }
             }
-            .cta-button {
-                font-size: 14px;
+
+            @container (min-width: 768px) {
+                .${prefix}__primary-image {
+                    width: 66.66666%;
+                    height: 100%;
+                }
+
+                .${prefix}__main {
+                    flex-direction: column;
+                    height: 100%;
+                    width: 33.33333%;
+                }
+
+                .${prefix}__secondary-image {
+                    width: 100%;
+                    height: 50%;
+                }
+
+                .${prefix}__description {
+                    font-size: 12px;
+                }
+
+                .${prefix}__cta-button {
+                    font-size: 12px;
+                }
             }
-        }
-    </style>
-`;
-function rbHomepageHeroFullImageTemplate(spot) {
+
+            @container (min-width: 1024px) {
+                .${prefix}__header {
+                    font-size: 26px;
+                }
+
+                .${prefix}__description {
+                    font-size: 13px;
+                }
+
+                .${prefix}__cta-button {
+                    font-size: 13px;
+                }
+            }
+
+            @container (min-width: 1280px) {
+                .${prefix}__header {
+                    font-size: 28px;
+                }
+
+                .${prefix}__description {
+                    font-size: 14px;
+                }
+
+                .${prefix}__cta-button {
+                    font-size: 14px;
+                }
+            }
+        </style>
+    `;
+};
+function rbHomepageHeroFullImageTemplate(spot, config) {
+    const { prefix = '' } = config;
     return `
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$6(spot)}
-    <div class="content">
-        <div class="text">
-            ${spot.header ? `<h2 class="header">${spot.header}</h2>` : ''}
-            ${spot.description ? `<p class="description">${spot.description}</p>` : ''}
-            ${spot.ctaText ? `<span class="cta-button">${spot.ctaText}</span>` : ''}
-        </div>
+    ${STYLES$6(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>
 `;
 }
 
-const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, secondaryImage, mobileSecondaryImage = secondaryImage, }) => `
-  <style>
-    :host {
-        min-width: 320px;
-        min-height: 388px;
+const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, secondaryImage, mobileSecondaryImage = secondaryImage, }, { prefix }) => `
+<style>
+    .${prefix} {
+        width: 100%;
+        height: 100%;
+        display: block;
+        position: relative;
+        container-type: inline-size;
     }
-    .content {
+
+    .${prefix}__content {
         width: 100%;
         height: 100%;
         display: flex;
-        flex-direction: column; 
+        flex-direction: column;
         background-color: transparent;
-        gap: 5px;
+        gap: 6px;
         color: inherit;
         cursor: pointer;
     }
-    .primary-image {
+
+    .${prefix}__primary-image {
         width: 100%;
         height: 60%;
         background-image: url("${mobilePrimaryImage}");
@@ -16203,14 +17236,16 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         background-repeat: no-repeat;
         background-size: cover;
     }
-    .main {
+
+    .${prefix}__main {
         width: 100%;
         height: 40%;
         display: flex;
         flex-direction: row;
-        gap: 5px;
+         gap: 6px;
     }
-    .secondary-image {
+
+    .${prefix}__secondary-image {
         width: 50%;
         height: 100%;
         background-image: url("${mobileSecondaryImage}");
@@ -16218,7 +17253,8 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         background-repeat: no-repeat;
         background-size: cover;
     }
-    .text {
+
+    .${prefix}__text {
         color: ${textColor};
         background-color: ${backgroundColor};
         text-align: center;
@@ -16228,11 +17264,12 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         align-items: center;
         width: 50%;
         height: 100%;
-        gap: 5px;
+        gap: 10px;
         padding: 0 10px;
         box-sizing: border-box;
     }
-    .header {
+
+    .${prefix}__header {
         color: inherit;
         margin: 0;
         font-size: 18px;
@@ -16241,7 +17278,8 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         font-weight: 700;
         line-height: normal;
     }
-    .description {
+
+    .${prefix}__description {
         color: inherit;
         margin: 0;
         font-size: 10px;
@@ -16249,7 +17287,8 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         font-style: normal;
         font-weight: 400;
     }
-    .cta-button {
+
+    .${prefix}__cta-button {
         color: ${ctaTextColor};
         background-color: transparent;
         font-size: 8px;
@@ -16264,108 +17303,120 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         padding: 0;
         transition: opacity 0.3s ease;
     }
-    .content:hover .cta-button {
+
+    .${prefix}__content:hover .${prefix}__cta-button {
         opacity: 0.8;
     }
-    @media (min-width: 640px) {
-        .primary-image {
+
+    @container (min-width: 640px) {
+        .${prefix}__primary-image {
             background-image: url("${primaryImage}");
         }
-        .secondary-image {
+
+        .${prefix}__secondary-image {
             background-image: url("${secondaryImage}");
         }
     }
-    @media (min-width: 768px) {
-        .content {
+
+    @container (min-width: 768px) {
+        .${prefix}__content {
             flex-direction: row;
         }
-        .primary-image {
+
+        .${prefix}__primary-image {
             width: 66.66666%;
             height: 100%;
         }
-        .main {
+
+        .${prefix}__main {
             flex-direction: column;
             height: 100%;
             width: 33.33333%;
         }
-        .secondary-image {
+
+        .${prefix}__secondary-image {
             width: 100%;
             height: 50%;
         }
-        .text {
+
+        .${prefix}__text {
             width: 100%;
             height: 50%;
         }
-        .header {
+        .${prefix}__header {
             font-size: 22px;
         }
-        .description {
+        .${prefix}__description {
             font-size: 12px;
         }
-        .cta-button {
+        .${prefix}__cta-button {
             font-size: 12px;
         }
     }
-    @media (min-width: 1024px) {
-        .header {
+
+    @container (min-width: 1024px) {
+        .${prefix}__header {
             font-size: 24px;
         }
-        .description {
+        .${prefix}__description {
             font-size: 13px;
-      }
-      .cta-button {
-        font-size: 13px;
-      }
+        }
+        .${prefix}__cta-button {
+          font-size: 13px;
+        }
     }
-    @media (min-width: 1280px) {
-        .header {
+
+    @container (min-width: 1280px) {
+        .${prefix}__header {
             font-size: 28px;
         }
-        .description {
+        .${prefix}__description {
             font-size: 14px;
         }
-        .cta-button {
+        .${prefix}__cta-button {
             font-size: 14px;
         }
     }
-  </style>
+</style>
 `;
-function rbHomepageHeroThreeTileTemplate(spot) {
+function rbHomepageHeroThreeTileTemplate(spot, config) {
+    const { prefix = '' } = config;
     return `
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$5(spot)}
-    <div class="content">
-        <div class="primary-image"></div>
-        <div class="main">
-            <div class="secondary-image"></div>
-            <div class="text">
-                ${spot.header ? `<h2 class="header">${spot.header}</h2>` : ''}
-                ${spot.description ? `<p class="description">${spot.description}</p>` : ''}
-                ${spot.ctaText ? `<span class="cta-button">${spot.ctaText}</span>` : ''}
+    ${STYLES$5(spot, config)}
+    <div class="${prefix}">
+        <div class="${prefix}__content">
+            <div class="${prefix}__primary-image"></div>
+            <div class="${prefix}__main">
+                <div class="${prefix}__secondary-image"></div>
+                <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>
         </div>
     </div>
   `;
 }
 
-const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
   <style>
-    :host {
-        min-width: 320px;
-        min-height: 388px;
-    }
-    .content {
+    .${prefix} {
         width: 100%;
         height: 100%;
         display: flex;
-        flex-direction: column-reverse; 
+        flex-direction: column-reverse;
         background-color: transparent;
-        gap: 5px;
+        gap: 6px;
         cursor: pointer;
+        container-type: inline-size;
+        position: relative;
     }
-    .image {
+
+    .${prefix}__image {
         width: 100%;
         height: 100%;
         background-image: url("${mobilePrimaryImage}");
@@ -16373,7 +17424,8 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         background-repeat: no-repeat;
         background-size: cover;
     }
-    .text {
+
+    .${prefix}__text {
         color: ${textColor};
         background-color: ${backgroundColor};
         text-align: center;
@@ -16383,11 +17435,12 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         align-items: center;
         width: 100%;
         height: 100%;
-        gap: 5px;
+        gap: 10px;
         padding: 0 10px;
         box-sizing: border-box;
     }
-    .header {
+
+    .${prefix}__header {
         font-size: 18px;
         margin: 0;
         color: inherit;
@@ -16396,7 +17449,8 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         font-weight: 700;
         line-height: normal;
     }
-    .description {
+
+    .${prefix}__description {
         color: inherit;
         margin: 0;
         font-size: 10px;
@@ -16404,7 +17458,8 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         font-style: normal;
         font-weight: 400;
     }
-    .cta-button {
+
+    .${prefix}__cta-button {
         color: ${ctaTextColor};
         background-color: transparent;
         font-size: 8px;
@@ -16419,205 +17474,225 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         padding: 0;
         transition: opacity 0.3s ease;
     }
-    .content:hover .cta-button {
+
+    .${prefix}__content:hover .${prefix}__cta-button {
         opacity: 0.8;
     }
-    @media (min-width: 640px) {
-        .image {
+
+    @container (min-width: 640px) {
+        .${prefix}__image {
             background-image: url("${primaryImage}");
         }
     }
-    @media (min-width: 768px) {
-        .content {
+
+    @container (min-width: 768px) {
+        .${prefix} {
             flex-direction: row;
         }
-        .image {
+        .${prefix}__image {
             width: 66.66666%;
             height: 100%;
         }
-        .text {
-            width: 33.333%;
+        .${prefix}__text {
+            width: 33.33333%;
             height: 100%;
         }
-        .header {
+        .${prefix}__header {
             font-size: 22px;
         }
-        .description {
+        .${prefix}__description {
             font-size: 12px;
         }
-        .cta-button {
+        .${prefix}__cta-button {
             font-size: 12px;
         }
     }
-    @media (min-width: 1024px) {
-        .header {
+
+    @container (min-width: 1024px) {
+        .${prefix}__header {
             font-size: 24px;
         }
-        .description {
+        .${prefix}__description {
             font-size: 13px;
-      }
-      .cta-button {
-        font-size: 13px;
-      }
+        }
+        .${prefix}__cta-button {
+          font-size: 13px;
+        }
     }
-    @media (min-width: 1280px) {
-        .header {
+
+    @container (min-width: 1280px) {
+        .${prefix}__header {
             font-size: 28px;
         }
-        .description {
+        .${prefix}__description {
             font-size: 14px;
         }
-        .cta-button {
+        .${prefix}__cta-button {
             font-size: 14px;
         }
     }
   </style>
 `;
-function rbHomepageHeroTwoTileTemplate(spot) {
+function rbHomepageHeroTwoTileTemplate(spot, config) {
+    const { prefix = '' } = config;
     return `
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$4(spot)}
-    <div class="content">
-        <div class="text">
-            ${spot.header ? `<h2 class="header">${spot.header}</h2>` : ''}
-            ${spot.description ? `<p class="description">${spot.description}</p>` : ''}
-            ${spot.ctaText ? `<span class="cta-button">${spot.ctaText}</span>` : ''}
+    ${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="image"></div>
+        <div class="${prefix}__image"></div>
     </div>
   `;
 }
 
-const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }) => `
-  <style>
-    :host {
-      min-width: 320px;
-      min-height: 334px;
-    }
-    .content {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      background-image: url("${mobilePrimaryImage}");
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      border-radius: 5px;
-      overflow: hidden;
-      cursor: pointer;
-      color: ${textColor};
-    }
-    .text {
-      padding: 20px;
-      width: 70%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 10px;
-    }
-    .header {
-      color: inherit;
-      margin: 0;
-      font-size: 20px;
-      font-family: "Cormorant";
-      font-style: normal;
-      font-weight: 300;
-      line-height: normal;
-    }
-    .description {
-      color: inherit;
-      font-size: 12px;
-      line-height: 16px;
-      font-family: "Source Sans 3", system-ui;
-      font-style: normal;
-      font-weight: 400;
-      margin: 0;
-    }
-    .cta-button {
-      width: fit-content;
-      display: inline-block;
-      padding: 7px 20px;
-      border: 0.5px solid ${ctaBorderColor};
-      border-radius: 5px;
-      color: ${ctaTextColor};
-      font-size: 8px;
-      transition: background-color 0.3s ease;
-      font-family: "Source Sans 3", system-ui;
-      font-style: normal;
-      font-weight: 400;
-    }
-    .content:hover .cta-button {
-      background-color: ${ctaBorderColor.length === 7 ? `${ctaBorderColor}15` : `${ctaBorderColor}`};
-    }
-    @media (min-width: 640px) {
-      .content {
-        background-image: url("${primaryImage}");
-      }
-    }
-    @media (min-width: 768px) {
-      .text {
-        padding: 25px;
+const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
+    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    return `
+    <style>
+      .${prefix} {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        border-radius: 5px;
+        overflow: hidden;
+        cursor: pointer;
+        color: ${textColor};
+        container-type: inline-size;
       }
-      .header {
-        font-size: 24px;
+
+      .${prefix}__text {
+        padding: 20px;
+        width: 70%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 10px;
       }
-      .description {
-        font-size: 13px;
-        line-height: 18px;
+
+      .${prefix}__header {
+        color: inherit;
+        margin: 0;
+        font-size: 20px;
+        font-family: "Cormorant";
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
       }
-      .cta-button {
+
+      .${prefix}__description {
+        color: inherit;
         font-size: 12px;
+        line-height: 16px;
+        font-family: "Source Sans 3", system-ui;
+        font-style: normal;
+        font-weight: 400;
+        margin: 0;
       }
-    }
-    @media (min-width: 1024px) {
-      .text {
-        padding: 30px;
+
+      .${prefix}__cta-button {
+        width: fit-content;
+        display: inline-block;
+        padding: 7px 20px;
+        border: 0.5px solid ${ctaBorderColor};
+        border-radius: 5px;
+        color: ${ctaTextColor};
+        font-size: 8px;
+        transition: background-color 0.3s ease;
+        font-family: "Source Sans 3", system-ui;
+        font-style: normal;
+        font-weight: 400;
       }
-      .header {
-        font-size: 28px;
+
+      .${prefix}:hover .${prefix}__cta-button {
+        background-color: ${ctaBorderColor.length === 7 ? `${ctaBorderColor}15` : `${ctaBorderColor}`};
+      }
+
+      @container (min-width: 640px) {
+        .${prefix} {
+          background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+        }
       }
-      .description {
-        font-size: 14px;
+
+      @container (min-width: 768px) {
+        .${prefix}__text {
+          padding: 25px;
+        }
+
+        .${prefix}__header {
+          font-size: 24px;
+        }
+
+        .${prefix}__description {
+          font-size: 13px;
+          line-height: 18px;
+        }
+
+        .${prefix}__cta-button {
+          font-size: 12px;
+        }
       }
-      .cta-button {
-        font-size: 13px;
+
+      @container (min-width: 1024px) {
+        .${prefix}__text {
+          padding: 30px;
+        }
+
+        .${prefix}__header {
+          font-size: 28px;
+        }
+
+        .${prefix}__description {
+          font-size: 14px;
+        }
+
+        .${prefix}__cta-button {
+          font-size: 13px;
+        }
       }
-    }
-    @media (min-width: 1280px) {
-      .cta-button {
-        font-size: 14px;
+
+      @container (min-width: 1280px) {
+        .${prefix}__cta-button {
+          font-size: 14px;
+        }
       }
-    }
-  </style>
-`;
-function rbLargeCategoryImageToutTemplate(spot) {
+    </style>
+  `;
+};
+function rbLargeCategoryImageToutTemplate(spot, config) {
+    const { prefix = '' } = config;
     return `
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$3(spot)}
-    <div class="content">
-      <div class="text">
-        ${spot.header ? `<h2 class="header">${spot.header}</h2>` : ''}
-        ${spot.description ? `<p class="description">${spot.description}</p>` : ''}
-        ${spot.ctaText ? `<span class="cta-button">${spot.ctaText}</span>` : ''}
+    ${STYLES$3(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>
   `;
 }
 
-const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix, overlay }) => {
+    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    return `
   <style>
-    :host {
-      min-width: 320px;
-      min-height: 150px;
-    }
-    .content {
+    .${prefix} {
       width: 100%;
       height: 100%;
       display: flex;
@@ -16626,17 +17701,15 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       border-radius: 5px;
       overflow: hidden;
       cursor: pointer;
-      background-image: url("${mobilePrimaryImage}");
+      background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
       background-size: cover;
       background-position: center;
-      background-blend-mode: overlay;
       background-repeat: no-repeat;
+      container-type: inline-size;
+      position: relative;
     }
-    .text {
-      padding: 15px 10%;
-      width: fit-content;
-    }
-    .header {
+
+    .${prefix}__header {
       font-size: 16px;
       color: ${textColor};
       line-height: 20px;
@@ -16644,103 +17717,107 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       font-family: "Source Sans 3", system-ui;
       font-style: normal;
       margin: 0;
+      padding: 15px 10%;
     }
-    @media (min-width: 640px) {
-      .content {
-        background-image: url("${primaryImage}");
+
+    @container (min-width: 640px) {
+      .${prefix} {
+        background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
       }
     }
-    @media (min-width: 768px) {
-      .header {
+
+    @container (min-width: 768px) {
+      .${prefix}__header {
         font-size: 22px;
       }
     }
-    @media (min-width: 1024px) {
-      .header {
+
+    @container (min-width: 1024px) {
+      .${prefix}__header {
         font-size: 24px;
       }
     }
-    @media (min-width: 1280px) {
-      .header {
+
+    @container (min-width: 1280px) {
+      .${prefix}__header {
         font-size: 28px;
       }
     }
   </style>
 `;
-function rbNavigationBannerTemplate(spot) {
+};
+function rbNavigationBannerTemplate(spot, config) {
+    const { prefix = '' } = config;
     return `
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
-    ${STYLES$2(spot)}
-    <div class="content">
-      <div class="text">
-        ${spot.header ? `<h2 class="header">${spot.header}</h2>` : ''}
-      </div>
+    ${STYLES$2(spot, config)}
+    <div class="${prefix}">
+        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
     </div>
   `;
 }
 
-const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
-  <style>
-    :host {
-      min-width: 165px;
-      min-height: 300px;
-    }
-    .content {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      background-image: url("${mobilePrimaryImage}");
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      border-radius: 5px;
-      overflow: hidden;
-      cursor: pointer;
-    }
-    .text {
-      padding: 10px;
-      width: 70%;
-    }
-    .header {
-      font-size: 12px;
-      color: ${textColor};
-      line-height: 16px;
-      font-family: "Source Sans 3", system-ui;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-      margin: 0;
-    }
-    @media (min-width: 640px) {
-      .content {
-        background-image: url("${primaryImage}");
+const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix, overlay }) => {
+    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    return `
+    <style>
+      .${prefix} {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        border-radius: 5px;
+        overflow: hidden;
+        cursor: pointer;
+        container-type: inline-size;
       }
-    }
-  </style>
-`;
-function rbSmallCategoryImageToutTemplate(spot) {
+
+      .${prefix}__text {
+        padding: 10px;
+        width: 70%;
+      }
+
+      .${prefix}__header {
+        font-size: 12px;
+        color: ${textColor};
+        line-height: 16px;
+        font-family: "Source Sans 3", system-ui;
+        font-style: normal;
+        font-weight: 400;
+        margin: 0;
+      }
+
+      @container (min-width: 640px) {
+        .${prefix} {
+          background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+        }
+      }
+    </style>
+  `;
+};
+function rbSmallCategoryImageToutTemplate(spot, config) {
+    const { prefix = '' } = config;
     return `
     ${GFONT_PRECONNECT}
     ${GFONT_CORMORANT}
-    ${STYLES$1(spot)}
-    <div class="content">
-      <div class="text">
-        ${spot.header ? `<h2 class="header">${spot.header}</h2>` : ''}
+    ${STYLES$1(spot, config)}
+    <div class="${prefix}">
+      <div class="${prefix}__text">
+        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
       </div>
     </div>
   `;
 }
 
-const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
   <style>
-    :host {
-      min-width: 165px;
-      min-height: 250px;
-    }
-    .content {
+    .${prefix} {
       width: 100%;
       height: 100%;
       background-color: ${backgroundColor};
@@ -16748,8 +17825,10 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       display: flex;
       flex-direction: column;
       border-radius: 5px;
+      container-type: inline-size;
     }
-    .image {
+
+    .${prefix}__image {
       width: 100%;
       height: 100%;
       background-image: url("${mobilePrimaryImage}");
@@ -16758,7 +17837,8 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       background-position: center;
       border-radius: 5px;
     }
-    .text {
+
+    .${prefix}__text {
       text-align: left;
       display: flex;
       flex-direction: row;
@@ -16768,7 +17848,8 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       height: fit-content;
       position: relative;
     }
-    .header {
+
+    .${prefix}__header {
       font-size: 12px;
       color: ${textColor};
       padding-top: 5px;
@@ -16776,46 +17857,42 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       font-family: "Source Sans 3", system-ui;
       font-style: normal;
       font-weight: 400;
-      line-height: normal;
       margin: 0;
     }
-    @media (min-width: 640px) {
-      .image {
+
+    @container (min-width: 640px) {
+      .${prefix}__image {
         background-image: url("${primaryImage}");
       }
     }
   </style>
 `;
-function rbSmallDiscoverToutTemplate(spot) {
+function rbSmallDiscoverToutTemplate(spot, config) {
+    const { prefix = '' } = config;
     return `
     ${GFONT_PRECONNECT}
     ${GFONT_CORMORANT}
-    ${STYLES(spot)}
-    <div class="content">
-      <div class="image"></div>
-      <div class="text">
-        ${spot.header ? `<h2 class="header">${spot.header}</h2>` : ''}
+    ${STYLES(spot, config)}
+    <div class="${prefix}">
+      <div class="${prefix}__image"></div>
+      <div class="${prefix}__text">
+        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
       </div>
     </div>
   `;
 }
 
-var ENUM_SPOT_ELEMENT_ATTRIBUTE;
-(function (ENUM_SPOT_ELEMENT_ATTRIBUTE) {
-    ENUM_SPOT_ELEMENT_ATTRIBUTE["WIDTH"] = "width";
-    ENUM_SPOT_ELEMENT_ATTRIBUTE["HEIGHT"] = "height";
-    ENUM_SPOT_ELEMENT_ATTRIBUTE["FLUID"] = "fluid";
-    ENUM_SPOT_ELEMENT_ATTRIBUTE["REDIRECT_ON_CLICK"] = "redirect-on-click";
-})(ENUM_SPOT_ELEMENT_ATTRIBUTE || (ENUM_SPOT_ELEMENT_ATTRIBUTE = {}));
 /**
- * Creates the spot html string based on the provided spot data.
+ * Returns the HTML element for the given spot.
  *
- * @param {ISpot} data - The spot data.
+ * @param {ISpot} spot - The spot object.
+ * @param {ISpotTemplateConfig} config - The spot template configuration.
  *
- * @return {string} - The spot html string.
+ * @return {HTMLElement | null} - The HTML element for the given spot or null if the spot template is not found.
  */
-const GET_SPOT_TEMPLATE_HTML_STRING = (data) => {
+const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     const templates = {
+        // Reserve Bar Spot Templates
         [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE]: {
             rbHomepageHeroThreeTile: rbHomepageHeroThreeTileTemplate,
         },
@@ -16843,6 +17920,7 @@ const GET_SPOT_TEMPLATE_HTML_STRING = (data) => {
         [RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: {
             rbProductUpcs: () => '', // No template for this spot type, it will be handled by ReserveBar App.
         },
+        // IAB Standard Spot Templates
         [RMN_SPOT_TYPE.BILLBOARD]: {
             billboardV1: billboardV1Template,
             billboardV2: billboardV2Template,
@@ -16869,232 +17947,854 @@ const GET_SPOT_TEMPLATE_HTML_STRING = (data) => {
             inTextV1: inTextV1Template,
         },
     };
-    const spotVariants = templates[data.spot];
+    const spotVariants = templates[spot.spot];
     if (!spotVariants) {
-        return '';
+        return null;
     }
-    const variantTemplate = spotVariants[data.variant];
+    const variantTemplate = spotVariants[spot.variant];
     if (!variantTemplate) {
-        return '';
+        return null;
     }
-    return variantTemplate(data);
+    // 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);
 };
 
-let SpotElement;
-if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
-    class CustomSpotElement extends HTMLElement {
-        constructor() {
-            super();
-            this.hasCustomContent = false;
-            this.handleClick = this.handleClick.bind(this);
-            this.attachShadow({ mode: 'open' });
+/**
+ * PubSub class
+ * Manages event subscriptions and publications
+ * @template IEventMap A record type defining the structure of events and their data
+ */
+class PubSub {
+    constructor() {
+        /**
+         * Object to store subscribers for each event type
+         */
+        this.subscribers = {};
+    }
+    static getInstance() {
+        if (!PubSub.instance) {
+            PubSub.instance = new PubSub();
         }
-        connectedCallback() {
-            this.hasCustomContent = Boolean(this.customContent);
-            this.addEventListener('click', this.handleClick);
-            this.setupIntersectionObserver();
-            this.render();
+        return PubSub.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] = [];
         }
-        disconnectedCallback() {
-            var _a;
-            (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-            this.removeEventListener('click', this.handleClick);
+        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;
         }
-        attributeChangedCallback(_name, oldValue, newValue) {
-            if (oldValue !== newValue) {
-                this.render();
-            }
+        this.subscribers[eventType].forEach((callback) => callback(data));
+    }
+}
+/**
+ * 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.activeSpots = new Map();
+        this.spotStates = new Map();
+        this.intersectionObserver = new IntersectionObserverService();
+    }
+    static getInstance() {
+        if (!EventService.instance) {
+            EventService.instance = new EventService();
         }
-        render() {
-            if (!this.shadowRoot || !this.data)
-                return;
-            const { style, wrapper, slot } = SPOT_ELEMENT_TEMPLATE(this.data.width, this.data.height, this.hasCustomContent);
-            this.shadowRoot.replaceChildren(style, slot);
-            if (this.hasCustomContent) {
-                this.setCustomContent();
-            }
-            if (!this.hasCustomContent) {
-                wrapper.innerHTML = GET_SPOT_TEMPLATE_HTML_STRING(this.data);
-                this.shadowRoot.appendChild(wrapper);
-            }
+        return EventService.instance;
+    }
+    subscribe(eventType, callback) {
+        return this.pubSub.subscribe(eventType, callback);
+    }
+    publish(eventType, data) {
+        this.pubSub.publish(eventType, data);
+    }
+    registerSpot(params) {
+        const { placementId, spot, spotElement } = params;
+        this.activeSpots.set(placementId, { spotElement });
+        // Fire impression event
+        this.fireImpressionEvent(placementId, spot, spotElement);
+        // Handle intersection observer
+        this.handleIntersectionObserver(placementId, spot, spotElement);
+        // Attach click event listener
+        spotElement.addEventListener('click', async () => await this.handleClick(params));
+    }
+    unregisterSpot(placementId) {
+        const placementIdClean = placementId.replace('#', '');
+        const spotData = this.activeSpots.get(placementIdClean);
+        if (!spotData) {
+            this.handleSpotState(placementIdClean, {
+                state: {
+                    error: `Active spot with placementId ${placementIdClean} not found.`,
+                },
+            });
+            return;
         }
-        setCustomContent() {
-            const wrapper = document.createElement('div');
-            wrapper.setAttribute('slot', SPOT_ELEMENT_SLOT_NAME);
-            if (typeof this.customContent === 'string') {
-                wrapper.innerHTML = this.customContent;
-            }
-            if (this.customContent instanceof HTMLElement) {
-                wrapper.appendChild(this.customContent);
-            }
-            this.appendChild(wrapper);
+        this.intersectionObserver.unobserve(spotData.spotElement);
+        this.handleSpotState(placementIdClean, {
+            dom: {
+                spotElement: undefined,
+                visibleOnViewport: false,
+            },
+            state: {
+                unmounted: true,
+                mounted: false,
+            },
+        });
+        this.activeSpots.delete(placementIdClean);
+        const placementElement = document.getElementById(placementIdClean);
+        if (!placementElement) {
+            this.handleSpotState(placementIdClean, {
+                state: {
+                    error: `Placement element with id ${placementIdClean} not found.`,
+                },
+            });
+            return;
         }
-        setupIntersectionObserver() {
-            const options = {
-                root: null,
-                rootMargin: '0px',
-                threshold: 0.5, // The element is considered visible when 50% of it is visible
+        placementElement.innerHTML = '';
+    }
+    /**
+     * Updates the state of a spot.
+     *
+     * @param {string} placementId - The placement ID of the spot.
+     * @param {Partial<ILifecycleState>} updates - The updates to apply to the spot state.
+     * @param {boolean} publish - Whether to publish the updated state.
+     *
+     * @returns {void}
+     */
+    handleSpotState(placementId, updates, publish = true) {
+        let currentState = this.spotStates.get(placementId);
+        if (!currentState) {
+            currentState = {
+                identifier: {
+                    placementId,
+                    spotId: '',
+                    spotType: '',
+                },
+                dom: {
+                    spotElement: undefined,
+                    visibleOnViewport: false,
+                },
+                state: {
+                    mounted: false,
+                    unmounted: false,
+                    loading: false,
+                    error: undefined,
+                },
+                displayConfig: {
+                    isCarousel: false,
+                    isCarouselItem: false,
+                    isSingleItem: false,
+                },
             };
-            this.observer = new IntersectionObserver((entries) => {
-                var _a;
-                if (entries[0].isIntersecting) {
-                    this.registerEvent(RMN_SPOT_EVENT.IMPRESSION);
-                    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-                }
-            }, options);
-            this.observer.observe(this);
         }
-        handleClick() {
-            this.registerEvent(RMN_SPOT_EVENT.CLICK);
+        this.spotStates.set(placementId, { ...currentState, ...updates });
+        if (publish) {
+            this.pubSub.publish(RMN_SPOT_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
         }
-        async registerEvent(event) {
+    }
+    async handleClick({ placementId, spot, spotElement, }) {
+        var _a, _b, _c;
+        // Publish click event
+        this.pubSub.publish(RMN_SPOT_EVENT.CLICK, {
+            placementId,
+            spotId: spot.id,
+            spotElement,
+        });
+        // Fire click event
+        await this.fireEvent({
+            event: RMN_SPOT_EVENT.CLICK,
+            eventUrl: (_b = (_a = spot.events.find((event) => event.event === RMN_SPOT_EVENT.CLICK)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+        });
+        // Save spot to local storage for event tracking
+        this.localStorage.setSpot(spot.id, {
+            spotId: spot.id,
+            spotType: spot.spot,
+            events: spot.events,
+            productIds: (_c = spot.productIds) !== null && _c !== void 0 ? _c : [1, 'GROUPING-12345', 'DAN-12345', 131398103],
+        });
+    }
+    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(RMN_SPOT_EVENT.IMPRESSION, {
+            placementId,
+            spotId: spot.id,
+            spotElement,
+        });
+        (async () => {
             var _a, _b;
-            if (!this.data)
+            await this.fireEvent({
+                event: RMN_SPOT_EVENT.IMPRESSION,
+                eventUrl: (_b = (_a = spot.events.find((event) => event.event === 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;
-            const shouldRedirectOnClick = this.getAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.REDIRECT_ON_CLICK) === 'true';
-            const eventUrl = (_b = (_a = this.data.events.find((e) => e.event === event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '';
-            try {
-                const options = {
-                    method: 'POST',
-                    redirect: event === RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick ? 'follow' : 'manual',
-                };
-                const response = await fetch(eventUrl, options);
-                if (response.ok && event === RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick) {
-                    window.location.href = this.getRedirectUrlFromPayload(eventUrl);
-                }
             }
-            catch (error) {
-                console.error(`Rmn error sending ${event} event:`, error);
+            if (event === RMN_SPOT_EVENT.CLICK) {
+                const redirectUrl = this.getRedirectUrlFromPayload(eventUrl);
+                if (redirectUrl) {
+                    window.location.href = redirectUrl;
+                }
             }
         }
-        getRedirectUrlFromPayload(url) {
-            var _a, _b;
-            const base64String = (_a = new URL(url).searchParams.get('e')) !== null && _a !== void 0 ? _a : '';
-            try {
-                const data = JSON.parse(atob(base64String));
-                return (_b = data.ur) !== null && _b !== void 0 ? _b : '';
-            }
-            catch (_c) {
-                return '';
-            }
+        catch (_b) {
+            // Handle errors silently
         }
     }
-    CustomSpotElement.observedAttributes = Object.values(ENUM_SPOT_ELEMENT_ATTRIBUTE);
-    SpotElement = CustomSpotElement;
-}
-
-class SpotHtmlService {
-    static getInstance() {
-        return SingletonManager.getInstance('SpotHtmlService', () => new SpotHtmlService());
-    }
-    /**
-     * Creates the html element based on the provided spot data using shadow dom.
-     *
-     * This method is only available in browser environments.
-     *
-     * @param {ISpot} spot - The spot data.
-     * @param {ICreateSpotElementConfig} config - The configuration object.
-     * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
-     * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
-     * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
-     *
-     * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
-     */
-    createSpotHtmlElement(spot, config) {
-        var _a, _b;
-        if (!this.ensureBrowserEnvironmentAndDefineElement()) {
-            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;
         }
-        const isFluid = (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false;
-        const shouldRedirectOnClick = (_b = config === null || config === void 0 ? void 0 : config.redirectOnClick) !== null && _b !== void 0 ? _b : true;
-        const element = document.createElement(SPOT_ELEMENT_TAG);
-        element.setAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.WIDTH, spot.width.toString());
-        element.setAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.HEIGHT, spot.height.toString());
-        element.setAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.FLUID, isFluid.toString());
-        element.setAttribute(ENUM_SPOT_ELEMENT_ATTRIBUTE.REDIRECT_ON_CLICK, shouldRedirectOnClick.toString());
-        // Share the spot data with the element
-        element.data = spot;
-        // Set custom content
-        if (config === null || config === void 0 ? void 0 : config.customContent) {
-            element.customContent = config.customContent;
-        }
-        return element;
     }
     /**
-     * @returns {boolean} - True if the browser environment is available and the element is defined.
+     * 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.
      */
-    ensureBrowserEnvironmentAndDefineElement() {
-        if (typeof window === 'undefined' || typeof document === 'undefined') {
-            console.warn('LiquidCommerce Rmn Sdk: createSpotElement is only available in browser environments!!!');
-            return false;
+    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;
         }
-        if (!customElements.get(SPOT_ELEMENT_TAG)) {
-            customElements.define(SPOT_ELEMENT_TAG, SpotElement);
+        catch (_a) {
+            return null;
         }
-        return true;
     }
 }
 
-class SpotSelectionService extends BaseApi {
+const SELECTION_API_PATH = '/spots/selection';
+
+class SelectionService extends BaseApi {
     constructor(auth) {
         super(auth);
     }
     static getInstance(auth) {
-        return SingletonManager.getInstance('SpotSelectionService', () => new SpotSelectionService(auth));
+        return SingletonManager.getInstance('SelectionService', () => new SelectionService(auth));
     }
     /**
      * Makes a selection request on our server based on the provided data.
      *
      * @param {ISpotSelectionParams} data - Spots selection parameters.
      *
-     * @return {Promise<ISpots>} - The spots response object.
+     * @return {Promise<ISpots | { error: string }>} - The spots response object.
      */
     async spotSelection(data) {
-        const { isOk, val, isErr } = await this.post(SPOTS_SELECTION_API_PATH, data, {});
+        const { isOk, val, isErr } = await this.post(SELECTION_API_PATH, data, {});
         if (isErr) {
-            throw new Error(`There was an error during spot selection: (${isErr === null || isErr === void 0 ? void 0 : isErr.errorMessage})`);
+            return { error: `There was an error during spot selection: (${isErr === null || isErr === void 0 ? void 0 : isErr.errorMessage})` };
         }
         if (isOk && val && val.data && (val === null || val === void 0 ? void 0 : val.refresh.token)) {
             this.authInfo.authenticated = true;
             this.authInfo.token = val.refresh.token;
             return val.data.spots;
         }
-        throw new Error('Spot selection response was not successful');
+        return { error: 'Spot selection response was not successful' };
     }
 }
 
+const SPOT_EVENTS_EXAMPLE = [
+    {
+        event: RMN_SPOT_EVENT.CLICK,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwidXIiOm51bGx9&s=hWz37kbxi_u95EVNn2aoQhc5Aas',
+    },
+    {
+        event: RMN_SPOT_EVENT.IMPRESSION,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiYmEiOjEsImZxIjowfQ&s=djoysjCimurf-5T11AlNAwwLSS8',
+    },
+    {
+        event: RMN_SPOT_EVENT.PURCHASE,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjU5fQ&s=AAPAw-3SfZ0JMzjEGFSwt9L-2S4',
+    },
+    {
+        event: RMN_SPOT_EVENT.ADD_TO_CART,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjYwfQ&s=uzQFcjgL7m9XqUG8FvTPVN5YkZY',
+    },
+    {
+        event: RMN_SPOT_EVENT.ADD_TO_WISHLIST,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjYzfQ&s=m3ISU_iIy-OFtXrTKpI6cJAEC0k',
+    },
+    {
+        event: RMN_SPOT_EVENT.BUY_NOW,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjY5fQ&s=l6MOscQC-q-FkC2Ksd7w6jjySCQ',
+    },
+];
+const RB_SPOTS_SELECTION_EXAMPLE = {
+    rbHomepageHeroFullImage: [
+        {
+            id: '111111_111111',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            width: 1140,
+            height: 640,
+            header: 'Artisanal Craft Beer Collection',
+            description: 'Discover our curated selection of small-batch, flavor-packed craft beers.',
+            ctaText: 'Explore the Collection',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Craft+Beer+Collection',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Craft+Beer',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+        {
+            id: '222222_222222',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            width: 1140,
+            height: 640,
+            header: 'Summer Wine Spectacular',
+            description: 'Refresh your palate with our handpicked selection of crisp, summer wines.',
+            ctaText: 'Shop Summer Wines',
+            textColor: '#000000',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Summer+Wines',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Summer+Wines',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbHomepageHeroTwoTile: [
+        {
+            id: '333333_333333',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Whiskey Wonderland',
+            description: 'Embark on a journey through our premium whiskey selection.',
+            ctaText: 'Discover Whiskeys',
+            textColor: '#ffffff',
+            backgroundColor: '#2c1a05',
+            ctaTextColor: '#2c1a05',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Whiskey+Collection',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Whiskey',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbHomepageHeroThreeTile: [
+        {
+            id: '444444_444444',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Cocktail Essentials',
+            description: 'Stock your bar with premium spirits and mixers for the perfect cocktail.',
+            ctaText: 'Build Your Bar',
+            textColor: '#ffffff',
+            backgroundColor: '#1a3c4d',
+            ctaTextColor: '#1a3c4d',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Cocktail+Spirits',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Cocktail+Mixers',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Cocktail+Kit',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Cocktail+Mixers',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbLargeCategoryImageTout: [
+        {
+            id: '555555_555555',
+            spot: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
+            variant: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
+            width: 468,
+            height: 410,
+            header: 'Rare & Limited Edition',
+            description: 'Discover our collection of hard-to-find and limited release spirits.',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/468x410/png?text=Rare+Spirits',
+            mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Rare+Spirits',
+            ctaText: 'Shop Rare Spirits',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbSmallDiscoverTout: [
+        {
+            id: '666666_666666',
+            spot: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            variant: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            width: 224,
+            height: 378,
+            header: 'Château Margaux 2015 Bordeaux',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x378/png?text=Château+Margaux',
+            mobilePrimaryImage: 'https://placehold.co/224x378/png?text=Mobile+Château+Margaux',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbSmallCategoryImageTout: [
+        {
+            id: '777777_777777',
+            spot: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
+            variant: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
+            width: 224,
+            height: 410,
+            header: 'Japanese Sake',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x410/png?text=Japanese+Sake',
+            mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Japanese+Sake',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbCollectionBannerWithoutTextBlock: [
+        {
+            id: '888888_888888',
+            spot: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
+            variant: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
+            width: 887,
+            height: 344,
+            primaryImage: 'https://placehold.co/887x344/png?text=Summer+Cocktails',
+            mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Summer+Cocktails',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+    rbNavigationBanner: [
+        {
+            id: '999999_999999',
+            spot: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            variant: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            width: 440,
+            height: 220,
+            header: 'Explore Tequilas',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/440x220/png?text=Tequila+Collection',
+            mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Tequila+Collection',
+            events: SPOT_EVENTS_EXAMPLE,
+        },
+    ],
+};
+
 class LiquidCommerceRmnClient {
     constructor(auth) {
-        this.spotSelectionService = SpotSelectionService.getInstance(auth);
-        this.spotHtmlService = SpotHtmlService.getInstance();
+        this.selectionService = SelectionService.getInstance(auth);
+        this.elementService = ElementService.getInstance();
+        this.eventService = EventService.getInstance();
     }
     /**
      * Makes a selection request on our server based on the provided data.
      *
      * To create a spot html element, use the RmnCreateSpotElement function.
      *
-     * @param {ISpotSelectionParams} data - Spots selection parameters.
+     * @param {ISpotSelectionParams} params - Spots selection parameters.
      *
-     * @return {Promise<ISpots>} - The spots response object.
+     * @return {Promise<ISpots | {error : string}>} - The spots response object.
      */
-    async spotSelection(data) {
-        return this.spotSelectionService.spotSelection(data);
+    async spotSelection(params) {
+        return this.selectionService.spotSelection(params);
+    }
+    /**
+     * Injects the spot elements into their provided placement.
+     *
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     *
+     * @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) {
+            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, {
+                    state: {
+                        error: `No spots found for type "${item.spotType}".`,
+                        loading: false,
+                    },
+                });
+                continue;
+            }
+            const placementId = item.placementId.replace('#', '');
+            const placement = document.getElementById(placementId);
+            if (!placement) {
+                this.eventService.handleSpotState(item.placementId, {
+                    state: {
+                        error: `Placement not found for id "${placementId}".`,
+                        loading: false,
+                    },
+                });
+                continue;
+            }
+            // Take over placement styles
+            placement.removeAttribute('style');
+            placement.removeAttribute('class');
+            Object.assign(placement.style, {
+                width: '100%',
+                height: 'auto',
+                display: 'flex',
+                justifyContent: 'center',
+            });
+            if (spots.length === 1) {
+                const isInjected = this.injectOneSpotElement(item, placement, spots[0], itemConfig);
+                if (!isInjected) {
+                    continue;
+                }
+            }
+            if (spots.length > 1) {
+                const isInjected = this.injectCarouselSpotElement(placement, spots, itemConfig);
+                if (!isInjected) {
+                    continue;
+                }
+            }
+        }
+    }
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     *
+     * @return {Promise<ISpots | {error: string}>} - The spots response object.
+     */
+    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);
     }
     /**
-     * Creates the spot html element based on the provided data using shadow dom.
+     * Injects a carousel element with the provided spots into the placement.
+     *
+     * @param {HTMLElement} placement - The placement element.
+     * @param {ISpot[]} spots - The spot data.
+     * @param {IInjectSpotElementConfig} config - The configuration object.
      *
-     * This method is useful when you are initializing the client in a browser environment, so you can create the spot html element directly from the RmnClient instance.
+     * @return {void}
+     */
+    injectCarouselSpotElement(placement, spots, config) {
+        var _a;
+        const carouselSlides = [];
+        for (const spotItem of spots) {
+            this.eventService.handleSpotState(placement.id, {
+                displayConfig: {
+                    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, {
+                    state: {
+                        error: `Failed to inject carousel spot item element. Could not create element for type "${spot.spot}".`,
+                        loading: false,
+                    },
+                });
+                continue;
+            }
+            this.eventService.registerSpot({
+                spot,
+                placementId: placement.id,
+                spotElement: content,
+            });
+            carouselSlides.push(content);
+        }
+        // Get the max width and height of the spots
+        const { maxWidth, maxHeight } = spots.reduce((max, spot) => ({
+            maxWidth: Math.max(max.maxWidth, spot.width),
+            maxHeight: Math.max(max.maxHeight, spot.height),
+        }), { maxWidth: 0, maxHeight: 0 });
+        // Create the carousel element
+        const carouselElement = this.elementService.createCarouselElement({
+            slides: carouselSlides,
+            config: {
+                fluid: config === null || config === void 0 ? void 0 : config.fluid,
+                width: maxWidth,
+                height: maxHeight,
+                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
+                ...config === null || config === void 0 ? void 0 : config.carousel,
+            },
+        });
+        if (!carouselElement) {
+            this.eventService.handleSpotState(placement.id, {
+                state: {
+                    error: `Failed to inject spot carousel element. Could not create spot carousel element.`,
+                    loading: false,
+                },
+            });
+            return false;
+        }
+        placement.replaceChildren(carouselElement);
+        this.eventService.handleSpotState(placement.id, {
+            dom: {
+                spotElement: carouselElement,
+            },
+            state: {
+                mounted: true,
+                loading: false,
+            },
+        });
+        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 {ICreateSpotElementConfig} config - The configuration object.
-     * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
-     * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
-     * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
+     * @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.
      *
-     * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
+     * @throws {Error} - If a duplicate placement id is found.
+     *
+     * @return {void}
      */
-    createSpotElement(spot, config) {
-        return this.spotHtmlService.createSpotHtmlElement(spot, config);
+    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(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);
+        });
     }
 }
 /**
@@ -17110,24 +18810,66 @@ async function RmnClient(apiKey, config) {
     const credentials = await authService.initialize();
     return new LiquidCommerceRmnClient(credentials);
 }
+/**
+ * Creates a new instance of the RmnEventManager.
+ *
+ * @return {IRmnEventManager} - The RmnEventManager instance.
+ */
+function RmnEventManager() {
+    const eventService = EventService.getInstance();
+    return {
+        /**
+         * Subscribes to an event type.
+         */
+        subscribe: (eventType, callback
+        /* eslint-disable arrow-body-style */
+        ) => {
+            return eventService.subscribe(eventType, callback);
+        },
+        /**
+         * Publishes an event type.
+         */
+        publish: (eventType, data) => {
+            eventService.publish(eventType, data);
+        },
+        /**
+         * Destroys a spot element
+         */
+        destroySpot: (placementId) => {
+            eventService.unregisterSpot(placementId);
+        },
+    };
+}
 /**
  * Creates the spot html element based on the provided data using shadow dom.
  *
  * This method is useful when you are initializing the client in a non-browser environment.
- * When you request a spot selection, you will receive the spot data in server-side and return them back to the client.
+ * When you request a spot selection, you will receive the spot data in server-side and return them to the client.
  * Then you can use this function to create the spot html element based on the provided data without the need of the RmnClient instance.
  *
  * @param {ISpot} spot - The spot data.
- * @param {ICreateSpotElementConfig} config - The configuration object.
- * @param {ICreateSpotElementConfig.fluid} config.fluid - If the spot should be fluid or not.
- * @param {ICreateSpotElementConfig.customContent} config.customContent - Use a custom html element/string.
- * @param {ICreateSpotElementConfig.redirectOnClick} config.redirectOnClick - If the spot should redirect on click.
+ * @param {IRmnCreateSpotElementConfig} config - The configuration object.
  *
  * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
  */
 function RmnCreateSpotElement(spot, config) {
-    const spotHtmlService = SpotHtmlService.getInstance();
-    return spotHtmlService.createSpotHtmlElement(spot, config);
+    var _a;
+    const elementService = ElementService.getInstance();
+    const spotData = 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) {
+        console.warn(`RmnSdk: Failed to create spot element for type "${spotData.spot}".`);
+        return null;
+    }
+    return elementService.createSpotElement({
+        content,
+        config: {
+            fluid: true,
+            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
+        },
+    });
 }
 
-export { LiquidCommerceRmnClient, RMN_ENV, RMN_FILTER_PROPERTIES, RMN_SPOT_EVENT, RMN_SPOT_TYPE, RmnClient, RmnCreateSpotElement };
+export { LiquidCommerceRmnClient, RMN_ENV, RMN_FILTER_PROPERTIES, RMN_SPOT_EVENT, RMN_SPOT_TYPE, RmnClient, RmnCreateSpotElement, RmnEventManager };