@depict-ai/ui 1.4.25 → 2.0.1

package/README.md

@@ -7,4 +7,5 @@ Breaking changes:
 - 1.1.0 made the `include_input_field` option of `SearchPage` default to true
 - 1.2.0 added `page_url_creator` and changed typing to support it. The only breaking change is that this potentially causes type errors where the resolution is to move the generics to the provider instead of the SearchPage and CategoryPage components.
 - 1.3.0 moved `depict-filter-sort-mobile-modal-container` from being a class to being an id
-- 1.4.0 Added `brand_` translation string to Locale.
+- 1.4.0 Added `brand_` translation string to Locale.
+- 2.0.0 Made `enable_content_search` `true` by default. Redesigned filter counts.

package/latest/index.cjs

@@ -60,7 +60,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.25";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.1";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -119,7 +119,9 @@ function $ab7c6c7911bae2f5$export$ff7109b9b2b206ba(sdk_cols_at_size, min_width_f
 }
 function $fc23d7668ae0011d$export$a2cc176055f8f08() {
   const text = "Please try setting `colsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
-  return (0, $gVhhF$solidjsweb.isServer) ? `<!-- ${text} -->` : document.createComment(text);
+  return (0, $gVhhF$solidjsweb.isServer) ? {
+    t: `<!-- ${text} -->`
+  } : document.createComment(text);
 }
 function $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52(elements) {
   // FYI this probably doesn't work on hugely deep nestings or large amount of elements
@@ -334,9 +336,14 @@ function $edafe91daf3091d7$export$b69d0d92862de18b(props) {
 const $f48d0fbb00835aaa$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div></div>`, 2),
   $f48d0fbb00835aaa$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<style type="text/css"></style>`, 2);
 function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
+  const container_class = "x" + $gVhhF$solidjs.createUniqueId();
   const container_element_ = (() => {
     const _el$ = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
-    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => props.element_attributes), false, true);
+    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => props.element_attributes, {
+      "classList": {
+        [container_class]: true
+      }
+    }), false, true);
     $gVhhF$solidjsweb.insert(_el$, () => props.children);
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
@@ -347,11 +354,16 @@ function $f48d0fbb00835aaa$export$d21e32dfedac04be(props) {
     },
     severity_: "error",
     get children() {
-      return $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element_);
+      return $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element_, false, container_class);
     }
   });
 }
-function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, insert_after_container = false) {
+function $f48d0fbb00835aaa$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 = $gVhhF$depictaiutilishared.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 = $gVhhF$solidjs.createMemo(() => props.rows === "all");
   const rows_or_empty_object = $gVhhF$solidjs.createMemo(() => show_all_rows() ? {} : props.rows);
@@ -366,46 +378,41 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
     return !(!button || Array.isArray(button) && !button.length);
   });
   const [get_styling, set_styling] = $gVhhF$solidjs.createSignal();
-  const container_class = $gVhhF$depictaiutilishared.make_random_classname();
   const selector_beginning = `.depict .${container_class}>`; // class so ppl can have id if needed
   const [get_children_count, set_children_count] = $gVhhF$solidjs.createSignal(0);
-  const update_children_count = () => set_children_count(container_element.children.length);
+  const update_children_count = () => (0, $gVhhF$solidjsweb.isServer) ? 20 : set_children_count(container_element.children.length);
   const col_styling = $gVhhF$solidjs.createMemo(() => $gVhhF$depictaiutilishared.n_col_styling_with_dist(selector_beginning, props.grid_spacing, props.cols_at_size, props.layout, props.override_vertical_spacing));
   const default_currently_visible_signal = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(() => rows_or_empty_object().start_rows ?? 1)); // Keep this signal here, so it doesn't change when rows_or_empty_object and I think it's to be expected that the "internal default signal" stays the same
   const rows_visible_signal = $gVhhF$solidjs.createMemo(() => rows_or_empty_object().currently_visible || default_currently_visible_signal);
   const get_rows_visible = $gVhhF$solidjs.createMemo(() => rows_visible_signal()[0]());
   const set_rows_visible = $gVhhF$solidjs.createMemo(() => rows_visible_signal()[1]);
