@depict-ai/ui 4.10.17 → 4.10.19

package/ES10/index.cjs

@@ -115,7 +115,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.17";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.19";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $52FdA$solidjs.createSignal(false);
   $52FdA$solidjs.onCleanup($52FdA$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -8252,7 +8252,9 @@ async function $8e8c89c02c16dc7b$export$5d2f6cd705125cd3() {
   $8e8c89c02c16dc7b$var$cachedHlsModule = hlsModule;
   return hlsModule;
 }
-var $c19709057a32b2e7$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<video class=d-standard-content>`);
+var $c19709057a32b2e7$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<video class=d-standard-content>`),
+  $c19709057a32b2e7$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=d-standard-content-text-group><span class=d-standard-content-text></span><span class=d-standard-content-cta>`),
+  $c19709057a32b2e7$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class=d-standard-content-text>`);
 function $c19709057a32b2e7$export$780a853d15174484(_ref) {
   let {
     link_: link_,
@@ -8261,7 +8263,10 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
     setAspectRatioWas_: setAspectRatioWas_,
     mediaUrl_: mediaUrl_,
     aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-    imageResizer_: imageResizer_
+    imageResizer_: imageResizer_,
+    text_: text_,
+    textPosition_: textPosition_,
+    cta_: cta_
   } = _ref;
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $52FdA$solidjs.createSignal();
@@ -8365,10 +8370,47 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
             }
           })];
         }
+      }), $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+        when: text_,
+        get children() {
+          return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+            when: cta_,
+            get fallback() {
+              return (() => {
+                var _el$5 = $52FdA$solidjsweb.getNextElement($c19709057a32b2e7$var$_tmpl$3);
+                $52FdA$solidjsweb.setAttribute(_el$5, "data-position", textPosition_ || "bottom-center");
+                $52FdA$solidjsweb.insert(_el$5, text_);
+                return _el$5;
+              })();
+            },
+            get children() {
+              var _el$2 = $52FdA$solidjsweb.getNextElement($c19709057a32b2e7$var$_tmpl$2),
+                _el$3 = _el$2.firstChild,
+                _el$4 = _el$3.nextSibling;
+              $52FdA$solidjsweb.setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
+              $52FdA$solidjsweb.setAttribute(_el$3, "data-position", textPosition_ || "bottom-center");
+              $52FdA$solidjsweb.insert(_el$3, text_);
+              $52FdA$solidjsweb.setAttribute(_el$4, "data-position", textPosition_ || "bottom-center");
+              $52FdA$solidjsweb.insert(_el$4, cta_);
+              return _el$2;
+            }
+          });
+        }
       })];
     }
   }));
 }
+const $0c035bbe7e30b438$export$af2c67164f68e9e9 = content => {
+  const {
+    link: link,
+    type: type,
+    url: url,
+    text: text,
+    text_position: text_position,
+    cta: cta
+  } = content;
+  return JSON.stringify([link, type, url, text !== null && text !== void 0 ? text : null, text_position !== null && text_position !== void 0 ? text_position : null, cta !== null && cta !== void 0 ? cta : null]);
+};
 function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
@@ -8404,13 +8446,15 @@ function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position,
+          cta: cta
         }
       } = row;
-      // Key the "content"-component by the link, type and url, so we can reuse the component (and later downstream the block elements) if it's the same
-      // This makes the block not flicker when going backwards/forwards if the content is the same on both pages
-      // Also it lets us rewrite the blocks state in the history based on the block aspect ratio without infinite looping
-      const componentCacheKey = JSON.stringify([link, type, url]);
+      const componentCacheKey = $0c035bbe7e30b438$export$af2c67164f68e9e9(row.content);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $52FdA$solidjsweb.createComponent((0, $c19709057a32b2e7$export$780a853d15174484), {
@@ -8418,15 +8462,18 @@ function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position,
+          cta_: cta
         });
         contentComponents.set(componentCacheKey, component);
       }

