@depict-ai/ui 4.3.13 → 4.4.0

package/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.3.13";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.4.0";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1330,9 +1330,9 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
               is_replace_: false,
               event_: event_
             });
-            if (event_.defaultPrevented)
-              // We single-page-navigated in this tab, close the look
-              setUserWantsExpanded(false);
+            if (!event_.defaultPrevented)
+              // If the user opened in a new tab, prevent the event from propagating to the parent which would close the look
+              event_.stopImmediatePropagation();
           }
         });
       }
@@ -1693,10 +1693,7 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
       let {
         target: target
       } = _ref2;
-      // Don't toggle when clicking on the links
-      const selector = "a[href]";
-      if (target.matches(selector) || target.closest(selector)) return;
-      setUserWantsExpanded(prev => !prev);
+      return setUserWantsExpanded(prev => !prev);
     }), true);
     _el$.classList.toggle("placeholder", !!!display_);
     $8tj43$runHydrationEvents();
@@ -3514,10 +3511,13 @@ let $c3820807ac1e6fd7$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c3820807ac1e6fd7$export$44dad306455dddf || ($c3820807ac1e6fd7$export$44dad306455dddf = {}));
 var $584c06c09cf4609d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<button class=back type=button>`),
-  $584c06c09cf4609d$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class=search-field role=search><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
+  $584c06c09cf4609d$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<button type=button class=clear>`),
+  $584c06c09cf4609d$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=spacer>`),
+  $584c06c09cf4609d$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<button class="submit major"type=button>`),
+  $584c06c09cf4609d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<div class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
 function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   let {
-    search_field_value_: search_field_value_,
+    search_field_value_: [searchFieldValue, setSearchFieldValue],
     input_field_ref_: input_field_ref_,
     field_element_ref_: field_element_ref_,
     submit_query_: submit_query_,
@@ -3542,30 +3542,105 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   })); // focus field on render
   const owner_of_field_element = $8tj43$getOwner();
   const isNewModal = BackIcon_[(0, $b026fa9c9c904a98$export$1ea76ea778b880dd)] === 2;
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $8tj43$createSignal();
+  const getBackButtonWidth = () => {
+    var _backButtonWidthAcces;
+    return (_backButtonWidthAcces = backButtonWidthAccessor()) === null || _backButtonWidthAcces === void 0 ? void 0 : _backButtonWidthAcces();
+  };
+  const searchFieldEmpty = $8tj43$createMemo(() => !searchFieldValue());
+  const BackButton = () => $8tj43$createComponent((0, $8tj43$Show), {
+    when: on_back_,
+    get children() {
+      var _el$ = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$);
+      $8tj43$spread(_el$, $8tj43$mergeProps({
+        get onClick() {
+          return $8tj43$catchify(on_back_);
+        },
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $fc830a7ee59416ef$export$ebdc3711f7e02ccd(el));
+          $8tj43$onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), false, true);
+      $8tj43$insert(_el$, isNewModal ? $8tj43$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {}) : $8tj43$createComponent(BackIcon_, {}));
+      $8tj43$runHydrationEvents();
+      return _el$;
+    }
+  });
+  const ClearButton = () => (() => {
+    var _el$2 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$2);
+    $8tj43$spread(_el$2, $8tj43$mergeProps({
+      get classList() {
+        return {
+          empty: searchFieldEmpty()
+        };
+      },
+      get style() {
+        return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+      },
+      get onClick() {
+        return $8tj43$catchify(() => {
+          if (isNewModal && searchFieldEmpty()) return;
+          setSearchFieldValue("");
+          clear_filters_(true);
+          if (!disabled_) input_element.focus();
+        });
+      }
+    }, () => searchFieldEmpty() ? {
+      "aria-hidden": "true"
+    } : {
+      title: i18n_.clear_filters_query_sorting_after_submit_()
+    }), false, true);
+    $8tj43$insert(_el$2, isNewModal ? $8tj43$createComponent((0, $8tj43$Show), {
+      get when() {
+        return !searchFieldEmpty();
+      },
+      get fallback() {
+        return $8tj43$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {});
+      },
+      get children() {
+        return $8tj43$createComponent(BackIcon_, {});
+      }
+    }) : $8tj43$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {}));
+    $8tj43$runHydrationEvents();
+    return _el$2;
+  })();
   return (() => {
-    var _el$ = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$2),
-      _el$7 = _el$.firstChild,
+    var _el$3 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$5),
+      _el$12 = _el$3.firstChild,
+      [_el$13, _co$3] = $8tj43$getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $8tj43$getNextMarker(_el$14.nextSibling),
+      _el$5 = _el$15.nextSibling,
+      _el$7 = _el$5.firstChild,
       [_el$8, _co$] = $8tj43$getNextMarker(_el$7.nextSibling),
