@depict-ai/ui 2.1.12 → 2.1.13

package/latest/index.js

@@ -1,12 +1,12 @@
 import { add_to_version_info as $9HbP8$add_to_version_info, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, dlog as $9HbP8$dlog, queueMacroTask as $9HbP8$queueMacroTask, catchify as $9HbP8$catchify, is_safari as $9HbP8$is_safari, observer as $9HbP8$observer, dwarn as $9HbP8$dwarn, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, slider_fractional_factory as $9HbP8$slider_fractional_factory, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, report as $9HbP8$report, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, javascript_media_query as $9HbP8$javascript_media_query, use_href_accessor as $9HbP8$use_href_accessor, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { createComponent as $9HbP8$createComponent, insert as $9HbP8$insert, template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, effect as $9HbP8$effect, style as $9HbP8$style, spread as $9HbP8$spread, setAttribute as $9HbP8$setAttribute, mergeProps as $9HbP8$mergeProps1, isServer as $9HbP8$isServer, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, getNextMarker as $9HbP8$getNextMarker, classList as $9HbP8$classList, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use, setProperty as $9HbP8$setProperty } from "solid-js/web";
+import { createComponent as $9HbP8$createComponent, insert as $9HbP8$insert, template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, effect as $9HbP8$effect, style as $9HbP8$style, spread as $9HbP8$spread, setAttribute as $9HbP8$setAttribute, mergeProps as $9HbP8$mergeProps1, isServer as $9HbP8$isServer, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, getNextMarker as $9HbP8$getNextMarker, classList as $9HbP8$classList, use as $9HbP8$use, Dynamic as $9HbP8$Dynamic, setProperty as $9HbP8$setProperty } from "solid-js/web";
 import { createSignal as $9HbP8$createSignal, getOwner as $9HbP8$getOwner, createEffect as $9HbP8$createEffect, runWithOwner as $9HbP8$runWithOwner, onCleanup as $9HbP8$onCleanup, createMemo as $9HbP8$createMemo, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, mergeProps as $9HbP8$mergeProps, Show as $9HbP8$Show, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, untrack as $9HbP8$untrack, createRenderEffect as $9HbP8$createRenderEffect, Index as $9HbP8$Index, createRoot as $9HbP8$createRoot, For as $9HbP8$For, createUniqueId as $9HbP8$createUniqueId, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
 
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.12";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.13";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -447,24 +447,30 @@ function $f32e14878e75af51$export$6649caad96ef8870({
 
 /** @jsxImportSource solid-js */
 
-function $0fdb37d8ddabef25$export$9f191182275e9ef(what_to_watch) {
-  const [size, setSize] = $9HbP8$createSignal();
+function $2449872a62a75a20$export$ebdc3711f7e02ccd(what_to_watch) {
+  const [width, setWidth] = $9HbP8$createSignal();
   const resizeObserver = new ResizeObserver($9HbP8$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, $9HbP8$observer).onexists(what_to_watch, ({
     element: element
-  }) => requestAnimationFrame($9HbP8$catchify(() => resizeObserver.observe(element))));
+  }) => requestAnimationFrame($9HbP8$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);
+  })));
   $9HbP8$onCleanup(() => {
     resizeObserver.disconnect();
     disconnect();
   });
-  return size;
+  return width;
 }
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
@@ -1450,16 +1456,11 @@ function $e9342fb3ac73a54a$export$8895d39404bd2bb1(props) {
   if (delay_toast_) return show_configured_toast;else show_configured_toast();
 }
 $9HbP8$delegateEvents(["click"]);
-const $19976a74d273070d$var$_tmpl$ = /*#__PURE__*/$9HbP8$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 $19976a74d273070d$var$_tmpl$ = /*#__PURE__*/$9HbP8$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 $19976a74d273070d$export$3b621d86b1566b2(props = {}) {
   return (() => {
     const _el$ = $9HbP8$getNextElement($19976a74d273070d$var$_tmpl$);
-    $9HbP8$spread(_el$, $9HbP8$mergeProps1(props, {
-      "xmlns": "http://www.w3.org/2000/svg",
-      "width": "21.064",
-      "height": "21.047",
-      "viewBox": "0 0 21.064 21.064"
-    }), true, true);
+    $9HbP8$spread(_el$, props, true, true);
     $9HbP8$runHydrationEvents();
     return _el$;
   })();
@@ -1773,7 +1774,7 @@ $9HbP8$delegateEvents(["click"]);
 const $49b79728e7d9e2a1$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span class=count>`),
   $49b79728e7d9e2a1$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<label class=input-row><div class=left><input type=checkbox><span class=custom-indicator></span><span class="text line-clamp"></span></div><!$><!/>`);
 const $49b79728e7d9e2a1$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 = $9HbP8$createMemo(() => props.count_);
   const label = $9HbP8$createMemo(() => props.label_);
   const checked = $9HbP8$createMemo(() => props.checked_);
@@ -1866,6 +1867,78 @@ function $67b173f9db427028$export$ca21a16d65b3dd8({
   })();
 }
 $9HbP8$delegateEvents(["click"]);