package/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.17";
+export const version = "4.10.19";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/ES10/index.js

@@ -10,7 +10,7 @@ import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.17";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.19";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $8tj43$createSignal(false);
   $8tj43$onCleanup($8tj43$javascript_media_query(media_query, _ref => {
@@ -8147,7 +8147,9 @@ async function $e92c154db502596d$export$5d2f6cd705125cd3() {
   $e92c154db502596d$var$cachedHlsModule = hlsModule;
   return hlsModule;
 }
-var $3b772ef9a35560fe$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<video class=d-standard-content>`);
+var $3b772ef9a35560fe$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<video class=d-standard-content>`),
+  $3b772ef9a35560fe$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class=d-standard-content-text-group><span class=d-standard-content-text></span><span class=d-standard-content-cta>`),
+  $3b772ef9a35560fe$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<span class=d-standard-content-text>`);
 function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
   let {
     link_: link_,
@@ -8156,7 +8158,10 @@ function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
     setAspectRatioWas_: setAspectRatioWas_,
     mediaUrl_: mediaUrl_,
     aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-    imageResizer_: imageResizer_
+    imageResizer_: imageResizer_,
+    text_: text_,
+    textPosition_: textPosition_,
+    cta_: cta_
   } = _ref;
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $8tj43$createSignal();
@@ -8260,10 +8265,47 @@ function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
             }
           })];
         }
+      }), $8tj43$createComponent((0, $8tj43$Show), {
+        when: text_,
+        get children() {
+          return $8tj43$createComponent((0, $8tj43$Show), {
+            when: cta_,
+            get fallback() {
+              return (() => {
+                var _el$5 = $8tj43$getNextElement($3b772ef9a35560fe$var$_tmpl$3);
+                $8tj43$setAttribute(_el$5, "data-position", textPosition_ || "bottom-center");
+                $8tj43$insert(_el$5, text_);
+                return _el$5;
+              })();
+            },
+            get children() {
+              var _el$2 = $8tj43$getNextElement($3b772ef9a35560fe$var$_tmpl$2),
+                _el$3 = _el$2.firstChild,
+                _el$4 = _el$3.nextSibling;
+              $8tj43$setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
+              $8tj43$setAttribute(_el$3, "data-position", textPosition_ || "bottom-center");
+              $8tj43$insert(_el$3, text_);
+              $8tj43$setAttribute(_el$4, "data-position", textPosition_ || "bottom-center");
+              $8tj43$insert(_el$4, cta_);
+              return _el$2;
+            }
+          });
+        }
       })];
     }
   }));
 }
+const $12ff24fdc4b26d88$export$af2c67164f68e9e9 = content => {
+  const {
+    link: link,
+    type: type,
+    url: url,
+    text: text,
+    text_position: text_position,
+    cta: cta
+  } = content;
+  return JSON.stringify([link, type, url, text !== null && text !== void 0 ? text : null, text_position !== null && text_position !== void 0 ? text_position : null, cta !== null && cta !== void 0 ? cta : null]);
+};
 function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
@@ -8299,13 +8341,15 @@ function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position,
+          cta: cta
         }
       } = row;
-      // Key the "content"-component by the link, type and url, so we can reuse the component (and later downstream the block elements) if it's the same
-      // This makes the block not flicker when going backwards/forwards if the content is the same on both pages
-      // Also it lets us rewrite the blocks state in the history based on the block aspect ratio without infinite looping
-      const componentCacheKey = JSON.stringify([link, type, url]);
+      const componentCacheKey = $12ff24fdc4b26d88$export$af2c67164f68e9e9(row.content);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $8tj43$createComponent((0, $3b772ef9a35560fe$export$780a853d15174484), {
@@ -8313,15 +8357,18 @@ function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position,
+          cta_: cta
         });
         contentComponents.set(componentCacheKey, component);
       }