-      _el$3 = _el$8.nextSibling,
-      _el$4 = _el$3.firstChild,
-      _el$5 = _el$4.nextSibling,
-      _el$6 = _el$3.nextSibling;
-    $8tj43$insert(_el$, $8tj43$createComponent((0, $8tj43$Show), {
-      when: on_back_,
+      _el$6 = _el$8.nextSibling,
+      _el$9 = _el$6.nextSibling,
+      [_el$10, _co$2] = $8tj43$getNextMarker(_el$9.nextSibling),
+      _el$16 = _el$5.nextSibling,
+      [_el$17, _co$5] = $8tj43$getNextMarker(_el$16.nextSibling),
+      _el$18 = _el$17.nextSibling,
+      [_el$19, _co$6] = $8tj43$getNextMarker(_el$18.nextSibling);
+    _el$3.classList.toggle("in-modal", !!!!on_back_);
+    $8tj43$insert(_el$3, $8tj43$createComponent((0, $8tj43$Show), {
+      get when() {
+        return getBackButtonWidth() !== undefined && on_back_;
+      },
       get children() {
-        var _el$2 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$);
-        $8tj43$addEventListener(_el$2, "click", $8tj43$catchify(on_back_), true);
-        $8tj43$insert(_el$2, $8tj43$createComponent(BackIcon_, {}));
-        $8tj43$effect(() => $8tj43$setAttribute(_el$2, "aria-label", i18n_.back_()));
-        $8tj43$runHydrationEvents();
-        return _el$2;
+        var _el$4 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$3);
+        $8tj43$effect(() => (getBackButtonWidth(), _el$4.style.setProperty("width", getBackButtonWidth() + "px")));
+        return _el$4;
       }
-    }), _el$8, _co$);
+    }), _el$13, _co$3);
+    $8tj43$insert(_el$3, !isNewModal && $8tj43$createComponent(BackButton, {}), _el$15, _co$4);
     $8tj43$use(el => {
       field_div = el;
       field_element_ref_ === null || field_element_ref_ === void 0 || field_element_ref_(el);
-    }, _el$3);
-    $8tj43$addEventListener(_el$3, "click", $8tj43$catchify(_ref2 => {
+    }, _el$5);
+    $8tj43$addEventListener(_el$5, "click", $8tj43$catchify(_ref2 => {
       let {
         target: target,
         currentTarget: currentTarget,
@@ -3590,7 +3665,8 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
         }
       }
     }), true);
-    _el$4.$$pointerdown = _ref3 => {
+    $8tj43$insert(_el$5, isNewModal && $8tj43$createComponent(ClearButton, {}), _el$8, _co$);
+    _el$6.$$pointerdown = _ref3 => {
       let {
         pointerType: pointerType
       } = _ref3;
@@ -3610,7 +3686,7 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
         $8tj43$runWithOwner(owner_of_field_element, () => $8tj43$onCleanup(() => window.removeEventListener("pointerup", handler)));
       }
     };
