@depict-ai/ui 1.4.24 → 2.0.0

package/latest/index.js

@@ -1,12 +1,11 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, catchify as $9HbP8$catchify, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, is_safari as $9HbP8$is_safari, observer as $9HbP8$observer, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $9HbP8$add_to_version_info, slider_fractional_factory as $9HbP8$slider_fractional_factory, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, catchify as $9HbP8$catchify, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, observer as $9HbP8$observer, is_safari as $9HbP8$is_safari, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, createComponent as $9HbP8$createComponent, mergeProps as $9HbP8$mergeProps, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, effect as $9HbP8$effect, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, getNextMarker as $9HbP8$getNextMarker, style as $9HbP8$style, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use } from "solid-js/web";
-import { createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createSignal as $9HbP8$createSignal, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, onCleanup as $9HbP8$onCleanup, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction } from "solid-js";
-import { slider_fractional_factory as $9HbP8$slider_fractional_factory } from "@depict-ai/utilishared/latest/latest";
+import { createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createSignal as $9HbP8$createSignal, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, onCleanup as $9HbP8$onCleanup, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createUniqueId as $9HbP8$createUniqueId, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction } from "solid-js";
 
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "1.4.24";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.0";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -65,7 +64,9 @@ function $1848f7cca286fbab$export$ff7109b9b2b206ba(sdk_cols_at_size, min_width_f
 }
 function $a458486f22b22f63$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, $9HbP8$isServer) ? `<!-- ${text} -->` : document.createComment(text);
+  return (0, $9HbP8$isServer) ? {
+    t: `<!-- ${text} -->`
+  } : document.createComment(text);
 }
 function $a52235d12ccf9c88$export$2f0cbfbb4354bb52(elements) {
   // FYI this probably doesn't work on hugely deep nestings or large amount of elements
@@ -280,9 +281,14 @@ function $b7436a6d1fd64e3b$export$b69d0d92862de18b(props) {
 const $c8d5ff4524619fcd$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div></div>`, 2),
   $c8d5ff4524619fcd$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<style type="text/css"></style>`, 2);
 function $c8d5ff4524619fcd$export$d21e32dfedac04be(props) {
+  const container_class = "x" + $9HbP8$createUniqueId();
   const container_element_ = (() => {
     const _el$ = $9HbP8$getNextElement($c8d5ff4524619fcd$var$_tmpl$);
-    $9HbP8$spread(_el$, $9HbP8$mergeProps(() => props.element_attributes), false, true);
+    $9HbP8$spread(_el$, $9HbP8$mergeProps(() => props.element_attributes, {
+      "classList": {
+        [container_class]: true
+      }
+    }), false, true);
     $9HbP8$insert(_el$, () => props.children);
     $9HbP8$runHydrationEvents();
     return _el$;
@@ -293,11 +299,16 @@ function $c8d5ff4524619fcd$export$d21e32dfedac04be(props) {
     },
     severity_: "error",
     get children() {
-      return $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element_);
+      return $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element_, false, container_class);
     }
   });
 }
-function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, insert_after_container = false) {
+function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, insert_after_container = false, container_class) {
+  if (!container_class) {
+    // only try to add if it wasn't provided, so that we have a code path without classList when doing SSR
+    container_class = $9HbP8$make_random_classname();
+    container_element.classList.add(container_class);
+  }
   // Copy of Layout from utilishared but using solid-js signals instead of async iterable IPNS
   const show_all_rows = $9HbP8$createMemo(() => props.rows === "all");
   const rows_or_empty_object = $9HbP8$createMemo(() => show_all_rows() ? {} : props.rows);
@@ -312,46 +323,41 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
     return !(!button || Array.isArray(button) && !button.length);
   });
   const [get_styling, set_styling] = $9HbP8$createSignal();
-  const container_class = $9HbP8$make_random_classname();
   const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
   const [get_children_count, set_children_count] = $9HbP8$createSignal(0);
