@depict-ai/ui 1.4.22 → 1.4.23

package/ES10/index.js

@@ -1,6 +1,6 @@
-import { add_to_version_info as $8tj43$add_to_version_info, catchify as $8tj43$catchify, is_safari as $8tj43$is_safari, report as $8tj43$report, observer as $8tj43$observer, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, make_random_classname as $8tj43$make_random_classname, dlog as $8tj43$dlog, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, javascript_media_query as $8tj43$javascript_media_query, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, dwarn as $8tj43$dwarn, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, use_href_accessor as $8tj43$use_href_accessor, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { template as $8tj43$template, getNextElement as $8tj43$getNextElement, spread as $8tj43$spread, mergeProps as $8tj43$mergeProps, runHydrationEvents as $8tj43$runHydrationEvents, effect as $8tj43$effect, style as $8tj43$style, insert as $8tj43$insert, classList as $8tj43$classList, createComponent as $8tj43$createComponent, getNextMarker as $8tj43$getNextMarker, addEventListener as $8tj43$addEventListener, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, setAttribute as $8tj43$setAttribute, Dynamic as $8tj43$Dynamic, use as $8tj43$use, className as $8tj43$className, isServer as $8tj43$isServer } from "solid-js/web";
-import { createSignal as $8tj43$createSignal, onCleanup as $8tj43$onCleanup, ErrorBoundary as $8tj43$ErrorBoundary, createMemo as $8tj43$createMemo, untrack as $8tj43$untrack, createEffect as $8tj43$createEffect, getOwner as $8tj43$getOwner, Show as $8tj43$Show, runWithOwner as $8tj43$runWithOwner, Index as $8tj43$Index, createRoot as $8tj43$createRoot, on as $8tj43$on, For as $8tj43$For, createRenderEffect as $8tj43$createRenderEffect, createComputed as $8tj43$createComputed, batch as $8tj43$batch, createResource as $8tj43$createResource, createReaction as $8tj43$createReaction, Suspense as $8tj43$Suspense } from "solid-js";
+import { add_to_version_info as $8tj43$add_to_version_info, make_random_classname as $8tj43$make_random_classname, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, catchify as $8tj43$catchify, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, report as $8tj43$report, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, is_safari as $8tj43$is_safari, observer as $8tj43$observer, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, dlog as $8tj43$dlog, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, javascript_media_query as $8tj43$javascript_media_query, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, dwarn as $8tj43$dwarn, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, use_href_accessor as $8tj43$use_href_accessor, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { template as $8tj43$template, getNextElement as $8tj43$getNextElement, insert as $8tj43$insert, createComponent as $8tj43$createComponent, mergeProps as $8tj43$mergeProps, isServer as $8tj43$isServer, spread as $8tj43$spread, runHydrationEvents as $8tj43$runHydrationEvents, addEventListener as $8tj43$addEventListener, className as $8tj43$className, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, effect as $8tj43$effect, classList as $8tj43$classList, setAttribute as $8tj43$setAttribute, getNextMarker as $8tj43$getNextMarker, style as $8tj43$style, Dynamic as $8tj43$Dynamic, use as $8tj43$use } from "solid-js/web";
+import { createMemo as $8tj43$createMemo, createResource as $8tj43$createResource, Suspense as $8tj43$Suspense, Show as $8tj43$Show, createSignal as $8tj43$createSignal, createRenderEffect as $8tj43$createRenderEffect, createRoot as $8tj43$createRoot, onCleanup as $8tj43$onCleanup, For as $8tj43$For, getOwner as $8tj43$getOwner, runWithOwner as $8tj43$runWithOwner, createEffect as $8tj43$createEffect, untrack as $8tj43$untrack, createComputed as $8tj43$createComputed, ErrorBoundary as $8tj43$ErrorBoundary, Index as $8tj43$Index, on as $8tj43$on, batch as $8tj43$batch, createReaction as $8tj43$createReaction } from "solid-js";
 import $8tj43$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
 import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
@@ -8,7 +8,679 @@ import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/def
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "1.4.22";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "1.4.23";
+const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
+  const cols_at_size = [];
+  for (let i = 0; i < sorted_cols_at_size.length; i++) {
+    var _sorted_cols_at_size;
+    const [nb_cols, width] = sorted_cols_at_size[i];
+    const next_width = (_sorted_cols_at_size = sorted_cols_at_size[i + 1]) === null || _sorted_cols_at_size === void 0 ? void 0 : _sorted_cols_at_size[1];
+    const max_width = i === 0 ? "" : "".concat(width, "px");
+    const min_width = next_width !== undefined ? "".concat(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 $a9c7ba6087881ac2$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(_ref => {
+    let [_, width] = _ref;
+    return 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 ? "".concat(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 $a9c7ba6087881ac2$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 $3f7203368ad0d3ca$export$ff7109b9b2b206ba(sdk_cols_at_size) {
+  let min_width_for_more_than_one_column = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
+  if (!sdk_cols_at_size.length) return sdk_cols_at_size;
+  const sorted_sizes = sdk_cols_at_size.map(_ref => {
+    let [cols, max_width] = _ref;
+    return [cols, max_width !== null && max_width !== void 0 ? max_width : Infinity];
+  }).sort((_ref2, _ref3) => {
+    let [, a] = _ref2;
+    let [, b] = _ref3;
+    return 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(_ref4 => {
+    let [cols, max_width] = _ref4;
+    return max_width == Infinity ? [cols] : [cols, max_width];
+  });
+}
+function $ca55612a53dbbdd2$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, $8tj43$isServer) ? "<!-- ".concat(text, " -->") : document.createComment(text);
+}
+function $cb64b315b25cfc59$export$2f0cbfbb4354bb52(elements) {
+  // FYI this probably doesn't work on hugely deep nestings or large amount of elements
+  return $8tj43$createMemo(() => $cb64b315b25cfc59$var$unwrapping_helper(elements));
+}
+function $cb64b315b25cfc59$var$unwrapping_helper(elements) {
+  const result = [];
+  if (Array.isArray(elements)) for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    result.push(...$cb64b315b25cfc59$var$unwrapping_helper(element));
+  } else if (typeof elements == "function") result.push(...$cb64b315b25cfc59$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
+  return result;
+}
+let $bdd80c7862246dc2$var$cached_placeholder_element;
+let $bdd80c7862246dc2$var$rendering_cached_placeholder_element;
+function $bdd80c7862246dc2$export$f33414a4df0afd3f(_ref) {
+  let {
+    product_card_template_: product_card_template_,
+    num_placeholders_: num_placeholders_
+  } = _ref;
+  const [get_elements, set_elements] = $8tj43$createSignal([]);
+  let existing_num = 0;
+  if (0, $8tj43$isServer)
+    // want to render simple placeholders on server, effects don't run there
+    return $8tj43$createMemo(() => Array.from({
+      length: num_placeholders_()
+    }).map(() => {
+      const template_result = product_card_template_(null, undefined);
+      // @ts-ignore
+      if (typeof (template_result === null || template_result === void 0 ? void 0 : template_result.then) !== "function") return template_result;
+    }));
+  $8tj43$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(() => $bdd80c7862246dc2$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 $bdd80c7862246dc2$var$Placeholder(_ref2) {
+  let {
+    product_card_template_: product_card_template_
+  } = _ref2;
+  const get_cloned_placeholders = function () {
+    let element_to_clone = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : $bdd80c7862246dc2$var$cached_placeholder_element;
+    return Array.isArray(element_to_clone) ? element_to_clone.map(el => el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
+  };
+  if ($bdd80c7862246dc2$var$cached_placeholder_element) return get_cloned_placeholders();
+  let dispose_original_copy;
+  const get_unwrapped_element = $8tj43$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] = $8tj43$createResource(() => {
+      if ($bdd80c7862246dc2$var$rendering_cached_placeholder_element) return $bdd80c7862246dc2$var$rendering_cached_placeholder_element;
+      const return_value = product_card_template_(null, undefined);
+      if (typeof return_value === "object" && typeof (return_value === null || return_value === void 0 ? void 0 : return_value.then) === "function")
+        // Is Promise or promise-like object
+        $bdd80c7862246dc2$var$rendering_cached_placeholder_element = return_value;
+      return return_value;
+    });
+    return $8tj43$createMemo(() => {
+      if (resource.loading) return () => [];
+      return $cb64b315b25cfc59$export$2f0cbfbb4354bb52(resource);
+    });
+  });
+  $8tj43$onCleanup(() => {
+    if ($bdd80c7862246dc2$var$rendering_cached_placeholder_element) {
+      var _rendering_cached_pla;
+      // 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();
+        $bdd80c7862246dc2$var$rendering_cached_placeholder_element = undefined;
+      };
+      (_rendering_cached_pla = $bdd80c7862246dc2$var$rendering_cached_placeholder_element) === null || _rendering_cached_pla === void 0 || _rendering_cached_pla.then(unset_current_rendering, unset_current_rendering);
+    } else
+      // Otherwise, just make sure we've disposed our root
+      dispose_original_copy();
+  });
+  return $8tj43$createMemo(() => {
+    const unwrapped_array = get_unwrapped_element()();
+    if (!(unwrapped_array !== null && unwrapped_array !== void 0 && 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
+    $bdd80c7862246dc2$var$cached_placeholder_element || ($bdd80c7862246dc2$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
+    $bdd80c7862246dc2$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 $6a4c7ed6d005505c$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 $2d7bad8684bc7f44$export$7f8bd308237ab5a5(get_displays_) {
+  const displays_by_key_ = $8tj43$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 = $6a4c7ed6d005505c$export$548d053aba053d79(display);
+      map.set(product_id, display);
+    }
+    return map;
+  });
+  return displays_by_key_;
+}
+function $2d7bad8684bc7f44$export$43f0fb951fcb0c54(_ref) {
+  let {
+    displays_by_key_: displays_by_key_,
+    merchant_: merchant_,
+    market_: market_,
+    product_card_template_: product_card_template_,
+    do_per_elements_: do_per_elements_
+  } = _ref;
+  return $8tj43$createComponent((0, $8tj43$For), {
+    get each() {
+      return [...displays_by_key_().keys()];
+    },
+    children: (product_id, index) => {
+      const owner = $8tj43$getOwner();
+      const display_accessor = $8tj43$createMemo(() => displays_by_key_().get(product_id));
+      const [product_card_resource] = $8tj43$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 => $8tj43$runWithOwner(owner, () => $8tj43$createEffect(() => fn(index()))),
+          merchant: $8tj43$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: $8tj43$untrack(market_) // recommendation_grid can provide a sneaky undefined here just FYI
+        });
+      });
+
+      const node_accessor = $cb64b315b25cfc59$export$2f0cbfbb4354bb52(product_card_resource);
+      $8tj43$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_ === null || do_per_elements_ === void 0 || 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 $f3b7124b76123e44$export$e1d52e4f0c7557a1 extends Error {}
+class $f3b7124b76123e44$export$aa14a9f43128f61f extends $f3b7124b76123e44$export$e1d52e4f0c7557a1 {
+  constructor(templateError) {
+    super("Uncaught error in product card template", {
+      cause: templateError
+    });
+  }
+}
+const $74777e8fe65b3dcb$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div></div>`, 2);
+function $74777e8fe65b3dcb$export$b69d0d92862de18b(props) {
+  return $8tj43$ErrorBoundary({
+    fallback(err, retry) {
+      var _props$on_error_;
+      const {
+        message_: message_,
+        severity_: severity_
+      } = props;
+      let message = message_;
+      if (err instanceof (0, $f3b7124b76123e44$export$aa14a9f43128f61f)) {
+        console.error(err.cause);
+        message = "".concat(message, ": ").concat(err.message);
+      } else $8tj43$report([err, message_], severity_);
+      (_props$on_error_ = props.on_error_) === null || _props$on_error_ === void 0 || _props$on_error_.call(props, retry);
+      return (() => {
+        const _el$ = $8tj43$getNextElement($74777e8fe65b3dcb$var$_tmpl$);
+        $8tj43$insert(_el$, message);
+        $8tj43$effect(_$p => {
+          var _props$class_list_;
+          return $8tj43$classList(_el$, Object.fromEntries(((_props$class_list_ = props.class_list_) === null || _props$class_list_ === void 0 ? void 0 : _props$class_list_.map(c => [c, true])) || []), _$p);
+        });
+        return _el$;
+      })();
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+const $63f1f8dbcd07d3b0$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div></div>`, 2),
+  $63f1f8dbcd07d3b0$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<style type="text/css"></style>`, 2);
+function $63f1f8dbcd07d3b0$export$d21e32dfedac04be(props) {
+  const container_element_ = (() => {
+    const _el$ = $8tj43$getNextElement($63f1f8dbcd07d3b0$var$_tmpl$);
+    $8tj43$spread(_el$, $8tj43$mergeProps(() => props.element_attributes), false, true);
+    $8tj43$insert(_el$, () => props.children);
+    $8tj43$runHydrationEvents();
+    return _el$;
+  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
+  return $8tj43$createComponent((0, $74777e8fe65b3dcb$export$b69d0d92862de18b), {
+    get message_() {
+      return "Failed calculating " + props.layout + " layout";
+    },
+    severity_: "error",
+    get children() {
+      return $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, container_element_);
+    }
+  });
+}
+function $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, container_element) {
+  let insert_after_container = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
+  const show_all_rows = $8tj43$createMemo(() => props.rows === "all");
+  const rows_or_empty_object = $8tj43$createMemo(() => show_all_rows() ? {} : props.rows);
+  const view_more_button_elements = $cb64b315b25cfc59$export$2f0cbfbb4354bb52($8tj43$createMemo(() => rows_or_empty_object().button));
+  const view_less_button_elements = $cb64b315b25cfc59$export$2f0cbfbb4354bb52($8tj43$createMemo(() => rows_or_empty_object().view_less_button));
+  const have_a_view_more_button = $8tj43$createMemo(() => {
+    const button = view_more_button_elements();
+    return !(!button || Array.isArray(button) && !button.length);
+  });
+  const have_a_view_less_button = $8tj43$createMemo(() => {
+    const button = view_less_button_elements();
+    return !(!button || Array.isArray(button) && !button.length);
+  });
+  const [get_styling, set_styling] = $8tj43$createSignal();
+  const container_class = $8tj43$make_random_classname();
+  const selector_beginning = ".depict .".concat(container_class, ">"); // class so ppl can have id if needed
+  const [get_children_count, set_children_count] = $8tj43$createSignal(0);
+  const update_children_count = () => set_children_count(container_element.children.length);
+  const col_styling = $8tj43$createMemo(() => $8tj43$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 = $8tj43$createSignal($8tj43$untrack(() => {
+    var _rows_or_empty_object;
+    return (_rows_or_empty_object = rows_or_empty_object().start_rows) !== null && _rows_or_empty_object !== void 0 ? _rows_or_empty_object : 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 = $8tj43$createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
+  const get_rows_visible = $8tj43$createMemo(() => rows_visible_signal()[0]());
+  const set_rows_visible = $8tj43$createMemo(() => rows_visible_signal()[1]);
+  const view_more_button_class = $8tj43$make_random_classname();
+  const view_less_button_class = $8tj43$make_random_classname();
+  const style_element = (() => {
+    const _el$2 = $8tj43$getNextElement($63f1f8dbcd07d3b0$var$_tmpl$2);
+    $8tj43$insert(_el$2, get_styling);
+    return _el$2;
+  })();
+  const view_more_button_container = $8tj43$createMemo(() => have_a_view_more_button() && (() => {
+    const _el$3 = $8tj43$getNextElement($63f1f8dbcd07d3b0$var$_tmpl$);
+    $8tj43$addEventListener(_el$3, "click", $8tj43$catchify(() => set_rows_visible()(prev => {
+      var _rows_or_empty_object2;
+      return prev + ((_rows_or_empty_object2 = rows_or_empty_object().rows_per_click) !== null && _rows_or_empty_object2 !== void 0 ? _rows_or_empty_object2 : 1);
+    })), true);
+    $8tj43$className(_el$3, "load-more-container ".concat(view_more_button_class));
+    $8tj43$insert(_el$3, () => rows_or_empty_object().button);
+    $8tj43$runHydrationEvents();
+    return _el$3;
+  })());
+  // 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 = $8tj43$createMemo(() => have_a_view_less_button() && (() => {
+    const _el$4 = $8tj43$getNextElement($63f1f8dbcd07d3b0$var$_tmpl$);
+    $8tj43$addEventListener(_el$4, "click", $8tj43$catchify(() => set_rows_visible()(() => {
+      var _rows_or_empty_object3;
+      return (_rows_or_empty_object3 = rows_or_empty_object().start_rows) !== null && _rows_or_empty_object3 !== void 0 ? _rows_or_empty_object3 : 1;
+    })), true);
+    $8tj43$className(_el$4, "load-less-container ".concat(view_less_button_class));
+    $8tj43$insert(_el$4, () => rows_or_empty_object().view_less_button);
+    $8tj43$runHydrationEvents();
+    return _el$4;
+  })());
+  container_element.classList.add(container_class);
+  $8tj43$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);
+  });
+  $8tj43$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($8tj43$catchify(update_children_count));
+    mutation_observer.observe(container_element, {
+      childList: true
+    });
+    $8tj43$onCleanup(() => mutation_observer.disconnect());
+    set_styling(
+    // this is needed because solid will think that the memo-accessor is a setter function otherwise
+    () => $8tj43$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 = $8tj43$layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
+          const visible_recs_next_show_more = $8tj43$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 = $8tj43$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 "".concat($8tj43$layout_media_query_header(min, max), "{").concat(selector_beginning, ":nth-child(n+").concat(visible_recs + 1, "){display:none}").concat(props.layout == "slider" ? "".concat(selector_beginning, ":nth-child(n+").concat(visible_recs, "){margin-right:0}") : "").concat(should_hide_button_final ? ".depict .".concat(view_more_button_class, "{display:none!important}") : "").concat(should_hide_view_less_button ? ".depict .".concat(view_less_button_class, "{display:none!important}") : "", "}");
+      }).join("");
+    }));
+  });
+  if (insert_after_container) container_element.after(style_element);
+  return [container_element, $8tj43$memo(view_more_button_container), $8tj43$memo(view_less_button_container), style_element];
+}
+$8tj43$delegateEvents(["click"]);
+const $ca6ab5f08bd28bca$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<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>`, 4);
+function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (() => {
+    const _el$ = $8tj43$getNextElement($ca6ab5f08bd28bca$var$_tmpl$);
+    $8tj43$effect(_p$ => {
+      var _props$width_, _props$height_;
+      const _v$ = (_props$width_ = props.width_) !== null && _props$width_ !== void 0 ? _props$width_ : 14,
+        _v$2 = (_props$height_ = props.height_) !== null && _props$height_ !== void 0 ? _props$height_ : 26;
+      _v$ !== _p$._v$ && $8tj43$setAttribute(_el$, "width", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && $8tj43$setAttribute(_el$, "height", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$;
+  })();
+}
+const $002f09d00aac50b2$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div></div>`, 2);
+function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
+  let {
+    children: children,
+    slider_ref_: slider_ref_,
+    faded_opacity_ = 0.7,
+    mutation_plugins_ = []
+  } = _ref;
+  const slider = new (0, $8tj43$Amazing_Slider)({
+    button_contents: {
+      left: [(() => {
+        const _el$ = $8tj43$getNextElement($002f09d00aac50b2$var$_tmpl$);
+        $8tj43$insert(_el$, $8tj43$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {}));
+        return _el$;
+      })()],
+      right: [(() => {
+        const _el$2 = $8tj43$getNextElement($002f09d00aac50b2$var$_tmpl$);
+        $8tj43$insert(_el$2, $8tj43$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {}));
+        return _el$2;
+      })()]
+    },
+    constructor_plugins: [$8tj43$slider_snap_css().constructor_plugin],
+    mutation_plugins: [$8tj43$slider_fading_factory({
+      threshold_: 0.96,
+      faded_opacity_: faded_opacity_
+    }).mutation_plugin_, ...mutation_plugins_]
+  });
+  $8tj43$insert(slider.insert_here, children);
+  $8tj43$onCleanup(() => slider.observer.disconnect());
+  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
+  return slider.container;
+}
+function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
+  let {
+    recommendations_resource_: recommendations_resource_,
+    product_card_template_: product_card_template_,
+    layout_options_: layout_options_,
+    merchant_: merchant_,
+    market_: market_
+  } = _ref;
+  const is_showing_something = $8tj43$createMemo(() => {
+    var _recommendations_reso;
+    return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
+  });
+  const num_placeholders_ = () => 20;
+  const slider = $8tj43$createComponent((0, $002f09d00aac50b2$export$6649caad96ef8870), {
+    slider_ref_: slider => {
+      const Layout = props => $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, slider.insert_here, true);
+      // Do like this, so we don't have to call mergeProps ourselves
+      $8tj43$createComponent(Layout, $8tj43$mergeProps({
+        rows: "all",
+        layout: "slider"
+      }, layout_options_));
+      slider.insert_here.before($ca55612a53dbbdd2$export$a2cc176055f8f08());
+    },
+    get children() {
+      return $8tj43$createComponent((0, $8tj43$Suspense), {
+        get fallback() {
+          return $bdd80c7862246dc2$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_ = $2d7bad8684bc7f44$export$7f8bd308237ab5a5($8tj43$createMemo(() => recommendations_resource_() || []));
+            return $2d7bad8684bc7f44$export$43f0fb951fcb0c54({
+              displays_by_key_: displays_by_key_,
+              merchant_: merchant_,
+              market_: market_,
+              product_card_template_: product_card_template_
+            });
+          })();
+        }
+      });
+    }
+  });
+  return $8tj43$createComponent((0, $8tj43$Show), {
+    get when() {
+      return is_showing_something();
+    },
+    children: slider
+  });
+}
+const $d5d7e58c5c9d8db0$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class="depict plp"></div>`, 2);
+function $d5d7e58c5c9d8db0$export$9574e176201e5e8d(props) {
+  const grid_spacing_override = $8tj43$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_] = $8tj43$createResource(() => props.recommendations, recs => recs);
+  return (() => {
+    const _el$ = $8tj43$getNextElement($d5d7e58c5c9d8db0$var$_tmpl$);
+    $8tj43$insert(_el$, () => $39ddb986053fb759$export$d41d19e89346fa2({
+      product_card_template_: function () {
+        return props.product_card_template(...arguments);
+      },
+      recommendations_resource_: recommendations_resource_,
+      market_: () => props.market,
+      merchant_: () => props.merchant,
+      layout_options_: $8tj43$createMemo(() => ({
+        cols_at_size: $a9c7ba6087881ac2$export$6daf8749b65a1b77($3f7203368ad0d3ca$export$ff7109b9b2b206ba(props.cols_at_size)),
+        ...grid_spacing_override()
+      }))
+    }));
+    return _el$;
+  })();
+}
+const $e3efeb558d952696$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class="recommendation-grid"><!#><!/><!#><!/></div>`, 6);
+function $e3efeb558d952696$export$7da560f849543dff(_ref) {
+  let {
+    recommendations_resource_: recommendations_resource_,
+    product_card_template_: product_card_template_,
+    layout_options_: layout_options_,
+    merchant_: merchant_,
+    market_: market_,
+    rows_object_: rows_object_
+  } = _ref;
+  const is_showing_something = $8tj43$createMemo(() => {
+    var _recommendations_reso;
+    return recommendations_resource_.loading || ((_recommendations_reso = recommendations_resource_()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
+  });
+  const num_placeholders_ = () => 20;
+  return $8tj43$createComponent((0, $8tj43$Show), {
+    get when() {
+      return is_showing_something();
+    },
+    get children() {
+      const _el$ = $8tj43$getNextElement($e3efeb558d952696$var$_tmpl$),
+        _el$2 = _el$.firstChild,
+        [_el$3, _co$] = $8tj43$getNextMarker(_el$2.nextSibling),
+        _el$4 = _el$3.nextSibling,
+        [_el$5, _co$2] = $8tj43$getNextMarker(_el$4.nextSibling);
+      $8tj43$insert(_el$, (0, $ca55612a53dbbdd2$export$a2cc176055f8f08), _el$3, _co$);
+      $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps({
+        get rows() {
+          return rows_object_();
+        },
+        layout: "grid",
+        element_attributes: {
+          class: "cards"
+        }
+      }, layout_options_, {
+        get children() {
+          return $8tj43$createComponent((0, $8tj43$Suspense), {
+            get fallback() {
+              return $bdd80c7862246dc2$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_ = $2d7bad8684bc7f44$export$7f8bd308237ab5a5($8tj43$createMemo(() => recommendations_resource_() || []));
+                return $2d7bad8684bc7f44$export$43f0fb951fcb0c54({
+                  displays_by_key_: displays_by_key_,
+                  merchant_: merchant_,
+                  market_: market_,
+                  product_card_template_: product_card_template_
+                });
+              })();
+            }
+          });
+        }
+      })), _el$5, _co$2);
+      return _el$;
+    }
+  });
+}
+const $b432b11321ad4c97$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<button class="show-more major" type="button"></button>`, 2),
+  $b432b11321ad4c97$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class="depict plp"></div>`, 2);
+function $b432b11321ad4c97$export$9756467d34d91cdb(props) {
+  const rows_object_ = $8tj43$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: (() => {
+        const _el$ = $8tj43$getNextElement($b432b11321ad4c97$var$_tmpl$);
+        $8tj43$insert(_el$, () => view_more_button.text);
+        return _el$;
+      })()
+    };
+  });
+  const grid_spacing_override = $8tj43$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_] = $8tj43$createResource(() => props.recommendations, recs => recs);
+  return (() => {
+    const _el$2 = $8tj43$getNextElement($b432b11321ad4c97$var$_tmpl$2);
+    $8tj43$insert(_el$2, () => $e3efeb558d952696$export$7da560f849543dff({
+      rows_object_: rows_object_,
+      product_card_template_: function () {
+        return props.product_card_template(...arguments);
+      },
+      recommendations_resource_: recommendations_resource_,
+      market_: () => props.market,
+      merchant_: () => props.merchant,
+      layout_options_: $8tj43$createMemo(() => ({
+        cols_at_size: $a9c7ba6087881ac2$export$6daf8749b65a1b77($3f7203368ad0d3ca$export$ff7109b9b2b206ba(props.cols_at_size)),
+        ...grid_spacing_override()
+      }))
+    }));
+    return _el$2;
+  })();
+}
 const $56047603f9d212b6$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<img>`, 1);
 function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $8tj43$createSignal(0);
@@ -65,46 +737,6 @@ function $801e8845d3fa3653$export$94026ee33dbabc26(props) {
     return _el$;
   })();
 }
-
-// Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
-class $f3b7124b76123e44$export$e1d52e4f0c7557a1 extends Error {}
-class $f3b7124b76123e44$export$aa14a9f43128f61f extends $f3b7124b76123e44$export$e1d52e4f0c7557a1 {
-  constructor(templateError) {
-    super("Uncaught error in product card template", {
-      cause: templateError
-    });
-  }
-}
-const $74777e8fe65b3dcb$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div></div>`, 2);
-function $74777e8fe65b3dcb$export$b69d0d92862de18b(props) {
-  return $8tj43$ErrorBoundary({
-    fallback(err, retry) {
-      var _props$on_error_;
-      const {
-        message_: message_,
-        severity_: severity_
-      } = props;
-      let message = message_;
-      if (err instanceof (0, $f3b7124b76123e44$export$aa14a9f43128f61f)) {
-        console.error(err.cause);
-        message = "".concat(message, ": ").concat(err.message);
-      } else $8tj43$report([err, message_], severity_);
-      (_props$on_error_ = props.on_error_) === null || _props$on_error_ === void 0 || _props$on_error_.call(props, retry);
-      return (() => {
-        const _el$ = $8tj43$getNextElement($74777e8fe65b3dcb$var$_tmpl$);
-        $8tj43$insert(_el$, message);
-        $8tj43$effect(_$p => {
-          var _props$class_list_;
-          return $8tj43$classList(_el$, Object.fromEntries(((_props$class_list_ = props.class_list_) === null || _props$class_list_ === void 0 ? void 0 : _props$class_list_.map(c => [c, true])) || []), _$p);
-        });
-        return _el$;
-      })();
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
 function $8e8b179489080711$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -224,57 +856,6 @@ function $60ec7a29849d81db$export$a71e92cfbb498adc(props) {
     return $8tj43$standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
   });
 }
-const $ca6ab5f08bd28bca$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<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>`, 4);
-function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (() => {
-    const _el$ = $8tj43$getNextElement($ca6ab5f08bd28bca$var$_tmpl$);
-    $8tj43$effect(_p$ => {
-      var _props$width_, _props$height_;
-      const _v$ = (_props$width_ = props.width_) !== null && _props$width_ !== void 0 ? _props$width_ : 14,
-        _v$2 = (_props$height_ = props.height_) !== null && _props$height_ !== void 0 ? _props$height_ : 26;
-      _v$ !== _p$._v$ && $8tj43$setAttribute(_el$, "width", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && $8tj43$setAttribute(_el$, "height", _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-    return _el$;
-  })();
-}
-const $002f09d00aac50b2$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div></div>`, 2);
-function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
-  let {
-    children: children,
-    slider_ref_: slider_ref_,
-    faded_opacity_ = 0.7,
-    mutation_plugins_ = []
-  } = _ref;
-  const slider = new (0, $8tj43$Amazing_Slider)({
-    button_contents: {
-      left: [(() => {
-        const _el$ = $8tj43$getNextElement($002f09d00aac50b2$var$_tmpl$);
-        $8tj43$insert(_el$, $8tj43$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {}));
-        return _el$;
-      })()],
-      right: [(() => {
-        const _el$2 = $8tj43$getNextElement($002f09d00aac50b2$var$_tmpl$);
-        $8tj43$insert(_el$2, $8tj43$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {}));
-        return _el$2;
-      })()]
-    },
-    constructor_plugins: [$8tj43$slider_snap_css().constructor_plugin],
-    mutation_plugins: [$8tj43$slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_, ...mutation_plugins_]
-  });
-  $8tj43$insert(slider.insert_here, children);
-  $8tj43$onCleanup(() => slider.observer.disconnect());
-  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
-  return slider.container;
-}
 const $a61a2051e15c8d7a$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div></div>`, 2);
 const $a61a2051e15c8d7a$var$closing_functions = /*@__PURE__*/new Set();
 const $a61a2051e15c8d7a$export$22970a0140fc759c = /*@__PURE__*/$8tj43$createSignal(false);
@@ -2815,161 +3396,19 @@ function $44aa24b1bb793549$var$modify_only_local_filter(local_filter_object, sel
         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 $cb64b315b25cfc59$export$2f0cbfbb4354bb52(elements) {
-  // FYI this probably doesn't work on hugely deep nestings or large amount of elements
-  return $8tj43$createMemo(() => $cb64b315b25cfc59$var$unwrapping_helper(elements));
-}
-function $cb64b315b25cfc59$var$unwrapping_helper(elements) {
-  const result = [];
-  if (Array.isArray(elements)) for (let i = 0; i < elements.length; i++) {
-    const element = elements[i];
-    result.push(...$cb64b315b25cfc59$var$unwrapping_helper(element));
-  } else if (typeof elements == "function") result.push(...$cb64b315b25cfc59$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
-  return result;
-}
-const $63f1f8dbcd07d3b0$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div></div>`, 2),
-  $63f1f8dbcd07d3b0$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<style type="text/css"></style>`, 2);
-function $63f1f8dbcd07d3b0$export$d21e32dfedac04be(props) {
-  const container_element_ = (() => {
-    const _el$ = $8tj43$getNextElement($63f1f8dbcd07d3b0$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(() => props.element_attributes), false, true);
-    $8tj43$insert(_el$, () => props.children);
-    $8tj43$runHydrationEvents();
-    return _el$;
-  })(); // Don't want this in the error boundary below, it should only be for the actual layouting
-  return $8tj43$createComponent((0, $74777e8fe65b3dcb$export$b69d0d92862de18b), {
-    get message_() {
-      return "Failed calculating " + props.layout + " layout";
-    },
-    severity_: "error",
-    get children() {
-      return $63f1f8dbcd07d3b0$var$ActualSolidLayout(props, container_element_);
-    }
-  });
-}
-function $63f1f8dbcd07d3b0$var$ActualSolidLayout(props, container_element) {
-  // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
-  const show_all_rows = $8tj43$createMemo(() => props.rows === "all");
-  const rows_or_empty_object = $8tj43$createMemo(() => show_all_rows() ? {} : props.rows);
-  const view_more_button_elements = $cb64b315b25cfc59$export$2f0cbfbb4354bb52($8tj43$createMemo(() => rows_or_empty_object().button));
-  const view_less_button_elements = $cb64b315b25cfc59$export$2f0cbfbb4354bb52($8tj43$createMemo(() => rows_or_empty_object().view_less_button));
-  const have_a_view_more_button = $8tj43$createMemo(() => {
-    const button = view_more_button_elements();
-    return !(!button || Array.isArray(button) && !button.length);
-  });
-  const have_a_view_less_button = $8tj43$createMemo(() => {
-    const button = view_less_button_elements();
-    return !(!button || Array.isArray(button) && !button.length);
-  });
-  const [get_styling, set_styling] = $8tj43$createSignal();
-  const container_class = $8tj43$make_random_classname();
-  const selector_beginning = ".depict .".concat(container_class, ">"); // class so ppl can have id if needed
-  const [get_children_count, set_children_count] = $8tj43$createSignal(0);
-  const update_children_count = () => set_children_count(container_element.children.length);
-  const col_styling = $8tj43$createMemo(() => $8tj43$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 = $8tj43$createSignal($8tj43$untrack(() => {
-    var _rows_or_empty_object;
-    return (_rows_or_empty_object = rows_or_empty_object().start_rows) !== null && _rows_or_empty_object !== void 0 ? _rows_or_empty_object : 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 = $8tj43$createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
-  const get_rows_visible = $8tj43$createMemo(() => rows_visible_signal()[0]());
-  const set_rows_visible = $8tj43$createMemo(() => rows_visible_signal()[1]);
-  const view_more_button_class = $8tj43$make_random_classname();
-  const view_less_button_class = $8tj43$make_random_classname();
-  const view_more_button_container = $8tj43$createMemo(() => have_a_view_more_button() && (() => {
-    const _el$2 = $8tj43$getNextElement($63f1f8dbcd07d3b0$var$_tmpl$);
-    $8tj43$addEventListener(_el$2, "click", $8tj43$catchify(() => set_rows_visible()(prev => {
-      var _rows_or_empty_object2;
-      return prev + ((_rows_or_empty_object2 = rows_or_empty_object().rows_per_click) !== null && _rows_or_empty_object2 !== void 0 ? _rows_or_empty_object2 : 1);
-    })), true);
-    $8tj43$className(_el$2, "load-more-container ".concat(view_more_button_class));
-    $8tj43$insert(_el$2, () => rows_or_empty_object().button);
-    $8tj43$runHydrationEvents();
-    return _el$2;
-  })());
-  // 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 = $8tj43$createMemo(() => have_a_view_less_button() && (() => {
-    const _el$3 = $8tj43$getNextElement($63f1f8dbcd07d3b0$var$_tmpl$);
-    $8tj43$addEventListener(_el$3, "click", $8tj43$catchify(() => set_rows_visible()(() => {
-      var _rows_or_empty_object3;
-      return (_rows_or_empty_object3 = rows_or_empty_object().start_rows) !== null && _rows_or_empty_object3 !== void 0 ? _rows_or_empty_object3 : 1;
-    })), true);
-    $8tj43$className(_el$3, "load-less-container ".concat(view_less_button_class));
-    $8tj43$insert(_el$3, () => rows_or_empty_object().view_less_button);
-    $8tj43$runHydrationEvents();
-    return _el$3;
-  })());
-  container_element.classList.add(container_class);
-  $8tj43$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);
-  });
-  $8tj43$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($8tj43$catchify(update_children_count));
-    mutation_observer.observe(container_element, {
-      childList: true
-    });
-    $8tj43$onCleanup(() => mutation_observer.disconnect());
-    set_styling(
-    // this is needed because solid will think that the memo-accessor is a setter function otherwise
-    () => $8tj43$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 = $8tj43$layout_get_visible_recs_without_partial_rows(rows_visible, children_count, options);
-          const visible_recs_next_show_more = $8tj43$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 = $8tj43$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 "".concat($8tj43$layout_media_query_header(min, max), "{").concat(selector_beginning, ":nth-child(n+").concat(visible_recs + 1, "){display:none}").concat(props.layout == "slider" ? "".concat(selector_beginning, ":nth-child(n+").concat(visible_recs, "){margin-right:0}") : "").concat(should_hide_button_final ? ".depict .".concat(view_more_button_class, "{display:none!important}") : "").concat(should_hide_view_less_button ? ".depict .".concat(view_less_button_class, "{display:none!important}") : "", "}");
-      }).join("");
-    }));
-  });
-  return [container_element, $8tj43$memo(view_more_button_container), $8tj43$memo(view_less_button_container), (() => {
-    const _el$4 = $8tj43$getNextElement($63f1f8dbcd07d3b0$var$_tmpl$2);
-    $8tj43$insert(_el$4, get_styling);
-    return _el$4;
-  })()];
+            // 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;
 }
-$8tj43$delegateEvents(["click"]);
 async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_opts) {
   const body = await (0, $8tj43$observer).wait_for_element("body");
   let dispose_and_remove;
@@ -3745,98 +4184,6 @@ function $94af29837186eb21$export$ef6006467f04ee41(_ref) {
   })()];
 }
 $8tj43$delegateEvents(["click"]);
-function $ca55612a53dbbdd2$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, $8tj43$isServer) ? "<!-- ".concat(text, " -->") : document.createComment(text);
-}
-let $bdd80c7862246dc2$var$cached_placeholder_element;
-let $bdd80c7862246dc2$var$rendering_cached_placeholder_element;
-function $bdd80c7862246dc2$export$f33414a4df0afd3f(_ref) {
-  let {
-    product_card_template_: product_card_template_,
-    num_placeholders_: num_placeholders_
-  } = _ref;
-  const [get_elements, set_elements] = $8tj43$createSignal([]);
-  let existing_num = 0;
-  if (0, $8tj43$isServer)
-    // want to render simple placeholders on server, effects don't run there
-    return $8tj43$createMemo(() => Array.from({
-      length: num_placeholders_()
-    }).map(() => {
-      const template_result = product_card_template_(null, undefined);
-      // @ts-ignore
-      if (typeof (template_result === null || template_result === void 0 ? void 0 : template_result.then) !== "function") return template_result;
-    }));
-  $8tj43$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(() => $bdd80c7862246dc2$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 $bdd80c7862246dc2$var$Placeholder(_ref2) {
-  let {
-    product_card_template_: product_card_template_
-  } = _ref2;
-  const get_cloned_placeholders = function () {
-    let element_to_clone = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : $bdd80c7862246dc2$var$cached_placeholder_element;
-    return Array.isArray(element_to_clone) ? element_to_clone.map(el => el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
-  };
-  if ($bdd80c7862246dc2$var$cached_placeholder_element) return get_cloned_placeholders();
-  let dispose_original_copy;
-  const get_unwrapped_element = $8tj43$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] = $8tj43$createResource(() => {
-      if ($bdd80c7862246dc2$var$rendering_cached_placeholder_element) return $bdd80c7862246dc2$var$rendering_cached_placeholder_element;
-      const return_value = product_card_template_(null, undefined);
-      if (typeof return_value === "object" && typeof (return_value === null || return_value === void 0 ? void 0 : return_value.then) === "function")
-        // Is Promise or promise-like object
-        $bdd80c7862246dc2$var$rendering_cached_placeholder_element = return_value;
-      return return_value;
-    });
-    return $8tj43$createMemo(() => {
-      if (resource.loading) return () => [];
-      return $cb64b315b25cfc59$export$2f0cbfbb4354bb52(resource);
-    });
-  });
-  $8tj43$onCleanup(() => {
-    if ($bdd80c7862246dc2$var$rendering_cached_placeholder_element) {
-      var _rendering_cached_pla;
-      // 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();
-        $bdd80c7862246dc2$var$rendering_cached_placeholder_element = undefined;
-      };
-      (_rendering_cached_pla = $bdd80c7862246dc2$var$rendering_cached_placeholder_element) === null || _rendering_cached_pla === void 0 || _rendering_cached_pla.then(unset_current_rendering, unset_current_rendering);
-    } else
-      // Otherwise, just make sure we've disposed our root
-      dispose_original_copy();
-  });
-  return $8tj43$createMemo(() => {
-    const unwrapped_array = get_unwrapped_element()();
-    if (!(unwrapped_array !== null && unwrapped_array !== void 0 && 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
-    $bdd80c7862246dc2$var$cached_placeholder_element || ($bdd80c7862246dc2$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
-    $bdd80c7862246dc2$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.
@@ -3945,87 +4292,6 @@ function $e6dd9dfff4603d8c$export$63dd0350f8559dda(_ref) {
     equals: false
   });
 }
-
-/**
- * Gets product_id (the thing we key the rendering on) from a display
- */
-function $6a4c7ed6d005505c$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 $2d7bad8684bc7f44$export$7f8bd308237ab5a5(get_displays_) {
-  const displays_by_key_ = $8tj43$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 = $6a4c7ed6d005505c$export$548d053aba053d79(display);
-      map.set(product_id, display);
-    }
-    return map;
-  });
-  return displays_by_key_;
-}
-function $2d7bad8684bc7f44$export$43f0fb951fcb0c54(_ref) {
-  let {
-    displays_by_key_: displays_by_key_,
-    merchant_: merchant_,
-    market_: market_,
-    product_card_template_: product_card_template_,
-    do_per_elements_: do_per_elements_
-  } = _ref;
-  return $8tj43$createComponent((0, $8tj43$For), {
-    get each() {
-      return [...displays_by_key_().keys()];
-    },
-    children: (product_id, index) => {
-      const owner = $8tj43$getOwner();
-      const display_accessor = $8tj43$createMemo(() => displays_by_key_().get(product_id));
-      const [product_card_resource] = $8tj43$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 => $8tj43$runWithOwner(owner, () => $8tj43$createEffect(() => fn(index()))),
-          merchant: $8tj43$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: $8tj43$untrack(market_)
-        });
-      });
-      const node_accessor = $cb64b315b25cfc59$export$2f0cbfbb4354bb52(product_card_resource);
-      $8tj43$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_ === null || do_per_elements_ === void 0 || do_per_elements_(elements, index);
-      });
-      return product_card_resource; // https://github.com/solidjs/solid/releases/tag/v1.7.0
-    }
-  });
-}
-
 function $45a8953d760b5e58$export$a1fd619a4743ca08(_ref) {
   let {
     plp_results_: plp_results_,
@@ -6469,45 +6735,6 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
     return _el$13;
   })()];
 }
-const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
-  const cols_at_size = [];
-  for (let i = 0; i < sorted_cols_at_size.length; i++) {
-    var _sorted_cols_at_size;
-    const [nb_cols, width] = sorted_cols_at_size[i];
-    const next_width = (_sorted_cols_at_size = sorted_cols_at_size[i + 1]) === null || _sorted_cols_at_size === void 0 ? void 0 : _sorted_cols_at_size[1];
-    const max_width = i === 0 ? "" : "".concat(width, "px");
-    const min_width = next_width !== undefined ? "".concat(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 $a9c7ba6087881ac2$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(_ref => {
-    let [_, width] = _ref;
-    return 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 ? "".concat(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 $a9c7ba6087881ac2$var$transform_elements(sorted_cols_at_size);
-};
 function $83e8cf2c0b87a58a$export$23fca46f3143581f(component, error_message) {
   const component_in_error_boundary = do_with_elements => {
     const error_boundary_wrapped = $74777e8fe65b3dcb$export$b69d0d92862de18b({
@@ -7028,7 +7255,7 @@ class $f5f54892fd0c7d9f$export$f34314aa9505732e {
  */
 var $f5f54892fd0c7d9f$var$_keys_constructed_with = {
   writable: true,
-  value: new Set()
+  value: /*@__PURE__*/new Set()
 };
 function $f5f54892fd0c7d9f$export$e2bf8ce7779e827e(props) {
   const {
@@ -10321,38 +10548,6 @@ function $37e8c97bb6876197$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 $3f7203368ad0d3ca$export$ff7109b9b2b206ba(sdk_cols_at_size) {
-  let min_width_for_more_than_one_column = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
-  if (!sdk_cols_at_size.length) return sdk_cols_at_size;
-  const sorted_sizes = sdk_cols_at_size.map(_ref => {
-    let [cols, max_width] = _ref;
-    return [cols, max_width !== null && max_width !== void 0 ? max_width : Infinity];
-  }).sort((_ref2, _ref3) => {
-    let [, a] = _ref2;
-    let [, b] = _ref3;
-    return 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(_ref4 => {
-    let [cols, max_width] = _ref4;
-    return max_width == Infinity ? [cols] : [cols, max_width];
-  });
-}
 const $eb064bc3350276c1$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class="depict plp search"></div>`, 2);
 function $eb064bc3350276c1$var$_classPrivateFieldInitSpec(obj, privateMap, value) {
   $eb064bc3350276c1$var$_checkPrivateRedeclaration(obj, privateMap);
@@ -10678,7 +10873,7 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
 }
 var $eb064bc3350276c1$var$_keys_constructed_with = {
   writable: true,
-  value: new Set()
+  value: /*@__PURE__*/new Set()
 };
 function $eb064bc3350276c1$var$get_shared_properties(depict_search) {
   const shared_properties = $eb064bc3350276c1$var$privately_shared_properties.get(depict_search);
@@ -11051,7 +11246,7 @@ class $f9fd3017c20b774a$export$3ccaa27d81dd8556 extends EventTarget {
     });
     $f9fd3017c20b774a$var$_classPrivateFieldInitSpec(this, $f9fd3017c20b774a$var$_unload, {
       writable: true,
-      value: $8tj43$catchify(() => {
+      value: /*@__PURE__*/$8tj43$catchify(() => {
         var _classPrivateFieldGet3;
         if (!$8tj43$babelruntimehelpersclassPrivateFieldGet(this, $f9fd3017c20b774a$var$_is_open)) return;
         (_classPrivateFieldGet3 = $8tj43$babelruntimehelpersclassPrivateFieldGet(this, $f9fd3017c20b774a$var$_disconnect_observer)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.call(this);
@@ -11065,7 +11260,7 @@ class $f9fd3017c20b774a$export$3ccaa27d81dd8556 extends EventTarget {
     });
     $f9fd3017c20b774a$var$_classPrivateFieldInitSpec(this, $f9fd3017c20b774a$var$_load, {
       writable: true,
-      value: $8tj43$catchify(async els => {
+      value: /*@__PURE__*/$8tj43$catchify(async els => {
         $8tj43$babelruntimehelpersclassPrivateFieldSet(this, $f9fd3017c20b774a$var$_is_open, true);
         // So that #load doesn't get called again
         let set_should_stay_inserted;
@@ -11193,7 +11388,7 @@ var $f9fd3017c20b774a$var$_reverting_permitted = {
 };
 var $f9fd3017c20b774a$var$_visited_urls = {
   writable: true,
-  value: (() => {
+  value: /*@__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).
     $8tj43$catchify(async () => {
       // Static initialization blocks aren't supported in MobileSafari yet, otherwise this would be one.
@@ -11215,4 +11410,4 @@ const $d399250dfa491636$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $d399250dfa491636$export$864d304a0bc46829 = "2%";
 const $d399250dfa491636$export$7bf543b9d9be2c22 = (0, $fa332ea03168857c$export$b91cec6bdc6b32a1);
 $8tj43$add_to_version_info("ui", (0, $8db9a15135765c11$export$83d89fbfd8236492));
-export { $56047603f9d212b6$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $56047603f9d212b6$export$e6fffe67d4cdd848 as makeSizeAccessor, $801e8845d3fa3653$export$94026ee33dbabc26 as ImageContainer, $74777e8fe65b3dcb$export$b69d0d92862de18b as SentryErrorBoundary, $ad371564683947ab$export$6c6d7a51fa9aa15d as ExpandingDetails, $e18ab2868df26f40$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $4711a82d08d2021b$export$fecbb157621501bd as SelectedFilters, $f6b0500577e1b210$export$3f1a388cc0d8fed7 as FilterBody, $44aa24b1bb793549$export$b288c38ae3fddb56 as create_modified_filters, $63f1f8dbcd07d3b0$export$d21e32dfedac04be as SolidLayout, $d5f1e6a0f9117286$export$79b1565500412d9b as general_modal_abstraction, $9783d437ad61594c$export$3b621d86b1566b2 as CrossIcon, $ca6ab5f08bd28bca$export$8be2714ec7f169ee as GenericSliderArrowButton, $5c5732ef44f05b26$export$58e808b1db15d3bc as fetchDepictRecommendations, $f5f54892fd0c7d9f$export$de035477d6fef996 as QuickLinks, $f5f54892fd0c7d9f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $fa332ea03168857c$export$b91cec6bdc6b32a1 as CategoryTitle, $702d7656a373973e$export$824dde41348efed1 as embedded_num_products, $96fd967c5b358ead$export$643598a327b5833e as get_categories, $f5f54892fd0c7d9f$export$f34314aa9505732e as DepictCategory, $f5f54892fd0c7d9f$export$e2bf8ce7779e827e as CategoryPage, $eb064bc3350276c1$export$ac6237957a15b3f0 as DepictSearch, $eb064bc3350276c1$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $eb064bc3350276c1$export$f2dc7e4e4aa11abb as SearchPage, $eb064bc3350276c1$export$316f6f283ae64765 as SearchField, $f3b7124b76123e44$export$aa14a9f43128f61f as ProductCardError, $169c13c0531d91d2$export$d86a33413558014e as open_modal_with_alignment, $5eaa00b951637e96$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $1308a7816c3d4f2d$export$b3ad617e9036868 as align_field, $a9c7ba6087881ac2$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $cc64aabf2c7a1f1a$export$1233ca167bf71f9a as styles_to_valid_css_string, $e56d241d0f33d459$export$fe334901e8bebd57 as disable_scrolling, $573c007c697a1831$export$d0596b5cae35ad4 as open_search_with_shift_slash, $284849364a6ef73a$export$e015ed2f2950f2e3 as DepictAPI, $00a5b94f0c11efbb$export$d9f36cf74e24d595 as media_query_to_accessor, $e60a76195ac6d408$export$689e204eadb33baf as setup_fast_leave, $a61a2051e15c8d7a$export$5196e4c01fa56fcb as show_toast, $60ec7a29849d81db$export$a71e92cfbb498adc as SolidFormatPrice, $37e8c97bb6876197$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $bc2337c9a05ecd18$export$acb3eaade4b23afd as BasePlaceholder, $ceafb6fb91c6f394$export$89c6019e4baa40b1 as TextPlaceholder, $3ab4aa97880fb88d$export$3f37af283f8fb843 as ImagePlaceholder, $f9fd3017c20b774a$export$3ccaa27d81dd8556 as PageReplacer, $d399250dfa491636$export$864d304a0bc46829 as defaultGridSpacing, $d399250dfa491636$export$c3834fa86c616831 as defaultColsAtSize, $d399250dfa491636$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $8db9a15135765c11$export$83d89fbfd8236492 as version };
+export { $d5d7e58c5c9d8db0$export$9574e176201e5e8d as RecommendationSlider, $b432b11321ad4c97$export$9756467d34d91cdb as RecommendationGrid, $56047603f9d212b6$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $56047603f9d212b6$export$e6fffe67d4cdd848 as makeSizeAccessor, $801e8845d3fa3653$export$94026ee33dbabc26 as ImageContainer, $74777e8fe65b3dcb$export$b69d0d92862de18b as SentryErrorBoundary, $ad371564683947ab$export$6c6d7a51fa9aa15d as ExpandingDetails, $e18ab2868df26f40$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $4711a82d08d2021b$export$fecbb157621501bd as SelectedFilters, $f6b0500577e1b210$export$3f1a388cc0d8fed7 as FilterBody, $44aa24b1bb793549$export$b288c38ae3fddb56 as create_modified_filters, $63f1f8dbcd07d3b0$export$d21e32dfedac04be as SolidLayout, $d5f1e6a0f9117286$export$79b1565500412d9b as general_modal_abstraction, $9783d437ad61594c$export$3b621d86b1566b2 as CrossIcon, $ca6ab5f08bd28bca$export$8be2714ec7f169ee as GenericSliderArrowButton, $5c5732ef44f05b26$export$58e808b1db15d3bc as fetchDepictRecommendations, $f5f54892fd0c7d9f$export$de035477d6fef996 as QuickLinks, $f5f54892fd0c7d9f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $fa332ea03168857c$export$b91cec6bdc6b32a1 as CategoryTitle, $702d7656a373973e$export$824dde41348efed1 as embedded_num_products, $96fd967c5b358ead$export$643598a327b5833e as get_categories, $f5f54892fd0c7d9f$export$f34314aa9505732e as DepictCategory, $f5f54892fd0c7d9f$export$e2bf8ce7779e827e as CategoryPage, $eb064bc3350276c1$export$ac6237957a15b3f0 as DepictSearch, $eb064bc3350276c1$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $eb064bc3350276c1$export$f2dc7e4e4aa11abb as SearchPage, $eb064bc3350276c1$export$316f6f283ae64765 as SearchField, $f3b7124b76123e44$export$aa14a9f43128f61f as ProductCardError, $169c13c0531d91d2$export$d86a33413558014e as open_modal_with_alignment, $5eaa00b951637e96$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $1308a7816c3d4f2d$export$b3ad617e9036868 as align_field, $a9c7ba6087881ac2$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $cc64aabf2c7a1f1a$export$1233ca167bf71f9a as styles_to_valid_css_string, $e56d241d0f33d459$export$fe334901e8bebd57 as disable_scrolling, $573c007c697a1831$export$d0596b5cae35ad4 as open_search_with_shift_slash, $284849364a6ef73a$export$e015ed2f2950f2e3 as DepictAPI, $00a5b94f0c11efbb$export$d9f36cf74e24d595 as media_query_to_accessor, $e60a76195ac6d408$export$689e204eadb33baf as setup_fast_leave, $a61a2051e15c8d7a$export$5196e4c01fa56fcb as show_toast, $60ec7a29849d81db$export$a71e92cfbb498adc as SolidFormatPrice, $37e8c97bb6876197$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $bc2337c9a05ecd18$export$acb3eaade4b23afd as BasePlaceholder, $ceafb6fb91c6f394$export$89c6019e4baa40b1 as TextPlaceholder, $3ab4aa97880fb88d$export$3f37af283f8fb843 as ImagePlaceholder, $f9fd3017c20b774a$export$3ccaa27d81dd8556 as PageReplacer, $d399250dfa491636$export$864d304a0bc46829 as defaultGridSpacing, $d399250dfa491636$export$c3834fa86c616831 as defaultColsAtSize, $d399250dfa491636$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $8db9a15135765c11$export$83d89fbfd8236492 as version };