package/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.17";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.19";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -7815,7 +7815,9 @@ async function $20ff40266d725403$export$5d2f6cd705125cd3() {
   $20ff40266d725403$var$cachedHlsModule = hlsModule;
   return hlsModule;
 }
-var $32c662f618f5d80d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<video class=d-standard-content>`);
+var $32c662f618f5d80d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<video class=d-standard-content>`),
+  $32c662f618f5d80d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=d-standard-content-text-group><span class=d-standard-content-text></span><span class=d-standard-content-cta>`),
+  $32c662f618f5d80d$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=d-standard-content-text>`);
 function $32c662f618f5d80d$export$780a853d15174484({
   link_: link_,
   type_: type_,
@@ -7823,7 +7825,10 @@ function $32c662f618f5d80d$export$780a853d15174484({
   setAspectRatioWas_: setAspectRatioWas_,
   mediaUrl_: mediaUrl_,
   aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-  imageResizer_: imageResizer_
+  imageResizer_: imageResizer_,
+  text_: text_,
+  textPosition_: textPosition_,
+  cta_: cta_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $gVhhF$solidjs.createSignal();
@@ -7921,10 +7926,47 @@ function $32c662f618f5d80d$export$780a853d15174484({
             }
           })];
         }
+      }), $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+        when: text_,
+        get children() {
+          return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+            when: cta_,
+            get fallback() {
+              return (() => {
+                var _el$5 = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$3);
+                $gVhhF$solidjsweb.setAttribute(_el$5, "data-position", textPosition_ || "bottom-center");
+                $gVhhF$solidjsweb.insert(_el$5, text_);
+                return _el$5;
+              })();
+            },
+            get children() {
+              var _el$2 = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$2),
+                _el$3 = _el$2.firstChild,
+                _el$4 = _el$3.nextSibling;
+              $gVhhF$solidjsweb.setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
+              $gVhhF$solidjsweb.setAttribute(_el$3, "data-position", textPosition_ || "bottom-center");
+              $gVhhF$solidjsweb.insert(_el$3, text_);
+              $gVhhF$solidjsweb.setAttribute(_el$4, "data-position", textPosition_ || "bottom-center");
+              $gVhhF$solidjsweb.insert(_el$4, cta_);
+              return _el$2;
+            }
+          });
+        }
       })];
     }
   }));
 }
+const $0a80939bf0a1e9cc$export$af2c67164f68e9e9 = content => {
+  const {
+    link: link,
+    type: type,
+    url: url,
+    text: text,
+    text_position: text_position,
+    cta: cta
+  } = content;
+  return JSON.stringify([link, type, url, text ?? null, text_position ?? null, cta ?? null]);
+};
 function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
@@ -7959,13 +8001,15 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position,
+          cta: cta
         }
       } = row;
-      // Key the "content"-component by the link, type and url, so we can reuse the component (and later downstream the block elements) if it's the same
-      // This makes the block not flicker when going backwards/forwards if the content is the same on both pages
-      // Also it lets us rewrite the blocks state in the history based on the block aspect ratio without infinite looping
-      const componentCacheKey = JSON.stringify([link, type, url]);
+      const componentCacheKey = $0a80939bf0a1e9cc$export$af2c67164f68e9e9(row.content);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $gVhhF$solidjsweb.createComponent((0, $32c662f618f5d80d$export$780a853d15174484), {
@@ -7973,15 +8017,18 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position,
+          cta_: cta
         });
         contentComponents.set(componentCacheKey, component);
       }

package/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.17";
+export const version = "4.10.19";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.17";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.19";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -7713,7 +7713,9 @@ async function $e422ea9eccb7892b$export$5d2f6cd705125cd3() {
   $e422ea9eccb7892b$var$cachedHlsModule = hlsModule;
   return hlsModule;
 }
