@depict-ai/ui 4.7.29 → 4.7.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.7.29",
+  "version": "4.7.31",
   "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",

package/server/ES10/index.cjs

@@ -1,11 +1,11 @@
 var $3hooq$depictaiutilishared = require("@depict-ai/utilishared/ES10");
-var $3hooq$depictaiutilisharedlatest = require("@depict-ai/utilishared/ES10");
-var $3hooq$solidjs = require("solid-js");
 var $3hooq$solidjsweb = require("solid-js/web");
+var $3hooq$solidjs = require("solid-js");
+var $3hooq$solidjsstore = require("solid-js/store");
+var $3hooq$depictaiutilisharedlatest = require("@depict-ai/utilishared/ES10");
 var $3hooq$babelruntimehelpersdefineProperty = require("@babel/runtime/helpers/defineProperty");
 var $3hooq$babelruntimehelpersclassPrivateFieldSet = require("@babel/runtime/helpers/classPrivateFieldSet");
 var $3hooq$babelruntimehelpersclassPrivateFieldGet = require("@babel/runtime/helpers/classPrivateFieldGet");
-var $3hooq$solidjsstore = require("solid-js/store");
 require("../../multi_import_deduplicator.cjs").register_es_version("ui", "ES10");
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {
@@ -18,6 +18,7 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+$parcel$export(module.exports, "remap_blocks_to_index", () => $f8f375d6245ffff2$export$92aa5d691d588f3f);
 $parcel$export(module.exports, "useMobileHover", () => $0deb6ff75e3d67c6$export$d4d96868197be50e);
 $parcel$export(module.exports, "useVisibilityState", () => $e7a7d2fe8a8217d8$export$54299a3c81f5425);
 $parcel$export(module.exports, "useSlidableInformation", () => $ad8ec7729fffeb9c$export$eaa625fb39439e37);
@@ -110,7 +111,253 @@ $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.7.29";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.31";
+function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
+  const signal = $3hooq$solidjs.createSignal(false);
+  $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
+    let {
+      matches: matches
+    } = _ref;
+    return signal[1](matches);
+  }).remove);
+  return signal[0];
+}
+function $478e5a09664da64c$export$a79e666719b3647c(cols_at_size_) {
+  const size_active = $3hooq$solidjs.createMemo(() => cols_at_size_().map(_ref => {
+    let [n_cols, min_width, max_width] = _ref;
+    const media_query = $3hooq$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
+    const matches = $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query);
+    return [matches, n_cols];
+  }));
+  const n_cols_currently_showing = $3hooq$solidjs.createMemo(() => {
+    try {
+      const [, n_cols_currently_showing] = size_active().find(_ref2 => {
+        let [media_query] = _ref2;
+        return media_query();
+      });
+      return n_cols_currently_showing;
+    } catch (e) {
+      $3hooq$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
+      return null;
+    }
+  });
+  return n_cols_currently_showing;
+}
+var $e3d733f899558f40$var$_tmpl$ = ["<span", ' class="', '" style="', '"></span>'];
+function $e3d733f899558f40$export$acb3eaade4b23afd(props) {
+  // Work around https://github.com/solidjs/solid/issues/1980
+  return $3hooq$solidjsweb.ssr($e3d733f899558f40$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "".concat($3hooq$solidjsweb.escape(props.class, true) || "", " depict-placeholder"), $3hooq$solidjsweb.ssrStyle(props.style));
+}
+function $b8a8d61b3ec5f5ac$export$3f37af283f8fb843(props) {
+  const style = $3hooq$solidjs.createMemo(() => {
+    const {
+      style: style,
+      height: height,
+      width: width,
+      aspectRatio: aspectRatio
+    } = props;
+    const is_image = aspectRatio != undefined;
+    const size_data = is_image ? {
+      width: "100%",
+      "padding-bottom": "calc(calc(1 / ".concat(aspectRatio, ") * 100%)")
+    } : {
+      width: width,
+      height: height
+    };
+    return {
+      display: "block",
+      ...(style || {}),
+      ...size_data
+    };
+  });
+  return $3hooq$solidjsweb.createComponent((0, $e3d733f899558f40$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+}
+var $f8f375d6245ffff2$var$_tmpl$ = ["<div", ' class="content-block-wrapper" style="', '">', "</div>"];
+function $f8f375d6245ffff2$export$791ef57e62e21c3f(_ref) {
+  let {
+    content_blocks_: incoming_content_blocks,
+    cols_at_size_: cols_at_size_,
+    set_top_row_shortened_by_: set_top_row_shortened_by_
+  } = _ref;
+  // these are by row
+  const [content_blocks, set_content_blocks] = $3hooq$solidjsstore.createStore([]);
+  const n_cols_currently_showing_ = $478e5a09664da64c$export$a79e666719b3647c(cols_at_size_);
+  $3hooq$solidjs.createEffect(() => {
+    const incoming_value = incoming_content_blocks();
+    if (!incoming_value) {
+      set_content_blocks([]);
+      return;
+    }
+    set_content_blocks($3hooq$solidjsstore.reconcile(incoming_value, {
+      key: "content"
+    })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
+  });
+
+  const get_wrapped_blocks_ = $f8f375d6245ffff2$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
+  $3hooq$solidjs.createComputed(() => {
+    // Update our styling if a content block forces some items that should be in the top row into a lower one, so we can generate margin-top declarations for them
+    const top_row_block = get_wrapped_blocks_()[0];
+    const blocks_in_top_row_taken = top_row_block === null || top_row_block === void 0 ? void 0 : top_row_block.span_columns;
+    if (blocks_in_top_row_taken == undefined) {
+      // Fall back to zero if no content block in top row, since then no blocks in top row are taken
+      set_top_row_shortened_by_(0);
+      return;
+    }
+    set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
+  });
+
+  return $3hooq$solidjs.createMemo(() => $f8f375d6245ffff2$export$92aa5d691d588f3f({
+    wrapped_blocks_: get_wrapped_blocks_(),
+    n_cols_currently_showing_: n_cols_currently_showing_()
+  }).content_blocks_by_index_);
+}
+function $f8f375d6245ffff2$export$92aa5d691d588f3f(_ref2) {
+  let {
+    wrapped_blocks_: wrapped_blocks_,
+    n_cols_currently_showing_: n_cols_currently_showing_
+  } = _ref2;
+  // This computation should be quite cheap since it just moves around things into an array
+  const content_blocks_by_index_ = [];
+  const constructed_block_arrays = new WeakSet();
+  // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
+  const displaced_products_ = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
+  if (!n_cols_currently_showing_)
+    // Nope out of here if we don't know how many columns are showing
+    return {
+      content_blocks_by_index_: content_blocks_by_index_
+    };
+  for (let i = 0; i < wrapped_blocks_.length; i++) {
+    // i = row to show at
+    const block = wrapped_blocks_[i];
+    if (!block) continue; // Array can have holes/not defined places
+    const index_of_first_item_in_row = i * n_cols_currently_showing_;
+    const index_of_last_item_in_row = index_of_first_item_in_row + n_cols_currently_showing_;
+    const {
+      span_rows: span_rows,
+      position: position,
+      span_columns: span_columns
+    } = block; // span columns is already capped in the block wrapping step (wrap_blocks_in_div)
+    let target_index;
+    if (position === "left") target_index = index_of_first_item_in_row;else if (position === "right") target_index = index_of_last_item_in_row - span_columns;else if (position === "center") target_index = index_of_first_item_in_row + Math.floor((n_cols_currently_showing_ - span_columns) / 2);else throw new Error("Invalid position for content block - must be left, right or center: " + JSON.stringify(position));
+    // Calculate displacement of us by content blocks above us
+    let displacement_by_added_blocks = 0;
+    for (let j = 0; j < i; j++) {
+      const row = displaced_products_[j];
+      if (row === undefined) continue; // there were no blocks in this row
+      let displaced_items_in_row;
+      if (typeof row === "number") displaced_items_in_row = row;else {
+        displaced_items_in_row = row.filter(item => item).length;
+        displaced_products_[j] = displaced_items_in_row;
+      }
+      displacement_by_added_blocks += displaced_items_in_row;
+    }
+    const index_of_us_in_row = target_index - index_of_first_item_in_row;
+    for (let j = 0; j < index_of_us_in_row; j++) {
+      var _displaced_products_$;
+      if ((_displaced_products_$ = displaced_products_[i]) !== null && _displaced_products_$ !== void 0 && _displaced_products_$[j])
+        // Add blocks in our *current* row to the displacement, but only the ones to our left
+        displacement_by_added_blocks++;
+    }
+    // Add block to output array at the correct index
+    const final_target_index = target_index - displacement_by_added_blocks;
+    const existing_block = content_blocks_by_index_[final_target_index];
+    const block_content = block.content;
+    // If two blocks want to exist at the same location (can happen, for example if one block wants to be at the end of a row and the other one at the start of the next row) add an array with both
+    if (existing_block) {
+      if (constructed_block_arrays.has(existing_block))
+        // Only push to arrays we have created to not create funky bugs when there's an array in JSX.Element
+        existing_block.push(block_content);else {
+        const array = [existing_block, block_content];
+        constructed_block_arrays.add(array);
+        content_blocks_by_index_[final_target_index] = array;
+      }
+    } else content_blocks_by_index_[final_target_index] = block_content;
+    // Update displacement
+    for (let j = 0; j < span_rows; j++) {
+      var _ref3;
+      const row = displaced_products_[_ref3 = i + j] || (displaced_products_[_ref3] = []);
+      for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
+    }
+  }
+  return {
+    content_blocks_by_index_: content_blocks_by_index_,
+    displaced_products_: displaced_products_
+  };
+}
+/**
+ * Takes a store that contains an array from where index is number of row and value is the result of executing the content block rendering function.
+ * Then renders the content and wraps it into a div with the correct styling.
+ * Also caps span_columns to max available columns
+ */
+function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
+  const get_wrapped_blocks = $3hooq$solidjs.mapArray(() => rendered_content_blocks, block => {
+    if (!block) return;
+    const final_span_columns = $3hooq$solidjs.createMemo(() => {
+      var _max_span_columns;
+      return Math.min(block.span_columns, (_max_span_columns = max_span_columns()) !== null && _max_span_columns !== void 0 ? _max_span_columns : Infinity);
+    });
+    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
+    const final_span_rows = $3hooq$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
+    const [rendering_delayed, set_rendering_delayed_] = $3hooq$solidjs.createSignal(true);
+    const content = $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
+        return $3hooq$solidjsweb.ssr($f8f375d6245ffff2$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "grid-column:" + "span ".concat($3hooq$solidjsweb.escape(final_span_columns(), true)) + (";grid-row:" + "span ".concat($3hooq$solidjsweb.escape(final_span_rows(), true))) + (";spans_columns_variable_name:" + $3hooq$solidjsweb.escape(final_span_columns(), true)), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent($f8f375d6245ffff2$var$RenderContent, {
+          get content() {
+            return block.content;
+          }
+        })));
+      }
+    });
+    return $3hooq$solidjs.mergeProps(block, {
+      // Create content divs for the blocks with as much fine-grained diffing as possible?
+      content: () => {
+        // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
+        // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        set_rendering_delayed_(false);
+        return content;
+      },
+      get span_columns() {
+        // Cap max width of block to the number of columns available, for everyone downstream
+        return final_span_columns();
+      },
+      get span_rows() {
+        return final_span_rows();
+      }
+    });
+  });
+  return get_wrapped_blocks;
+}
+/**
+ * Basically adds support for async content block functions and shows a rudimentary placeholder if rendering is delayed. Required due to react having a rendering delay.
+ */
+function $f8f375d6245ffff2$var$RenderContent(props) {
+  const [resource] = $3hooq$solidjs.createResource(() => props.content,
+  // Could be reactive
+  fn => fn());
+  $3hooq$solidjs.createEffect(() => {
+    if (resource.error) console.error("Error in content block rendering", resource.error);
+  });
+  // The suspense is for when there's an async content block (which we have to support due to react having a rendering delay) so that we can show some height while it's loading (should kinda never be visible)
+  return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Suspense), {
+    get fallback() {
+      return $3hooq$solidjsweb.createComponent((0, $b8a8d61b3ec5f5ac$export$3f37af283f8fb843), {
+        width: "100%",
+        height: "max(100%, 400px)"
+      });
+    },
+    children: resource
+  });
+}
 let $0deb6ff75e3d67c6$var$elementsHoveredSignal;
 let $0deb6ff75e3d67c6$var$consumersSignal;
 function $0deb6ff75e3d67c6$export$d4d96868197be50e() {
@@ -1048,52 +1295,6 @@ function $d067f3a30f047b41$export$e68cff63f76bd15b(props) {
 function $d067f3a30f047b41$export$8d0c4fdbb05a2f2e() {
   return $3hooq$solidjs.useContext($d067f3a30f047b41$var$ListingContext);
 }
-var $e3d733f899558f40$var$_tmpl$ = ["<span", ' class="', '" style="', '"></span>'];
-function $e3d733f899558f40$export$acb3eaade4b23afd(props) {
-  // Work around https://github.com/solidjs/solid/issues/1980
-  return $3hooq$solidjsweb.ssr($e3d733f899558f40$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "".concat($3hooq$solidjsweb.escape(props.class, true) || "", " depict-placeholder"), $3hooq$solidjsweb.ssrStyle(props.style));
-}
-function $b8a8d61b3ec5f5ac$export$3f37af283f8fb843(props) {
-  const style = $3hooq$solidjs.createMemo(() => {
-    const {
-      style: style,
-      height: height,
-      width: width,
-      aspectRatio: aspectRatio
-    } = props;
-    const is_image = aspectRatio != undefined;
-    const size_data = is_image ? {
-      width: "100%",
-      "padding-bottom": "calc(calc(1 / ".concat(aspectRatio, ") * 100%)")
-    } : {
-      width: width,
-      height: height
-    };
-    return {
-      display: "block",
-      ...(style || {}),
-      ...size_data
-    };
-  });
-  return $3hooq$solidjsweb.createComponent((0, $e3d733f899558f40$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
-    }
-  });
-}
-function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
-  const signal = $3hooq$solidjs.createSignal(false);
-  $3hooq$solidjs.onCleanup($3hooq$depictaiutilishared.javascript_media_query(media_query, _ref => {
-    let {
-      matches: matches
-    } = _ref;
-    return signal[1](matches);
-  }).remove);
-  return signal[0];
-}
 function $a7f7d416e6f61504$export$89c6019e4baa40b1(props) {
   const style = $3hooq$solidjs.createMemo(() => {
     const {
@@ -8289,7 +8490,8 @@ class $e270e9f953fcbc58$export$e015ed2f2950f2e3 {
         breadcrumbs: [],
         quick_links: [],
         image_urls: [],
-        failed: true
+        failed: true,
+        content_blocks: []
       }),
       method_: "GET"
     });
@@ -9836,209 +10038,6 @@ function $c749e60bca5000cb$export$cb5808ba002cdeed(_ref) {
     }) : when_filters_closed_cols;
   });
 }
