@depict-ai/ui 1.4.21 → 1.4.23

package/server/latest/index.cjs

@@ -10,6 +10,8 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "RecommendationSlider", () => $72f96c4782db0b1b$export$9574e176201e5e8d);
+$parcel$export(module.exports, "RecommendationGrid", () => $1f8dbf7e28b3eff2$export$9756467d34d91cdb);
 $parcel$export(module.exports, "ShopifyResponsiveImg", () => $19950faaac026e09$export$6e5611bc7e57e477);
 $parcel$export(module.exports, "makeSizeAccessor", () => $19950faaac026e09$export$e6fffe67d4cdd848);
 $parcel$export(module.exports, "ImageContainer", () => $93304d59a9747aa6$export$94026ee33dbabc26);
@@ -58,7 +60,558 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.21";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.23";
+const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
+  const cols_at_size = [];
+  for (let i = 0; i < sorted_cols_at_size.length; i++) {
+    const [nb_cols, width] = sorted_cols_at_size[i];
+    const next_width = sorted_cols_at_size[i + 1]?.[1];
+    const max_width = i === 0 ? "" : `${width}px`;
+    const min_width = next_width !== undefined ? `${next_width + 1}px` : "";
+    const col_at_size = [nb_cols, min_width, max_width];
+    cols_at_size.push(col_at_size);
+  }
+  return cols_at_size;
+};
+const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
+  // Check that every element is an array
+  const are_arrays = cols_at_size.every(element => Array.isArray(element));
+  if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
+  // Check width duplicates
+  const widths = cols_at_size.map(([_, width]) => width);
+  const widths_set = new Set(widths);
+  if (widths_set.size < widths.length) throw new Error("There are duplicate widths in cols_at_size");
+  if (cols_at_size.length === 1) {
+    const [nb_cols, width] = cols_at_size[0];
+    const max_width = width !== undefined ? `${width}px` : "";
+    return [[nb_cols, "", max_width]];
+  }
+  // Sort widths in ascending order
+  const sorted_cols_at_size = [...cols_at_size].sort((a, b) => {
+    const [_b, width_A] = a;
+    const [_a, width_b] = b;
+    if (width_A === undefined) return -1;
+    if (width_b === undefined) return 1;
+    return width_b - width_A;
+  });
+  return $4e04be41243c3d80$var$transform_elements(sorted_cols_at_size);
+};
+
+/**
+ * Content results ContentCard look stupid on mobile if there are two columns of them, so we limit the number of columns to 1 if the screen is too small
+ */
+function $ab7c6c7911bae2f5$export$ff7109b9b2b206ba(sdk_cols_at_size, min_width_for_more_than_one_column = 500) {
+  if (!sdk_cols_at_size.length) return sdk_cols_at_size;
+  const sorted_sizes = sdk_cols_at_size.map(([cols, max_width]) => [cols, max_width ?? Infinity]).sort(([, a], [, b]) => a - b);
+  const [[, smallest_max_width]] = sorted_sizes;
+  if (smallest_max_width > min_width_for_more_than_one_column)
+    // If everything above min_width_for_more_than_one_column, we can just add a 1 column at the beginning
+    return [[1, min_width_for_more_than_one_column], ...sdk_cols_at_size];
+  const to_delete = [];
+  for (let i = 0; i < sorted_sizes.length; i++) {
+    const [, max_width] = sorted_sizes[i];
+    if (max_width > min_width_for_more_than_one_column) continue;
+    to_delete.push(i);
+  }
+  while (to_delete.length) sorted_sizes.splice(to_delete.pop(), 1);
+  sorted_sizes.unshift([1, min_width_for_more_than_one_column]);
+  return sorted_sizes.map(([cols, max_width]) => max_width == Infinity ? [cols] : [cols, max_width]);
+}
+function $fc23d7668ae0011d$export$a2cc176055f8f08() {
+  const text = "Please try setting `colsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  return (0, $5vyXB$solidjsweb.isServer) ? `<!-- ${text} -->` : document.createComment(text);
+}
+function $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(elements) {
+  // FYI this probably doesn't work on hugely deep nestings or large amount of elements
+  return $5vyXB$solidjs.createMemo(() => $5f7d55c710fd1bc2$var$unwrapping_helper(elements));
+}
+function $5f7d55c710fd1bc2$var$unwrapping_helper(elements) {
+  const result = [];
+  if (Array.isArray(elements)) for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(element));
+  } else if (typeof elements == "function") result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
+  return result;
+}
+let $0caf87eaa19079da$var$cached_placeholder_element;
+let $0caf87eaa19079da$var$rendering_cached_placeholder_element;
+function $0caf87eaa19079da$export$f33414a4df0afd3f({
+  product_card_template_: product_card_template_,
+  num_placeholders_: num_placeholders_
+}) {
+  const [get_elements, set_elements] = $5vyXB$solidjs.createSignal([]);
+  let existing_num = 0;
+  if (0, $5vyXB$solidjsweb.isServer)
+    // want to render simple placeholders on server, effects don't run there
+    return $5vyXB$solidjs.createMemo(() => Array.from({
+      length: num_placeholders_()
+    }).map(() => {
+      const template_result = product_card_template_(null, undefined);
+      // @ts-ignore
+      if (typeof template_result?.then !== "function") return template_result;
+    }));
+  $5vyXB$solidjs.createRenderEffect(() => {
+    const to_add = num_placeholders_() - existing_num;
+    if (to_add <= 0) return;
+    // Below comment is from when we used recommendation renderer and manual DOM manipulation for this, but I'm still scared to remove placeholders and mess up scroll restoration, so I'm keeping the way it worked. Otherwise, <Index> could be used which would be far more elegant.
+    // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
+    // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
+    set_elements(prev => [...prev, ...Array.from({
+      length: to_add
+    }).map(() => $0caf87eaa19079da$var$Placeholder({
+      product_card_template_: product_card_template_
+    }))]);
+    existing_num += to_add;
+  });
+  return get_elements; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+}
+/**
+ * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
+ */
+function $0caf87eaa19079da$var$Placeholder({
+  product_card_template_: product_card_template_
+}) {
+  const get_cloned_placeholders = (element_to_clone = $0caf87eaa19079da$var$cached_placeholder_element) => Array.isArray(element_to_clone) ? element_to_clone.map(el => el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
+  if ($0caf87eaa19079da$var$cached_placeholder_element) return get_cloned_placeholders();
+  let dispose_original_copy;
+  const get_unwrapped_element = $5vyXB$solidjs.createRoot(dispose => {
+    dispose_original_copy = dispose;
+    // if product_card_template_ is async and rejects the resource will take care of throwing upwards here in the solid-js error handling system
+    const [resource] = $5vyXB$solidjs.createResource(() => {
+      if ($0caf87eaa19079da$var$rendering_cached_placeholder_element) return $0caf87eaa19079da$var$rendering_cached_placeholder_element;
+      const return_value = product_card_template_(null, undefined);
+      if (typeof return_value === "object" && typeof return_value?.then === "function")
+        // Is Promise or promise-like object
+        $0caf87eaa19079da$var$rendering_cached_placeholder_element = return_value;
+      return return_value;
+    });
+    return $5vyXB$solidjs.createMemo(() => {
+      if (resource.loading) return () => [];
+      return $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(resource);
+    });
+  });
+  $5vyXB$solidjs.onCleanup(() => {
+    if ($0caf87eaa19079da$var$rendering_cached_placeholder_element) {
+      // If we're still rendering in our separate root, let the rendering finish or other <Placeholder> components waiting for it might get an incomplete result
+      const unset_current_rendering = () => {
+        dispose_original_copy();
+        $0caf87eaa19079da$var$rendering_cached_placeholder_element = undefined;
+      };
+      $0caf87eaa19079da$var$rendering_cached_placeholder_element?.then(unset_current_rendering, unset_current_rendering);
+    } else
+      // Otherwise, just make sure we've disposed our root
+      dispose_original_copy();
+  });
+  return $5vyXB$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$cached_placeholder_element ||= 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$rendering_cached_placeholder_element = 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
+  });
+}
+
+/**
+ * Gets product_id (the thing we key the rendering on) from a display
+ */
+function $a5871dacf261adf8$export$548d053aba053d79(display) {
+  if ("variant_index" in display) {
+    const actual_display = display.variant_displays[display.variant_index];
+    return actual_display.product_id;
+  }
+  return display.product_id;
+}
+function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
+  const displays_by_key_ = $5vyXB$solidjs.createMemo(() => {
+    const displays = get_displays_();
+    // We key by product_id because that's what can be used to uniquely identify products
+    // This way <For> can optimize the rendering
+    const map = new Map();
+    for (let i = 0; i < displays.length; i++) {
+      const display = displays[i];
+      const product_id = $a5871dacf261adf8$export$548d053aba053d79(display);
+      map.set(product_id, display);
+    }
+    return map;
+  });
+  return displays_by_key_;
+}
+function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+  displays_by_key_: displays_by_key_,
+  merchant_: merchant_,
+  market_: market_,
+  product_card_template_: product_card_template_,
+  do_per_elements_: do_per_elements_
+}) {
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.For), {
+    get each() {
+      return [...displays_by_key_().keys()];
+    },
+    children: (product_id, index) => {
+      const owner = $5vyXB$solidjs.getOwner();
+      const display_accessor = $5vyXB$solidjs.createMemo(() => displays_by_key_().get(product_id));
+      const [product_card_resource] = $5vyXB$solidjs.createResource(display_accessor,
+      // re-render when the reference to the display object changes
+      // this should only be the case when the merchant or market changes and the new request has completed
+      display => {
+        // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+        return product_card_template_(display, {
+          set_on_index_change: fn => $5vyXB$solidjs.runWithOwner(owner, () => $5vyXB$solidjs.createEffect(() => fn(index()))),
+          merchant: $5vyXB$solidjs.untrack(merchant_),
+          // this means that the merchant and market provided to the template is wrong while we do another fetch, but I don't see how anyone would need to know the correct market there
+          market: $5vyXB$solidjs.untrack(market_) // recommendation_grid can provide a sneaky undefined here just FYI
+        });
+      });
+
+      const node_accessor = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(product_card_resource);
+      $5vyXB$solidjs.createEffect(() => {
+        const product_card_nodes = node_accessor();
+        const display = display_accessor();
+        const elements = [];
+        for (let i = 0; i < product_card_nodes.length; i++) {
+          const element = product_card_nodes[i];
+          if (!(element instanceof Element)) continue;
+          elements.push(element);
+          // Add tracking ids
+          if (!(element instanceof HTMLElement)) continue; // Apparently only HTMLElements have dataset
+          const {
+            dataset: dataset
+          } = element;
+          const {
+            search_result_id: search_result_id,
+            product_listing_result_id: product_listing_result_id,
+            recommendation_id: recommendation_id
+          } = display;
+          if (search_result_id) dataset.searchResultId = search_result_id;else if (product_listing_result_id) dataset.productListingResultId = product_listing_result_id;else if (recommendation_id) dataset.recommendationId = recommendation_id;
+        }
+        do_per_elements_?.(elements, index);
+      });
+      return product_card_resource; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+    }
+  });
+}
+
+// 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
+    });
+  }
+}
+const $edafe91daf3091d7$var$_tmpl$ = ["<div", ' class="', '">', "</div>"];
+function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
+  return $5vyXB$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 $5vyXB$depictaiutilishared.report([err, message_], severity_);
+      props.on_error_?.(retry);
+      return $5vyXB$solidjsweb.ssr($edafe91daf3091d7$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrClassList(Object.fromEntries(props.class_list_?.map(c => [c, true]) || [])), $5vyXB$solidjsweb.escape(message));
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+const $f48d0fbb00835aaa$var$_tmpl$ = ["<style", ' type="text/css">', "</style>"],
+  $f48d0fbb00835aaa$var$_tmpl$2 = ["<div", ' class="', '">', "</div>"];
+function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
+  const container_element_ = $5vyXB$solidjsweb.ssrElement("div", props.element_attributes, () => $5vyXB$solidjsweb.escape(props.children), true); // Don't want this in the error boundary below, it should only be for the actual layouting
+  return $5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+    get message_() {
+      return "Failed calculating " + props.layout + " layout";
+    },
+    severity_: "error",
+    get children() {
+      return $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element_);
+    }
+  });
+}
+function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, insert_after_container = false) {
+  // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
+  const show_all_rows = $5vyXB$solidjs.createMemo(() => props.rows === "all");
+  const rows_or_empty_object = $5vyXB$solidjs.createMemo(() => show_all_rows() ? {} : props.rows);
+  const view_more_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($5vyXB$solidjs.createMemo(() => rows_or_empty_object().button));
+  const view_less_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($5vyXB$solidjs.createMemo(() => rows_or_empty_object().view_less_button));
+  const have_a_view_more_button = $5vyXB$solidjs.createMemo(() => {
+    const button = view_more_button_elements();
+    return !(!button || Array.isArray(button) && !button.length);
+  });
+  const have_a_view_less_button = $5vyXB$solidjs.createMemo(() => {
+    const button = view_less_button_elements();
+    return !(!button || Array.isArray(button) && !button.length);
+  });
+  const [get_styling, set_styling] = $5vyXB$solidjs.createSignal();
+  const container_class = $5vyXB$depictaiutilishared.make_random_classname();
+  const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
+  const [get_children_count, set_children_count] = $5vyXB$solidjs.createSignal(0);
+  const update_children_count = () => set_children_count(container_element.children.length);
+  const col_styling = $5vyXB$solidjs.createMemo(() => $5vyXB$depictaiutilishared.n_col_styling_with_dist(selector_beginning, props.grid_spacing, props.cols_at_size, props.layout, props.override_vertical_spacing));
+  const default_currently_visible_signal = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(() => rows_or_empty_object().start_rows ?? 1)); // Keep this signal here, so it doesn't change when rows_or_empty_object and I think it's to be expected that the "internal default signal" stays the same
+  const rows_visible_signal = $5vyXB$solidjs.createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
+  const get_rows_visible = $5vyXB$solidjs.createMemo(() => rows_visible_signal()[0]());
+  const set_rows_visible = $5vyXB$solidjs.createMemo(() => rows_visible_signal()[1]);
+  const view_more_button_class = $5vyXB$depictaiutilishared.make_random_classname();
+  const view_less_button_class = $5vyXB$depictaiutilishared.make_random_classname();
+  const style_element = $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), get_styling);
+  const view_more_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_more_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `load-more-container ${$5vyXB$solidjsweb.escape(view_more_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().button)));
+  // We need to have duplicate buttons because which ones is shown depends on the number of rows visible and therefore on the viewport size and therefore on the css media queries
+  const view_less_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_less_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `load-less-container ${$5vyXB$solidjsweb.escape(view_less_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().view_less_button)));
+  container_element.classList.add(container_class);
+  $5vyXB$solidjs.createComputed(() => {
+    // Make sure we don't have more rows visible than max_rows (this could happen by max_rows being decreased)
+    const rows_visible = get_rows_visible();
+    const max_rows = rows_or_empty_object().max_rows;
+    if (!isNaN(max_rows) && max_rows >= 0 && rows_visible > max_rows) set_rows_visible()(max_rows);
+  });
+  $5vyXB$solidjs.createRenderEffect(() => {
+    // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
+    if (show_all_rows()) {
+      // no view more functionality requested
+      set_styling(() => col_styling);
+      return;
+    }
+    update_children_count();
+    const mutation_observer = new MutationObserver($5vyXB$depictaiutilishared.catchify(update_children_count));
+    mutation_observer.observe(container_element, {
+      childList: true
+    });
+    $5vyXB$solidjs.onCleanup(() => mutation_observer.disconnect());
+    set_styling(
+    // this is needed because solid will think that the memo-accessor is a setter function otherwise
+    () => $5vyXB$solidjs.createMemo(() => {
+      const {
+        rows_per_click: rows_per_click,
+        max_rows = -1,
+        start_rows: start_rows
+      } = rows_or_empty_object();
+      const rows_visible = get_rows_visible();
+      const children_count = get_children_count();
+      return col_styling() + props.cols_at_size.map(options => {
+        const [recs_per_row, min, max] = options;
+        let should_hide_view_more_button;
+        let visible_recs;
+        if (props.disable_partial_rows) {
+          visible_recs = $5vyXB$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
+          const visible_recs_next_show_more = $5vyXB$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible + (rows_per_click || 0),
+          // Should this really be zero when we default rows_per_click to 1?
+          children_count, options);
+          should_hide_view_more_button = visible_recs === visible_recs_next_show_more;
+        } else {
+          visible_recs = $5vyXB$depictaiutilishared.layout_get_total_rec_amount_for_row(rows_visible, options);
+          should_hide_view_more_button = visible_recs >= children_count;
+        }
+        const should_hide_button_final = should_hide_view_more_button || max_rows !== -1 && rows_visible >= max_rows;
+        // I don't really understand the logic for when the view more button gets hidden so IDK if below is correct, but it works how it should for now
+        const should_hide_view_less_button = !should_hide_view_more_button || start_rows == undefined || rows_visible <= start_rows || children_count <= recs_per_row * start_rows;
+        return `${$5vyXB$depictaiutilishared.layout_media_query_header(min, max)}{${selector_beginning}:nth-child(n+${visible_recs + 1}){display:none}${props.layout == "slider" ? `${selector_beginning}:nth-child(n+${visible_recs}){margin-right:0}` : ""}${should_hide_button_final ? `.depict .${view_more_button_class}{display:none!important}` : ``}${should_hide_view_less_button ? `.depict .${view_less_button_class}{display:none!important}` : ``}}`;
+      }).join("");
+    }));
+  });
+  if (insert_after_container) container_element.after(style_element);
+  return [container_element, view_more_button_container(), view_less_button_container(), style_element];
+}
+const $0f313083912e447a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
+function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
+  return $5vyXB$solidjsweb.ssr($0f313083912e447a$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("width", $5vyXB$solidjsweb.escape(props.width_, true) ?? 14, false) + $5vyXB$solidjsweb.ssrAttribute("height", $5vyXB$solidjsweb.escape(props.height_, true) ?? 26, false));
+}
+const $a0e53f99354809d9$var$_tmpl$ = ["<div", ">", "</div>"];
+function $a0e53f99354809d9$export$6649caad96ef8870({
+  children: children,
+  slider_ref_: slider_ref_,
+  faded_opacity_ = 0.7,
+  mutation_plugins_ = []
+}) {
+  const slider = new (0, $5vyXB$depictaiutilishared.Amazing_Slider)({
+    button_contents: {
+      left: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {})))],
+      right: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {})))]
+    },
+    constructor_plugins: [$5vyXB$depictaiutilishared.slider_snap_css().constructor_plugin],
+    mutation_plugins: [$5vyXB$depictaiutilishared.slider_fading_factory({
+      threshold_: 0.96,
+      faded_opacity_: faded_opacity_
+    }).mutation_plugin_, ...mutation_plugins_]
+  });
+  $5vyXB$solidjsweb.insert(slider.insert_here, children);
+  $5vyXB$solidjs.onCleanup(() => slider.observer.disconnect());
+  slider_ref_?.(slider);
+  return slider.container;
+}
+function $363ce4d1d71041aa$export$d41d19e89346fa2({
+  recommendations_resource_: recommendations_resource_,
+  product_card_template_: product_card_template_,
+  layout_options_: layout_options_,
+  merchant_: merchant_,
+  market_: market_
+}) {
+  const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const num_placeholders_ = () => 20;
+  const slider = $5vyXB$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+    slider_ref_: slider => {
+      const Layout = props => $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, slider.insert_here, true);
+      // Do like this, so we don't have to call mergeProps ourselves
+      $5vyXB$solidjsweb.createComponent(Layout, $5vyXB$solidjsweb.mergeProps({
+        rows: "all",
+        layout: "slider"
+      }, layout_options_));
+      slider.insert_here.before($fc23d7668ae0011d$export$a2cc176055f8f08());
+    },
+    get children() {
+      return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
+        get fallback() {
+          return $0caf87eaa19079da$export$f33414a4df0afd3f({
+            num_placeholders_: num_placeholders_,
+            product_card_template_: product_card_template_
+          });
+        },
+        get children() {
+          return (() => {
+            // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
+            const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($5vyXB$solidjs.createMemo(() => recommendations_resource_() || []));
+            return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+              displays_by_key_: displays_by_key_,
+              merchant_: merchant_,
+              market_: market_,
+              product_card_template_: product_card_template_
+            });
+          })();
+        }
+      });
+    }
+  });
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return is_showing_something();
+    },
+    children: slider
+  });
+}
+const $72f96c4782db0b1b$var$_tmpl$ = ["<div", ' class="depict plp">', "</div>"];
+function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
+  const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
+    const {
+      grid_spacing: grid_spacing
+    } = props; // can be reactive
+    return typeof grid_spacing === "string" ? {
+      grid_spacing: grid_spacing
+    } : {
+      override_vertical_spacing: grid_spacing.vertical,
+      grid_spacing: grid_spacing.horizontal
+    };
+  });
+  const [recommendations_resource_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
+  return $5vyXB$solidjsweb.ssr($72f96c4782db0b1b$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($363ce4d1d71041aa$export$d41d19e89346fa2({
+    product_card_template_: (...args) => props.product_card_template(...args),
+    recommendations_resource_: recommendations_resource_,
+    market_: () => props.market,
+    merchant_: () => props.merchant,
+    layout_options_: $5vyXB$solidjs.createMemo(() => ({
+      cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
+      ...grid_spacing_override()
+    }))
+  })));
+}
+const $b8e79813f4f7ebe4$var$_tmpl$ = ["<div", ' class="recommendation-grid"><!--#-->', "<!--/--><!--#-->", "<!--/--></div>"];
+function $b8e79813f4f7ebe4$export$7da560f849543dff({
+  recommendations_resource_: recommendations_resource_,
+  product_card_template_: product_card_template_,
+  layout_options_: layout_options_,
+  merchant_: merchant_,
+  market_: market_,
+  rows_object_: rows_object_
+}) {
+  const is_showing_something = $5vyXB$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
+  const num_placeholders_ = () => 20;
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return is_showing_something();
+    },
+    get children() {
+      return $5vyXB$solidjsweb.ssr($b8e79813f4f7ebe4$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($fc23d7668ae0011d$export$a2cc176055f8f08()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $5vyXB$solidjsweb.mergeProps({
+        get rows() {
+          return rows_object_();
+        },
+        layout: "grid",
+        element_attributes: {
+          class: "cards"
+        }
+      }, layout_options_, {
+        get children() {
+          return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Suspense), {
+            get fallback() {
+              return $0caf87eaa19079da$export$f33414a4df0afd3f({
+                num_placeholders_: num_placeholders_,
+                product_card_template_: product_card_template_
+              });
+            },
+            get children() {
+              return (() => {
+                // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
+                const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($5vyXB$solidjs.createMemo(() => recommendations_resource_() || []));
+                return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+                  displays_by_key_: displays_by_key_,
+                  merchant_: merchant_,
+                  market_: market_,
+                  product_card_template_: product_card_template_
+                });
+              })();
+            }
+          });
+        }
+      }))));
+    }
+  });
+}
+const $1f8dbf7e28b3eff2$var$_tmpl$ = ["<button", ' class="show-more major" type="button">', "</button>"],
+  $1f8dbf7e28b3eff2$var$_tmpl$2 = ["<div", ' class="depict plp">', "</div>"];
+function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
+  const rows_object_ = $5vyXB$solidjs.createMemo(() => {
+    const view_more_button = props.view_more_button;
+    if (!view_more_button) return "all";
+    return {
+      start_rows: view_more_button.start_rows,
+      rows_per_click: view_more_button.rows_per_click,
+      button: $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(view_more_button.text))
+    };
+  });
+  const grid_spacing_override = $5vyXB$solidjs.createMemo(() => {
+    const {
+      grid_spacing: grid_spacing
+    } = props; // can be reactive
+    return typeof grid_spacing === "string" ? {
+      grid_spacing: grid_spacing
+    } : {
+      override_vertical_spacing: grid_spacing.vertical,
+      grid_spacing: grid_spacing.horizontal
+    };
+  });
+  const [recommendations_resource_] = $5vyXB$solidjs.createResource(() => props.recommendations, recs => recs);
+  return $5vyXB$solidjsweb.ssr($1f8dbf7e28b3eff2$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($b8e79813f4f7ebe4$export$7da560f849543dff({
+    rows_object_: rows_object_,
+    product_card_template_: (...args) => props.product_card_template(...args),
+    recommendations_resource_: recommendations_resource_,
+    market_: () => props.market,
+    merchant_: () => props.merchant,
+    layout_options_: $5vyXB$solidjs.createMemo(() => ({
+      cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
+      ...grid_spacing_override()
+    }))
+  })));
+}
 function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $5vyXB$solidjs.createSignal(0);
   const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => {
@@ -103,37 +656,6 @@ const $93304d59a9747aa6$var$_tmpl$ = ["<div", ' style="', '"></div>'];
 function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
   return $5vyXB$solidjsweb.ssr($93304d59a9747aa6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`));
 }
-
-// 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
-    });
-  }
-}
-const $edafe91daf3091d7$var$_tmpl$ = ["<div", ' class="', '">', "</div>"];
-function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
-  return $5vyXB$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 $5vyXB$depictaiutilishared.report([err, message_], severity_);
-      props.on_error_?.(retry);
-      return $5vyXB$solidjsweb.ssr($edafe91daf3091d7$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrClassList(Object.fromEntries(props.class_list_?.map(c => [c, true]) || [])), $5vyXB$solidjsweb.escape(message));
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
 function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -252,33 +774,6 @@ function $d659702496cb72ea$export$a71e92cfbb498adc(props) {
     return $5vyXB$depictaiutilishared.standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
   });
 }
-const $0f313083912e447a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
-function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
-  return $5vyXB$solidjsweb.ssr($0f313083912e447a$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("width", $5vyXB$solidjsweb.escape(props.width_, true) ?? 14, false) + $5vyXB$solidjsweb.ssrAttribute("height", $5vyXB$solidjsweb.escape(props.height_, true) ?? 26, false));
-}
-const $a0e53f99354809d9$var$_tmpl$ = ["<div", ">", "</div>"];
-function $a0e53f99354809d9$export$6649caad96ef8870({
-  children: children,
-  slider_ref_: slider_ref_,
-  faded_opacity_ = 0.7,
-  mutation_plugins_ = []
-}) {
-  const slider = new (0, $5vyXB$depictaiutilishared.Amazing_Slider)({
-    button_contents: {
-      left: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {})))],
-      right: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {})))]
-    },
-    constructor_plugins: [$5vyXB$depictaiutilishared.slider_snap_css().constructor_plugin],
-    mutation_plugins: [$5vyXB$depictaiutilishared.slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_, ...mutation_plugins_]
-  });
-  $5vyXB$solidjsweb.insert(slider.insert_here, children);
-  $5vyXB$solidjs.onCleanup(() => slider.observer.disconnect());
-  slider_ref_?.(slider);
-  return slider.container;
-}
 const $c77c68e559a1506c$var$_tmpl$ = '<path d="M11.669 10.531l9.156-9.156a.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569A.8.8 0 0 0 20.24 0a.77.77 0 0 0-.569.237l-9.14 9.14-9.14-9.14A.79.79 0 0 0 .807 0a.77.77 0 0 0-.569.237A.78.78 0 0 0 0 .807a.77.77 0 0 0 .237.569l9.156 9.156-9.156 9.14c-.159.157-.237.349-.237.569s.079.412.237.569c.085.085.174.148.268.19a1.095 1.095 0 0 0 .316.048.894.894 0 0 0 .285-.048.84.84 0 0 0 .285-.19l9.139-9.14 9.14 9.14a.894.894 0 0 0 .268.19 1.049 1.049 0 0 0 .301.048.941.941 0 0 0 .301-.048.84.84 0 0 0 .285-.19.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569z"></path>';
 function $c77c68e559a1506c$export$3b621d86b1566b2(props = {}) {
   return $5vyXB$solidjsweb.ssrElement("svg", () => ({
@@ -1895,141 +2390,33 @@ function $70482f04605572e2$var$modify_only_local_filter(local_filter_object, sel
     const new_meta = {
       ...old_meta
     };
-    modified_filter_object.meta = new_meta;
-    // set counts to 0
-    if ("counts" in new_meta) {
-      const counts = new_meta.counts;
-      if (counts) new_meta.counts = counts.map(() => 0);
-    }
-    if (Array.isArray(selected_filter_data) && "values" in new_meta) {
-      // we have an array of values and want to strip the ones from the available ones that aren't selected
-      const values = new_meta.values;
-      if (Array.isArray(values)) {
-        const jsond_set_values = selected_filter_data.map(data => JSON.stringify(data));
-        const indexes_to_remove = new Set();
-        for (let i = 0; i < values.length; i++) {
-          const value = values[i];
-          if (!jsond_set_values.includes(JSON.stringify(value)))
-            // We want to remove the entry with this value from the filter object because it's not selected
-            indexes_to_remove.add(i);
-        }
-        new_meta.values = values.filter((_, index) => !indexes_to_remove.has(index));
-        if (new_meta.names) new_meta.names = new_meta.names.filter((_, index) => !indexes_to_remove.has(index));
-        if (new_meta.counts)
-          // remove counts that are too much, they're all zero anyway if they exist
-          new_meta.counts.length -= indexes_to_remove.size;
-      }
-    }
-  }
-  return modified_filter_object;
-}
-function $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(elements) {
-  // FYI this probably doesn't work on hugely deep nestings or large amount of elements
-  return $5vyXB$solidjs.createMemo(() => $5f7d55c710fd1bc2$var$unwrapping_helper(elements));
-}
-function $5f7d55c710fd1bc2$var$unwrapping_helper(elements) {
-  const result = [];
-  if (Array.isArray(elements)) for (let i = 0; i < elements.length; i++) {
-    const element = elements[i];
-    result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(element));
-  } else if (typeof elements == "function") result.push(...$5f7d55c710fd1bc2$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
-  return result;
-}
-const $f48d0fbb00835aaa$var$_tmpl$ = ["<div", ' class="', '">', "</div>"],
-  $f48d0fbb00835aaa$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
-function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
-  const container_element_ = $5vyXB$solidjsweb.ssrElement("div", props.element_attributes, () => $5vyXB$solidjsweb.escape(props.children), true); // Don't want this in the error boundary below, it should only be for the actual layouting
-  return $5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
-    get message_() {
-      return "Failed calculating " + props.layout + " layout";
-    },
-    severity_: "error",
-    get children() {
-      return $f48d0fbb00835aaa$var$ActualSolidLayout(props, container_element_);
-    }
-  });
-}
-function $f48d0fbb00835aaa$var$ActualSolidLayout(props, container_element) {
-  // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
-  const show_all_rows = $5vyXB$solidjs.createMemo(() => props.rows === "all");
-  const rows_or_empty_object = $5vyXB$solidjs.createMemo(() => show_all_rows() ? {} : props.rows);
-  const view_more_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($5vyXB$solidjs.createMemo(() => rows_or_empty_object().button));
-  const view_less_button_elements = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52($5vyXB$solidjs.createMemo(() => rows_or_empty_object().view_less_button));
-  const have_a_view_more_button = $5vyXB$solidjs.createMemo(() => {
-    const button = view_more_button_elements();
-    return !(!button || Array.isArray(button) && !button.length);
-  });
-  const have_a_view_less_button = $5vyXB$solidjs.createMemo(() => {
-    const button = view_less_button_elements();
-    return !(!button || Array.isArray(button) && !button.length);
-  });
-  const [get_styling, set_styling] = $5vyXB$solidjs.createSignal();
-  const container_class = $5vyXB$depictaiutilishared.make_random_classname();
-  const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
-  const [get_children_count, set_children_count] = $5vyXB$solidjs.createSignal(0);
-  const update_children_count = () => set_children_count(container_element.children.length);
-  const col_styling = $5vyXB$solidjs.createMemo(() => $5vyXB$depictaiutilishared.n_col_styling_with_dist(selector_beginning, props.grid_spacing, props.cols_at_size, props.layout, props.override_vertical_spacing));
-  const default_currently_visible_signal = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(() => rows_or_empty_object().start_rows ?? 1)); // Keep this signal here, so it doesn't change when rows_or_empty_object and I think it's to be expected that the "internal default signal" stays the same
-  const rows_visible_signal = $5vyXB$solidjs.createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
-  const get_rows_visible = $5vyXB$solidjs.createMemo(() => rows_visible_signal()[0]());
-  const set_rows_visible = $5vyXB$solidjs.createMemo(() => rows_visible_signal()[1]);
-  const view_more_button_class = $5vyXB$depictaiutilishared.make_random_classname();
-  const view_less_button_class = $5vyXB$depictaiutilishared.make_random_classname();
-  const view_more_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_more_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `load-more-container ${$5vyXB$solidjsweb.escape(view_more_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().button)));
-  // We need to have duplicate buttons because which ones is shown depends on the number of rows visible and therefore on the viewport size and therefore on the css media queries
-  const view_less_button_container = $5vyXB$solidjs.createMemo(() => have_a_view_less_button() && $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `load-less-container ${$5vyXB$solidjsweb.escape(view_less_button_class, true)}`, $5vyXB$solidjsweb.escape(rows_or_empty_object().view_less_button)));
-  container_element.classList.add(container_class);
-  $5vyXB$solidjs.createComputed(() => {
-    // Make sure we don't have more rows visible than max_rows (this could happen by max_rows being decreased)
-    const rows_visible = get_rows_visible();
-    const max_rows = rows_or_empty_object().max_rows;
-    if (!isNaN(max_rows) && max_rows >= 0 && rows_visible > max_rows) set_rows_visible()(max_rows);
-  });
-  $5vyXB$solidjs.createRenderEffect(() => {
-    // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
-    if (show_all_rows()) {
-      // no view more functionality requested
-      set_styling(() => col_styling);
-      return;
-    }
-    update_children_count();
-    const mutation_observer = new MutationObserver($5vyXB$depictaiutilishared.catchify(update_children_count));
-    mutation_observer.observe(container_element, {
-      childList: true
-    });
-    $5vyXB$solidjs.onCleanup(() => mutation_observer.disconnect());
-    set_styling(
-    // this is needed because solid will think that the memo-accessor is a setter function otherwise
-    () => $5vyXB$solidjs.createMemo(() => {
-      const {
-        rows_per_click: rows_per_click,
-        max_rows = -1,
-        start_rows: start_rows
-      } = rows_or_empty_object();
-      const rows_visible = get_rows_visible();
-      const children_count = get_children_count();
-      return col_styling() + props.cols_at_size.map(options => {
-        const [recs_per_row, min, max] = options;
-        let should_hide_view_more_button;
-        let visible_recs;
-        if (props.disable_partial_rows) {
-          visible_recs = $5vyXB$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
-          const visible_recs_next_show_more = $5vyXB$depictaiutilishared.layout_get_visible_recs_without_partial_rows(rows_visible + (rows_per_click || 0),
-          // Should this really be zero when we default rows_per_click to 1?
-          children_count, options);
-          should_hide_view_more_button = visible_recs === visible_recs_next_show_more;
-        } else {
-          visible_recs = $5vyXB$depictaiutilishared.layout_get_total_rec_amount_for_row(rows_visible, options);
-          should_hide_view_more_button = visible_recs >= children_count;
+    modified_filter_object.meta = new_meta;
+    // set counts to 0
+    if ("counts" in new_meta) {
+      const counts = new_meta.counts;
+      if (counts) new_meta.counts = counts.map(() => 0);
+    }
+    if (Array.isArray(selected_filter_data) && "values" in new_meta) {
+      // we have an array of values and want to strip the ones from the available ones that aren't selected
+      const values = new_meta.values;
+      if (Array.isArray(values)) {
+        const jsond_set_values = selected_filter_data.map(data => JSON.stringify(data));
+        const indexes_to_remove = new Set();
+        for (let i = 0; i < values.length; i++) {
+          const value = values[i];
+          if (!jsond_set_values.includes(JSON.stringify(value)))
+            // We want to remove the entry with this value from the filter object because it's not selected
+            indexes_to_remove.add(i);
         }
-        const should_hide_button_final = should_hide_view_more_button || max_rows !== -1 && rows_visible >= max_rows;
-        // I don't really understand the logic for when the view more button gets hidden so IDK if below is correct, but it works how it should for now
-        const should_hide_view_less_button = !should_hide_view_more_button || start_rows == undefined || rows_visible <= start_rows || children_count <= recs_per_row * start_rows;
-        return `${$5vyXB$depictaiutilishared.layout_media_query_header(min, max)}{${selector_beginning}:nth-child(n+${visible_recs + 1}){display:none}${props.layout == "slider" ? `${selector_beginning}:nth-child(n+${visible_recs}){margin-right:0}` : ""}${should_hide_button_final ? `.depict .${view_more_button_class}{display:none!important}` : ``}${should_hide_view_less_button ? `.depict .${view_less_button_class}{display:none!important}` : ``}}`;
-      }).join("");
-    }));
-  });
-  return [container_element, view_more_button_container(), view_less_button_container(), $5vyXB$solidjsweb.ssr($f48d0fbb00835aaa$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), get_styling)];
+        new_meta.values = values.filter((_, index) => !indexes_to_remove.has(index));
+        if (new_meta.names) new_meta.names = new_meta.names.filter((_, index) => !indexes_to_remove.has(index));
+        if (new_meta.counts)
+          // remove counts that are too much, they're all zero anyway if they exist
+          new_meta.counts.length -= indexes_to_remove.size;
+      }
+    }
+  }
+  return modified_filter_object;
 }
 async function $9abb0a35d4b60ed3$export$79b1565500412d9b(search_modal, modal_fn_opts) {
   const body = await (0, $5vyXB$depictaiutilishared.observer).wait_for_element("body");
@@ -2688,92 +3075,6 @@ function $0d0b172488865048$export$ef6006467f04ee41({
     }
   })))];
 }