-var $f916989c4b1be9f7$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<video class=d-standard-content>`);
+var $f916989c4b1be9f7$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<video class=d-standard-content>`),
+  $f916989c4b1be9f7$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=d-standard-content-text-group><span class=d-standard-content-text></span><span class=d-standard-content-cta>`),
+  $f916989c4b1be9f7$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<span class=d-standard-content-text>`);
 function $f916989c4b1be9f7$export$780a853d15174484({
   link_: link_,
   type_: type_,
@@ -7721,7 +7723,10 @@ function $f916989c4b1be9f7$export$780a853d15174484({
   setAspectRatioWas_: setAspectRatioWas_,
   mediaUrl_: mediaUrl_,
   aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-  imageResizer_: imageResizer_
+  imageResizer_: imageResizer_,
+  text_: text_,
+  textPosition_: textPosition_,
+  cta_: cta_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $9HbP8$createSignal();
@@ -7819,10 +7824,47 @@ function $f916989c4b1be9f7$export$780a853d15174484({
             }
           })];
         }
+      }), $9HbP8$createComponent((0, $9HbP8$Show), {
+        when: text_,
+        get children() {
+          return $9HbP8$createComponent((0, $9HbP8$Show), {
+            when: cta_,
+            get fallback() {
+              return (() => {
+                var _el$5 = $9HbP8$getNextElement($f916989c4b1be9f7$var$_tmpl$3);
+                $9HbP8$setAttribute(_el$5, "data-position", textPosition_ || "bottom-center");
+                $9HbP8$insert(_el$5, text_);
+                return _el$5;
+              })();
+            },
+            get children() {
+              var _el$2 = $9HbP8$getNextElement($f916989c4b1be9f7$var$_tmpl$2),
+                _el$3 = _el$2.firstChild,
+                _el$4 = _el$3.nextSibling;
+              $9HbP8$setAttribute(_el$2, "data-position", textPosition_ || "bottom-center");
+              $9HbP8$setAttribute(_el$3, "data-position", textPosition_ || "bottom-center");
+              $9HbP8$insert(_el$3, text_);
+              $9HbP8$setAttribute(_el$4, "data-position", textPosition_ || "bottom-center");
+              $9HbP8$insert(_el$4, cta_);
+              return _el$2;
+            }
+          });
+        }
       })];
     }
   }));
 }
+const $486360b09f0d5729$export$af2c67164f68e9e9 = content => {
+  const {
+    link: link,
+    type: type,
+    url: url,
+    text: text,
+    text_position: text_position,
+    cta: cta
+  } = content;
+  return JSON.stringify([link, type, url, text ?? null, text_position ?? null, cta ?? null]);
+};
 function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
@@ -7857,13 +7899,15 @@ function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position,
+          cta: cta
         }
       } = row;
-      // Key the "content"-component by the link, type and url, so we can reuse the component (and later downstream the block elements) if it's the same
-      // This makes the block not flicker when going backwards/forwards if the content is the same on both pages
-      // Also it lets us rewrite the blocks state in the history based on the block aspect ratio without infinite looping
-      const componentCacheKey = JSON.stringify([link, type, url]);
+      const componentCacheKey = $486360b09f0d5729$export$af2c67164f68e9e9(row.content);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $9HbP8$createComponent((0, $f916989c4b1be9f7$export$780a853d15174484), {
@@ -7871,15 +7915,18 @@ function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position,
+          cta_: cta
         });
         contentComponents.set(componentCacheKey, component);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.17",
+  "version": "4.10.19",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,9 +236,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "^7.22.6",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.6.9",
-    "@depict-ai/types": "^5.6.7",
-    "@depict-ai/utilishared": "^2.6.7",
+    "@depict-ai/plp-styling": "^4.6.11",
+    "@depict-ai/types": "^5.6.9",
+    "@depict-ai/utilishared": "^2.6.9",
     "solid-js": "^1.9.10"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -115,7 +115,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.17";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.10.19";
 function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
   const signal = $3hooq$solidjs.createSignal(false);
   $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
@@ -6743,7 +6743,9 @@ function $f3db423dc84bc35d$export$140423fa4bfb6d63(props) {
     }
   }));
 }
