@liquidcommercedev/rmn-sdk 1.4.6-beta.4 → 1.4.6-beta.6

package/dist/index.cjs

@@ -56,6 +56,8 @@ exports.RMN_FILTER_PROPERTIES = void 0;
 })(exports.RMN_FILTER_PROPERTIES || (exports.RMN_FILTER_PROPERTIES = {}));
 exports.RMN_SPOT_EVENT = void 0;
 (function (RMN_SPOT_EVENT) {
+    RMN_SPOT_EVENT["MOUNTED"] = "MOUNTED";
+    RMN_SPOT_EVENT["UNMOUNTED"] = "UNMOUNTED";
     RMN_SPOT_EVENT["IMPRESSION"] = "IMPRESSION";
     RMN_SPOT_EVENT["CLICK"] = "CLICK";
     RMN_SPOT_EVENT["PURCHASE"] = "PURCHASE";
@@ -15164,6 +15166,46 @@ 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">
 `;
 
+class IntersectionObserverService {
+    constructor(defaultOptions = {}) {
+        this.observers = new Map();
+        this.defaultOptions = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 0.5,
+            ...defaultOptions,
+        };
+    }
+    observe(element, callback, options = {}) {
+        const mergedOptions = { ...this.defaultOptions, ...options };
+        const ioCallback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    callback(entry);
+                }
+            });
+        };
+        const observer = new IntersectionObserver(ioCallback, mergedOptions);
+        this.observers.set(element, observer);
+        observer.observe(element);
+    }
+    unobserve(element) {
+        const observer = this.observers.get(element);
+        if (observer) {
+            observer.unobserve(element);
+            observer.disconnect();
+            this.observers.delete(element);
+        }
+    }
+    unobserveAll() {
+        this.observers.forEach((observer, element) => {
+            observer.unobserve(element);
+            observer.disconnect();
+        });
+        this.observers.clear();
+    }
+}
+
 class ResizeObserverService {
     constructor({ element, maxSize, minScale }) {
         this.element = element;
@@ -15203,9 +15245,9 @@ class ResizeObserverService {
         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;
+        if (newWidth > containerWidth) {
+            newWidth = containerWidth;
+            newHeight = containerHeight * this.aspectRatio;
         }
         // Ensure we're not going below minimum dimensions
         newWidth = Math.max(newWidth, this.minSize.width);
@@ -15232,6 +15274,36 @@ class ResizeObserverService {
     }
 }
 
+function calculateScaleFactor(elementScale) {
+    // Step 1: Apply square root for non-linear scaling
+    // This creates a more gradual scaling effect, especially for larger changes
+    // For example:
+    // - elementScale of 0.25 (1/4 size) becomes 0.5
+    // - elementScale of 1 (unchanged) remains 1
+    // - elementScale of 4 (4x size) becomes 2
+    const baseFactor = Math.sqrt(elementScale);
+    // Step 2: Apply additional dampening to further soften the scaling effect
+    // The dampening factor (0.5) can be adjusted:
+    // - Lower values (closer to 0) make scaling more subtle
+    // - Higher values (closer to 1) make scaling more pronounced
+    const dampening = 0.35;
+    // Calculate the scaleFactor:
+    // 1. (baseFactor - 1) represents the change from the original size
+    // 2. Multiply by dampening to reduce the effect
+    // 3. Add 1 to center the scaling around the original size
+    // For example, if baseFactor is 2:
+    // scaleFactor = 1 + (2 - 1) * 0.5 = 1.5
+    const scaleFactor = 1 + (baseFactor - 1) * dampening;
+    // Step 3: Define the allowed range for the scale factor
+    // This ensures that the font size never changes too drastically
+    const minScale = 0.35; // Font will never be smaller than 50% of original
+    const maxScale = 1.5; // Font will never be larger than 150% of original
+    // Step 4: Clamp the scale factor to the defined range
+    // Math.min ensures the value doesn't exceed maxScale
+    // Math.max ensures the value isn't less than minScale
+    return Math.max(minScale, Math.min(maxScale, scaleFactor));
+}
+
 const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
     :host {
         position: relative;
@@ -15419,6 +15491,7 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             this.autoplayInterval = null;
             this.useDots = false;
             this.useButtons = false;
+            this.originalFontSizes = new Map();
             this.attachShadow({ mode: 'open' });
         }
         connectedCallback() {
@@ -15457,7 +15530,7 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             this.validateOptions();
         }
         setupResizeObserver() {
-            if (this.data) {
+            if (this.data && !this.data.fluid) {
                 this.resizeObserver = new ResizeObserverService({
                     element: this,
                     maxSize: {
@@ -15470,7 +15543,28 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             }
         }
         handleCarouselSizeChanged(event) {
-            console.info('Carousel Size Changed', event);
+            const isRBSpot = 'rbHeroadaksda'.startsWith('rb');
+            if (!isRBSpot) {
+                // Adjust text elements font size based on the scale factor
+                this.adjustFontSize(event.detail.scale);
+            }
+        }
+        adjustFontSize(elementScale) {
+            var _a;
+            const scaleFactor = calculateScaleFactor(elementScale);
+            // Find all text elements within the shadow root
+            const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h1, h2, h3, h4, p, span');
+            elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
+                if (element instanceof HTMLElement) {
+                    if (!this.originalFontSizes.has(element)) {
+                        const originalSize = parseFloat(window.getComputedStyle(element).fontSize);
+                        this.originalFontSizes.set(element, originalSize);
+                    }
+                    const originalSize = this.originalFontSizes.get(element);
+                    const newFontSize = originalSize * scaleFactor;
+                    element.style.fontSize = `${newFontSize}px`;
+                }
+            });
         }
         render() {
             var _a;
@@ -15679,7 +15773,7 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
          * #########################################################
          */
         setupResizeObserver() {
-            if (this.data) {
+            if (this.data && !this.data.fluid) {
                 this.resizeObserver = new ResizeObserverService({
                     element: this,
                     maxSize: {
@@ -15696,20 +15790,23 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
          * #########################################################
          */
         handleSpotSizeChanged(event) {
-            console.info('Spot Size Changed', event);
-            // Adjust text elements font size based on the scale factor
-            this.adjustFontSize(event.detail.scale);
+            var _a, _b, _c;
+            const isRBSpot = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.spot) === null || _b === void 0 ? void 0 : _b.startsWith('rb')) !== null && _c !== void 0 ? _c : false;
+            if (!isRBSpot) {
+                // Adjust text elements font size based on the scale factor
+                this.adjustFontSize(event.detail.scale);
+            }
         }
         adjustFontSize(elementScale) {
             var _a;
-            const scaleFactor = this.calculateScaleFactor(elementScale);
+            const scaleFactor = calculateScaleFactor(elementScale);
             // Find all text elements within the shadow root
             const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h1, h2, h3, h4, p, span');
             elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
                 if (element instanceof HTMLElement) {
                     if (!this.originalFontSizes.has(element)) {
-                        const orignalSize = parseFloat(window.getComputedStyle(element).fontSize);
-                        this.originalFontSizes.set(element, orignalSize);
+                        const originalSize = parseFloat(window.getComputedStyle(element).fontSize);
+                        this.originalFontSizes.set(element, originalSize);
                     }
                     const originalSize = this.originalFontSizes.get(element);
                     const newFontSize = originalSize * scaleFactor;
@@ -15717,35 +15814,6 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 }
             });
         }
-        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
          * #########################################################
@@ -15796,6 +15864,7 @@ class ElementService {
         }
         const spot = document.createElement(SPOT_ELEMENT_TAG);
         spot.data = {
+            spot: config === null || config === void 0 ? void 0 : config.spot,
             fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
             ...config,
         };
@@ -15817,6 +15886,7 @@ class ElementService {
         }
         const carousel = document.createElement(CAROUSEL_ELEMENT_TAG);
         carousel.data = {
+            spot: config === null || config === void 0 ? void 0 : config.spot,
             fluid: false,
             ...config,
         };
@@ -16701,12 +16771,7 @@ function wideSkyscraperV1Template(spot) {
 
 const STYLES$7 = ({ primaryImage, mobilePrimaryImage = primaryImage }, { prefix }) => `
 <style>
-  :host {
-    min-width: 320px;
-    min-height: 223px;
-  }
-
-  .${prefix}__content {
+  .${prefix} {
     display: block;
     width: 100%;
     height: 100%;
@@ -16715,10 +16780,11 @@ const STYLES$7 = ({ primaryImage, mobilePrimaryImage = primaryImage }, { prefix
     background-repeat: no-repeat;
     background-position: center;
     cursor: pointer;
+    container-type: inline-size;
   }
 
-  @media (min-width: 640px) {
-    .${prefix}__content {
+  @container (min-width: 640px) {
+    .${prefix} {
       background-image: url("${primaryImage}");
     }
   }
@@ -16728,7 +16794,7 @@ function rbCollectionBannerWithoutTextBlockTemplate(spot, config) {
     const { prefix = '' } = config;
     return `
     ${STYLES$7(spot, config)}
-    <div class="${prefix}__content"></div>
+    <div class="${prefix}"></div>
   `;
 }
 
@@ -16737,16 +16803,6 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
     return `
         <style>
             .${prefix} {
-                min-width: 320px;
-                min-height: 388px;
-                width: 100%;
-                height: 100%;
-                display: block;
-                position: relative;
-                container-type: inline-size;
-            }
-
-            .${prefix}__content {
                 display: flex;
                 flex-direction: column;
                 justify-content: flex-end;
@@ -16761,6 +16817,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 box-sizing: border-box;
                 color: ${textColor};
                 cursor: pointer;
+                container-type: inline-size;
             }
 
             .${prefix}__text {
@@ -16805,17 +16862,17 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 transition: background-color 0.3s ease;
             }
 
-            .${prefix}__content:hover .cta-button {
+            .${prefix}:hover .cta-button {
                 background-color: ${ctaBorderColor.length === 7 ? `${ctaBorderColor}15` : `${ctaBorderColor}`};
             }
 
-            @media (min-width: 640px) {
-                .${prefix}__content {
+            @container (min-width: 640px) {
+                .${prefix} {
                     background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
                 }
             }
 
-            @media (min-width: 768px) {
+            @container (min-width: 768px) {
                 .${prefix}__primary-image {
                     width: 66.66666%;
                     height: 100%;
@@ -16826,7 +16883,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                     height: 100%;
                     width: 33.33333%;
                 }
-                    
+
                 .${prefix}__secondary-image {
                     width: 100%;
                     height: 50%;
@@ -16835,7 +16892,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 .${prefix}__header {
                     font-size: 22px;
                 }
-                    
+
                 .${prefix}__description {
                     font-size: 12px;
                 }
@@ -16845,7 +16902,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 }
             }
 
-            @media (min-width: 1024px) {
+            @container (min-width: 1024px) {
                 .${prefix}__header {
                     font-size: 24px;
                 }
@@ -16859,11 +16916,11 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 }
             }
 
-            @media (min-width: 1280px) {
+            @container (min-width: 1280px) {
                 .${prefix}__header {
                     font-size: 28px;
                 }
-                    
+
                 .${prefix}__description {
                     font-size: 14px;
                 }
@@ -16883,13 +16940,11 @@ function rbHomepageHeroFullImageTemplate(spot, config) {
     ${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 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>
 `;
 }
@@ -16897,8 +16952,6 @@ function rbHomepageHeroFullImageTemplate(spot, config) {
 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;
@@ -16910,7 +16963,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         width: 100%;
         height: 100%;
         display: flex;
-        flex-direction: column; 
+        flex-direction: column;
         background-color: transparent;
         gap: 5px;
         color: inherit;
@@ -16997,7 +17050,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         opacity: 0.8;
     }
 
-    @media (min-width: 640px) {
+    @container (min-width: 640px) {
         .${prefix}__primary-image {
             background-image: url("${primaryImage}");
         }
@@ -17007,7 +17060,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         }
     }
 
-    @media (min-width: 768px) {
+    @container (min-width: 768px) {
         .${prefix}__content {
             flex-direction: row;
         }
@@ -17032,6 +17085,39 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
             width: 100%;
             height: 50%;
         }
+        .${prefix}__header {
+            font-size: 22px;
+        }
+        .${prefix}__description {
+            font-size: 12px;
+        }
+        .${prefix}__cta-button {
+            font-size: 12px;
+        }
+    }
+
+    @container (min-width: 1024px) {
+        .${prefix}__header {
+            font-size: 24px;
+        }
+        .${prefix}__description {
+            font-size: 13px;
+        }
+        .${prefix}__cta-button {
+          font-size: 13px;
+        }
+    }
+
+    @container (min-width: 1280px) {
+        .${prefix}__header {
+            font-size: 28px;
+        }
+        .${prefix}__description {
+            font-size: 14px;
+        }
+        .${prefix}__cta-button {
+            font-size: 14px;
+        }
     }
 </style>
 `;
@@ -17061,23 +17147,15 @@ function rbHomepageHeroThreeTileTemplate(spot, config) {
 const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
   <style>
     .${prefix} {
-        min-width: 320px;
-        min-height: 388px;
-        width: 100%;
-        height: 100%;
-        display: block;
-        position: relative;
-        container-type: inline-size;
-    }
-
-    .${prefix}__content {
         width: 100%;
         height: 100%;
         display: flex;
-        flex-direction: column-reverse; 
+        flex-direction: column-reverse;
         background-color: transparent;
         gap: 5px;
         cursor: pointer;
+        container-type: inline-size;
+        position: relative;
     }
 
     .${prefix}__image {
@@ -17122,7 +17200,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         font-style: normal;
         font-weight: 400;
     }
-        
+
     .${prefix}__cta-button {
         color: ${ctaTextColor};
         background-color: transparent;
@@ -17143,25 +17221,57 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         opacity: 0.8;
     }
 
-    @media (min-width: 640px) {
+    @container (min-width: 640px) {
         .${prefix}__image {
             background-image: url("${primaryImage}");
         }
     }
-    @media (min-width: 768px) {
-        .${prefix}__content {
+
+    @container (min-width: 768px) {
+        .${prefix} {
             flex-direction: row;
         }
-
         .${prefix}__image {
             width: 66.66666%;
             height: 100%;
         }
-
         .${prefix}__text {
             width: 33.33333%;
             height: 100%;
         }
+        .${prefix}__header {
+            font-size: 22px;
+        }
+        .${prefix}__description {
+            font-size: 12px;
+        }
+        .${prefix}__cta-button {
+            font-size: 12px;
+        }
+    }
+
+    @container (min-width: 1024px) {
+        .${prefix}__header {
+            font-size: 24px;
+        }
+        .${prefix}__description {
+            font-size: 13px;
+        }
+        .${prefix}__cta-button {
+          font-size: 13px;
+        }
+    }
+
+    @container (min-width: 1280px) {
+        .${prefix}__header {
+            font-size: 28px;
+        }
+        .${prefix}__description {
+            font-size: 14px;
+        }
+        .${prefix}__cta-button {
+            font-size: 14px;
+        }
     }
   </style>
 `;
@@ -17173,14 +17283,12 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
     ${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 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>
   `;
 }
@@ -17189,12 +17297,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
     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;
-      }
-
-      .${prefix}__content {
+      .${prefix} {
         width: 100%;
         height: 100%;
         display: flex;
@@ -17208,6 +17311,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         overflow: hidden;
         cursor: pointer;
         color: ${textColor};
+        container-type: inline-size;
       }
 
       .${prefix}__text {
@@ -17254,17 +17358,17 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         font-weight: 400;
       }
 
-      .${prefix}__content:hover .${prefix}__cta-button {
+      .${prefix}:hover .${prefix}__cta-button {
         background-color: ${ctaBorderColor.length === 7 ? `${ctaBorderColor}15` : `${ctaBorderColor}`};
       }
 
-      @media (min-width: 640px) {
-        .${prefix}__content {
+      @container (min-width: 640px) {
+        .${prefix} {
           background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
         }
       }
 
-      @media (min-width: 768px) {
+      @container (min-width: 768px) {
         .${prefix}__text {
           padding: 25px;
         }
@@ -17283,7 +17387,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         }
       }
 
-      @media (min-width: 1024px) {
+      @container (min-width: 1024px) {
         .${prefix}__text {
           padding: 30px;
         }
@@ -17301,7 +17405,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         }
       }
 
-      @media (min-width: 1280px) {
+      @container (min-width: 1280px) {
         .${prefix}__cta-button {
           font-size: 14px;
         }
@@ -17316,7 +17420,7 @@ function rbLargeCategoryImageToutTemplate(spot, config) {
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
     ${STYLES$3(spot, config)}
-    <div class="${prefix}__content">
+    <div class="${prefix}">
       <div class="${prefix}__text">
         ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
         ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
@@ -17330,12 +17434,7 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
     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;
-    }
-
-    .${prefix}__content {
+    .${prefix} {
       width: 100%;
       height: 100%;
       display: flex;
@@ -17348,6 +17447,7 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
+      container-type: inline-size;
     }
 
     .${prefix}__text {
@@ -17365,25 +17465,25 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       margin: 0;
     }
 
-    @media (min-width: 640px) {
-      .${prefix}__content {
+    @container (min-width: 640px) {
+      .${prefix} {
         background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
       }
     }
 
-    @media (min-width: 768px) {
+    @container (min-width: 768px) {
       .${prefix}__header {
         font-size: 22px;
       }
     }
 
-    @media (min-width: 1024px) {
+    @container (min-width: 1024px) {
       .${prefix}__header {
         font-size: 24px;
       }
     }
 
-    @media (min-width: 1280px) {
+    @container (min-width: 1280px) {
       .${prefix}__header {
         font-size: 28px;
       }
@@ -17397,7 +17497,7 @@ function rbNavigationBannerTemplate(spot, config) {
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${STYLES$2(spot, config)}
-    <div class="${prefix}__content">
+    <div class="${prefix}">
       <div class="${prefix}__text">
         ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
       </div>
@@ -17409,12 +17509,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
     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;
-      }
-
-      .${prefix}__content {
+      .${prefix} {
         width: 100%;
         height: 100%;
         display: flex;
@@ -17427,6 +17522,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         border-radius: 5px;
         overflow: hidden;
         cursor: pointer;
+        container-type: inline-size;
       }
 
       .${prefix}__text {
@@ -17441,12 +17537,11 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         font-family: "Source Sans 3", system-ui;
         font-style: normal;
         font-weight: 400;
-        line-height: normal;
         margin: 0;
       }
 
-      @media (min-width: 640px) {
-        .${prefix}__content {
+      @container (min-width: 640px) {
+        .${prefix} {
           background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
         }
       }
@@ -17459,7 +17554,7 @@ function rbSmallCategoryImageToutTemplate(spot, config) {
     ${GFONT_PRECONNECT}
     ${GFONT_CORMORANT}
     ${STYLES$1(spot, config)}
-    <div class="${prefix}__content">
+    <div class="${prefix}">
       <div class="${prefix}__text">
         ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
       </div>
@@ -17469,12 +17564,7 @@ function rbSmallCategoryImageToutTemplate(spot, config) {
 
 const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
   <style>
-    :host {
-      min-width: 165px;
-      min-height: 250px;
-    }
-
-    .${prefix}__content {
+    .${prefix} {
       width: 100%;
       height: 100%;
       background-color: ${backgroundColor};
@@ -17482,6 +17572,7 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       display: flex;
       flex-direction: column;
       border-radius: 5px;
+      container-type: inline-size;
     }
 
     .${prefix}__image {
@@ -17513,11 +17604,10 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       font-family: "Source Sans 3", system-ui;
       font-style: normal;
       font-weight: 400;
-      line-height: normal;
       margin: 0;
     }
 
-    @media (min-width: 640px) {
+    @container (min-width: 640px) {
       .${prefix}__image {
         background-image: url("${primaryImage}");
       }
@@ -17530,7 +17620,7 @@ function rbSmallDiscoverToutTemplate(spot, config) {
     ${GFONT_PRECONNECT}
     ${GFONT_CORMORANT}
     ${STYLES(spot, config)}
-    <div class="${prefix}__content">
+    <div class="${prefix}">
       <div class="${prefix}__image"></div>
       <div class="${prefix}__text">
         ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
@@ -17540,11 +17630,12 @@ function rbSmallDiscoverToutTemplate(spot, config) {
 }
 
 /**
- * Creates the spot html string based on the provided spot data.
+ * Returns the HTML element for the given spot.
  *
- * @param {ISpot} spot - The spot data.
+ * @param {ISpot} spot - The spot object.
+ * @param {ISpotTemplateConfig} config - The spot template configuration.
  *
- * @return {string} - The spot html string.
+ * @return {HTMLElement | null} - The HTML element for the given spot or null if the spot template is not found.
  */
 const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     const templates = {
@@ -17617,6 +17708,197 @@ const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     return spotHtmlStringToElement(spotHtmlString);
 };
 
+/**
+ * PubSub class
+ * Manages event subscriptions and publications
+ * @template IEventMap A record type defining the structure of events and their data
+ */
+class PubSub {
+    constructor() {
+        /**
+         * Object to store subscribers for each event type
+         */
+        this.subscribers = {};
+    }
+    /**
+     * Subscribe to an event
+     * @param eventType - The type of event to subscribe to
+     * @param callback - The function to be called when the event is published
+     * @returns A function to unsubscribe from the event
+     *
+     * @Example:
+     * const unsubscribe = pubSub.subscribe('userLogin', (data) => {
+     *   console.log(`User ${data.username} logged in`);
+     * });
+     */
+    subscribe(eventType, callback) {
+        if (!this.subscribers[eventType]) {
+            this.subscribers[eventType] = [];
+        }
+        this.subscribers[eventType].push(callback);
+        // Return an unsubscribe function
+        return () => {
+            this.subscribers[eventType] = this.subscribers[eventType].filter((cb) => cb !== callback);
+        };
+    }
+    /**
+     * Publish an event
+     * @param eventType - The type of event to publish
+     * @param data - The data to be passed to the event subscribers
+     *
+     * @Example:
+     * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
+     */
+    publish(eventType, data) {
+        if (!this.subscribers[eventType]) {
+            return;
+        }
+        this.subscribers[eventType].forEach((callback) => callback(data));
+    }
+}
+/**
+ * Usage Example:
+ *
+ * interface IEventMap {
+ *   userLogin: { username: string; timestamp: number };
+ *   pageView: { url: string; timestamp: number };
+ * }
+ *
+ * const pubSub = new PubSub<IEventMap>();
+ *
+ * // Subscribe to events
+ * const unsubscribeLogin = pubSub.subscribe('userLogin', (data) => {
+ *   console.log(`User ${data.username} logged in at ${new Date(data.timestamp)}`);
+ * });
+ *
+ * pubSub.subscribe('pageView', (data) => {
+ *   console.log(`Page ${data.url} viewed at ${new Date(data.timestamp)}`);
+ * });
+ *
+ * // Publish events
+ * pubSub.publish('userLogin', { username: 'john_doe', timestamp: Date.now() });
+ * pubSub.publish('pageView', { url: '/home', timestamp: Date.now() });
+ *
+ * // Unsubscribe from an event
+ * unsubscribeLogin();
+ */
+
+class EventService {
+    constructor() {
+        this.pubSub = new PubSub();
+        this.activeSpots = new Map();
+        this.intersectionObserver = new IntersectionObserverService();
+    }
+    static getInstance() {
+        if (!EventService.instance) {
+            EventService.instance = new EventService();
+        }
+        return EventService.instance;
+    }
+    registerSpot({ placementId, element, spot }) {
+        this.activeSpots.set(spot.id, {
+            placementId,
+            element,
+            impressionTracked: false,
+        });
+        // Handle intersection observer
+        this.handleIntersectionObserver(placementId, spot, element);
+        // Attach click event listener
+        element.addEventListener('click', async () => {
+            var _a, _b;
+            this.pubSub.publish(exports.RMN_SPOT_EVENT.CLICK, {
+                placementId,
+                spotId: spot.id,
+                element,
+            });
+            // Fire click event
+            await this.fireEvent({
+                event: exports.RMN_SPOT_EVENT.CLICK,
+                eventUrl: (_b = (_a = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.CLICK)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+            });
+        });
+        // Publish spot created event
+        this.pubSub.publish(exports.RMN_SPOT_EVENT.MOUNTED, {
+            placementId,
+            spotId: spot.id,
+            spotType: spot.spot,
+            spotVariant: spot.variant,
+            element,
+        });
+    }
+    unregisterSpot(spotId) {
+        const spotData = this.activeSpots.get(spotId);
+        if (spotData) {
+            this.intersectionObserver.unobserve(spotData.element);
+            // this.resizeObserver?.disconnect();
+            this.pubSub.publish(exports.RMN_SPOT_EVENT.UNMOUNTED, {
+                placementId: spotData.placementId,
+                spotId,
+            });
+            this.activeSpots.delete(spotId);
+        }
+    }
+    handleIntersectionObserver(placementId, spot, element) {
+        const spotIsVisibleCb = async () => {
+            var _a, _b;
+            this.pubSub.publish(exports.RMN_SPOT_EVENT.IMPRESSION, {
+                placementId,
+                spotId: spot.id,
+                element,
+            });
+            this.intersectionObserver.unobserve(element);
+            this.activeSpots.set(spot.id, {
+                placementId,
+                element,
+                impressionTracked: true,
+            });
+            // Fire impression event
+            await this.fireEvent({
+                event: exports.RMN_SPOT_EVENT.IMPRESSION,
+                eventUrl: (_b = (_a = spot.events.find((event) => event.event === exports.RMN_SPOT_EVENT.IMPRESSION)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+            });
+        };
+        this.intersectionObserver.observe(element, spotIsVisibleCb);
+    }
+    subscribe(eventType, callback) {
+        return this.pubSub.subscribe(eventType, callback);
+    }
+    publish(eventType, data) {
+        this.pubSub.publish(eventType, data);
+    }
+    /**
+     * Fires an event using the navigator.sendBeacon method and redirects the user if the event is a click event.
+     *
+     * @param {IFireEventParams} params - The parameters for firing the event.
+     * @param {RMN_SPOT_EVENT} params.event - The event type.
+     * @param {string} params.eventUrl - The URL to which the event is sent.
+     * @returns {Promise<void>} - A promise that resolves when the event is fired.
+     */
+    async fireEvent({ event, eventUrl }) {
+        const didFireEvent = navigator.sendBeacon(eventUrl);
+        if (didFireEvent && event === exports.RMN_SPOT_EVENT.CLICK) {
+            window.location.href = this.getRedirectUrlFromPayload(eventUrl);
+        }
+    }
+    /**
+     * Extracts and decodes a URL from a base64-encoded query parameter.
+     *
+     * @param {string} url - The URL containing the base64-encoded query parameter.
+     * @returns {string} - The decoded URL or an empty string if decoding fails.
+     */
+    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 '';
+        }
+    }
+}
+
 const SELECTION_API_PATH = '/spots/selection';
 
 class SelectionService extends BaseApi {
@@ -17651,6 +17933,7 @@ class LiquidCommerceRmnClient {
     constructor(auth) {
         this.selectionService = SelectionService.getInstance(auth);
         this.elementService = ElementService.getInstance();
+        this.eventService = EventService.getInstance();
     }
     /**
      * Makes a selection request on our server based on the provided data.
@@ -17701,6 +17984,14 @@ class LiquidCommerceRmnClient {
             }
         }
     }
+    /**
+     * Returns the event manager instance.
+     *
+     * @return {EventService} - The event manager instance.
+     */
+    eventManager() {
+        return this.eventService;
+    }
     /**
      * Makes a selection request on our server based on the provided data.
      *
@@ -17741,6 +18032,11 @@ class LiquidCommerceRmnClient {
                 console.warn(`RmnSdk: Failed to inject carousel spot element. Could not create element for type "${spot.spot}".`);
                 return;
             }
+            this.eventSpotElement({
+                spot,
+                placementId: placement.id,
+                element: content,
+            });
             carouselSlides.push(content);
         }
         const { maxWidth, maxHeight } = spots.reduce((max, spot) => ({
@@ -17750,6 +18046,7 @@ class LiquidCommerceRmnClient {
         const carouselElement = this.elementService.createCarouselElement({
             slides: carouselSlides,
             config: {
+                fluid: config === null || config === void 0 ? void 0 : config.fluid,
                 width: maxWidth,
                 height: maxHeight,
                 minScale: (_a = config === null || config === void 0 ? void 0 : config.minScale) !== null && _a !== void 0 ? _a : 0.25, // Scale down to 25% of the original size
@@ -17783,6 +18080,8 @@ class LiquidCommerceRmnClient {
         const spotElement = this.elementService.createSpotElement({
             content,
             config: {
+                fluid: config === null || config === void 0 ? void 0 : config.fluid,
+                spot: spot.spot,
                 width: spot.width,
                 height: spot.height,
                 minScale: (_a = config === null || config === void 0 ? void 0 : config.minScale) !== null && _a !== void 0 ? _a : 0.25, // Scale down to 25% of the original size
@@ -17792,8 +18091,20 @@ class LiquidCommerceRmnClient {
             console.warn(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`);
             return;
         }
+        this.eventSpotElement({
+            spot,
+            placementId: injectItem.placementId,
+            element: spotElement,
+        });
         placement.replaceChildren(spotElement);
     }
+    eventSpotElement({ spot, placementId, element, }) {
+        this.eventService.registerSpot({
+            placementId,
+            element,
+            spot,
+        });
+    }
     /**
      * Prevents duplicate placement ids in the inject data.
      *