+const $f3213c0640246d58$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span class=highlighted-part>`),
+  $f3213c0640246d58$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<span>`);
+function $f3213c0640246d58$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] = $9HbP8$createSignal(false);
+  const text_itself = $9HbP8$createMemo(() => $9HbP8$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$ = $9HbP8$getNextElement($f3213c0640246d58$var$_tmpl$);
+          $9HbP8$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 = $9HbP8$getNextElement($f3213c0640246d58$var$_tmpl$2);
+    $9HbP8$className(_el$2, class_);
+    $9HbP8$insert(_el$2, text_itself);
+    $9HbP8$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 && $9HbP8$setAttribute(_el$2, "title", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$2;
+  })();
+}
 const $a4601e6bea3ed1e6$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<form class=checkboxes><!$><!/><!$><!/>`);
 const $a4601e6bea3ed1e6$var$max_visible_without_collapsing = 15;
 const $a4601e6bea3ed1e6$var$show_non_collapsible_when_collapsed = 4;
@@ -1873,7 +1946,8 @@ function $a4601e6bea3ed1e6$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 = $9HbP8$createMemo(() => {
     const {
@@ -1901,12 +1975,18 @@ function $a4601e6bea3ed1e6$export$dd948f91abc3a1c4({
       const value = $91aa8ee9f431800d$export$325f75597868c4f0(checkbox().value_);
       return !!data?.some(item => $91aa8ee9f431800d$export$325f75597868c4f0(item) === value);
     });
+    const value = $9HbP8$createMemo(() => checkbox().value_);
     return $9HbP8$createComponent((0, $49b79728e7d9e2a1$export$48513f6b9f8ce62d), {
       get value_() {
-        return checkbox().value_;
+        return value();
       },
       get label_() {
-        return checkbox().name_;
+        return $9HbP8$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
+          get whole_text_to_display_() {
+            return $9HbP8$createMemo(() => checkbox().name_ || value());
+          },
+          searching_for_value_: () => filter_query_?.()
+        });
       },
       get count_() {
         return checkbox().count_;
@@ -1998,7 +2078,8 @@ const $eb8d9bf3b5700c26$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<form class=r
   $eb8d9bf3b5700c26$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<label class=input-row><div class=left><input type=radio><span class=custom-indicator></span><!$><!/></div><!$><!/>`);
 function $eb8d9bf3b5700c26$export$430444115f70a734({
   selected_filters_: selected_filters_,
-  filter_: filter_
+  filter_: filter_,
+  filter_query_: filter_query_
 }) {
   const radio_name = $9HbP8$make_random_classname();
   const existing_filter = $9HbP8$createMemo(() => {
@@ -2020,6 +2101,12 @@ function $eb8d9bf3b5700c26$export$430444115f70a734({
       children: (value, index) => {
         const random_selector = $9HbP8$make_random_classname();
         const count = $9HbP8$createMemo(() => filter_().meta.counts?.[index]);
+        const label = $9HbP8$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 = $9HbP8$getNextElement($eb8d9bf3b5700c26$var$_tmpl$3),
             _el$3 = _el$2.firstChild,
@@ -2044,11 +2131,9 @@ function $eb8d9bf3b5700c26$export$430444115f70a734({
           }));
           $9HbP8$setAttribute(_el$4, "id", random_selector);
           $9HbP8$setAttribute(_el$4, "name", radio_name);
-          $9HbP8$insert(_el$3, $9HbP8$createMemo(() => {
-            const name = filter_().meta?.names?.[index];
-            if (name) return name;
-            const v = value();
-            return Array.isArray(v) ? v.join(" - ") : v;
+          $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
+            whole_text_to_display_: label,
+            searching_for_value_: () => filter_query_?.()
           }), _el$7, _co$);
           $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
             get when() {
@@ -2080,7 +2165,8 @@ const $a6b08770e164eced$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=ra
 function $a6b08770e164eced$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
@@ -2459,141 +2545,410 @@ function $0b6bc2f8309efa8a$export$e5c2828934226505({
   });
   return outer_div;
 }
-const $1c8cac76cb67e9af$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<form class="checkboxes hierarchical"><!$><!/><!$><!/>`),
-  $1c8cac76cb67e9af$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=checkbox-details><!$><!/><!$><!/>`),
-  $1c8cac76cb67e9af$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<details>`),
-  $1c8cac76cb67e9af$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<summary class=category-parent><div class=summary><span class=count></span><!$><!/>`);
-const $1c8cac76cb67e9af$var$max_visible_without_collapsing = 15;
-const $1c8cac76cb67e9af$var$show_non_collapsible_when_collapsed = 4;
-function $1c8cac76cb67e9af$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 $522a690e0e2bd46d$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span class=highlighted-part>`);
+const $522a690e0e2bd46d$var$dont_cut_in_between_less_than_characters = 30;
+function $522a690e0e2bd46d$export$e1a98a189fd2c0e7({
+  content_result_: content_result_,
+  key_: key_,
+  cut_when_possible_: cut_when_possible_
 }) {
-  let form;
-  const existing_filter = $9HbP8$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 = $9HbP8$createSignal(false);
-  const trigger_sync_ = $1c8cac76cb67e9af$var$batching_filter_state_syncer({
-    filter_: filter_,
-    existing_filter_: existing_filter,
-    selected_filters_: selected_filters_,
-    get category_structure_() {
-      return structured_categories();
-    }
-  });
-  const structured_categories = $9HbP8$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_: $1c8cac76cb67e9af$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_
-          } = $1c8cac76cb67e9af$var$create_updating_signal({
-            self_: created_obj,
-            existing_filter_: $9HbP8$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_ = $1c8cac76cb67e9af$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()();
-    $1c8cac76cb67e9af$var$expand_until_choice(data_structure);
-    $9HbP8$dlog("CheckboxHierarchicalFilter: Recomputed structured_categories", data_structure);
-    return data_structure;
-  });
-  const some_top_level_are_hidden = $9HbP8$createMemo(() => Object.keys(structured_categories()).length > $1c8cac76cb67e9af$var$max_visible_without_collapsing);
-  const {
-    expand: expand,
-    collapse: collapse,
-    ExpandingContainer: ExpandingContainer
-  } = $24e27fab9c821b86$export$5bad61ecde080b1f({
-    duration: 200
-  });
-  const expanding_container_els = $9HbP8$createComponent(ExpandingContainer, {
+  const matched_tokens = $9HbP8$createMemo(() => content_result_().highlights?.find(highlight => highlight.field == key_)?.matched_tokens);
+  const full_value = $9HbP8$createMemo(() => content_result_()[key_]?.replaceAll("\n", " "));
+  return $9HbP8$createComponent((0, $9HbP8$Show), {
+    get when() {
+      return matched_tokens()?.length;
+    },
+    get fallback() {
+      return full_value();
+    },
     get children() {
-      return $9HbP8$createComponent((0, $9HbP8$Show), {
-        get when() {
-          return some_top_level_are_hidden();
-        },
-        get children() {
-          return $1c8cac76cb67e9af$var$render_stuff($9HbP8$createMemo(() => Object.fromEntries(Object.entries(structured_categories()).slice($1c8cac76cb67e9af$var$show_non_collapsible_when_collapsed))), existing_filter, i18n_);
-        }
-      });
+      return (() => {
+        const segmented_cut_text = $9HbP8$createMemo(() => {
+          const segmented_text = $522a690e0e2bd46d$export$1b00d74faf266c56(full_value(), matched_tokens());
+          if (cut_when_possible_) $522a690e0e2bd46d$var$cut_text(segmented_text);
+          return segmented_text;
+        });
+        return $9HbP8$createComponent((0, $9HbP8$Index), {
+          get each() {
+            return segmented_cut_text();
+          },
+          children: item => {
+            return $9HbP8$createComponent((0, $9HbP8$Show), {
+              get when() {
+                return item().highlighted_;
+              },
+              get fallback() {
+                return item().text_;
+              },
+              get children() {
+                const _el$ = $9HbP8$getNextElement($522a690e0e2bd46d$var$_tmpl$);
+                $9HbP8$insert(_el$, () => item().text_);
+                return _el$;
+              }
+            });
+          }
+        });
+      })();
     }
   });
-  $9HbP8$createRenderEffect(() => {
-    view_more_button_below_group_[1](some_top_level_are_hidden() ? $9HbP8$createComponent((0, $67b173f9db427028$export$ca21a16d65b3dd8), {
-      show_extras_: show_extras,
-      i18n_: i18n_
-    }) : []);
-  });
-  $9HbP8$createEffect($9HbP8$catchify(async () => {
-    if (!some_top_level_are_hidden()) {
-      await collapse();
+}
+function $522a690e0e2bd46d$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
+    $522a690e0e2bd46d$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);
+  $522a690e0e2bd46d$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 < $522a690e0e2bd46d$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] = $522a690e0e2bd46d$var$find_split_point(index_of_first_segment, index_of_second_segment, segmented_text);
+  const [split_end_segment, split_end_character] = $522a690e0e2bd46d$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…
+  $522a690e0e2bd46d$var$heal_holes(segmented_text);
+}
+function $522a690e0e2bd46d$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 $522a690e0e2bd46d$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 $522a690e0e2bd46d$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;
+    }
+  }
+  $522a690e0e2bd46d$var$heal_holes(segmented_text); // if we added a ... there could now be a sequence that's not alternating true/false
+}
+
+function $522a690e0e2bd46d$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 $3ec2b9489931358d$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span>`),
+  $3ec2b9489931358d$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<span class=highlighted-part>`);
+function $3ec2b9489931358d$export$8e79c28529dbfa90(props) {
+  const segmented_text = $9HbP8$createMemo(() => {
+    const {
+      to_highlight_: to_highlight_,
+      text_: text_
+    } = props;
+    return $522a690e0e2bd46d$export$1b00d74faf266c56(text_, to_highlight_ ? [to_highlight_] : [], true);
+  });
+  const has_highlights = $9HbP8$createMemo(() => segmented_text().some(segment => segment.highlighted_));
+  return (() => {
+    const _el$ = $9HbP8$getNextElement($3ec2b9489931358d$var$_tmpl$);
+    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $9HbP8$Index), {
+      get each() {
+        return segmented_text();
+      },
+      children: item => {
+        return $9HbP8$createComponent((0, $9HbP8$Show), {
+          get when() {
+            return item().highlighted_;
+          },
+          get fallback() {
+            return item().text_;
+          },
+          get children() {
+            const _el$2 = $9HbP8$getNextElement($3ec2b9489931358d$var$_tmpl$2);
+            $9HbP8$insert(_el$2, () => item().text_);
+            return _el$2;
+          }
+        });
+      }
+    }));
+    $9HbP8$effect(_p$ => {
+      const _v$ = props.text_,
+        _v$2 = !!has_highlights();
+      _v$ !== _p$._v$ && $9HbP8$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 $1c8cac76cb67e9af$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<form class="checkboxes hierarchical"><!$><!/><!$><!/>`),
+  $1c8cac76cb67e9af$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=checkbox-details><!$><!/><!$><!/>`),
+  $1c8cac76cb67e9af$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<details>`),
+  $1c8cac76cb67e9af$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<summary class=category-parent><div class=summary><span class=count></span><!$><!/>`);
+const $1c8cac76cb67e9af$var$max_visible_without_collapsing = 15;
+const $1c8cac76cb67e9af$var$show_non_collapsible_when_collapsed = 4;
+function $1c8cac76cb67e9af$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 = $9HbP8$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 = $9HbP8$createSignal(false);
+  const is_being_searched_ = $9HbP8$createMemo(() => !!filter_query_?.()); // If the user is searching in the filter
+  const trigger_sync_ = $1c8cac76cb67e9af$var$batching_filter_state_syncer({
+    filter_: filter_,
+    existing_filter_: existing_filter,
+    selected_filters_: selected_filters_,
+    get category_structure_() {
+      return structured_categories();
+    }
+  });
+  const structured_categories = $9HbP8$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_: $1c8cac76cb67e9af$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_
+          } = $1c8cac76cb67e9af$var$create_updating_signal({
+            self_: created_obj,
+            existing_filter_: $9HbP8$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_ = $1c8cac76cb67e9af$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()();
+    $1c8cac76cb67e9af$var$expand_until_choice(data_structure);
+    $9HbP8$dlog("CheckboxHierarchicalFilter: Recomputed structured_categories", data_structure);
+    return data_structure;
+  });
+  const some_top_level_are_hidden = $9HbP8$createMemo(() => Object.keys(structured_categories()).length > $1c8cac76cb67e9af$var$max_visible_without_collapsing);
+  const {
+    expand: expand,
+    collapse: collapse,
+    ExpandingContainer: ExpandingContainer
+  } = $24e27fab9c821b86$export$5bad61ecde080b1f({
+    duration: 200
+  });
+  const expanding_container_els = $9HbP8$createComponent(ExpandingContainer, {
+    get children() {
+      return $9HbP8$createComponent((0, $9HbP8$Show), {
+        get when() {
+          return some_top_level_are_hidden();
+        },
+        get children() {
+          return $1c8cac76cb67e9af$var$render_stuff($9HbP8$createMemo(() => Object.fromEntries(Object.entries(structured_categories()).slice($1c8cac76cb67e9af$var$show_non_collapsible_when_collapsed))), existing_filter, i18n_, filter_query_);
+        }
+      });
+    }
+  });
+  $9HbP8$createRenderEffect(() => {
+    view_more_button_below_group_[1](some_top_level_are_hidden() ? $9HbP8$createComponent((0, $67b173f9db427028$export$ca21a16d65b3dd8), {
+      show_extras_: show_extras,
+      i18n_: i18n_
+    }) : []);
+  });
+  $9HbP8$createEffect($9HbP8$catchify(async () => {
+    if (!some_top_level_are_hidden()) {
+      await collapse();
       return;
     }
     if (show_extras[0]()) await expand();else await collapse();
@@ -2606,13 +2961,13 @@ function $1c8cac76cb67e9af$export$a32086fa6616eafd({
       [_el$5, _co$2] = $9HbP8$getNextMarker(_el$4.nextSibling);
     const _ref$ = form;
     typeof _ref$ === "function" ? $9HbP8$use(_ref$, _el$) : form = _el$;
-    $9HbP8$insert(_el$, () => $1c8cac76cb67e9af$var$render_stuff($9HbP8$createMemo(() => some_top_level_are_hidden() ? Object.fromEntries(Object.entries(structured_categories()).slice(0, $1c8cac76cb67e9af$var$show_non_collapsible_when_collapsed)) : structured_categories()), existing_filter, i18n_), _el$3, _co$);
+    $9HbP8$insert(_el$, () => $1c8cac76cb67e9af$var$render_stuff($9HbP8$createMemo(() => some_top_level_are_hidden() ? Object.fromEntries(Object.entries(structured_categories()).slice(0, $1c8cac76cb67e9af$var$show_non_collapsible_when_collapsed)) : structured_categories()), existing_filter, i18n_, filter_query_), _el$3, _co$);
     $9HbP8$insert(_el$, expanding_container_els, _el$5, _co$2);
     $9HbP8$effect(() => _el$.classList.toggle("any-expandable", !!Object.values(structured_categories()).some(category => Object.keys(category.children_).length)));
     return _el$;
   })();
 }
-function $1c8cac76cb67e9af$var$render_stuff(data, existing_filter, i18n_) {
+function $1c8cac76cb67e9af$var$render_stuff(data, existing_filter, i18n_, filter_query_) {
   const keys = $9HbP8$createMemo(() => Object.keys(data()));
   return $9HbP8$createComponent((0, $9HbP8$For), {
     get each() {
@@ -2627,6 +2982,8 @@ function $1c8cac76cb67e9af$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 = $9HbP8$createMemo(() => data()[key]); // still sometimes get undefined here even though we have <Show>
           const has_expandable = $9HbP8$createMemo(() => !!Object.keys(value()?.children_ || {}).length);
+          const value_as_string = $9HbP8$createMemo(() => JSON.stringify(value()?.value_));
+          const label_text = $9HbP8$createMemo(() => value()?.name_ || value_as_string());
           return (() => {
             const _el$6 = $9HbP8$getNextElement($1c8cac76cb67e9af$var$_tmpl$2),
               _el$7 = _el$6.firstChild,
@@ -2635,10 +2992,17 @@ function $1c8cac76cb67e9af$var$render_stuff(data, existing_filter, i18n_) {
               [_el$10, _co$4] = $9HbP8$getNextMarker(_el$9.nextSibling);
             $9HbP8$insert(_el$6, $9HbP8$createComponent((0, $49b79728e7d9e2a1$export$48513f6b9f8ce62d), {
               get value_() {
-                return JSON.stringify(value()?.value_);
+                return value_as_string();
               },
               get label_() {
-                return value()?.name_;
+                return $9HbP8$createComponent((0, $3ec2b9489931358d$export$8e79c28529dbfa90), {
+                  get text_() {
+                    return label_text();
+                  },
+                  get to_highlight_() {
+                    return filter_query_?.();
+                  }
+                });
               },
               get count_() {
                 return $9HbP8$memo(() => !!has_expandable())() ? undefined : value()?.count_;
@@ -2718,7 +3082,7 @@ function $1c8cac76cb67e9af$var$render_stuff(data, existing_filter, i18n_) {
                       return is_open();
                     },
                     get children() {
-                      return $1c8cac76cb67e9af$var$render_stuff($9HbP8$createMemo(() => value()?.children_ || {}), existing_filter, i18n_);
+                      return $1c8cac76cb67e9af$var$render_stuff($9HbP8$createMemo(() => value()?.children_ || {}), existing_filter, i18n_, filter_query_);
                     }
                   });
                 })();
@@ -2829,7 +3193,8 @@ function $1c8cac76cb67e9af$var$create_updating_signal({
 }
 function $1c8cac76cb67e9af$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 = $9HbP8$createMemo(() => read_expanded_hierarchical_filters().findIndex(({
     value_: value_
@@ -2868,7 +3233,9 @@ function $1c8cac76cb67e9af$var$make_expanded_signal({
     defer: true
   }));
   return {
-    ui_should_show_expanded_: $9HbP8$createMemo(() => user_choice_signal[0]() ?? get_low_precedence_expanded()),
+    ui_should_show_expanded_: $9HbP8$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
   };
@@ -2897,7 +3264,9 @@ const $93716a9ad0dea854$var$gap_px = 5;
 const $93716a9ad0dea854$var$max_columns = 3;
 const $93716a9ad0dea854$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 = $9HbP8$createMemo(() => {
     const {
@@ -2925,7 +3294,7 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
   const container_width_accessor = $9HbP8$createMemo(() => {
     const element = container();
     if (!element) return;
-    return $0fdb37d8ddabef25$export$9f191182275e9ef(element);
+    return $2449872a62a75a20$export$ebdc3711f7e02ccd(element);
   });
   const [shadow_children, set_shadow_children] = $9HbP8$createSignal(new Set(), {
     equals: false
@@ -2936,11 +3305,11 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
     return _el$;
   })(); // for getting the smallest possible sizes of all the items
   $9HbP8$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
     $93716a9ad0dea854$var$adjust_sizes(container_width, sizes_set(), set_cols_at_size);
   });
-  return [shadow_grid, $9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), {
+  return [$9HbP8$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), {
     get cols_at_size() {
       return cols_at_size();
     },
@@ -2962,66 +3331,72 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
             const current_value = $91aa8ee9f431800d$export$325f75597868c4f0(value().value_);
             return !!data?.some(item => $91aa8ee9f431800d$export$325f75597868c4f0(item) === current_value);
           });
-          const MakeButton = attributes => (() => {
-            const _el$2 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$3),
-              _el$5 = _el$2.firstChild,
-              [_el$6, _co$] = $9HbP8$getNextMarker(_el$5.nextSibling),
-              _el$7 = _el$6.nextSibling,
-              [_el$8, _co$2] = $9HbP8$getNextMarker(_el$7.nextSibling);
-            $9HbP8$spread(_el$2, $9HbP8$mergeProps1(attributes, {
-              get disabled() {
-                return $9HbP8$memo(() => value().count_ === 0)() && !is_selected();
-              },
-              get classList() {
-                return {
-                  minor: !is_selected(),
-                  major: is_selected(),
-                  "major-minor-transition": true
-                };
-              },
-              get onClick() {
-                return $9HbP8$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 = $9HbP8$createMemo(() => value().name_ || value().value_ + "");
+            return (() => {
+              const _el$2 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$3),
+                _el$5 = _el$2.firstChild,
+                [_el$6, _co$] = $9HbP8$getNextMarker(_el$5.nextSibling),
+                _el$7 = _el$6.nextSibling,
+                [_el$8, _co$2] = $9HbP8$getNextMarker(_el$7.nextSibling);
+              $9HbP8$spread(_el$2, $9HbP8$mergeProps1(attributes, {
+                get disabled() {
+                  return $9HbP8$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 = $91aa8ee9f431800d$export$325f75597868c4f0(value().value_);
-                    new_filter_object.data = new_filter_object.data.filter(v => $91aa8ee9f431800d$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);
-            $9HbP8$insert(_el$2, () => value().value_, _el$6, _co$);
-            $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
-              get when() {
-                return value().count_ != undefined;
-              },
-              get children() {
-                const _el$3 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$2),
-                  _el$4 = _el$3.firstChild;
-                $9HbP8$insert(_el$4, () => value().count_);
-                return _el$3;
-              }
-            }), _el$8, _co$2);
-            $9HbP8$runHydrationEvents();
-            return _el$2;
-          })();
+                },
+                get onClick() {
+                  return $9HbP8$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 = $91aa8ee9f431800d$export$325f75597868c4f0(value().value_);
+                      new_filter_object.data = new_filter_object.data.filter(v => $91aa8ee9f431800d$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);
+              $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
+                whole_text_to_display_: label,
+                searching_for_value_: () => filter_query_?.()
+              }), _el$6, _co$);
+              $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
+                get when() {
+                  return value().count_ != undefined;
+                },
+                get children() {
+                  const _el$3 = $9HbP8$getNextElement($93716a9ad0dea854$var$_tmpl$2),
+                    _el$4 = _el$3.firstChild;
+                  $9HbP8$insert(_el$4, () => value().count_);
+                  return _el$3;
+                }
+              }), _el$8, _co$2);
+              $9HbP8$runHydrationEvents();
+              return _el$2;
+            })();
+          };
           const invisible_size_button = $9HbP8$createComponent(MakeButton, {});
-          const smallest_possible_size = $0fdb37d8ddabef25$export$9f191182275e9ef(invisible_size_button); // create ResizeObserver for the invisible size button where the div hugs its content
+          const smallest_possible_size = $2449872a62a75a20$export$ebdc3711f7e02ccd(invisible_size_button); // create ResizeObserver for the invisible size button where the div hugs its content
           const sizes_value = $9HbP8$untrack(sizes_set);
           const shadow_children_value = $9HbP8$untrack(shadow_children);
           sizes_value.add(smallest_possible_size);
@@ -3041,7 +3416,7 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
         }
       });
     }
-  })];
+  }), shadow_grid];
 };
 /**
  * Calculate and apply cols_at_size overrides to fit as many items as possible in a row, evenly spaced
@@ -3107,7 +3482,8 @@ function $e731d52d97444b7c$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 = $9HbP8$createMemo(() => {
@@ -3141,12 +3517,17 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
       const value = $91aa8ee9f431800d$export$325f75597868c4f0(checkbox().value_);
       return !!data?.some(item => $91aa8ee9f431800d$export$325f75597868c4f0(item) === value);
     });
+    const value = $9HbP8$createMemo(() => checkbox().value_);
+    const label_text = $9HbP8$createMemo(() => checkbox().name_ || value() + "");
     const input_row = $9HbP8$createComponent((0, $49b79728e7d9e2a1$export$48513f6b9f8ce62d), {
       get value_() {
-        return checkbox().value_;
+        return value();
       },
       get label_() {
-        return checkbox().name_;
+        return $9HbP8$createComponent((0, $f3213c0640246d58$export$ba17c5b7e6dda39f), {
+          whole_text_to_display_: label_text,
+          searching_for_value_: () => filter_query_?.()
+        });
       },
       get count_() {
         return checkbox().count_;
@@ -3449,10 +3830,165 @@ function $d134eae24341b4a1$export$89c6019e4baa40b1(props) {
     }
   });
 }
+const $16f0ed5ea30d8d9c$var$_tmpl$ = /*#__PURE__*/$9HbP8$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 $16f0ed5ea30d8d9c$export$82eafebb825fc23f(props = {}) {
+  return (() => {
+    const _el$ = $9HbP8$getNextElement($16f0ed5ea30d8d9c$var$_tmpl$);
+    $9HbP8$spread(_el$, props, true, true);
+    $9HbP8$runHydrationEvents();
+    return _el$;
+  })();
+}
+const $e01b34f289b61435$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=search-in-filters><input type=text class=query><!$><!/><button class=clear>`);
+const $e01b34f289b61435$var$min_items_to_enable_filter_searching = 10; // For checkbox hierarchical we 2x this
+function $e01b34f289b61435$export$4b2c5292ffe0c5dd(filter_array_, section, i18n_) {
+  const [filter_query_, set_filter_query_] = $9HbP8$createSignal();
+  // Check if we have enough items to enable searching
+  const enable_searchability = $9HbP8$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 >= $e01b34f289b61435$var$min_items_to_enable_filter_searching;
+  });
+  const SearchThisFilterGroup_ = () => {
+    return $9HbP8$createComponent((0, $9HbP8$Show), {
+      get when() {
+        return enable_searchability();
+      },
+      get children() {
+        const _el$ = $9HbP8$getNextElement($e01b34f289b61435$var$_tmpl$),
+          _el$2 = _el$.firstChild,
+          _el$4 = _el$2.nextSibling,
+          [_el$5, _co$] = $9HbP8$getNextMarker(_el$4.nextSibling),
+          _el$3 = _el$5.nextSibling;
+        _el$2.$$input = ev => set_filter_query_(ev.currentTarget.value);
+        $9HbP8$insert(_el$, $9HbP8$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {
+          width: "16",
+          height: "17.6",
+          "class": "search-icon"
+        }), _el$5, _co$);
+        _el$3.$$click = () => set_filter_query_();
+        $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {
+          width: "12",
+          height: "12"
+        }));
+        $9HbP8$effect(_p$ => {
+          const _v$ = i18n_.search_a_filter_()(section),
+            _v$2 = filter_query_() ? "" : "none";
+          _v$ !== _p$._v$ && $9HbP8$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
+        });
+        $9HbP8$effect(() => $9HbP8$setProperty(_el$2, "value", filter_query_() || ""));
+        $9HbP8$runHydrationEvents();
+        return _el$;
+      }
+    });
+  };
+  const searched_filter_array_ = $9HbP8$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[$e01b34f289b61435$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 ($e01b34f289b61435$var$find_str_arr_in_str_arr_arr("some", new_values, parent)) continue; // Parent exists
+          // Otherwise, put it back
+          const index_to_restore = $e01b34f289b61435$var$find_str_arr_in_str_arr_arr("findIndex", values, parent);
+          if (index_to_restore < 0) {
+            $9HbP8$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 $e01b34f289b61435$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]));
+}
+$9HbP8$delegateEvents(["input", "click"]);
 const $fab07f52c9861732$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=filter-collapsible>`),
   $fab07f52c9861732$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<button class=clear-group><!$><!/><span>`),
   $fab07f52c9861732$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=view-more-clear><!$><!/><!$><!/>`),
-  $fab07f52c9861732$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class=filter-collapsible-body><div class=filter-part></div><!$><!/>`),
+  $fab07f52c9861732$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class=filter-collapsible-body><div class=filter-part><!$><!/><!$><!/></div><!$><!/>`),
   $fab07f52c9861732$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<details class=filter-collapsible>`),
   $fab07f52c9861732$var$_tmpl$6 = /*#__PURE__*/$9HbP8$template(`<summary class=filter-group-summary><div class=summary><span></span><div class=selected-w-sign><!$><!/><!$><!/>`),
   $fab07f52c9861732$var$_tmpl$7 = /*#__PURE__*/$9HbP8$template(`<div class=ungrouped>`),