-    $8tj43$addEventListener(_el$4, "select", $8tj43$catchify(() => {
+    $8tj43$addEventListener(_el$6, "select", $8tj43$catchify(() => {
       if (disabled_)
         // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
         return;
@@ -3622,14 +3698,14 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
           once: true
         });
     }));
-    $8tj43$addEventListener(_el$4, "input", $8tj43$catchify(() => {
+    $8tj43$addEventListener(_el$6, "input", $8tj43$catchify(() => {
       const {
         value: value
       } = input_element;
       if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
-      search_field_value_[1](value);
+      setSearchFieldValue(value);
     }), true);
-    $8tj43$addEventListener(_el$4, "keydown", $8tj43$catchify(e => {
+    $8tj43$addEventListener(_el$6, "keydown", $8tj43$catchify(e => {
       if (disabled_) {
         if (e.key !== "Tab" && e.key !== "Shift")
           // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
@@ -3643,45 +3719,36 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       input_element = el;
       input_field_ref_ === null || input_field_ref_ === void 0 || input_field_ref_(el);
     });
-    typeof _ref$ === "function" && $8tj43$use(_ref$, _el$4);
-    _el$4.classList.toggle("has-adjacent-back-button", !!!!on_back_);
-    $8tj43$addEventListener(_el$5, "click", $8tj43$catchify(() => {
-      search_field_value_[1]("");
-      clear_filters_(true);
-      if (!disabled_) input_element.focus();
-    }), true);
-    $8tj43$insert(_el$5, $8tj43$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {}));
-    var _ref$2 = submit_button_ref_;
-    typeof _ref$2 === "function" ? $8tj43$use(_ref$2, _el$6) : submit_button_ref_ = _el$6;
-    $8tj43$spread(_el$6, $8tj43$mergeProps({
-      get onClick() {
-        return $8tj43$catchify(() => submit_query_());
+    typeof _ref$ === "function" && $8tj43$use(_ref$, _el$6);
+    _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $8tj43$insert(_el$5, !isNewModal && $8tj43$createComponent(ClearButton, {}), _el$10, _co$2);
+    $8tj43$insert(_el$3, isNewModal && $8tj43$createComponent(BackButton, {}), _el$17, _co$5);
+    $8tj43$insert(_el$3, $8tj43$createComponent((0, $8tj43$Show), {
+      when: !isNewModal,
+      get children() {
+        var _el$11 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$4);
+        $8tj43$addEventListener(_el$11, "click", $8tj43$catchify(() => submit_query_()), true);
+        var _ref$2 = submit_button_ref_;
+        typeof _ref$2 === "function" ? $8tj43$use(_ref$2, _el$11) : submit_button_ref_ = _el$11;
+        $8tj43$insert(_el$11, $8tj43$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {}));
+        $8tj43$effect(() => $8tj43$setAttribute(_el$11, "aria-label", i18n_.search_submit_button_aria_label_()));
+        $8tj43$runHydrationEvents();
+        return _el$11;
       }
-    }, () => isNewModal ? {
-      tabindex: "-1"
-    } : {
-      "aria-label": i18n_.search_submit_button_aria_label_()
-    }), false, true);
-    $8tj43$insert(_el$6, $8tj43$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {}));
+    }), _el$19, _co$6);
     $8tj43$effect(_p$ => {
       var _v$ = i18n_.search_field_field_aria_label_(),
-        _v$2 = i18n_.placeholder_text_(),
-        _v$3 = i18n_.clear_filters_query_sorting_after_submit_(),
-        _v$4 = $8tj43$createMemo(() => search_field_value_[0]() ? "" : "display: none")();
-      _v$ !== _p$.e && $8tj43$setAttribute(_el$4, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $8tj43$setAttribute(_el$4, "placeholder", _p$.t = _v$2);
-      _v$3 !== _p$.a && $8tj43$setAttribute(_el$5, "title", _p$.a = _v$3);
-      _p$.o = $8tj43$style(_el$5, _v$4, _p$.o);
+        _v$2 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $8tj43$setAttribute(_el$6, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && $8tj43$setAttribute(_el$6, "placeholder", _p$.t = _v$2);
       return _p$;
     }, {
       e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined
+      t: undefined
     });
-    $8tj43$effect(() => $8tj43$setProperty(_el$4, "value", search_field_value_[0]()));
+    $8tj43$effect(() => $8tj43$setProperty(_el$6, "value", searchFieldValue()));
     $8tj43$runHydrationEvents();
-    return _el$;
+    return _el$3;
   })();
 }
 $8tj43$delegateEvents(["click", "keydown", "input", "pointerdown"]);
@@ -3864,7 +3931,7 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
     };
   });
   const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
-    BackIcon_: () => $8tj43$createComponent((0, $fac58b5610eec6a9$export$8d8893ffd8aca39a), {}),
+    BackIcon_: (0, $fac58b5610eec6a9$export$8d8893ffd8aca39a),
     input_field_ref_: element => set_input_field(element),
     override_on_enter_: e => {
       var _on_enter_in_search_f;
@@ -3883,7 +3950,6 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = (() => {
     var _el$4 = $8tj43$getNextElement($40411f2ec772c376$var$_tmpl$3),
       _el$5 = _el$4.firstChild,
@@ -5152,7 +5218,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
     return _el$7;
   })();
   const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
-    BackIcon_: () => $8tj43$createComponent((0, $c2fe922d21c40514$export$11e9f390c90a537f), {}),
+    BackIcon_: (0, $c2fe922d21c40514$export$11e9f390c90a537f),
     input_field_ref_: element => set_input_field(element),
     override_on_enter_: e => {
       var _on_enter_in_search_f;
@@ -5171,7 +5237,6 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($8tj43$catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -13504,7 +13569,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
     const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
     // Fade out submit button so there aren't two overlapping buttons for a split second
-    submitButton_.animate([{
+    submitButton_ === null || submitButton_ === void 0 || submitButton_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -13586,7 +13651,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_.animate([{
+      }).finished, submitButton_ === null || submitButton_ === void 0 ? void 0 : submitButton_.animate([{
         opacity: 0
       }, {
         opacity: 1

package/latest/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.13";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.4.0";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1339,9 +1339,9 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
               is_replace_: false,
               event_: event_
             });
-            if (event_.defaultPrevented)
-              // We single-page-navigated in this tab, close the look
-              setUserWantsExpanded(false);
+            if (!event_.defaultPrevented)
+              // If the user opened in a new tab, prevent the event from propagating to the parent which would close the look
+              event_.stopImmediatePropagation();
           }
         });
       }
@@ -1694,12 +1694,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
     var _el$ = $gVhhF$solidjsweb.getNextElement($ad882bbe664dbd53$var$_tmpl$);
     $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilishared.catchify(({
       target: target
-    }) => {
-      // Don't toggle when clicking on the links
-      const selector = "a[href]";
-      if (target.matches(selector) || target.closest(selector)) return;
-      setUserWantsExpanded(prev => !prev);
-    }), true);
+    }) => setUserWantsExpanded(prev => !prev)), true);
     _el$.classList.toggle("placeholder", !!!display_);
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
@@ -3416,9 +3411,12 @@ let $0b6e2070a98de347$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($0b6e2070a98de347$export$44dad306455dddf || ($0b6e2070a98de347$export$44dad306455dddf = {}));
 var $66b8b9a9613c141d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class=back type=button>`),
-  $66b8b9a9613c141d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=search-field role=search><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
+  $66b8b9a9613c141d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button type=button class=clear>`),
+  $66b8b9a9613c141d$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=spacer>`),
+  $66b8b9a9613c141d$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="submit major"type=button>`),
+  $66b8b9a9613c141d$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
 function $66b8b9a9613c141d$export$b94867ecbd698f21({
-  search_field_value_: search_field_value_,
+  search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
   field_element_ref_: field_element_ref_,
   submit_query_: submit_query_,
@@ -3443,30 +3441,102 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   })); // focus field on render
   const owner_of_field_element = $gVhhF$solidjs.getOwner();
   const isNewModal = BackIcon_[(0, $ad1fa088e5509cca$export$1ea76ea778b880dd)] === 2;
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $gVhhF$solidjs.createSignal();
+  const getBackButtonWidth = () => backButtonWidthAccessor()?.();
+  const searchFieldEmpty = $gVhhF$solidjs.createMemo(() => !searchFieldValue());
+  const BackButton = () => $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    when: on_back_,
+    get children() {
+      var _el$ = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$);
+      $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps({
+        get onClick() {
+          return $gVhhF$depictaiutilishared.catchify(on_back_);
+        },
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $f13855d1b951b24a$export$ebdc3711f7e02ccd(el));
+          $gVhhF$solidjs.onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), false, true);
+      $gVhhF$solidjsweb.insert(_el$, isNewModal ? $gVhhF$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {}) : $gVhhF$solidjsweb.createComponent(BackIcon_, {}));
+      $gVhhF$solidjsweb.runHydrationEvents();
+      return _el$;
+    }
+  });
+  const ClearButton = () => (() => {
+    var _el$2 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$2);
+    $gVhhF$solidjsweb.spread(_el$2, $gVhhF$solidjsweb.mergeProps({
+      get classList() {
+        return {
+          empty: searchFieldEmpty()
+        };
+      },
+      get style() {
+        return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+      },
+      get onClick() {
+        return $gVhhF$depictaiutilishared.catchify(() => {
+          if (isNewModal && searchFieldEmpty()) return;
+          setSearchFieldValue("");
+          clear_filters_(true);
+          if (!disabled_) input_element.focus();
+        });
+      }
+    }, () => searchFieldEmpty() ? {
+      "aria-hidden": "true"
+    } : {
+      title: i18n_.clear_filters_query_sorting_after_submit_()
+    }), false, true);
+    $gVhhF$solidjsweb.insert(_el$2, isNewModal ? $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      get when() {
+        return !searchFieldEmpty();
+      },
+      get fallback() {
+        return $gVhhF$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {});
+      },
+      get children() {
+        return $gVhhF$solidjsweb.createComponent(BackIcon_, {});
+      }
+    }) : $gVhhF$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {}));
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$2;
+  })();
   return (() => {
-    var _el$ = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$2),
-      _el$7 = _el$.firstChild,
+    var _el$3 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$5),
+      _el$12 = _el$3.firstChild,
+      [_el$13, _co$3] = $gVhhF$solidjsweb.getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $gVhhF$solidjsweb.getNextMarker(_el$14.nextSibling),
+      _el$5 = _el$15.nextSibling,
+      _el$7 = _el$5.firstChild,
       [_el$8, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$7.nextSibling),