-  const update_children_count = () => set_children_count(container_element.children.length);
+  const update_children_count = () => (0, $9HbP8$isServer) ? 20 : set_children_count(container_element.children.length);
   const col_styling = $9HbP8$createMemo(() => $9HbP8$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 = $9HbP8$createSignal($9HbP8$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 = $9HbP8$createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
   const get_rows_visible = $9HbP8$createMemo(() => rows_visible_signal()[0]());
   const set_rows_visible = $9HbP8$createMemo(() => rows_visible_signal()[1]);
-  const view_more_button_class = $9HbP8$make_random_classname();
-  const view_less_button_class = $9HbP8$make_random_classname();
-  const style_element = (() => {
-    const _el$2 = $9HbP8$getNextElement($c8d5ff4524619fcd$var$_tmpl$2);
-    $9HbP8$insert(_el$2, get_styling);
-    return _el$2;
-  })();
+  const view_more_button_class = "m" + $9HbP8$createUniqueId();
+  const view_less_button_class = "l" + $9HbP8$createUniqueId(); //  https://github.com/solidjs/solid-docs/issues/263#issuecomment-1622388079
   const view_more_button_container = $9HbP8$createMemo(() => have_a_view_more_button() && (() => {
-    const _el$3 = $9HbP8$getNextElement($c8d5ff4524619fcd$var$_tmpl$);
-    $9HbP8$addEventListener(_el$3, "click", $9HbP8$catchify(() => set_rows_visible()(prev => prev + (rows_or_empty_object().rows_per_click ?? 1))), true);
-    $9HbP8$className(_el$3, `load-more-container ${view_more_button_class}`);
-    $9HbP8$insert(_el$3, () => rows_or_empty_object().button);
+    const _el$2 = $9HbP8$getNextElement($c8d5ff4524619fcd$var$_tmpl$);
+    $9HbP8$addEventListener(_el$2, "click", $9HbP8$catchify(() => set_rows_visible()(prev => prev + (rows_or_empty_object().rows_per_click ?? 1))), true);
+    $9HbP8$className(_el$2, `load-more-container ${view_more_button_class}`);
+    $9HbP8$insert(_el$2, () => rows_or_empty_object().button);
     $9HbP8$runHydrationEvents();
-    return _el$3;
+    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 = $9HbP8$createMemo(() => have_a_view_less_button() && (() => {
-    const _el$4 = $9HbP8$getNextElement($c8d5ff4524619fcd$var$_tmpl$);
-    $9HbP8$addEventListener(_el$4, "click", $9HbP8$catchify(() => set_rows_visible()(() => rows_or_empty_object().start_rows ?? 1)), true);
-    $9HbP8$className(_el$4, `load-less-container ${view_less_button_class}`);
-    $9HbP8$insert(_el$4, () => rows_or_empty_object().view_less_button);
+    const _el$3 = $9HbP8$getNextElement($c8d5ff4524619fcd$var$_tmpl$);
+    $9HbP8$addEventListener(_el$3, "click", $9HbP8$catchify(() => set_rows_visible()(() => rows_or_empty_object().start_rows ?? 1)), true);
+    $9HbP8$className(_el$3, `load-less-container ${view_less_button_class}`);
+    $9HbP8$insert(_el$3, () => rows_or_empty_object().view_less_button);
     $9HbP8$runHydrationEvents();
-    return _el$4;
+    return _el$3;
   })());
-  container_element.classList.add(container_class);
+  const [force_style_update, set_force_style_update] = $9HbP8$createSignal("");
   $9HbP8$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);
   });
+  $9HbP8$createEffect(() => set_force_style_update(" ")); // force style update after hydration due to https://discord.com/channels/722131463138705510/722167424186843267/1151544212517552168
   $9HbP8$createRenderEffect(() => {
     // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
     if (show_all_rows()) {
@@ -360,11 +366,13 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
       return;
     }
     update_children_count();
-    const mutation_observer = new MutationObserver($9HbP8$catchify(update_children_count));
-    mutation_observer.observe(container_element, {
-      childList: true
-    });
-    $9HbP8$onCleanup(() => mutation_observer.disconnect());
+    if (!(0, $9HbP8$isServer)) {
+      const mutation_observer = new MutationObserver($9HbP8$catchify(update_children_count));
+      mutation_observer.observe(container_element, {
+        childList: true
+      });
+      $9HbP8$onCleanup(() => mutation_observer.disconnect());
+    }
     set_styling(
     // this is needed because solid will think that the memo-accessor is a setter function otherwise
     () => $9HbP8$createMemo(() => {
@@ -375,7 +383,7 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
       } = 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 => {
+      return force_style_update() + col_styling() + props.cols_at_size.map(options => {
         const [recs_per_row, min, max] = options;
         let should_hide_view_more_button;
         let visible_recs;
@@ -396,6 +404,11 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
       }).join("");
     }));
   });
+  const style_element = (() => {
+    const _el$4 = $9HbP8$getNextElement($c8d5ff4524619fcd$var$_tmpl$2);
+    $9HbP8$insert(_el$4, get_styling);
+    return _el$4;
+  })(); // need to create this after set_styling has been called or else there will be no styling in the SSR'd output
   if (insert_after_container) container_element.after(style_element);
   return [container_element, $9HbP8$memo(view_more_button_container), $9HbP8$memo(view_less_button_container), style_element];
 }
@@ -423,18 +436,26 @@ function $f32e14878e75af51$export$6649caad96ef8870({
   slider_ref_: slider_ref_,
   faded_opacity_ = 0.7,
   mutation_plugins_ = [],
-  disable_fading_: disable_fading_
+  disable_fading_: disable_fading_,
+  arrow_width_: arrow_width_,
+  arrow_height_: arrow_height_
 }) {
   const slider = new (0, $9HbP8$Amazing_Slider)({
     button_contents: {
       left: [(() => {
         const _el$ = $9HbP8$getNextElement($f32e14878e75af51$var$_tmpl$);
-        $9HbP8$insert(_el$, $9HbP8$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {}));
+        $9HbP8$insert(_el$, $9HbP8$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
+          height_: arrow_height_,
+          width_: arrow_width_
+        }));
         return _el$;
       })()],
       right: [(() => {
         const _el$2 = $9HbP8$getNextElement($f32e14878e75af51$var$_tmpl$);
-        $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {}));
+        $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
+          height_: arrow_height_,
+          width_: arrow_width_
+        }));
         return _el$2;
       })()]
     },