-function $478e5a09664da64c$export$a79e666719b3647c(cols_at_size_) {
-  const size_active = $3hooq$solidjs.createMemo(() => cols_at_size_().map(_ref => {
-    let [n_cols, min_width, max_width] = _ref;
-    const media_query = $3hooq$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
-    const matches = $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query);
-    return [matches, n_cols];
-  }));
-  const n_cols_currently_showing = $3hooq$solidjs.createMemo(() => {
-    try {
-      const [, n_cols_currently_showing] = size_active().find(_ref2 => {
-        let [media_query] = _ref2;
-        return media_query();
-      });
-      return n_cols_currently_showing;
-    } catch (e) {
-      $3hooq$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
-      return null;
-    }
-  });
-  return n_cols_currently_showing;
-}
-var $f8f375d6245ffff2$var$_tmpl$ = ["<div", ' class="content-block-wrapper" style="', '">', "</div>"];
-function $f8f375d6245ffff2$export$791ef57e62e21c3f(_ref) {
-  let {
-    content_blocks_: incoming_content_blocks,
-    cols_at_size_: cols_at_size_,
-    set_top_row_shortened_by_: set_top_row_shortened_by_
-  } = _ref;
-  // these are by row
-  const [content_blocks, set_content_blocks] = $3hooq$solidjsstore.createStore([]);
-  const n_cols_currently_showing_ = $478e5a09664da64c$export$a79e666719b3647c(cols_at_size_);
-  $3hooq$solidjs.createEffect(() => {
-    const incoming_value = incoming_content_blocks();
-    if (!incoming_value) {
-      set_content_blocks([]);
-      return;
-    }
-    set_content_blocks($3hooq$solidjsstore.reconcile(incoming_value, {
-      key: "content"
-    })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
-  });
-
-  const get_wrapped_blocks_ = $f8f375d6245ffff2$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
-  $3hooq$solidjs.createComputed(() => {
-    // Update our styling if a content block forces some items that should be in the top row into a lower one, so we can generate margin-top declarations for them
-    const top_row_block = get_wrapped_blocks_()[0];
-    const blocks_in_top_row_taken = top_row_block === null || top_row_block === void 0 ? void 0 : top_row_block.span_columns;
-    if (blocks_in_top_row_taken == undefined) {
-      // Fall back to zero if no content block in top row, since then no blocks in top row are taken
-      set_top_row_shortened_by_(0);
-      return;
-    }
-    set_top_row_shortened_by_(blocks_in_top_row_taken - 1); // minus one because the content block wrapper also is an element
-  });
-
-  return $f8f375d6245ffff2$var$remap_blocks_to_index({
-    get_wrapped_blocks_: get_wrapped_blocks_,
-    n_cols_currently_showing_: n_cols_currently_showing_
-  });
-}
-/**
- * Calculate where to put each of the finished wrapped content blocks. Also limit blocks' max width.
- * @returns an array where index is index of the blocks in the "displays array" and value is the content block (elements) to show at that index
- */
-function $f8f375d6245ffff2$var$remap_blocks_to_index(_ref2) {
-  let {
-    get_wrapped_blocks_: get_wrapped_blocks_,
-    n_cols_currently_showing_: n_cols_currently_showing_
-  } = _ref2;
-  return $3hooq$solidjs.createMemo(() => {
-    // This computation should be quite cheap since it just moves around things into an array
-    const content_blocks_by_index = [];
-    const constructed_block_arrays = new WeakSet();
-    const wrapped_blocks = get_wrapped_blocks_();
-    const cols_showing = n_cols_currently_showing_();
-    // Need to keep track of products displaced by blocks above when mapping rows to indexes in the actual grid
-    const displaced_products = []; // undefined = is product, true = is content block if number instead of tuple number indicates content blocks in that row. Index in first array is row, index in second array is column
-    if (!cols_showing)
-      // Nope out of here if we don't know how many columns are showing
-      return content_blocks_by_index;
-    for (let i = 0; i < wrapped_blocks.length; i++) {
-      // i = row to show at
-      const block = wrapped_blocks[i];
-      if (!block) continue; // Array can have holes/not defined places
-      const index_of_first_item_in_row = i * cols_showing;
-      const index_of_last_item_in_row = index_of_first_item_in_row + cols_showing;
-      const {
-        span_rows: span_rows,
-        position: position,
-        span_columns: span_columns
-      } = block; // span columns is already capped in the block wrapping step (wrap_blocks_in_div)
-      let target_index;
-      if (position === "left") target_index = index_of_first_item_in_row;else if (position === "right") target_index = index_of_last_item_in_row - span_columns;else if (position === "center") target_index = index_of_first_item_in_row + Math.floor((cols_showing - span_columns) / 2);else throw new Error("Invalid position for content block - must be left, right or center: " + JSON.stringify(position));
-      // Calculate displacement of us by content blocks above us
-      let displacement_by_added_blocks = 0;
-      for (let j = 0; j < i; j++) {
-        const row = displaced_products[j];
-        if (row === undefined) continue; // there were no blocks in this row
-        let displaced_items_in_row;
-        if (typeof row === "number") displaced_items_in_row = row;else {
-          displaced_items_in_row = row.filter(item => item).length;
-          displaced_products[j] = displaced_items_in_row;
-        }
-        displacement_by_added_blocks += displaced_items_in_row;
-      }
-      const index_of_us_in_row = target_index - index_of_first_item_in_row;
-      for (let j = 0; j < index_of_us_in_row; j++) {
-        var _displaced_products$i;
-        if ((_displaced_products$i = displaced_products[i]) !== null && _displaced_products$i !== void 0 && _displaced_products$i[j])
-          // Add blocks in our *current* row to the displacement, but only the ones to our left
-          displacement_by_added_blocks++;
-      }
-      // Add block to output array at the correct index
-      const final_target_index = target_index - displacement_by_added_blocks;
-      const existing_block = content_blocks_by_index[final_target_index];
-      const block_content = block.content;
-      // If two blocks want to exist at the same location (can happen, for example if one block wants to be at the end of a row and the other one at the start of the next row) add an array with both
-      if (existing_block) {
-        if (constructed_block_arrays.has(existing_block))
-          // Only push to arrays we have created to not create funky bugs when there's an array in JSX.Element
-          existing_block.push(block_content);else {
-          const array = [existing_block, block_content];
-          constructed_block_arrays.add(array);
-          content_blocks_by_index[final_target_index] = array;
-        }
-      } else content_blocks_by_index[final_target_index] = block_content;
-      // Update displacement
-      for (let j = 0; j < span_rows; j++) {
-        var _ref3;
-        const row = displaced_products[_ref3 = i + j] || (displaced_products[_ref3] = []);
-        for (let k = index_of_us_in_row; k < index_of_us_in_row + span_columns; k++) row[k] = true;
-      }
-    }
-    return content_blocks_by_index;
-  });
-}
-/**
- * Takes a store that contains an array from where index is number of row and value is the result of executing the content block rendering function.
- * Then renders the content and wraps it into a div with the correct styling.
- * Also caps span_columns to max available columns
- */
-function $f8f375d6245ffff2$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
-  const get_wrapped_blocks = $3hooq$solidjs.mapArray(() => rendered_content_blocks, block => {
-    if (!block) return;
-    const final_span_columns = $3hooq$solidjs.createMemo(() => {
-      var _max_span_columns;
-      return Math.min(block.span_columns, (_max_span_columns = max_span_columns()) !== null && _max_span_columns !== void 0 ? _max_span_columns : Infinity);
-    });
-    // If the item spans an entire row, limit the height to 1 row since there's no concept of "rows" if there are no products beside the block
-    const final_span_rows = $3hooq$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
-    const [rendering_delayed, set_rendering_delayed_] = $3hooq$solidjs.createSignal(true);
-    const content = $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
-      get when() {
-        return !rendering_delayed();
-      },
-      get children() {
-        return $3hooq$solidjsweb.ssr($f8f375d6245ffff2$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "grid-column:" + "span ".concat($3hooq$solidjsweb.escape(final_span_columns(), true)) + (";grid-row:" + "span ".concat($3hooq$solidjsweb.escape(final_span_rows(), true))) + (";spans_columns_variable_name:" + $3hooq$solidjsweb.escape(final_span_columns(), true)), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent($f8f375d6245ffff2$var$RenderContent, {
-          get content() {
-            return block.content;
-          }
-        })));
-      }
-    });
-    return $3hooq$solidjs.mergeProps(block, {
-      // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: () => {
-        // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
-        // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
-        set_rendering_delayed_(false);
-        return content;
-      },
-      get span_columns() {
-        // Cap max width of block to the number of columns available, for everyone downstream
-        return final_span_columns();
-      },
-      get span_rows() {
-        return final_span_rows();
-      }
-    });
-  });
-  return get_wrapped_blocks;
-}
-/**
- * Basically adds support for async content block functions and shows a rudimentary placeholder if rendering is delayed. Required due to react having a rendering delay.
- */
-function $f8f375d6245ffff2$var$RenderContent(props) {
-  const [resource] = $3hooq$solidjs.createResource(() => props.content,
-  // Could be reactive
-  fn => fn());
-  $3hooq$solidjs.createEffect(() => {
-    if (resource.error) console.error("Error in content block rendering", resource.error);
-  });
-  // The suspense is for when there's an async content block (which we have to support due to react having a rendering delay) so that we can show some height while it's loading (should kinda never be visible)
-  return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Suspense), {
-    get fallback() {
-      return $3hooq$solidjsweb.createComponent((0, $b8a8d61b3ec5f5ac$export$3f37af283f8fb843), {
-        width: "100%",
-        height: "max(100%, 400px)"
-      });
-    },
-    children: resource
-  });
-}
 var $484eec37514a982e$var$_tmpl$ = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
 function $484eec37514a982e$export$3925f87b1545cfc6(_ref) {
   let {
@@ -13297,6 +13296,16 @@ function $8b366fdb0c76194d$var$clear_if_opened_new_tab_with_sideways_url_params_
   });
   tracking_function_for_plp_results(plp_results_);
 }
