@liquidcommercedev/rmn-sdk 1.5.0-beta.40 → 1.5.0-beta.42

package/dist/index.esm.js

@@ -86,6 +86,9 @@ var ENUM_TEXT_BLOCK_POSITION;
 (function (ENUM_TEXT_BLOCK_POSITION) {
     ENUM_TEXT_BLOCK_POSITION["LEFT"] = "left";
     ENUM_TEXT_BLOCK_POSITION["RIGHT"] = "right";
+    ENUM_TEXT_BLOCK_POSITION["TOP"] = "top";
+    ENUM_TEXT_BLOCK_POSITION["BOTTOM"] = "bottom";
+    ENUM_TEXT_BLOCK_POSITION["MIDDLE"] = "middle";
     ENUM_TEXT_BLOCK_POSITION["TOP_LEFT"] = "top-left";
     ENUM_TEXT_BLOCK_POSITION["TOP_RIGHT"] = "top-right";
     ENUM_TEXT_BLOCK_POSITION["BOTTOM_LEFT"] = "bottom-left";
@@ -1946,8 +1949,8 @@ function bidirectionalIndexOf (buffer, val, byteOffset, encoding, dir) {
     byteOffset = 0;
   } else if (byteOffset > 0x7fffffff) {
     byteOffset = 0x7fffffff;
-  } else if (byteOffset < -0x80000000) {
-    byteOffset = -0x80000000;
+  } else if (byteOffset < -2147483648) {
+    byteOffset = -2147483648;
   }
   byteOffset = +byteOffset;  // Coerce to Number.
   if (isNaN(byteOffset)) {
@@ -2706,7 +2709,7 @@ Buffer.prototype.writeIntBE = function writeIntBE (value, offset, byteLength, no
 Buffer.prototype.writeInt8 = function writeInt8 (value, offset, noAssert) {
   value = +value;
   offset = offset | 0;
-  if (!noAssert) checkInt(this, value, offset, 1, 0x7f, -0x80);
+  if (!noAssert) checkInt(this, value, offset, 1, 0x7f, -128);
   if (!Buffer.TYPED_ARRAY_SUPPORT) value = Math.floor(value);
   if (value < 0) value = 0xff + value + 1;
   this[offset] = (value & 0xff);
@@ -2716,7 +2719,7 @@ Buffer.prototype.writeInt8 = function writeInt8 (value, offset, noAssert) {
 Buffer.prototype.writeInt16LE = function writeInt16LE (value, offset, noAssert) {
   value = +value;
   offset = offset | 0;
-  if (!noAssert) checkInt(this, value, offset, 2, 0x7fff, -0x8000);
+  if (!noAssert) checkInt(this, value, offset, 2, 0x7fff, -32768);
   if (Buffer.TYPED_ARRAY_SUPPORT) {
     this[offset] = (value & 0xff);
     this[offset + 1] = (value >>> 8);
@@ -2729,7 +2732,7 @@ Buffer.prototype.writeInt16LE = function writeInt16LE (value, offset, noAssert)
 Buffer.prototype.writeInt16BE = function writeInt16BE (value, offset, noAssert) {
   value = +value;
   offset = offset | 0;
-  if (!noAssert) checkInt(this, value, offset, 2, 0x7fff, -0x8000);
+  if (!noAssert) checkInt(this, value, offset, 2, 0x7fff, -32768);
   if (Buffer.TYPED_ARRAY_SUPPORT) {
     this[offset] = (value >>> 8);
     this[offset + 1] = (value & 0xff);
@@ -2742,7 +2745,7 @@ Buffer.prototype.writeInt16BE = function writeInt16BE (value, offset, noAssert)
 Buffer.prototype.writeInt32LE = function writeInt32LE (value, offset, noAssert) {
   value = +value;
   offset = offset | 0;
-  if (!noAssert) checkInt(this, value, offset, 4, 0x7fffffff, -0x80000000);
+  if (!noAssert) checkInt(this, value, offset, 4, 0x7fffffff, -2147483648);
   if (Buffer.TYPED_ARRAY_SUPPORT) {
     this[offset] = (value & 0xff);
     this[offset + 1] = (value >>> 8);
@@ -2757,7 +2760,7 @@ Buffer.prototype.writeInt32LE = function writeInt32LE (value, offset, noAssert)
 Buffer.prototype.writeInt32BE = function writeInt32BE (value, offset, noAssert) {
   value = +value;
   offset = offset | 0;
-  if (!noAssert) checkInt(this, value, offset, 4, 0x7fffffff, -0x80000000);
+  if (!noAssert) checkInt(this, value, offset, 4, 0x7fffffff, -2147483648);
   if (value < 0) value = 0xffffffff + value + 1;
   if (Buffer.TYPED_ARRAY_SUPPORT) {
     this[offset] = (value >>> 24);
@@ -6087,7 +6090,7 @@ function matchesKeywordPattern(words, required, optional) {
         return false;
     }
     // If no optional keywords are specified, return true
-    if (!(optional === null || optional === void 0 ? void 0 : optional.length)) {
+    if (!(optional === null || optional === undefined ? undefined : optional.length)) {
         return true;
     }
     // If optional keywords exist, check if at least one matches as a whole word
@@ -6100,7 +6103,7 @@ function matchesKeywordPattern(words, required, optional) {
  * @returns {RMN_SPOT_EVENT | null} - The corresponding RMN_SPOT_EVENT or null if no match
  */
 function getEventTypeFromRawEvent(event) {
-    if (!(event === null || event === void 0 ? void 0 : event.trim())) {
+    if (!(event === null || event === undefined ? undefined : event.trim())) {
         return null;
     }
     const words = normalizeEventName(event);
@@ -7587,7 +7590,7 @@ class ObjectHelper {
         else if (typeof value === 'object') {
             return this.mergeObjectValues(targetValue, value);
         }
-        return (_a = value !== null && value !== void 0 ? value : targetValue) !== null && _a !== void 0 ? _a : undefined;
+        return (_a = value !== null && value !== undefined ? value : targetValue) !== null && _a !== undefined ? _a : undefined;
     }
     /**
      * Merges the values of an array or object with a given array of objects and returns the merged result as an object.
@@ -7668,7 +7671,7 @@ function xhrFallbackEventFire(url) {
 }
 function beaconEventFire(url) {
     var _a;
-    return (_a = navigator === null || navigator === void 0 ? void 0 : navigator.sendBeacon) === null || _a === void 0 ? void 0 : _a.call(navigator, url);
+    return (_a = navigator === null || navigator === undefined ? undefined : navigator.sendBeacon) === null || _a === undefined ? undefined : _a.call(navigator, url);
 }
 /**
  * Helper function to decode base64 string and parse JSON
@@ -7789,7 +7792,7 @@ function calculateScaleFactor(elementScale) {
  * @returns {string} - The query string.
  */
 function objectToQueryParams(obj) {
-    return Object.entries(obj !== null && obj !== void 0 ? obj : {})
+    return Object.entries(obj !== null && obj !== undefined ? obj : {})
         .map(([key, value]) => {
         if (value == null) {
             return '';
@@ -12041,7 +12044,7 @@ function requireCipherCore () {
 			    C_lib.StreamCipher = Cipher.extend({
 			        _doFinalize: function () {
 			            // Process partial blocks
-			            var finalProcessedBlocks = this._process(!!'flush');
+			            var finalProcessedBlocks = this._process(true);
 
 			            return finalProcessedBlocks;
 			        },
@@ -12322,10 +12325,10 @@ function requireCipherCore () {
 			                padding.pad(this._data, this.blockSize);
 
 			                // Process final blocks
-			                finalProcessedBlocks = this._process(!!'flush');
+			                finalProcessedBlocks = this._process(true);
 			            } else /* if (this._xformMode == this._DEC_XFORM_MODE) */ {
 			                // Process final blocks
-			                finalProcessedBlocks = this._process(!!'flush');
+			                finalProcessedBlocks = this._process(true);
 
 			                // Unpad data
 			                padding.unpad(finalProcessedBlocks);
@@ -16683,9 +16686,9 @@ class ApiError {
     constructor(error) {
         var _a, _b, _c, _d, _e, _f, _g;
         const e = error;
-        this.cause = (_d = (_b = (_a = e === null || e === void 0 ? void 0 : e.response) === null || _a === void 0 ? void 0 : _a.data.statusCode) !== null && _b !== void 0 ? _b : (_c = e === null || e === void 0 ? void 0 : e.response) === null || _c === void 0 ? void 0 : _c.status) !== null && _d !== void 0 ? _d : 0;
+        this.cause = (_d = (_b = (_a = e === null || e === undefined ? undefined : e.response) === null || _a === undefined ? undefined : _a.data.statusCode) !== null && _b !== undefined ? _b : (_c = e === null || e === undefined ? undefined : e.response) === null || _c === undefined ? undefined : _c.status) !== null && _d !== undefined ? _d : 0;
         this.errorMessage =
-            (_g = (_f = (_e = e === null || e === void 0 ? void 0 : e.response) === null || _e === void 0 ? void 0 : _e.data.message) !== null && _f !== void 0 ? _f : e === null || e === void 0 ? void 0 : e.message) !== null && _g !== void 0 ? _g : `There's been an error related to the API request to LiquidCommerce RMN Services.`;
+            (_g = (_f = (_e = e === null || e === undefined ? undefined : e.response) === null || _e === undefined ? undefined : _e.data.message) !== null && _f !== undefined ? _f : e === null || e === undefined ? undefined : e.message) !== null && _g !== undefined ? _g : `There's been an error related to the API request to LiquidCommerce RMN Services.`;
     }
 }
 
@@ -16800,12 +16803,12 @@ class BaseApi extends BaseApiAbstract {
         this.authInfo = auth;
         this.encryptedApi = EncryptedApi.getInstance(this.authInfo.apiKey);
         this.objectHelper = ObjectHelper.getInstance();
-        this.baseUrl = (_a = SDK_CONFIG.url[this.authInfo.env]) !== null && _a !== void 0 ? _a : SDK_CONFIG.url.development;
+        this.baseUrl = (_a = SDK_CONFIG.url[this.authInfo.env]) !== null && _a !== undefined ? _a : SDK_CONFIG.url.development;
         const configHeaders = {
             [SDK_CONFIG.accessHeader]: `Bearer ${this.authInfo.token}`,
         };
         const partnerSite = this.getPartnerSite();
-        const isPartnerSiteValid = partnerSite === null || partnerSite === void 0 ? void 0 : partnerSite.startsWith('http');
+        const isPartnerSiteValid = partnerSite === null || partnerSite === undefined ? undefined : partnerSite.startsWith('http');
         if (partnerSite && isPartnerSiteValid) {
             configHeaders[REQUEST_CLOUD_PARTNER_SITE] = partnerSite;
         }
@@ -16861,7 +16864,7 @@ class BaseApi extends BaseApiAbstract {
             configOverrides = {
                 ...configOverrides,
                 headers: {
-                    ...configOverrides === null || configOverrides === void 0 ? void 0 : configOverrides.headers,
+                    ...configOverrides === null || configOverrides === undefined ? undefined : configOverrides.headers,
                     [REQUEST_CLOUD_PROTECTED_KEY]: 'true',
                     [REQUEST_CLOUD_PROTECTED_TIMESTAMP]: timestamp,
                     [SDK_CONFIG.apiHeader]: this.authInfo.apiKey,
@@ -16898,7 +16901,7 @@ class BaseApi extends BaseApiAbstract {
      * @returns {AxiosRequestConfig} - The merged Axios request configuration.
      */
     createFullConfig(configOverrides) {
-        return this.objectHelper.merge(this.getConfig(), configOverrides !== null && configOverrides !== void 0 ? configOverrides : {});
+        return this.objectHelper.merge(this.getConfig(), configOverrides !== null && configOverrides !== undefined ? configOverrides : {});
     }
     /**
      * Sends a request to the specified URL with the given configuration.
@@ -16922,17 +16925,17 @@ class BaseApi extends BaseApiAbstract {
      */
     async getResponse(response) {
         var _a, _b, _c, _d, _e, _f, _g;
-        let responseData = (response === null || response === void 0 ? void 0 : response.data) ? response.data : null;
+        let responseData = (response === null || response === undefined ? undefined : response.data) ? response.data : null;
         let isEncrypted = false;
         let timestamp = 0;
-        if ((response === null || response === void 0 ? void 0 : response.headers) &&
-            ((_a = response === null || response === void 0 ? void 0 : response.headers) === null || _a === void 0 ? void 0 : _a.has) &&
-            ((_b = response === null || response === void 0 ? void 0 : response.headers) === null || _b === void 0 ? void 0 : _b.has(REQUEST_CLOUD_PROTECTED_KEY)) &&
-            ((_c = response === null || response === void 0 ? void 0 : response.headers) === null || _c === void 0 ? void 0 : _c.has(REQUEST_CLOUD_PROTECTED_TIMESTAMP)) &&
-            ((_d = response === null || response === void 0 ? void 0 : response.headers) === null || _d === void 0 ? void 0 : _d.get)) {
-            isEncrypted = ((_e = response === null || response === void 0 ? void 0 : response.headers) === null || _e === void 0 ? void 0 : _e.get(REQUEST_CLOUD_PROTECTED_KEY)) === 'true';
-            timestamp = ((_f = response === null || response === void 0 ? void 0 : response.headers) === null || _f === void 0 ? void 0 : _f.get(REQUEST_CLOUD_PROTECTED_TIMESTAMP))
-                ? Number((_g = response === null || response === void 0 ? void 0 : response.headers) === null || _g === void 0 ? void 0 : _g.get(REQUEST_CLOUD_PROTECTED_TIMESTAMP))
+        if ((response === null || response === undefined ? undefined : response.headers) &&
+            ((_a = response === null || response === undefined ? undefined : response.headers) === null || _a === undefined ? undefined : _a.has) &&
+            ((_b = response === null || response === undefined ? undefined : response.headers) === null || _b === undefined ? undefined : _b.has(REQUEST_CLOUD_PROTECTED_KEY)) &&
+            ((_c = response === null || response === undefined ? undefined : response.headers) === null || _c === undefined ? undefined : _c.has(REQUEST_CLOUD_PROTECTED_TIMESTAMP)) &&
+            ((_d = response === null || response === undefined ? undefined : response.headers) === null || _d === undefined ? undefined : _d.get)) {
+            isEncrypted = ((_e = response === null || response === undefined ? undefined : response.headers) === null || _e === undefined ? undefined : _e.get(REQUEST_CLOUD_PROTECTED_KEY)) === 'true';
+            timestamp = ((_f = response === null || response === undefined ? undefined : response.headers) === null || _f === undefined ? undefined : _f.get(REQUEST_CLOUD_PROTECTED_TIMESTAMP))
+                ? Number((_g = response === null || response === undefined ? undefined : response.headers) === null || _g === undefined ? undefined : _g.get(REQUEST_CLOUD_PROTECTED_TIMESTAMP))
                 : 0;
         }
         if (responseData &&
@@ -16941,7 +16944,7 @@ class BaseApi extends BaseApiAbstract {
             timestamp > 0) {
             const { t: encryptedPayload } = responseData;
             const decryptedData = await this.encryptedApi.handleDecryption(encryptedPayload, timestamp);
-            if (decryptedData === null || decryptedData === void 0 ? void 0 : decryptedData.payload) {
+            if (decryptedData === null || decryptedData === undefined ? undefined : decryptedData.payload) {
                 delete decryptedData.payload.exp;
                 delete decryptedData.payload.iat;
                 responseData = decryptedData.payload;
@@ -16995,9 +16998,9 @@ class AuthService extends BaseApi {
             },
         });
         if (isErr) {
-            throw new Error(`There was an error during authentication: (${isErr === null || isErr === void 0 ? void 0 : isErr.errorMessage})`);
+            throw new Error(`There was an error during authentication: (${isErr === null || isErr === undefined ? undefined : isErr.errorMessage})`);
         }
-        if (isOk && (val === null || val === void 0 ? void 0 : val.data.token)) {
+        if (isOk && (val === null || val === undefined ? undefined : val.data.token)) {
             this.authInfo.token = val.data.token;
             this.authInfo.authenticated = true;
         }
@@ -17076,6 +17079,8 @@ class BaseSpotComponent extends BaseElement {
         super();
         this.initialized = false;
         this.dataInitialized = false;
+        this.reRenderOnDeviceChange = false;
+        this._isMobileDevice = true;
     }
     initializeData(data, config) {
         if (this.dataInitialized) {
@@ -17125,6 +17130,27 @@ class BaseSpotComponent extends BaseElement {
       }
     `;
     }
+    setupDeviceDetection() {
+        if (!isBrowser)
+            return;
+        const mediaQuery = '(max-width: 639.98px)';
+        const containerQuery = window.matchMedia(mediaQuery);
+        const updateDeviceState = (e) => {
+            var _a;
+            const isMobileNewValue = e.matches;
+            if (this._isMobileDevice !== isMobileNewValue) {
+                this._isMobileDevice = isMobileNewValue;
+                (_a = this.onDeviceChange) === null || _a === undefined ? undefined : _a.call(this, this._isMobileDevice);
+                if (this.reRenderOnDeviceChange) {
+                    this.render();
+                }
+            }
+        };
+        // Setup listener
+        containerQuery.addEventListener('change', updateDeviceState);
+        // Initial check
+        updateDeviceState(containerQuery);
+    }
     // Lifecycle callbacks
     connectedCallback() {
         var _a;
@@ -17133,14 +17159,15 @@ class BaseSpotComponent extends BaseElement {
         this.initialized = true;
         if (this.dataInitialized) {
             this.render();
+            this.setupDeviceDetection();
         }
-        (_a = this.connected) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_a = this.connected) === null || _a === undefined ? undefined : _a.call(this);
     }
     disconnectedCallback() {
         var _a;
         if (!isBrowser)
             return;
-        (_a = this.disconnected) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_a = this.disconnected) === null || _a === undefined ? undefined : _a.call(this);
     }
 }
 
@@ -17183,11 +17210,11 @@ class LocalStorageService {
     setSpot(spotId, data) {
         var _a, _b, _c, _d, _e;
         data.createdAt = Date.now();
-        const isExistentSpot = (_a = this.spots) === null || _a === void 0 ? void 0 : _a.has(spotId);
+        const isExistentSpot = (_a = this.spots) === null || _a === undefined ? undefined : _a.has(spotId);
         if (isExistentSpot) {
-            data.firedEvents = (_d = (_c = (_b = this.spots) === null || _b === void 0 ? void 0 : _b.get(spotId)) === null || _c === void 0 ? void 0 : _c.firedEvents) !== null && _d !== void 0 ? _d : [];
+            data.firedEvents = (_d = (_c = (_b = this.spots) === null || _b === undefined ? undefined : _b.get(spotId)) === null || _c === undefined ? undefined : _c.firedEvents) !== null && _d !== undefined ? _d : [];
         }
-        (_e = this.spots) === null || _e === void 0 ? void 0 : _e.set(spotId, data);
+        (_e = this.spots) === null || _e === undefined ? undefined : _e.set(spotId, data);
         this.updateLocalStorage();
     }
     // public removeSpot(spotId: string): void {
@@ -17232,12 +17259,12 @@ class LocalStorageService {
     setUserId() {
         var _a;
         const prefix = LocalStorageService.localStorageKeyPrefix;
-        const existingKeys = Object.keys((_a = window.localStorage) !== null && _a !== void 0 ? _a : {}).filter((key) => key.startsWith(prefix));
+        const existingKeys = Object.keys((_a = window.localStorage) !== null && _a !== undefined ? _a : {}).filter((key) => key.startsWith(prefix));
         const setNewKey = () => {
             var _a;
             const uniqueId = UniqueIdGenerator.generate();
             const newLocalStorageKey = `${prefix}_${uniqueId}`;
-            (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.setItem(newLocalStorageKey, '');
+            (_a = window.localStorage) === null || _a === undefined ? undefined : _a.setItem(newLocalStorageKey, '');
             LocalStorageService.localStorageKey = newLocalStorageKey;
         };
         if (existingKeys.length === 0) {
@@ -17249,7 +17276,7 @@ class LocalStorageService {
             existingKeys.forEach((key) => {
                 var _a;
                 if (key !== validKey) {
-                    (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.removeItem(key);
+                    (_a = window.localStorage) === null || _a === undefined ? undefined : _a.removeItem(key);
                 }
             });
             if (validKey) {
@@ -17265,7 +17292,7 @@ class LocalStorageService {
     // ======================== Utility functions ======================== //
     syncLocalStorage() {
         var _a;
-        const localStorageData = (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(LocalStorageService.localStorageKey);
+        const localStorageData = (_a = window.localStorage) === null || _a === undefined ? undefined : _a.getItem(LocalStorageService.localStorageKey);
         if (localStorageData) {
             try {
                 const decryptedData = this.decryptData(localStorageData);
@@ -17304,15 +17331,15 @@ class LocalStorageService {
     }
     clearLocalStorage() {
         var _a;
-        (_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.removeItem(LocalStorageService.localStorageKey);
+        (_a = window.localStorage) === null || _a === undefined ? undefined : _a.removeItem(LocalStorageService.localStorageKey);
     }
     removeExpiredSpots() {
         var _a;
         const currentTime = Date.now();
-        (_a = this.spots) === null || _a === void 0 ? void 0 : _a.forEach((spot, spotId) => {
+        (_a = this.spots) === null || _a === undefined ? undefined : _a.forEach((spot, spotId) => {
             var _a, _b;
-            if (currentTime - ((_a = spot.createdAt) !== null && _a !== void 0 ? _a : 0) > LocalStorageService.spotExpirationTime) {
-                (_b = this.spots) === null || _b === void 0 ? void 0 : _b.delete(spotId);
+            if (currentTime - ((_a = spot.createdAt) !== null && _a !== undefined ? _a : 0) > LocalStorageService.spotExpirationTime) {
+                (_b = this.spots) === null || _b === undefined ? undefined : _b.delete(spotId);
             }
         });
         this.updateLocalStorage();
@@ -17348,9 +17375,9 @@ class LocalStorageService {
             obj.spotId,
             obj.spotType,
             this.spotEventObjectToArray(obj.events),
-            (_b = (_a = obj.firedEvents) === null || _a === void 0 ? void 0 : _a.map((event) => [event.productId, event.event])) !== null && _b !== void 0 ? _b : [],
+            (_b = (_a = obj.firedEvents) === null || _a === undefined ? undefined : _a.map((event) => [event.productId, event.event])) !== null && _b !== undefined ? _b : [],
             obj.productIds,
-            (_c = obj.createdAt) !== null && _c !== void 0 ? _c : 0,
+            (_c = obj.createdAt) !== null && _c !== undefined ? _c : 0,
         ];
     }
     /**
@@ -17420,8 +17447,8 @@ class ProximityObserver {
         this.targetIds = new Set(elementIds);
         this.processedIds = new Set();
         this.callback = callback;
-        this.proximityThreshold = (_a = options.proximityThreshold) !== null && _a !== void 0 ? _a : 500;
-        this.intersectionMargin = (_b = options.intersectionMargin) !== null && _b !== void 0 ? _b : '2000px';
+        this.proximityThreshold = (_a = options.proximityThreshold) !== null && _a !== undefined ? _a : 500;
+        this.intersectionMargin = (_b = options.intersectionMargin) !== null && _b !== undefined ? _b : '2000px';
         this.initializeObservers();
         this.observeExistingElements();
     }
@@ -17462,7 +17489,7 @@ class ProximityObserver {
         });
         // Start observing DOM changes
         if (document.body) {
-            (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(document.body, {
+            (_a = this.mutationObserver) === null || _a === undefined ? undefined : _a.observe(document.body, {
                 childList: true,
                 subtree: true,
             });
@@ -17472,13 +17499,13 @@ class ProximityObserver {
         var _a;
         if (element.id && this.processedIds.has(element.id)) {
             this.processedIds.delete(element.id);
-            (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(element);
+            (_a = this.intersectionObserver) === null || _a === undefined ? undefined : _a.unobserve(element);
         }
     }
     checkElement(element) {
         var _a;
         if (element.id && this.targetIds.has(element.id) && !this.processedIds.has(element.id)) {
-            (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.observe(element);
+            (_a = this.intersectionObserver) === null || _a === undefined ? undefined : _a.observe(element);
         }
     }
     findNearbyTargetIds(element) {
@@ -17525,7 +17552,7 @@ class ProximityObserver {
                 this.processedIds.add(id);
                 const el = document.getElementById(id);
                 if (el)
-                    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(el);
+                    (_a = this.intersectionObserver) === null || _a === undefined ? undefined : _a.unobserve(el);
             });
             // Trigger callback with the group
             this.callback(groupIdsToProcess);
@@ -17648,7 +17675,7 @@ class ResizeObserverService {
         this.container = element.parentElement;
         this.setDimensions(maxSize, minScale);
         this.resizeObserver = new ResizeObserver(() => this.updateElementSize());
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.container);
+        (_a = this.resizeObserver) === null || _a === undefined ? undefined : _a.observe(this.container);
         // Initial size update
         this.updateElementSize();
     }
@@ -17704,7 +17731,7 @@ class ResizeObserverService {
     }
     disconnect() {
         var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_a = this.resizeObserver) === null || _a === undefined ? undefined : _a.disconnect();
     }
 }
 
@@ -17718,6 +17745,11 @@ const GFONT_SOURCE_SANS_3 = `
 const GFONT_CORMORANT = `
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap">
 `;
+const FONTS = {
+    preconnect: GFONT_PRECONNECT,
+    sourceSans: GFONT_SOURCE_SANS_3,
+    cormorant: GFONT_CORMORANT,
+};
 
 function convertHexToRgba(hex, opacity = 1) {
     // Remove # if present
@@ -17751,6 +17783,16 @@ function generateGradientColor(overlay, fallback = '') {
     const gradientColor = convertHexToRgba(color, overlayOpacity);
     return `${fullColor} 0%, ${gradientColor} ${goTo}%, ${transparentColor} 100%`;
 }
+function importFonts(...fonts) {
+    const fontsToImport = fonts.length === 0 ? ['sourceSans', 'cormorant'] : fonts;
+    return [
+        FONTS.preconnect,
+        ...fontsToImport.map((font) => FONTS[font]),
+    ].join('');
+}
+function renderElement(tag, className, content) {
+    return (content === null || content === undefined ? undefined : content.trim()) ? `<${tag} class="${className}">${content}</${tag}>` : '';
+}
 
 class BillboardV1SE extends BaseSpotComponent {
     constructor() {
@@ -17763,7 +17805,7 @@ class BillboardV1SE extends BaseSpotComponent {
     disconnected() {
         var _a;
         this.removeEventListener('spotSizeChanged', this.handleSpotSizeChanged);
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_a = this.resizeObserver) === null || _a === undefined ? undefined : _a.disconnect();
     }
     setupResizeObserver() {
         if (!this._config.fluid) {
@@ -17786,7 +17828,7 @@ class BillboardV1SE extends BaseSpotComponent {
         var _a;
         // Find all text elements within the shadow root
         const selectors = ['h2', 'p', 'span'].join(', ');
-        const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors);
+        const elements = (_a = this.shadowRoot) === null || _a === undefined ? undefined : _a.querySelectorAll(selectors);
         if (!elements)
             return;
         const scaleFactor = calculateScaleFactor(elementScale);
@@ -18000,6 +18042,7 @@ class RbCollectionBannerWithoutTextBlockSE extends BaseSpotComponent {
 class RbHomepageHeroFullImageSE extends BaseSpotComponent {
     constructor() {
         super();
+        this.reRenderOnDeviceChange = true;
     }
     getGradientDirection(position) {
         switch (position) {
@@ -18019,24 +18062,42 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
     }
     template() {
         const prefix = this._config.prefix;
-        const { preHeader, header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT, } = this._data;
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT, mobileTextBlockPosition = textBlockPosition, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                preHeader: mobilePreHeader,
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { preHeader, header, description, ctaText };
+        if (!this.hasContent) {
+            return `
+        ${importFonts()}
+        <div class="${prefix}"></div>
+      `;
+        }
+        const elements = [
+            renderElement('h2', `${prefix}__pre-header`, content.preHeader),
+            renderElement('h2', `${prefix}__header`, content.header),
+            renderElement('p', `${prefix}__description`, content.description),
+            renderElement('span', `${prefix}__cta-button`, content.ctaText),
+        ];
         return `
-      ${GFONT_PRECONNECT}
-      ${GFONT_SOURCE_SANS_3}
-      ${GFONT_CORMORANT}
+      ${importFonts()}
       <div class="${prefix}">
-        <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition}">
-          ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
-          ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
-          ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
-          ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
+        <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${mobileTextBlockPosition}">
+          ${elements.join('')}
         </div>
       </div>
     `;
     }
     styles() {
-        const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT } = this._data;
-        const gradientDirection = this.getGradientDirection(textBlockPosition);
+        const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT, mobileTextBlockPosition = textBlockPosition, } = this._data;
+        const desktopGradientDirection = this.getGradientDirection(textBlockPosition);
+        const mobileGradientDirection = this.getGradientDirection(mobileTextBlockPosition);
         const linearGradient = generateGradientColor(this._config.overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
         const { textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
         const prefix = this._config.prefix;
@@ -18045,7 +18106,9 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
             display: flex;
             width: 100%;
             height: 100%;
-            background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");
+            ${this.hasContent
+            ? `background-image: linear-gradient(${mobileGradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");`
+            : `background-image: url("${mobilePrimaryImage}");`}
             background-size: cover;
             background-repeat: no-repeat;
             background-position: center;
@@ -18067,42 +18130,50 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
             position: absolute;
         }
 
-        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
-            top: 3%;
-            left: 3%;
-        }
+        @container (max-width: 639px) {
+            .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
+                top: 3%;
+                left: 3%;
+                align-items: flex-start;
+                text-align: left;
+            }
 
-        .${prefix}text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
-            top: 3%;
-            right: 3%;
-            align-items: flex-end;
-            text-align: right;
-        }
+            .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
+                top: 3%;
+                right: 3%;
+                align-items: flex-end;
+                text-align: right;
+            }
 
-        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
-            top: 50%;
-            left: 3%;
-            transform: translateY(-50%);
-        }
+            .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
+                top: 50%;
+                left: 3%;
+                transform: translateY(-50%);
+                align-items: flex-start;
+                text-align: left;
+            }
 
-        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
-            top: 50%;
-            right: 3%;
-            transform: translateY(-50%);
-            align-items: flex-end;
-            text-align: right;
-        }
+            .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
+                top: 50%;
+                right: 3%;
+                transform: translateY(-50%);
+                align-items: flex-end;
+                text-align: right;
+            }
 
-        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
-            bottom: 3%;
-            left: 3%;
-        }
+            .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
+                bottom: 3%;
+                left: 3%;
+                align-items: flex-start;
+                text-align: left;
+            }
 
-        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
-            bottom: 3%;
-            right: 3%;
-            align-items: flex-end;
-            text-align: right;
+            .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
+                bottom: 3%;
+                right: 3%;
+                align-items: flex-end;
+                text-align: right;
+            }
         }
 
         .${prefix}__pre-header {
@@ -18152,12 +18223,58 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
 
         @container (min-width: 640px) {
             .${prefix} {
-                background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${primaryImage}");
+              ${this.hasContent
+            ? `background-image: linear-gradient(${desktopGradientDirection}, ${linearGradient}), url("${primaryImage}");`
+            : `background-image: url("${primaryImage}");`}
             }
 
             .${prefix}__text {
                 width: 70%;
             }
+
+            .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
+                top: 3%;
+                left: 3%;
+                align-items: flex-start;
+                text-align: left;
+            }
+
+            .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
+                top: 3%;
+                right: 3%;
+                align-items: flex-end;
+                text-align: right;
+            }
+
+            .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
+                top: 50%;
+                left: 3%;
+                transform: translateY(-50%);
+                align-items: flex-start;
+                text-align: left;
+            }
+
+            .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
+                top: 50%;
+                right: 3%;
+                transform: translateY(-50%);
+                align-items: flex-end;
+                text-align: right;
+            }
+
+            .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
+                bottom: 3%;
+                left: 3%;
+                align-items: flex-start;
+                text-align: left;
+            }
+
+            .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
+                bottom: 3%;
+                right: 3%;
+                align-items: flex-end;
+                text-align: right;
+            }
         }
 
         @container (min-width: 768px) {
@@ -18199,46 +18316,73 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
         }
     `;
     }
+    get hasContent() {
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                preHeader: mobilePreHeader,
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { preHeader, header, description, ctaText };
+        return Object.values(content).some(Boolean);
+    }
 }
 
 class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
     constructor() {
         super();
+        this.reRenderOnDeviceChange = true;
     }
     template() {
         const prefix = this._config.prefix;
-        const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
+        const { header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, mobileTextBlockPosition = textBlockPosition, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { header, description, ctaText };
+        const elements = this.hasContent
+            ? [
+                renderElement('h2', `${prefix}__header`, content.header),
+                renderElement('p', `${prefix}__description`, content.description),
+                renderElement('span', `${prefix}__cta-button`, content.ctaText),
+            ]
+            : [];
         return `
-        ${GFONT_PRECONNECT}
-        ${GFONT_SOURCE_SANS_3}
-        ${GFONT_CORMORANT}
-        <div class="${prefix}">
-            <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition}">
-                <div class="${prefix}__main">
-                    <div class="${prefix}__secondary-image"></div>
-                    <div class="${prefix}__text">
-                        ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
-                        ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
-                        ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
-                    </div>
-                </div>
-                <div class="${prefix}__primary-image"></div>
+      ${importFonts()}
+      <div class="${prefix}">
+        <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${mobileTextBlockPosition}">
+          <div class="${prefix}__main">
+            <div class="${prefix}__secondary-image"></div>
+            <div class="${prefix}__text">
+              ${elements.join('')}
             </div>
+          </div>
+          <div class="${prefix}__primary-image"></div>
         </div>
+      </div>
     `;
     }
     styles() {
         const { textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, secondaryImage, mobileSecondaryImage = secondaryImage, } = this._data;
         const prefix = this._config.prefix;
         return `
-    .${prefix} {
+      .${prefix} {
         width: 100%;
         height: 100%;
         display: block;
         position: relative;
-    }
+      }
 
-    .${prefix}__content {
+      .${prefix}__content {
         width: 100%;
         height: 100%;
         display: flex;
@@ -18247,35 +18391,45 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
         gap: 6px;
         color: inherit;
         cursor: pointer;
-    }
+      }
 
-    .${prefix}__primary-image {
+      .${prefix}__primary-image {
         width: 100%;
         height: 60%;
         background-image: url("${mobilePrimaryImage}");
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
-    }
+      }
 
-    .${prefix}__main {
+      .${prefix}__main {
         width: 100%;
         height: 40%;
         display: flex;
         flex-direction: row;
         gap: 6px;
-    }
+      }
+
+      @container (max-width: 767px) {
+        .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.LEFT} .${prefix}__main {
+          flex-direction: row;
+        }
 
-    .${prefix}__secondary-image {
+        .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.RIGHT} .${prefix}__main {
+          flex-direction: row-reverse;
+        }
+      }
+
+      .${prefix}__secondary-image {
         width: 50%;
         height: 100%;
         background-image: url("${mobileSecondaryImage}");
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
-    }
+      }
 
-    .${prefix}__text {
+      .${prefix}__text {
         color: ${textColor};
         background-color: ${backgroundColor};
         text-align: center;
@@ -18288,9 +18442,9 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
         gap: 10px;
         padding: 0 10px;
         box-sizing: border-box;
-    }
+      }
 
-    .${prefix}__header {
+      .${prefix}__header {
         color: inherit;
         margin: 0;
         font-size: 18px;
@@ -18298,18 +18452,18 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
         font-style: normal;
         font-weight: 700;
         line-height: normal;
-    }
+      }
 
-    .${prefix}__description {
+      .${prefix}__description {
         color: inherit;
         margin: 0;
         font-size: 10px;
         font-family: "Source Sans 3", system-ui;
         font-style: normal;
         font-weight: 400;
-    }
+      }
 
-    .${prefix}__cta-button {
+      .${prefix}__cta-button {
         color: ${ctaTextColor};
         background-color: transparent;
         font-size: 8px;
@@ -18323,266 +18477,319 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
         cursor: pointer;
         padding: 0;
         transition: opacity 0.3s ease;
-    }
+      }
 
-    .${prefix}__content:hover .${prefix}__cta-button {
+      .${prefix}__content:hover .${prefix}__cta-button {
         opacity: 0.8;
-    }
+      }
 
-    @container (min-width: 640px) {
+      @container (min-width: 640px) {
         .${prefix}__primary-image {
-            background-image: url("${primaryImage}");
+          background-image: url("${primaryImage}");
         }
 
         .${prefix}__secondary-image {
-            background-image: url("${secondaryImage}");
+          background-image: url("${secondaryImage}");
         }
-    }
+      }
 
-    @container (min-width: 768px) {
+      @container (min-width: 768px) {
         .${prefix}__content {
-            flex-direction: row;
+          flex-direction: row;
+        }
+
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.LEFT} {
+          flex-direction: row;
         }
 
         .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
-            flex-direction: row-reverse;
+          flex-direction: row-reverse;
         }
 
         .${prefix}__primary-image {
-            width: 66.66666%;
-            height: 100%;
+          width: 66.66666%;
+          height: 100%;
         }
 
         .${prefix}__main {
-            flex-direction: column;
-            height: 100%;
-            width: 33.33333%;
-        }
-
-        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} .${prefix}__main {
-            flex-direction: column;
+          flex-direction: column;
+          height: 100%;
+          width: 33.33333%;
         }
 
         .${prefix}__secondary-image {
-            width: 100%;
-            height: 50%;
+          width: 100%;
+          height: 50%;
         }
 
         .${prefix}__text {
-            width: 100%;
-            height: 50%;
+          width: 100%;
+          height: 50%;
         }
 
         .${prefix}__header {
-            font-size: 22px;
+          font-size: 22px;
         }
 
         .${prefix}__description {
-            font-size: 12px;
+          font-size: 12px;
         }
 
         .${prefix}__cta-button {
-            font-size: 12px;
+          font-size: 12px;
         }
-    }
+      }
 
-    @container (min-width: 1024px) {
+      @container (min-width: 1024px) {
         .${prefix}__header {
-            font-size: 24px;
+          font-size: 24px;
         }
         .${prefix}__description {
-            font-size: 13px;
+          font-size: 13px;
         }
         .${prefix}__cta-button {
           font-size: 13px;
         }
-    }
+      }
 
-    @container (min-width: 1280px) {
+      @container (min-width: 1280px) {
         .${prefix}__header {
-            font-size: 28px;
+          font-size: 28px;
         }
         .${prefix}__description {
-            font-size: 14px;
+          font-size: 14px;
         }
         .${prefix}__cta-button {
-            font-size: 14px;
+          font-size: 14px;
         }
-    }
+      }
     `;
     }
+    get hasContent() {
+        const { header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { header, description, ctaText };
+        return Object.values(content).some(Boolean);
+    }
 }
 
 class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
     constructor() {
         super();
+        this.reRenderOnDeviceChange = true;
     }
     template() {
         const prefix = this._config.prefix;
-        const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
+        const { header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, mobileTextBlockPosition = ENUM_TEXT_BLOCK_POSITION.TOP, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { header, description, ctaText };
+        const elements = this.hasContent
+            ? [
+                renderElement('h2', `${prefix}__header`, content.header),
+                renderElement('p', `${prefix}__description`, content.description),
+                renderElement('span', `${prefix}__cta-button`, content.ctaText),
+            ]
+            : [];
         return `
-      ${GFONT_PRECONNECT}
-      ${GFONT_SOURCE_SANS_3}
-      ${GFONT_CORMORANT}
+      ${importFonts()}
       <div class="${prefix}">
-        <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition}">
+        <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${mobileTextBlockPosition}">
             <div class="${prefix}__text">
-                ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
-                ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
-                ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
+                ${elements.join('')}
             </div>
             <div class="${prefix}__image"></div>
         </div>
       </div>
-  `;
+    `;
     }
     styles() {
         const { textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
         const prefix = this._config.prefix;
         return `
-    .${prefix} {
-        width: 100%;
-        height: 100%;
-        background-color: transparent;
-        cursor: pointer;
-        position: relative;
-    }
+      .${prefix} {
+          width: 100%;
+          height: 100%;
+          background-color: transparent;
+          cursor: pointer;
+          position: relative;
+      }
 
-    .${prefix}__content {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column-reverse;
-        background-color: transparent;
-        gap: 6px;
-    }
+      .${prefix}__content {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column-reverse;
+          background-color: transparent;
+          gap: 6px;
+      }
 
-    .${prefix}__image {
-        width: 100%;
-        height: 100%;
-        background-image: url("${mobilePrimaryImage}");
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-    }
+      .${prefix}__image {
+          width: 100%;
+          height: 100%;
+          background-image: url("${mobilePrimaryImage}");
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: cover;
+      }
 
-    .${prefix}__text {
-        color: ${textColor};
-        background-color: ${backgroundColor};
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        gap: 10px;
-        padding: 0 10px;
-        box-sizing: border-box;
-    }
+      .${prefix}__text {
+          color: ${textColor};
+          background-color: ${backgroundColor};
+          text-align: center;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+          gap: 10px;
+          padding: 0 10px;
+          box-sizing: border-box;
+      }
 
-    .${prefix}__header {
-        font-size: 18px;
-        margin: 0;
-        color: inherit;
-        font-family: "Cormorant", system-ui;
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-    }
+      @container (max-width: 767px) {
+          .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.BOTTOM} {
+              flex-direction: column-reverse;
+          }
 
-    .${prefix}__description {
-        color: inherit;
-        margin: 0;
-        font-size: 10px;
-        font-family: "Source Sans 3", system-ui;
-        font-style: normal;
-        font-weight: 400;
-    }
+          .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.TOP} {
+              flex-direction: column;
+          }
+      }
 
-    .${prefix}__cta-button {
-        color: ${ctaTextColor};
-        background-color: transparent;
-        font-size: 8px;
-        font-style: normal;
-        font-weight: 700;
-        font-family: "Source Sans 3", system-ui;
-        text-decoration-line: underline;
-        text-transform: uppercase;
-        letter-spacing: 1.4px;
-        border: none;
-        cursor: pointer;
-        padding: 0;
-        transition: opacity 0.3s ease;
-    }
+      .${prefix}__header {
+          font-size: 18px;
+          margin: 0;
+          color: inherit;
+          font-family: "Cormorant", system-ui;
+          font-style: normal;
+          font-weight: 700;
+          line-height: normal;
+      }
 
-    .${prefix}__content:hover .${prefix}__cta-button {
-        opacity: 0.8;
-    }
+      .${prefix}__description {
+          color: inherit;
+          margin: 0;
+          font-size: 10px;
+          font-family: "Source Sans 3", system-ui;
+          font-style: normal;
+          font-weight: 400;
+      }
 
-    @container (min-width: 640px) {
-        .${prefix}__image {
-            background-image: url("${primaryImage}");
-        }
-    }
+      .${prefix}__cta-button {
+          color: ${ctaTextColor};
+          background-color: transparent;
+          font-size: 8px;
+          font-style: normal;
+          font-weight: 700;
+          font-family: "Source Sans 3", system-ui;
+          text-decoration-line: underline;
+          text-transform: uppercase;
+          letter-spacing: 1.4px;
+          border: none;
+          cursor: pointer;
+          padding: 0;
+          transition: opacity 0.3s ease;
+      }
 
-    @container (min-width: 768px) {
-        .${prefix}__content {
-            flex-direction: row;
-        }
+      .${prefix}__content:hover .${prefix}__cta-button {
+          opacity: 0.8;
+      }
 
-        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
-            flex-direction: row-reverse;
-        }
+      @container (min-width: 640px) {
+          .${prefix}__image {
+              background-image: url("${primaryImage}");
+          }
+      }
 
-        .${prefix}__image {
-            width: 66.66666%;
-            height: 100%;
-        }
+      @container (min-width: 768px) {
+          .${prefix}__content {
+              flex-direction: row;
+          }
 
-        .${prefix}__text {
-            width: 33.33333%;
-            height: 100%;
-        }
+          .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.LEFT} {
+              flex-direction: row;
+          }
 
-        .${prefix}__header {
-            font-size: 22px;
-        }
+          .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
+              flex-direction: row-reverse;
+          }
 
-        .${prefix}__description {
-            font-size: 12px;
-        }
+          .${prefix}__image {
+              width: 66.66666%;
+              height: 100%;
+          }
 
-        .${prefix}__cta-button {
-            font-size: 12px;
-        }
-    }
+          .${prefix}__text {
+              width: 33.33333%;
+              height: 100%;
+          }
 
-    @container (min-width: 1024px) {
-        .${prefix}__header {
-            font-size: 24px;
-        }
-        .${prefix}__description {
-            font-size: 13px;
-        }
-        .${prefix}__cta-button {
-            font-size: 13px;
-        }
-    }
+          .${prefix}__header {
+              font-size: 22px;
+          }
 
-    @container (min-width: 1280px) {
-        .${prefix}__header {
-            font-size: 28px;
-        }
-        .${prefix}__description {
-            font-size: 14px;
-        }
-        .${prefix}__cta-button {
-            font-size: 14px;
-        }
-    }
+          .${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;
+          }
+      }
     `;
     }
+    get hasContent() {
+        const { header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { header, description, ctaText };
+        return Object.values(content).some(Boolean);
+    }
 }
 
 class RbInTextSE extends BaseSpotComponent {
@@ -18627,22 +18834,39 @@ class RbInTextSE extends BaseSpotComponent {
 class RbLargeCategoryImageToutSE extends BaseSpotComponent {
     constructor() {
         super();
+        this.reRenderOnDeviceChange = true;
     }
     template() {
         const prefix = this._config.prefix;
-        const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
+        const { header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { header, description, ctaText };
+        if (!this.hasContent) {
+            return `
+        ${importFonts()}
+        <div class="${prefix}"></div>
+      `;
+        }
+        const elements = [
+            renderElement('h2', `${prefix}__header`, content.header),
+            renderElement('p', `${prefix}__description`, content.description),
+            renderElement('span', `${prefix}__cta-button`, content.ctaText),
+        ];
         return `
-    ${GFONT_PRECONNECT}
-    ${GFONT_SOURCE_SANS_3}
-    ${GFONT_CORMORANT}
-    <div class="${prefix}">
-      <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition}">
-        ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
-        ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
-        ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
+      ${importFonts()}
+      <div class="${prefix}">
+        <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition}">
+          ${elements.join('')}
+        </div>
       </div>
-    </div>
-`;
+    `;
     }
     styles() {
         const { textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
@@ -18655,7 +18879,9 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
-        background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
+        ${this.hasContent
+            ? `background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");`
+            : `background-image: url("${mobilePrimaryImage}");`}
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
@@ -18731,7 +18957,9 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
 
       @container (min-width: 640px) {
         .${prefix} {
-          background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+          ${this.hasContent
+            ? `background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");`
+            : `background-image: url("${primaryImage}");`}
         }
       }
 
@@ -18779,25 +19007,56 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
       }
     `;
     }
+    get hasContent() {
+        const { header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { header, description, ctaText };
+        return Object.values(content).some(Boolean);
+    }
 }
 
 class RbLongToutShortSE extends BaseSpotComponent {
     constructor() {
         super();
+        this.reRenderOnDeviceChange = true;
     }
     template() {
         const prefix = this._config.prefix;
-        const { preHeader, header, description, ctaText } = this._data;
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                preHeader: mobilePreHeader,
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { preHeader, header, description, ctaText };
+        if (!this.hasContent) {
+            return `
+        ${importFonts()}
+        <div class="${prefix}"></div>
+      `;
+        }
+        const elements = [
+            renderElement('h2', `${prefix}__pre-header`, content.preHeader),
+            renderElement('h2', `${prefix}__header`, content.header),
+            renderElement('p', `${prefix}__description`, content.description),
+            renderElement('span', `${prefix}__cta-button`, content.ctaText),
+        ];
         return `
-      ${GFONT_PRECONNECT}
-      ${GFONT_SOURCE_SANS_3}
-      ${GFONT_CORMORANT}
+      ${importFonts()}
       <div class="${prefix}">
         <div class="${prefix}__text">
-          ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
-          ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
-          ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
-          ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
+          ${elements.join('')}
         </div>
       </div>
     `;
@@ -18943,11 +19202,26 @@ class RbLongToutShortSE extends BaseSpotComponent {
         }
     `;
     }
+    get hasContent() {
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                preHeader: mobilePreHeader,
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { preHeader, header, description, ctaText };
+        return Object.values(content).some(Boolean);
+    }
 }
 
 class RbLongToutTallSE extends BaseSpotComponent {
     constructor() {
         super();
+        this.reRenderOnDeviceChange = true;
     }
     getGradientDirection(position) {
         switch (position) {
@@ -18967,24 +19241,44 @@ class RbLongToutTallSE extends BaseSpotComponent {
     }
     template() {
         const prefix = this._config.prefix;
-        const { preHeader, header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT, } = this._data;
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT, mobileTextBlockPosition = textBlockPosition, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                preHeader: mobilePreHeader,
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { preHeader, header, description, ctaText };
+        if (!this.hasContent) {
+            return `
+        ${importFonts()}
+        <div class="${prefix}"></div>
+      `;
+        }
+        const elements = [
+            renderElement('h2', `${prefix}__pre-header`, content.preHeader),
+            renderElement('h2', `${prefix}__header`, content.header),
+            renderElement('p', `${prefix}__description`, content.description),
+            renderElement('span', `${prefix}__cta-button`, content.ctaText),
+        ];
         return `
-    ${GFONT_PRECONNECT}
-    ${GFONT_SOURCE_SANS_3}
-    ${GFONT_CORMORANT}
-    <div class="${prefix}">
-      <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition.toLowerCase().replace('_', '-')}">
-        ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
-        ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
-        ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
-        ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
+      ${GFONT_PRECONNECT}
+      ${GFONT_SOURCE_SANS_3}
+      ${GFONT_CORMORANT}
+      <div class="${prefix}">
+        <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${mobileTextBlockPosition}">
+          ${elements.join('')}
+        </div>
       </div>
-    </div>
-`;
+    `;
     }
     styles() {
-        const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT } = this._data;
-        const gradientDirection = this.getGradientDirection(textBlockPosition);
+        const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT, mobileTextBlockPosition = textBlockPosition, } = this._data;
+        const desktopGradientDirection = this.getGradientDirection(textBlockPosition);
+        const mobileGradientDirection = this.getGradientDirection(mobileTextBlockPosition);
         const linearGradient = generateGradientColor(this._config.overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
         const { textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
         const prefix = this._config.prefix;
@@ -18993,7 +19287,9 @@ class RbLongToutTallSE extends BaseSpotComponent {
           display: flex;
           width: 100%;
           height: 100%;
-          background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");
+          ${this.hasContent
+            ? `background-image: linear-gradient(${mobileGradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");`
+            : `background-image: url("${mobilePrimaryImage}");`}
           background-size: cover;
           background-repeat: no-repeat;
           background-position: center;
@@ -19015,48 +19311,106 @@ class RbLongToutTallSE extends BaseSpotComponent {
           position: absolute;
       }
 
-      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
-          top: 3%;
-          left: 3%;
-          align-items: flex-start;
-          text-align: left;
-      }
+      @container (max-width: 639px) {
+          .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
+              top: 3%;
+              left: 3%;
+              align-items: flex-start;
+              text-align: left;
+          }
 
-      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
-          top: 3%;
-          right: 3%;
-          align-items: flex-end;
-          text-align: right;
-      }
+          .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
+              top: 3%;
+              right: 3%;
+              align-items: flex-end;
+              text-align: right;
+          }
 
-      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
-          top: 50%;
-          left: 3%;
-          transform: translateY(-50%);
-          align-items: flex-start;
-          text-align: left;
-      }
+          .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
+              top: 50%;
+              left: 3%;
+              transform: translateY(-50%);
+              align-items: flex-start;
+              text-align: left;
+          }
 
-      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
-          top: 50%;
-          right: 3%;
-          transform: translateY(-50%);
-          align-items: flex-end;
-          text-align: right;
-      }
+          .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
+              top: 50%;
+              right: 3%;
+              transform: translateY(-50%);
+              align-items: flex-end;
+              text-align: right;
+          }
 
-      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
-          bottom: 3%;
-          left: 3%;
-          align-items: flex-start;
-          text-align: left;
+          .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
+              bottom: 3%;
+              left: 3%;
+              align-items: flex-start;
+              text-align: left;
+          }
+
+          .${prefix}__text-block-mobile--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
+              bottom: 3%;
+              right: 3%;
+              align-items: flex-end;
+              text-align: right;
+          }
       }
 
-      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
-          bottom: 3%;
-          right: 3%;
-          align-items: flex-end;
-          text-align: right;
+      @container (min-width: 640px) {
+          .${prefix} {
+            ${this.hasContent
+            ? `background-image: linear-gradient(${desktopGradientDirection}, ${linearGradient}), url("${primaryImage}");`
+            : `background-image: url("${primaryImage}");`}
+          }
+
+          .${prefix}__text {
+              width: 70%;
+          }
+
+          .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
+              top: 3%;
+              left: 3%;
+              align-items: flex-start;
+              text-align: left;
+          }
+
+          .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
+              top: 3%;
+              right: 3%;
+              align-items: flex-end;
+              text-align: right;
+          }
+
+          .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
+              top: 50%;
+              left: 3%;
+              transform: translateY(-50%);
+              align-items: flex-start;
+              text-align: left;
+          }
+
+          .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
+              top: 50%;
+              right: 3%;
+              transform: translateY(-50%);
+              align-items: flex-end;
+              text-align: right;
+          }
+
+          .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
+              bottom: 3%;
+              left: 3%;
+              align-items: flex-start;
+              text-align: left;
+          }
+
+          .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
+              bottom: 3%;
+              right: 3%;
+              align-items: flex-end;
+              text-align: right;
+          }
       }
 
       .${prefix}__pre-header {
@@ -19104,16 +19458,6 @@ class RbLongToutTallSE extends BaseSpotComponent {
           background-color: ${ctaBorderColor.length === 7 ? `${ctaBorderColor}15` : `${ctaBorderColor}`};
       }
 
-      @container (min-width: 640px) {
-          .${prefix} {
-              background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${primaryImage}");
-          }
-
-          .${prefix}__text {
-              width: 70%;
-          }
-      }
-
       @container (min-width: 768px) {
           .${prefix}__description {
               font-size: 12px;
@@ -19153,22 +19497,50 @@ class RbLongToutTallSE extends BaseSpotComponent {
       }
     `;
     }
+    get hasContent() {
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                preHeader: mobilePreHeader,
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { preHeader, header, description, ctaText };
+        return Object.values(content).some(Boolean);
+    }
 }
 
 class RbNavigationBannerSE extends BaseSpotComponent {
     constructor() {
         super();
+        this.reRenderOnDeviceChange = true;
     }
     template() {
         const prefix = this._config.prefix;
-        const { header } = this._data;
+        const { header, mobileHeader, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+            }
+            : { header };
+        if (!this.hasContent) {
+            return `
+        ${importFonts('sourceSans')}
+        <div class="${prefix}"></div>
+      `;
+        }
+        const elements = [renderElement('h2', `${prefix}__header`, content.header)];
         return `
-    ${GFONT_PRECONNECT}
-    ${GFONT_SOURCE_SANS_3}
-    <div class="${prefix}">
-        ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
-    </div>
-`;
+      ${importFonts('sourceSans')}
+      <div class="${prefix}">
+          ${elements.join('')}
+      </div>
+    `;
     }
     styles() {
         const { textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage } = this._data;
@@ -19184,7 +19556,9 @@ class RbNavigationBannerSE extends BaseSpotComponent {
         border-radius: 5px;
         overflow: hidden;
         cursor: pointer;
-        background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
+        ${this.hasContent
+            ? `background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");`
+            : `background-image: url("${mobilePrimaryImage}");`}
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
@@ -19204,7 +19578,9 @@ class RbNavigationBannerSE extends BaseSpotComponent {
 
       @container (min-width: 640px) {
         .${prefix} {
-          background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+          ${this.hasContent
+            ? `background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");`
+            : `background-image: url("${primaryImage}");`}
         }
       }
 
@@ -19227,22 +19603,47 @@ class RbNavigationBannerSE extends BaseSpotComponent {
       }
     `;
     }
+    get hasContent() {
+        const { header, mobileHeader, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+            }
+            : { header };
+        return Object.values(content).some(Boolean);
+    }
 }
 
 class RbSmallCategoryImageToutSE extends BaseSpotComponent {
     constructor() {
         super();
+        this.reRenderOnDeviceChange = true;
     }
     template() {
         const prefix = this._config.prefix;
-        const { header } = this._data;
+        const { header, mobileHeader, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+            }
+            : { header };
+        if (!this.hasContent) {
+            return `
+        ${importFonts('cormorant')}
+        <div class="${prefix}"></div>
+      `;
+        }
+        const elements = [renderElement('h2', `${prefix}__header`, content.header)];
         return `
-    ${GFONT_PRECONNECT}
-    ${GFONT_CORMORANT}
-    <div class="${prefix}">
-      ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
-    </div>
-`;
+      ${importFonts('cormorant')}
+      <div class="${prefix}">
+        ${elements.join('')}
+      </div>
+    `;
     }
     styles() {
         const { textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage } = this._data;
@@ -19255,7 +19656,9 @@ class RbSmallCategoryImageToutSE extends BaseSpotComponent {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
-        background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
+        ${this.hasContent
+            ? `background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");`
+            : `background-image: url("${mobilePrimaryImage}");`}
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
@@ -19278,30 +19681,51 @@ class RbSmallCategoryImageToutSE extends BaseSpotComponent {
 
       @container (min-width: 640px) {
         .${prefix} {
-          background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+          ${this.hasContent
+            ? `background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");`
+            : `background-image: url("${primaryImage}");`}
         }
       }
     `;
     }
+    get hasContent() {
+        const { header, mobileHeader, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+            }
+            : { header };
+        return Object.values(content).some(Boolean);
+    }
 }
 
 class RbSmallDiscoverToutSE extends BaseSpotComponent {
     constructor() {
         super();
+        this.reRenderOnDeviceChange = true;
     }
     template() {
         const prefix = this._config.prefix;
-        const { header } = this._data;
+        const { header, mobileHeader, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+            }
+            : { header };
+        const elements = [renderElement('h2', `${prefix}__header`, content.header)];
         return `
-    ${GFONT_PRECONNECT}
-    ${GFONT_CORMORANT}
-    <div class="${prefix}">
-      <div class="${prefix}__image"></div>
-      <div class="${prefix}__text">
-        ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
+      ${importFonts('sourceSans')}
+      <div class="${prefix}">
+        <div class="${prefix}__image"></div>
+        <div class="${prefix}__text">
+          ${elements.join('')}
+        </div>
       </div>
-    </div>
-  `;
+    `;
     }
     styles() {
         const { textColor = '#000000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
@@ -19418,13 +19842,13 @@ class RbVideoPlayerSE extends BaseSpotComponent {
         if (!this.video)
             return;
         const muteButton = this._container.querySelector(this.muteButtonSelector());
-        muteButton === null || muteButton === void 0 ? void 0 : muteButton.addEventListener('click', this.handleMuteToggle);
+        muteButton === null || muteButton === undefined ? undefined : muteButton.addEventListener('click', this.handleMuteToggle);
     }
     removeEventListeners() {
         if (!this.video)
             return;
         const muteButton = this._container.querySelector(this.muteButtonSelector());
-        muteButton === null || muteButton === void 0 ? void 0 : muteButton.removeEventListener('click', this.handleMuteToggle);
+        muteButton === null || muteButton === undefined ? undefined : muteButton.removeEventListener('click', this.handleMuteToggle);
     }
     template() {
         const prefix = this._config.prefix;
@@ -19603,7 +20027,7 @@ class SpotTemplateService {
         const variantClasses = this.isRbSpot(spotType) ? this.rbTemplates : this.iabTemplates;
         if (!variantClasses)
             return null;
-        const spotClass = ((_a = variantClasses[spotType]) === null || _a === void 0 ? void 0 : _a[spotVariant]) || null;
+        const spotClass = ((_a = variantClasses[spotType]) === null || _a === undefined ? undefined : _a[spotVariant]) || null;
         if (!spotClass)
             return null;
         return spotClass;
@@ -19937,7 +20361,7 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         disconnectedCallback() {
             var _a;
             this.cleanupEventListeners();
-            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            (_a = this.resizeObserver) === null || _a === undefined ? undefined : _a.disconnect();
         }
         setupResizeObserver() {
             if (this.data && !this.data.fluid) {
@@ -19958,14 +20382,14 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
          */
         initializeState() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
-            this.state.useDots = Boolean((_a = this.data) === null || _a === void 0 ? void 0 : _a.useDots);
-            this.state.useButtons = Boolean((_b = this.data) === null || _b === void 0 ? void 0 : _b.useButtons);
-            this.state.autoplay = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.autoplay) !== null && _d !== void 0 ? _d : true;
-            this.state.interval = (_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.interval) !== null && _f !== void 0 ? _f : CustomCarouselElement.defaultConfigs.interval;
-            if (typeof ((_g = this.data) === null || _g === void 0 ? void 0 : _g.useDots) === 'object') {
+            this.state.useDots = Boolean((_a = this.data) === null || _a === undefined ? undefined : _a.useDots);
+            this.state.useButtons = Boolean((_b = this.data) === null || _b === undefined ? undefined : _b.useButtons);
+            this.state.autoplay = (_d = (_c = this.data) === null || _c === undefined ? undefined : _c.autoplay) !== null && _d !== undefined ? _d : true;
+            this.state.interval = (_f = (_e = this.data) === null || _e === undefined ? undefined : _e.interval) !== null && _f !== undefined ? _f : CustomCarouselElement.defaultConfigs.interval;
+            if (typeof ((_g = this.data) === null || _g === undefined ? undefined : _g.useDots) === 'object') {
                 this.state.dots = { ...this.state.dots, ...this.data.useDots };
             }
-            if (typeof ((_h = this.data) === null || _h === void 0 ? void 0 : _h.useButtons) === 'object') {
+            if (typeof ((_h = this.data) === null || _h === undefined ? undefined : _h.useButtons) === 'object') {
                 this.state.buttons = { ...this.state.buttons, ...this.data.useButtons };
             }
             this.validateConfiguration();
@@ -20429,7 +20853,7 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             }
             this.state.isVirtualizing = false;
             // Force reflow to ensure the style change takes effect immediately
-            void ((_a = this.elements.slidesContainer) === null || _a === void 0 ? void 0 : _a.offsetHeight);
+            void ((_a = this.elements.slidesContainer) === null || _a === undefined ? undefined : _a.offsetHeight);
         }
         /**
          * Updates dot active states
@@ -20538,8 +20962,8 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 });
             }
             if (this.state.useButtons) {
-                (_a = this.elements.prevButton) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => this.handleNavigation('prev'));
-                (_b = this.elements.nextButton) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => this.handleNavigation('next'));
+                (_a = this.elements.prevButton) === null || _a === undefined ? undefined : _a.addEventListener('click', () => this.handleNavigation('prev'));
+                (_b = this.elements.nextButton) === null || _b === undefined ? undefined : _b.addEventListener('click', () => this.handleNavigation('next'));
             }
         }
         /**
@@ -20726,7 +21150,7 @@ class ElementService {
         const dimensions = SPOT_DIMENSIONS[params.spotType];
         skeleton.data = {
             spotType: params.spotType,
-            fluid: (params === null || params === void 0 ? void 0 : params.fluid) === undefined ? false : params.fluid,
+            fluid: (params === null || params === undefined ? undefined : params.fluid) === undefined ? false : params.fluid,
             ...dimensions,
         };
         return skeleton;
@@ -20816,16 +21240,16 @@ class DataLayerMonitor {
     }
     extractProductData(event) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        const items = ((_a = event === null || event === void 0 ? void 0 : event.value) === null || _a === void 0 ? void 0 : _a.items) ||
-            ((_b = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _b === void 0 ? void 0 : _b.items) ||
-            ((_c = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _c === void 0 ? void 0 : _c.products) ||
-            ((_e = (_d = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _d === void 0 ? void 0 : _d.detail) === null || _e === void 0 ? void 0 : _e.products) ||
-            ((_g = (_f = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _f === void 0 ? void 0 : _f.checkout) === null || _g === void 0 ? void 0 : _g.products) ||
-            ((_j = (_h = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _h === void 0 ? void 0 : _h.purchase) === null || _j === void 0 ? void 0 : _j.products) ||
-            ((_l = (_k = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _k === void 0 ? void 0 : _k.add) === null || _l === void 0 ? void 0 : _l.products) ||
-            ((_o = (_m = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _m === void 0 ? void 0 : _m.remove) === null || _o === void 0 ? void 0 : _o.products) ||
-            ((_q = (_p = event === null || event === void 0 ? void 0 : event.ecommerce) === null || _p === void 0 ? void 0 : _p.click) === null || _q === void 0 ? void 0 : _q.products) ||
-            (event === null || event === void 0 ? void 0 : event.products) ||
+        const items = ((_a = event === null || event === undefined ? undefined : event.value) === null || _a === undefined ? undefined : _a.items) ||
+            ((_b = event === null || event === undefined ? undefined : event.ecommerce) === null || _b === undefined ? undefined : _b.items) ||
+            ((_c = event === null || event === undefined ? undefined : event.ecommerce) === null || _c === undefined ? undefined : _c.products) ||
+            ((_e = (_d = event === null || event === undefined ? undefined : event.ecommerce) === null || _d === undefined ? undefined : _d.detail) === null || _e === undefined ? undefined : _e.products) ||
+            ((_g = (_f = event === null || event === undefined ? undefined : event.ecommerce) === null || _f === undefined ? undefined : _f.checkout) === null || _g === undefined ? undefined : _g.products) ||
+            ((_j = (_h = event === null || event === undefined ? undefined : event.ecommerce) === null || _h === undefined ? undefined : _h.purchase) === null || _j === undefined ? undefined : _j.products) ||
+            ((_l = (_k = event === null || event === undefined ? undefined : event.ecommerce) === null || _k === undefined ? undefined : _k.add) === null || _l === undefined ? undefined : _l.products) ||
+            ((_o = (_m = event === null || event === undefined ? undefined : event.ecommerce) === null || _m === undefined ? undefined : _m.remove) === null || _o === undefined ? undefined : _o.products) ||
+            ((_q = (_p = event === null || event === undefined ? undefined : event.ecommerce) === null || _p === undefined ? undefined : _p.click) === null || _q === undefined ? undefined : _q.products) ||
+            (event === null || event === undefined ? undefined : event.products) ||
             [];
         return items.map((item) => {
             const data = {
@@ -20881,7 +21305,7 @@ class MonitorService {
             return;
         this.implementedMonitor.setListener(async (eventData) => {
             var _a;
-            await this.matchAndFireEvent(eventData, (_a = this.localStorageService) === null || _a === void 0 ? void 0 : _a.getSpots());
+            await this.matchAndFireEvent(eventData, (_a = this.localStorageService) === null || _a === undefined ? undefined : _a.getSpots());
         });
         this.implementedMonitor.start();
     }
@@ -20897,14 +21321,14 @@ class MonitorService {
                     continue;
                 }
                 const firedEvents = spot.firedEvents || [];
-                const eventProductId = (_a = this.normalizeStringHelper) === null || _a === void 0 ? void 0 : _a.normalize(String(data.id));
+                const eventProductId = (_a = this.normalizeStringHelper) === null || _a === undefined ? undefined : _a.normalize(String(data.id));
                 const isEventAlreadyFired = firedEvents.some((event) => event.productId === eventProductId && event.event === eventData.event);
                 if (isEventAlreadyFired) {
                     continue;
                 }
-                const spotRelatedProductIdsSet = new Set(spot.productIds.map((id) => { var _a; return (_a = this.normalizeStringHelper) === null || _a === void 0 ? void 0 : _a.normalize(String(id)); }));
-                const eventProductBrand = (_b = this.normalizeStringHelper) === null || _b === void 0 ? void 0 : _b.normalize(String(data.brand));
-                const eventVariantBrand = (_c = this.normalizeStringHelper) === null || _c === void 0 ? void 0 : _c.normalize(String(data.variant));
+                const spotRelatedProductIdsSet = new Set(spot.productIds.map((id) => { var _a; return (_a = this.normalizeStringHelper) === null || _a === undefined ? undefined : _a.normalize(String(id)); }));
+                const eventProductBrand = (_b = this.normalizeStringHelper) === null || _b === undefined ? undefined : _b.normalize(String(data.brand));
+                const eventVariantBrand = (_c = this.normalizeStringHelper) === null || _c === undefined ? undefined : _c.normalize(String(data.variant));
                 const isProductMatch = [eventProductId, eventProductBrand, eventVariantBrand].some((id) => spotRelatedProductIdsSet.has(id));
                 if (!isProductMatch) {
                     continue;
@@ -20935,7 +21359,7 @@ class MonitorService {
                     event: eventData.event,
                 });
                 // Update the spots in the local storage
-                (_d = this.localStorageService) === null || _d === void 0 ? void 0 : _d.setSpot(spot.spotId, {
+                (_d = this.localStorageService) === null || _d === undefined ? undefined : _d.setSpot(spot.spotId, {
                     placementId: spot.placementId,
                     spotId: spot.spotId,
                     spotType: spot.spotType,
@@ -20999,9 +21423,9 @@ class SelectionService extends BaseApi {
         }
         const { isOk, val, isErr } = await this.post(SELECTION_API_PATH, data, {});
         if (isErr) {
-            return { 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 === undefined ? undefined : isErr.errorMessage})` };
         }
-        if (isOk && val && val.data && (val === null || val === void 0 ? void 0 : val.refresh.token)) {
+        if (isOk && val && val.data && (val === null || val === undefined ? undefined : val.refresh.token)) {
             this.authInfo.authenticated = true;
             this.authInfo.token = val.refresh.token;
             return val.data.spots;
@@ -21116,7 +21540,7 @@ class SpotManagerService {
             spotId: spot.id,
             spotType: spot.spot,
             events: spot.events,
-            productIds: (_a = spot.productIds) !== null && _a !== void 0 ? _a : [],
+            productIds: (_a = spot.productIds) !== null && _a !== undefined ? _a : [],
         });
     }
     async handleClickEvent({ placementId, spot }) {
@@ -21129,7 +21553,7 @@ class SpotManagerService {
         await fireEvent({
             spotType: spot.spot,
             event: RMN_SPOT_EVENT.CLICK,
-            eventUrl: (_b = (_a = spot.events.find((event) => event.event === RMN_SPOT_EVENT.CLICK)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+            eventUrl: (_b = (_a = spot.events.find((event) => event.event === RMN_SPOT_EVENT.CLICK)) === null || _a === undefined ? undefined : _a.url) !== null && _b !== undefined ? _b : '',
         });
     }
     handleImpressionEvent(placementId, spot) {
@@ -21143,7 +21567,7 @@ class SpotManagerService {
             await fireEvent({
                 spotType: spot.spot,
                 event: RMN_SPOT_EVENT.IMPRESSION,
-                eventUrl: (_b = (_a = spot.events.find((event) => event.event === RMN_SPOT_EVENT.IMPRESSION)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+                eventUrl: (_b = (_a = spot.events.find((event) => event.event === RMN_SPOT_EVENT.IMPRESSION)) === null || _a === undefined ? undefined : _a.url) !== null && _b !== undefined ? _b : '',
             });
         })();
     }
@@ -21218,7 +21642,7 @@ function validateInjectData(inject) {
  */
 function clearPlacement(placementId) {
     var _a;
-    (_a = document.getElementById(placementId)) === null || _a === void 0 ? void 0 : _a.replaceChildren();
+    (_a = document.getElementById(placementId)) === null || _a === undefined ? undefined : _a.replaceChildren();
 }
 /**
  * Prepares the spot placement for rendering by taking care of its styling.
@@ -21252,10 +21676,10 @@ function overrideSpotColors(spot, colors) {
     const { textColor, backgroundColor, ctaTextColor, ctaBorderColor } = colors;
     return {
         ...spot,
-        textColor: textColor !== null && textColor !== void 0 ? textColor : spot.textColor,
-        backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : spot.backgroundColor,
-        ctaTextColor: ctaTextColor !== null && ctaTextColor !== void 0 ? ctaTextColor : spot.ctaTextColor,
-        ctaBorderColor: ctaBorderColor !== null && ctaBorderColor !== void 0 ? ctaBorderColor : spot.ctaBorderColor,
+        textColor: textColor !== null && textColor !== undefined ? textColor : spot.textColor,
+        backgroundColor: backgroundColor !== null && backgroundColor !== undefined ? backgroundColor : spot.backgroundColor,
+        ctaTextColor: ctaTextColor !== null && ctaTextColor !== undefined ? ctaTextColor : spot.ctaTextColor,
+        ctaBorderColor: ctaBorderColor !== null && ctaBorderColor !== undefined ? ctaBorderColor : spot.ctaBorderColor,
     };
 }
 // Sets the id for the user who is browsing the website
@@ -21375,7 +21799,7 @@ class BrowserRmnClient {
             }, false);
             prepareSpotPlacement(placement);
             const skeletonElement = this.elementService.createSkeletonElement({
-                fluid: (_b = (_a = injectData === null || injectData === void 0 ? void 0 : injectData.config) === null || _a === void 0 ? void 0 : _a.fluid) !== null && _b !== void 0 ? _b : globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.fluid,
+                fluid: (_b = (_a = injectData === null || injectData === undefined ? undefined : injectData.config) === null || _a === undefined ? undefined : _a.fluid) !== null && _b !== undefined ? _b : globalConfig === null || globalConfig === undefined ? undefined : globalConfig.fluid,
                 spotType: injectData.spotType,
             });
             if (!skeletonElement) {
@@ -21387,7 +21811,7 @@ class BrowserRmnClient {
                 });
             }
             if (skeletonElement) {
-                placement === null || placement === void 0 ? void 0 : placement.replaceChildren(skeletonElement);
+                placement === null || placement === undefined ? undefined : placement.replaceChildren(skeletonElement);
             }
             validPlacements.set(placementId, placement);
             this.spotManagerService.updateSpotLifecycleState(injectData.placementId, {
@@ -21402,11 +21826,18 @@ class BrowserRmnClient {
         const validInjectPlacements = Array.from(validPlacements.keys())
             .map((id) => injectMap.get(id))
             .filter(Boolean);
-        // Make the spot selection request
-        const response = await this.injectSpotSelectionRequest({
-            ...params,
-            inject: validInjectPlacements,
-        });
+        let response;
+        // Use custom spots if provided
+        if (params.customSpots) {
+            response = params.customSpots;
+        }
+        else {
+            // Make the spot selection request
+            response = await this.injectSpotSelectionRequest({
+                ...params,
+                inject: validInjectPlacements,
+            });
+        }
         // Handle request error state
         if (typeof response === 'object' && 'error' in response) {
             this.spotManagerService.updateSpotLifecycleState('all', {
@@ -21423,9 +21854,9 @@ class BrowserRmnClient {
         validPlacements.forEach((placement, placementId) => {
             var _a;
             const injectData = injectMap.get(placementId);
-            const itemConfig = (_a = injectData === null || injectData === void 0 ? void 0 : injectData.config) !== null && _a !== void 0 ? _a : globalConfig;
+            const itemConfig = (_a = injectData === null || injectData === undefined ? undefined : injectData.config) !== null && _a !== undefined ? _a : globalConfig;
             const spots = response[placementId];
-            if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
+            if (!(spots === null || spots === undefined ? undefined : spots.length)) {
                 this.spotManagerService.updateSpotLifecycleState(injectData.placementId, {
                     state: {
                         error: `No spots found for type "${injectData.spotType}".`,
@@ -21471,12 +21902,12 @@ class BrowserRmnClient {
                 isCarouselItem: false,
             },
         });
-        const spotData = overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
+        const spotData = overrideSpotColors(spot, config === null || config === undefined ? undefined : config.colors);
         const spotElement = this.elementService.createSpotElement({
             spot: spotData,
             config: {
                 prefix: '',
-                fluid: spot.spot === RMN_SPOT_TYPE.RB_IN_TEXT ? true : ((_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false),
+                fluid: spot.spot === RMN_SPOT_TYPE.RB_IN_TEXT ? true : ((_a = config === null || config === undefined ? undefined : config.fluid) !== null && _a !== undefined ? _a : false),
                 useShadowDom: true,
             },
         });
@@ -21496,8 +21927,8 @@ class BrowserRmnClient {
             placementId,
             spotElement,
         });
-        placement === null || placement === void 0 ? void 0 : placement.replaceChildren(spotElement);
-        if (config === null || config === void 0 ? void 0 : config.listenRenderedSpotData) {
+        placement === null || placement === undefined ? undefined : placement.replaceChildren(spotElement);
+        if (config === null || config === undefined ? undefined : config.listenRenderedSpotData) {
             this.spotManagerService.publish(RMN_EVENT.RENDERED_SPOT_DATA, {
                 placementId,
                 data: [spotData],
@@ -21541,7 +21972,7 @@ class BrowserRmnClient {
                     isCarouselItem: true,
                 },
             });
-            const spot = overrideSpotColors(spotItem, config === null || config === void 0 ? void 0 : config.colors);
+            const spot = overrideSpotColors(spotItem, config === null || config === undefined ? undefined : config.colors);
             const spotElement = this.elementService.createSpotElement({
                 spot,
                 config: {
@@ -21577,11 +22008,11 @@ class BrowserRmnClient {
         const carouselElement = this.elementService.createCarouselElement({
             slides: carouselSlides,
             config: {
-                fluid: config === null || config === void 0 ? void 0 : config.fluid,
+                fluid: config === null || config === undefined ? undefined : 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
-                ...config === null || config === void 0 ? void 0 : config.carousel,
+                minScale: (_a = config === null || config === undefined ? undefined : config.minScale) !== null && _a !== undefined ? _a : 0.25, // Scale down to 25% of the original size
+                ...config === null || config === undefined ? undefined : config.carousel,
             },
         });
         if (!carouselElement) {
@@ -21595,8 +22026,8 @@ class BrowserRmnClient {
             clearPlacement(placementId);
             return;
         }
-        placement === null || placement === void 0 ? void 0 : placement.replaceChildren(carouselElement);
-        if (config === null || config === void 0 ? void 0 : config.listenRenderedSpotData) {
+        placement === null || placement === undefined ? undefined : placement.replaceChildren(carouselElement);
+        if (config === null || config === undefined ? undefined : config.listenRenderedSpotData) {
             this.spotManagerService.publish(RMN_EVENT.RENDERED_SPOT_DATA, {
                 placementId,
                 data: spots,
@@ -21626,11 +22057,11 @@ class BrowserRmnClient {
         const spots = inject.map((item) => ({
             placementId: item.placementId,
             spot: item.spotType,
-            count: item === null || item === void 0 ? void 0 : item.count,
-            ...item === null || item === void 0 ? void 0 : item.filter,
+            count: item === null || item === undefined ? undefined : item.count,
+            ...item === null || item === undefined ? undefined : item.filter,
         }));
         const request = {
-            url: config === null || config === void 0 ? void 0 : config.url,
+            url: config === null || config === undefined ? undefined : config.url,
             filter,
             spots,
         };