@liquidcommercedev/rmn-sdk 1.4.6-beta.5 → 1.4.6-beta.7

package/dist/index.cjs

@@ -56,9 +56,9 @@ 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["INJECT_SPOTS"] = "INJECT_SPOTS";
     RMN_SPOT_EVENT["MOUNTED"] = "MOUNTED";
     RMN_SPOT_EVENT["UNMOUNTED"] = "UNMOUNTED";
-    RMN_SPOT_EVENT["RESIZED"] = "RESIZED";
     RMN_SPOT_EVENT["IMPRESSION"] = "IMPRESSION";
     RMN_SPOT_EVENT["CLICK"] = "CLICK";
     RMN_SPOT_EVENT["PURCHASE"] = "PURCHASE";
@@ -15246,9 +15246,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);
@@ -15275,6 +15275,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;
@@ -15462,6 +15492,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() {
@@ -15500,7 +15531,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: {
@@ -15512,9 +15543,29 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 this.addEventListener('spotSizeChanged', this.handleCarouselSizeChanged.bind(this));
             }
         }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        handleCarouselSizeChanged(_event) {
-            // console.info('Carousel Size Changed', event);
+        handleCarouselSizeChanged(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;
@@ -15723,7 +15774,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: {
@@ -15740,13 +15791,16 @@ 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) => {
@@ -15761,35 +15815,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
          * #########################################################
@@ -15840,6 +15865,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,
         };
@@ -15861,6 +15887,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,
         };
@@ -16745,12 +16772,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%;
@@ -16759,10 +16781,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}");
     }
   }
@@ -16772,7 +16795,7 @@ function rbCollectionBannerWithoutTextBlockTemplate(spot, config) {
     const { prefix = '' } = config;
     return `
     ${STYLES$7(spot, config)}
-    <div class="${prefix}__content"></div>
+    <div class="${prefix}"></div>
   `;
 }
 
@@ -16781,16 +16804,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;
@@ -16805,6 +16818,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 box-sizing: border-box;
                 color: ${textColor};
                 cursor: pointer;
+                container-type: inline-size;
             }
 
             .${prefix}__text {
@@ -16849,17 +16863,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%;
@@ -16870,7 +16884,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                     height: 100%;
                     width: 33.33333%;
                 }
-                    
+
                 .${prefix}__secondary-image {
                     width: 100%;
                     height: 50%;
@@ -16879,7 +16893,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 .${prefix}__header {
                     font-size: 22px;
                 }
-                    
+
                 .${prefix}__description {
                     font-size: 12px;
                 }
@@ -16889,7 +16903,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 }
             }
 
-            @media (min-width: 1024px) {
+            @container (min-width: 1024px) {
                 .${prefix}__header {
                     font-size: 24px;
                 }
@@ -16903,11 +16917,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;
                 }
@@ -16927,13 +16941,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>
 `;
 }
@@ -16941,8 +16953,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;
@@ -16954,7 +16964,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;
@@ -17041,7 +17051,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}");
         }
@@ -17051,7 +17061,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         }
     }
 
-    @media (min-width: 768px) {
+    @container (min-width: 768px) {
         .${prefix}__content {
             flex-direction: row;
         }
@@ -17076,6 +17086,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>
 `;
@@ -17105,23 +17148,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 {
@@ -17166,7 +17201,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         font-style: normal;
         font-weight: 400;
     }
-        
+
     .${prefix}__cta-button {
         color: ${ctaTextColor};
         background-color: transparent;
@@ -17187,25 +17222,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>
 `;
@@ -17217,14 +17284,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>
   `;
 }
@@ -17233,12 +17298,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;
@@ -17252,6 +17312,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         overflow: hidden;
         cursor: pointer;
         color: ${textColor};
+        container-type: inline-size;
       }
 
       .${prefix}__text {
@@ -17298,17 +17359,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;
         }
@@ -17327,7 +17388,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         }
       }
 
-      @media (min-width: 1024px) {
+      @container (min-width: 1024px) {
         .${prefix}__text {
           padding: 30px;
         }
@@ -17345,7 +17406,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         }
       }
 
-      @media (min-width: 1280px) {
+      @container (min-width: 1280px) {
         .${prefix}__cta-button {
           font-size: 14px;
         }
@@ -17360,7 +17421,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>` : ''}
@@ -17374,12 +17435,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;
@@ -17392,6 +17448,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 {
@@ -17409,25 +17466,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;
       }
@@ -17441,7 +17498,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>
@@ -17453,12 +17510,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;
@@ -17471,6 +17523,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         border-radius: 5px;
         overflow: hidden;
         cursor: pointer;
+        container-type: inline-size;
       }
 
       .${prefix}__text {
@@ -17485,12 +17538,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}");
         }
       }
@@ -17503,7 +17555,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>
@@ -17513,12 +17565,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};
@@ -17526,6 +17573,7 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       display: flex;
       flex-direction: column;
       border-radius: 5px;
+      container-type: inline-size;
     }
 
     .${prefix}__image {
@@ -17557,11 +17605,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}");
       }
@@ -17574,7 +17621,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>` : ''}
@@ -17755,8 +17802,6 @@ class EventService {
             element,
             impressionTracked: false,
         });