+var $c19709057a32b2e7$var$_tmpl$ = ["<a", "><img", ' style="', '"></a>'],
+  $c19709057a32b2e7$var$_tmpl$2 = ["<a", "><video", ' muted="" autoplay="" playsinline="" loop style="', '"></video></a>'];
+function $c19709057a32b2e7$export$780a853d15174484(_ref) {
+  let {
+    contentBlock: contentBlock,
+    router_: router_
+  } = _ref;
+  if (contentBlock.content.type === "image") return () => $3hooq$solidjsweb.ssr($c19709057a32b2e7$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey() + $3hooq$solidjsweb.ssrAttribute("href", $3hooq$solidjsweb.escape(contentBlock.content.link, true), false), $3hooq$solidjsweb.ssrAttribute("src", $3hooq$solidjsweb.escape(contentBlock.content.url, true), false), "width:100%;height:100%;object-fit:cover;position:absolute;inset:0");
+  if (contentBlock.content.type === "video") return () => $3hooq$solidjsweb.ssr($c19709057a32b2e7$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey() + $3hooq$solidjsweb.ssrAttribute("href", $3hooq$solidjsweb.escape(contentBlock.content.link, true), false), $3hooq$solidjsweb.ssrAttribute("src", $3hooq$solidjsweb.escape(contentBlock.content.url, true), false), "width:100%;height:100%;object-fit:cover;position:absolute;inset:0");
+}
 var $ede6c70ecdca46fe$var$_tmpl$ = ["<div", ' class="product-count"><!--$-->', "<!--/--> <!--$-->", "<!--/--></div>"],
   $ede6c70ecdca46fe$var$_tmpl$2 = ["<div", "></div>"],
   $ede6c70ecdca46fe$var$_tmpl$3 = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