-  const view_more_button_class = $gVhhF$depictaiutilishared.make_random_classname();
-  const view_less_button_class = $gVhhF$depictaiutilishared.make_random_classname();
-  const style_element = (() => {
-    const _el$2 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$2);
-    $gVhhF$solidjsweb.insert(_el$2, get_styling);
-    return _el$2;
-  })();
+  const view_more_button_class = "m" + $gVhhF$solidjs.createUniqueId();
+  const view_less_button_class = "l" + $gVhhF$solidjs.createUniqueId(); //  https://github.com/solidjs/solid-docs/issues/263#issuecomment-1622388079
   const view_more_button_container = $gVhhF$solidjs.createMemo(() => have_a_view_more_button() && (() => {
-    const _el$3 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
-    $gVhhF$solidjsweb.addEventListener(_el$3, "click", $gVhhF$depictaiutilishared.catchify(() => set_rows_visible()(prev => prev + (rows_or_empty_object().rows_per_click ?? 1))), true);
-    $gVhhF$solidjsweb.className(_el$3, `load-more-container ${view_more_button_class}`);
-    $gVhhF$solidjsweb.insert(_el$3, () => rows_or_empty_object().button);
+    const _el$2 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
+    $gVhhF$solidjsweb.addEventListener(_el$2, "click", $gVhhF$depictaiutilishared.catchify(() => set_rows_visible()(prev => prev + (rows_or_empty_object().rows_per_click ?? 1))), true);
+    $gVhhF$solidjsweb.className(_el$2, `load-more-container ${view_more_button_class}`);
+    $gVhhF$solidjsweb.insert(_el$2, () => rows_or_empty_object().button);
     $gVhhF$solidjsweb.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 = $gVhhF$solidjs.createMemo(() => have_a_view_less_button() && (() => {
-    const _el$4 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
-    $gVhhF$solidjsweb.addEventListener(_el$4, "click", $gVhhF$depictaiutilishared.catchify(() => set_rows_visible()(() => rows_or_empty_object().start_rows ?? 1)), true);
-    $gVhhF$solidjsweb.className(_el$4, `load-less-container ${view_less_button_class}`);
-    $gVhhF$solidjsweb.insert(_el$4, () => rows_or_empty_object().view_less_button);
+    const _el$3 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$);
+    $gVhhF$solidjsweb.addEventListener(_el$3, "click", $gVhhF$depictaiutilishared.catchify(() => set_rows_visible()(() => rows_or_empty_object().start_rows ?? 1)), true);
+    $gVhhF$solidjsweb.className(_el$3, `load-less-container ${view_less_button_class}`);
+    $gVhhF$solidjsweb.insert(_el$3, () => rows_or_empty_object().view_less_button);
     $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$4;
+    return _el$3;
   })());
-  container_element.classList.add(container_class);
+  const [force_style_update, set_force_style_update] = $gVhhF$solidjs.createSignal("");
   $gVhhF$solidjs.createComputed(() => {
     // Make sure we don't have more rows visible than max_rows (this could happen by max_rows being decreased)
     const rows_visible = get_rows_visible();
     const max_rows = rows_or_empty_object().max_rows;
     if (!isNaN(max_rows) && max_rows >= 0 && rows_visible > max_rows) set_rows_visible()(max_rows);
   });
+  $gVhhF$solidjs.createEffect(() => set_force_style_update(" ")); // force style update after hydration due to https://discord.com/channels/722131463138705510/722167424186843267/1151544212517552168
   $gVhhF$solidjs.createRenderEffect(() => {
     // Be careful to only read show_all_rows in here (ofc doesn't apply to nested effects)
     if (show_all_rows()) {
@@ -414,11 +421,13 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
       return;
     }
     update_children_count();
-    const mutation_observer = new MutationObserver($gVhhF$depictaiutilishared.catchify(update_children_count));
-    mutation_observer.observe(container_element, {
-      childList: true
-    });
-    $gVhhF$solidjs.onCleanup(() => mutation_observer.disconnect());
+    if (!(0, $gVhhF$solidjsweb.isServer)) {
+      const mutation_observer = new MutationObserver($gVhhF$depictaiutilishared.catchify(update_children_count));
+      mutation_observer.observe(container_element, {
+        childList: true
+      });
+      $gVhhF$solidjs.onCleanup(() => mutation_observer.disconnect());
+    }
     set_styling(
     // this is needed because solid will think that the memo-accessor is a setter function otherwise
     () => $gVhhF$solidjs.createMemo(() => {
@@ -429,7 +438,7 @@ function $f48d0fbb00835aaa$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;
@@ -450,6 +459,11 @@ function $f48d0fbb00835aaa$export$445d8d3f5f706a40(props, container_element, ins
       }).join("");
     }));
   });
+  const style_element = (() => {
+    const _el$4 = $gVhhF$solidjsweb.getNextElement($f48d0fbb00835aaa$var$_tmpl$2);
+    $gVhhF$solidjsweb.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, $gVhhF$solidjsweb.memo(view_more_button_container), $gVhhF$solidjsweb.memo(view_less_button_container), style_element];
 }
@@ -477,18 +491,26 @@ function $a0e53f99354809d9$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, $gVhhF$depictaiutilishared.Amazing_Slider)({
     button_contents: {
       left: [(() => {
         const _el$ = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$);
-        $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {}));
+        $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
+          height_: arrow_height_,
+          width_: arrow_width_
+        }));
         return _el$;
       })()],
       right: [(() => {
         const _el$2 = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$);
-        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {}));
+        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
+          height_: arrow_height_,
+          width_: arrow_width_
+        }));
         return _el$2;
       })()]
     },