-var $c19709057a32b2e7$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'];
+var $c19709057a32b2e7$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'],
+  $c19709057a32b2e7$var$_tmpl$2 = ["<div", ' class="d-standard-content-text-group"', '><span class="d-standard-content-text"', ">", '</span><span class="d-standard-content-cta"', ">", "</span></div>"],
+  $c19709057a32b2e7$var$_tmpl$3 = ["<span", ' class="d-standard-content-text"', ">", "</span>"];
 function $c19709057a32b2e7$export$780a853d15174484(_ref) {
   let {
     link_: link_,
@@ -6752,7 +6754,10 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
     setAspectRatioWas_: setAspectRatioWas_,
     mediaUrl_: mediaUrl_,
     aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-    imageResizer_: imageResizer_
+    imageResizer_: imageResizer_,
+    text_: text_,
+    textPosition_: textPosition_,
+    cta_: cta_
   } = _ref;
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $3hooq$solidjs.createSignal();
@@ -6817,10 +6822,34 @@ function $c19709057a32b2e7$export$780a853d15174484(_ref) {
             }
           })];
         }
+      }), $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+        when: text_,
+        get children() {
+          return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+            when: cta_,
+            get fallback() {
+              return $3hooq$solidjsweb.ssr($c19709057a32b2e7$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("data-position", $3hooq$solidjsweb.escape(textPosition_, true) || "bottom-center", false), $3hooq$solidjsweb.escape(text_));
+            },
+            get children() {
+              return $3hooq$solidjsweb.ssr($c19709057a32b2e7$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("data-position", $3hooq$solidjsweb.escape(textPosition_, true) || "bottom-center", false), $3hooq$solidjsweb.ssrAttribute("data-position", $3hooq$solidjsweb.escape(textPosition_, true) || "bottom-center", false), $3hooq$solidjsweb.escape(text_), $3hooq$solidjsweb.ssrAttribute("data-position", $3hooq$solidjsweb.escape(textPosition_, true) || "bottom-center", false), $3hooq$solidjsweb.escape(cta_));
+            }
+          });
+        }
       })];
     }
   }));
 }
+const $0c035bbe7e30b438$export$af2c67164f68e9e9 = content => {
+  const {
+    link: link,
+    type: type,
+    url: url,
+    text: text,
+    text_position: text_position,
+    cta: cta
+  } = content;
+  return JSON.stringify([link, type, url, text !== null && text !== void 0 ? text : null, text_position !== null && text_position !== void 0 ? text_position : null, cta !== null && cta !== void 0 ? cta : null]);
+};
 function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
@@ -6856,13 +6885,15 @@ function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position,
+          cta: cta
         }
       } = row;
-      // Key the "content"-component by the link, type and url, so we can reuse the component (and later downstream the block elements) if it's the same
-      // This makes the block not flicker when going backwards/forwards if the content is the same on both pages
-      // Also it lets us rewrite the blocks state in the history based on the block aspect ratio without infinite looping
-      const componentCacheKey = JSON.stringify([link, type, url]);
+      const componentCacheKey = $0c035bbe7e30b438$export$af2c67164f68e9e9(row.content);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $3hooq$solidjsweb.createComponent((0, $c19709057a32b2e7$export$780a853d15174484), {
@@ -6870,15 +6901,18 @@ function $0c035bbe7e30b438$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position,
+          cta_: cta
         });
         contentComponents.set(componentCacheKey, component);
       }

package/server/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.17";
+export const version = "4.10.19";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import $b8hua$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpe
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.17";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.10.19";
 function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   const signal = $b8hua$createSignal(false);
   $b8hua$onCleanup($b8hua$javascript_media_query(media_query, _ref => {
@@ -6638,7 +6638,9 @@ function $98688279b9059f50$export$140423fa4bfb6d63(props) {
     }
   }));
 }
