@depict-ai/ui 2.1.12 → 2.1.13

package/latest/index.cjs

@@ -19,7 +19,7 @@ $parcel$export(module.exports, "ListingProvider", () => $84798aaa863a4909$export
 $parcel$export(module.exports, "useListing", () => $84798aaa863a4909$export$8d0c4fdbb05a2f2e);
 $parcel$export(module.exports, "ShopifyContainedImage", () => $a33065cfed827fc0$export$e4b984597b71e989);
 $parcel$export(module.exports, "SlidableItems", () => $a0e53f99354809d9$export$6649caad96ef8870);
-$parcel$export(module.exports, "make_accurate_size_accessor", () => $e5f442fb78c98741$export$9f191182275e9ef);
+$parcel$export(module.exports, "make_accurate_width_accessor", () => $f13855d1b951b24a$export$ebdc3711f7e02ccd);
 $parcel$export(module.exports, "RecommendationSlider", () => $72f96c4782db0b1b$export$9574e176201e5e8d);
 $parcel$export(module.exports, "RecommendationGrid", () => $1f8dbf7e28b3eff2$export$9756467d34d91cdb);
 $parcel$export(module.exports, "ShopifyResponsiveImg", () => $19950faaac026e09$export$6e5611bc7e57e477);
@@ -70,7 +70,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 = "2.1.12";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.13";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -511,24 +511,30 @@ function $a0e53f99354809d9$export$6649caad96ef8870({
 
 /** @jsxImportSource solid-js */
 
-function $e5f442fb78c98741$export$9f191182275e9ef(what_to_watch) {
-  const [size, setSize] = $gVhhF$solidjs.createSignal();
+function $f13855d1b951b24a$export$ebdc3711f7e02ccd(what_to_watch) {
+  const [width, setWidth] = $gVhhF$solidjs.createSignal();
   const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => {
     for (let j = 0; j < records.length; j++) {
       const width = records[j].borderBoxSize?.[0]?.inlineSize ?? what_to_watch.getBoundingClientRect().width;
-      setSize(width);
+      setWidth(width);
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
   // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
   const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(what_to_watch, ({
     element: element
-  }) => requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
+  }) => requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => {
+    const current_size = what_to_watch.getBoundingClientRect().width;
+    if (current_size)
+      // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
+      setWidth(current_size);
+    resizeObserver.observe(element);
+  })));
   $gVhhF$solidjs.onCleanup(() => {
     resizeObserver.disconnect();
     disconnect();
   });
-  return size;
+  return width;
 }
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
@@ -1514,16 +1520,11 @@ function $47e2cc552c02110c$export$8895d39404bd2bb1(props) {
   if (delay_toast_) return show_configured_toast;else show_configured_toast();
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
-const $c77c68e559a1506c$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg><path d="M11.669 10.531l9.156-9.156a.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569A.8.8 0 0 0 20.24 0a.77.77 0 0 0-.569.237l-9.14 9.14-9.14-9.14A.79.79 0 0 0 .807 0a.77.77 0 0 0-.569.237A.78.78 0 0 0 0 .807a.77.77 0 0 0 .237.569l9.156 9.156-9.156 9.14c-.159.157-.237.349-.237.569s.079.412.237.569c.085.085.174.148.268.19a1.095 1.095 0 0 0 .316.048.894.894 0 0 0 .285-.048.84.84 0 0 0 .285-.19l9.139-9.14 9.14 9.14a.894.894 0 0 0 .268.19 1.049 1.049 0 0 0 .301.048.941.941 0 0 0 .301-.048.84.84 0 0 0 .285-.19.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569z">`);
+const $c77c68e559a1506c$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=21.064 height=21.047 viewBox="0 0 21.064 21.064"><path d="M11.669 10.531l9.156-9.156a.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569A.8.8 0 0 0 20.24 0a.77.77 0 0 0-.569.237l-9.14 9.14-9.14-9.14A.79.79 0 0 0 .807 0a.77.77 0 0 0-.569.237A.78.78 0 0 0 0 .807a.77.77 0 0 0 .237.569l9.156 9.156-9.156 9.14c-.159.157-.237.349-.237.569s.079.412.237.569c.085.085.174.148.268.19a1.095 1.095 0 0 0 .316.048.894.894 0 0 0 .285-.048.84.84 0 0 0 .285-.19l9.139-9.14 9.14 9.14a.894.894 0 0 0 .268.19 1.049 1.049 0 0 0 .301.048.941.941 0 0 0 .301-.048.84.84 0 0 0 .285-.19.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569z">`);
 function $c77c68e559a1506c$export$3b621d86b1566b2(props = {}) {
   return (() => {
     const _el$ = $gVhhF$solidjsweb.getNextElement($c77c68e559a1506c$var$_tmpl$);
-    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(props, {
-      "xmlns": "http://www.w3.org/2000/svg",
-      "width": "21.064",
-      "height": "21.047",
-      "viewBox": "0 0 21.064 21.064"
-    }), true, true);
+    $gVhhF$solidjsweb.spread(_el$, props, true, true);
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -1837,7 +1838,7 @@ $gVhhF$solidjsweb.delegateEvents(["click"]);
 const $1c63082b2da848ad$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=count>`),
   $1c63082b2da848ad$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<label class=input-row><div class=left><input type=checkbox><span class=custom-indicator></span><span class="text line-clamp"></span></div><!$><!/>`);
 const $1c63082b2da848ad$export$48513f6b9f8ce62d = props => {
-  // It seems like there's no diffing without memos here (since we often just have computations in the getters above that update to the same result often because their dependencies change with unrelated changes often), so put memos here to avoid unneeded DOM changes
+  /* don't destructure props, it could have reactive getters */ // It seems like there's no diffing without memos here (since we often just have computations in the getters above that update to the same result often because their dependencies change with unrelated changes often), so put memos here to avoid unneeded DOM changes
   const count = $gVhhF$solidjs.createMemo(() => props.count_);
   const label = $gVhhF$solidjs.createMemo(() => props.label_);
   const checked = $gVhhF$solidjs.createMemo(() => props.checked_);
@@ -1930,6 +1931,78 @@ function $0fe1e7efdf4200d6$export$ca21a16d65b3dd8({
   })();
 }
 $gVhhF$solidjsweb.delegateEvents(["click"]);
+const $d023ed916c84e75d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=highlighted-part>`),
+  $d023ed916c84e75d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span>`);
+function $d023ed916c84e75d$export$ba17c5b7e6dda39f({
+  whole_text_to_display_: whole_text_to_display_memo,
+  searching_for_value_: searching_for_value_memo,
+  class_: class_
+}) {
+  const [get_has_highlighted, set_has_highlighted] = $gVhhF$solidjs.createSignal(false);
+  const text_itself = $gVhhF$solidjs.createMemo(() => $gVhhF$solidjs.batch(() => {
+    set_has_highlighted(false);
+    const searching_for_value = searching_for_value_memo();
+    const whole_text_to_display_ = whole_text_to_display_memo();
+    let for_black = "";
+    let pushed_grey = false;
+    const search_q = searching_for_value;
+    if (!search_q) return whole_text_to_display_;
+    const output = [];
+    const searching_for = search_q.toLowerCase();
+    const push_black = () => {
+      if (for_black) {
+        set_has_highlighted(true);
+        output.push((() => {
+          const _el$ = $gVhhF$solidjsweb.getNextElement($d023ed916c84e75d$var$_tmpl$);
+          $gVhhF$solidjsweb.insert(_el$, for_black);
+          return _el$;
+        })()); // "black"
+        for_black = "";
+      }
+    };
+    for (let i = 0; i < whole_text_to_display_.length;) {
+      let is_whole_word = true;
+      let searching_for_but_with_texts_casing = "";
+      const i_at_start = i;
+      for (let j = 0; j < searching_for.length; i++, j++) {
+        const letter_in_suggestion = whole_text_to_display_[i];
+        if (letter_in_suggestion?.toLowerCase() !== searching_for[j]) {
+          is_whole_word = false;
+          i = i_at_start;
+          break;
+        }
+        searching_for_but_with_texts_casing += letter_in_suggestion;
+      }
+      if (is_whole_word) {
+        push_black();
+        output.push(searching_for_but_with_texts_casing);
+        pushed_grey = true;
+      } else for_black += whole_text_to_display_[i++];
+    }
+    push_black();
+    if (!pushed_grey) {
+      set_has_highlighted(false);
+      return whole_text_to_display_;
+    }
+    return output;
+  }));
+  return (() => {
+    const _el$2 = $gVhhF$solidjsweb.getNextElement($d023ed916c84e75d$var$_tmpl$2);
+    $gVhhF$solidjsweb.className(_el$2, class_);
+    $gVhhF$solidjsweb.insert(_el$2, text_itself);
+    $gVhhF$solidjsweb.effect(_p$ => {
+      const _v$ = !!get_has_highlighted(),
+        _v$2 = whole_text_to_display_memo() /* for when line-clamped, users can see full text on hover */;
+      _v$ !== _p$._v$ && _el$2.classList.toggle("has-match", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && $gVhhF$solidjsweb.setAttribute(_el$2, "title", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$2;
+  })();
+}
 const $d94869c80e337a3d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<form class=checkboxes><!$><!/><!$><!/>`);
 const $d94869c80e337a3d$var$max_visible_without_collapsing = 15;
 const $d94869c80e337a3d$var$show_non_collapsible_when_collapsed = 4;
@@ -1937,7 +2010,8 @@ function $d94869c80e337a3d$export$dd948f91abc3a1c4({
   filter_: filter_,
   selected_filters_: [get_selected_filters, set_selected_filters],
   i18n_: i18n_,
-  view_more_button_below_group_: [, set_view_more_button_below_group_]
+  view_more_button_below_group_: [, set_view_more_button_below_group_],
+  filter_query_: filter_query_
 }) {
   const existing_filter = $gVhhF$solidjs.createMemo(() => {
     const {
@@ -1965,12 +2039,18 @@ function $d94869c80e337a3d$export$dd948f91abc3a1c4({
       const value = $daa394359b026187$export$325f75597868c4f0(checkbox().value_);
       return !!data?.some(item => $daa394359b026187$export$325f75597868c4f0(item) === value);
     });
+    const value = $gVhhF$solidjs.createMemo(() => checkbox().value_);
     return $gVhhF$solidjsweb.createComponent((0, $1c63082b2da848ad$export$48513f6b9f8ce62d), {
       get value_() {
-        return checkbox().value_;
+        return value();
       },
       get label_() {
-        return checkbox().name_;
+        return $gVhhF$solidjsweb.createComponent((0, $d023ed916c84e75d$export$ba17c5b7e6dda39f), {
+          get whole_text_to_display_() {
+            return $gVhhF$solidjs.createMemo(() => checkbox().name_ || value());
+          },
+          searching_for_value_: () => filter_query_?.()
+        });
       },
       get count_() {
         return checkbox().count_;
@@ -2062,7 +2142,8 @@ const $c1dc1554c1b94233$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<f
   $c1dc1554c1b94233$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<label class=input-row><div class=left><input type=radio><span class=custom-indicator></span><!$><!/></div><!$><!/>`);
 function $c1dc1554c1b94233$export$430444115f70a734({
   selected_filters_: selected_filters_,
-  filter_: filter_
+  filter_: filter_,
+  filter_query_: filter_query_
 }) {
   const radio_name = $gVhhF$depictaiutilishared.make_random_classname();
   const existing_filter = $gVhhF$solidjs.createMemo(() => {
@@ -2084,6 +2165,12 @@ function $c1dc1554c1b94233$export$430444115f70a734({
       children: (value, index) => {
         const random_selector = $gVhhF$depictaiutilishared.make_random_classname();
         const count = $gVhhF$solidjs.createMemo(() => filter_().meta.counts?.[index]);
+        const label = $gVhhF$solidjs.createMemo(() => {
+          const name = filter_().meta?.names?.[index];
+          if (name) return name;
+          const v = value();
+          return Array.isArray(v) ? v.join(" - ") : v + "";
+        });
         return (() => {
           const _el$2 = $gVhhF$solidjsweb.getNextElement($c1dc1554c1b94233$var$_tmpl$3),
             _el$3 = _el$2.firstChild,
@@ -2108,11 +2195,9 @@ function $c1dc1554c1b94233$export$430444115f70a734({
           }));
           $gVhhF$solidjsweb.setAttribute(_el$4, "id", random_selector);
           $gVhhF$solidjsweb.setAttribute(_el$4, "name", radio_name);
-          $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjs.createMemo(() => {
-            const name = filter_().meta?.names?.[index];
-            if (name) return name;
-            const v = value();
-            return Array.isArray(v) ? v.join(" - ") : v;
+          $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $d023ed916c84e75d$export$ba17c5b7e6dda39f), {
+            whole_text_to_display_: label,
+            searching_for_value_: () => filter_query_?.()
           }), _el$7, _co$);
           $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
             get when() {
@@ -2144,7 +2229,8 @@ const $0b7222ba8a8bb72f$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<d
 function $0b7222ba8a8bb72f$export$e0d834a0ad870cda({
   filter_: filter_,
   selected_filters_: selected_filters_,
-  i18n_: i18n_
+  i18n_: i18n_,
+  filter_query_: filter_query_
 }) {
   // If you ever attempt to implement that one can drag one range "knob" over the other like on prisjakt, see https://gitlab.com/depict-ai/depict.ai/-/merge_requests/8458/diffs?commit_id=c52dbdd15ca073489bee138b15d27bb6bf2992df
   // The issue with it is that one wants to discard the changes to the lower value as soon as the lower value has become the upper value when dragging the initially lower knob over the initially upper knob
@@ -2523,141 +2609,410 @@ function $7567511a7c3e4bd7$export$e5c2828934226505({
   });
   return outer_div;
 }
-const $3bdc00a1353c1150$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<form class="checkboxes hierarchical"><!$><!/><!$><!/>`),
-  $3bdc00a1353c1150$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=checkbox-details><!$><!/><!$><!/>`),
-  $3bdc00a1353c1150$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<details>`),
-  $3bdc00a1353c1150$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<summary class=category-parent><div class=summary><span class=count></span><!$><!/>`);
-const $3bdc00a1353c1150$var$max_visible_without_collapsing = 15;
-const $3bdc00a1353c1150$var$show_non_collapsible_when_collapsed = 4;
-function $3bdc00a1353c1150$export$a32086fa6616eafd({
-  filter_: filter_,
-  selected_filters_: selected_filters_,
-  i18n_: i18n_,
-  view_more_button_below_group_: view_more_button_below_group_,
-  expanded_hierarchical_filters_: expanded_hierarchical_filters_
+const $5ea5a82e398f6f44$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=highlighted-part>`);
+const $5ea5a82e398f6f44$var$dont_cut_in_between_less_than_characters = 30;
+function $5ea5a82e398f6f44$export$e1a98a189fd2c0e7({
+  content_result_: content_result_,
+  key_: key_,
+  cut_when_possible_: cut_when_possible_
 }) {
-  let form;
-  const existing_filter = $gVhhF$solidjs.createMemo(() => {
-    const {
-      field: field,
-      op: op
-    } = filter_();
-    return selected_filters_[0]().find(({
-      field: checking_field,
-      op: checking_op
-    }) => checking_field === field && checking_op === op);
-  });
-  const show_extras = $gVhhF$solidjs.createSignal(false);
-  const trigger_sync_ = $3bdc00a1353c1150$var$batching_filter_state_syncer({
-    filter_: filter_,
-    existing_filter_: existing_filter,
-    selected_filters_: selected_filters_,
-    get category_structure_() {
-      return structured_categories();
-    }
-  });
-  const structured_categories = $gVhhF$solidjs.createMemo(() => {
-    const execute_when_structure_finished = [];
-    const {
-      values: values,
-      names: names,
-      counts: counts
-    } = filter_().meta;
-    const data_structure = {};
-    for (let i = 0; i < values.length; i++) {
-      const value = values[i];
-      let pointer = data_structure;
-      let parent_ = {};
-      let created_an_object = false;
-      for (let j = 0; j < value.length; j++) {
-        const this_categories_name = value[j];
-        const obj = pointer[this_categories_name] ||= (() => {
-          const value_as_string = value.map(v => typeof v === "number" ? v + "" : v); // don't think backend will ever send numbers but technically it's allowed;
-          const created_obj = {
-            name_: names[i],
-            count_: counts?.[i],
-            parent_: parent_,
-            is_expanded_: $3bdc00a1353c1150$var$make_expanded_signal({
-              expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-              filter_value_: value_as_string
-            }),
-            value_: value_as_string,
-            children_: {}
-          };
-          const {
-            signal_: signal_,
-            on_structure_complete_: on_structure_complete_
-          } = $3bdc00a1353c1150$var$create_updating_signal({
-            self_: created_obj,
-            existing_filter_: $gVhhF$solidjs.untrack(existing_filter),
-            trigger_sync_: trigger_sync_
-          });
-          execute_when_structure_finished.push(on_structure_complete_);
-          created_obj.is_checked_ = signal_;
-          parent_ = created_obj;
-          created_an_object = true;
-          return created_obj;
-        })();
-        pointer = obj.children_;
-        parent_ = obj;
-      }
-      if (!created_an_object && "value_" in parent_) {
-        // if an object was created for our "depth" in the hierarchy but not for our specific entry this means that the entry array was unsorted and looked something like
-        // [
-        //   ["Öl", "IPA"],
-        //   ["Öl", "Pale Ale"],
-        //   ["Öl", "Ale"],
-        //   ["Öl", "Mörk Lager"],
-        //   ["Öl", "Suröl"],
-        //   ["Öl", "Veteöl"],
-        //   ["Öl", "Stout och Porter"],
-        //   ["Öl"], // <- We are here, our `hierarchical_data_structure[string]`-object was created when we iterated over ["Öl", "IPA"]
-        //   ["Öl", "Ljus Lager"],
-        // ];
-        // In this case we want to just correct the name and value of the already created object, which will be in parent_
-        parent_.value_ = value.map(v => v + "");
-        parent_.name_ = names[i];
-        parent_.count_ = counts[i];
-        parent_.is_expanded_ = $3bdc00a1353c1150$var$make_expanded_signal({
-          expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-          filter_value_: parent_.value_
-        });
-      }
-    }
-    while (execute_when_structure_finished.length) execute_when_structure_finished.pop()();
-    $3bdc00a1353c1150$var$expand_until_choice(data_structure);
-    $gVhhF$depictaiutilishared.dlog("CheckboxHierarchicalFilter: Recomputed structured_categories", data_structure);
-    return data_structure;
-  });
-  const some_top_level_are_hidden = $gVhhF$solidjs.createMemo(() => Object.keys(structured_categories()).length > $3bdc00a1353c1150$var$max_visible_without_collapsing);
-  const {
-    expand: expand,
-    collapse: collapse,
-    ExpandingContainer: ExpandingContainer
-  } = $4b455f60dadde8b8$export$5bad61ecde080b1f({
-    duration: 200
-  });
-  const expanding_container_els = $gVhhF$solidjsweb.createComponent(ExpandingContainer, {
+  const matched_tokens = $gVhhF$solidjs.createMemo(() => content_result_().highlights?.find(highlight => highlight.field == key_)?.matched_tokens);
+  const full_value = $gVhhF$solidjs.createMemo(() => content_result_()[key_]?.replaceAll("\n", " "));
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return matched_tokens()?.length;
+    },
+    get fallback() {
+      return full_value();
+    },
     get children() {
-      return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-        get when() {
-          return some_top_level_are_hidden();
-        },
-        get children() {
-          return $3bdc00a1353c1150$var$render_stuff($gVhhF$solidjs.createMemo(() => Object.fromEntries(Object.entries(structured_categories()).slice($3bdc00a1353c1150$var$show_non_collapsible_when_collapsed))), existing_filter, i18n_);
-        }
-      });
+      return (() => {
+        const segmented_cut_text = $gVhhF$solidjs.createMemo(() => {
+          const segmented_text = $5ea5a82e398f6f44$export$1b00d74faf266c56(full_value(), matched_tokens());
+          if (cut_when_possible_) $5ea5a82e398f6f44$var$cut_text(segmented_text);
+          return segmented_text;
+        });
+        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
+          get each() {
+            return segmented_cut_text();
+          },
+          children: item => {
+            return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+              get when() {
+                return item().highlighted_;
+              },
+              get fallback() {
+                return item().text_;
+              },
+              get children() {
+                const _el$ = $gVhhF$solidjsweb.getNextElement($5ea5a82e398f6f44$var$_tmpl$);
+                $gVhhF$solidjsweb.insert(_el$, () => item().text_);
+                return _el$;
+              }
+            });
+          }
+        });
+      })();
     }
   });
-  $gVhhF$solidjs.createRenderEffect(() => {
-    view_more_button_below_group_[1](some_top_level_are_hidden() ? $gVhhF$solidjsweb.createComponent((0, $0fe1e7efdf4200d6$export$ca21a16d65b3dd8), {
-      show_extras_: show_extras,
-      i18n_: i18n_
-    }) : []);
-  });
-  $gVhhF$solidjs.createEffect($gVhhF$depictaiutilishared.catchify(async () => {
-    if (!some_top_level_are_hidden()) {
-      await collapse();
+}
+function $5ea5a82e398f6f44$var$cut_text(segmented_text) {
+  // cut away chunks of text that are not highlighted to give a google-like overview of the content
+  const highlighted_segments = segmented_text?.filter(segment => segment.highlighted_);
+  if (!segmented_text || !highlighted_segments?.length) return;
+  // We have one or more highlighted segments
+  if (highlighted_segments.length === 1) {
+    // cut away from the left until the start of the highlighted sentence if just one sentence is highlighted
+    $5ea5a82e398f6f44$var$cut_start(segmented_text.indexOf(highlighted_segments[0]), segmented_text);
+    return;
+  }
+  // We have two or more highlighted segments, take the two biggest chunks and show them + a bit text around
+  const sorted_highlighted_segments = [...highlighted_segments].sort((a, b) => b.text_.trim().length - a.text_.trim().length // trim to avoid unfair comparisons due to whitespace
+  );
+
+  const [longest_segment, next_longest_segment] = sorted_highlighted_segments;
+  // We need to cut before the first segment - possibly through other segments - and maybe between segments
+  let [index_of_first_segment, index_of_second_segment] = [segmented_text.indexOf(longest_segment), segmented_text.indexOf(next_longest_segment)].sort((a, b) => a - b);
+  $5ea5a82e398f6f44$var$cut_start(index_of_first_segment, segmented_text);
+  // update indexes since we might have removed segments
+  [index_of_first_segment, index_of_second_segment] = [segmented_text.indexOf(longest_segment), segmented_text.indexOf(next_longest_segment)].sort((a, b) => a - b);
+  let number_of_characters_between_segments = 0;
+  for (let i = index_of_first_segment + 1; i < index_of_second_segment; i++) {
+    const segment = segmented_text[i];
+    number_of_characters_between_segments += segment.text_.length;
+  }
+  if (number_of_characters_between_segments < $5ea5a82e398f6f44$var$dont_cut_in_between_less_than_characters)
+    // don't cut if there are less than 30 characters between the two segments
+    return;
+  // We have more than 50 characters between the two segments, cut between them
+  const [split_start_segment, split_start_character] = $5ea5a82e398f6f44$var$find_split_point(index_of_first_segment, index_of_second_segment, segmented_text);
+  const [split_end_segment, split_end_character] = $5ea5a82e398f6f44$var$find_split_point(index_of_second_segment, index_of_first_segment, segmented_text);
+  if (split_start_segment === undefined || split_end_segment === undefined ||
+  // identical split point, or split end before split start, can't do anything
+  split_start_segment == split_end_segment && split_start_character >= split_end_character || split_start_segment > split_end_segment) return;
+  const dots_segment = {
+    text_: " … ",
+    highlighted_: false
+  };
+  const split_and_dotted_values = segmented_text.flatMap((segment, i) => {
+    if (i < split_start_segment || i > split_end_segment) return segment;
+    const text = segment.text_;
+    if (i == split_end_segment && i == split_start_segment) return [{
+      ...segment,
+      text_: text.slice(0, split_start_character).trimEnd()
+    }, dots_segment, {
+      ...segment,
+      text_: text.slice(split_end_character + 1, text.length).trimStart()
+    }];else if (i == split_start_segment) {
+      segment.text_ = text.slice(0, split_start_character).trimEnd(); // this would be split_start_character + 1, but we want to remove the last "dot" because . ... looks weird
+      return segment;
+    } else if (i == split_end_segment) return [dots_segment, {
+      ...segment,
+      text_: text.slice(split_end_character + 1, text.length).trimStart()
+    }];
+    return []; // remove all segments inbetween
+  });
+
+  segmented_text.splice(0, segmented_text.length, ...split_and_dotted_values); // Sorry…
+  $5ea5a82e398f6f44$var$heal_holes(segmented_text);
+}
+function $5ea5a82e398f6f44$var$heal_holes(segmented_text) {
+  // try to heal "holes" created in the segments so there are only alternating segments
+  const segments_to_delete = new Set();
+  for (let i = 0; i < segmented_text.length; i++) {
+    const segment = segmented_text[i];
+    let previous_segment;
+    for (let j = i - 1; j >= 0; j--) {
+      previous_segment = segmented_text[j];
+      // Don't write to a segment that's marked for deletion or the contents we write to it will be deleted
+      if (!segments_to_delete.has(previous_segment)) break;
+    }
+    if (previous_segment?.highlighted_ && segment.highlighted_ || previous_segment?.highlighted_ === false && segment.highlighted_ === false) {
+      previous_segment.text_ += segment.text_; // IDK if this ever happens
+      segments_to_delete.add(segment);
+    }
+  }
+  for (const segment of segments_to_delete) {
+    const index = segmented_text.indexOf(segment);
+    segmented_text.splice(index, 1);
+  }
+}
+function $5ea5a82e398f6f44$var$find_split_point(index_of_start_segment, index_of_end_segment, segmented_text, be_very_aggressive = true) {
+  const should_loop_backwards = index_of_start_segment > index_of_end_segment;
+  const step = should_loop_backwards ? -1 : 1;
+  const desperate_split_attempts = [":", ";", ","];
+  while (desperate_split_attempts.length) {
+    const split_point_between_words = [];
+    // for the middle also try to split with a few more characters if the default ones don't work over a full run
+    const desperate_split_attempt = desperate_split_attempts.pop();
+    let is_first_character = true;
+    for (let i = index_of_start_segment + step; should_loop_backwards ? i > index_of_end_segment : i < index_of_end_segment; i += step) {
+      const segment = segmented_text[i];
+      const text = segment.text_;
+      for (let j = should_loop_backwards ? text.length - 1 : 0; should_loop_backwards ? j >= 0 : j < text.length; j += step) {
+        const character = text[j];
+        if (character == "." || character == "?" || character == "!" || character == desperate_split_attempt) return [i, j]; // segment index, character index
+        if (is_first_character) is_first_character = false;else if (be_very_aggressive && character == " ") {
+          split_point_between_words.push([i, j]);
+          if (split_point_between_words.length > 3)
+            // We can't find a split point, so we'll just split between words
+            // This is because for UI reasons we only want to show 2 lines of text, so we need to be very aggressive with getting the second match soon
+            return split_point_between_words[1];
+        }
+      }
+    }
+  }
+  return [];
+}
+function $5ea5a82e398f6f44$var$cut_start(cut_left_of_index, segmented_text) {
+  // Cut the start of the text to bring the first matching token
+  let is_first_character = false;
+  let words_encountered = 0;
+  outmost_loop: for (let i = cut_left_of_index - 1; i >= 0; i--) {
+    const segment = segmented_text[i];
+    // We assume that two adjacent highlighted segments don't exist and have been merged if they were to have existed
+    const text = segment.text_;
+    for (let j = text.length - 1; j >= 0; j--) {
+      const character = text[j];
+      const is_space = character == " ";
+      if (!is_first_character && is_space) words_encountered++;
+      if (character == "." || character == "?" || character == "!" || character == "," || words_encountered > 8 && is_space) {
+        // We have to be really aggressive at the start of sentences so stuff can be seen on mobile, hence comma
+        segment.text_ = text.slice(j + 1).trimStart();
+        segmented_text.splice(0, i);
+        if (character === "," || is_space)
+          // if we cut at a comma or psace, we add a … at the beginning
+          segmented_text.unshift({
+            text_: "… ",
+            highlighted_: false
+          });
+        break outmost_loop;
+      }
+      if (is_first_character) is_first_character = false;
+    }
+  }
+  $5ea5a82e398f6f44$var$heal_holes(segmented_text); // if we added a ... there could now be a sequence that's not alternating true/false
+}
+
+function $5ea5a82e398f6f44$export$1b00d74faf266c56(text, matched_strings, loose = false) {
+  const output = [];
+  if (!text) return; // shouldn't happen but whatever
+  for (let i = 0; i < text.length; i++) {
+    const found_strings = [];
+    if (!i || text[i - 1] == " " || loose)
+      // only match at the start of a word or string, it looks weird if i.e. "we" is highlighted in "activewear
+      for (let j = 0; j < matched_strings.length; j++) {
+        const matched_string = matched_strings[j];
+        const part_in_text = text.slice(i, i + matched_string.length);
+        if (matched_string.length < 2 && !loose) continue; // don't match on single characters, i.e. "I", it looks weird
+        if (part_in_text.toLowerCase() === matched_string.toLowerCase()) found_strings.push(part_in_text); // use the casing from the text, not from typesense, can look weird otherwise
+      }
+
+    const last_index_in_output = output.length - 1;
+    if (!found_strings.length) {
+      const character = text[i];
+      if (output[last_index_in_output]?.highlighted_ === false || output.length && /\s/.test(character))
+        // always push whitespace characters to the last segment, this is because typesense doesn't see them as part of the matched tokens but we want to be able to detect "phat" matched segments
+        output[last_index_in_output].text_ += character;else output.push({
+        highlighted_: false,
+        text_: character
+      });
+    } else {
+      const longest_found_string = found_strings.reduce((a, b) => a.length > b.length ? a : b);
+      if (output[last_index_in_output]?.highlighted_) output[last_index_in_output].text_ += longest_found_string;else output.push({
+        highlighted_: true,
+        text_: longest_found_string
+      });
+      i += longest_found_string.length - 1;
+    }
+  }
+  return output;
+}
+const $f6efb1605fcb9f39$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span>`),
+  $f6efb1605fcb9f39$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=highlighted-part>`);
+function $f6efb1605fcb9f39$export$8e79c28529dbfa90(props) {
+  const segmented_text = $gVhhF$solidjs.createMemo(() => {
+    const {
+      to_highlight_: to_highlight_,
+      text_: text_
+    } = props;
+    return $5ea5a82e398f6f44$export$1b00d74faf266c56(text_, to_highlight_ ? [to_highlight_] : [], true);
+  });
+  const has_highlights = $gVhhF$solidjs.createMemo(() => segmented_text().some(segment => segment.highlighted_));
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($f6efb1605fcb9f39$var$_tmpl$);
+    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
+      get each() {
+        return segmented_text();
+      },
+      children: item => {
+        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+          get when() {
+            return item().highlighted_;
+          },
+          get fallback() {
+            return item().text_;
+          },
+          get children() {
+            const _el$2 = $gVhhF$solidjsweb.getNextElement($f6efb1605fcb9f39$var$_tmpl$2);
+            $gVhhF$solidjsweb.insert(_el$2, () => item().text_);
+            return _el$2;
+          }
+        });
+      }
+    }));
+    $gVhhF$solidjsweb.effect(_p$ => {
+      const _v$ = props.text_,
+        _v$2 = !!has_highlights();
+      _v$ !== _p$._v$ && $gVhhF$solidjsweb.setAttribute(_el$, "title", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && _el$.classList.toggle("has-match", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$;
+  })();
+}
+const $3bdc00a1353c1150$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<form class="checkboxes hierarchical"><!$><!/><!$><!/>`),
+  $3bdc00a1353c1150$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=checkbox-details><!$><!/><!$><!/>`),
+  $3bdc00a1353c1150$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<details>`),
+  $3bdc00a1353c1150$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<summary class=category-parent><div class=summary><span class=count></span><!$><!/>`);
+const $3bdc00a1353c1150$var$max_visible_without_collapsing = 15;
+const $3bdc00a1353c1150$var$show_non_collapsible_when_collapsed = 4;
+function $3bdc00a1353c1150$export$a32086fa6616eafd({
+  filter_: filter_,
+  selected_filters_: selected_filters_,
+  i18n_: i18n_,
+  view_more_button_below_group_: view_more_button_below_group_,
+  expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+  filter_query_: filter_query_
+}) {
+  let form;
+  const existing_filter = $gVhhF$solidjs.createMemo(() => {
+    const {
+      field: field,
+      op: op
+    } = filter_();
+    return selected_filters_[0]().find(({
+      field: checking_field,
+      op: checking_op
+    }) => checking_field === field && checking_op === op);
+  });
+  const show_extras = $gVhhF$solidjs.createSignal(false);
+  const is_being_searched_ = $gVhhF$solidjs.createMemo(() => !!filter_query_?.()); // If the user is searching in the filter
+  const trigger_sync_ = $3bdc00a1353c1150$var$batching_filter_state_syncer({
+    filter_: filter_,
+    existing_filter_: existing_filter,
+    selected_filters_: selected_filters_,
+    get category_structure_() {
+      return structured_categories();
+    }
+  });
+  const structured_categories = $gVhhF$solidjs.createMemo(() => {
+    const execute_when_structure_finished = [];
+    const {
+      values: values,
+      names: names,
+      counts: counts
+    } = filter_().meta;
+    const data_structure = {};
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i];
+      let pointer = data_structure;
+      let parent_ = {};
+      let created_an_object = false;
+      for (let j = 0; j < value.length; j++) {
+        const this_categories_name = value[j];
+        const obj = pointer[this_categories_name] ||= (() => {
+          const value_as_string = value.map(v => typeof v === "number" ? v + "" : v); // don't think backend will ever send numbers but technically it's allowed;
+          const created_obj = {
+            name_: names[i],
+            count_: counts?.[i],
+            parent_: parent_,
+            is_expanded_: $3bdc00a1353c1150$var$make_expanded_signal({
+              expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+              filter_value_: value_as_string,
+              is_being_searched_: is_being_searched_
+            }),
+            value_: value_as_string,
+            children_: {}
+          };
+          const {
+            signal_: signal_,
+            on_structure_complete_: on_structure_complete_
+          } = $3bdc00a1353c1150$var$create_updating_signal({
+            self_: created_obj,
+            existing_filter_: $gVhhF$solidjs.untrack(existing_filter),
+            trigger_sync_: trigger_sync_
+          });
+          execute_when_structure_finished.push(on_structure_complete_);
+          created_obj.is_checked_ = signal_;
+          parent_ = created_obj;
+          created_an_object = true;
+          return created_obj;
+        })();
+        pointer = obj.children_;
+        parent_ = obj;
+      }
+      if (!created_an_object && "value_" in parent_) {
+        // if an object was created for our "depth" in the hierarchy but not for our specific entry this means that the entry array was unsorted and looked something like
+        // [
+        //   ["Öl", "IPA"],
+        //   ["Öl", "Pale Ale"],
+        //   ["Öl", "Ale"],
+        //   ["Öl", "Mörk Lager"],
+        //   ["Öl", "Suröl"],
+        //   ["Öl", "Veteöl"],
+        //   ["Öl", "Stout och Porter"],
+        //   ["Öl"], // <- We are here, our `hierarchical_data_structure[string]`-object was created when we iterated over ["Öl", "IPA"]
+        //   ["Öl", "Ljus Lager"],
+        // ];
+        // In this case we want to just correct the name and value of the already created object, which will be in parent_
+        parent_.value_ = value.map(v => v + "");
+        parent_.name_ = names[i];
+        parent_.count_ = counts[i];
+        parent_.is_expanded_ = $3bdc00a1353c1150$var$make_expanded_signal({
+          expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+          filter_value_: parent_.value_,
+          is_being_searched_: is_being_searched_
+        });
+      }
+    }
+    while (execute_when_structure_finished.length) execute_when_structure_finished.pop()();
+    $3bdc00a1353c1150$var$expand_until_choice(data_structure);
+    $gVhhF$depictaiutilishared.dlog("CheckboxHierarchicalFilter: Recomputed structured_categories", data_structure);
+    return data_structure;
+  });
+  const some_top_level_are_hidden = $gVhhF$solidjs.createMemo(() => Object.keys(structured_categories()).length > $3bdc00a1353c1150$var$max_visible_without_collapsing);
+  const {
+    expand: expand,
+    collapse: collapse,
+    ExpandingContainer: ExpandingContainer
+  } = $4b455f60dadde8b8$export$5bad61ecde080b1f({
+    duration: 200
+  });
+  const expanding_container_els = $gVhhF$solidjsweb.createComponent(ExpandingContainer, {
+    get children() {
+      return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+        get when() {
+          return some_top_level_are_hidden();
+        },
+        get children() {
+          return $3bdc00a1353c1150$var$render_stuff($gVhhF$solidjs.createMemo(() => Object.fromEntries(Object.entries(structured_categories()).slice($3bdc00a1353c1150$var$show_non_collapsible_when_collapsed))), existing_filter, i18n_, filter_query_);
+        }
+      });
+    }
+  });
+  $gVhhF$solidjs.createRenderEffect(() => {
+    view_more_button_below_group_[1](some_top_level_are_hidden() ? $gVhhF$solidjsweb.createComponent((0, $0fe1e7efdf4200d6$export$ca21a16d65b3dd8), {
+      show_extras_: show_extras,
+      i18n_: i18n_
+    }) : []);
+  });
+  $gVhhF$solidjs.createEffect($gVhhF$depictaiutilishared.catchify(async () => {
+    if (!some_top_level_are_hidden()) {
+      await collapse();
       return;
     }
     if (show_extras[0]()) await expand();else await collapse();
@@ -2670,13 +3025,13 @@ function $3bdc00a1353c1150$export$a32086fa6616eafd({
       [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
     const _ref$ = form;
     typeof _ref$ === "function" ? $gVhhF$solidjsweb.use(_ref$, _el$) : form = _el$;
-    $gVhhF$solidjsweb.insert(_el$, () => $3bdc00a1353c1150$var$render_stuff($gVhhF$solidjs.createMemo(() => some_top_level_are_hidden() ? Object.fromEntries(Object.entries(structured_categories()).slice(0, $3bdc00a1353c1150$var$show_non_collapsible_when_collapsed)) : structured_categories()), existing_filter, i18n_), _el$3, _co$);
+    $gVhhF$solidjsweb.insert(_el$, () => $3bdc00a1353c1150$var$render_stuff($gVhhF$solidjs.createMemo(() => some_top_level_are_hidden() ? Object.fromEntries(Object.entries(structured_categories()).slice(0, $3bdc00a1353c1150$var$show_non_collapsible_when_collapsed)) : structured_categories()), existing_filter, i18n_, filter_query_), _el$3, _co$);
     $gVhhF$solidjsweb.insert(_el$, expanding_container_els, _el$5, _co$2);
     $gVhhF$solidjsweb.effect(() => _el$.classList.toggle("any-expandable", !!Object.values(structured_categories()).some(category => Object.keys(category.children_).length)));
     return _el$;
   })();
 }
-function $3bdc00a1353c1150$var$render_stuff(data, existing_filter, i18n_) {
+function $3bdc00a1353c1150$var$render_stuff(data, existing_filter, i18n_, filter_query_) {
   const keys = $gVhhF$solidjs.createMemo(() => Object.keys(data()));
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
     get each() {
@@ -2691,6 +3046,8 @@ function $3bdc00a1353c1150$var$render_stuff(data, existing_filter, i18n_) {
           // for some reason the for thing doesn't dispose of us if the key no longer exists?? so I'm doing it with show instead
           const value = $gVhhF$solidjs.createMemo(() => data()[key]); // still sometimes get undefined here even though we have <Show>
           const has_expandable = $gVhhF$solidjs.createMemo(() => !!Object.keys(value()?.children_ || {}).length);
+          const value_as_string = $gVhhF$solidjs.createMemo(() => JSON.stringify(value()?.value_));
+          const label_text = $gVhhF$solidjs.createMemo(() => value()?.name_ || value_as_string());
           return (() => {
             const _el$6 = $gVhhF$solidjsweb.getNextElement($3bdc00a1353c1150$var$_tmpl$2),
               _el$7 = _el$6.firstChild,
@@ -2699,10 +3056,17 @@ function $3bdc00a1353c1150$var$render_stuff(data, existing_filter, i18n_) {
               [_el$10, _co$4] = $gVhhF$solidjsweb.getNextMarker(_el$9.nextSibling);
             $gVhhF$solidjsweb.insert(_el$6, $gVhhF$solidjsweb.createComponent((0, $1c63082b2da848ad$export$48513f6b9f8ce62d), {
               get value_() {
-                return JSON.stringify(value()?.value_);
+                return value_as_string();
               },
               get label_() {
-                return value()?.name_;
+                return $gVhhF$solidjsweb.createComponent((0, $f6efb1605fcb9f39$export$8e79c28529dbfa90), {
+                  get text_() {
+                    return label_text();
+                  },
+                  get to_highlight_() {
+                    return filter_query_?.();
+                  }
+                });
               },
               get count_() {
                 return $gVhhF$solidjsweb.memo(() => !!has_expandable())() ? undefined : value()?.count_;
@@ -2782,7 +3146,7 @@ function $3bdc00a1353c1150$var$render_stuff(data, existing_filter, i18n_) {
                       return is_open();
                     },
                     get children() {
-                      return $3bdc00a1353c1150$var$render_stuff($gVhhF$solidjs.createMemo(() => value()?.children_ || {}), existing_filter, i18n_);
+                      return $3bdc00a1353c1150$var$render_stuff($gVhhF$solidjs.createMemo(() => value()?.children_ || {}), existing_filter, i18n_, filter_query_);
                     }
                   });
                 })();
@@ -2893,7 +3257,8 @@ function $3bdc00a1353c1150$var$create_updating_signal({
 }
 function $3bdc00a1353c1150$var$make_expanded_signal({
   expanded_hierarchical_filters_: [read_expanded_hierarchical_filters, write_expanded_hierarchical_filters],
-  filter_value_: filter_value_
+  filter_value_: filter_value_,
+  is_being_searched_: is_being_searched_
 }) {
   const index_in_expanded_filters = $gVhhF$solidjs.createMemo(() => read_expanded_hierarchical_filters().findIndex(({
     value_: value_
@@ -2932,7 +3297,9 @@ function $3bdc00a1353c1150$var$make_expanded_signal({
     defer: true
   }));
   return {
-    ui_should_show_expanded_: $gVhhF$solidjs.createMemo(() => user_choice_signal[0]() ?? get_low_precedence_expanded()),
+    ui_should_show_expanded_: $gVhhF$solidjs.createMemo(
+    // When user is searching through filters, expand everything they haven't collapsed, so they can see the results
+    () => user_choice_signal[0]() ?? (is_being_searched_() || get_low_precedence_expanded())),
     set_low_precedence_expanded_: set_low_precedence_expanded,
     set_user_expanded_: set_user_choice_expanded
   };
@@ -2961,7 +3328,9 @@ const $0ef1681699140f1a$var$gap_px = 5;
 const $0ef1681699140f1a$var$max_columns = 3;
 const $0ef1681699140f1a$export$414f6a19d38e655c = ({
   filter_: filter_,
-  selected_filters_: [get_selected_filters, set_selected_filters]
+  selected_filters_: [get_selected_filters, set_selected_filters],
+  filter_query_: filter_query_,
+  details_element_width_: details_element_width_
 }) => {
   const existing_filter = $gVhhF$solidjs.createMemo(() => {
     const {
@@ -2989,7 +3358,7 @@ const $0ef1681699140f1a$export$414f6a19d38e655c = ({
   const container_width_accessor = $gVhhF$solidjs.createMemo(() => {
     const element = container();
     if (!element) return;
-    return $e5f442fb78c98741$export$9f191182275e9ef(element);
+    return $f13855d1b951b24a$export$ebdc3711f7e02ccd(element);
   });
   const [shadow_children, set_shadow_children] = $gVhhF$solidjs.createSignal(new Set(), {
     equals: false
@@ -3000,11 +3369,11 @@ const $0ef1681699140f1a$export$414f6a19d38e655c = ({
     return _el$;
   })(); // for getting the smallest possible sizes of all the items
   $gVhhF$solidjs.createEffect(() => {
-    const container_width = container_width_accessor()?.();
-    if (container_width == undefined) return;
+    const container_width = container_width_accessor()?.() || details_element_width_();
+    if (container_width === undefined) return; // On firefox, unexpanded <details> elements' contents dont't have a width, fall back to the width of the details element itself to not have janky expanding animations due to wrong number of columns at point of expanding
     $0ef1681699140f1a$var$adjust_sizes(container_width, sizes_set(), set_cols_at_size);
   });
-  return [shadow_grid, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), {
+  return [$gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), {
     get cols_at_size() {
       return cols_at_size();
     },
@@ -3026,66 +3395,72 @@ const $0ef1681699140f1a$export$414f6a19d38e655c = ({
             const current_value = $daa394359b026187$export$325f75597868c4f0(value().value_);
             return !!data?.some(item => $daa394359b026187$export$325f75597868c4f0(item) === current_value);
           });
-          const MakeButton = attributes => (() => {
-            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.spread(_el$2, $gVhhF$solidjsweb.mergeProps(attributes, {
-              get disabled() {
-                return $gVhhF$solidjsweb.memo(() => value().count_ === 0)() && !is_selected();
-              },
-              get classList() {
-                return {
-                  minor: !is_selected(),
-                  major: is_selected(),
-                  "major-minor-transition": true
-                };
-              },
-              get onClick() {
-                return $gVhhF$depictaiutilishared.catchify(() => {
-                  const set_filter = existing_filter();
-                  const {
-                    field: field,
-                    op: op
-                  } = filter_();
-                  const base_object = set_filter ? set_filter : {
-                    op: op,
-                    field: field
-                  };
-                  const old_data = base_object.data;
-                  const new_data = [...(Array.isArray(old_data) ? [...old_data] : old_data ? [old_data] : [])];
-                  const new_filter_object = {
-                    ...base_object,
-                    data: new_data
+          const MakeButton = attributes => {
+            const label = $gVhhF$solidjs.createMemo(() => value().name_ || value().value_ + "");
+            return (() => {
+              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.spread(_el$2, $gVhhF$solidjsweb.mergeProps(attributes, {
+                get disabled() {
+                  return $gVhhF$solidjsweb.memo(() => value().count_ === 0)() && !is_selected();
+                },
+                get classList() {
+                  return {
+                    minor: !is_selected(),
+                    major: is_selected(),
+                    "major-minor-transition": true
                   };
-                  if (!is_selected()) new_filter_object.data.push(value().value_);else {
-                    const current_value_lower = $daa394359b026187$export$325f75597868c4f0(value().value_);
-                    new_filter_object.data = new_filter_object.data.filter(v => $daa394359b026187$export$325f75597868c4f0(v) !== current_value_lower);
-                  }
-                  const selected_filters = [...get_selected_filters().filter(f => f !== set_filter), ...(new_filter_object.data.length ? [new_filter_object] : [])];
-                  set_selected_filters(selected_filters);
-                });
-              }
-            }), false, true);
-            $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.runHydrationEvents();
-            return _el$2;
-          })();
+                },
+                get onClick() {
+                  return $gVhhF$depictaiutilishared.catchify(() => {
+                    const set_filter = existing_filter();
+                    const {
+                      field: field,
+                      op: op
+                    } = filter_();
+                    const base_object = set_filter ? set_filter : {
+                      op: op,
+                      field: field
+                    };
+                    const old_data = base_object.data;
+                    const new_data = [...(Array.isArray(old_data) ? [...old_data] : old_data ? [old_data] : [])];
+                    const new_filter_object = {
+                      ...base_object,
+                      data: new_data
+                    };
+                    if (!is_selected()) new_filter_object.data.push(value().value_);else {
+                      const current_value_lower = $daa394359b026187$export$325f75597868c4f0(value().value_);
+                      new_filter_object.data = new_filter_object.data.filter(v => $daa394359b026187$export$325f75597868c4f0(v) !== current_value_lower);
+                    }
+                    const selected_filters = [...get_selected_filters().filter(f => f !== set_filter), ...(new_filter_object.data.length ? [new_filter_object] : [])];
+                    set_selected_filters(selected_filters);
+                  });
+                }
+              }), false, true);
+              $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $d023ed916c84e75d$export$ba17c5b7e6dda39f), {
+                whole_text_to_display_: label,
+                searching_for_value_: () => filter_query_?.()
+              }), _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.runHydrationEvents();
+              return _el$2;
+            })();
+          };
           const invisible_size_button = $gVhhF$solidjsweb.createComponent(MakeButton, {});
-          const smallest_possible_size = $e5f442fb78c98741$export$9f191182275e9ef(invisible_size_button); // create ResizeObserver for the invisible size button where the div hugs its content
+          const smallest_possible_size = $f13855d1b951b24a$export$ebdc3711f7e02ccd(invisible_size_button); // create ResizeObserver for the invisible size button where the div hugs its content
           const sizes_value = $gVhhF$solidjs.untrack(sizes_set);
           const shadow_children_value = $gVhhF$solidjs.untrack(shadow_children);
           sizes_value.add(smallest_possible_size);
@@ -3105,7 +3480,7 @@ const $0ef1681699140f1a$export$414f6a19d38e655c = ({
         }
       });
     }
-  })];
+  }), shadow_grid];
 };
 /**
  * Calculate and apply cols_at_size overrides to fit as many items as possible in a row, evenly spaced
@@ -3171,7 +3546,8 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
   filter_: filter_,
   selected_filters_: [get_selected_filters, set_selected_filters],
   i18n_: i18n_,
-  view_more_button_below_group_: [_get_view_more_button_below_group_, set_view_more_button_below_group_]
+  view_more_button_below_group_: [_get_view_more_button_below_group_, set_view_more_button_below_group_],
+  filter_query_: filter_query_
 }) {
   // same as in CheckboxFilter, maybe we should make this DRY at some point
   const existing_filter = $gVhhF$solidjs.createMemo(() => {
@@ -3205,12 +3581,17 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
       const value = $daa394359b026187$export$325f75597868c4f0(checkbox().value_);
       return !!data?.some(item => $daa394359b026187$export$325f75597868c4f0(item) === value);
     });
+    const value = $gVhhF$solidjs.createMemo(() => checkbox().value_);
+    const label_text = $gVhhF$solidjs.createMemo(() => checkbox().name_ || value() + "");
     const input_row = $gVhhF$solidjsweb.createComponent((0, $1c63082b2da848ad$export$48513f6b9f8ce62d), {
       get value_() {
-        return checkbox().value_;
+        return value();
       },
       get label_() {
-        return checkbox().name_;
+        return $gVhhF$solidjsweb.createComponent((0, $d023ed916c84e75d$export$ba17c5b7e6dda39f), {
+          whole_text_to_display_: label_text,
+          searching_for_value_: () => filter_query_?.()
+        });
       },
       get count_() {
         return checkbox().count_;
@@ -3513,10 +3894,165 @@ function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
     }
   });
 }
+const $87d7574e1d89d69b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=22 viewBox="0 0 20 22"><path d="M19.811 20.174l-6.234-6.809a7.96 7.96 0 0 0 .923-1.179c.274-.424.502-.865.687-1.323a8.04 8.04 0 0 0 .42-1.436 7.88 7.88 0 0 0 .144-1.507c0-.526-.051-1.042-.154-1.548-.096-.506-.243-.995-.441-1.466s-.441-.919-.728-1.343a8.28 8.28 0 0 0-.984-1.21 7.86 7.86 0 0 0-1.2-.984A7.56 7.56 0 0 0 10.89.651C10.418.453 9.929.302 9.423.2S8.401.046 7.875.046 6.833.097 6.327.2 5.332.453 4.86.651a7.56 7.56 0 0 0-1.354.718c-.431.287-.831.615-1.2.984a8.28 8.28 0 0 0-.984 1.21 7.73 7.73 0 0 0-.728 1.343c-.198.472-.349.96-.451 1.466A8.31 8.31 0 0 0 0 7.921a8.31 8.31 0 0 0 .144 1.548c.103.506.253.995.451 1.466a8.08 8.08 0 0 0 .728 1.354 7.86 7.86 0 0 0 .984 1.2 7.54 7.54 0 0 0 1.2.995c.431.287.882.53 1.354.728.472.191.96.338 1.466.441a8.31 8.31 0 0 0 1.548.144c.451 0 .896-.038 1.333-.113a7.83 7.83 0 0 0 1.282-.328 7.55 7.55 0 0 0 1.2-.533 8.08 8.08 0 0 0 1.107-.749l6.245 6.809a.45.45 0 0 0 .174.123.55.55 0 0 0 .205.041.61.61 0 0 0 .195-.031c.061-.021.116-.055.164-.102.109-.096.164-.219.164-.369.007-.144-.038-.267-.133-.369zM1.046 7.921c0-.937.178-1.818.533-2.646.362-.834.851-1.559 1.466-2.174.622-.615 1.347-1.101 2.174-1.456.827-.362 1.712-.543 2.656-.543s1.829.181 2.656.543c.827.355 1.548.841 2.164 1.456.622.615 1.111 1.34 1.466 2.174a6.52 6.52 0 0 1 .543 2.646c0 .943-.181 1.829-.543 2.656a6.89 6.89 0 0 1-1.466 2.174c-.615.615-1.336 1.104-2.164 1.466-.827.356-1.712.533-2.656.533s-1.829-.178-2.656-.533c-.827-.362-1.552-.851-2.174-1.466-.615-.622-1.104-1.347-1.466-2.174-.355-.827-.533-1.712-.533-2.656z">`);
+function $87d7574e1d89d69b$export$82eafebb825fc23f(props = {}) {
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($87d7574e1d89d69b$var$_tmpl$);
+    $gVhhF$solidjsweb.spread(_el$, props, true, true);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+}
+const $47d8681015b71901$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=search-in-filters><input type=text class=query><!$><!/><button class=clear>`);
+const $47d8681015b71901$var$min_items_to_enable_filter_searching = 10; // For checkbox hierarchical we 2x this
+function $47d8681015b71901$export$4b2c5292ffe0c5dd(filter_array_, section, i18n_) {
+  const [filter_query_, set_filter_query_] = $gVhhF$solidjs.createSignal();
+  // Check if we have enough items to enable searching
+  const enable_searchability = $gVhhF$solidjs.createMemo(() => {
+    let count = 0;
+    for (const filter of filter_array_()) {
+      const type = filter.meta?.type;
+      if (type === "range") continue;
+      const length = filter.meta.values.length;
+      count += type === "checkbox-color" ? length / 2 : type === "checkbox-grid" ? length / 3 : length; // For checkbox-color we have two columns, checkbox-grid three, so we can show search later
+    }
+
+    return count >= $47d8681015b71901$var$min_items_to_enable_filter_searching;
+  });
+  const SearchThisFilterGroup_ = () => {
+    return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      get when() {
+        return enable_searchability();
+      },
+      get children() {
+        const _el$ = $gVhhF$solidjsweb.getNextElement($47d8681015b71901$var$_tmpl$),
+          _el$2 = _el$.firstChild,
+          _el$4 = _el$2.nextSibling,
+          [_el$5, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling),
+          _el$3 = _el$5.nextSibling;
+        _el$2.$$input = ev => set_filter_query_(ev.currentTarget.value);
+        $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {
+          width: "16",
+          height: "17.6",
+          "class": "search-icon"
+        }), _el$5, _co$);
+        _el$3.$$click = () => set_filter_query_();
+        $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {
+          width: "12",
+          height: "12"
+        }));
+        $gVhhF$solidjsweb.effect(_p$ => {
+          const _v$ = i18n_.search_a_filter_()(section),
+            _v$2 = filter_query_() ? "" : "none";
+          _v$ !== _p$._v$ && $gVhhF$solidjsweb.setAttribute(_el$2, "placeholder", _p$._v$ = _v$);
+          _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$3.style.setProperty("display", _v$2) : _el$3.style.removeProperty("display"));
+          return _p$;
+        }, {
+          _v$: undefined,
+          _v$2: undefined
+        });
+        $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setProperty(_el$2, "value", filter_query_() || ""));
+        $gVhhF$solidjsweb.runHydrationEvents();
+        return _el$;
+      }
+    });
+  };
+  const searched_filter_array_ = $gVhhF$solidjs.createMemo(() => {
+    const query = filter_query_();
+    if (!enable_searchability() || !query) return filter_array_();
+    const lowercase_query = query.toLowerCase();
+    const check_string_match = to_check => {
+      to_check = to_check.toLowerCase();
+      return to_check.includes(lowercase_query) || lowercase_query.includes(to_check);
+    };
+    return filter_array_().map(filter => {
+      const type = filter.meta?.type;
+      if (type === "range") return filter; // can't search in range filters and for checkbox-hierarchical we do the searching in the filter component since we have access to a hierarchical structure there
+      const meta = filter.meta;
+      const {
+        values: values,
+        names: names,
+        counts: counts
+      } = meta;
+      if (!Array.isArray(values)) return filter; // Might have to adjust this in the future, but I think these super simple filters won't need search
+      const is_hierarchical_checkbox = type === "checkbox-hierarchical";
+      // Which index of counts, values and names should be kept
+      const filtered_indexes = values.map((item, index) => {
+        const item_from_names = names?.[index];
+        if (item_from_names && !is_hierarchical_checkbox)
+          // We should use names if they exist, but sometimes backend doesn't provide any at all, and sometimes they are undefined, presumably from create_modified_filters
+          item = item_from_names;
+        if (typeof item === "number") return true;
+        if (is_hierarchical_checkbox && names)
+          // Special case for hierarchical checkboxes where we need to check if any of the names in the path match the query
+          item = item.map((_, index) => names[$47d8681015b71901$var$find_str_arr_in_str_arr_arr("findIndex", values, item.slice(0, index + 1))]);
+        if (Array.isArray(item)) return item.some(item => check_string_match(item + "")); // If any of the items in the array match, keep it
+        return check_string_match(item);
+      });
+      const new_values = values.filter((_, i) => filtered_indexes[i]);
+      if (!new_values.length) return false; // false = please delete this filter, see below
+      const new_filter_object = {
+        ...filter,
+        meta: {
+          ...meta,
+          counts: counts?.filter((_, i) => filtered_indexes[i]),
+          ...(names ? {
+            names: meta.names?.filter((_, i) => filtered_indexes[i])
+          } : {}),
+          values: new_values
+        }
+      };
+      if (is_hierarchical_checkbox) {
+        // For hierarchical checkbox we need to fill the holes created by filtering, for example if there is
+        // ["Clothes"]
+        // ["Clothes", "Blazers"]
+        // And the user searched for "blazers" we need to add back ["Clothes"] so CheckboxHierarchicalFilter doesn't get confused
+        // I explored doing the filtering there instead, but it's very hard to do it early enough before the expansion/collapsedness is calculated and check-logic is set up in relation to other items
+        // So we do it here instead
+        const new_meta = new_filter_object.meta;
+        const new_values = new_meta.values;
+        for (const value of new_values) {
+          if (!Array.isArray(value)) continue; // Shouldn't happen
+          if (value.length < 2) continue; // No parent
+          const parent = value.slice(0, -1);
+          // Check if parent exists
+          if ($47d8681015b71901$var$find_str_arr_in_str_arr_arr("some", new_values, parent)) continue; // Parent exists
+          // Otherwise, put it back
+          const index_to_restore = $47d8681015b71901$var$find_str_arr_in_str_arr_arr("findIndex", values, parent);
+          if (index_to_restore < 0) {
+            $gVhhF$depictaiutilishared.dwarn("Can't restore", parent, "to", new_values);
+            continue;
+          }
+          const current_index_of_us = new_values.findIndex(item => item === value);
+          new_values.splice(current_index_of_us, 0, values[index_to_restore]);
+          const count_to_restore = counts?.[index_to_restore];
+          if (count_to_restore) new_meta.counts?.splice(current_index_of_us, 0, count_to_restore);
+          const name_to_restore = names?.[index_to_restore];
+          if (name_to_restore) new_meta.names?.splice(current_index_of_us, 0, name_to_restore);
+        }
+      }
+      return new_filter_object;
+    }).filter(filter => filter); // Delete filters that don't have a value anymore
+  });
+
+  return {
+    SearchThisFilterGroup_: SearchThisFilterGroup_,
+    searched_filter_array_: searched_filter_array_,
+    filter_query_: filter_query_
+  };
+}
+/**
+ * Finds/whatevers what's effectively one hierarchical filter item in an array of hierarchical filter items
+ * Functions similar to this happen loads in create_modified_filters, but they have additional checks so not touching them RN
+ */
+function $47d8681015b71901$var$find_str_arr_in_str_arr_arr(operation, haystack, needle) {
+  return haystack[operation](value => value.length === needle.length && value.every((item, index) => item === needle[index]));
+}
+$gVhhF$solidjsweb.delegateEvents(["input", "click"]);
 const $aff9a96d30ed3563$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=filter-collapsible>`),
   $aff9a96d30ed3563$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class=clear-group><!$><!/><span>`),
   $aff9a96d30ed3563$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=view-more-clear><!$><!/><!$><!/>`),
-  $aff9a96d30ed3563$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=filter-collapsible-body><div class=filter-part></div><!$><!/>`),
+  $aff9a96d30ed3563$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=filter-collapsible-body><div class=filter-part><!$><!/><!$><!/></div><!$><!/>`),
   $aff9a96d30ed3563$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<details class=filter-collapsible>`),
   $aff9a96d30ed3563$var$_tmpl$6 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<summary class=filter-group-summary><div class=summary><span></span><div class=selected-w-sign><!$><!/><!$><!/>`),
   $aff9a96d30ed3563$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=ungrouped>`),
@@ -3571,6 +4107,11 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
             const filter_array_ = $gVhhF$solidjs.createMemo(() => {
               return Object.values(togglable_filters_grouped_by_collapsible())[get_section_index()];
             });
+            const {
+              SearchThisFilterGroup_: SearchThisFilterGroup_,
+              searched_filter_array_: searched_filter_array_,
+              filter_query_: filter_query_
+            } = $47d8681015b71901$export$4b2c5292ffe0c5dd(filter_array_, section_, props.i18n_);
             const is_open = $8c939a05b87fbbbc$export$ab34afce88557c0e({
               get expanded_filters_() {
                 return props.expanded_filters_;
@@ -3583,27 +4124,30 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
             // this is absolutely not accurate which is why we have the .filter below, it's just the easiest way to get the typing of the map correct
             filter_from_api]).filter(([selected_filter]) => selected_filter)));
             const a_filter_is_selected = $gVhhF$solidjs.createMemo(() => selected_filters_in_group().size);
+            const [get_details_width, set_get_details_width] = $gVhhF$solidjs.createSignal();
+            const details_element_width_ = $gVhhF$solidjs.createMemo(() => get_details_width?.()?.());
             return $gVhhF$solidjsweb.createComponent((0, $a69e505a12a77874$export$6c6d7a51fa9aa15d), {
               is_open_: is_open,
               get details_() {
                 return (() => {
-                  const _el$15 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$5);
-                  $gVhhF$solidjsweb.setAttribute(_el$15, "data-group-title", section_);
-                  return _el$15;
+                  const _el$19 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$5);
+                  $gVhhF$solidjsweb.use(element => set_get_details_width(() => $f13855d1b951b24a$export$ebdc3711f7e02ccd(element)), _el$19);
+                  $gVhhF$solidjsweb.setAttribute(_el$19, "data-group-title", section_);
+                  return _el$19;
                 })();
               },
               get summary_() {
                 return (() => {
-                  const _el$16 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$6),
-                    _el$17 = _el$16.firstChild,
-                    _el$18 = _el$17.firstChild,
-                    _el$19 = _el$18.nextSibling,
-                    _el$20 = _el$19.firstChild,
-                    [_el$21, _co$5] = $gVhhF$solidjsweb.getNextMarker(_el$20.nextSibling),
-                    _el$22 = _el$21.nextSibling,
-                    [_el$23, _co$6] = $gVhhF$solidjsweb.getNextMarker(_el$22.nextSibling);
-                  $gVhhF$solidjsweb.insert(_el$18, section_);
-                  $gVhhF$solidjsweb.insert(_el$19, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+                  const _el$20 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$6),
+                    _el$21 = _el$20.firstChild,
+                    _el$22 = _el$21.firstChild,
+                    _el$23 = _el$22.nextSibling,
+                    _el$24 = _el$23.firstChild,
+                    [_el$25, _co$7] = $gVhhF$solidjsweb.getNextMarker(_el$24.nextSibling),
+                    _el$26 = _el$25.nextSibling,
+                    [_el$27, _co$8] = $gVhhF$solidjsweb.getNextMarker(_el$26.nextSibling);
+                  $gVhhF$solidjsweb.insert(_el$22, section_);
+                  $gVhhF$solidjsweb.insert(_el$23, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
                     get when() {
                       return a_filter_is_selected();
                     },
@@ -3615,26 +4159,31 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
                         }
                       });
                     }
-                  }), _el$21, _co$5);
-                  $gVhhF$solidjsweb.insert(_el$19, $gVhhF$solidjsweb.createComponent((0, $7567511a7c3e4bd7$export$e5c2828934226505), {
+                  }), _el$25, _co$7);
+                  $gVhhF$solidjsweb.insert(_el$23, $gVhhF$solidjsweb.createComponent((0, $7567511a7c3e4bd7$export$e5c2828934226505), {
                     get expanded_() {
                       return is_open[0];
                     },
                     get i18n_() {
                       return props.i18n_;
                     }
-                  }), _el$23, _co$6);
-                  return _el$16;
+                  }), _el$27, _co$8);
+                  return _el$20;
                 })();
               },
               get children() {
                 const _el$2 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$4),
                   _el$3 = _el$2.firstChild,
-                  _el$13 = _el$3.nextSibling,
-                  [_el$14, _co$4] = $gVhhF$solidjsweb.getNextMarker(_el$13.nextSibling);
+                  _el$4 = _el$3.firstChild,
+                  [_el$5, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling),
+                  _el$6 = _el$5.nextSibling,
+                  [_el$7, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$6.nextSibling),
+                  _el$17 = _el$3.nextSibling,
+                  [_el$18, _co$6] = $gVhhF$solidjsweb.getNextMarker(_el$17.nextSibling);
+                $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent(SearchThisFilterGroup_, {}), _el$5, _co$);
                 $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
                   get each() {
-                    return filter_array_();
+                    return searched_filter_array_();
                   },
                   children: filter => $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
                     severity_: "error",
@@ -3656,11 +4205,13 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
                         get i18n_() {
                           return props.i18n_;
                         },
-                        view_more_button_below_group_: view_more_button_below_group
+                        view_more_button_below_group_: view_more_button_below_group,
+                        filter_query_: filter_query_,
+                        details_element_width_: details_element_width_
                       });
                     }
                   })
-                }));
+                }), _el$7, _co$2);
                 $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
                   get when() {
                     return $gVhhF$solidjs.createMemo(() => {
@@ -3669,22 +4220,22 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
                     })();
                   },
                   get children() {
-                    const _el$4 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$3),
-                      _el$9 = _el$4.firstChild,
-                      [_el$10, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$9.nextSibling),
-                      _el$11 = _el$10.nextSibling,
-                      [_el$12, _co$3] = $gVhhF$solidjsweb.getNextMarker(_el$11.nextSibling);
-                    $gVhhF$solidjsweb.insert(_el$4, () => view_more_button_below_group[0](), _el$10, _co$2);
-                    $gVhhF$solidjsweb.insert(_el$4, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+                    const _el$8 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$3),
+                      _el$13 = _el$8.firstChild,
+                      [_el$14, _co$4] = $gVhhF$solidjsweb.getNextMarker(_el$13.nextSibling),
+                      _el$15 = _el$14.nextSibling,
+                      [_el$16, _co$5] = $gVhhF$solidjsweb.getNextMarker(_el$15.nextSibling);
+                    $gVhhF$solidjsweb.insert(_el$8, () => view_more_button_below_group[0](), _el$14, _co$4);
+                    $gVhhF$solidjsweb.insert(_el$8, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
                       get when() {
                         return a_filter_is_selected();
                       },
                       get children() {
-                        const _el$5 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$2),
-                          _el$7 = _el$5.firstChild,
-                          [_el$8, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$7.nextSibling),
-                          _el$6 = _el$8.nextSibling;
-                        $gVhhF$solidjsweb.addEventListener(_el$5, "click", $gVhhF$depictaiutilishared.catchify(() => {
+                        const _el$9 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$2),
+                          _el$11 = _el$9.firstChild,
+                          [_el$12, _co$3] = $gVhhF$solidjsweb.getNextMarker(_el$11.nextSibling),
+                          _el$10 = _el$12.nextSibling;
+                        $gVhhF$solidjsweb.addEventListener(_el$9, "click", $gVhhF$depictaiutilishared.catchify(() => {
                           const new_filter_obj = [...props.selected_filters_[0]()];
                           for (const filter of filter_array_()) {
                             const index = new_filter_obj.findIndex(({
@@ -3695,15 +4246,15 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
                           }
                           props.selected_filters_[1](new_filter_obj);
                         }), true);
-                        $gVhhF$solidjsweb.insert(_el$5, $gVhhF$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {}), _el$8, _co$);
-                        $gVhhF$solidjsweb.insert(_el$6, () => props.i18n_.clear_individual_filter_());
+                        $gVhhF$solidjsweb.insert(_el$9, $gVhhF$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {}), _el$12, _co$3);
+                        $gVhhF$solidjsweb.insert(_el$10, () => props.i18n_.clear_individual_filter_());
                         $gVhhF$solidjsweb.runHydrationEvents();
-                        return _el$5;
+                        return _el$9;
                       }
-                    }), _el$12, _co$3);
-                    return _el$4;
+                    }), _el$16, _co$5);
+                    return _el$8;
                   }
-                }), _el$14, _co$4);
+                }), _el$18, _co$6);
                 return _el$2;
               }
             });
@@ -3716,8 +4267,8 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
       return untogglable_filters()?.length;
     },
     get children() {
-      const _el$24 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$7);
-      $gVhhF$solidjsweb.insert(_el$24, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
+      const _el$28 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$7);
+      $gVhhF$solidjsweb.insert(_el$28, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
         get each() {
           return untogglable_filters();
         },
@@ -3742,15 +4293,15 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
           }), $gVhhF$solidjsweb.memo(get_view_more_button_below_group)];
         }
       }));
-      return _el$24;
+      return _el$28;
     }
   }), $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
       return $gVhhF$solidjsweb.memo(() => !!!props.are_in_modal_ /* modal has its own clear button */)() && props.selected_filters_[0]()?.length;
     },
     get children() {
-      const _el$25 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$8);
-      $gVhhF$solidjsweb.addEventListener(_el$25, "click", $gVhhF$depictaiutilishared.catchify(() => $47e2cc552c02110c$export$8895d39404bd2bb1({
+      const _el$29 = $gVhhF$solidjsweb.getNextElement($aff9a96d30ed3563$var$_tmpl$8);
+      $gVhhF$solidjsweb.addEventListener(_el$29, "click", $gVhhF$depictaiutilishared.catchify(() => $47e2cc552c02110c$export$8895d39404bd2bb1({
         user_triggered_: true,
         selected_filters_: props.selected_filters_,
         i18n_: props.i18n_,
@@ -3758,9 +4309,9 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
         expanded_hierarchical_filters_: props.expanded_hierarchical_filters_,
         local_filter_cache_: props.local_filter_cache_
       })), true);
-      $gVhhF$solidjsweb.insert(_el$25, () => props.i18n_.clear_all_filters_from_big_button_());
+      $gVhhF$solidjsweb.insert(_el$29, () => props.i18n_.clear_all_filters_from_big_button_());
       $gVhhF$solidjsweb.runHydrationEvents();
-      return _el$25;
+      return _el$29;
     }
   })];
 }
@@ -8001,19 +8552,6 @@ const $3df11fc61432d1fd$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<s
 function $3df11fc61432d1fd$export$1c641004b5485fed() {
   return $gVhhF$solidjsweb.getNextElement($3df11fc61432d1fd$var$_tmpl$);
 }
-const $87d7574e1d89d69b$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg><path d="M19.811 20.174l-6.234-6.809a7.96 7.96 0 0 0 .923-1.179c.274-.424.502-.865.687-1.323a8.04 8.04 0 0 0 .42-1.436 7.88 7.88 0 0 0 .144-1.507c0-.526-.051-1.042-.154-1.548-.096-.506-.243-.995-.441-1.466s-.441-.919-.728-1.343a8.28 8.28 0 0 0-.984-1.21 7.86 7.86 0 0 0-1.2-.984A7.56 7.56 0 0 0 10.89.651C10.418.453 9.929.302 9.423.2S8.401.046 7.875.046 6.833.097 6.327.2 5.332.453 4.86.651a7.56 7.56 0 0 0-1.354.718c-.431.287-.831.615-1.2.984a8.28 8.28 0 0 0-.984 1.21 7.73 7.73 0 0 0-.728 1.343c-.198.472-.349.96-.451 1.466A8.31 8.31 0 0 0 0 7.921a8.31 8.31 0 0 0 .144 1.548c.103.506.253.995.451 1.466a8.08 8.08 0 0 0 .728 1.354 7.86 7.86 0 0 0 .984 1.2 7.54 7.54 0 0 0 1.2.995c.431.287.882.53 1.354.728.472.191.96.338 1.466.441a8.31 8.31 0 0 0 1.548.144c.451 0 .896-.038 1.333-.113a7.83 7.83 0 0 0 1.282-.328 7.55 7.55 0 0 0 1.2-.533 8.08 8.08 0 0 0 1.107-.749l6.245 6.809a.45.45 0 0 0 .174.123.55.55 0 0 0 .205.041.61.61 0 0 0 .195-.031c.061-.021.116-.055.164-.102.109-.096.164-.219.164-.369.007-.144-.038-.267-.133-.369zM1.046 7.921c0-.937.178-1.818.533-2.646.362-.834.851-1.559 1.466-2.174.622-.615 1.347-1.101 2.174-1.456.827-.362 1.712-.543 2.656-.543s1.829.181 2.656.543c.827.355 1.548.841 2.164 1.456.622.615 1.111 1.34 1.466 2.174a6.52 6.52 0 0 1 .543 2.646c0 .943-.181 1.829-.543 2.656a6.89 6.89 0 0 1-1.466 2.174c-.615.615-1.336 1.104-2.164 1.466-.827.356-1.712.533-2.656.533s-1.829-.178-2.656-.533c-.827-.362-1.552-.851-2.174-1.466-.615-.622-1.104-1.347-1.466-2.174-.355-.827-.533-1.712-.533-2.656z">`);
-function $87d7574e1d89d69b$export$82eafebb825fc23f(props = {}) {
-  return (() => {
-    const _el$ = $gVhhF$solidjsweb.getNextElement($87d7574e1d89d69b$var$_tmpl$);
-    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(props, {
-      "xmlns": "http://www.w3.org/2000/svg",
-      "width": "20",
-      "height": "22"
-    }), true, true);
-    $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$;
-  })();
-}
 const $66b8b9a9613c141d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class=back type=button>`),
   $66b8b9a9613c141d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=search-field><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
 function $66b8b9a9613c141d$export$b94867ecbd698f21({
@@ -8751,91 +9289,19 @@ function $9a268bf73b31a717$export$a146ac6fa8346a25({
               _v$3 !== _p$._v$3 && $gVhhF$solidjsweb.setAttribute(_el$6, "title", _p$._v$3 = _v$3);
               _v$4 !== _p$._v$4 && $gVhhF$solidjsweb.setAttribute(_el$9, "title", _p$._v$4 = _v$4);
               return _p$;
-            }, {
-              _v$: undefined,
-              _v$2: undefined,
-              _v$3: undefined,
-              _v$4: undefined
-            });
-            return _el$4;
-          })();
-        }
-      }));
-      return _el$;
-    }
-  });
-}
-const $d023ed916c84e75d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=highlighted-part>`),
-  $d023ed916c84e75d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span>`);
-function $d023ed916c84e75d$export$ba17c5b7e6dda39f({
-  whole_text_to_display_: whole_text_to_display_memo,
-  searching_for_value_: searching_for_value_memo,
-  class_: class_
-}) {
-  const [get_has_highlighted, set_has_highlighted] = $gVhhF$solidjs.createSignal(false);
-  const text_itself = $gVhhF$solidjs.createMemo(() => $gVhhF$solidjs.batch(() => {
-    set_has_highlighted(false);
-    const searching_for_value = searching_for_value_memo();
-    const whole_text_to_display_ = whole_text_to_display_memo();
-    let for_black = "";
-    let pushed_grey = false;
-    const search_q = searching_for_value;
-    if (!search_q) return whole_text_to_display_;
-    const output = [];
-    const searching_for = search_q.toLowerCase();
-    const push_black = () => {
-      if (for_black) {
-        set_has_highlighted(true);
-        output.push((() => {
-          const _el$ = $gVhhF$solidjsweb.getNextElement($d023ed916c84e75d$var$_tmpl$);
-          $gVhhF$solidjsweb.insert(_el$, for_black);
-          return _el$;
-        })()); // "black"
-        for_black = "";
-      }
-    };
-    for (let i = 0; i < whole_text_to_display_.length;) {
-      let is_whole_word = true;
-      let searching_for_but_with_texts_casing = "";
-      const i_at_start = i;
-      for (let j = 0; j < searching_for.length; i++, j++) {
-        const letter_in_suggestion = whole_text_to_display_[i];
-        if (letter_in_suggestion?.toLowerCase() !== searching_for[j]) {
-          is_whole_word = false;
-          i = i_at_start;
-          break;
+            }, {
+              _v$: undefined,
+              _v$2: undefined,
+              _v$3: undefined,
+              _v$4: undefined
+            });
+            return _el$4;
+          })();
         }
-        searching_for_but_with_texts_casing += letter_in_suggestion;
-      }
-      if (is_whole_word) {
-        push_black();
-        output.push(searching_for_but_with_texts_casing);
-        pushed_grey = true;
-      } else for_black += whole_text_to_display_[i++];
-    }
-    push_black();
-    if (!pushed_grey) {
-      set_has_highlighted(false);
-      return whole_text_to_display_;
+      }));
+      return _el$;
     }
-    return output;
-  }));
-  return (() => {
-    const _el$2 = $gVhhF$solidjsweb.getNextElement($d023ed916c84e75d$var$_tmpl$2);
-    $gVhhF$solidjsweb.className(_el$2, class_);
-    $gVhhF$solidjsweb.insert(_el$2, text_itself);
-    $gVhhF$solidjsweb.effect(_p$ => {
-      const _v$ = !!get_has_highlighted(),
-        _v$2 = whole_text_to_display_memo() /* for when line-clamped, users can see full text on hover */;
-      _v$ !== _p$._v$ && _el$2.classList.toggle("has-history-match", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && $gVhhF$solidjsweb.setAttribute(_el$2, "title", _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-    return _el$2;
-  })();
+  });
 }
 const $c0125412b4ea0c93$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=32 height=32 viewBox="0 0 256 256"><path d="M56 26.455a13.71 13.71 0 0 0-9.578 3.967A13.71 13.71 0 0 0 42.455 40v176a13.71 13.71 0 0 0 3.967 9.578A13.71 13.71 0 0 0 56 229.545h144A13.71 13.71 0 0 0 213.545 216V88a2.456 2.456 0 0 1 0-.002c.001-1.452-.597-2.895-1.623-3.922l-55.998-55.998a5.61 5.61 0 0 0-3.922-1.623 2.456 2.456 0 0 1-.002 0zm0 11.09h88A2.456 2.456 0 0 1 146.455 40v48c0 2.903 2.642 5.545 5.545 5.545h48A2.456 2.456 0 0 1 202.455 96v120a2.456 2.456 0 0 1-2.455 2.455H56A2.456 2.456 0 0 1 53.545 216V40A2.456 2.456 0 0 1 56 37.545zm103.061 11.498a2.456 2.456 0 0 1 2.676.531l28.689 28.689a2.456 2.456 0 0 1-1.736 4.191H160A2.456 2.456 0 0 1 157.545 80V51.311a2.456 2.456 0 0 1 1.516-2.268zM96 130.455c-2.903 0-5.545 2.642-5.545 5.545s2.642 5.545 5.545 5.545h64c2.903 0 5.545-2.642 5.545-5.545s-2.642-5.545-5.545-5.545zm0 32c-2.903 0-5.545 2.642-5.545 5.545s2.642 5.545 5.545 5.545h64c2.903 0 5.545-2.642 5.545-5.545s-2.642-5.545-5.545-5.545z">`);
 function $c0125412b4ea0c93$export$605674723bcc715c(props = {}) {
@@ -8874,8 +9340,8 @@ function $6b65ba8af12c5a26$export$e872e2339fb04a7f({
     type: type,
     title: title
   }) => type === (0, $3ec9e21d6b6debdd$export$3cf9497e790da491) && !filtered_previous_searches_().includes(title) // don't show the ones we already show from the history
-  ));
-
+  ) // + limit to three query suggestions, API sends more sometimes
+  .slice(0, 3));
   const not_queries_memo = $gVhhF$solidjs.createMemo(() => {
     // For the section that shows categories and content results
     // We want to limit to 3 items, and we want to show the categories first
@@ -9855,226 +10321,6 @@ function $2005eec80e40088f$export$41b4894022a3580f({
   })));
   return style_props_;
 }
