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

package/dist/index.esm.js

@@ -60,7 +60,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 +14996,7 @@ class BaseApi extends BaseApiAbstract {
      */
     async post(path, data, configOverrides) {
         let requestData = data;
-        if (this.authInfo.env !== RMN_ENV.DEVELOPMENT) {
+        if (this.authInfo.env !== RMN_ENV.LOCAL) {
             const timestamp = new Date().getTime();
             configOverrides = {
                 ...configOverrides,
@@ -15149,63 +15148,696 @@ 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 SPOT_EVENT_API_PATH = '/spots/event';
+const ELEMENT_TAG = 'spot-element';
+const GFONT_PRECONNECT = `
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+`;
+const GFONT_SOURCE_SANS_3 = `
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
+`;
+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_SHADOW_ROOT = (width, height, hasCustomContent) => {
-    const style = document.createElement('style');
-    style.textContent = `
-    :host {
-      display: block;
-      position: relative;
-      container-type: inline-size;
-      overflow: hidden;
+class ResizeObserverService {
+    constructor({ element, maxSize, minScale = 0.275 }) {
+        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 (newHeight > containerHeight) {
+            newHeight = containerHeight;
+            newWidth = newHeight * 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,
+            },
+        }));
     }
-    :host([fluid="true"]) {
-      width: 100%;
-      height: 100%;
+    disconnect() {
+        this.resizeObserver.disconnect();
+    }
+}
+
+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.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) {
+            // Adjust text elements font size based on the scale factor
+            this.adjustFontSize(event.detail.scale);
+        }
+        adjustFontSize(elementScale) {
+            var _a;
+            const scaleFactor = this.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 orignalSize = parseFloat(window.getComputedStyle(element).fontSize);
+                        this.originalFontSizes.set(element, orignalSize);
+                    }
+                    const originalSize = this.originalFontSizes.get(element);
+                    const newFontSize = originalSize * scaleFactor;
+                    element.style.fontSize = `${newFontSize}px`;
+                }
+            });
+        }
+        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.5;
+            // 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.9; // Font will never be smaller than 90% of original
+            const maxScale = 1.1; // Font will never be larger than 110% 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));
+        }
+        /**
+         * Spot element rendering
+         * #########################################################
+         */
+        render() {
+            if (!this.shadowRoot || !this.data || !this.content)
+                return;
+            const style = this.getTemplateStyle(this.data.width, this.data.height);
+            const spot = document.createElement('div');
+            spot.className = 'spot';
+            if (typeof this.content === 'string') {
+                spot.innerHTML = this.content;
+            }
+            if (this.content instanceof HTMLElement) {
+                spot.replaceChildren(this.content);
+            }
+            this.shadowRoot.replaceChildren(style, spot);
+        }
+        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`};
+        }
+
+        :host .spot {
+          width: 100%;
+          height: 100%;
+          display: block;
+        }
+      `;
+            return style;
+        }
     }
-    :host([fluid="false"]) {
-      width: ${width}px;
-      height: ${height}px;
+    SpotElement = CustomSpotElement;
+}
+
+class ElementService {
+    static getInstance() {
+        return SingletonManager.getInstance('ElementService', () => new ElementService());
     }
-  `;
-    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;
+    /**
+     * Creates the html element based on the provided data, content and configs using shadow dom.
+     *
+     * This method is only available in browser environments.
+     *
+     * @param {ICreateFinalElementParams} params - The parameters to create the final element.
+     *
+     * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
+     */
+    createFinalElement({ content, config }) {
+        var _a;
+        if (!this.ensureBrowserEnvironmentAndDefineElement()) {
+            return null;
+        }
+        const element = document.createElement(ELEMENT_TAG);
+        element.data = {
+            width: config.width,
+            height: config.height,
+            minScale: config === null || config === void 0 ? void 0 : config.minScale,
+            fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
+        };
+        element.content = content;
+        return element;
+    }
+    /**
+     * 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(ELEMENT_TAG)) {
+            window.customElements.define(ELEMENT_TAG, SpotElement);
+        }
+        return true;
+    }
+}
+
+const CAROUSEL_COMPONENT_STYLE = `
+    :host {
+        position: relative;
+        display: inline-block;
+        margin: 0;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+    }
+
+    .carousel-slides {
+        position: relative;
+        height: 100%;
         width: 100%;
+    }
+
+    .carousel-slide {
+        display: none;
+
+        justify-content: center;
+        align-items: center;
         height: 100%;
-        overflow: hidden;
-      }
-    `;
+        width: 100%;
     }
-    return { style, wrapper, slot };
-};
 
-const GFONT_PRECONNECT = () => `
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-`;
-const GFONT_SOURCE_SANS_3 = () => `
-    <link rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" 
-    >
-`;
-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"
-    >
+    .carousel-slide.active {
+        display: flex;
+    }
+
+    .carousel-dots {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .carousel-dots .dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .carousel-dots.top-left,
+    .carousel-dots.bottom-left {
+        left: 10px;
+    }
+
+    .carousel-dots.top-center,
+    .carousel-dots.bottom-center {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .carousel-dots.top-right,
+    .carousel-dots.bottom-right {
+        right: 10px;
+    }
+
+    .carousel-dots.top-left,
+    .carousel-dots.top-center,
+    .carousel-dots.top-right {
+        top: 10px;
+    }
+
+    .carousel-dots.bottom-left,
+    .carousel-dots.bottom-center,
+    .carousel-dots.bottom-right {
+        bottom: 10px;
+    }
+
+    .carousel-dots.middle-left {
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        flex-direction: column;
+    }
+
+    .carousel-dots.middle-right {
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        flex-direction: column;
+    }
+
+    .carousel-buttons button {
+        background-color: #00000080;
+        color: #fff;
+        border: none;
+        padding: 10px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    .carousel-buttons button:hover {
+        background-color: #000000b3;
+    }
+
+    .carousel-buttons.buttons-separate button {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .carousel-buttons.buttons-separate .prev-button {
+        left: 10px;
+    }
+
+    .carousel-buttons.buttons-separate .next-button {
+        right: 10px;
+    }
+
+    .carousel-buttons.buttons-together {
+        position: absolute;
+        display: flex;
+        gap: 10px;
+    }
+
+    .carousel-buttons.buttons-together.top-left,
+    .carousel-buttons.buttons-together.bottom-left {
+        left: 10px;
+    }
+
+    .carousel-buttons.buttons-together.top-center,
+    .carousel-buttons.buttons-together.bottom-center {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .carousel-buttons.buttons-together.top-right,
+    .carousel-buttons.buttons-together.bottom-right {
+        right: 10px;
+    }
+
+    .carousel-buttons.buttons-together.top-left,
+    .carousel-buttons.buttons-together.top-center,
+    .carousel-buttons.buttons-together.top-right {
+        top: 10px;
+    }
+
+    .carousel-buttons.buttons-together.bottom-left,
+    .carousel-buttons.buttons-together.bottom-center,
+    .carousel-buttons.buttons-together.bottom-right {
+        bottom: 10px;
+    }
+
+    .carousel-buttons.buttons-together.middle-left,
+    .carousel-buttons.buttons-together.middle-right {
+        top: 50%;
+        transform: translateY(-50%);
+        flex-direction: column;
+    }
+
+    .carousel-buttons.buttons-together.middle-left {
+        left: 10px;
+    }
+
+    .carousel-buttons.buttons-together.middle-right {
+        right: 10px;
+    }
+
+    @media (max-width: 768px) {
+        .carousel-buttons button {
+            padding: 8px 12px;
+            font-size: 14px;
+        }
+
+        .carousel-dots .dot {
+            width: 8px;
+            height: 8px;
+        }
+    }
 `;
 
+class CarouselComponent {
+    constructor(slides, options = {}) {
+        var _a, _b;
+        this.currentSlide = 0;
+        this.dotElements = [];
+        this.prevButton = null;
+        this.nextButton = null;
+        this.autoplayInterval = null;
+        this.slides = slides;
+        this.autoplay = (_a = options.autoplay) !== null && _a !== void 0 ? _a : true;
+        this.interval = (_b = options.interval) !== null && _b !== void 0 ? _b : 10000;
+        this.dotsOptions = this.initializeDotOptions(options.useDots);
+        this.buttonsOptions = this.initializeButtonOptions(options.useButtons);
+        this.validateOptions();
+        this.carousel = document.createElement('div');
+        this.carousel.className = 'carousel';
+        this.shadowRoot = this.carousel.attachShadow({ mode: 'open' });
+        this.render();
+        this.slidesContainer = this.shadowRoot.querySelector('.carousel-slides');
+        this.setupCarousel();
+    }
+    // Public method to get the carousel element
+    getElement() {
+        return this.carousel;
+    }
+    // Main setup methods
+    render() {
+        const style = document.createElement('style');
+        style.textContent = CAROUSEL_COMPONENT_STYLE;
+        this.shadowRoot.appendChild(style);
+        this.shadowRoot.appendChild(this.renderSlides());
+        if (this.dotsOptions) {
+            const dots = this.renderDots();
+            if (dots)
+                this.shadowRoot.appendChild(dots);
+        }
+        if (this.buttonsOptions) {
+            const buttons = this.renderButtons();
+            if (buttons)
+                this.shadowRoot.appendChild(buttons);
+        }
+    }
+    setupCarousel() {
+        this.setupDots();
+        this.setupButtons();
+        if (this.autoplay) {
+            this.startAutoplay();
+        }
+        this.updateCarousel();
+    }
+    // Rendering methods
+    renderSlides() {
+        const slidesContainer = document.createElement('div');
+        slidesContainer.className = 'carousel-slides';
+        this.slides.forEach((slide, index) => {
+            const slideElement = document.createElement('div');
+            slideElement.className = `carousel-slide ${index === this.currentSlide ? 'active' : ''}`;
+            if (typeof slide === 'string') {
+                slideElement.innerHTML = slide;
+            }
+            else if (slide instanceof HTMLElement) {
+                slideElement.appendChild(slide);
+            }
+            slidesContainer.appendChild(slideElement);
+        });
+        return slidesContainer;
+    }
+    renderDots() {
+        if (!this.dotsOptions)
+            return null;
+        const dotsContainer = document.createElement('div');
+        dotsContainer.className = `carousel-dots ${this.dotsOptions.position}`;
+        this.slides.forEach((_, index) => {
+            if (!this.dotsOptions)
+                return;
+            const dot = document.createElement('span');
+            dot.className = `dot ${index === this.currentSlide ? 'active' : ''}`;
+            dot.style.backgroundColor = this.dotsOptions.color;
+            dotsContainer.appendChild(dot);
+        });
+        return dotsContainer;
+    }
+    renderButtons() {
+        if (!this.buttonsOptions)
+            return null;
+        const buttonsContainer = document.createElement('div');
+        const buttonsClass = this.buttonsOptions.together
+            ? `buttons-together ${this.buttonsOptions.position}`
+            : 'buttons-separate';
+        buttonsContainer.className = `carousel-buttons ${buttonsClass}`;
+        this.prevButton = document.createElement('button');
+        this.prevButton.className = 'prev-button';
+        this.prevButton.textContent = this.buttonsOptions.prev;
+        this.prevButton.style.color = this.buttonsOptions.textColor;
+        this.prevButton.style.backgroundColor = this.buttonsOptions.backgroundColor;
+        this.prevButton.style.borderRadius = this.buttonsOptions.borderRadius;
+        buttonsContainer.appendChild(this.prevButton);
+        this.nextButton = document.createElement('button');
+        this.nextButton.className = 'next-button';
+        this.nextButton.textContent = this.buttonsOptions.next;
+        this.nextButton.style.color = this.buttonsOptions.textColor;
+        this.nextButton.style.backgroundColor = this.buttonsOptions.backgroundColor;
+        this.nextButton.style.borderRadius = this.buttonsOptions.borderRadius;
+        buttonsContainer.appendChild(this.nextButton);
+        return buttonsContainer;
+    }
+    // Setup methods
+    setupDots() {
+        if (this.dotsOptions) {
+            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.buttonsOptions) {
+            (_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();
+            });
+        }
+    }
+    // Navigation methods
+    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();
+    }
+    // Update methods
+    updateCarousel() {
+        const slides = Array.from(this.slidesContainer.children);
+        slides.forEach((slide, index) => {
+            if (index === this.currentSlide) {
+                slide.classList.add('active');
+            }
+            else {
+                slide.classList.remove('active');
+            }
+        });
+        this.updateDots();
+    }
+    updateDots() {
+        this.dotElements.forEach((dot, index) => {
+            const isActive = index === this.currentSlide;
+            dot.classList.toggle('active', isActive);
+            if (!this.dotsOptions)
+                return;
+            dot.style.backgroundColor = isActive ? this.dotsOptions.activeColor : this.dotsOptions.color;
+        });
+    }
+    // Autoplay methods
+    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();
+        }
+    }
+    // Initialization and validation methods
+    initializeDotOptions(useDots) {
+        var _a, _b, _c;
+        return !useDots
+            ? false
+            : {
+                position: (_a = useDots === null || useDots === void 0 ? void 0 : useDots.position) !== null && _a !== void 0 ? _a : 'bottom-center',
+                color: (_b = useDots === null || useDots === void 0 ? void 0 : useDots.color) !== null && _b !== void 0 ? _b : '#d9d9d9',
+                activeColor: (_c = useDots === null || useDots === void 0 ? void 0 : useDots.activeColor) !== null && _c !== void 0 ? _c : '#b5914a',
+            };
+    }
+    initializeButtonOptions(useButtons) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return !useButtons
+            ? false
+            : {
+                position: (_a = useButtons === null || useButtons === void 0 ? void 0 : useButtons.position) !== null && _a !== void 0 ? _a : 'middle-sides',
+                together: (_b = useButtons === null || useButtons === void 0 ? void 0 : useButtons.together) !== null && _b !== void 0 ? _b : false,
+                textColor: (_c = useButtons === null || useButtons === void 0 ? void 0 : useButtons.textColor) !== null && _c !== void 0 ? _c : '#000000',
+                backgroundColor: (_d = useButtons === null || useButtons === void 0 ? void 0 : useButtons.backgroundColor) !== null && _d !== void 0 ? _d : '#ffffff',
+                borderRadius: (_e = useButtons === null || useButtons === void 0 ? void 0 : useButtons.borderRadius) !== null && _e !== void 0 ? _e : '50%',
+                prev: (_f = useButtons === null || useButtons === void 0 ? void 0 : useButtons.prev) !== null && _f !== void 0 ? _f : 'Prev',
+                next: (_g = useButtons === null || useButtons === void 0 ? void 0 : useButtons.next) !== null && _g !== void 0 ? _g : 'Next',
+            };
+    }
+    validateOptions() {
+        const validPositions = [
+            'top-left',
+            'top-center',
+            'top-right',
+            'bottom-left',
+            'bottom-center',
+            'bottom-right',
+            'middle-left',
+            'middle-right',
+            'middle-sides',
+        ];
+        this.validateDotsPosition(validPositions);
+        this.validateButtonsPosition(validPositions);
+    }
+    validateDotsPosition(validPositions) {
+        if (this.dotsOptions && !validPositions.includes(this.dotsOptions.position)) {
+            console.warn(`Invalid dotsPosition: ${this.dotsOptions.position}. Defaulting to 'bottom-center'.`);
+            this.dotsOptions.position = 'bottom-center';
+        }
+    }
+    validateButtonsPosition(validPositions) {
+        if (this.buttonsOptions) {
+            if (this.buttonsOptions.together) {
+                if (!validPositions.includes(this.buttonsOptions.position)) {
+                    console.warn(`Invalid buttonsPosition: ${this.buttonsOptions.position}. Defaulting to 'bottom-center'.`);
+                    this.buttonsOptions.position = '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';
+            }
+        }
+    }
+}
+
 const STYLES$i = ({ primaryImage, secondaryImage }) => `
     <style>
         .content {
@@ -15301,9 +15933,9 @@ const STYLES$i = ({ primaryImage, secondaryImage }) => `
 `;
 function billboardV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$i(spot)}
         <div class="content">
             <div class="big-image"></div>
@@ -15390,9 +16022,9 @@ const STYLES$h = ({ primaryImage }) => `
 `;
 function billboardV2Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$h(spot)}
         <div class="content">
             <div class="text-container">
@@ -15491,9 +16123,9 @@ const STYLES$g = ({ primaryImage }) => `
 `;
 function billboardV3Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$g(spot)}
         <div class="content">
             <div class="text">
@@ -15535,9 +16167,9 @@ const STYLES$f = () => `
 `;
 function inTextV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$f()}
         <div class="content">
             <span class="header">${spot.header}</span>
@@ -15625,9 +16257,9 @@ const STYLES$e = ({ primaryImage }) => `
 `;
 function largeLeaderboardV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$e(spot)}
         <div class="content">
             <div class="text">
@@ -15712,9 +16344,9 @@ const STYLES$d = ({ primaryImage }) => `
 `;
 function largeLeaderboardV2Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$d(spot)}
         <div class="content">
             <div class="text">
@@ -15771,9 +16403,9 @@ const STYLES$c = ({ primaryImage }) => `
 `;
 function largeRectangleV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$c(spot)}
          <div class="content">
             <div class="image"></div>
@@ -15869,9 +16501,9 @@ const STYLES$b = ({ primaryImage }) => `
 `;
 function squareV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$b(spot)}
         <div class="content">
             <div class="text">
@@ -15924,9 +16556,9 @@ const STYLES$a = ({ primaryImage }) => `
 `;
 function squareV2Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$a(spot)}
         <div class="content">
             <span class="header">${spot.header}</span>
@@ -15989,9 +16621,9 @@ const STYLES$9 = ({ primaryImage }) => `
 `;
 function verticalRectangleV1Template(spot) {
     return `
-        ${GFONT_PRECONNECT()}
-        ${GFONT_SOURCE_SANS_3()}
-        ${GFONT_CORMORANT()}
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${GFONT_CORMORANT}
         ${STYLES$9(spot)}
         <div class="content">
             <div class="text">
@@ -16023,175 +16655,221 @@ 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>
+  :host {
+    min-width: 320px;
+    min-height: 223px;
+  }
+
+  .${prefix}__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) {
+    .${prefix}__content {
+      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}__content"></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%;
+function linearGradientColorStop(overlay, fallback) {
+    if (!overlay || overlay.length === 0) {
+        return fallback;
+    }
+    return overlay.map(({ color, colorStop }) => `${color} ${colorStop}`).join(', ');
+}
+
+const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
+    const linearGradient = linearGradientColorStop(overlay || [], 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
+    return `
+        <style>
+            .${prefix} {
+                min-width: 320px;
+                min-height: 388px;
+                width: 100%;
                 height: 100%;
+                display: block;
+                position: relative;
+                container-type: inline-size;
             }
-            .main {
+
+            .${prefix}__content {
+                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;
             }
-            .secondary-image {
+
+            .${prefix}__text {
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                align-items: flex-start;
                 width: 100%;
-                height: 50%;
-            }
-            .header {
-                font-size: 22px;
+                height: fit-content;
+                gap: 5px;
             }
-            .description {
-                font-size: 12px;
+
+            .${prefix}__header {
+                font-size: 18px;
+                margin: 0;
+                font-family: "Cormorant";
+                font-style: normal;
+                font-weight: 300;
+                line-height: normal;
             }
-            .cta-button {
-                font-size: 12px;
+
+            .${prefix}__description {
+                font-size: 10px;
+                font-family: "Source Sans 3", system-ui;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 20px;
+                margin: 0;
             }
-        }
-        @media (min-width: 1024px) {
-            .header {
-                font-size: 24px;
+
+            .${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;
             }
-            .description {
-                font-size: 13px;
+
+            .${prefix}__content:hover .cta-button {
+                background-color: ${ctaBorderColor.length === 7 ? `${ctaBorderColor}15` : `${ctaBorderColor}`};
             }
-            .cta-button {
-                font-size: 13px;
+
+            @media (min-width: 640px) {
+                .${prefix}__content {
+                    background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+                }
             }
-        }
-        @media (min-width: 1280px) {
-            .header {
-                font-size: 28px;
+
+            @media (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}__header {
+                    font-size: 22px;
+                }
+                    
+                .${prefix}__description {
+                    font-size: 12px;
+                }
+
+                .${prefix}__cta-button {
+                    font-size: 12px;
+                }
             }
-            .description {
-                font-size: 14px;
+
+            @media (min-width: 1024px) {
+                .${prefix}__header {
+                    font-size: 24px;
+                }
+
+                .${prefix}__description {
+                    font-size: 13px;
+                }
+
+                .${prefix}__cta-button {
+                    font-size: 13px;
+                }
             }
-            .cta-button {
-                font-size: 14px;
+
+            @media (min-width: 1280px) {
+                .${prefix}__header {
+                    font-size: 28px;
+                }
+                    
+                .${prefix}__description {
+                    font-size: 14px;
+                }
+
+                .${prefix}__cta-button {
+                    font-size: 14px;
+                }
             }
-        }
-    </style>
-`;
-function rbHomepageHeroFullImageTemplate(spot) {
+        </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>` : ''}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
+    ${STYLES$6(spot, config)}
+    <div class="${prefix}">
+        <div class="${prefix}__content">
+            <div class="${prefix}__text">
+                ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+                ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
+                ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
+            </div>
         </div>
     </div>
 `;
 }
 
-const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, secondaryImage, mobileSecondaryImage = secondaryImage, }) => `
-  <style>
-    :host {
+const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, secondaryImage, mobileSecondaryImage = secondaryImage, }, { prefix }) => `
+<style>
+    .${prefix} {
         min-width: 320px;
         min-height: 388px;
+        width: 100%;
+        height: 100%;
+        display: block;
+        position: relative;
+        container-type: inline-size;
     }
-    .content {
+
+    .${prefix}__content {
         width: 100%;
         height: 100%;
         display: flex;
@@ -16201,7 +16879,8 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         color: inherit;
         cursor: pointer;
     }
-    .primary-image {
+
+    .${prefix}__primary-image {
         width: 100%;
         height: 60%;
         background-image: url("${mobilePrimaryImage}");
@@ -16209,14 +16888,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;
     }
-    .secondary-image {
+
+    .${prefix}__secondary-image {
         width: 50%;
         height: 100%;
         background-image: url("${mobileSecondaryImage}");
@@ -16224,7 +16905,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;
@@ -16238,7 +16920,8 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         padding: 0 10px;
         box-sizing: border-box;
     }
-    .header {
+
+    .${prefix}__header {
         color: inherit;
         margin: 0;
         font-size: 18px;
@@ -16247,7 +16930,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;
@@ -16255,7 +16939,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;
@@ -16270,99 +16955,85 @@ 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 {
+        .${prefix}__primary-image {
             background-image: url("${primaryImage}");
         }
-        .secondary-image {
+
+        .${prefix}__secondary-image {
             background-image: url("${secondaryImage}");
         }
     }
+
     @media (min-width: 768px) {
-        .content {
+        .${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 {
-            font-size: 22px;
-        }
-        .description {
-            font-size: 12px;
-        }
-        .cta-button {
-            font-size: 12px;
-        }
-    }
-    @media (min-width: 1024px) {
-        .header {
-            font-size: 24px;
-        }
-        .description {
-            font-size: 13px;
-      }
-      .cta-button {
-        font-size: 13px;
-      }
     }
-    @media (min-width: 1280px) {
-        .header {
-            font-size: 28px;
-        }
-        .description {
-            font-size: 14px;
-        }
-        .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>` : ''}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
+    ${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 {
+    .${prefix} {
         min-width: 320px;
         min-height: 388px;
+        width: 100%;
+        height: 100%;
+        display: block;
+        position: relative;
+        container-type: inline-size;
     }
-    .content {
+
+    .${prefix}__content {
         width: 100%;
         height: 100%;
         display: flex;
@@ -16371,7 +17042,8 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         gap: 5px;
         cursor: pointer;
     }
-    .image {
+
+    .${prefix}__image {
         width: 100%;
         height: 100%;
         background-image: url("${mobilePrimaryImage}");
@@ -16379,7 +17051,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;
@@ -16393,7 +17066,8 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         padding: 0 10px;
         box-sizing: border-box;
     }
-    .header {
+
+    .${prefix}__header {
         font-size: 18px;
         margin: 0;
         color: inherit;
@@ -16402,7 +17076,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;
@@ -16410,7 +17085,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;
@@ -16425,205 +17101,202 @@ 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 {
+        .${prefix}__image {
             background-image: url("${primaryImage}");
         }
     }
     @media (min-width: 768px) {
-        .content {
+        .${prefix}__content {
             flex-direction: row;
         }
-        .image {
+
+        .${prefix}__image {
             width: 66.66666%;
             height: 100%;
         }
-        .text {
-            width: 33.333%;
+
+        .${prefix}__text {
+            width: 33.33333%;
             height: 100%;
         }
-        .header {
-            font-size: 22px;
-        }
-        .description {
-            font-size: 12px;
-        }
-        .cta-button {
-            font-size: 12px;
-        }
-    }
-    @media (min-width: 1024px) {
-        .header {
-            font-size: 24px;
-        }
-        .description {
-            font-size: 13px;
-      }
-      .cta-button {
-        font-size: 13px;
-      }
-    }
-    @media (min-width: 1280px) {
-        .header {
-            font-size: 28px;
-        }
-        .description {
-            font-size: 14px;
-        }
-        .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>` : ''}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
+    ${STYLES$4(spot, config)}
+    <div class="${prefix}">
+        <div class="${prefix}__content">
+            <div class="${prefix}__text">
+                ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+                ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
+                ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
+            </div>
+            <div class="${prefix}__image"></div>
         </div>
-        <div class="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}");
+const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
+    const linearGradient = linearGradientColorStop(overlay || [], 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    return `
+    <style>
+      :host {
+        min-width: 320px;
+        min-height: 334px;
       }
-    }
-    @media (min-width: 768px) {
-      .text {
-        padding: 25px;
+
+      .${prefix}__content {
+        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};
       }
-      .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}__content:hover .${prefix}__cta-button {
+        background-color: ${ctaBorderColor.length === 7 ? `${ctaBorderColor}15` : `${ctaBorderColor}`};
       }
-      .description {
-        font-size: 14px;
+
+      @media (min-width: 640px) {
+        .${prefix}__content {
+          background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+        }
       }
-      .cta-button {
-        font-size: 13px;
+
+      @media (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;
+        }
       }
-    }
-    @media (min-width: 1280px) {
-      .cta-button {
-        font-size: 14px;
+
+      @media (min-width: 1024px) {
+        .${prefix}__text {
+          padding: 30px;
+        }
+
+        .${prefix}__header {
+          font-size: 28px;
+        }
+
+        .${prefix}__description {
+          font-size: 14px;
+        }
+
+        .${prefix}__cta-button {
+          font-size: 13px;
+        }
       }
-    }
-  </style>
-`;
-function rbLargeCategoryImageToutTemplate(spot) {
+
+      @media (min-width: 1280px) {
+        .${prefix}__cta-button {
+          font-size: 14px;
+        }
+      }
+    </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>` : ''}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
+    ${STYLES$3(spot, config)}
+    <div class="${prefix}__content">
+      <div class="${prefix}__text">
+        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+        ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
+        ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
       </div>
     </div>
   `;
 }
 
-const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage, }) => `
+const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix }) => `
   <style>
     :host {
       min-width: 320px;
       min-height: 150px;
     }
-    .content {
+
+    .${prefix}__content {
       width: 100%;
       height: 100%;
       display: flex;
@@ -16638,11 +17311,13 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       background-blend-mode: overlay;
       background-repeat: no-repeat;
     }
-    .text {
+
+    .${prefix}__text {
       padding: 15px 10%;
       width: fit-content;
     }
-    .header {
+
+    .${prefix}__header {
       font-size: 16px;
       color: ${textColor};
       line-height: 20px;
@@ -16651,101 +17326,116 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       font-style: normal;
       margin: 0;
     }
+
     @media (min-width: 640px) {
-      .content {
+      .${prefix}__content {
         background-image: url("${primaryImage}");
       }
     }
+
     @media (min-width: 768px) {
-      .header {
+      .${prefix}__header {
         font-size: 22px;
       }
     }
+
     @media (min-width: 1024px) {
-      .header {
+      .${prefix}__header {
         font-size: 24px;
       }
     }
+
     @media (min-width: 1280px) {
-      .header {
+      .${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>` : ''}
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${STYLES$2(spot, config)}
+    <div class="${prefix}__content">
+      <div class="${prefix}__text">
+        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
       </div>
     </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;
-    }
-    @media (min-width: 640px) {
-      .content {
-        background-image: url("${primaryImage}");
+const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix, overlay }) => {
+    const linearGradient = linearGradientColorStop(overlay || [], 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    return `
+    <style>
+      :host {
+        min-width: 165px;
+        min-height: 300px;
       }
-    }
-  </style>
-`;
-function rbSmallCategoryImageToutTemplate(spot) {
+
+      .${prefix}__content {
+        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;
+      }
+
+      .${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;
+        line-height: normal;
+        margin: 0;
+      }
+
+      @media (min-width: 640px) {
+        .${prefix}__content {
+          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>` : ''}
+    ${GFONT_PRECONNECT}
+    ${GFONT_CORMORANT}
+    ${STYLES$1(spot, config)}
+    <div class="${prefix}__content">
+      <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}__content {
       width: 100%;
       height: 100%;
       background-color: ${backgroundColor};
@@ -16754,7 +17444,8 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       flex-direction: column;
       border-radius: 5px;
     }
-    .image {
+
+    .${prefix}__image {
       width: 100%;
       height: 100%;
       background-image: url("${mobilePrimaryImage}");
@@ -16763,7 +17454,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;
@@ -16773,7 +17465,8 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       height: fit-content;
       position: relative;
     }
-    .header {
+
+    .${prefix}__header {
       font-size: 12px;
       color: ${textColor};
       padding-top: 5px;
@@ -16782,44 +17475,41 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       font-style: normal;
       font-weight: 400;
       line-height: normal;
+      margin: 0;
     }
+
     @media (min-width: 640px) {
-      .image {
+      .${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>` : ''}
+    ${GFONT_PRECONNECT}
+    ${GFONT_CORMORANT}
+    ${STYLES(spot, config)}
+    <div class="${prefix}__content">
+      <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.
  *
- * @param {ISpot} data - The spot data.
+ * @param {ISpot} spot - The spot data.
  *
  * @return {string} - The spot html string.
  */
-const GET_SPOT_TEMPLATE_HTML_STRING = (data) => {
+const GET_SPOT_TEMPLATE_HTML_STRING = (spot, config) => {
     const templates = {
+        // Reserve Bar Spot Templates
         [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE]: {
             rbHomepageHeroThreeTile: rbHomepageHeroThreeTileTemplate,
         },
@@ -16847,6 +17537,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,
@@ -16873,185 +17564,27 @@ const GET_SPOT_TEMPLATE_HTML_STRING = (data) => {
             inTextV1: inTextV1Template,
         },
     };
-    const spotVariants = templates[data.spot];
+    const spotVariants = templates[spot.spot];
     if (!spotVariants) {
         return '';
     }
-    const variantTemplate = spotVariants[data.variant];
+    const variantTemplate = spotVariants[spot.variant];
     if (!variantTemplate) {
         return '';
     }
-    return variantTemplate(data);
+    // Generate a random prefix to avoid conflicts with other elements.
+    const prefix = 's' + Math.random().toString(36).substring(6);
+    return variantTemplate(spot, { ...config, prefix });
 };
 
-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' });
-        }
-        connectedCallback() {
-            this.hasCustomContent = Boolean(this.customContent);
-            this.addEventListener('click', this.handleClick);
-            this.setupIntersectionObserver();
-            this.render();
-        }
-        disconnectedCallback() {
-            var _a;
-            (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-            this.removeEventListener('click', this.handleClick);
-        }
-        attributeChangedCallback(_name, oldValue, newValue) {
-            if (oldValue !== newValue) {
-                this.render();
-            }
-        }
-        render() {
-            if (!this.shadowRoot || !this.data)
-                return;
-            const { style, wrapper, slot } = SPOT_ELEMENT_SHADOW_ROOT(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);
-            }
-        }
-        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);
-        }
-        setupIntersectionObserver() {
-            const options = {
-                root: null,
-                rootMargin: '0px',
-                threshold: 0.5, // The element is considered visible when 50% of it is visible
-            };
-            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);
-        }
-        async registerEvent(event) {
-            var _a, _b;
-            if (!this.data)
-                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 normalizedUrl = this.normalizeUrl(eventUrl);
-                const response = await fetch(normalizedUrl, options);
-                if (response.ok && event === RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick) {
-                    window.location.href = this.getRedirectUrlFromPayload(normalizedUrl);
-                }
-            }
-            catch (error) {
-                console.error(`Rmn error sending ${event} event:`, error);
-            }
-        }
-        normalizeUrl(url) {
-            if (!this.data)
-                return url;
-            const rmnUrl = `${SDK_CONFIG.url[this.data.env]}/api${SPOT_EVENT_API_PATH}`;
-            return url.replace(/https?:\/\/[^/]+\/[^?]+/, `${rmnUrl}`);
-        }
-        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 '';
-            }
-        }
-    }
-    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;
-        }
-        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.
-     */
-    ensureBrowserEnvironmentAndDefineElement() {
-        if (typeof window === 'undefined' || typeof document === 'undefined') {
-            console.warn('LiquidCommerce Rmn Sdk: createSpotElement is only available in browser environments!!!');
-            return false;
-        }
-        if (!customElements.get(SPOT_ELEMENT_TAG)) {
-            customElements.define(SPOT_ELEMENT_TAG, SpotElement);
-        }
-        return true;
-    }
-}
+const SELECTION_API_PATH = '/spots/selection';
 