-function $fc23d7668ae0011d$export$a2cc176055f8f08() {
-  const text = "Please try setting `colsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
-  return (0, $5vyXB$solidjsweb.isServer) ? `<!-- ${text} -->` : document.createComment(text);
-}
-let $0caf87eaa19079da$var$cached_placeholder_element;
-let $0caf87eaa19079da$var$rendering_cached_placeholder_element;
-function $0caf87eaa19079da$export$f33414a4df0afd3f({
-  product_card_template_: product_card_template_,
-  num_placeholders_: num_placeholders_
-}) {
-  const [get_elements, set_elements] = $5vyXB$solidjs.createSignal([]);
-  let existing_num = 0;
-  if (0, $5vyXB$solidjsweb.isServer)
-    // want to render simple placeholders on server, effects don't run there
-    return $5vyXB$solidjs.createMemo(() => Array.from({
-      length: num_placeholders_()
-    }).map(() => {
-      const template_result = product_card_template_(null, undefined);
-      // @ts-ignore
-      if (typeof template_result?.then !== "function") return template_result;
-    }));
-  $5vyXB$solidjs.createRenderEffect(() => {
-    const to_add = num_placeholders_() - existing_num;
-    if (to_add <= 0) return;
-    // Below comment is from when we used recommendation renderer and manual DOM manipulation for this, but I'm still scared to remove placeholders and mess up scroll restoration, so I'm keeping the way it worked. Otherwise, <Index> could be used which would be far more elegant.
-    // We don't need to remove placeholders, only need to add. The reason for that is that chrome restores the scroll position once all tasks queued as reaction of the "popstate" events have been completed in the task queue. That means that we need to get the placeholders in fast, or we might lose scroll position if the previous site was shorter.
-    // The query id and the amount might update in separate tasks because one comes from href_change_ipns and the other one from another "popstate" listener. Therefore, we need to be able to dynamically add more placeholders. I'm not entirely sure about this anymore though, since we have the scroll position on a per-id basis it might work anyway but THIS WORKS, and I've been working on this bug for 3 hours so let's just keep it this way.
-    set_elements(prev => [...prev, ...Array.from({
-      length: to_add
-    }).map(() => $0caf87eaa19079da$var$Placeholder({
-      product_card_template_: product_card_template_
-    }))]);
-    existing_num += to_add;
-  });
-  return get_elements; // https://github.com/solidjs/solid/releases/tag/v1.7.0
-}
-/**
- * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
- */
-function $0caf87eaa19079da$var$Placeholder({
-  product_card_template_: product_card_template_
-}) {
-  const get_cloned_placeholders = (element_to_clone = $0caf87eaa19079da$var$cached_placeholder_element) => Array.isArray(element_to_clone) ? element_to_clone.map(el => el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
-  if ($0caf87eaa19079da$var$cached_placeholder_element) return get_cloned_placeholders();
-  let dispose_original_copy;
-  const get_unwrapped_element = $5vyXB$solidjs.createRoot(dispose => {
-    dispose_original_copy = dispose;
-    // if product_card_template_ is async and rejects the resource will take care of throwing upwards here in the solid-js error handling system
-    const [resource] = $5vyXB$solidjs.createResource(() => {
-      if ($0caf87eaa19079da$var$rendering_cached_placeholder_element) return $0caf87eaa19079da$var$rendering_cached_placeholder_element;
-      const return_value = product_card_template_(null, undefined);
-      if (typeof return_value === "object" && typeof return_value?.then === "function")
-        // Is Promise or promise-like object
-        $0caf87eaa19079da$var$rendering_cached_placeholder_element = return_value;
-      return return_value;
-    });
-    return $5vyXB$solidjs.createMemo(() => {
-      if (resource.loading) return () => [];
-      return $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(resource);
-    });
-  });
-  $5vyXB$solidjs.onCleanup(() => {
-    if ($0caf87eaa19079da$var$rendering_cached_placeholder_element) {
-      // If we're still rendering in our separate root, let the rendering finish or other <Placeholder> components waiting for it might get an incomplete result
-      const unset_current_rendering = () => {
-        dispose_original_copy();
-        $0caf87eaa19079da$var$rendering_cached_placeholder_element = undefined;
-      };
-      $0caf87eaa19079da$var$rendering_cached_placeholder_element?.then(unset_current_rendering, unset_current_rendering);
-    } else
-      // Otherwise, just make sure we've disposed our root
-      dispose_original_copy();
-  });
-  return $5vyXB$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$cached_placeholder_element ||= 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$rendering_cached_placeholder_element = 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
-  });
-}
 
 /*
  * Usually product templates are somewhat height-elastic depending on the content, i.e. if the title is longer we might up to two extra rows for this. That means that the placeholders almost never will reflect the size of the actual content when we do scroll restoration. This magic number specifies how many extra placeholders we should render everytime to compensate for this, since if the placeholders are in total shorter than the old scroll location the scroll restoration won't work.
@@ -2803,6 +3104,7 @@ function $3f08fe2992a2a8ca$export$5e4aed86c12acdd9({
     last_loaded = +new Date();
     is_first_load = true;
   });
+  // percentage_in_view_ has equals: false so it should update even when set to the same value. That is to make sure that if the user bounces around below the "viewport" of our product listing we still start fetching as soon as is_loading_more becomes false again and we get IntersectionObserverEntries
   $5vyXB$solidjs.createEffect($5vyXB$depictaiutilishared.catchify(async () => {
     const be_above_percentage = is_first_load ? 50 : 75; // if first load, load earlier
     if (percentage_in_view_() < be_above_percentage || is_loading_more) return;
@@ -2874,88 +3176,10 @@ function $4117463e2939f5f4$export$63dd0350f8559dda({
       // 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
   });
 }
-
-/**
- * Gets product_id (the thing we key the rendering on) from a display
- */
-function $a5871dacf261adf8$export$548d053aba053d79(display) {
-  if ("variant_index" in display) {
-    const actual_display = display.variant_displays[display.variant_index];
-    return actual_display.product_id;
-  }
-  return display.product_id;
-}
-function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
-  const displays_by_key_ = $5vyXB$solidjs.createMemo(() => {
-    const displays = get_displays_();
-    // We key by product_id because that's what can be used to uniquely identify products
-    // This way <For> can optimize the rendering
-    const map = new Map();
-    for (let i = 0; i < displays.length; i++) {
-      const display = displays[i];
-      const product_id = $a5871dacf261adf8$export$548d053aba053d79(display);
-      map.set(product_id, display);
-    }
-    return map;
-  });
-  return displays_by_key_;
-}
-function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-  displays_by_key_: displays_by_key_,
-  merchant_: merchant_,
-  market_: market_,
-  product_card_template_: product_card_template_,
-  do_per_elements_: do_per_elements_
-}) {
-  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.For), {
-    get each() {
-      return [...displays_by_key_().keys()];
-    },
-    children: (product_id, index) => {
-      const owner = $5vyXB$solidjs.getOwner();
-      const display_accessor = $5vyXB$solidjs.createMemo(() => displays_by_key_().get(product_id));
-      const [product_card_resource] = $5vyXB$solidjs.createResource(display_accessor,
-      // re-render when the reference to the display object changes
-      // this should only be the case when the merchant or market changes and the new request has completed
-      display => {
-        // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
-        return product_card_template_(display, {
-          set_on_index_change: fn => $5vyXB$solidjs.runWithOwner(owner, () => $5vyXB$solidjs.createEffect(() => fn(index()))),
-          merchant: $5vyXB$solidjs.untrack(merchant_),
-          // this means that the merchant and market provided to the template is wrong while we do another fetch, but I don't see how anyone would need to know the correct market there
-          market: $5vyXB$solidjs.untrack(market_)
-        });
-      });
-      const node_accessor = $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(product_card_resource);
-      $5vyXB$solidjs.createEffect(() => {
-        const product_card_nodes = node_accessor();
-        const display = display_accessor();
-        const elements = [];
-        for (let i = 0; i < product_card_nodes.length; i++) {
-          const element = product_card_nodes[i];
-          if (!(element instanceof Element)) continue;
-          elements.push(element);
-          // Add tracking ids
-          if (!(element instanceof HTMLElement)) continue; // Apparently only HTMLElements have dataset
-          const {
-            dataset: dataset
-          } = element;
-          const {
-            search_result_id: search_result_id,
-            product_listing_result_id: product_listing_result_id,
-            recommendation_id: recommendation_id
-          } = display;
-          if (search_result_id) dataset.searchResultId = search_result_id;else if (product_listing_result_id) dataset.productListingResultId = product_listing_result_id;else if (recommendation_id) dataset.recommendationId = recommendation_id;
-        }
-        do_per_elements_?.(elements, index);
-      });
-      return product_card_resource; // https://github.com/solidjs/solid/releases/tag/v1.7.0
-    }
-  });
-}
-
 function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
   plp_results_: plp_results_,
   product_card_template_: product_card_template_,