-      _el$3 = _el$8.nextSibling,
-      _el$4 = _el$3.firstChild,
-      _el$5 = _el$4.nextSibling,
-      _el$6 = _el$3.nextSibling;
-    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-      when: on_back_,
+      _el$6 = _el$8.nextSibling,
+      _el$9 = _el$6.nextSibling,
+      [_el$10, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$9.nextSibling),
+      _el$16 = _el$5.nextSibling,
+      [_el$17, _co$5] = $gVhhF$solidjsweb.getNextMarker(_el$16.nextSibling),
+      _el$18 = _el$17.nextSibling,
+      [_el$19, _co$6] = $gVhhF$solidjsweb.getNextMarker(_el$18.nextSibling);
+    _el$3.classList.toggle("in-modal", !!!!on_back_);
+    $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      get when() {
+        return getBackButtonWidth() !== undefined && on_back_;
+      },
       get children() {
-        var _el$2 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$);
-        $gVhhF$solidjsweb.addEventListener(_el$2, "click", $gVhhF$depictaiutilishared.catchify(on_back_), true);
-        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent(BackIcon_, {}));
-        $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setAttribute(_el$2, "aria-label", i18n_.back_()));
-        $gVhhF$solidjsweb.runHydrationEvents();
-        return _el$2;
+        var _el$4 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$3);
+        $gVhhF$solidjsweb.effect(() => (getBackButtonWidth(), _el$4.style.setProperty("width", getBackButtonWidth() + "px")));
+        return _el$4;
       }
