@depict-ai/ui 4.7.29 → 4.7.31

package/latest/index.cjs

@@ -1,8 +1,8 @@
 var $gVhhF$depictaiutilishared = require("@depict-ai/utilishared/latest");
-var $gVhhF$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
-var $gVhhF$solidjs = require("solid-js");
 var $gVhhF$solidjsweb = require("solid-js/web");
+var $gVhhF$solidjs = require("solid-js");
 var $gVhhF$solidjsstore = require("solid-js/store");
+var $gVhhF$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest");
 require("../multi_import_deduplicator.cjs").register_es_version("ui", "latest");
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {
@@ -12,6 +12,7 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "remap_blocks_to_index", () => $d92f338ba8f9da9b$export$92aa5d691d588f3f);
 $parcel$export(module.exports, "useMobileHover", () => $8bf678c45948a297$export$d4d96868197be50e);
 $parcel$export(module.exports, "useVisibilityState", () => $55cbacb79d3e0cea$export$54299a3c81f5425);
 $parcel$export(module.exports, "useSlidableInformation", () => $a0e53f99354809d9$export$eaa625fb39439e37);
@@ -104,7 +105,412 @@ $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.7.29";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.31";
+function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
+  const signal = $gVhhF$solidjs.createSignal(false);
+  $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
+    matches: matches
+  }) => signal[1](matches)).remove);
+  return signal[0];
+}
+function $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_) {
+  const size_active = $gVhhF$solidjs.createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
+    const media_query = $gVhhF$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
+    const matches = $b54e6192d0caa293$export$d9f36cf74e24d595(media_query);
+    return [matches, n_cols];
+  }));
+  const n_cols_currently_showing = $gVhhF$solidjs.createMemo(() => {
+    try {
+      const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
+      return n_cols_currently_showing;
+    } catch (e) {
+      $gVhhF$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
+      return null;
+    }
+  });
+  return n_cols_currently_showing;
+}
+
+// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
+class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}
+class $7dd1edb2ee2b43ad$export$aa14a9f43128f61f extends $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 {
+  constructor(templateError) {
+    super("Uncaught error in product card template", {
+      cause: templateError
+    });
+  }
+}
+var $edafe91daf3091d7$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><!$><!/><!$><!/>`);
+const $edafe91daf3091d7$var$ExtraInfoContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
+function $edafe91daf3091d7$export$240ecf5363d76c0f(props) {
+  return $gVhhF$solidjsweb.createComponent($edafe91daf3091d7$var$ExtraInfoContext.Provider, {
+    get value() {
+      return props.getContext_;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
+  const getContextFunction = $gVhhF$solidjs.useContext($edafe91daf3091d7$var$ExtraInfoContext);
+  return $gVhhF$solidjs.ErrorBoundary({
+    fallback(err, retry) {
+      const {
+        message_: message_,
+        severity_: severity_
+      } = props;
+      let message = message_;
+      if (err instanceof (0, $7dd1edb2ee2b43ad$export$aa14a9f43128f61f)) {
+        console.error(err.cause);
+        message = `${message}: ${err.message}`;
+      } else $gVhhF$depictaiutilishared.report([err, message_], severity_, getContextFunction?.());
+      return (() => {
+        var _el$ = $gVhhF$solidjsweb.getNextElement($edafe91daf3091d7$var$_tmpl$),
+          _el$2 = _el$.firstChild,
+          [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
+          _el$4 = _el$3.nextSibling,
+          [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
+        $gVhhF$solidjsweb.insert(_el$, message, _el$3, _co$);
+        $gVhhF$solidjsweb.insert(_el$, () => props.on_error_?.(retry), _el$5, _co$2);
+        $gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.classList(_el$, Object.fromEntries(props.class_list_?.map(c => [c, true]) || []), _$p));
+        return _el$;
+      })();
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+var $75777da1687ba3f6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
+  $75777da1687ba3f6$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type=text/css>`);
+const $75777da1687ba3f6$export$c500183c31c2b22e = "--spans-columns";
+function $75777da1687ba3f6$export$ab6b147eec64fea5(props) {
+  const container_class = "x" + $gVhhF$solidjs.createUniqueId();
+  const container_element_ = (() => {
+    var _el$ = $gVhhF$solidjsweb.getNextElement($75777da1687ba3f6$var$_tmpl$);
+    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => props.element_attributes, {
+      "classList": {
+        [container_class]: true
+      }
+    }), false, true);
+    $gVhhF$solidjsweb.insert(_el$, () => props.children);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
+  return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+    message_: "Failed calculating css grid layout",
+    severity_: "error",
+    get children() {
+      return $75777da1687ba3f6$export$e2f22da34aaf310a(props, container_element_, false, container_class);
+    }
+  });
+}
+function $75777da1687ba3f6$export$e2f22da34aaf310a(props, container_element, insert_after_container = false, container_class) {
+  if (!container_class) {
+    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
+    container_class = $gVhhF$depictaiutilishared.make_random_classname();
+    container_element.classList.add(container_class);
+  }
+  const container_selector = `.depict .${container_class}`; // class so ppl can have id if needed
+  const col_styling = $gVhhF$solidjs.createMemo(() => $75777da1687ba3f6$var$generate_media_queried_declarations({
+    container_selector_: container_selector,
+    default_grid_spacing_text: props.grid_spacing,
+    cols_at_size_: props.cols_at_size,
+    override_vertical_spacing_: props.override_vertical_spacing,
+    top_row_shortened_by_: props.top_row_shortened_by_()
+  }));
+  const base_styling = $gVhhF$solidjs.createMemo(() => {
+    return `${container_selector}{display:grid;}`;
+  });
+  const get_styling = $gVhhF$solidjs.createMemo(() => base_styling() + col_styling());
+  const style_element = (() => {
+    var _el$2 = $gVhhF$solidjsweb.getNextElement($75777da1687ba3f6$var$_tmpl$2);
+    $gVhhF$solidjsweb.insert(_el$2, get_styling);
+    return _el$2;
+  })(); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
+  if (insert_after_container) container_element.after(style_element);
+  return [container_element, style_element];
+}
+function $75777da1687ba3f6$var$generate_media_queried_declarations({
+  container_selector_: container_selector_,
+  default_grid_spacing_text: default_grid_spacing_text,
+  cols_at_size_: cols_at_size_,
+  override_vertical_spacing_: override_vertical_spacing_,
+  top_row_shortened_by_: top_row_shortened_by_
+}) {
+  return cols_at_size_.map(options => {
+    const [n_cols, min, max, grid_spacing_for_size] = options;
+    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
+    // See comment in else block below
+    const can_use_gap = override_vertical_spacing_ ? $75777da1687ba3f6$var$can_use_gap_for_unit(override_vertical_spacing_) : $75777da1687ba3f6$var$can_use_gap_for_unit(main_spacing_to_use);
+    let spacing_styling;
+    let additional_styling = ""; // outside the media query
+    if (can_use_gap) spacing_styling = `gap:${main_spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
+      // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
+      // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
+      // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
+      // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
+      const vertical_spacing_to_use = override_vertical_spacing_ ?? main_spacing_to_use;
+      const width_multiplier = `var(${$75777da1687ba3f6$export$c500183c31c2b22e}, 1)`; // How many cards wide the current item is (needed because content blocks)
+      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$75777da1687ba3f6$var$strip_percent_unit(vertical_spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
+      // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
+      const this_item_width_meat = `calc(${one_item_width_exclusing_gaps} * ${width_multiplier})`; // Width of just the card
+      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$75777da1687ba3f6$var$strip_percent_unit(vertical_spacing_to_use)})`; // Width of the gaps
+      const this_item_width = `calc(${this_item_width_meat} + ${this_item_width_gaps})`; // Width of this item including gaps
+      // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
+      const convert_top_spacing_to_item_width_percentage = spacing => `calc(calc(100 / ${this_item_width}) * ${spacing})`; // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
+      spacing_styling = `column-gap:${main_spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
+      // Re-use old layout code to get the correct :nth-child declarations for the top margins
+      additional_styling = $gVhhF$depictaiutilishared.n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
+    }
+    const media_query_body = `${container_selector_}{${spacing_styling}grid-template-columns:repeat(${n_cols},minmax(0,1fr));}`;
+    return `${$gVhhF$depictaiutilishared.layout_media_query_header(min, max)}{${media_query_body}}${additional_styling}`;
+  }).join("");
+}
+function $75777da1687ba3f6$var$can_use_gap_for_unit(spacing) {
+  const trimmed_spacing = spacing.trim();
+  return !trimmed_spacing.includes("%");
+}
+function $75777da1687ba3f6$var$strip_percent_unit(css_value) {
+  return css_value.replaceAll("%", "");
+}
+var $9fe9883b1d8ecccc$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span>`);
+function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
+  // Work around https://github.com/solidjs/solid/issues/1980
+  return (() => {
+    var _el$ = $gVhhF$solidjsweb.getNextElement($9fe9883b1d8ecccc$var$_tmpl$);
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$ = `${props.class || ""} depict-placeholder`,
+        _v$2 = props.style;
+      _v$ !== _p$.e && $gVhhF$solidjsweb.className(_el$, _p$.e = _v$);
+      _p$.t = $gVhhF$solidjsweb.style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
+  const style = $gVhhF$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 / ${aspectRatio}) * 100%)`
+    } : {
+      width: width,
+      height: height
+    };
+    return {
+      display: "block",
+      ...(style || {}),
+      ...size_data
+    };
+  });
+  return $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+}
+var $d92f338ba8f9da9b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=content-block-wrapper>`);
+function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
+  content_blocks_: incoming_content_blocks,
+  cols_at_size_: cols_at_size_,
+  set_top_row_shortened_by_: set_top_row_shortened_by_
+}) {
+  // these are by row
+  const [content_blocks, set_content_blocks] = $gVhhF$solidjsstore.createStore([]);
+  const n_cols_currently_showing_ = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
+  $gVhhF$solidjs.createEffect(() => {
+    const incoming_value = incoming_content_blocks();
+    if (!incoming_value) {
+      set_content_blocks([]);
+      return;
+    }
+    set_content_blocks($gVhhF$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_ = $d92f338ba8f9da9b$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
+  $gVhhF$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?.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 $gVhhF$solidjs.createMemo(() => $d92f338ba8f9da9b$export$92aa5d691d588f3f({
+    wrapped_blocks_: get_wrapped_blocks_(),
+    n_cols_currently_showing_: n_cols_currently_showing_()
+  }).content_blocks_by_index_);
+}
+function $d92f338ba8f9da9b$export$92aa5d691d588f3f({
+  wrapped_blocks_: wrapped_blocks_,
+  n_cols_currently_showing_: n_cols_currently_showing_
+}) {
+  // 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++) if (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++) {
+      const row = displaced_products_[i + j] ||= [];
+      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 $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
+  const get_wrapped_blocks = $gVhhF$solidjs.mapArray(() => rendered_content_blocks, block => {
+    if (!block) return;
+    const final_span_columns = $gVhhF$solidjs.createMemo(() => Math.min(block.span_columns, 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 = $gVhhF$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
+    const [rendering_delayed, set_rendering_delayed_] = $gVhhF$solidjs.createSignal(true);
+    const content = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
+        var _el$ = $gVhhF$solidjsweb.getNextElement($d92f338ba8f9da9b$var$_tmpl$);
+        $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
+          get content() {
+            return block.content;
+          }
+        }));
+        $gVhhF$solidjsweb.effect(_p$ => {
+          var _v$ = {
+              [(0, $75777da1687ba3f6$export$c500183c31c2b22e)]: final_span_columns()
+            },
+            _v$2 = `span ${final_span_columns()}`,
+            _v$3 = `span ${final_span_rows()}`;
+          _p$.e = $gVhhF$solidjsweb.style(_el$, _v$, _p$.e);
+          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("grid-column", _v$2) : _el$.style.removeProperty("grid-column"));
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("grid-row", _v$3) : _el$.style.removeProperty("grid-row"));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        return _el$;
+      }
+    });
+    return $gVhhF$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 $d92f338ba8f9da9b$var$RenderContent(props) {
+  const [resource] = $gVhhF$solidjs.createResource(() => props.content,
+  // Could be reactive
+  fn => fn());
+  $gVhhF$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 $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+    get fallback() {
+      return $gVhhF$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
+        width: "100%",
+        height: "max(100%, 400px)"
+      });
+    },
+    children: resource
+  });
+}
 let $8bf678c45948a297$var$elementsHoveredSignal;
 let $8bf678c45948a297$var$consumersSignal;
 function $8bf678c45948a297$export$d4d96868197be50e() {
@@ -743,76 +1149,25 @@ function $0caf87eaa19079da$var$Placeholder({
         dispose_original_copy();
         $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_] = undefined;
       };
-      rendering?.then(unset_current_rendering, unset_current_rendering);
-    } else
-      // Otherwise, just make sure we've disposed our root
-      dispose_original_copy();
-  });
-  return $gVhhF$solidjs.createMemo(() => {
-    const unwrapped_array = get_unwrapped_element()();
-    if (!unwrapped_array?.length || !unwrapped_array.every(item => item))
-      // Haven't finished rendering yet in case of "async" rendering, so don't freeze the elements yet
-      return;
-    // placeholders have finished rendering, freeze the elements
-    // here we might receive the result of a promise that has already been received, tore down and put into cached_placeholder_element, so don't overwrite that more valid result if it's already set
-    $0caf87eaa19079da$var$cachedPlaceholderElements[placeholderCacheKey_] ||= get_cloned_placeholders(unwrapped_array); // Clone initial return value so that who gave us the elements can't mutate them, which has caused issues before with react
-    $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_] = undefined;
-    dispose_original_copy(); // So that this memo will never re-run and the placeholder rendering function can clean up
-    return get_cloned_placeholders(); // clone, just in case. If we wouldn't, someone could modify the copy in the DOM, and it would affect the cached version
-  });
-}
-
-// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
-class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}
-class $7dd1edb2ee2b43ad$export$aa14a9f43128f61f extends $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 {
-  constructor(templateError) {
-    super("Uncaught error in product card template", {
-      cause: templateError
-    });
-  }
-}
-var $edafe91daf3091d7$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><!$><!/><!$><!/>`);
-const $edafe91daf3091d7$var$ExtraInfoContext = /*@__PURE__*/$gVhhF$solidjs.createContext();
-function $edafe91daf3091d7$export$240ecf5363d76c0f(props) {
-  return $gVhhF$solidjsweb.createComponent($edafe91daf3091d7$var$ExtraInfoContext.Provider, {
-    get value() {
-      return props.getContext_;
-    },
-    get children() {
-      return props.children;
-    }
+      rendering?.then(unset_current_rendering, unset_current_rendering);
+    } else
+      // Otherwise, just make sure we've disposed our root
+      dispose_original_copy();
   });
-}
-function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
-  const getContextFunction = $gVhhF$solidjs.useContext($edafe91daf3091d7$var$ExtraInfoContext);
-  return $gVhhF$solidjs.ErrorBoundary({
-    fallback(err, retry) {
-      const {
-        message_: message_,
-        severity_: severity_
-      } = props;
-      let message = message_;
-      if (err instanceof (0, $7dd1edb2ee2b43ad$export$aa14a9f43128f61f)) {
-        console.error(err.cause);
-        message = `${message}: ${err.message}`;
-      } else $gVhhF$depictaiutilishared.report([err, message_], severity_, getContextFunction?.());
-      return (() => {
-        var _el$ = $gVhhF$solidjsweb.getNextElement($edafe91daf3091d7$var$_tmpl$),
-          _el$2 = _el$.firstChild,
-          [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
-          _el$4 = _el$3.nextSibling,
-          [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
-        $gVhhF$solidjsweb.insert(_el$, message, _el$3, _co$);
-        $gVhhF$solidjsweb.insert(_el$, () => props.on_error_?.(retry), _el$5, _co$2);
-        $gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.classList(_el$, Object.fromEntries(props.class_list_?.map(c => [c, true]) || []), _$p));
-        return _el$;
-      })();
-    },
-    get children() {
-      return props.children;
-    }
+  return $gVhhF$solidjs.createMemo(() => {
+    const unwrapped_array = get_unwrapped_element()();
+    if (!unwrapped_array?.length || !unwrapped_array.every(item => item))
+      // Haven't finished rendering yet in case of "async" rendering, so don't freeze the elements yet
+      return;
+    // placeholders have finished rendering, freeze the elements
+    // here we might receive the result of a promise that has already been received, tore down and put into cached_placeholder_element, so don't overwrite that more valid result if it's already set
+    $0caf87eaa19079da$var$cachedPlaceholderElements[placeholderCacheKey_] ||= get_cloned_placeholders(unwrapped_array); // Clone initial return value so that who gave us the elements can't mutate them, which has caused issues before with react
+    $0caf87eaa19079da$var$renderingCachedPlaceholderElement[placeholderCacheKey_] = undefined;
+    dispose_original_copy(); // So that this memo will never re-run and the placeholder rendering function can clean up
+    return get_cloned_placeholders(); // clone, just in case. If we wouldn't, someone could modify the copy in the DOM, and it would affect the cached version
   });
 }
+
 var $f48d0fbb00835aaa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
   $f48d0fbb00835aaa$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type=text/css>`);
 function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