@@ -513,6 +535,8 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
   const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const num_placeholders_ = () => 20;
   const slider = $gVhhF$solidjsweb.createComponent((0, $a0e53f99354809d9$export$6649caad96ef8870), {
+    arrow_height_: 25,
+    arrow_width_: 12.5,
     disable_fading_: true,
     slider_ref_: slider => {
       const {
@@ -557,34 +581,66 @@ function $363ce4d1d71041aa$export$d41d19e89346fa2({
     children: slider
   });
 }
+function $95837413165cc2df$export$23fca46f3143581f(component, error_message) {
+  const component_in_error_boundary = do_with_elements => {
+    const error_boundary_wrapped = $edafe91daf3091d7$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 = $gVhhF$solidjs.getOwner();
+  if (owner == null) return $gVhhF$solidjs.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, $gVhhF$depictaiutilishared.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 $72f96c4782db0b1b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict recommendations"></div>`, 2);
 function $72f96c4782db0b1b$export$9574e176201e5e8d(props) {
-  const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
-    const {
-      grid_spacing: grid_spacing
-    } = props; // can be reactive
-    return typeof grid_spacing === "string" ? {
-      grid_spacing: grid_spacing
-    } : {
-      override_vertical_spacing: grid_spacing.vertical,
-      grid_spacing: grid_spacing.horizontal
-    };
-  });
-  const [recommendations_resource_] = $gVhhF$solidjs.createResource(() => props.recommendations, recs => recs);
-  return (() => {
-    const _el$ = $gVhhF$solidjsweb.getNextElement($72f96c4782db0b1b$var$_tmpl$);
-    $gVhhF$solidjsweb.insert(_el$, () => $363ce4d1d71041aa$export$d41d19e89346fa2({
-      product_card_template_: (...args) => props.product_card_template(...args),
-      recommendations_resource_: recommendations_resource_,
-      market_: () => props.market,
-      merchant_: () => props.merchant,
-      layout_options_: $gVhhF$solidjs.createMemo(() => ({
-        cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
-        ...grid_spacing_override()
-      }))
-    }));
-    return _el$;
-  })();
+  return $95837413165cc2df$export$23fca46f3143581f(() => {
+    const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
+      const {
+        grid_spacing: grid_spacing
+      } = props; // can be reactive
+      return typeof grid_spacing === "string" ? {
+        grid_spacing: grid_spacing
+      } : {
+        override_vertical_spacing: grid_spacing.vertical,
+        grid_spacing: grid_spacing.horizontal
+      };
+    });
+    const [recommendations_resource_] = $gVhhF$solidjs.createResource(() => props.recommendations, recs => recs);
+    return (() => {
+      const _el$ = $gVhhF$solidjsweb.getNextElement($72f96c4782db0b1b$var$_tmpl$);
+      $gVhhF$solidjsweb.insert(_el$, () => $363ce4d1d71041aa$export$d41d19e89346fa2({
+        product_card_template_: (...args) => props.product_card_template(...args),
+        recommendations_resource_: recommendations_resource_,
+        market_: () => props.market,
+        merchant_: () => props.merchant,
+        layout_options_: $gVhhF$solidjs.createMemo(() => ({
+          cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
+          ...grid_spacing_override()
+        }))
+      }));
+      return _el$;
+    })();
+  }, "RecommendationSlider failed");
 }
 const $b8e79813f4f7ebe4$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="recommendation-grid"><!#><!/><!#><!/></div>`, 6);
 function $b8e79813f4f7ebe4$export$7da560f849543dff({
@@ -647,46 +703,57 @@ function $b8e79813f4f7ebe4$export$7da560f849543dff({
 const $1f8dbf7e28b3eff2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="show-more major" type="button"></button>`, 2),
   $1f8dbf7e28b3eff2$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp recommendations"></div>`, 2);
 function $1f8dbf7e28b3eff2$export$9756467d34d91cdb(props) {
-  const rows_object_ = $gVhhF$solidjs.createMemo(() => {
-    const view_more_button = props.view_more_button;
-    if (!view_more_button) return "all";
-    return {
-      start_rows: view_more_button.start_rows,
-      rows_per_click: view_more_button.rows_per_click,
-      button: (() => {
-        const _el$ = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$);
-        $gVhhF$solidjsweb.insert(_el$, () => view_more_button.text);
-        return _el$;
-      })()
-    };
-  });
-  const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
-    const {
-      grid_spacing: grid_spacing
-    } = props; // can be reactive
-    return typeof grid_spacing === "string" ? {
-      grid_spacing: grid_spacing
-    } : {
-      override_vertical_spacing: grid_spacing.vertical,
-      grid_spacing: grid_spacing.horizontal
-    };
-  });
-  const [recommendations_resource_] = $gVhhF$solidjs.createResource(() => props.recommendations, recs => recs);
-  return (() => {
-    const _el$2 = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$2);
-    $gVhhF$solidjsweb.insert(_el$2, () => $b8e79813f4f7ebe4$export$7da560f849543dff({
-      rows_object_: rows_object_,
-      product_card_template_: (...args) => props.product_card_template(...args),
-      recommendations_resource_: recommendations_resource_,
-      market_: () => props.market,
-      merchant_: () => props.merchant,
-      layout_options_: $gVhhF$solidjs.createMemo(() => ({
-        cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
-        ...grid_spacing_override()
-      }))
-    }));
-    return _el$2;
-  })();
+  return $95837413165cc2df$export$23fca46f3143581f(() => {
+    const rows_object_ = $gVhhF$solidjs.createMemo(() => {
+      const {
+        view_more_button: view_more_button,
+        max_rows: max_rows
+      } = props;
+      if (!view_more_button) {
+        if (max_rows) return {
+          max_rows: max_rows
+        };
+        return "all";
+      }
+      return {
+        max_rows: max_rows,
+        start_rows: view_more_button.start_rows,
+        rows_per_click: view_more_button.rows_per_click ?? 2,
+        button: (() => {
+          const _el$ = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$);
+          $gVhhF$solidjsweb.insert(_el$, () => view_more_button.text);
+          return _el$;
+        })()
+      };
+    });
+    const grid_spacing_override = $gVhhF$solidjs.createMemo(() => {
+      const {
+        grid_spacing: grid_spacing
+      } = props; // can be reactive
+      return typeof grid_spacing === "string" ? {
+        grid_spacing: grid_spacing
+      } : {
+        override_vertical_spacing: grid_spacing.vertical,
+        grid_spacing: grid_spacing.horizontal
+      };
+    });
+    const [recommendations_resource_] = $gVhhF$solidjs.createResource(() => props.recommendations, recs => recs);
+    return (() => {
+      const _el$2 = $gVhhF$solidjsweb.getNextElement($1f8dbf7e28b3eff2$var$_tmpl$2);
+      $gVhhF$solidjsweb.insert(_el$2, () => $b8e79813f4f7ebe4$export$7da560f849543dff({
+        rows_object_: rows_object_,
+        product_card_template_: (...args) => props.product_card_template(...args),
+        recommendations_resource_: recommendations_resource_,
+        market_: () => props.market,
+        merchant_: () => props.merchant,
+        layout_options_: $gVhhF$solidjs.createMemo(() => ({
+          cols_at_size: $4e04be41243c3d80$export$6daf8749b65a1b77($ab7c6c7911bae2f5$export$ff7109b9b2b206ba(props.cols_at_size)),
+          ...grid_spacing_override()
+        }))
+      }));
+      return _el$2;
+    })();
+  }, "RecommendationGrid failed");
 }
 const $19950faaac026e09$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<img>`, 1);
 function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
@@ -1358,7 +1425,7 @@ const $b3cf6ca8dc0e9998$export$48513f6b9f8ce62d = props => {
   const label = $gVhhF$solidjs.createMemo(() => props.label_);
   const checked = $gVhhF$solidjs.createMemo(() => props.checked_);
   const value = $gVhhF$solidjs.createMemo(() => props.value_);
-  const is_count_zero = $gVhhF$solidjs.createMemo(() => props.is_count_zero_);
+  const is_count_zero = $gVhhF$solidjs.createMemo(() => props.is_count_zero_ || count() === 0);
   const id = $gVhhF$depictaiutilishared.make_random_classname();
   return (/* We can't use actual margin because ExpandingContainer gets messed up */(() => {
       const _el$ = $gVhhF$solidjsweb.getNextElement($b3cf6ca8dc0e9998$var$_tmpl$2),
@@ -1394,14 +1461,17 @@ const $b3cf6ca8dc0e9998$export$48513f6b9f8ce62d = props => {
         }
       }), _el$8, _co$);
       $gVhhF$solidjsweb.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 && $gVhhF$solidjsweb.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
       });
       $gVhhF$solidjsweb.effect(() => _el$3.checked = checked());
       return _el$;
@@ -2238,6 +2308,7 @@ function $3bdc00a1353c1150$var$render_stuff(data, existing_filter, i18n_) {
                           return $gVhhF$solidjs.createMemo(() => value()?.is_expanded_?.ui_should_show_expanded_?.() ?? false);
                         }
                       }), _el$16, _co$5);
+                      $gVhhF$solidjsweb.effect(() => _el$14.classList.toggle("count-0", !!(value()?.count_ === 0)));
                       return _el$12;
                     })();
                   },
@@ -2429,7 +2500,8 @@ function $3bdc00a1353c1150$var$expand_until_choice(data_structure) {
   });
 }
 const $0ef1681699140f1a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="checkbox-grid"></div>`, 2),