-var $3b772ef9a35560fe$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'];
+var $3b772ef9a35560fe$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'],
+  $3b772ef9a35560fe$var$_tmpl$2 = ["<div", ' class="d-standard-content-text-group"', '><span class="d-standard-content-text"', ">", '</span><span class="d-standard-content-cta"', ">", "</span></div>"],
+  $3b772ef9a35560fe$var$_tmpl$3 = ["<span", ' class="d-standard-content-text"', ">", "</span>"];
 function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
   let {
     link_: link_,
@@ -6647,7 +6649,10 @@ function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
     setAspectRatioWas_: setAspectRatioWas_,
     mediaUrl_: mediaUrl_,
     aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-    imageResizer_: imageResizer_
+    imageResizer_: imageResizer_,
+    text_: text_,
+    textPosition_: textPosition_,
+    cta_: cta_
   } = _ref;
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $b8hua$createSignal();
@@ -6712,10 +6717,34 @@ function $3b772ef9a35560fe$export$780a853d15174484(_ref) {
             }
           })];
         }
+      }), $b8hua$createComponent((0, $b8hua$Show), {
+        when: text_,
+        get children() {
+          return $b8hua$createComponent((0, $b8hua$Show), {
+            when: cta_,
+            get fallback() {
+              return $b8hua$ssr($3b772ef9a35560fe$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("data-position", $b8hua$escape(textPosition_, true) || "bottom-center", false), $b8hua$escape(text_));
+            },
+            get children() {
+              return $b8hua$ssr($3b772ef9a35560fe$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("data-position", $b8hua$escape(textPosition_, true) || "bottom-center", false), $b8hua$ssrAttribute("data-position", $b8hua$escape(textPosition_, true) || "bottom-center", false), $b8hua$escape(text_), $b8hua$ssrAttribute("data-position", $b8hua$escape(textPosition_, true) || "bottom-center", false), $b8hua$escape(cta_));
+            }
+          });
+        }
       })];
     }
   }));
 }
+const $12ff24fdc4b26d88$export$af2c67164f68e9e9 = content => {
+  const {
+    link: link,
+    type: type,
+    url: url,
+    text: text,
+    text_position: text_position,
+    cta: cta
+  } = content;
+  return JSON.stringify([link, type, url, text !== null && text !== void 0 ? text : null, text_position !== null && text_position !== void 0 ? text_position : null, cta !== null && cta !== void 0 ? cta : null]);
+};
 function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
@@ -6751,13 +6780,15 @@ function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position,
+          cta: cta
         }
       } = row;
-      // Key the "content"-component by the link, type and url, so we can reuse the component (and later downstream the block elements) if it's the same
-      // This makes the block not flicker when going backwards/forwards if the content is the same on both pages
-      // Also it lets us rewrite the blocks state in the history based on the block aspect ratio without infinite looping
-      const componentCacheKey = JSON.stringify([link, type, url]);
+      const componentCacheKey = $12ff24fdc4b26d88$export$af2c67164f68e9e9(row.content);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $b8hua$createComponent((0, $3b772ef9a35560fe$export$780a853d15174484), {
@@ -6765,15 +6796,18 @@ function $12ff24fdc4b26d88$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position,
+          cta_: cta
         });
         contentComponents.set(componentCacheKey, component);
       }

package/server/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.17";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.19";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $5vyXB$solidjs.createSignal(false);
   $5vyXB$solidjs.onCleanup($5vyXB$depictaiutilishared.javascript_media_query(media_query, ({
@@ -6362,7 +6362,9 @@ function $d212a67662c5cf38$export$140423fa4bfb6d63(props) {
     }
   }));
 }