-    }), _el$8, _co$);
+    }), _el$13, _co$3);
+    $gVhhF$solidjsweb.insert(_el$3, !isNewModal && $gVhhF$solidjsweb.createComponent(BackButton, {}), _el$15, _co$4);
     $gVhhF$solidjsweb.use(el => {
       field_div = el;
       field_element_ref_?.(el);
-    }, _el$3);
-    $gVhhF$solidjsweb.addEventListener(_el$3, "click", $gVhhF$depictaiutilishared.catchify(({
+    }, _el$5);
+    $gVhhF$solidjsweb.addEventListener(_el$5, "click", $gVhhF$depictaiutilishared.catchify(({
       target: target,
       currentTarget: currentTarget,
       detail: detail
@@ -3490,7 +3560,8 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
         }
       }
     }), true);
-    _el$4.$$pointerdown = ({
+    $gVhhF$solidjsweb.insert(_el$5, isNewModal && $gVhhF$solidjsweb.createComponent(ClearButton, {}), _el$8, _co$);
+    _el$6.$$pointerdown = ({
       pointerType: pointerType
     }) => {
       // When selecting text with a mouse we want a SearchField to be focussed even when releasing the mouse outside the .field element (we assume the event listener which opens the modal is attached to that).
@@ -3508,7 +3579,7 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
         $gVhhF$solidjs.runWithOwner(owner_of_field_element, () => $gVhhF$solidjs.onCleanup(() => window.removeEventListener("pointerup", handler)));
       }
     };
-    $gVhhF$solidjsweb.addEventListener(_el$4, "select", $gVhhF$depictaiutilishared.catchify(() => {
+    $gVhhF$solidjsweb.addEventListener(_el$6, "select", $gVhhF$depictaiutilishared.catchify(() => {
       if (disabled_)
         // just in case. The field not actually being disabled when being disabled_ is so that you can focus it and open the modal. We don't want any of the other input-field-interaction features to work
         return;
@@ -3520,14 +3591,14 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
           once: true
         });
     }));
-    $gVhhF$solidjsweb.addEventListener(_el$4, "input", $gVhhF$depictaiutilishared.catchify(() => {
+    $gVhhF$solidjsweb.addEventListener(_el$6, "input", $gVhhF$depictaiutilishared.catchify(() => {
       const {
         value: value
       } = input_element;
       if (!disabled_ && !value.length) clear_filters_(false); // if the user clears the whole field, reset filters on next submit
-      search_field_value_[1](value);
+      setSearchFieldValue(value);
     }), true);
-    $gVhhF$solidjsweb.addEventListener(_el$4, "keydown", $gVhhF$depictaiutilishared.catchify(e => {
+    $gVhhF$solidjsweb.addEventListener(_el$6, "keydown", $gVhhF$depictaiutilishared.catchify(e => {
       if (disabled_) {
         if (e.key !== "Tab" && e.key !== "Shift")
           // alow tab-selecting the input field and then open the modal when the user start writing but also to move past the field with tab
@@ -3541,45 +3612,36 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       input_element = el;
       input_field_ref_?.(el);
     });
-    typeof _ref$ === "function" && $gVhhF$solidjsweb.use(_ref$, _el$4);
-    _el$4.classList.toggle("has-adjacent-back-button", !!!!on_back_);
-    $gVhhF$solidjsweb.addEventListener(_el$5, "click", $gVhhF$depictaiutilishared.catchify(() => {
-      search_field_value_[1]("");
-      clear_filters_(true);
-      if (!disabled_) input_element.focus();
-    }), true);
-    $gVhhF$solidjsweb.insert(_el$5, $gVhhF$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {}));
-    var _ref$2 = submit_button_ref_;
-    typeof _ref$2 === "function" ? $gVhhF$solidjsweb.use(_ref$2, _el$6) : submit_button_ref_ = _el$6;
-    $gVhhF$solidjsweb.spread(_el$6, $gVhhF$solidjsweb.mergeProps({
-      get onClick() {
-        return $gVhhF$depictaiutilishared.catchify(() => submit_query_());
+    typeof _ref$ === "function" && $gVhhF$solidjsweb.use(_ref$, _el$6);
+    _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $gVhhF$solidjsweb.insert(_el$5, !isNewModal && $gVhhF$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
+    $gVhhF$solidjsweb.insert(_el$3, isNewModal && $gVhhF$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
+    $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+      when: !isNewModal,
+      get children() {
+        var _el$11 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$4);
+        $gVhhF$solidjsweb.addEventListener(_el$11, "click", $gVhhF$depictaiutilishared.catchify(() => submit_query_()), true);
+        var _ref$2 = submit_button_ref_;
+        typeof _ref$2 === "function" ? $gVhhF$solidjsweb.use(_ref$2, _el$11) : submit_button_ref_ = _el$11;
+        $gVhhF$solidjsweb.insert(_el$11, $gVhhF$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {}));
+        $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setAttribute(_el$11, "aria-label", i18n_.search_submit_button_aria_label_()));
+        $gVhhF$solidjsweb.runHydrationEvents();
+        return _el$11;
       }
-    }, () => isNewModal ? {
-      tabindex: "-1"
-    } : {
-      "aria-label": i18n_.search_submit_button_aria_label_()
-    }), false, true);
-    $gVhhF$solidjsweb.insert(_el$6, $gVhhF$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {}));
+    }), _el$19, _co$6);
     $gVhhF$solidjsweb.effect(_p$ => {
       var _v$ = i18n_.search_field_field_aria_label_(),
-        _v$2 = i18n_.placeholder_text_(),
-        _v$3 = i18n_.clear_filters_query_sorting_after_submit_(),
-        _v$4 = $gVhhF$solidjs.createMemo(() => search_field_value_[0]() ? "" : "display: none")();
-      _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$4, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$4, "placeholder", _p$.t = _v$2);
-      _v$3 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$5, "title", _p$.a = _v$3);
-      _p$.o = $gVhhF$solidjsweb.style(_el$5, _v$4, _p$.o);
+        _v$2 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$6, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$6, "placeholder", _p$.t = _v$2);
       return _p$;
     }, {
       e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined
+      t: undefined
     });
-    $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setProperty(_el$4, "value", search_field_value_[0]()));
+    $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setProperty(_el$6, "value", searchFieldValue()));
     $gVhhF$solidjsweb.runHydrationEvents();
-    return _el$;
+    return _el$3;
   })();
 }
 $gVhhF$solidjsweb.delegateEvents(["click", "keydown", "input", "pointerdown"]);