-const $5ea5a82e398f6f44$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class=highlighted-part>`);
-const $5ea5a82e398f6f44$var$dont_cut_in_between_less_than_characters = 30;
-function $5ea5a82e398f6f44$export$e1a98a189fd2c0e7({
-  content_result_: content_result_,
-  key_: key_,
-  cut_when_possible_: cut_when_possible_
-}) {
-  const matched_tokens = $gVhhF$solidjs.createMemo(() => content_result_().highlights?.find(highlight => highlight.field == key_)?.matched_tokens);
-  const full_value = $gVhhF$solidjs.createMemo(() => content_result_()[key_]?.replaceAll("\n", " "));
-  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-    get when() {
-      return matched_tokens()?.length;
-    },
-    get fallback() {
-      return full_value();
-    },
-    get children() {
-      return (() => {
-        const segmented_cut_text = $gVhhF$solidjs.createMemo(() => {
-          const segmented_text = $5ea5a82e398f6f44$var$segment_text(full_value(), matched_tokens());
-          if (cut_when_possible_) $5ea5a82e398f6f44$var$cut_text(segmented_text);
-          return segmented_text;
-        });
-        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
-          get each() {
-            return segmented_cut_text();
-          },
-          children: item => {
-            return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-              get when() {
-                return item().highlighted_;
-              },
-              get fallback() {
-                return item().text_;
-              },
-              get children() {
-                const _el$ = $gVhhF$solidjsweb.getNextElement($5ea5a82e398f6f44$var$_tmpl$);
-                $gVhhF$solidjsweb.insert(_el$, () => item().text_);
-                return _el$;
-              }
-            });
-          }
-        });
-      })();
-    }
-  });
-}
-function $5ea5a82e398f6f44$var$cut_text(segmented_text) {
-  // cut away chunks of text that are not highlighted to give a google-like overview of the content
-  const highlighted_segments = segmented_text?.filter(segment => segment.highlighted_);
-  if (!segmented_text || !highlighted_segments?.length) return;
-  // We have one or more highlighted segments
-  if (highlighted_segments.length === 1) {
-    // cut away from the left until the start of the highlighted sentence if just one sentence is highlighted
-    $5ea5a82e398f6f44$var$cut_start(segmented_text.indexOf(highlighted_segments[0]), segmented_text);
-    return;
-  }
-  // We have two or more highlighted segments, take the two biggest chunks and show them + a bit text around
-  const sorted_highlighted_segments = [...highlighted_segments].sort((a, b) => b.text_.trim().length - a.text_.trim().length // trim to avoid unfair comparisons due to whitespace
-  );
-
-  const [longest_segment, next_longest_segment] = sorted_highlighted_segments;
-  // We need to cut before the first segment - possibly through other segments - and maybe between segments
-  let [index_of_first_segment, index_of_second_segment] = [segmented_text.indexOf(longest_segment), segmented_text.indexOf(next_longest_segment)].sort((a, b) => a - b);
-  $5ea5a82e398f6f44$var$cut_start(index_of_first_segment, segmented_text);
-  // update indexes since we might have removed segments
-  [index_of_first_segment, index_of_second_segment] = [segmented_text.indexOf(longest_segment), segmented_text.indexOf(next_longest_segment)].sort((a, b) => a - b);
-  let number_of_characters_between_segments = 0;
-  for (let i = index_of_first_segment + 1; i < index_of_second_segment; i++) {
-    const segment = segmented_text[i];
-    number_of_characters_between_segments += segment.text_.length;
-  }
-  if (number_of_characters_between_segments < $5ea5a82e398f6f44$var$dont_cut_in_between_less_than_characters)
-    // don't cut if there are less than 30 characters between the two segments
-    return;
-  // We have more than 50 characters between the two segments, cut between them
-  const [split_start_segment, split_start_character] = $5ea5a82e398f6f44$var$find_split_point(index_of_first_segment, index_of_second_segment, segmented_text);
-  const [split_end_segment, split_end_character] = $5ea5a82e398f6f44$var$find_split_point(index_of_second_segment, index_of_first_segment, segmented_text);
-  if (split_start_segment === undefined || split_end_segment === undefined ||
-  // identical split point, or split end before split start, can't do anything
-  split_start_segment == split_end_segment && split_start_character >= split_end_character || split_start_segment > split_end_segment) return;
-  const dots_segment = {
-    text_: " … ",
-    highlighted_: false
-  };
-  const split_and_dotted_values = segmented_text.flatMap((segment, i) => {
-    if (i < split_start_segment || i > split_end_segment) return segment;
-    const text = segment.text_;
-    if (i == split_end_segment && i == split_start_segment) return [{
-      ...segment,
-      text_: text.slice(0, split_start_character).trimEnd()
-    }, dots_segment, {
-      ...segment,
-      text_: text.slice(split_end_character + 1, text.length).trimStart()
-    }];else if (i == split_start_segment) {
-      segment.text_ = text.slice(0, split_start_character).trimEnd(); // this would be split_start_character + 1, but we want to remove the last "dot" because . ... looks weird
-      return segment;
-    } else if (i == split_end_segment) return [dots_segment, {
-      ...segment,
-      text_: text.slice(split_end_character + 1, text.length).trimStart()
-    }];
-    return []; // remove all segments inbetween
-  });
-
-  segmented_text.splice(0, segmented_text.length, ...split_and_dotted_values); // Sorry…
-  $5ea5a82e398f6f44$var$heal_holes(segmented_text);
-}
-function $5ea5a82e398f6f44$var$heal_holes(segmented_text) {
-  // try to heal "holes" created in the segments so there are only alternating segments
-  const segments_to_delete = new Set();
-  for (let i = 0; i < segmented_text.length; i++) {
-    const segment = segmented_text[i];
-    let previous_segment;
-    for (let j = i - 1; j >= 0; j--) {
-      previous_segment = segmented_text[j];
-      // Don't write to a segment that's marked for deletion or the contents we write to it will be deleted
-      if (!segments_to_delete.has(previous_segment)) break;
-    }
-    if (previous_segment?.highlighted_ && segment.highlighted_ || previous_segment?.highlighted_ === false && segment.highlighted_ === false) {
-      previous_segment.text_ += segment.text_; // IDK if this ever happens
-      segments_to_delete.add(segment);
-    }
-  }
-  for (const segment of segments_to_delete) {
-    const index = segmented_text.indexOf(segment);
-    segmented_text.splice(index, 1);
-  }
-}
-function $5ea5a82e398f6f44$var$find_split_point(index_of_start_segment, index_of_end_segment, segmented_text, be_very_aggressive = true) {
-  const should_loop_backwards = index_of_start_segment > index_of_end_segment;
-  const step = should_loop_backwards ? -1 : 1;
-  const desperate_split_attempts = [":", ";", ","];
-  while (desperate_split_attempts.length) {
-    const split_point_between_words = [];
-    // for the middle also try to split with a few more characters if the default ones don't work over a full run
-    const desperate_split_attempt = desperate_split_attempts.pop();
-    let is_first_character = true;
-    for (let i = index_of_start_segment + step; should_loop_backwards ? i > index_of_end_segment : i < index_of_end_segment; i += step) {
-      const segment = segmented_text[i];
-      const text = segment.text_;
-      for (let j = should_loop_backwards ? text.length - 1 : 0; should_loop_backwards ? j >= 0 : j < text.length; j += step) {
-        const character = text[j];
-        if (character == "." || character == "?" || character == "!" || character == desperate_split_attempt) return [i, j]; // segment index, character index
-        if (is_first_character) is_first_character = false;else if (be_very_aggressive && character == " ") {
-          split_point_between_words.push([i, j]);
-          if (split_point_between_words.length > 3)
-            // We can't find a split point, so we'll just split between words
-            // This is because for UI reasons we only want to show 2 lines of text, so we need to be very aggressive with getting the second match soon
-            return split_point_between_words[1];
-        }
-      }
-    }
-  }
-  return [];
-}
-function $5ea5a82e398f6f44$var$cut_start(cut_left_of_index, segmented_text) {
-  // Cut the start of the text to bring the first matching token
-  let is_first_character = false;
-  let words_encountered = 0;
-  outmost_loop: for (let i = cut_left_of_index - 1; i >= 0; i--) {
-    const segment = segmented_text[i];
-    // We assume that two adjacent highlighted segments don't exist and have been merged if they were to have existed
-    const text = segment.text_;
-    for (let j = text.length - 1; j >= 0; j--) {
-      const character = text[j];
-      const is_space = character == " ";
-      if (!is_first_character && is_space) words_encountered++;
-      if (character == "." || character == "?" || character == "!" || character == "," || words_encountered > 8 && is_space) {
-        // We have to be really aggressive at the start of sentences so stuff can be seen on mobile, hence comma
-        segment.text_ = text.slice(j + 1).trimStart();
-        segmented_text.splice(0, i);
-        if (character === "," || is_space)
-          // if we cut at a comma or psace, we add a … at the beginning
-          segmented_text.unshift({
-            text_: "… ",
-            highlighted_: false
-          });
-        break outmost_loop;
-      }
-      if (is_first_character) is_first_character = false;
-    }
-  }
-  $5ea5a82e398f6f44$var$heal_holes(segmented_text); // if we added a ... there could now be a sequence that's not alternating true/false
-}
-
-function $5ea5a82e398f6f44$var$segment_text(text, matched_strings) {
-  // segment text where the matched strings are highlighted sections
-  const output = [];
-  if (!text) return; // shouldn't happen but whatever
-  for (let i = 0; i < text.length; i++) {
-    const found_strings = [];
-    if (!i || text[i - 1] == " ")
-      // only match at the start of a word or string, it looks weird if i.e. "we" is highlighted in "activewear
-      for (let j = 0; j < matched_strings.length; j++) {
-        const matched_string = matched_strings[j];
-        const part_in_text = text.slice(i, i + matched_string.length);
-        if (matched_string.length < 2) continue; // don't match on single characters, i.e. "I", it looks weird
-        if (part_in_text.toLowerCase() === matched_string.toLowerCase()) found_strings.push(part_in_text); // use the casing from the text, not from typesense, can look weird otherwise
-      }
-
-    const last_index_in_output = output.length - 1;
-    if (!found_strings.length) {
-      const character = text[i];
-      if (output[last_index_in_output]?.highlighted_ === false || output.length && /\s/.test(character))
-        // always push whitespace characters to the last segment, this is because typesense doesn't see them as part of the matched tokens but we want to be able to detect "phat" matched segments
-        output[last_index_in_output].text_ += character;else output.push({
-        highlighted_: false,
-        text_: character
-      });
-    } else {
-      const longest_found_string = found_strings.reduce((a, b) => a.length > b.length ? a : b);
-      if (output[last_index_in_output]?.highlighted_) output[last_index_in_output].text_ += longest_found_string;else output.push({
-        highlighted_: true,
-        text_: longest_found_string
-      });
-      i += longest_found_string.length - 1;
-    }
-  }
-  return output;
-}
 const $76227de40be817e5$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a>`),
   $76227de40be817e5$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
   $76227de40be817e5$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="description line-clamp">`),