@@ -3507,6 +4043,11 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
             const filter_array_ = $9HbP8$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_
+            } = $e01b34f289b61435$export$4b2c5292ffe0c5dd(filter_array_, section_, props.i18n_);
             const is_open = $84d6cd10bb7b1589$export$ab34afce88557c0e({
               get expanded_filters_() {
                 return props.expanded_filters_;
@@ -3519,27 +4060,30 @@ function $fab07f52c9861732$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 = $9HbP8$createMemo(() => selected_filters_in_group().size);
+            const [get_details_width, set_get_details_width] = $9HbP8$createSignal();
+            const details_element_width_ = $9HbP8$createMemo(() => get_details_width?.()?.());
             return $9HbP8$createComponent((0, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d), {
               is_open_: is_open,
               get details_() {
                 return (() => {
-                  const _el$15 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$5);
-                  $9HbP8$setAttribute(_el$15, "data-group-title", section_);
-                  return _el$15;
+                  const _el$19 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$5);
+                  $9HbP8$use(element => set_get_details_width(() => $2449872a62a75a20$export$ebdc3711f7e02ccd(element)), _el$19);
+                  $9HbP8$setAttribute(_el$19, "data-group-title", section_);
+                  return _el$19;
                 })();
               },
               get summary_() {
                 return (() => {
-                  const _el$16 = $9HbP8$getNextElement($fab07f52c9861732$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] = $9HbP8$getNextMarker(_el$20.nextSibling),
-                    _el$22 = _el$21.nextSibling,
-                    [_el$23, _co$6] = $9HbP8$getNextMarker(_el$22.nextSibling);
-                  $9HbP8$insert(_el$18, section_);
-                  $9HbP8$insert(_el$19, $9HbP8$createComponent((0, $9HbP8$Show), {
+                  const _el$20 = $9HbP8$getNextElement($fab07f52c9861732$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] = $9HbP8$getNextMarker(_el$24.nextSibling),
+                    _el$26 = _el$25.nextSibling,
+                    [_el$27, _co$8] = $9HbP8$getNextMarker(_el$26.nextSibling);
+                  $9HbP8$insert(_el$22, section_);
+                  $9HbP8$insert(_el$23, $9HbP8$createComponent((0, $9HbP8$Show), {
                     get when() {
                       return a_filter_is_selected();
                     },
@@ -3551,26 +4095,31 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
                         }
                       });
                     }
-                  }), _el$21, _co$5);
-                  $9HbP8$insert(_el$19, $9HbP8$createComponent((0, $0b6bc2f8309efa8a$export$e5c2828934226505), {
+                  }), _el$25, _co$7);
+                  $9HbP8$insert(_el$23, $9HbP8$createComponent((0, $0b6bc2f8309efa8a$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 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$4),
                   _el$3 = _el$2.firstChild,
-                  _el$13 = _el$3.nextSibling,
-                  [_el$14, _co$4] = $9HbP8$getNextMarker(_el$13.nextSibling);
+                  _el$4 = _el$3.firstChild,
+                  [_el$5, _co$] = $9HbP8$getNextMarker(_el$4.nextSibling),
+                  _el$6 = _el$5.nextSibling,
+                  [_el$7, _co$2] = $9HbP8$getNextMarker(_el$6.nextSibling),
+                  _el$17 = _el$3.nextSibling,
+                  [_el$18, _co$6] = $9HbP8$getNextMarker(_el$17.nextSibling);
+                $9HbP8$insert(_el$3, $9HbP8$createComponent(SearchThisFilterGroup_, {}), _el$5, _co$);
                 $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Index), {
                   get each() {
-                    return filter_array_();
+                    return searched_filter_array_();
                   },
                   children: filter => $9HbP8$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
                     severity_: "error",
@@ -3592,11 +4141,13 @@ function $fab07f52c9861732$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);
                 $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
                   get when() {
                     return $9HbP8$createMemo(() => {
@@ -3605,22 +4156,22 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
                     })();
                   },
                   get children() {
-                    const _el$4 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$3),
-                      _el$9 = _el$4.firstChild,
-                      [_el$10, _co$2] = $9HbP8$getNextMarker(_el$9.nextSibling),
-                      _el$11 = _el$10.nextSibling,
-                      [_el$12, _co$3] = $9HbP8$getNextMarker(_el$11.nextSibling);
-                    $9HbP8$insert(_el$4, () => view_more_button_below_group[0](), _el$10, _co$2);
-                    $9HbP8$insert(_el$4, $9HbP8$createComponent((0, $9HbP8$Show), {
+                    const _el$8 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$3),
+                      _el$13 = _el$8.firstChild,
+                      [_el$14, _co$4] = $9HbP8$getNextMarker(_el$13.nextSibling),
+                      _el$15 = _el$14.nextSibling,
+                      [_el$16, _co$5] = $9HbP8$getNextMarker(_el$15.nextSibling);
+                    $9HbP8$insert(_el$8, () => view_more_button_below_group[0](), _el$14, _co$4);
+                    $9HbP8$insert(_el$8, $9HbP8$createComponent((0, $9HbP8$Show), {
                       get when() {
                         return a_filter_is_selected();
                       },
                       get children() {
-                        const _el$5 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$2),
-                          _el$7 = _el$5.firstChild,
-                          [_el$8, _co$] = $9HbP8$getNextMarker(_el$7.nextSibling),
-                          _el$6 = _el$8.nextSibling;
-                        $9HbP8$addEventListener(_el$5, "click", $9HbP8$catchify(() => {
+                        const _el$9 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$2),
+                          _el$11 = _el$9.firstChild,
+                          [_el$12, _co$3] = $9HbP8$getNextMarker(_el$11.nextSibling),
+                          _el$10 = _el$12.nextSibling;
+                        $9HbP8$addEventListener(_el$9, "click", $9HbP8$catchify(() => {
                           const new_filter_obj = [...props.selected_filters_[0]()];
                           for (const filter of filter_array_()) {
                             const index = new_filter_obj.findIndex(({
@@ -3631,15 +4182,15 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
                           }
                           props.selected_filters_[1](new_filter_obj);
                         }), true);
-                        $9HbP8$insert(_el$5, $9HbP8$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {}), _el$8, _co$);
-                        $9HbP8$insert(_el$6, () => props.i18n_.clear_individual_filter_());
+                        $9HbP8$insert(_el$9, $9HbP8$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {}), _el$12, _co$3);
+                        $9HbP8$insert(_el$10, () => props.i18n_.clear_individual_filter_());
                         $9HbP8$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;
               }
             });
@@ -3652,8 +4203,8 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
       return untogglable_filters()?.length;
     },
     get children() {
-      const _el$24 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$7);
-      $9HbP8$insert(_el$24, $9HbP8$createComponent((0, $9HbP8$Index), {
+      const _el$28 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$7);
+      $9HbP8$insert(_el$28, $9HbP8$createComponent((0, $9HbP8$Index), {
         get each() {
           return untogglable_filters();
         },
@@ -3678,15 +4229,15 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
           }), $9HbP8$memo(get_view_more_button_below_group)];
         }
       }));
-      return _el$24;
+      return _el$28;
     }
   }), $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
       return $9HbP8$memo(() => !!!props.are_in_modal_ /* modal has its own clear button */)() && props.selected_filters_[0]()?.length;
     },
     get children() {
-      const _el$25 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$8);
-      $9HbP8$addEventListener(_el$25, "click", $9HbP8$catchify(() => $e9342fb3ac73a54a$export$8895d39404bd2bb1({
+      const _el$29 = $9HbP8$getNextElement($fab07f52c9861732$var$_tmpl$8);
+      $9HbP8$addEventListener(_el$29, "click", $9HbP8$catchify(() => $e9342fb3ac73a54a$export$8895d39404bd2bb1({
         user_triggered_: true,
         selected_filters_: props.selected_filters_,
         i18n_: props.i18n_,
@@ -3694,9 +4245,9 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
         expanded_hierarchical_filters_: props.expanded_hierarchical_filters_,
         local_filter_cache_: props.local_filter_cache_
       })), true);
-      $9HbP8$insert(_el$25, () => props.i18n_.clear_all_filters_from_big_button_());
+      $9HbP8$insert(_el$29, () => props.i18n_.clear_all_filters_from_big_button_());
       $9HbP8$runHydrationEvents();
-      return _el$25;
+      return _el$29;
     }
   })];
 }
@@ -7937,19 +8488,6 @@ const $22e59517c2ec94d3$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=ht
 function $22e59517c2ec94d3$export$1c641004b5485fed() {
   return $9HbP8$getNextElement($22e59517c2ec94d3$var$_tmpl$);
 }
-const $16f0ed5ea30d8d9c$var$_tmpl$ = /*#__PURE__*/$9HbP8$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 $16f0ed5ea30d8d9c$export$82eafebb825fc23f(props = {}) {
-  return (() => {
-    const _el$ = $9HbP8$getNextElement($16f0ed5ea30d8d9c$var$_tmpl$);
-    $9HbP8$spread(_el$, $9HbP8$mergeProps1(props, {
-      "xmlns": "http://www.w3.org/2000/svg",
-      "width": "20",
-      "height": "22"
-    }), true, true);
-    $9HbP8$runHydrationEvents();
-    return _el$;
-  })();
-}
 const $5285d2814d0fac0c$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class=back type=button>`),
   $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$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 $5285d2814d0fac0c$export$b94867ecbd698f21({
@@ -8687,91 +9225,19 @@ function $7ad3a93cbe6fa208$export$a146ac6fa8346a25({
               _v$3 !== _p$._v$3 && $9HbP8$setAttribute(_el$6, "title", _p$._v$3 = _v$3);
               _v$4 !== _p$._v$4 && $9HbP8$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 $f3213c0640246d58$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span class=highlighted-part>`),
-  $f3213c0640246d58$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<span>`);
-function $f3213c0640246d58$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] = $9HbP8$createSignal(false);
-  const text_itself = $9HbP8$createMemo(() => $9HbP8$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$ = $9HbP8$getNextElement($f3213c0640246d58$var$_tmpl$);
-          $9HbP8$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 = $9HbP8$getNextElement($f3213c0640246d58$var$_tmpl$2);
-    $9HbP8$className(_el$2, class_);
-    $9HbP8$insert(_el$2, text_itself);
-    $9HbP8$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 && $9HbP8$setAttribute(_el$2, "title", _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-    return _el$2;
-  })();
+  });
 }
 const $190927650b4840eb$var$_tmpl$ = /*#__PURE__*/$9HbP8$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 $190927650b4840eb$export$605674723bcc715c(props = {}) {
@@ -8810,8 +9276,8 @@ function $cea52f6b24092f05$export$e872e2339fb04a7f({
     type: type,
     title: title
   }) => type === (0, $a0eb8b431ec1f87b$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 = $9HbP8$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
@@ -9791,226 +10257,6 @@ function $1801dbce7adb3f19$export$41b4894022a3580f({
   })));
   return style_props_;
 }
-const $522a690e0e2bd46d$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<span class=highlighted-part>`);
-const $522a690e0e2bd46d$var$dont_cut_in_between_less_than_characters = 30;
-function $522a690e0e2bd46d$export$e1a98a189fd2c0e7({
-  content_result_: content_result_,
-  key_: key_,
-  cut_when_possible_: cut_when_possible_
-}) {
-  const matched_tokens = $9HbP8$createMemo(() => content_result_().highlights?.find(highlight => highlight.field == key_)?.matched_tokens);
-  const full_value = $9HbP8$createMemo(() => content_result_()[key_]?.replaceAll("\n", " "));
-  return $9HbP8$createComponent((0, $9HbP8$Show), {
-    get when() {
-      return matched_tokens()?.length;
-    },
-    get fallback() {
-      return full_value();
-    },
-    get children() {
-      return (() => {
-        const segmented_cut_text = $9HbP8$createMemo(() => {
-          const segmented_text = $522a690e0e2bd46d$var$segment_text(full_value(), matched_tokens());
-          if (cut_when_possible_) $522a690e0e2bd46d$var$cut_text(segmented_text);
-          return segmented_text;
-        });
-        return $9HbP8$createComponent((0, $9HbP8$Index), {
-          get each() {
-            return segmented_cut_text();
-          },
-          children: item => {
-            return $9HbP8$createComponent((0, $9HbP8$Show), {
-              get when() {
-                return item().highlighted_;
-              },
-              get fallback() {
-                return item().text_;
-              },
-              get children() {
-                const _el$ = $9HbP8$getNextElement($522a690e0e2bd46d$var$_tmpl$);
-                $9HbP8$insert(_el$, () => item().text_);
-                return _el$;
-              }
-            });
-          }
-        });
-      })();
-    }
-  });
-}
-function $522a690e0e2bd46d$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
-    $522a690e0e2bd46d$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);
-  $522a690e0e2bd46d$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 < $522a690e0e2bd46d$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] = $522a690e0e2bd46d$var$find_split_point(index_of_first_segment, index_of_second_segment, segmented_text);
-  const [split_end_segment, split_end_character] = $522a690e0e2bd46d$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…
-  $522a690e0e2bd46d$var$heal_holes(segmented_text);
-}
-function $522a690e0e2bd46d$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 $522a690e0e2bd46d$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 $522a690e0e2bd46d$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;
-    }
-  }
-  $522a690e0e2bd46d$var$heal_holes(segmented_text); // if we added a ... there could now be a sequence that's not alternating true/false
-}
-
-function $522a690e0e2bd46d$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 $b2bf2cdcff8142d8$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<a>`),
   $b2bf2cdcff8142d8$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div>`),
   $b2bf2cdcff8142d8$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class="description line-clamp">`),
@@ -11400,4 +11646,4 @@ const $4690a06c8489dcd0$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $4690a06c8489dcd0$export$864d304a0bc46829 = "2%";
 const $4690a06c8489dcd0$export$7bf543b9d9be2c22 = (0, $e4615ecd1849548f$export$b91cec6bdc6b32a1);
 $9HbP8$add_to_version_info("ui", (0, $ec291e0010116877$export$83d89fbfd8236492));
-export { $4147651646da990a$export$916e6850778505f6 as strip_encoded_filter_and_sort, $4147651646da990a$export$58aa3f171519b6d7 as encode_filters, $4147651646da990a$export$f934fa24c3a86811 as decode_filters, $660070e2a394b3c3$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $011607bdf658f807$export$e68cff63f76bd15b as ListingProvider, $011607bdf658f807$export$8d0c4fdbb05a2f2e as useListing, $660070e2a394b3c3$export$e4b984597b71e989 as ShopifyContainedImage, $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $0fdb37d8ddabef25$export$9f191182275e9ef as make_accurate_size_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version };
+export { $4147651646da990a$export$916e6850778505f6 as strip_encoded_filter_and_sort, $4147651646da990a$export$58aa3f171519b6d7 as encode_filters, $4147651646da990a$export$f934fa24c3a86811 as decode_filters, $660070e2a394b3c3$export$d7b7ab832c20e2f4 as shopifyContainedImageContextSymbol, $011607bdf658f807$export$e68cff63f76bd15b as ListingProvider, $011607bdf658f807$export$8d0c4fdbb05a2f2e as useListing, $660070e2a394b3c3$export$e4b984597b71e989 as ShopifyContainedImage, $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $2449872a62a75a20$export$ebdc3711f7e02ccd as make_accurate_width_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version };