@@ -4837,41 +5061,6 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     }
   })))];
 }
-const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
-  const cols_at_size = [];
-  for (let i = 0; i < sorted_cols_at_size.length; i++) {
-    const [nb_cols, width] = sorted_cols_at_size[i];
-    const next_width = sorted_cols_at_size[i + 1]?.[1];
-    const max_width = i === 0 ? "" : `${width}px`;
-    const min_width = next_width !== undefined ? `${next_width + 1}px` : "";
-    const col_at_size = [nb_cols, min_width, max_width];
-    cols_at_size.push(col_at_size);
-  }
-  return cols_at_size;
-};
-const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
-  // Check that every element is an array
-  const are_arrays = cols_at_size.every(element => Array.isArray(element));
-  if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
-  // Check width duplicates
-  const widths = cols_at_size.map(([_, width]) => width);
-  const widths_set = new Set(widths);
-  if (widths_set.size < widths.length) throw new Error("There are duplicate widths in cols_at_size");
-  if (cols_at_size.length === 1) {
-    const [nb_cols, width] = cols_at_size[0];
-    const max_width = width !== undefined ? `${width}px` : "";
-    return [[nb_cols, "", max_width]];
-  }
-  // Sort widths in ascending order
-  const sorted_cols_at_size = [...cols_at_size].sort((a, b) => {
-    const [_b, width_A] = a;
-    const [_a, width_b] = b;
-    if (width_A === undefined) return -1;
-    if (width_b === undefined) return 1;
-    return width_b - width_A;
-  });
-  return $4e04be41243c3d80$var$transform_elements(sorted_cols_at_size);
-};
 function $95837413165cc2df$export$23fca46f3143581f(component, error_message) {
   const component_in_error_boundary = do_with_elements => {
     const error_boundary_wrapped = $edafe91daf3091d7$export$b69d0d92862de18b({
@@ -5170,7 +5359,7 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
   #meta_title_suffix_ = $5vyXB$solidjs.createSignal();
   #disable_override_query_id = $5vyXB$solidjs.createSignal();
   #listing_type_signal = $5vyXB$solidjs.createSignal();
-  static #keys_constructed_with = new Set();
+  static #keys_constructed_with = /*@__PURE__*/new Set();
   get localization() {
     // allow reactive access
     return this.#locale_signal[0]();
@@ -7788,27 +7977,6 @@ function $d8e94ea381ab57fa$export$828dcdd425fd3231(aligner) {
     cleanup: cleanup
   };
 }
-
-/**
- * Content results ContentCard look stupid on mobile if there are two columns of them, so we limit the number of columns to 1 if the screen is too small
- */
-function $ab7c6c7911bae2f5$export$ff7109b9b2b206ba(sdk_cols_at_size, min_width_for_more_than_one_column = 500) {
-  if (!sdk_cols_at_size.length) return sdk_cols_at_size;
-  const sorted_sizes = sdk_cols_at_size.map(([cols, max_width]) => [cols, max_width ?? Infinity]).sort(([, a], [, b]) => a - b);
-  const [[, smallest_max_width]] = sorted_sizes;
-  if (smallest_max_width > min_width_for_more_than_one_column)
-    // If everything above min_width_for_more_than_one_column, we can just add a 1 column at the beginning
-    return [[1, min_width_for_more_than_one_column], ...sdk_cols_at_size];
-  const to_delete = [];
-  for (let i = 0; i < sorted_sizes.length; i++) {
-    const [, max_width] = sorted_sizes[i];
-    if (max_width > min_width_for_more_than_one_column) continue;
-    to_delete.push(i);
-  }
-  while (to_delete.length) sorted_sizes.splice(to_delete.pop(), 1);
-  sorted_sizes.unshift([1, min_width_for_more_than_one_column]);
-  return sorted_sizes.map(([cols, max_width]) => max_width == Infinity ? [cols] : [cols, max_width]);
-}
 const $2c61e4cd8229c49a$var$_tmpl$ = ["<div", ' class="depict plp search">', "</div>"];
 // We just pass page_url_creator to DepictAPI when we instantiate it, so don't allow it to be specified if api is already specified
 /**
@@ -7827,7 +7995,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
   #market_signal = $5vyXB$solidjs.createSignal();
   #modal_open_signal = $5vyXB$solidjs.createSignal(false);
   #content_search_signal = $5vyXB$solidjs.createSignal();
-  static #keys_constructed_with = new Set();
+  static #keys_constructed_with = /*@__PURE__*/new Set();
   #router = new (0, $e96dd13889871fc0$export$7e1297a3a19f10d8)("hard_navigation");
   constructor({
     unique_instance_key_for_state = "",
@@ -8341,7 +8509,7 @@ class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
   #revert_fns = [];
   #is_open = false;
   static #reverting_permitted = true;
-  static #visited_urls = (() => {
+  static #visited_urls = /*@__PURE__*/(() => {
     // Keep track of all URLs that have been visited since the document that was initially loaded (loaded means the process where the browser creates a new `document` and `window` object).
     $5vyXB$depictaiutilishared.catchify(async () => {
       // Static initialization blocks aren't supported in MobileSafari yet, otherwise this would be one.
@@ -8382,14 +8550,14 @@ class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
       return $5vyXB$depictaiutilishared.catchify(this.render_, "rendering failed")() || [];
     });
   }
-  #unload = $5vyXB$depictaiutilishared.catchify(() => {
+  #unload = /*@__PURE__*/$5vyXB$depictaiutilishared.catchify(() => {
     if (!this.#is_open) return;
     this.#disconnect_observer?.();
     if ($0a6acf31d1eae57c$export$3ccaa27d81dd8556.#reverting_permitted) while (this.#revert_fns.length) this.#revert_fns.pop()?.();
     this.#is_open = false;
     this.dispatchEvent(new CustomEvent("close"));
   }, "failed to close page");
-  #load = $5vyXB$depictaiutilishared.catchify(async els => {
+  #load = /*@__PURE__*/$5vyXB$depictaiutilishared.catchify(async els => {
     this.#is_open = true;
     // So that #load doesn't get called again
     let set_should_stay_inserted;