@@ -459,6 +480,8 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
   const is_showing_something = $9HbP8$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const num_placeholders_ = () => 20;
   const slider = $9HbP8$createComponent((0, $f32e14878e75af51$export$6649caad96ef8870), {
+    arrow_height_: 25,
+    arrow_width_: 12.5,
     disable_fading_: true,
     slider_ref_: slider => {
       const {
@@ -503,34 +526,66 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
     children: slider
   });
 }
+function $16b52438165aafe2$export$23fca46f3143581f(component, error_message) {
+  const component_in_error_boundary = do_with_elements => {
+    const error_boundary_wrapped = $b7436a6d1fd64e3b$export$b69d0d92862de18b({
+      severity_: "error",
+      message_: error_message,
+      get children() {
+        const elements = component();
+        do_with_elements?.(elements);
+        return elements;
+      }
+    });
+    // This might return an accessor, in that case we need to "unwrap" it since our SDK consumers expect HTML elements or arrays thereof
+    if (typeof error_boundary_wrapped === "function")
+      // @ts-ignore
+      return error_boundary_wrapped();
+    // On the server it returns a string, so we just return that
+    return error_boundary_wrapped;
+  };
+  const owner = $9HbP8$getOwner();
+  if (owner == null) return $9HbP8$createRoot(dispose => {
+    // if we're not already run in a root, create a root and automatically dispose it when the first returned element is removed from the DOM
+    return component_in_error_boundary(elements => {
+      const have_multiple = Array.isArray(elements);
+      if (have_multiple ? !elements?.length : !elements) return;
+      (0, $9HbP8$observer).onremoved(have_multiple ? elements[0] : elements, dispose);
+    });
+  });else
+    // we're already in a root so cleanups are handled
+    return component_in_error_boundary();
+}
 const $ee116da074deb002$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class="depict recommendations"></div>`, 2);
 function $ee116da074deb002$export$9574e176201e5e8d(props) {
-  const grid_spacing_override = $9HbP8$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_] = $9HbP8$createResource(() => props.recommendations, recs => recs);
-  return (() => {
-    const _el$ = $9HbP8$getNextElement($ee116da074deb002$var$_tmpl$);
-    $9HbP8$insert(_el$, () => $c4492d24952ed731$export$d41d19e89346fa2({
-      product_card_template_: (...args) => props.product_card_template(...args),
-      recommendations_resource_: recommendations_resource_,
-      market_: () => props.market,
-      merchant_: () => props.merchant,
-      layout_options_: $9HbP8$createMemo(() => ({
-        cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77($1848f7cca286fbab$export$ff7109b9b2b206ba(props.cols_at_size)),
-        ...grid_spacing_override()
-      }))
-    }));
-    return _el$;
-  })();
+  return $16b52438165aafe2$export$23fca46f3143581f(() => {
+    const grid_spacing_override = $9HbP8$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_] = $9HbP8$createResource(() => props.recommendations, recs => recs);
+    return (() => {
+      const _el$ = $9HbP8$getNextElement($ee116da074deb002$var$_tmpl$);
+      $9HbP8$insert(_el$, () => $c4492d24952ed731$export$d41d19e89346fa2({
+        product_card_template_: (...args) => props.product_card_template(...args),
+        recommendations_resource_: recommendations_resource_,
+        market_: () => props.market,
+        merchant_: () => props.merchant,
+        layout_options_: $9HbP8$createMemo(() => ({
+          cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77($1848f7cca286fbab$export$ff7109b9b2b206ba(props.cols_at_size)),
+          ...grid_spacing_override()
+        }))
+      }));
+      return _el$;
+    })();
+  }, "RecommendationSlider failed");
 }
 const $3da8afe3ed57cf34$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class="recommendation-grid"><!#><!/><!#><!/></div>`, 6);
 function $3da8afe3ed57cf34$export$7da560f849543dff({
@@ -593,46 +648,48 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
 const $9ea5383493360761$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class="show-more major" type="button"></button>`, 2),
   $9ea5383493360761$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class="depict plp recommendations"></div>`, 2);
 function $9ea5383493360761$export$9756467d34d91cdb(props) {
-  const rows_object_ = $9HbP8$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$ = $9HbP8$getNextElement($9ea5383493360761$var$_tmpl$);
-        $9HbP8$insert(_el$, () => view_more_button.text);
-        return _el$;
-      })()
-    };
-  });
-  const grid_spacing_override = $9HbP8$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_] = $9HbP8$createResource(() => props.recommendations, recs => recs);
-  return (() => {
-    const _el$2 = $9HbP8$getNextElement($9ea5383493360761$var$_tmpl$2);
-    $9HbP8$insert(_el$2, () => $3da8afe3ed57cf34$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_: $9HbP8$createMemo(() => ({
-        cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77($1848f7cca286fbab$export$ff7109b9b2b206ba(props.cols_at_size)),
-        ...grid_spacing_override()
-      }))
-    }));
-    return _el$2;
-  })();
+  return $16b52438165aafe2$export$23fca46f3143581f(() => {
+    const rows_object_ = $9HbP8$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 ?? 2,
+        button: (() => {
+          const _el$ = $9HbP8$getNextElement($9ea5383493360761$var$_tmpl$);
+          $9HbP8$insert(_el$, () => view_more_button.text);
+          return _el$;
+        })()
+      };
+    });
+    const grid_spacing_override = $9HbP8$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_] = $9HbP8$createResource(() => props.recommendations, recs => recs);
+    return (() => {
+      const _el$2 = $9HbP8$getNextElement($9ea5383493360761$var$_tmpl$2);
+      $9HbP8$insert(_el$2, () => $3da8afe3ed57cf34$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_: $9HbP8$createMemo(() => ({
+          cols_at_size: $b5cccc8ee7d24677$export$6daf8749b65a1b77($1848f7cca286fbab$export$ff7109b9b2b206ba(props.cols_at_size)),
+          ...grid_spacing_override()
+        }))
+      }));
+      return _el$2;
+    })();
+  }, "RecommendationGrid failed");
 }
 const $e8ffe11ed01df0fe$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<img>`, 1);
 function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
@@ -1304,7 +1361,7 @@ const $87c712b5b33f24f7$export$48513f6b9f8ce62d = props => {
   const label = $9HbP8$createMemo(() => props.label_);
   const checked = $9HbP8$createMemo(() => props.checked_);
   const value = $9HbP8$createMemo(() => props.value_);
-  const is_count_zero = $9HbP8$createMemo(() => props.is_count_zero_);
+  const is_count_zero = $9HbP8$createMemo(() => props.is_count_zero_ || count() === 0);
   const id = $9HbP8$make_random_classname();
   return (/* We can't use actual margin because ExpandingContainer gets messed up */(() => {
       const _el$ = $9HbP8$getNextElement($87c712b5b33f24f7$var$_tmpl$2),
@@ -1340,14 +1397,17 @@ const $87c712b5b33f24f7$export$48513f6b9f8ce62d = props => {
         }
       }), _el$8, _co$);
       $9HbP8$effect(_p$ => {
-        const _v$ = !!(is_count_zero() || count() === 0),
-          _v$2 = value();
+        const _v$ = !!is_count_zero(),
+          _v$2 = value(),
+          _v$3 = !checked() && is_count_zero();
         _v$ !== _p$._v$ && _el$.classList.toggle("count-0", _p$._v$ = _v$);
         _v$2 !== _p$._v$2 && $9HbP8$setAttribute(_el$3, "name", _p$._v$2 = _v$2);
+        _v$3 !== _p$._v$3 && (_el$3.disabled = _p$._v$3 = _v$3);
         return _p$;
       }, {
         _v$: undefined,
-        _v$2: undefined
+        _v$2: undefined,
+        _v$3: undefined
       });
       $9HbP8$effect(() => _el$3.checked = checked());
       return _el$;
@@ -2184,6 +2244,7 @@ function $1c8cac76cb67e9af$var$render_stuff(data, existing_filter, i18n_) {
                           return $9HbP8$createMemo(() => value()?.is_expanded_?.ui_should_show_expanded_?.() ?? false);
                         }
                       }), _el$16, _co$5);
+                      $9HbP8$effect(() => _el$14.classList.toggle("count-0", !!(value()?.count_ === 0)));
                       return _el$12;
                     })();
                   },
@@ -2375,7 +2436,8 @@ function $1c8cac76cb67e9af$var$expand_until_choice(data_structure) {
   });
 }
 const $93716a9ad0dea854$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class="checkbox-grid"></div>`, 2),