@@ -1072,62 +1427,6 @@ function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
 function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
   return $gVhhF$solidjs.useContext($84798aaa863a4909$var$ListingContext);
 }
-var $9fe9883b1d8ecccc$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span>`);
-function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
-  // Work around https://github.com/solidjs/solid/issues/1980
-  return (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($9fe9883b1d8ecccc$var$_tmpl$);
-    $gVhhF$solidjsweb.effect(_p$ => {
-      var _v$ = `${props.class || ""} depict-placeholder`,
-        _v$2 = props.style;
-      _v$ !== _p$.e && $gVhhF$solidjsweb.className(_el$, _p$.e = _v$);
-      _p$.t = $gVhhF$solidjsweb.style(_el$, _v$2, _p$.t);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$;
-  })();
-}
-function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
-  const style = $gVhhF$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 / ${aspectRatio}) * 100%)`
-    } : {
-      width: width,
-      height: height
-    };
-    return {
-      display: "block",
-      ...(style || {}),
-      ...size_data
-    };
-  });
-  return $gVhhF$solidjsweb.createComponent((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
-    }
-  });
-}
-function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
-  const signal = $gVhhF$solidjs.createSignal(false);
-  $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
-    matches: matches
-  }) => signal[1](matches)).remove);
-  return signal[0];
-}
 function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
   const style = $gVhhF$solidjs.createMemo(() => {
     const {
@@ -1958,7 +2257,7 @@ function $bda357ff87c46163$export$44809a8a3e867e30({
       [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
       _el$4 = _el$3.nextSibling,
       [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
-    $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilishared.catchify(() => setUserWantsExpanded(prev => display_() ? !prev : false)), true);
+    $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilishared.catchify(() => display_() && setUserWantsExpanded(prev => !prev)), true);
     $gVhhF$solidjsweb.use(el => {
       container = el;
       const ro = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => {
@@ -9930,7 +10229,8 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
         breadcrumbs: [],
         quick_links: [],
         image_urls: [],
-        failed: true
+        failed: true,
+        content_blocks: []
       }),
       method_: "GET"
     });
@@ -10944,171 +11244,78 @@ function $4117463e2939f5f4$export$63dd0350f8559dda({
     const last = get_last_result_in_viewport_();
     // Check if we are past the last result, in that case we want it to count as 100% for a better infinite scroll experience
     past_last_result_check: {
-      const elements_of_last_result = index_to_target_map_.get(index_to_target_map_.size - 1);
-      if (elements_of_last_result) {
-        if ($gVhhF$solidjs.untrack(is_loading_)) {
-          // We're loading, wait check again after we have inserted our new results
-          get_has_rendered_toggle();
-          break past_last_result_check;
-        }
-        for (const element of elements_of_last_result) {
-          if (document.documentElement.contains(element) && element.getBoundingClientRect().top <= 0)
-            // dlog(element, "which is of last product card is in or above viewport, probably loading more");
-            return 100;
-        }
-      }
-    }
-    if (isNaN(last)) return 0;
-    if (Math.abs(last) === Infinity)
-      // No product card in view and not after last card, assume first card
-      return 0;
-    return last / displays_by_key_().size * 100;
-  }, undefined, {
-    equals: false
-  });
-}
-function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
-  plp_results_: plp_results_,
-  product_card_template_: product_card_template_,
-  first_result_in_viewport_: [, setFirstResultInViewport],
-  last_result_in_viewport_: [lastResultInViewport, setLastResultsInViewport],
-  all_products_loaded_: all_products_loaded_,
-  min_products_to_fetch_: min_products_to_fetch_,
-  query_base_: query_base_,
-  depict_api_: depict_api_,
-  is_loading_: is_loading_,
-  content_blocks_: content_blocks_
-}) {
-  // Although typing doesn't reflect it, plp_results is guaranteed to contain an array of at least one display at this point
-  const [get_extra_displays, set_extra_displays_] = $gVhhF$solidjs.createSignal([], {
-    equals: false
-  });
-  const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => [...(plp_results_()?.displays || []), ...get_extra_displays()]));
-  const {
-    indexToTargetMap_: indexToTargetMap_,
-    renderedDisplays_: renderedDisplays_,
-    currentlyIntersecting: currentlyIntersecting
-  } = $67155e1aeb7073f6$export$4a14175d33d81a96({
-    displays_by_key_: displays_by_key_,
-    product_card_template_: product_card_template_,
-    content_blocks_: content_blocks_,
-    alwaysObserveCards_: true
-  });
-  const percentage_in_view_ = $4117463e2939f5f4$export$63dd0350f8559dda({
-    get_last_result_in_viewport_: lastResultInViewport,
-    displays_by_key_: displays_by_key_,
-    index_to_target_map_: indexToTargetMap_,
-    is_loading_: is_loading_,
-    get_extra_displays: get_extra_displays
-  });
-  $3f08fe2992a2a8ca$export$5e4aed86c12acdd9({
-    percentage_in_view_: percentage_in_view_,
-    set_extra_displays_: set_extra_displays_,
-    all_products_loaded_: all_products_loaded_,
-    plp_results_: plp_results_,
-    min_products_to_fetch_: min_products_to_fetch_,
-    query_base_: query_base_,
-    depict_api_: depict_api_
-  });
-  $gVhhF$solidjs.createEffect(() => {
-    const intersecting = currentlyIntersecting();
-    setFirstResultInViewport(Math.min(...intersecting) + 1); // +1 because we want to start counting at 1
-    setLastResultsInViewport(Math.max(...intersecting) + 1);
-  });
-  return renderedDisplays_;
-}
-var $75777da1687ba3f6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
-  $75777da1687ba3f6$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type=text/css>`);
-const $75777da1687ba3f6$export$c500183c31c2b22e = "--spans-columns";
-function $75777da1687ba3f6$export$ab6b147eec64fea5(props) {
-  const container_class = "x" + $gVhhF$solidjs.createUniqueId();
-  const container_element_ = (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($75777da1687ba3f6$var$_tmpl$);
-    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => props.element_attributes, {
-      "classList": {
-        [container_class]: true
-      }
-    }), false, true);
-    $gVhhF$solidjsweb.insert(_el$, () => props.children);
-    $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$;
-  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
-  return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
-    message_: "Failed calculating css grid layout",
-    severity_: "error",
-    get children() {
-      return $75777da1687ba3f6$export$e2f22da34aaf310a(props, container_element_, false, container_class);
-    }
-  });
-}
-function $75777da1687ba3f6$export$e2f22da34aaf310a(props, container_element, insert_after_container = false, container_class) {
-  if (!container_class) {
-    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
-    container_class = $gVhhF$depictaiutilishared.make_random_classname();
-    container_element.classList.add(container_class);
-  }
-  const container_selector = `.depict .${container_class}`; // class so ppl can have id if needed
-  const col_styling = $gVhhF$solidjs.createMemo(() => $75777da1687ba3f6$var$generate_media_queried_declarations({
-    container_selector_: container_selector,
-    default_grid_spacing_text: props.grid_spacing,
-    cols_at_size_: props.cols_at_size,
-    override_vertical_spacing_: props.override_vertical_spacing,
-    top_row_shortened_by_: props.top_row_shortened_by_()
-  }));
-  const base_styling = $gVhhF$solidjs.createMemo(() => {
-    return `${container_selector}{display:grid;}`;
-  });
-  const get_styling = $gVhhF$solidjs.createMemo(() => base_styling() + col_styling());
-  const style_element = (() => {
-    var _el$2 = $gVhhF$solidjsweb.getNextElement($75777da1687ba3f6$var$_tmpl$2);
-    $gVhhF$solidjsweb.insert(_el$2, get_styling);
-    return _el$2;
-  })(); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
-  if (insert_after_container) container_element.after(style_element);
-  return [container_element, style_element];
-}
-function $75777da1687ba3f6$var$generate_media_queried_declarations({
-  container_selector_: container_selector_,
-  default_grid_spacing_text: default_grid_spacing_text,
-  cols_at_size_: cols_at_size_,
-  override_vertical_spacing_: override_vertical_spacing_,
-  top_row_shortened_by_: top_row_shortened_by_
-}) {
-  return cols_at_size_.map(options => {
-    const [n_cols, min, max, grid_spacing_for_size] = options;
-    const main_spacing_to_use = grid_spacing_for_size || default_grid_spacing_text;
-    // See comment in else block below
-    const can_use_gap = override_vertical_spacing_ ? $75777da1687ba3f6$var$can_use_gap_for_unit(override_vertical_spacing_) : $75777da1687ba3f6$var$can_use_gap_for_unit(main_spacing_to_use);
-    let spacing_styling;
-    let additional_styling = ""; // outside the media query
-    if (can_use_gap) spacing_styling = `gap:${main_spacing_to_use};${override_vertical_spacing_ ? `row-gap:${override_vertical_spacing_};` : ``}`;else {
-      // When using percent units, which our default styling does (because convenient) and our interface relies on (hard to specify different gaps for different screen sizes)
-      // row gaps in grids are relative to the whole height of the grid, maybe see also https://stackoverflow.com/a/53563865. The issue with that is that as we load more products, the gap grows. Also, it breaks existing integrations.
-      // Logical thought: use margins for the vertical spacing. But margins in grids are apparently relative to the size of the individual items in grids.
-      // Given that, and that content blocks can be of different width, we have to do some complicated calculations to convert the provided gap, which is in gap of the total container width, to a margin of the individual items.
-      const vertical_spacing_to_use = override_vertical_spacing_ ?? main_spacing_to_use;
-      const width_multiplier = `var(${$75777da1687ba3f6$export$c500183c31c2b22e}, 1)`; // How many cards wide the current item is (needed because content blocks)
-      const one_item_width_exclusing_gaps = `calc(calc(100 / ${n_cols}) - calc(calc(${n_cols * 2 - 2} * calc(${$75777da1687ba3f6$var$strip_percent_unit(vertical_spacing_to_use)} / 2)) / ${n_cols}))`; // Width of one item in percent of the whole
-      // Equation from layout.tsx, also used in CheckboxGrid. Needs half spacing for some reason
-      const this_item_width_meat = `calc(${one_item_width_exclusing_gaps} * ${width_multiplier})`; // Width of just the card
-      const this_item_width_gaps = `calc(calc(${width_multiplier} - 1) * ${$75777da1687ba3f6$var$strip_percent_unit(vertical_spacing_to_use)})`; // Width of the gaps
-      const this_item_width = `calc(${this_item_width_meat} + ${this_item_width_gaps})`; // Width of this item including gaps
-      // this_item_width needs to be unitless, and since plain css can't do calc(40% / 5%) which would become unitless we need to strip all units in the calculations before
-      const convert_top_spacing_to_item_width_percentage = spacing => `calc(calc(100 / ${this_item_width}) * ${spacing})`; // Now finally we can convert the desired spacing to a percentage of this individual item's width (including gaps that would be there but aren't because content blocks span them)
-      spacing_styling = `column-gap:${main_spacing_to_use};`; // Still use gaps in the horizontal direction because that works flawlessly
-      // Re-use old layout code to get the correct :nth-child declarations for the top margins
-      additional_styling = $gVhhF$depictaiutilishared.n_col_styling_with_dist(container_selector_ + ">", convert_top_spacing_to_item_width_percentage(default_grid_spacing_text), [[n_cols, min, max, grid_spacing_for_size ? convert_top_spacing_to_item_width_percentage(grid_spacing_for_size) : null]], "grid", override_vertical_spacing_ ? convert_top_spacing_to_item_width_percentage(override_vertical_spacing_) : override_vertical_spacing_, top_row_shortened_by_);
+      const elements_of_last_result = index_to_target_map_.get(index_to_target_map_.size - 1);
+      if (elements_of_last_result) {
+        if ($gVhhF$solidjs.untrack(is_loading_)) {
+          // We're loading, wait check again after we have inserted our new results
+          get_has_rendered_toggle();
+          break past_last_result_check;
+        }
+        for (const element of elements_of_last_result) {
+          if (document.documentElement.contains(element) && element.getBoundingClientRect().top <= 0)
+            // dlog(element, "which is of last product card is in or above viewport, probably loading more");
+            return 100;
+        }
+      }
     }
-    const media_query_body = `${container_selector_}{${spacing_styling}grid-template-columns:repeat(${n_cols},minmax(0,1fr));}`;
-    return `${$gVhhF$depictaiutilishared.layout_media_query_header(min, max)}{${media_query_body}}${additional_styling}`;
-  }).join("");
-}
-function $75777da1687ba3f6$var$can_use_gap_for_unit(spacing) {
-  const trimmed_spacing = spacing.trim();
-  return !trimmed_spacing.includes("%");
+    if (isNaN(last)) return 0;
+    if (Math.abs(last) === Infinity)
+      // No product card in view and not after last card, assume first card
+      return 0;
+    return last / displays_by_key_().size * 100;
+  }, undefined, {
+    equals: false
+  });
 }
-function $75777da1687ba3f6$var$strip_percent_unit(css_value) {
-  return css_value.replaceAll("%", "");
+function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
+  plp_results_: plp_results_,
+  product_card_template_: product_card_template_,
+  first_result_in_viewport_: [, setFirstResultInViewport],
+  last_result_in_viewport_: [lastResultInViewport, setLastResultsInViewport],
+  all_products_loaded_: all_products_loaded_,
+  min_products_to_fetch_: min_products_to_fetch_,
+  query_base_: query_base_,
+  depict_api_: depict_api_,
+  is_loading_: is_loading_,
+  content_blocks_: content_blocks_
+}) {
+  // Although typing doesn't reflect it, plp_results is guaranteed to contain an array of at least one display at this point
+  const [get_extra_displays, set_extra_displays_] = $gVhhF$solidjs.createSignal([], {
+    equals: false
+  });
+  const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => [...(plp_results_()?.displays || []), ...get_extra_displays()]));
+  const {
+    indexToTargetMap_: indexToTargetMap_,
+    renderedDisplays_: renderedDisplays_,
+    currentlyIntersecting: currentlyIntersecting
+  } = $67155e1aeb7073f6$export$4a14175d33d81a96({
+    displays_by_key_: displays_by_key_,
+    product_card_template_: product_card_template_,
+    content_blocks_: content_blocks_,
+    alwaysObserveCards_: true
+  });
+  const percentage_in_view_ = $4117463e2939f5f4$export$63dd0350f8559dda({
+    get_last_result_in_viewport_: lastResultInViewport,
+    displays_by_key_: displays_by_key_,
+    index_to_target_map_: indexToTargetMap_,
+    is_loading_: is_loading_,
+    get_extra_displays: get_extra_displays
+  });
+  $3f08fe2992a2a8ca$export$5e4aed86c12acdd9({
+    percentage_in_view_: percentage_in_view_,
+    set_extra_displays_: set_extra_displays_,
+    all_products_loaded_: all_products_loaded_,
+    plp_results_: plp_results_,
+    min_products_to_fetch_: min_products_to_fetch_,
+    query_base_: query_base_,
+    depict_api_: depict_api_
+  });
+  $gVhhF$solidjs.createEffect(() => {
+    const intersecting = currentlyIntersecting();
+    setFirstResultInViewport(Math.min(...intersecting) + 1); // +1 because we want to start counting at 1
+    setLastResultsInViewport(Math.max(...intersecting) + 1);
+  });
+  return renderedDisplays_;
 }
 function $738c3a81fc46a340$export$cb5808ba002cdeed({
   layout_options_: layout_options_,
@@ -11132,213 +11339,6 @@ function $738c3a81fc46a340$export$cb5808ba002cdeed({
     }) : when_filters_closed_cols;
   });
 }
-function $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_) {
-  const size_active = $gVhhF$solidjs.createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
-    const media_query = $gVhhF$depictaiutilishared.layout_media_query_header(min_width, max_width).replaceAll("@media", "");
-    const matches = $b54e6192d0caa293$export$d9f36cf74e24d595(media_query);
-    return [matches, n_cols];
-  }));
-  const n_cols_currently_showing = $gVhhF$solidjs.createMemo(() => {
-    try {
-      const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
-      return n_cols_currently_showing;
-    } catch (e) {
-      $gVhhF$depictaiutilishared.dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
-      return null;
-    }
-  });
-  return n_cols_currently_showing;
-}
-var $d92f338ba8f9da9b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=content-block-wrapper>`);
-function $d92f338ba8f9da9b$export$791ef57e62e21c3f({
-  content_blocks_: incoming_content_blocks,
-  cols_at_size_: cols_at_size_,
-  set_top_row_shortened_by_: set_top_row_shortened_by_
-}) {
-  // these are by row
-  const [content_blocks, set_content_blocks] = $gVhhF$solidjsstore.createStore([]);
-  const n_cols_currently_showing_ = $17d06b3bcb035500$export$a79e666719b3647c(cols_at_size_);
-  $gVhhF$solidjs.createEffect(() => {
-    const incoming_value = incoming_content_blocks();
-    if (!incoming_value) {
-      set_content_blocks([]);
-      return;
-    }
-    set_content_blocks($gVhhF$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_ = $d92f338ba8f9da9b$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
-  $gVhhF$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?.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 $d92f338ba8f9da9b$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 $d92f338ba8f9da9b$var$remap_blocks_to_index({
-  get_wrapped_blocks_: get_wrapped_blocks_,
-  n_cols_currently_showing_: n_cols_currently_showing_
-}) {
-  return $gVhhF$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++) if (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++) {
-        const row = displaced_products[i + j] ||= [];
-        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 $d92f338ba8f9da9b$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
-  const get_wrapped_blocks = $gVhhF$solidjs.mapArray(() => rendered_content_blocks, block => {
-    if (!block) return;
-    const final_span_columns = $gVhhF$solidjs.createMemo(() => Math.min(block.span_columns, 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 = $gVhhF$solidjs.createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
-    const [rendering_delayed, set_rendering_delayed_] = $gVhhF$solidjs.createSignal(true);
-    const content = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-      get when() {
-        return !rendering_delayed();
-      },
-      get children() {
-        var _el$ = $gVhhF$solidjsweb.getNextElement($d92f338ba8f9da9b$var$_tmpl$);
-        $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent($d92f338ba8f9da9b$var$RenderContent, {
-          get content() {
-            return block.content;
-          }
-        }));
-        $gVhhF$solidjsweb.effect(_p$ => {
-          var _v$ = {
-              [(0, $75777da1687ba3f6$export$c500183c31c2b22e)]: final_span_columns()
-            },
-            _v$2 = `span ${final_span_columns()}`,
-            _v$3 = `span ${final_span_rows()}`;
-          _p$.e = $gVhhF$solidjsweb.style(_el$, _v$, _p$.e);
-          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("grid-column", _v$2) : _el$.style.removeProperty("grid-column"));
-          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("grid-row", _v$3) : _el$.style.removeProperty("grid-row"));
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined
-        });
-        return _el$;
-      }
-    });
-    return $gVhhF$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 $d92f338ba8f9da9b$var$RenderContent(props) {
-  const [resource] = $gVhhF$solidjs.createResource(() => props.content,
-  // Could be reactive
-  fn => fn());
-  $gVhhF$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 $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
-    get fallback() {
-      return $gVhhF$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
-        width: "100%",
-        height: "max(100%, 400px)"
-      });
-    },
-    children: resource
-  });
-}
 var $fe76fb463cc60b89$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=PLP-results><!$><!/><!$><!/>`);
 function $fe76fb463cc60b89$export$3925f87b1545cfc6({
   plp_results_: plp_results_,
@@ -14887,6 +14887,70 @@ function $bb9760b7a8acdc18$export$7af06a63c5a976c9(el, listing_id, i18n_) {
   $gVhhF$solidjs.onCleanup(disconnect);
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
+var $32c662f618f5d80d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a><img>`),
+  $32c662f618f5d80d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a><video loop>`);
+function $32c662f618f5d80d$export$780a853d15174484({
+  contentBlock: contentBlock,
+  router_: router_
+}) {
+  if (contentBlock.content.type === "image") return () => (() => {
+    var _el$ = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$),
+      _el$2 = _el$.firstChild;
+    $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilisharedlatest.catchify(ev => router_.navigate_.go_to_({
+      new_url_: contentBlock.content.link,
+      is_replace_: false,
+      event_: ev
+    })), true);
+    _el$2.style.setProperty("width", "100%");
+    _el$2.style.setProperty("height", "100%");
+    _el$2.style.setProperty("object-fit", "cover");
+    _el$2.style.setProperty("position", "absolute");
+    _el$2.style.setProperty("inset", "0");
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$ = contentBlock.content.link,
+        _v$2 = contentBlock.content.url;
+      _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$, "href", _p$.e = _v$);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$2, "src", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+  if (contentBlock.content.type === "video") return () => (() => {
+    var _el$3 = $gVhhF$solidjsweb.getNextElement($32c662f618f5d80d$var$_tmpl$2),
+      _el$4 = _el$3.firstChild;
+    $gVhhF$solidjsweb.addEventListener(_el$3, "click", $gVhhF$depictaiutilisharedlatest.catchify(ev => router_.navigate_.go_to_({
+      new_url_: contentBlock.content.link,
+      is_replace_: false,
+      event_: ev
+    })), true);
+    $gVhhF$solidjsweb.setProperty(_el$4, "controls", false);
+    $gVhhF$solidjsweb.setProperty(_el$4, "muted", true);
+    $gVhhF$solidjsweb.setProperty(_el$4, "autoplay", true);
+    $gVhhF$solidjsweb.setProperty(_el$4, "playsinline", true);
+    _el$4.style.setProperty("width", "100%");
+    _el$4.style.setProperty("height", "100%");
+    _el$4.style.setProperty("object-fit", "cover");
+    _el$4.style.setProperty("position", "absolute");
+    _el$4.style.setProperty("inset", "0");
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$3 = contentBlock.content.link,
+        _v$4 = contentBlock.content.url;
+      _v$3 !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$3, "href", _p$.e = _v$3);
+      _v$4 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$4, "src", _p$.t = _v$4);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$3;
+  })();
+}
+$gVhhF$solidjsweb.delegateEvents(["click"]);
 var $840d88a04b2d22a7$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=product-count><!$><!/> <!$><!/>`),
   $840d88a04b2d22a7$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
   $840d88a04b2d22a7$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
@@ -14982,6 +15046,23 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   }));
   // Make "Get Listing" request to get quicklinks, breadcrumbs, title, etc
   const [plp_meta] = $gVhhF$solidjs.createResource(meta_query_base, $gVhhF$depictaiutilisharedlatest.catchify(query => depict_api_.get_listing(query)));
+  const contentBlocksByRow = $gVhhF$solidjs.createMemo(() => {
+    if (content_blocks_by_row_()) return content_blocks_by_row_();
+    const content = [];
+    plp_meta()?.content_blocks?.forEach(row => {
+      const contentBlock = {
+        span_columns: row.span_columns,
+        span_rows: row.span_rows,
+        position: row.position,
+        content: $32c662f618f5d80d$export$780a853d15174484({
+          contentBlock: row,
+          router_: router_
+        })
+      };
+      content[row.row] = contentBlock;
+    });
+    return content;
+  });
   const available_sortings_ = $gVhhF$solidjs.createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
     order: sort.order ?? "desc"
@@ -15242,7 +15323,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
               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_: {