@depict-ai/ui 4.7.28 → 4.7.30

package/latest/index.js

@@ -1,13 +1,413 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, catchify as $9HbP8$catchify1, dlog as $9HbP8$dlog1, camelCasifyObject as $9HbP8$camelCasifyObject, useExpandingContainer as $9HbP8$useExpandingContainer, fetch_retry as $9HbP8$fetch_retry, base_url as $9HbP8$base_url, dwarn as $9HbP8$dwarn, slider_fractional_factory as $9HbP8$slider_fractional_factory, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, observer as $9HbP8$observer, javascript_media_query as $9HbP8$javascript_media_query, queueMacroTask as $9HbP8$queueMacroTask, findMostFrequentItem as $9HbP8$findMostFrequentItem, standard_price_format as $9HbP8$standard_price_format, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, insert_surfaces as $9HbP8$insert_surfaces, is_debug as $9HbP8$is_debug } from "@depict-ai/utilishared/latest";
-import { dlog as $9HbP8$dlog, catchify as $9HbP8$catchify, ListenableSet as $9HbP8$ListenableSet, use_href_accessor as $9HbP8$use_href_accessor1, queueMacroTask as $9HbP8$queueMacroTask1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
-import { createRoot as $9HbP8$createRoot, createSignal as $9HbP8$createSignal, createEffect as $9HbP8$createEffect, onCleanup as $9HbP8$onCleanup, createContext as $9HbP8$createContext, Show as $9HbP8$Show, useContext as $9HbP8$useContext, createMemo as $9HbP8$createMemo, untrack as $9HbP8$untrack, For as $9HbP8$For, getOwner as $9HbP8$getOwner, createResource as $9HbP8$createResource, runWithOwner as $9HbP8$runWithOwner, mergeProps as $9HbP8$mergeProps1, Suspense as $9HbP8$Suspense, createRenderEffect as $9HbP8$createRenderEffect, Index as $9HbP8$Index, createUniqueId as $9HbP8$createUniqueId, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, splitProps as $9HbP8$splitProps, on as $9HbP8$on, batch as $9HbP8$batch, createSelector as $9HbP8$createSelector, children as $9HbP8$children, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
-import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, createComponent as $9HbP8$createComponent, isServer as $9HbP8$isServer, effect as $9HbP8$effect, setAttribute as $9HbP8$setAttribute, mergeProps as $9HbP8$mergeProps, className as $9HbP8$className, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, getNextMarker as $9HbP8$getNextMarker, classList as $9HbP8$classList, use as $9HbP8$use, style as $9HbP8$style, setProperty as $9HbP8$setProperty, Dynamic as $9HbP8$Dynamic } from "solid-js/web";
+import { add_to_version_info as $9HbP8$add_to_version_info, layout_media_query_header as $9HbP8$layout_media_query_header, dwarn as $9HbP8$dwarn, javascript_media_query as $9HbP8$javascript_media_query, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, report as $9HbP8$report, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, catchify as $9HbP8$catchify1, dlog as $9HbP8$dlog1, camelCasifyObject as $9HbP8$camelCasifyObject, useExpandingContainer as $9HbP8$useExpandingContainer, fetch_retry as $9HbP8$fetch_retry, base_url as $9HbP8$base_url, slider_fractional_factory as $9HbP8$slider_fractional_factory, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, observer as $9HbP8$observer, queueMacroTask as $9HbP8$queueMacroTask, findMostFrequentItem as $9HbP8$findMostFrequentItem, standard_price_format as $9HbP8$standard_price_format, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, insert_surfaces as $9HbP8$insert_surfaces, is_debug as $9HbP8$is_debug } from "@depict-ai/utilishared/latest";
+import { template as $9HbP8$template, createComponent as $9HbP8$createComponent, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, effect as $9HbP8$effect, style as $9HbP8$style, spread as $9HbP8$spread, mergeProps as $9HbP8$mergeProps1, runHydrationEvents as $9HbP8$runHydrationEvents, getNextMarker as $9HbP8$getNextMarker, classList as $9HbP8$classList, className as $9HbP8$className, isServer as $9HbP8$isServer, setAttribute as $9HbP8$setAttribute, addEventListener as $9HbP8$addEventListener, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, use as $9HbP8$use, setProperty as $9HbP8$setProperty, Dynamic as $9HbP8$Dynamic } from "solid-js/web";
+import { createEffect as $9HbP8$createEffect, createComputed as $9HbP8$createComputed, createMemo as $9HbP8$createMemo, mapArray as $9HbP8$mapArray, createSignal as $9HbP8$createSignal, Show as $9HbP8$Show, mergeProps as $9HbP8$mergeProps, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, onCleanup as $9HbP8$onCleanup, createUniqueId as $9HbP8$createUniqueId, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, ErrorBoundary as $9HbP8$ErrorBoundary, createRoot as $9HbP8$createRoot, untrack as $9HbP8$untrack, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createRenderEffect as $9HbP8$createRenderEffect, Index as $9HbP8$Index, splitProps as $9HbP8$splitProps, on as $9HbP8$on, batch as $9HbP8$batch, createSelector as $9HbP8$createSelector, children as $9HbP8$children, createReaction as $9HbP8$createReaction } from "solid-js";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
+import { dlog as $9HbP8$dlog, catchify as $9HbP8$catchify, ListenableSet as $9HbP8$ListenableSet, use_href_accessor as $9HbP8$use_href_accessor1, queueMacroTask as $9HbP8$queueMacroTask1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
 
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.28";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.30";
+function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
+  const signal = $9HbP8$createSignal(false);
+  $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
+    matches: matches
+  }) => signal[1](matches)).remove);
+  return signal[0];
+}
+function $77348875ac090fcd$export$a79e666719b3647c(cols_at_size_) {
+  const size_active = $9HbP8$createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
+    const media_query = $9HbP8$layout_media_query_header(min_width, max_width).replaceAll("@media", "");
+    const matches = $dc9262ef6f786812$export$d9f36cf74e24d595(media_query);
+    return [matches, n_cols];
+  }));
+  const n_cols_currently_showing = $9HbP8$createMemo(() => {
+    try {
+      const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
+      return n_cols_currently_showing;
+    } catch (e) {
+      $9HbP8$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 $4fd48cb976bf1789$export$e1d52e4f0c7557a1 extends Error {}
+class $4fd48cb976bf1789$export$aa14a9f43128f61f extends $4fd48cb976bf1789$export$e1d52e4f0c7557a1 {
+  constructor(templateError) {
+    super("Uncaught error in product card template", {
+      cause: templateError
+    });
+  }
+}
+var $b7436a6d1fd64e3b$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div><!$><!/><!$><!/>`);
+const $b7436a6d1fd64e3b$var$ExtraInfoContext = /*@__PURE__*/$9HbP8$createContext();
+function $b7436a6d1fd64e3b$export$240ecf5363d76c0f(props) {
+  return $9HbP8$createComponent($b7436a6d1fd64e3b$var$ExtraInfoContext.Provider, {
+    get value() {
+      return props.getContext_;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $b7436a6d1fd64e3b$export$b69d0d92862de18b(props) {
+  const getContextFunction = $9HbP8$useContext($b7436a6d1fd64e3b$var$ExtraInfoContext);
+  return $9HbP8$ErrorBoundary({
+    fallback(err, retry) {
+      const {
+        message_: message_,
+        severity_: severity_
+      } = props;
+      let message = message_;
+      if (err instanceof (0, $4fd48cb976bf1789$export$aa14a9f43128f61f)) {
+        console.error(err.cause);
+        message = `${message}: ${err.message}`;
+      } else $9HbP8$report([err, message_], severity_, getContextFunction?.());
+      return (() => {
+        var _el$ = $9HbP8$getNextElement($b7436a6d1fd64e3b$var$_tmpl$),
+          _el$2 = _el$.firstChild,
+          [_el$3, _co$] = $9HbP8$getNextMarker(_el$2.nextSibling),
+          _el$4 = _el$3.nextSibling,
+          [_el$5, _co$2] = $9HbP8$getNextMarker(_el$4.nextSibling);
+        $9HbP8$insert(_el$, message, _el$3, _co$);
+        $9HbP8$insert(_el$, () => props.on_error_?.(retry), _el$5, _co$2);
+        $9HbP8$effect(_$p => $9HbP8$classList(_el$, Object.fromEntries(props.class_list_?.map(c => [c, true]) || []), _$p));
+        return _el$;
+      })();
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+var $6dee9211e57ac31a$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`),
+  $6dee9211e57ac31a$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<style type=text/css>`);
+const $6dee9211e57ac31a$export$c500183c31c2b22e = "--spans-columns";
+function $6dee9211e57ac31a$export$ab6b147eec64fea5(props) {
+  const container_class = "x" + $9HbP8$createUniqueId();
+  const container_element_ = (() => {
+    var _el$ = $9HbP8$getNextElement($6dee9211e57ac31a$var$_tmpl$);
+    $9HbP8$spread(_el$, $9HbP8$mergeProps1(() => props.element_attributes, {
+      "classList": {
+        [container_class]: true
+      }
+    }), false, true);
+    $9HbP8$insert(_el$, () => props.children);
+    $9HbP8$runHydrationEvents();
+    return _el$;
+  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
+  return $9HbP8$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
+    message_: "Failed calculating css grid layout",
+    severity_: "error",
+    get children() {
+      return $6dee9211e57ac31a$export$e2f22da34aaf310a(props, container_element_, false, container_class);
+    }
+  });
+}
+function $6dee9211e57ac31a$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 = $9HbP8$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 = $9HbP8$createMemo(() => $6dee9211e57ac31a$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 = $9HbP8$createMemo(() => {
+    return `${container_selector}{display:grid;}`;
+  });
+  const get_styling = $9HbP8$createMemo(() => base_styling() + col_styling());
+  const style_element = (() => {
+    var _el$2 = $9HbP8$getNextElement($6dee9211e57ac31a$var$_tmpl$2);
+    $9HbP8$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 $6dee9211e57ac31a$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_ ? $6dee9211e57ac31a$var$can_use_gap_for_unit(override_vertical_spacing_) : $6dee9211e57ac31a$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(${$6dee9211e57ac31a$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(${$6dee9211e57ac31a$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) * ${$6dee9211e57ac31a$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 = $9HbP8$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 `${$9HbP8$layout_media_query_header(min, max)}{${media_query_body}}${additional_styling}`;
+  }).join("");
+}
+function $6dee9211e57ac31a$var$can_use_gap_for_unit(spacing) {
+  const trimmed_spacing = spacing.trim();
+  return !trimmed_spacing.includes("%");
+}
+function $6dee9211e57ac31a$var$strip_percent_unit(css_value) {
+  return css_value.replaceAll("%", "");
+}
+var $d20eff0aadc28983$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span>`);
+function $d20eff0aadc28983$export$acb3eaade4b23afd(props) {
+  // Work around https://github.com/solidjs/solid/issues/1980
+  return (() => {
+    var _el$ = $9HbP8$getNextElement($d20eff0aadc28983$var$_tmpl$);
+    $9HbP8$effect(_p$ => {
+      var _v$ = `${props.class || ""} depict-placeholder`,
+        _v$2 = props.style;
+      _v$ !== _p$.e && $9HbP8$className(_el$, _p$.e = _v$);
+      _p$.t = $9HbP8$style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+function $7f60f09116a3fe61$export$3f37af283f8fb843(props) {
+  const style = $9HbP8$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 $9HbP8$createComponent((0, $d20eff0aadc28983$export$acb3eaade4b23afd), {
+    get style() {
+      return style();
+    },
+    get ["class"]() {
+      return props.class;
+    }
+  });
+}
+var $e7a7eb102ddc0c79$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=content-block-wrapper>`);
+function $e7a7eb102ddc0c79$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] = $9HbP8$createStore([]);
+  const n_cols_currently_showing_ = $77348875ac090fcd$export$a79e666719b3647c(cols_at_size_);
+  $9HbP8$createEffect(() => {
+    const incoming_value = incoming_content_blocks();
+    if (!incoming_value) {
+      set_content_blocks([]);
+      return;
+    }
+    set_content_blocks($9HbP8$reconcile(incoming_value, {
+      key: "content"
+    })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
+  });
+
+  const get_wrapped_blocks_ = $e7a7eb102ddc0c79$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
+  $9HbP8$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 $9HbP8$createMemo(() => $e7a7eb102ddc0c79$export$92aa5d691d588f3f({
+    wrapped_blocks_: get_wrapped_blocks_(),
+    n_cols_currently_showing_: n_cols_currently_showing_()
+  }));
+}
+function $e7a7eb102ddc0c79$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;
+  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;
+}
+/**
+ * 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 $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
+  const get_wrapped_blocks = $9HbP8$mapArray(() => rendered_content_blocks, block => {
+    if (!block) return;
+    const final_span_columns = $9HbP8$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 = $9HbP8$createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
+    const [rendering_delayed, set_rendering_delayed_] = $9HbP8$createSignal(true);
+    const content = $9HbP8$createComponent((0, $9HbP8$Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
+        var _el$ = $9HbP8$getNextElement($e7a7eb102ddc0c79$var$_tmpl$);
+        $9HbP8$insert(_el$, $9HbP8$createComponent($e7a7eb102ddc0c79$var$RenderContent, {
+          get content() {
+            return block.content;
+          }
+        }));
+        $9HbP8$effect(_p$ => {
+          var _v$ = {
+              [(0, $6dee9211e57ac31a$export$c500183c31c2b22e)]: final_span_columns()
+            },
+            _v$2 = `span ${final_span_columns()}`,
+            _v$3 = `span ${final_span_rows()}`;
+          _p$.e = $9HbP8$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 $9HbP8$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 $e7a7eb102ddc0c79$var$RenderContent(props) {
+  const [resource] = $9HbP8$createResource(() => props.content,
+  // Could be reactive
+  fn => fn());
+  $9HbP8$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 $9HbP8$createComponent((0, $9HbP8$Suspense), {
+    get fallback() {
+      return $9HbP8$createComponent((0, $7f60f09116a3fe61$export$3f37af283f8fb843), {
+        width: "100%",
+        height: "max(100%, 400px)"
+      });
+    },
+    children: resource
+  });
+}
 let $4eb0a704f8f30273$var$elementsHoveredSignal;
 let $4eb0a704f8f30273$var$consumersSignal;
 function $4eb0a704f8f30273$export$d4d96868197be50e() {
@@ -665,64 +1065,13 @@ function $6e41f1fde994db72$var$Placeholder({
   });
 }
 
-// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
-class $4fd48cb976bf1789$export$e1d52e4f0c7557a1 extends Error {}
-class $4fd48cb976bf1789$export$aa14a9f43128f61f extends $4fd48cb976bf1789$export$e1d52e4f0c7557a1 {
-  constructor(templateError) {
-    super("Uncaught error in product card template", {
-      cause: templateError
-    });
-  }
-}
-var $b7436a6d1fd64e3b$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div><!$><!/><!$><!/>`);
-const $b7436a6d1fd64e3b$var$ExtraInfoContext = /*@__PURE__*/$9HbP8$createContext();
-function $b7436a6d1fd64e3b$export$240ecf5363d76c0f(props) {
-  return $9HbP8$createComponent($b7436a6d1fd64e3b$var$ExtraInfoContext.Provider, {
-    get value() {
-      return props.getContext_;
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
-function $b7436a6d1fd64e3b$export$b69d0d92862de18b(props) {
-  const getContextFunction = $9HbP8$useContext($b7436a6d1fd64e3b$var$ExtraInfoContext);
-  return $9HbP8$ErrorBoundary({
-    fallback(err, retry) {
-      const {
-        message_: message_,
-        severity_: severity_
-      } = props;
-      let message = message_;
-      if (err instanceof (0, $4fd48cb976bf1789$export$aa14a9f43128f61f)) {
-        console.error(err.cause);
-        message = `${message}: ${err.message}`;
-      } else $9HbP8$report([err, message_], severity_, getContextFunction?.());
-      return (() => {
-        var _el$ = $9HbP8$getNextElement($b7436a6d1fd64e3b$var$_tmpl$),
-          _el$2 = _el$.firstChild,
-          [_el$3, _co$] = $9HbP8$getNextMarker(_el$2.nextSibling),
-          _el$4 = _el$3.nextSibling,
-          [_el$5, _co$2] = $9HbP8$getNextMarker(_el$4.nextSibling);
-        $9HbP8$insert(_el$, message, _el$3, _co$);
-        $9HbP8$insert(_el$, () => props.on_error_?.(retry), _el$5, _co$2);
-        $9HbP8$effect(_$p => $9HbP8$classList(_el$, Object.fromEntries(props.class_list_?.map(c => [c, true]) || []), _$p));
-        return _el$;
-      })();
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
 var $c8d5ff4524619fcd$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`),
   $c8d5ff4524619fcd$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<style type=text/css>`);
 function $c8d5ff4524619fcd$export$d21e32dfedac04be(props) {
   const container_class = "x" + $9HbP8$createUniqueId();
   const container_element_ = (() => {
     var _el$ = $9HbP8$getNextElement($c8d5ff4524619fcd$var$_tmpl$);
-    $9HbP8$spread(_el$, $9HbP8$mergeProps(() => props.element_attributes, {
+    $9HbP8$spread(_el$, $9HbP8$mergeProps1(() => props.element_attributes, {
       "classList": {
         [container_class]: true
       }
@@ -883,7 +1232,7 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
       } = slider;
       const Layout = props => $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, insert_here, true);
       // Do like this, so we don't have to call mergeProps ourselves
-      $9HbP8$createComponent(Layout, $9HbP8$mergeProps({
+      $9HbP8$createComponent(Layout, $9HbP8$mergeProps1({
         rows: "all",
         layout: "slider"
       }, layout_options_));
@@ -958,78 +1307,22 @@ function $16b52438165aafe2$export$23fca46f3143581f(component, error_message) {
         dispose();
       });
     });
-  });else
-    // we're already in a root so cleanups are handled
-    return component_in_error_boundary();
-}
-const $011607bdf658f807$var$ListingContext = /*@__PURE__*/$9HbP8$createContext();
-function $011607bdf658f807$export$e68cff63f76bd15b(props) {
-  const our_object = {};
-  return $9HbP8$createComponent($011607bdf658f807$var$ListingContext.Provider, {
-    value: our_object,
-    get children() {
-      return props.children;
-    }
-  });
-}
-function $011607bdf658f807$export$8d0c4fdbb05a2f2e() {
-  return $9HbP8$useContext($011607bdf658f807$var$ListingContext);
-}
-var $d20eff0aadc28983$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span>`);
-function $d20eff0aadc28983$export$acb3eaade4b23afd(props) {
-  // Work around https://github.com/solidjs/solid/issues/1980
-  return (() => {
-    var _el$ = $9HbP8$getNextElement($d20eff0aadc28983$var$_tmpl$);
-    $9HbP8$effect(_p$ => {
-      var _v$ = `${props.class || ""} depict-placeholder`,
-        _v$2 = props.style;
-      _v$ !== _p$.e && $9HbP8$className(_el$, _p$.e = _v$);
-      _p$.t = $9HbP8$style(_el$, _v$2, _p$.t);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
-    return _el$;
-  })();
-}
-function $7f60f09116a3fe61$export$3f37af283f8fb843(props) {
-  const style = $9HbP8$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 $9HbP8$createComponent((0, $d20eff0aadc28983$export$acb3eaade4b23afd), {
-    get style() {
-      return style();
-    },
-    get ["class"]() {
-      return props.class;
+  });else
+    // we're already in a root so cleanups are handled
+    return component_in_error_boundary();
+}
+const $011607bdf658f807$var$ListingContext = /*@__PURE__*/$9HbP8$createContext();
+function $011607bdf658f807$export$e68cff63f76bd15b(props) {
+  const our_object = {};
+  return $9HbP8$createComponent($011607bdf658f807$var$ListingContext.Provider, {
+    value: our_object,
+    get children() {
+      return props.children;
     }
   });
 }
-function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
-  const signal = $9HbP8$createSignal(false);
-  $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
-    matches: matches
-  }) => signal[1](matches)).remove);
-  return signal[0];
+function $011607bdf658f807$export$8d0c4fdbb05a2f2e() {
+  return $9HbP8$useContext($011607bdf658f807$var$ListingContext);
 }
 function $d134eae24341b4a1$export$89c6019e4baa40b1(props) {
   const style = $9HbP8$createMemo(() => {
@@ -1183,7 +1476,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
-  const modifiedOtherAttributes = $9HbP8$mergeProps1(otherAttributes, {
+  const modifiedOtherAttributes = $9HbP8$mergeProps(otherAttributes, {
     get loading() {
       return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
     }
@@ -1253,7 +1546,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     $9HbP8$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $9HbP8$onCleanup(() => gotCleanedUp = true);
-  $9HbP8$spread(img, $9HbP8$mergeProps1(modifiedOtherAttributes), false, true);
+  $9HbP8$spread(img, $9HbP8$mergeProps(modifiedOtherAttributes), false, true);
   $9HbP8$createRenderEffect(() => {
     props.src;
     srcJustChanged = true;
@@ -1357,7 +1650,7 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     $9HbP8$queueMacroTask(() => setCurrentImageSize()); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $9HbP8$insert(container, $9HbP8$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), $9HbP8$mergeProps({
+  $9HbP8$insert(container, $9HbP8$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), $9HbP8$mergeProps1({
     get size() {
       return $9HbP8$createMemo(() => currentImageSize()?.() || 0);
     },
@@ -1372,7 +1665,7 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   return container;
 }
 function $70bb27cc6be01fc7$export$9d4a4b669b1929ab(props) {
-  return $9HbP8$createComponent((0, $660070e2a394b3c3$export$e4b984597b71e989), $9HbP8$mergeProps(props, {
+  return $9HbP8$createComponent((0, $660070e2a394b3c3$export$e4b984597b71e989), $9HbP8$mergeProps1(props, {
     get imgProps() {
       return {
         ...props.imgProps,
@@ -1432,7 +1725,7 @@ function $08a49ecdcd5beaca$export$b73ed90f0ee50dc3({
       [_el$15, _co$4] = $9HbP8$getNextMarker(_el$14.nextSibling);
     var _ref$ = outerRef_;
     typeof _ref$ === "function" ? $9HbP8$use(_ref$, _el$) : outerRef_ = _el$;
-    $9HbP8$spread(_el$, $9HbP8$mergeProps(() => enableLink() ? {
+    $9HbP8$spread(_el$, $9HbP8$mergeProps1(() => enableLink() ? {
       href: href()
     } : {}, {
       get onClick() {
@@ -1533,7 +1826,7 @@ function $08a49ecdcd5beaca$export$b73ed90f0ee50dc3({
             disconnector();
           }));
         }, _el$3);
-        $9HbP8$spread(_el$5, $9HbP8$mergeProps(() => title() && {
+        $9HbP8$spread(_el$5, $9HbP8$mergeProps1(() => title() && {
           title: title()
         }), false, true);
         $9HbP8$insert(_el$5, () => title() ?? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
@@ -1704,7 +1997,7 @@ function $11fb4b33b36ecfac$export$ebf0b1d4f90c09ae({
           var _el$ = $9HbP8$getNextElement($11fb4b33b36ecfac$var$_tmpl$),
             _el$2 = _el$.firstChild;
           $9HbP8$addEventListener(_el$2, "mouseleave", $9HbP8$catchify1(() => supportsHover_() && setUserWantsExpanded(false)));
-          $9HbP8$addEventListener(_el$2, "mouseenter", $9HbP8$catchify1(() => supportsHover_() && setUserWantsExpanded(true)));
+          $9HbP8$addEventListener(_el$2, "mouseenter", $9HbP8$catchify1(() => displays_()?.length && supportsHover_() && setUserWantsExpanded(true)));
           $9HbP8$use(el => {
             $9HbP8$createEffect(() => {
               if (userWantsExpanded()) return;
@@ -1757,7 +2050,7 @@ function $11fb4b33b36ecfac$export$ebf0b1d4f90c09ae({
             }
           }));
           $9HbP8$effect(_p$ => {
-            var _v$ = !!(userWantsExpanded() && !!displays_()),
+            var _v$ = !!userWantsExpanded(),
               _v$2 = !!(!getSecondPartAnimationRunning() && userWantsExpanded()),
               _v$3 = displays_() &&
               // The styling is written like this to eke out animation smoothness on low CPU devices, git blame for previous, more readable versions.
@@ -1834,6 +2127,7 @@ function $e9d1d09be9e6471e$export$44809a8a3e867e30({
     } else prev.delete(us);
     return prev;
   }));
+  $9HbP8$createEffect(() => !display_() && setUserWantsExpanded(false));
   if (slidableInformation) {
     const ourVisiblityInSlider = $9HbP8$createMemo(() => {
       const currentCard = index?.();
@@ -1860,7 +2154,7 @@ function $e9d1d09be9e6471e$export$44809a8a3e867e30({
       [_el$3, _co$] = $9HbP8$getNextMarker(_el$2.nextSibling),
       _el$4 = _el$3.nextSibling,
       [_el$5, _co$2] = $9HbP8$getNextMarker(_el$4.nextSibling);
-    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify1(() => setUserWantsExpanded(prev => !prev)), true);
+    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify1(() => display_() && setUserWantsExpanded(prev => !prev)), true);
     $9HbP8$use(el => {
       container = el;
       const ro = new ResizeObserver($9HbP8$catchify1(records => {
@@ -2076,7 +2370,7 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
       _el$6 = _el$5.nextSibling,
       [_el$7, _co$2] = $9HbP8$getNextMarker(_el$6.nextSibling);
     $9HbP8$insert(_el$3, (0, $a458486f22b22f63$export$a2cc176055f8f08), _el$5, _co$);
-    $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps({
+    $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps1({
       get rows() {
         return rows_object_();
       },
@@ -2209,7 +2503,7 @@ function $07ef910e8ef6b783$export$2c9f9bf2092486aa(props) {
               return $9HbP8$createComponent((0, $c4492d24952ed731$export$d41d19e89346fa2), sharedOptions);
             },
             get children() {
-              return $9HbP8$createComponent((0, $3da8afe3ed57cf34$export$7da560f849543dff), $9HbP8$mergeProps(sharedOptions, {
+              return $9HbP8$createComponent((0, $3da8afe3ed57cf34$export$7da560f849543dff), $9HbP8$mergeProps1(sharedOptions, {
                 view_more_button_: () => props.gridOptions_?.view_more_button,
                 max_rows_: () => props.gridOptions_?.max_rows
               }));
@@ -2260,7 +2554,7 @@ async function $07ef910e8ef6b783$var$runDisplayTransformersForLooks(baseData, li
     }) : displaysToTransform;
     const transformedListings = await transformedListingsPromise;
     const transformedDisplayById = Object.fromEntries(transformedProducts.map(display => [$16351e4c87b90b3d$export$548d053aba053d79(display), display]));
-    return transformedListings.map(listing => $9HbP8$mergeProps1(listing, {
+    return transformedListings.map(listing => $9HbP8$mergeProps(listing, {
       // use mergeProps because in preview browser we add getters in this object, that would be called too early otherwise
       displays: (displayIdsPerListingId[listing.listing_id] || []).map(displayId => transformedDisplayById[displayId]).filter(v => v)
     }));
@@ -3656,7 +3950,7 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
     when: on_back_,
     get children() {
       var _el$ = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$);
-      $9HbP8$spread(_el$, $9HbP8$mergeProps({
+      $9HbP8$spread(_el$, $9HbP8$mergeProps1({
         get onClick() {
           return $9HbP8$catchify1(on_back_);
         },
@@ -3678,7 +3972,7 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
     var _el$2 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$2);
     var _ref$ = buttonInFieldRef_;
     typeof _ref$ === "function" ? $9HbP8$use(_ref$, _el$2) : buttonInFieldRef_ = _el$2;
-    $9HbP8$spread(_el$2, $9HbP8$mergeProps({
+    $9HbP8$spread(_el$2, $9HbP8$mergeProps1({
       get classList() {
         return {
           empty: searchFieldEmpty()
@@ -4463,7 +4757,7 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   const href = $9HbP8$createMemo(() => listing_()?.page_url); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
   const LinkToListing = props => (() => {
     var _el$ = $9HbP8$getNextElement($4ce5b8892775b62d$var$_tmpl$);
-    $9HbP8$spread(_el$, $9HbP8$mergeProps(props, {
+    $9HbP8$spread(_el$, $9HbP8$mergeProps1(props, {
       get href() {
         return href();
       },
@@ -4857,7 +5151,7 @@ function $2f3171b02c8f4a5d$export$af1fb307bbba2417({
   $9HbP8$createComputed($9HbP8$on(search_field_value_[0], () => !suggestions_updating_blocked() && set_selected_index(undefined), {
     defer: true
   })); // reset autocomplete position if query changes
-  return [$9HbP8$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $9HbP8$mergeProps(sharedSuggestionProps, {
+  return [$9HbP8$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $9HbP8$mergeProps1(sharedSuggestionProps, {
     get title_() {
       return i18n_.popular_;
     },
@@ -4867,7 +5161,7 @@ function $2f3171b02c8f4a5d$export$af1fb307bbba2417({
       return itemIndexes_.suggestionsIndex_;
     },
     showPlaceholders_: () => showPlaceholders() || noResults_() && !noResultsPopularSuggestions.latest
-  })), $9HbP8$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $9HbP8$mergeProps(sharedSuggestionProps, {
+  })), $9HbP8$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $9HbP8$mergeProps1(sharedSuggestionProps, {
     get title_() {
       return i18n_.previous_;
     },
@@ -4884,7 +5178,7 @@ function $2f3171b02c8f4a5d$export$af1fb307bbba2417({
       return _el$;
     })(),
     showPlaceholders_: () => false
-  })), $9HbP8$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $9HbP8$mergeProps(sharedSuggestionProps, {
+  })), $9HbP8$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $9HbP8$mergeProps1(sharedSuggestionProps, {
     get title_() {
       return i18n_.content_;
     },
@@ -5408,7 +5702,7 @@ function $024fbc0a2d796fad$export$b2539bed5023c21c(props) {
   return $9HbP8$createComponent($024fbc0a2d796fad$var$TabsContext.Provider, {
     value: new (0, $9HbP8$ListenableSet)(),
     get children() {
-      return $9HbP8$createComponent($024fbc0a2d796fad$var$ActualTabs, $9HbP8$mergeProps(props, {
+      return $9HbP8$createComponent($024fbc0a2d796fad$var$ActualTabs, $9HbP8$mergeProps1(props, {
         get children() {
           return props.children;
         }
@@ -5438,7 +5732,7 @@ function $024fbc0a2d796fad$var$ActualTabs(props) {
     },
     children: item => {
       const weSelected = $9HbP8$createMemo(() => isSelected(item().id));
-      return $9HbP8$createComponent((0, $9HbP8$Dynamic), $9HbP8$mergeProps({
+      return $9HbP8$createComponent((0, $9HbP8$Dynamic), $9HbP8$mergeProps1({
         get component() {
           return props.AnchorComponent;
         },
@@ -5545,7 +5839,7 @@ function $024fbc0a2d796fad$export$3e41faf802a29e71(props) {
   if (!currentTabs) throw new Error("Tab must be a child of Tabs");
   const id = $9HbP8$createUniqueId();
   const ourSet = currentTabs;
-  const extendedProps = $9HbP8$mergeProps1({
+  const extendedProps = $9HbP8$mergeProps({
     id: id
   }, props);
   ourSet.add(extendedProps);
@@ -6063,14 +6357,14 @@ function $8560c919ff763930$var$ActualShopTheLookButton(props) {
   const displayStyleValue = $9HbP8$createMemo(() => hasAnythingToShow() ? "" : "none");
   const button = (() => {
     var _el$2 = $9HbP8$getNextElement($8560c919ff763930$var$_tmpl$2);
-    $9HbP8$spread(_el$2, $9HbP8$mergeProps(() => localProps.buttonAttributes), false, true);
+    $9HbP8$spread(_el$2, $9HbP8$mergeProps1(() => localProps.buttonAttributes), false, true);
     $9HbP8$insert(_el$2, () => localProps?.buttonAttributes?.children || "Shop the look");
     $9HbP8$runHydrationEvents();
     return _el$2;
   })();
   $9HbP8$createEffect(() => button.style.display = displayStyleValue()); // Set our attributes like this, so we allow total control over the button from the outside via buttonAttributes
   $9HbP8$createEffect(() => !hasAnythingToShow() && closeModal()); // close modal if we ever get into the state of having it open and not having anything to show
-  $8560c919ff763930$var$modalProps = $9HbP8$mergeProps1(partForModal, {
+  $8560c919ff763930$var$modalProps = $9HbP8$mergeProps(partForModal, {
     products_to_shop_: products_to_shop_
   });
   button.addEventListener("click", openModal);
@@ -6791,7 +7085,7 @@ var $f8a56ba74eedd0c6$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg><path d="M
 function $f8a56ba74eedd0c6$export$f21ab0717a89c77f(props) {
   return (() => {
     var _el$ = $9HbP8$getNextElement($f8a56ba74eedd0c6$var$_tmpl$);
-    $9HbP8$spread(_el$, $9HbP8$mergeProps(props, {
+    $9HbP8$spread(_el$, $9HbP8$mergeProps1(props, {
       "xmlns": "http://www.w3.org/2000/svg",
       "width": "11",
       "height": "12"
@@ -8242,7 +8536,7 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
                 [_el$6, _co$] = $9HbP8$getNextMarker(_el$5.nextSibling),
                 _el$7 = _el$6.nextSibling,
                 [_el$8, _co$2] = $9HbP8$getNextMarker(_el$7.nextSibling);
-              $9HbP8$spread(_el$2, $9HbP8$mergeProps(attributes, {
+              $9HbP8$spread(_el$2, $9HbP8$mergeProps1(attributes, {
                 get disabled() {
                   return $9HbP8$memo(() => !!count_zero())() && !is_selected();
                 },
@@ -9650,7 +9944,7 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
     // Filter out our transformed ancestors
     const transformedAncestors = Object.fromEntries(transformerResult.filter(item => item.is_suggestion === false).map(item => [item.listing_id, item]));
     // Add the now transformed ancestors into the ancestors of the listing suggestions
-    const transformedSuggestions = transformerResult.filter(item => item.is_suggestion !== false).map(item => $9HbP8$mergeProps1(item, {
+    const transformedSuggestions = transformerResult.filter(item => item.is_suggestion !== false).map(item => $9HbP8$mergeProps(item, {
       // Use mergeProps instead of spread since page_url and other properties could be a getter that solid components should call
       ancestors: item.ancestors.map(ancestor => {
         const newAncestor = transformedAncestors[ancestor.listing_id];
@@ -10211,7 +10505,7 @@ function $172e1b898d457050$export$7de92c4c2205ebf3({
       [_el$6, _co$2] = $9HbP8$getNextMarker(_el$5.nextSibling);
     $9HbP8$insert(_el$2, () => i18n_.search_recs_title_());
     $9HbP8$insert(_el$, (0, $a458486f22b22f63$export$a2cc176055f8f08), _el$4, _co$);
-    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps({
+    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps1({
       rows: rows_object,
       layout: "grid",
       element_attributes: {
@@ -10919,99 +11213,6 @@ function $0449e7d49398c077$export$a1fd619a4743ca08({
   });
   return renderedDisplays_;
 }
-var $6dee9211e57ac31a$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`),
-  $6dee9211e57ac31a$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<style type=text/css>`);
-const $6dee9211e57ac31a$export$c500183c31c2b22e = "--spans-columns";
-function $6dee9211e57ac31a$export$ab6b147eec64fea5(props) {
-  const container_class = "x" + $9HbP8$createUniqueId();
-  const container_element_ = (() => {
-    var _el$ = $9HbP8$getNextElement($6dee9211e57ac31a$var$_tmpl$);
-    $9HbP8$spread(_el$, $9HbP8$mergeProps(() => props.element_attributes, {
-      "classList": {
-        [container_class]: true
-      }
-    }), false, true);
-    $9HbP8$insert(_el$, () => props.children);
-    $9HbP8$runHydrationEvents();
-    return _el$;
-  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
-  return $9HbP8$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
-    message_: "Failed calculating css grid layout",
-    severity_: "error",
-    get children() {
-      return $6dee9211e57ac31a$export$e2f22da34aaf310a(props, container_element_, false, container_class);
-    }
-  });
-}
-function $6dee9211e57ac31a$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 = $9HbP8$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 = $9HbP8$createMemo(() => $6dee9211e57ac31a$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 = $9HbP8$createMemo(() => {
-    return `${container_selector}{display:grid;}`;
-  });
-  const get_styling = $9HbP8$createMemo(() => base_styling() + col_styling());
-  const style_element = (() => {
-    var _el$2 = $9HbP8$getNextElement($6dee9211e57ac31a$var$_tmpl$2);
-    $9HbP8$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 $6dee9211e57ac31a$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_ ? $6dee9211e57ac31a$var$can_use_gap_for_unit(override_vertical_spacing_) : $6dee9211e57ac31a$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(${$6dee9211e57ac31a$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(${$6dee9211e57ac31a$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) * ${$6dee9211e57ac31a$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 = $9HbP8$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 `${$9HbP8$layout_media_query_header(min, max)}{${media_query_body}}${additional_styling}`;
-  }).join("");
-}
-function $6dee9211e57ac31a$var$can_use_gap_for_unit(spacing) {
-  const trimmed_spacing = spacing.trim();
-  return !trimmed_spacing.includes("%");
-}
-function $6dee9211e57ac31a$var$strip_percent_unit(css_value) {
-  return css_value.replaceAll("%", "");
-}
 function $15aa76e6da02e5c2$export$cb5808ba002cdeed({
   layout_options_: layout_options_,
   sort_or_filter_open_: sort_or_filter_open_
@@ -11034,213 +11235,6 @@ function $15aa76e6da02e5c2$export$cb5808ba002cdeed({
     }) : when_filters_closed_cols;
   });
 }
-function $77348875ac090fcd$export$a79e666719b3647c(cols_at_size_) {
-  const size_active = $9HbP8$createMemo(() => cols_at_size_().map(([n_cols, min_width, max_width]) => {
-    const media_query = $9HbP8$layout_media_query_header(min_width, max_width).replaceAll("@media", "");
-    const matches = $dc9262ef6f786812$export$d9f36cf74e24d595(media_query);
-    return [matches, n_cols];
-  }));
-  const n_cols_currently_showing = $9HbP8$createMemo(() => {
-    try {
-      const [, n_cols_currently_showing] = size_active().find(([media_query]) => media_query());
-      return n_cols_currently_showing;
-    } catch (e) {
-      $9HbP8$dwarn("No active size found in columnsAtSize - can't render content blocks or looks");
-      return null;
-    }
-  });
-  return n_cols_currently_showing;
-}
-var $e7a7eb102ddc0c79$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=content-block-wrapper>`);
-function $e7a7eb102ddc0c79$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] = $9HbP8$createStore([]);
-  const n_cols_currently_showing_ = $77348875ac090fcd$export$a79e666719b3647c(cols_at_size_);
-  $9HbP8$createEffect(() => {
-    const incoming_value = incoming_content_blocks();
-    if (!incoming_value) {
-      set_content_blocks([]);
-      return;
-    }
-    set_content_blocks($9HbP8$reconcile(incoming_value, {
-      key: "content"
-    })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
-  });
-
-  const get_wrapped_blocks_ = $e7a7eb102ddc0c79$var$wrap_blocks_in_div(content_blocks, n_cols_currently_showing_);
-  $9HbP8$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 $e7a7eb102ddc0c79$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 $e7a7eb102ddc0c79$var$remap_blocks_to_index({
-  get_wrapped_blocks_: get_wrapped_blocks_,
-  n_cols_currently_showing_: n_cols_currently_showing_
-}) {
-  return $9HbP8$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 $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_span_columns) {
-  const get_wrapped_blocks = $9HbP8$mapArray(() => rendered_content_blocks, block => {
-    if (!block) return;
-    const final_span_columns = $9HbP8$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 = $9HbP8$createMemo(() => final_span_columns() === max_span_columns() ? 1 : block.span_rows);
-    const [rendering_delayed, set_rendering_delayed_] = $9HbP8$createSignal(true);
-    const content = $9HbP8$createComponent((0, $9HbP8$Show), {
-      get when() {
-        return !rendering_delayed();
-      },
-      get children() {
-        var _el$ = $9HbP8$getNextElement($e7a7eb102ddc0c79$var$_tmpl$);
-        $9HbP8$insert(_el$, $9HbP8$createComponent($e7a7eb102ddc0c79$var$RenderContent, {
-          get content() {
-            return block.content;
-          }
-        }));
-        $9HbP8$effect(_p$ => {
-          var _v$ = {
-              [(0, $6dee9211e57ac31a$export$c500183c31c2b22e)]: final_span_columns()
-            },
-            _v$2 = `span ${final_span_columns()}`,
-            _v$3 = `span ${final_span_rows()}`;
-          _p$.e = $9HbP8$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 $9HbP8$mergeProps1(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 $e7a7eb102ddc0c79$var$RenderContent(props) {
-  const [resource] = $9HbP8$createResource(() => props.content,
-  // Could be reactive
-  fn => fn());
-  $9HbP8$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 $9HbP8$createComponent((0, $9HbP8$Suspense), {
-    get fallback() {
-      return $9HbP8$createComponent((0, $7f60f09116a3fe61$export$3f37af283f8fb843), {
-        width: "100%",
-        height: "max(100%, 400px)"
-      });
-    },
-    children: resource
-  });
-}
 var $2d25e42846eac370$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=PLP-results><!$><!/><!$><!/>`);
 function $2d25e42846eac370$export$3925f87b1545cfc6({
   plp_results_: plp_results_,
@@ -11444,7 +11438,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                         } = slider;
                         const Layout = props => $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, insert_here, true);
                         // Do like this, so we don't have to call mergeProps ourselves
-                        $9HbP8$createComponent(Layout, $9HbP8$mergeProps(layout_options_, {
+                        $9HbP8$createComponent(Layout, $9HbP8$mergeProps1(layout_options_, {
                           rows: "all",
                           get cols_at_size() {
                             return modified_cols_at_size();
@@ -11949,7 +11943,7 @@ function $757dac7f7c6c5241$export$9bf11afa910f536e({
           get children() {
             return (() => {
               var _el$34 = $9HbP8$getNextElement($757dac7f7c6c5241$var$_tmpl$5);
-              $9HbP8$insert(_el$34, $9HbP8$createComponent((0, $fab07f52c9861732$export$3f1a388cc0d8fed7), $9HbP8$mergeProps(args_for_filtering_, {
+              $9HbP8$insert(_el$34, $9HbP8$createComponent((0, $fab07f52c9861732$export$3f1a388cc0d8fed7), $9HbP8$mergeProps1(args_for_filtering_, {
                 are_in_modal_: true
               })));
               return _el$34;
@@ -12715,7 +12709,7 @@ function $b2bf2cdcff8142d8$export$f631859cab12b342({
       [_el$8, _co$] = $9HbP8$getNextMarker(_el$7.nextSibling),
       _el$9 = _el$8.nextSibling,
       [_el$10, _co$2] = $9HbP8$getNextMarker(_el$9.nextSibling);
-    $9HbP8$insert(_el$4, $9HbP8$createComponent(LinkIfPossible, $9HbP8$mergeProps(make_link_attributes, {
+    $9HbP8$insert(_el$4, $9HbP8$createComponent(LinkIfPossible, $9HbP8$mergeProps1(make_link_attributes, {
       tabIndex: "-1",
       get children() {
         return $9HbP8$createComponent((0, $190927650b4840eb$export$605674723bcc715c), {
@@ -12724,7 +12718,7 @@ function $b2bf2cdcff8142d8$export$f631859cab12b342({
         });
       }
     })));
-    $9HbP8$insert(_el$5, $9HbP8$createComponent(LinkIfPossible, $9HbP8$mergeProps({
+    $9HbP8$insert(_el$5, $9HbP8$createComponent(LinkIfPossible, $9HbP8$mergeProps1({
       "class": "content-title line-clamp"
     }, make_link_attributes, {
       get title() {
@@ -12877,7 +12871,7 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
       },
       number_of_results_: num_results
     }), _el$3, _co$);
-    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps({
+    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $9HbP8$mergeProps1({
       layout: "grid",
       element_attributes: {
         class: "cards"
@@ -13271,7 +13265,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
   });
   const [sort_and_filter_element_, set_sort_and_filter_element_] = $9HbP8$createSignal();
   const no_results_text_ = $9HbP8$createMemo(() => (search_results_()?.content_search_links?.length ? i18n_.no_products_ : i18n_.no_results_text_)());
-  const results_for = $9HbP8$createComponent((0, $f8c929beb82c512b$export$9dd50d35b9d94fdf), $9HbP8$mergeProps({
+  const results_for = $9HbP8$createComponent((0, $f8c929beb82c512b$export$9dd50d35b9d94fdf), $9HbP8$mergeProps1({
     get type() {
       return (0, $f8c929beb82c512b$export$2452208c79fe93ea).products;
     },
@@ -15190,7 +15184,7 @@ function $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta) {
   return $9HbP8$createMemo(() => {
     const api_value = plp_meta()?.breadcrumbs;
     if (!api_value) return api_value;
-    return [...api_value, $9HbP8$mergeProps1(plp_meta(), {
+    return [...api_value, $9HbP8$mergeProps(plp_meta(), {
       get page_url() {
         return href_accessor();
       }
@@ -15296,4 +15290,4 @@ function $442f32a4d80abbde$export$e2bf8ce7779e827e(props) {
   }, "Entire CategoryPage failed");
 }
 $9HbP8$add_to_version_info("ui", (0, $ec291e0010116877$export$83d89fbfd8236492));
-export { $4eb0a704f8f30273$export$d4d96868197be50e as useMobileHover, $5e3d278ef4c80cd7$export$54299a3c81f5425 as useVisibilityState, $f32e14878e75af51$export$eaa625fb39439e37 as useSlidableInformation, $f091294da861020c$export$80bb7300ce6a8be3 as useProductCardIsVisible, $f091294da861020c$export$f223d69ed12f5fb7 as CurrentlyIntersectingContext, $24e27fab9c821b86$export$5bad61ecde080b1f as useExpandingContainerReactive, $07ef910e8ef6b783$export$2c9f9bf2092486aa as LooksSliderOrGrid, $e9d1d09be9e6471e$export$44809a8a3e867e30 as LookCard, $4fd2ba03703a7d92$export$7e1297a3a19f10d8 as PseudoRouter, $de6ccd37192b5fc2$export$83bb9af5671e1dbe as promiseSafeStructuredClone, $90980bd87c9960f9$export$5162a71f252e6122 as preserve_items_in_history_dot_state, $90980bd87c9960f9$export$3064e1e8c6513da3 as prefixes_to_preserve_in_history_dot_state, $a281666e5c15c2ec$export$29d28dadc2d6b631 as allowNativeNavigation, $66db7a014e20802e$export$1ea76ea778b880dd as modalVersionSymbol, $136f1d4d6c7ba6ac$export$e417c49320921907 as createDeparallelizedNoDropResource, $d8dbf52fea1773e2$export$f50b88e2a00918b5 as throw_globally, $42912431795f188e$export$9265e66f26f8e383 as ClassicSearchModal, $500a16dd18ee5a71$export$b0c55aa2e87c4be7 as SearchModalV2, $70bb27cc6be01fc7$export$9d4a4b669b1929ab as ModernResponsiveContainedImage, $024fbc0a2d796fad$export$3e41faf802a29e71 as Tab, $024fbc0a2d796fad$export$b2539bed5023c21c as Tabs, $8560c919ff763930$export$d4973c31938cbfd1 as ShopTheLookButton, $ca6f574bd8772184$export$e183a13865960371 as history_dot_state_to_state, $4147651646da990a$export$916e6850778505f6 as strip_encoded_filter_and_sort, $4147651646da990a$export$58aa3f171519b6d7 as encode_filters, $4147651646da990a$export$f934fa24c3a86811 as decode_filters, $4147651646da990a$export$62acb285a7579555 as encode_sorting, $4147651646da990a$export$766e9676e74997d3 as decode_sorting, $660070e2a394b3c3$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $011607bdf658f807$export$e68cff63f76bd15b as ListingProvider, $011607bdf658f807$export$8d0c4fdbb05a2f2e as useListing, $b6440e72ed83671a$export$11354f017ddc9790 as ProductCardIndexProvider, $b6440e72ed83671a$export$e3faf4d95300054f as useProductCardIndex, $660070e2a394b3c3$export$e4b984597b71e989 as ShopifyContainedImage, $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $2449872a62a75a20$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $b7436a6d1fd64e3b$export$240ecf5363d76c0f as ExtraSentryContextProvider, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $c8d5ff4524619fcd$export$445d8d3f5f706a40 as SolidLayoutWithProvidedElement, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $a0f0e923bad68a9b$export$58e808b1db15d3bc as fetchDepictRecommendations, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $4b2134398dfa83fa$export$c1a6b039e689a58e as get_listings, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b6d5529b253681aa$export$3f238c96c45e6cc6 as ALIGN_TOP, $b6d5529b253681aa$export$902f8b4a7dae5d78 as ALIGN_WIDTH_ON_MODAL, $b6d5529b253681aa$export$7895aadd1956b1c7 as ALIGN_LEFT, $b6d5529b253681aa$export$6060bc6bee850eb6 as SET_CENTERED_LEFT, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version, $58b3487626e85ece$export$316f6f283ae64765 as SearchField, $feffae76d8dc0135$export$5b7c3ce0ebe51f86 as BreadCrumbs, $feffae76d8dc0135$export$de035477d6fef996 as QuickLinks, $442f32a4d80abbde$export$e2bf8ce7779e827e as CategoryPage };
+export { $e7a7eb102ddc0c79$export$92aa5d691d588f3f as remap_blocks_to_index, $4eb0a704f8f30273$export$d4d96868197be50e as useMobileHover, $5e3d278ef4c80cd7$export$54299a3c81f5425 as useVisibilityState, $f32e14878e75af51$export$eaa625fb39439e37 as useSlidableInformation, $f091294da861020c$export$80bb7300ce6a8be3 as useProductCardIsVisible, $f091294da861020c$export$f223d69ed12f5fb7 as CurrentlyIntersectingContext, $24e27fab9c821b86$export$5bad61ecde080b1f as useExpandingContainerReactive, $07ef910e8ef6b783$export$2c9f9bf2092486aa as LooksSliderOrGrid, $e9d1d09be9e6471e$export$44809a8a3e867e30 as LookCard, $4fd2ba03703a7d92$export$7e1297a3a19f10d8 as PseudoRouter, $de6ccd37192b5fc2$export$83bb9af5671e1dbe as promiseSafeStructuredClone, $90980bd87c9960f9$export$5162a71f252e6122 as preserve_items_in_history_dot_state, $90980bd87c9960f9$export$3064e1e8c6513da3 as prefixes_to_preserve_in_history_dot_state, $a281666e5c15c2ec$export$29d28dadc2d6b631 as allowNativeNavigation, $66db7a014e20802e$export$1ea76ea778b880dd as modalVersionSymbol, $136f1d4d6c7ba6ac$export$e417c49320921907 as createDeparallelizedNoDropResource, $d8dbf52fea1773e2$export$f50b88e2a00918b5 as throw_globally, $42912431795f188e$export$9265e66f26f8e383 as ClassicSearchModal, $500a16dd18ee5a71$export$b0c55aa2e87c4be7 as SearchModalV2, $70bb27cc6be01fc7$export$9d4a4b669b1929ab as ModernResponsiveContainedImage, $024fbc0a2d796fad$export$3e41faf802a29e71 as Tab, $024fbc0a2d796fad$export$b2539bed5023c21c as Tabs, $8560c919ff763930$export$d4973c31938cbfd1 as ShopTheLookButton, $ca6f574bd8772184$export$e183a13865960371 as history_dot_state_to_state, $4147651646da990a$export$916e6850778505f6 as strip_encoded_filter_and_sort, $4147651646da990a$export$58aa3f171519b6d7 as encode_filters, $4147651646da990a$export$f934fa24c3a86811 as decode_filters, $4147651646da990a$export$62acb285a7579555 as encode_sorting, $4147651646da990a$export$766e9676e74997d3 as decode_sorting, $660070e2a394b3c3$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $011607bdf658f807$export$e68cff63f76bd15b as ListingProvider, $011607bdf658f807$export$8d0c4fdbb05a2f2e as useListing, $b6440e72ed83671a$export$11354f017ddc9790 as ProductCardIndexProvider, $b6440e72ed83671a$export$e3faf4d95300054f as useProductCardIndex, $660070e2a394b3c3$export$e4b984597b71e989 as ShopifyContainedImage, $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $2449872a62a75a20$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $b7436a6d1fd64e3b$export$240ecf5363d76c0f as ExtraSentryContextProvider, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $c8d5ff4524619fcd$export$445d8d3f5f706a40 as SolidLayoutWithProvidedElement, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $a0f0e923bad68a9b$export$58e808b1db15d3bc as fetchDepictRecommendations, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $4b2134398dfa83fa$export$c1a6b039e689a58e as get_listings, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b6d5529b253681aa$export$3f238c96c45e6cc6 as ALIGN_TOP, $b6d5529b253681aa$export$902f8b4a7dae5d78 as ALIGN_WIDTH_ON_MODAL, $b6d5529b253681aa$export$7895aadd1956b1c7 as ALIGN_LEFT, $b6d5529b253681aa$export$6060bc6bee850eb6 as SET_CENTERED_LEFT, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version, $58b3487626e85ece$export$316f6f283ae64765 as SearchField, $feffae76d8dc0135$export$5b7c3ce0ebe51f86 as BreadCrumbs, $feffae76d8dc0135$export$de035477d6fef996 as QuickLinks, $442f32a4d80abbde$export$e2bf8ce7779e827e as CategoryPage };