-  $93716a9ad0dea854$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<button class="major-minor-transition"></button>`, 2);
+  $93716a9ad0dea854$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<span class="count-wrapper"><span class="count"></span></span>`, 4),
+  $93716a9ad0dea854$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<button class="major-minor-transition"><!#><!/><!#><!/></button>`, 6);
 const $93716a9ad0dea854$export$414f6a19d38e655c = ({
   filter_: filter_,
   selected_filters_: [get_selected_filters, set_selected_filters]
@@ -2407,7 +2469,11 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
       children: value => {
         const is_selected = $9HbP8$createMemo(() => existing_filter()?.data?.includes(value().value_));
         return (() => {
-          const _el$2 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$2);
+          const _el$2 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$3),
+            _el$5 = _el$2.firstChild,
+            [_el$6, _co$] = $9HbP8$getNextMarker(_el$5.nextSibling),
+            _el$7 = _el$6.nextSibling,
+            [_el$8, _co$2] = $9HbP8$getNextMarker(_el$7.nextSibling);
           $9HbP8$addEventListener(_el$2, "click", $9HbP8$catchify(() => {
             const set_filter = existing_filter();
             const {
@@ -2428,16 +2494,30 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
             const selected_filters = [...get_selected_filters().filter(f => f !== set_filter), ...(new_filter_object.data.length ? [new_filter_object] : [])];
             set_selected_filters(selected_filters);
           }), true);
-          $9HbP8$insert(_el$2, () => value().value_);
+          $9HbP8$insert(_el$2, () => value().value_, _el$6, _co$);
+          $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
+            get when() {
+              return value().count_ != undefined;
+            },
+            get children() {
+              const _el$3 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$2),
+                _el$4 = _el$3.firstChild;
+              $9HbP8$insert(_el$4, () => value().count_);
+              return _el$3;
+            }
+          }), _el$8, _co$2);
           $9HbP8$effect(_p$ => {
-            const _v$ = !is_selected(),
-              _v$2 = !!is_selected();
-            _v$ !== _p$._v$ && _el$2.classList.toggle("minor", _p$._v$ = _v$);
-            _v$2 !== _p$._v$2 && _el$2.classList.toggle("major", _p$._v$2 = _v$2);
+            const _v$ = value().count_ === 0 && !is_selected(),
+              _v$2 = !is_selected(),
+              _v$3 = !!is_selected();
+            _v$ !== _p$._v$ && (_el$2.disabled = _p$._v$ = _v$);
+            _v$2 !== _p$._v$2 && _el$2.classList.toggle("minor", _p$._v$2 = _v$2);
+            _v$3 !== _p$._v$3 && _el$2.classList.toggle("major", _p$._v$3 = _v$3);
             return _p$;
           }, {
             _v$: undefined,
-            _v$2: undefined
+            _v$2: undefined,
+            _v$3: undefined
           });
           $9HbP8$runHydrationEvents();
           return _el$2;