-  $0ef1681699140f1a$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="major-minor-transition"></button>`, 2);
+  $0ef1681699140f1a$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class="count-wrapper"><span class="count"></span></span>`, 4),
+  $0ef1681699140f1a$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="major-minor-transition"><!#><!/><!#><!/></button>`, 6);
 const $0ef1681699140f1a$export$414f6a19d38e655c = ({
   filter_: filter_,
   selected_filters_: [get_selected_filters, set_selected_filters]
@@ -2461,7 +2533,11 @@ const $0ef1681699140f1a$export$414f6a19d38e655c = ({
       children: value => {
         const is_selected = $gVhhF$solidjs.createMemo(() => existing_filter()?.data?.includes(value().value_));
         return (() => {
-          const _el$2 = $gVhhF$solidjsweb.getNextElement($0ef1681699140f1a$var$_tmpl$2);
+          const _el$2 = $gVhhF$solidjsweb.getNextElement($0ef1681699140f1a$var$_tmpl$3),
+            _el$5 = _el$2.firstChild,
+            [_el$6, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling),
+            _el$7 = _el$6.nextSibling,
+            [_el$8, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$7.nextSibling);
           $gVhhF$solidjsweb.addEventListener(_el$2, "click", $gVhhF$depictaiutilishared.catchify(() => {
             const set_filter = existing_filter();
             const {
@@ -2482,16 +2558,30 @@ const $0ef1681699140f1a$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);
-          $gVhhF$solidjsweb.insert(_el$2, () => value().value_);
+          $gVhhF$solidjsweb.insert(_el$2, () => value().value_, _el$6, _co$);
+          $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+            get when() {
+              return value().count_ != undefined;
+            },
+            get children() {
+              const _el$3 = $gVhhF$solidjsweb.getNextElement($0ef1681699140f1a$var$_tmpl$2),
+                _el$4 = _el$3.firstChild;
+              $gVhhF$solidjsweb.insert(_el$4, () => value().count_);
+              return _el$3;
+            }
+          }), _el$8, _co$2);
           $gVhhF$solidjsweb.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
           });
           $gVhhF$solidjsweb.runHydrationEvents();
           return _el$2;
@@ -6317,35 +6407,6 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     return _el$13;
   })()];
 }
-function $95837413165cc2df$export$23fca46f3143581f(component, error_message) {
-  const component_in_error_boundary = do_with_elements => {
-    const error_boundary_wrapped = $edafe91daf3091d7$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 = $gVhhF$solidjs.getOwner();
-  if (owner == null) return $gVhhF$solidjs.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, $gVhhF$depictaiutilishared.observer).onremoved(elements[0], dispose);
-    });
-  });else
-    // we're already in a root so cleanups are handled
-    return component_in_error_boundary();
-}
 function $c79fd10a3ab7d6e0$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;