-class SpotSelectionService extends BaseApi {
+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.
@@ -17061,35 +17594,23 @@ class SpotSelectionService extends BaseApi {
      * @return {Promise<ISpots>} - 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})`);
         }
         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;
-            let spots = val.data.spots;
-            spots = this.addEnvToSpotData(spots, this.authInfo.env);
-            return spots;
+            return val.data.spots;
         }
         throw new Error('Spot selection response was not successful');
     }
-    addEnvToSpotData(spots, env) {
-        for (const key in spots) {
-            if (spots[key]) {
-                spots[key].forEach((spot) => {
-                    spot.env = env;
-                });
-            }
-        }
-        return spots;
-    }
 }
 
 class LiquidCommerceRmnClient {
     constructor(auth) {
-        this.spotSelectionService = SpotSelectionService.getInstance(auth);
-        this.spotHtmlService = SpotHtmlService.getInstance();
+        this.selectionService = SelectionService.getInstance(auth);
+        this.elementService = ElementService.getInstance();
     }
     /**
      * Makes a selection request on our server based on the provided data.
@@ -17101,23 +17622,118 @@ class LiquidCommerceRmnClient {
      * @return {Promise<ISpots>} - The spots response object.
      */
     async spotSelection(data) {
-        return this.spotSelectionService.spotSelection(data);
+        return this.selectionService.spotSelection(data);
+    }
+    /**
+     * Injects the spot elements into their provided placement.
+     *
+     * @param {IInjectSpotElement[]} data - The spot elements data.
+     * @param {IInjectSpotsConfig} config - The configuration object.
+     *
+     * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
+     */
+    async injectSpotElement(data, config) {
+        if (!data.length) {
+            console.warn('RmnSdk: Failed to request spot selection. No spot elements provided.');
+            return;
+        }
+        const spotSelectionRequest = data.map((item) => {
+            var _a;
+            return ({
+                spot: item.spotType,
+                count: (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 1,
+            });
+        });
+        const response = await this.spotSelection({ spots: spotSelectionRequest });
+        const normalizedData = this.normalizeDataSpotType(data);
+        for (const item of normalizedData) {
+            const spots = response[item.spotType];
+            if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
+                console.warn(`RmnSdk: Failed to inject spot element. No spots found for type "${item.spotType}".`);
+                continue;
+            }
+            const placementId = item.placementId.replace('#', '');
+            const placement = document.getElementById(placementId);
+            if (!placement) {
+                console.warn(`RmnSdk: Failed to inject spot element. Placement not found for id "#${placementId}".`);
+                continue;
+            }
+            if (spots.length === 1) {
+                this.injectOneSpotElement(item, placement, spots[0], config);
+            }
+            if (spots.length > 1) {
+                this.injectCarouselSpotElement(placement, spots, config);
+            }
+        }
     }
     /**
-     * Creates the spot html element based on the provided data using shadow dom.
+     * Injects a carousel element with the provided spots into the placement.
      *
-     * 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.
+     * @param {HTMLElement} placement - The placement element.
+     * @param {ISpot[]} spots - The spot data.
+     * @param {IInjectSpotsConfig} config - The configuration object.
      *
+     * @return {void}
+     */
+    injectCarouselSpotElement(placement, spots, config) {
+        const carouselSlides = [];
+        for (const spotItem of spots) {
+            const spot = this.elementService.overrideSpotColors(spotItem, config === null || config === void 0 ? void 0 : config.colors);
+            const content = GET_SPOT_TEMPLATE_HTML_STRING(spot, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
+            carouselSlides.push(content);
+        }
+        const carousel = new CarouselComponent(carouselSlides, config === null || config === void 0 ? void 0 : config.carousel);
+        const carouselElement = carousel.getElement();
+        placement.appendChild(carouselElement);
+    }
+    /**
+     * 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 {IInjectSpotsConfig} config - The configuration object.
+     *
+     * @return {void}
+     */
+    injectOneSpotElement(injectItem, placement, spot, config) {
+        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
+        const content = GET_SPOT_TEMPLATE_HTML_STRING(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
+        const spotElement = this.elementService.createFinalElement({
+            content,
+            config: {
+                fluid: true,
+                width: spot.width,
+                height: spot.height,
+                minScale: config === null || config === void 0 ? void 0 : config.minScale,
+            },
+        });
+        if (!spotElement) {
+            console.warn(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`);
+            return;
+        }
+        placement.appendChild(spotElement);
+    }
+    /**
+     * Normalizes the spot type data by adding a number suffix to the spot type.
      *
-     * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
+     * @param {IInjectSpotElement[]} spots - The spot type data.
+     *
+     * @return {IInjectSpotElement[]} - The normalized spot type data.
      */
-    createSpotElement(spot, config) {
-        return this.spotHtmlService.createSpotHtmlElement(spot, config);
+    normalizeDataSpotType(spots) {
+        const spotTypeCounts = {};
+        return spots.map((spot) => {
+            const { spotType } = spot;
+            spotTypeCounts[spotType] = (spotTypeCounts[spotType] || 0) + 1;
+            if (spotTypeCounts[spotType] === 1) {
+                return spot;
+            }
+            return {
+                ...spot,
+                spotType: `${spotType}${spotTypeCounts[spotType]}`,
+            };
+        });
     }
 }
 /**
@@ -17133,24 +17749,5 @@ async function RmnClient(apiKey, config) {
     const credentials = await authService.initialize();
     return new LiquidCommerceRmnClient(credentials);
 }
-/**
- * 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.
- * 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.
- *
- * @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);
-}
 
-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 };