@@ -6263,35 +6343,6 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     return _el$13;
   })()];
 }
-function $16b52438165aafe2$export$23fca46f3143581f(component, error_message) {
-  const component_in_error_boundary = do_with_elements => {
-    const error_boundary_wrapped = $b7436a6d1fd64e3b$export$b69d0d92862de18b({
-      severity_: "error",
-      message_: error_message,
-      get children() {
-        const elements = component();
-        do_with_elements?.(elements);
-        return elements;
-      }
-    });
-    // This might return an accessor, in that case we need to "unwrap" it since our SDK consumers expect HTML elements or arrays thereof
-    if (typeof error_boundary_wrapped === "function")
-      // @ts-ignore
-      return error_boundary_wrapped();
-    // On the server it returns a string, so we just return that
-    return error_boundary_wrapped;
-  };
-  const owner = $9HbP8$getOwner();
-  if (owner == null) return $9HbP8$createRoot(dispose => {
-    // if we're not already run in a root, create a root and automatically dispose it when the first returned element is removed from the DOM
-    return component_in_error_boundary(elements => {
-      if (!elements?.length) return;
-      (0, $9HbP8$observer).onremoved(elements[0], dispose);
-    });
-  });else
-    // we're already in a root so cleanups are handled
-    return component_in_error_boundary();
-}
 function $ccd5db07a3a069c5$export$477caf01aecaeb2a(options) {
   const router_ = options.router_;
   const search_query_url_param_name_ = "search_query_url_param_name_" in options ? options.search_query_url_param_name_ : undefined;
@@ -7937,7 +7988,7 @@ function $190927650b4840eb$export$605674723bcc715c(props = {}) {
 const $cea52f6b24092f05$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<a class="suggestion"></a>`, 2),
   $cea52f6b24092f05$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class="search-icon"></div>`, 2),
   $cea52f6b24092f05$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<span class="type"></span>`, 2),
-  $cea52f6b24092f05$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div><!#><!/><span class="value"></span></div>`, 6),
+  $cea52f6b24092f05$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class="with-parent-title"><!#><!/><span class="value line-clamp"></span></div>`, 6),
   $cea52f6b24092f05$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<div class="with-icon"><!#><!/><!#><!/></div>`, 6),
   $cea52f6b24092f05$var$_tmpl$6 = /*#__PURE__*/$9HbP8$template(`<h2 class="text"></h2>`, 2),
   $cea52f6b24092f05$var$_tmpl$7 = /*#__PURE__*/$9HbP8$template(`<div class="suggestion-container query"><!#><!/><!#><!/></div>`, 6),