@@ -13393,6 +13402,24 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
   }));
   // Make "Get Listing" request to get quicklinks, breadcrumbs, title, etc
   const [plp_meta] = $3hooq$solidjs.createResource(meta_query_base, $3hooq$depictaiutilisharedlatest.catchify(query => depict_api_.get_listing(query)));
+  const contentBlocksByRow = $3hooq$solidjs.createMemo(() => {
+    var _plp_meta, _plp_meta$content_blo;
+    if (content_blocks_by_row_()) return content_blocks_by_row_();
+    const content = [];
+    (_plp_meta = plp_meta()) === null || _plp_meta === void 0 || (_plp_meta$content_blo = _plp_meta.content_blocks) === null || _plp_meta$content_blo === void 0 || _plp_meta$content_blo.forEach(row => {
+      const contentBlock = {
+        span_columns: row.span_columns,
+        span_rows: row.span_rows,
+        position: row.position,
+        content: $c19709057a32b2e7$export$780a853d15174484({
+          contentBlock: row,
+          router_: router_
+        })
+      };
+      content[row.row] = contentBlock;
+    });
+    return content;
+  });
   const available_sortings_ = $3hooq$solidjs.createMemo(() => {
     var _plp_products_, _plp_products_$sorts;
     return (_plp_products_ = plp_products_()) === null || _plp_products_ === void 0 ? void 0 : (_plp_products_$sorts = _plp_products_.sorts) === null || _plp_products_$sorts === void 0 ? void 0 : _plp_products_$sorts.map(sort => {
@@ -13408,13 +13435,13 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
     return (_plp_products_2 = plp_products_()) === null || _plp_products_2 === void 0 ? void 0 : _plp_products_2.filters;
   });
   const title = $3hooq$solidjs.createMemo(() => {
-    var _plp_meta;
-    return (_plp_meta = plp_meta()) === null || _plp_meta === void 0 ? void 0 : _plp_meta.title;
+    var _plp_meta2;
+    return (_plp_meta2 = plp_meta()) === null || _plp_meta2 === void 0 ? void 0 : _plp_meta2.title;
   });
   const crumb_data_ = $ede6c70ecdca46fe$var$add_us_to_crumbs(plp_meta);
   const quicklinks_data_ = $3hooq$solidjs.createMemo(() => {
-    var _plp_meta2;
-    return (_plp_meta2 = plp_meta()) === null || _plp_meta2 === void 0 ? void 0 : _plp_meta2.quick_links;
+    var _plp_meta3;
+    return (_plp_meta3 = plp_meta()) === null || _plp_meta3 === void 0 ? void 0 : _plp_meta3.quick_links;
   });
   const [sort_or_filter_open_, set_sort_or_filter_open_] = $3hooq$solidjs.createSignal(false);
   const [desktop_filter_elements_, set_desktop_filter_elements] = $3hooq$solidjs.createSignal();
@@ -13639,7 +13666,7 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
             product_card_template_: product_card_template_,
             sort_or_filter_open_: sort_or_filter_open_,
             desktop_filter_elements_: desktop_filter_elements_,
-            content_blocks_by_row_: content_blocks_by_row_,
+            content_blocks_by_row_: contentBlocksByRow,
             ConfiguredScrollStatus_: ConfiguredScrollStatus_,
             id_currently_querying_for_: id_to_query_for_,
             no_results_options_: {
@@ -13680,8 +13707,8 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
 function $ede6c70ecdca46fe$var$add_us_to_crumbs(plp_meta) {
   const href_accessor = $3hooq$depictaiutilisharedlatest.use_href_accessor();
   return $3hooq$solidjs.createMemo(() => {
-    var _plp_meta3;
-    const api_value = (_plp_meta3 = plp_meta()) === null || _plp_meta3 === void 0 ? void 0 : _plp_meta3.breadcrumbs;
+    var _plp_meta4;
+    const api_value = (_plp_meta4 = plp_meta()) === null || _plp_meta4 === void 0 ? void 0 : _plp_meta4.breadcrumbs;
     if (!api_value) return api_value;
     return [...api_value, $3hooq$solidjs.mergeProps(plp_meta(), {
       get page_url() {