@@ -3759,7 +3821,7 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
     };
   });
   const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
-    BackIcon_: () => $gVhhF$solidjsweb.createComponent((0, $610b584d4f54699e$export$8d8893ffd8aca39a), {}),
+    BackIcon_: (0, $610b584d4f54699e$export$8d8893ffd8aca39a),
     input_field_ref_: element => set_input_field(element),
     override_on_enter_: e => on_enter_in_search_field_function?.(e),
     on_back_: close_modal_,
@@ -3775,7 +3837,6 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = (() => {
     var _el$4 = $gVhhF$solidjsweb.getNextElement($44f0b2e312a9b710$var$_tmpl$3),
       _el$5 = _el$4.firstChild,
@@ -4999,7 +5060,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
     return _el$7;
   })();
   const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
-    BackIcon_: () => $gVhhF$solidjsweb.createComponent((0, $b8660a70353e03cf$export$11e9f390c90a537f), {}),
+    BackIcon_: (0, $b8660a70353e03cf$export$11e9f390c90a537f),
     input_field_ref_: element => set_input_field(element),
     override_on_enter_: e => on_enter_in_search_field_function?.(e),
     on_back_: close_modal_,
@@ -5015,7 +5076,6 @@ function $11597ae03e703a47$var$RawSearchModalV2({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -12805,7 +12865,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
     const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
     // Fade out submit button so there aren't two overlapping buttons for a split second
-    submitButton_.animate([{
+    submitButton_?.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -12887,7 +12947,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_.animate([{
+      }).finished, submitButton_?.animate([{
         opacity: 0
       }, {
         opacity: 1