-var $32c662f618f5d80d$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'];
+var $32c662f618f5d80d$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'],
+  $32c662f618f5d80d$var$_tmpl$2 = ["<div", ' class="d-standard-content-text-group"', '><span class="d-standard-content-text"', ">", '</span><span class="d-standard-content-cta"', ">", "</span></div>"],
+  $32c662f618f5d80d$var$_tmpl$3 = ["<span", ' class="d-standard-content-text"', ">", "</span>"];
 function $32c662f618f5d80d$export$780a853d15174484({
   link_: link_,
   type_: type_,
@@ -6370,7 +6372,10 @@ function $32c662f618f5d80d$export$780a853d15174484({
   setAspectRatioWas_: setAspectRatioWas_,
   mediaUrl_: mediaUrl_,
   aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-  imageResizer_: imageResizer_
+  imageResizer_: imageResizer_,
+  text_: text_,
+  textPosition_: textPosition_,
+  cta_: cta_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $5vyXB$solidjs.createSignal();
@@ -6429,10 +6434,34 @@ function $32c662f618f5d80d$export$780a853d15174484({
             }
           })];
         }
+      }), $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+        when: text_,
+        get children() {
+          return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+            when: cta_,
+            get fallback() {
+              return $5vyXB$solidjsweb.ssr($32c662f618f5d80d$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("data-position", $5vyXB$solidjsweb.escape(textPosition_, true) || "bottom-center", false), $5vyXB$solidjsweb.escape(text_));
+            },
+            get children() {
+              return $5vyXB$solidjsweb.ssr($32c662f618f5d80d$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("data-position", $5vyXB$solidjsweb.escape(textPosition_, true) || "bottom-center", false), $5vyXB$solidjsweb.ssrAttribute("data-position", $5vyXB$solidjsweb.escape(textPosition_, true) || "bottom-center", false), $5vyXB$solidjsweb.escape(text_), $5vyXB$solidjsweb.ssrAttribute("data-position", $5vyXB$solidjsweb.escape(textPosition_, true) || "bottom-center", false), $5vyXB$solidjsweb.escape(cta_));
+            }
+          });
+        }
       })];
     }
   }));
 }
+const $0a80939bf0a1e9cc$export$af2c67164f68e9e9 = content => {
+  const {
+    link: link,
+    type: type,
+    url: url,
+    text: text,
+    text_position: text_position,
+    cta: cta
+  } = content;
+  return JSON.stringify([link, type, url, text ?? null, text_position ?? null, cta ?? null]);
+};
 function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
@@ -6467,13 +6496,15 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position,
+          cta: cta
         }
       } = row;
-      // Key the "content"-component by the link, type and url, so we can reuse the component (and later downstream the block elements) if it's the same
-      // This makes the block not flicker when going backwards/forwards if the content is the same on both pages
-      // Also it lets us rewrite the blocks state in the history based on the block aspect ratio without infinite looping
-      const componentCacheKey = JSON.stringify([link, type, url]);
+      const componentCacheKey = $0a80939bf0a1e9cc$export$af2c67164f68e9e9(row.content);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $5vyXB$solidjsweb.createComponent((0, $32c662f618f5d80d$export$780a853d15174484), {
@@ -6481,15 +6512,18 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position,
+          cta_: cta
         });
         contentComponents.set(componentCacheKey, component);
       }

package/server/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.17";
+export const version = "4.10.19";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.17";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.19";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $i7OB2$createSignal(false);
   $i7OB2$onCleanup($i7OB2$javascript_media_query(media_query, ({
@@ -6260,7 +6260,9 @@ function $70bb27cc6be01fc7$export$140423fa4bfb6d63(props) {
     }
   }));
 }
