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

package/dist/index.cjs

@@ -58,7 +58,6 @@ exports.RMN_SPOT_EVENT = void 0;
 (function (RMN_SPOT_EVENT) {
     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 +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);
@@ -15275,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;
@@ -15462,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() {
@@ -15500,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: {
@@ -15512,9 +15542,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 +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: {
@@ -15740,13 +15790,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 +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
          * #########################################################
@@ -15840,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,
         };
@@ -15861,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,
         };
@@ -16745,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%;
@@ -16759,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}");
     }
   }
@@ -16772,7 +16794,7 @@ function rbCollectionBannerWithoutTextBlockTemplate(spot, config) {
     const { prefix = '' } = config;
     return `
     ${STYLES$7(spot, config)}
-    <div class="${prefix}__content"></div>
+    <div class="${prefix}"></div>
   `;
 }
 
@@ -16781,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;
@@ -16805,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 {
@@ -16849,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%;
@@ -16870,7 +16883,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                     height: 100%;
                     width: 33.33333%;
                 }
-                    
+
                 .${prefix}__secondary-image {
                     width: 100%;
                     height: 50%;
@@ -16879,7 +16892,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 .${prefix}__header {
                     font-size: 22px;
                 }
-                    
+
                 .${prefix}__description {
                     font-size: 12px;
                 }
@@ -16889,7 +16902,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 }
             }
 
-            @media (min-width: 1024px) {
+            @container (min-width: 1024px) {
                 .${prefix}__header {
                     font-size: 24px;
                 }
@@ -16903,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;
                 }
@@ -16927,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>
 `;
 }
@@ -16941,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;
@@ -16954,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;
@@ -17041,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}");
         }
@@ -17051,7 +17060,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         }
     }
 
-    @media (min-width: 768px) {
+    @container (min-width: 768px) {
         .${prefix}__content {
             flex-direction: row;
         }
@@ -17076,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>
 `;
@@ -17105,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 {
@@ -17166,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;
@@ -17187,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>
 `;
@@ -17217,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>
   `;
 }
@@ -17233,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;
@@ -17252,6 +17311,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         overflow: hidden;
         cursor: pointer;
         color: ${textColor};
+        container-type: inline-size;
       }
 
       .${prefix}__text {
@@ -17298,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;
         }
@@ -17327,7 +17387,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         }
       }
 
-      @media (min-width: 1024px) {
+      @container (min-width: 1024px) {
         .${prefix}__text {
           padding: 30px;
         }
@@ -17345,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;
         }
@@ -17360,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>` : ''}
@@ -17374,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;
@@ -17392,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 {
@@ -17409,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;
       }
@@ -17441,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>
@@ -17453,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;
@@ -17471,6 +17522,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         border-radius: 5px;
         overflow: hidden;
         cursor: pointer;
+        container-type: inline-size;
       }
 
       .${prefix}__text {
@@ -17485,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}");
         }
       }
@@ -17503,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>
@@ -17513,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};
@@ -17526,6 +17572,7 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       display: flex;
       flex-direction: column;
       border-radius: 5px;
+      container-type: inline-size;
     }
 
     .${prefix}__image {
@@ -17557,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}");
       }
@@ -17574,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>` : ''}
@@ -17755,8 +17801,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 +17838,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;
@@ -18031,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
@@ -18064,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