-        // Handle resize observer
-        // this.handleResizeObserver(placementId, spot, element);
         // Handle intersection observer
         this.handleIntersectionObserver(placementId, spot, element);
         // Attach click event listener
@@ -17794,35 +17839,6 @@ class EventService {
             this.activeSpots.delete(spotId);
         }
     }
-    // private handleResizeObserver(placementId: string, spot: ISpot, element: HTMLElement): void {
-    //   // this.resizeObserver = new ResizeObserverService({
-    //   //   element,
-    //   //   maxSize: {
-    //   //     width: spot.width,
-    //   //     height: spot.height,
-    //   //   },
-    //   //   minScale: 0.25,
-    //   // });
-    //
-    //   const sizeChangedCb = (event: ISizeChangedEvent) => {
-    //     // Publish spot resized event
-    //     this.pubSub.publish(RMN_SPOT_EVENT.RESIZED, {
-    //       placementId,
-    //       spotId: spot.id,
-    //       scale: event.detail.scale,
-    //       previousDimensions: {
-    //         width: event.detail.width,
-    //         height: event.detail.height,
-    //       },
-    //       currentDimensions: {
-    //         width: event.detail.newWidth,
-    //         height: event.detail.newHeight,
-    //       },
-    //     });
-    //   };
-    //
-    //   element.addEventListener('spotSizeChanged', sizeChangedCb as EventListener);
-    // }
     handleIntersectionObserver(placementId, spot, element) {
         const spotIsVisibleCb = async () => {
             var _a, _b;
@@ -17898,19 +17914,19 @@ class SelectionService extends BaseApi {
      *
      * @param {ISpotSelectionParams} data - Spots selection parameters.
      *
-     * @return {Promise<ISpots>} - The spots response object.
+     * @return {Promise<ISpots | { error: string }>} - The spots response object.
      */
     async spotSelection(data) {
         const { isOk, val, isErr } = await this.post(SELECTION_API_PATH, data, {});
         if (isErr) {
-            throw new Error(`There was an error during spot selection: (${isErr === null || isErr === void 0 ? void 0 : isErr.errorMessage})`);
+            return { error: `There was an error during spot selection: (${isErr === null || isErr === void 0 ? void 0 : isErr.errorMessage})` };
         }
         if (isOk && val && val.data && (val === null || val === void 0 ? void 0 : val.refresh.token)) {
             this.authInfo.authenticated = true;
             this.authInfo.token = val.refresh.token;
             return val.data.spots;
         }
-        throw new Error('Spot selection response was not successful');
+        return { error: 'Spot selection response was not successful' };
     }
 }
 
@@ -17927,7 +17943,7 @@ class LiquidCommerceRmnClient {
      *
      * @param {ISpotSelectionParams} params - Spots selection parameters.
      *
-     * @return {Promise<ISpots>} - The spots response object.
+     * @return {Promise<ISpots | {error : string}>} - The spots response object.
      */
     async spotSelection(params) {
         return this.selectionService.spotSelection(params);
@@ -17941,31 +17957,51 @@ class LiquidCommerceRmnClient {
      */
     async injectSpotElement(params) {
         var _a;
-        const { inject, config } = params;
+        const config = params.config;
+        let inject = params.inject;
+        this.eventService.publish(exports.RMN_SPOT_EVENT.INJECT_SPOTS, {
+            isLoading: true,
+            isCompleted: false,
+            error: null,
+        });
         if (!inject.length) {
-            console.warn('RmnSdk: Failed to inject spot element. Please provide at least one spot element to inject.');
+            this.eventError('RmnSdk: Failed to inject spot element. Please provide at least one spot element to inject.');
+            return;
+        }
+        const hasDuplicatePlacementIds = this.preventDuplicateSpotPlacementIds(inject);
+        if (!hasDuplicatePlacementIds) {
+            return;
+        }
+        inject = this.preventNonExistentSpotTypes(inject);
+        const response = await this.spotSelectionRequest({ ...params, inject });
+        if (typeof response === 'object' && 'error' in response) {
+            this.eventError(response.error);
             return;
         }
-        this.preventDuplicateSpotPlacementIds(inject);
-        const response = await this.spotSelectionRequest(params);
         for (const item of inject) {
             const itemConfig = (_a = item.config) !== null && _a !== void 0 ? _a : config;
             const spots = response[item.placementId];
             if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
-                console.warn(`RmnSdk: Failed to inject spot element. No spots found for type "${item.spotType}".`);
+                this.eventError(`RmnSdk: Failed to inject spot element. No spots found for type "${item.spotType}".`, { placementId: item.placementId, 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}".`);
+                this.eventError(`RmnSdk: Failed to inject spot element. Placement not found for id "#${placementId}".`, { placementId, type: item.spotType });
                 continue;
             }
             if (spots.length === 1) {
-                this.injectOneSpotElement(item, placement, spots[0], itemConfig);
+                const isInjected = this.injectOneSpotElement(item, placement, spots[0], itemConfig);
+                if (!isInjected) {
+                    continue;
+                }
             }
             if (spots.length > 1) {
-                this.injectCarouselSpotElement(placement, spots, itemConfig);
+                const isInjected = this.injectCarouselSpotElement(placement, spots, itemConfig);
+                if (!isInjected) {
+                    continue;
+                }
             }
         }
     }
@@ -17982,7 +18018,7 @@ class LiquidCommerceRmnClient {
      *
      * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
      *
-     * @return {Promise<ISpots>} - The spots response object.
+     * @return {Promise<ISpots | {error: string}>} - The spots response object.
      */
     async spotSelectionRequest(params) {
         const { inject, filter, config } = params;
@@ -18014,8 +18050,8 @@ class LiquidCommerceRmnClient {
             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;
+                this.eventError(`RmnSdk: Failed to inject carousel spot element. Could not create element for type "${spot.spot}".`, { placementId: placement.id, type: spot.spot });
+                continue;
             }
             this.eventSpotElement({
                 spot,
@@ -18031,6 +18067,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
@@ -18038,10 +18075,11 @@ class LiquidCommerceRmnClient {
             },
         });
         if (!carouselElement) {
-            console.warn(`RmnSdk: Failed to inject spot carousel element. Could not create spot carousel element.`);
-            return;
+            this.eventError(`RmnSdk: Failed to inject spot carousel element. Could not create spot carousel element.`, { placementId: placement.id });
+            return false;
         }
         placement.replaceChildren(carouselElement);
+        return true;
     }
     /**
      * Injects a single spot element into the provided placement.
@@ -18058,20 +18096,22 @@ class LiquidCommerceRmnClient {
         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;
+            this.eventError(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`, { placementId: injectItem.placementId, type: injectItem.spotType });
+            return false;
         }
         const spotElement = this.elementService.createSpotElement({
             content,
             config: {
+                fluid: config === null || config === void 0 ? void 0 : config.fluid,
+                spot: spot.spot,
                 width: spot.width,
                 height: spot.height,
                 minScale: (_a = config === null || config === void 0 ? void 0 : config.minScale) !== null && _a !== void 0 ? _a : 0.25, // Scale down to 25% of the original size
             },
         });
         if (!spotElement) {
-            console.warn(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`);
-            return;
+            this.eventError(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`, { placementId: injectItem.placementId, type: injectItem.spotType });
+            return false;
         }
         this.eventSpotElement({
             spot,
@@ -18079,6 +18119,7 @@ class LiquidCommerceRmnClient {
             element: spotElement,
         });
         placement.replaceChildren(spotElement);
+        return true;
     }
     eventSpotElement({ spot, placementId, element, }) {
         this.eventService.registerSpot({
@@ -18100,10 +18141,33 @@ class LiquidCommerceRmnClient {
         const placementIds = new Set();
         for (const item of inject) {
             if (placementIds.has(item.placementId)) {
-                throw new Error(`RmnSdk: Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`);
+                this.eventError(`RmnSdk: Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`, { placementId: item.placementId, type: item.spotType });
+                return false;
             }
             placementIds.add(item.placementId);
         }
+        return true;
+    }
+    preventNonExistentSpotTypes(inject) {
+        const newInject = [];
+        for (const item of inject) {
+            if (!Object.values(exports.RMN_SPOT_TYPE).includes(item.spotType)) {
+                this.eventError(`RmnSdk: Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`, { placementId: item.placementId, type: item.spotType });
+                continue;
+            }
+            newInject.push(item);
+        }
+        return newInject;
+    }
+    eventError(error, spot) {
+        this.eventService.publish(exports.RMN_SPOT_EVENT.INJECT_SPOTS, {
+            isLoading: false,
+            isCompleted: true,
+            error: {
+                message: error,
+                spot,
+            },
+        });
     }
 }
 /**