@@ -9265,7 +9316,9 @@ function $b2bf2cdcff8142d8$export$f631859cab12b342({
 }
 function $b26bdbd081f63e3f$export$9ff751cd77687edc({
   search_results_: search_results_,
-  router_: router_
+  router_: router_,
+  queries_without_content_results_: queries_without_content_results_,
+  get_search_query_: get_search_query_
 }) {
   const content_results = $9HbP8$createMemo(() => search_results_()?.content_search_links);
   const content_results_by_page_url = $9HbP8$createMemo(() => {
@@ -9278,6 +9331,10 @@ function $b26bdbd081f63e3f$export$9ff751cd77687edc({
     }
     return map;
   });
+  $9HbP8$createEffect(() => {
+    const results = content_results();
+    if (Array.isArray(results) && results.length === 0) queries_without_content_results_.add($9HbP8$untrack(get_search_query_));
+  });
   return $9HbP8$createComponent((0, $9HbP8$For), {
     get each() {
       return [...content_results_by_page_url().keys()];
@@ -9330,8 +9387,15 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
     number_: num_results,
     i18n_: i18n_
   });
-  const [is_showing_placeholders, set_is_showing_placeholders] = $9HbP8$createSignal(false);
+  const queries_without_content_results_ = new (0, $9HbP8$ListenableSet)();
+  const [check_query, set_check_query] = $9HbP8$createSignal(false);
+  const placeholders_enabled = $9HbP8$createMemo(() => {
+    // don't show placeholders when the user toggles filters
+    check_query();
+    return !queries_without_content_results_.has(get_search_query_());
+  });
   const rows_object = $49de9d31aeea1b5e$var$make_state_saved_rows(content_results_rows_, i18n_);
+  for (const ev of ["add", "delete"]) queries_without_content_results_.addEventListener(ev, () => set_check_query(prev => !prev));
   return (() => {
     const _el$ = $9HbP8$getNextElement($49de9d31aeea1b5e$var$_tmpl$),
       _el$2 = _el$.firstChild,
@@ -9357,36 +9421,25 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
       get children() {
         return $9HbP8$createComponent((0, $9HbP8$Suspense), {
           get fallback() {
-            return (() => {
-              set_is_showing_placeholders(true);
-              $9HbP8$onCleanup(() => set_is_showing_placeholders(false));
-              return $9HbP8$createComponent((0, $9d5b3ed1fc91c672$export$4405d077f0a20494), {
-                content_results_rows_: content_results_rows_,
-                get cols_at_size_() {
-                  return $9HbP8$createMemo(() => layout_options_().cols_at_size);
-                }
-              });
-            })();
+            return $9HbP8$createComponent((0, $9d5b3ed1fc91c672$export$4405d077f0a20494), {
+              content_results_rows_: content_results_rows_,
+              get cols_at_size_() {
+                return $9HbP8$createMemo(() => layout_options_().cols_at_size);
+              }
+            });
           },
           get children() {
             return $9HbP8$createComponent((0, $b26bdbd081f63e3f$export$9ff751cd77687edc), {
               router_: router_,
-              search_results_: search_results_
+              search_results_: search_results_,
+              queries_without_content_results_: queries_without_content_results_,
+              get_search_query_: get_search_query_
             });
           }
         });
       }
     })), _el$5, _co$2);
-    $9HbP8$effect(_p$ => {
-      const _v$ = !!is_showing_placeholders(),
-        _v$2 = is_loading_() || content_results()?.length > 0 ? "" : "none";
-      _v$ !== _p$._v$ && _el$.classList.toggle("loading", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _el$.style.setProperty("display", _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
+    $9HbP8$effect(() => _el$.style.setProperty("display", is_loading_() && placeholders_enabled() || content_results()?.length > 0 ? "" : "none"));
     return _el$;
   })();
 }
@@ -9821,7 +9874,7 @@ const $806c97b931758897$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class="d
     * Type for the private properties that are shared between the different exported search SDK wrapper functions. SDK users are not allowed to change/access these, they're an internal implementation detail.
     */
 const $806c97b931758897$var$privately_shared_properties = /*@__PURE__*/new WeakMap();
-const $806c97b931758897$var$content_search_default = false;
+const $806c97b931758897$var$content_search_default = true;
 const $806c97b931758897$var$min_products_to_fetch_ = 20;
 const $806c97b931758897$export$bde3eb976dfded9 = depict_search => $806c97b931758897$var$privately_shared_properties.get(depict_search)?.search_query_updating_blocked_;
 class $806c97b931758897$export$ac6237957a15b3f0 {