-var $f916989c4b1be9f7$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'];
+var $f916989c4b1be9f7$var$_tmpl$ = ["<video", ' disablepictureinpicture="true" class="d-standard-content"></video>'],
+  $f916989c4b1be9f7$var$_tmpl$2 = ["<div", ' class="d-standard-content-text-group"', '><span class="d-standard-content-text"', ">", '</span><span class="d-standard-content-cta"', ">", "</span></div>"],
+  $f916989c4b1be9f7$var$_tmpl$3 = ["<span", ' class="d-standard-content-text"', ">", "</span>"];
 function $f916989c4b1be9f7$export$780a853d15174484({
   link_: link_,
   type_: type_,
@@ -6268,7 +6270,10 @@ function $f916989c4b1be9f7$export$780a853d15174484({
   setAspectRatioWas_: setAspectRatioWas_,
   mediaUrl_: mediaUrl_,
   aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
-  imageResizer_: imageResizer_
+  imageResizer_: imageResizer_,
+  text_: text_,
+  textPosition_: textPosition_,
+  cta_: cta_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $i7OB2$createSignal();
@@ -6327,10 +6332,34 @@ function $f916989c4b1be9f7$export$780a853d15174484({
             }
           })];
         }
+      }), $i7OB2$createComponent((0, $i7OB2$Show), {
+        when: text_,
+        get children() {
+          return $i7OB2$createComponent((0, $i7OB2$Show), {
+            when: cta_,
+            get fallback() {
+              return $i7OB2$ssr($f916989c4b1be9f7$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("data-position", $i7OB2$escape(textPosition_, true) || "bottom-center", false), $i7OB2$escape(text_));
+            },
+            get children() {
+              return $i7OB2$ssr($f916989c4b1be9f7$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("data-position", $i7OB2$escape(textPosition_, true) || "bottom-center", false), $i7OB2$ssrAttribute("data-position", $i7OB2$escape(textPosition_, true) || "bottom-center", false), $i7OB2$escape(text_), $i7OB2$ssrAttribute("data-position", $i7OB2$escape(textPosition_, true) || "bottom-center", false), $i7OB2$escape(cta_));
+            }
+          });
+        }
       })];
     }
   }));
 }
+const $486360b09f0d5729$export$af2c67164f68e9e9 = content => {
+  const {
+    link: link,
+    type: type,
+    url: url,
+    text: text,
+    text_position: text_position,
+    cta: cta
+  } = content;
+  return JSON.stringify([link, type, url, text ?? null, text_position ?? null, cta ?? null]);
+};
 function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
@@ -6365,13 +6394,15 @@ function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_
         content: {
           link: link,
           type: type,
-          url: url
+          url: url,
+          text: text,
+          text_position: text_position,
+          cta: cta
         }
       } = row;
-      // Key the "content"-component by the link, type and url, so we can reuse the component (and later downstream the block elements) if it's the same
-      // This makes the block not flicker when going backwards/forwards if the content is the same on both pages
-      // Also it lets us rewrite the blocks state in the history based on the block aspect ratio without infinite looping
-      const componentCacheKey = JSON.stringify([link, type, url]);
+      const componentCacheKey = $486360b09f0d5729$export$af2c67164f68e9e9(row.content);
+      // The aspect ratio depends only on the media, so its history key must stay the pre-text 3-element shape — widening it would orphan every ratio already persisted in history.state
+      const mediaCacheKey = JSON.stringify([link, type, url]);
       let component = contentComponents.get(componentCacheKey);
       if (!component) {
         component = () => $i7OB2$createComponent((0, $f916989c4b1be9f7$export$780a853d15174484), {
@@ -6379,15 +6410,18 @@ function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_
           type_: type,
           mediaUrl_: url,
           router_: router_,
-          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[componentCacheKey],
+          aspectRatioWhenAloneInRow_: () => historyContentBlocks().aspectRatios[mediaCacheKey],
           setAspectRatioWas_: aspectRatio => setHistoryContentBlocks(prev => ({
             ...prev,
             aspectRatios: {
               ...prev.aspectRatios,
-              [componentCacheKey]: Math.round(aspectRatio * 100) / 100
+              [mediaCacheKey]: Math.round(aspectRatio * 100) / 100
             }
           })),
-          imageResizer_: imageResizer_
+          imageResizer_: imageResizer_,
+          text_: text,
+          textPosition_: text_position,
+          cta_: cta
         });
         contentComponents.set(componentCacheKey, component);
       }