@liquidcommercedev/rmn-sdk 1.4.6-beta.1 → 1.4.6-beta.3

package/dist/index.cjs

@@ -62,7 +62,6 @@ exports.RMN_SPOT_EVENT = void 0;
     RMN_SPOT_EVENT["ADD_TO_WISHLIST"] = "ADD_TO_WISHLIST";
     RMN_SPOT_EVENT["BUY_NOW"] = "BUY_NOW";
 })(exports.RMN_SPOT_EVENT || (exports.RMN_SPOT_EVENT = {}));
-
 exports.RMN_ENV = void 0;
 (function (RMN_ENV) {
     RMN_ENV["LOCAL"] = "local";
@@ -14999,7 +14998,7 @@ class BaseApi extends BaseApiAbstract {
      */
     async post(path, data, configOverrides) {
         let requestData = data;
-        if (this.authInfo.env !== exports.RMN_ENV.DEVELOPMENT) {
+        if (this.authInfo.env !== exports.RMN_ENV.LOCAL) {
             const timestamp = new Date().getTime();
             configOverrides = {
                 ...configOverrides,
@@ -15152,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>
@@ -15165,42 +15162,724 @@ 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 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 (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();
     }
-    :host([fluid="false"]) {
-      width: ${width}px;
-      height: ${height}px;
+}
+
+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`};
     }
-  `;
-    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;
+
+    .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 };
-};
+
+    .slide.active {
+        display: flex;
+    }
+
+    .dots {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .dots .dot {
+        width: 12px;
+        height: 12px;
+        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 button {
+        background-color: #00000080;
+        color: #fff;
+        border: none;
+        padding: 10px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    .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;
+        }
+
+        .dots .dot {
+            width: 8px;
+            height: 8px;
+        }
+    }
+`;
+
+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.attachShadow({ mode: 'open' });
+        }
+        connectedCallback() {
+            this.initializeOptions();
+            this.setupResizeObserver();
+            this.render();
+            this.setupCarousel();
+        }
+        disconnectedCallback() {
+            var _a;
+            this.stopAutoplay();
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        }
+        initializeOptions() {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            this.useDots = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.useDots) === true || typeof ((_b = this.data) === null || _b === void 0 ? void 0 : _b.useDots) === 'object';
+            this.useButtons = ((_c = this.data) === null || _c === void 0 ? void 0 : _c.useButtons) === true || typeof ((_d = this.data) === null || _d === void 0 ? void 0 : _d.useButtons) === 'object';
+            this.autoplay = (_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.autoplay) !== null && _f !== void 0 ? _f : true;
+            this.interval = (_h = (_g = this.data) === null || _g === void 0 ? void 0 : _g.interval) !== null && _h !== void 0 ? _h : CustomCarouselElement.defaultInterval;
+            this.dotsOptions = {
+                position: 'bottom-center',
+                color: '#d9d9d9',
+                activeColor: '#b5914a',
+                ...(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',
+                ...(typeof ((_k = this.data) === null || _k === void 0 ? void 0 : _k.useButtons) === 'object' ? this.data.useButtons : {}),
+            };
+            this.validateOptions();
+        }
+        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.handleCarouselSizeChanged.bind(this));
+            }
+        }
+        handleCarouselSizeChanged(event) {
+            console.info('Carousel Size Changed', event);
+        }
+        render() {
+            var _a;
+            if (!this.shadowRoot)
+                return;
+            const style = document.createElement('style');
+            style.textContent = CAROUSEL_COMPONENT_STYLE(this.data);
+            this.shadowRoot.appendChild(style);
+            const slides = this.renderSlides();
+            this.shadowRoot.appendChild(slides);
+            this.slidesContainer = (_a = this.shadowRoot.querySelector('.slides')) !== null && _a !== void 0 ? _a : undefined;
+            if (this.useDots) {
+                const dots = this.renderDots();
+                if (dots)
+                    this.shadowRoot.appendChild(dots);
+            }
+            if (this.useButtons) {
+                const buttons = this.renderButtons();
+                if (buttons)
+                    this.shadowRoot.appendChild(buttons);
+            }
+        }
+        setupCarousel() {
+            this.setupDots();
+            this.setupButtons();
+            if (this.autoplay) {
+                this.startAutoplay();
+            }
+            this.updateCarousel();
+        }
+        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.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.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.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) {
+            console.info('Spot Size Changed', 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.5; // Font will never be smaller than 90% of original
+            const maxScale = 1.5; // 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);
+            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;
+        if (!this.ensureBrowserEnvironmentAndDefineElement()) {
+            return null;
+        }
+        const spot = document.createElement(SPOT_ELEMENT_TAG);
+        spot.data = {
+            fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : 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 = {
+            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;
+    }
+}
+
+function linearGradientColorStop(overlay, fallback) {
+    if (!overlay || overlay.length === 0) {
+        return fallback;
+    }
+    return overlay.map(({ color, colorStop }) => `${color} ${colorStop}`).join(', ');
+}
+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>
@@ -16019,175 +16698,214 @@ 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%;
+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>` : ''}
+    ${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;
@@ -16197,7 +16915,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}");
@@ -16205,14 +16924,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}");
@@ -16220,7 +16941,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;
@@ -16234,7 +16956,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;
@@ -16243,7 +16966,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;
@@ -16251,7 +16975,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;
@@ -16266,99 +16991,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>` : ''}
+    ${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;
@@ -16367,7 +17078,8 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         gap: 5px;
         cursor: pointer;
     }
-    .image {
+
+    .${prefix}__image {
         width: 100%;
         height: 100%;
         background-image: url("${mobilePrimaryImage}");
@@ -16375,7 +17087,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;
@@ -16389,7 +17102,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;
@@ -16398,7 +17112,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;
@@ -16406,7 +17121,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;
@@ -16421,205 +17137,204 @@ 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>` : ''}
+    ${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>` : ''}
+    ${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, 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: 150px;
     }
-    .content {
+
+    .${prefix}__content {
       width: 100%;
       height: 100%;
       display: flex;
@@ -16628,17 +17343,18 @@ 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;
     }
-    .text {
+
+    .${prefix}__text {
       padding: 15px 10%;
       width: fit-content;
     }
-    .header {
+
+    .${prefix}__header {
       font-size: 16px;
       color: ${textColor};
       line-height: 20px;
@@ -16647,102 +17363,117 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       font-style: normal;
       margin: 0;
     }
+
     @media (min-width: 640px) {
-      .content {
-        background-image: url("${primaryImage}");
+      .${prefix}__content {
+        background-image: linear-gradient(to top, ${linearGradient}), 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>` : ''}
+    ${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;
-      margin: 0;
-    }
-    @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>` : ''}
+    ${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};
@@ -16751,7 +17482,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}");
@@ -16760,7 +17492,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;
@@ -16770,7 +17503,8 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       height: fit-content;
       position: relative;
     }
-    .header {
+
+    .${prefix}__header {
       font-size: 12px;
       color: ${textColor};
       padding-top: 5px;
@@ -16781,43 +17515,39 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       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>` : ''}
+    ${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 SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     const templates = {
+        // Reserve Bar Spot Templates
         [exports.RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE]: {
             rbHomepageHeroThreeTile: rbHomepageHeroThreeTileTemplate,
         },
@@ -16845,6 +17575,7 @@ const GET_SPOT_TEMPLATE_HTML_STRING = (data) => {
         [exports.RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: {
             rbProductUpcs: () => '', // No template for this spot type, it will be handled by ReserveBar App.
         },
+        // IAB Standard Spot Templates
         [exports.RMN_SPOT_TYPE.BILLBOARD]: {
             billboardV1: billboardV1Template,
             billboardV2: billboardV2Template,
@@ -16871,178 +17602,28 @@ 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 random prefix to avoid conflicts with other elements.
+    const prefix = 's' + Math.random().toString(36).substring(6);
+    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' });
-        }
-        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_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);
-            }
-        }
-        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(exports.RMN_SPOT_EVENT.IMPRESSION);
-                    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-                }
-            }, options);
-            this.observer.observe(this);
-        }
-        handleClick() {
-            this.registerEvent(exports.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 === exports.RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick ? 'follow' : 'manual',
-                };
-                const response = await fetch(eventUrl, options);
-                if (response.ok && event === exports.RMN_SPOT_EVENT.CLICK && shouldRedirectOnClick) {
-                    window.location.href = this.getRedirectUrlFromPayload(eventUrl);
-                }
-            }
-            catch (error) {
-                console.error(`Rmn error sending ${event} event:`, error);
-            }
-        }
-        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.
@@ -17052,7 +17633,7 @@ 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})`);
         }
@@ -17067,8 +17648,8 @@ class SpotSelectionService extends BaseApi {
 
 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.
@@ -17080,23 +17661,145 @@ 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 element's data.
+     * @param {IInjectSpotElementConfig} 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,
+            url: config === null || config === void 0 ? void 0 : config.url,
+        });
+        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.
+     *
+     * @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) {
+            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) {
+                console.warn(`RmnSdk: Failed to inject carousel spot element. Could not create element for type "${spot.spot}".`);
+                return;
+            }
+            carouselSlides.push(content);
+        }
+        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 });
+        const carouselElement = this.elementService.createCarouselElement({
+            slides: carouselSlides,
+            config: {
+                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) {
+            console.warn(`RmnSdk: Failed to inject spot carousel element. Could not create spot carousel element.`);
+            return;
+        }
+        placement.replaceChildren(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 {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);
+        const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
+        if (!content) {
+            console.warn(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`);
+            return;
+        }
+        const spotElement = this.elementService.createSpotElement({
+            content,
+            config: {
+                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) {
+            console.warn(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`);
+            return;
+        }
+        placement.replaceChildren(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]}`,
+            };
+        });
     }
 }
 /**
@@ -17116,20 +17819,32 @@ async function RmnClient(apiKey, config) {
  * 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
+        },
+    });
 }
 
 exports.LiquidCommerceRmnClient = LiquidCommerceRmnClient;