@@ -7991,7 +8052,7 @@ function $c0125412b4ea0c93$export$605674723bcc715c(props = {}) {
 const $6b65ba8af12c5a26$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a class="suggestion"></a>`, 2),
   $6b65ba8af12c5a26$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="search-icon"></div>`, 2),
   $6b65ba8af12c5a26$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class="type"></span>`, 2),
-  $6b65ba8af12c5a26$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><!#><!/><span class="value"></span></div>`, 6),
+  $6b65ba8af12c5a26$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="with-parent-title"><!#><!/><span class="value line-clamp"></span></div>`, 6),
   $6b65ba8af12c5a26$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="with-icon"><!#><!/><!#><!/></div>`, 6),
   $6b65ba8af12c5a26$var$_tmpl$6 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<h2 class="text"></h2>`, 2),
   $6b65ba8af12c5a26$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="suggestion-container query"><!#><!/><!#><!/></div>`, 6),
@@ -9319,7 +9380,9 @@ function $76227de40be817e5$export$f631859cab12b342({
 }
 function $8781fcec27b20709$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 = $gVhhF$solidjs.createMemo(() => search_results_()?.content_search_links);
   const content_results_by_page_url = $gVhhF$solidjs.createMemo(() => {
@@ -9332,6 +9395,10 @@ function $8781fcec27b20709$export$9ff751cd77687edc({
     }
     return map;
   });
+  $gVhhF$solidjs.createEffect(() => {
+    const results = content_results();
+    if (Array.isArray(results) && results.length === 0) queries_without_content_results_.add($gVhhF$solidjs.untrack(get_search_query_));
+  });
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
     get each() {
       return [...content_results_by_page_url().keys()];
@@ -9384,8 +9451,15 @@ function $3716b8caf7f959e2$export$6d0c9c22f6652669({
     number_: num_results,
     i18n_: i18n_
   });
-  const [is_showing_placeholders, set_is_showing_placeholders] = $gVhhF$solidjs.createSignal(false);
+  const queries_without_content_results_ = new (0, $gVhhF$depictaiutilishared.ListenableSet)();
+  const [check_query, set_check_query] = $gVhhF$solidjs.createSignal(false);
+  const placeholders_enabled = $gVhhF$solidjs.createMemo(() => {
+    // don't show placeholders when the user toggles filters
+    check_query();
+    return !queries_without_content_results_.has(get_search_query_());
+  });
   const rows_object = $3716b8caf7f959e2$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$ = $gVhhF$solidjsweb.getNextElement($3716b8caf7f959e2$var$_tmpl$),
       _el$2 = _el$.firstChild,
@@ -9411,36 +9485,25 @@ function $3716b8caf7f959e2$export$6d0c9c22f6652669({
       get children() {
         return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
           get fallback() {
-            return (() => {
-              set_is_showing_placeholders(true);
-              $gVhhF$solidjs.onCleanup(() => set_is_showing_placeholders(false));
-              return $gVhhF$solidjsweb.createComponent((0, $c2f92eb265a14529$export$4405d077f0a20494), {
-                content_results_rows_: content_results_rows_,
-                get cols_at_size_() {
-                  return $gVhhF$solidjs.createMemo(() => layout_options_().cols_at_size);
-                }
-              });
-            })();
+            return $gVhhF$solidjsweb.createComponent((0, $c2f92eb265a14529$export$4405d077f0a20494), {
+              content_results_rows_: content_results_rows_,
+              get cols_at_size_() {
+                return $gVhhF$solidjs.createMemo(() => layout_options_().cols_at_size);
+              }
+            });
           },
           get children() {
             return $gVhhF$solidjsweb.createComponent((0, $8781fcec27b20709$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);
-    $gVhhF$solidjsweb.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
-    });
+    $gVhhF$solidjsweb.effect(() => _el$.style.setProperty("display", is_loading_() && placeholders_enabled() || content_results()?.length > 0 ? "" : "none"));
     return _el$;
   })();
 }
@@ -9875,7 +9938,7 @@ const $2c61e4cd8229c49a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<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 $2c61e4cd8229c49a$var$privately_shared_properties = /*@__PURE__*/new WeakMap();
-const $2c61e4cd8229c49a$var$content_search_default = false;
+const $2c61e4cd8229c49a$var$content_search_default = true;
 const $2c61e4cd8229c49a$var$min_products_to_fetch_ = 20;
 const $2c61e4cd8229c49a$export$bde3eb976dfded9 = depict_search => $2c61e4cd8229c49a$var$privately_shared_properties.get(depict_search)?.search_query_updating_blocked_;
 class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {