@depict-ai/ui 4.3.14 → 4.4.0

package/ES10/index.cjs

@@ -100,7 +100,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.3.14";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.4.0";
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -3601,10 +3601,13 @@ let $c95c6dd9e93acd82$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c95c6dd9e93acd82$export$44dad306455dddf || ($c95c6dd9e93acd82$export$44dad306455dddf = {}));
 var $29e5dbeb69da7a36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class=back type=button>`),
-  $29e5dbeb69da7a36$var$_tmpl$2 = /*#__PURE__*/$52FdA$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>`);
+  $29e5dbeb69da7a36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button type=button class=clear>`),
+  $29e5dbeb69da7a36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=spacer>`),
+  $29e5dbeb69da7a36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class="submit major"type=button>`),
+  $29e5dbeb69da7a36$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
 function $29e5dbeb69da7a36$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_,
@@ -3629,30 +3632,105 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   })); // focus field on render
   const owner_of_field_element = $52FdA$solidjs.getOwner();
   const isNewModal = BackIcon_[(0, $072ab198d82c3eb7$export$1ea76ea778b880dd)] === 2;
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $52FdA$solidjs.createSignal();
+  const getBackButtonWidth = () => {
+    var _backButtonWidthAcces;
+    return (_backButtonWidthAcces = backButtonWidthAccessor()) === null || _backButtonWidthAcces === void 0 ? void 0 : _backButtonWidthAcces();
+  };
+  const searchFieldEmpty = $52FdA$solidjs.createMemo(() => !searchFieldValue());
+  const BackButton = () => $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+    when: on_back_,
+    get children() {
+      var _el$ = $52FdA$solidjsweb.getNextElement($29e5dbeb69da7a36$var$_tmpl$);
+      $52FdA$solidjsweb.spread(_el$, $52FdA$solidjsweb.mergeProps({
+        get onClick() {
+          return $52FdA$depictaiutilishared.catchify(on_back_);
+        },
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd(el));
+          $52FdA$solidjs.onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), false, true);
+      $52FdA$solidjsweb.insert(_el$, isNewModal ? $52FdA$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {}) : $52FdA$solidjsweb.createComponent(BackIcon_, {}));
+      $52FdA$solidjsweb.runHydrationEvents();
+      return _el$;
+    }
+  });
+  const ClearButton = () => (() => {
+    var _el$2 = $52FdA$solidjsweb.getNextElement($29e5dbeb69da7a36$var$_tmpl$2);
+    $52FdA$solidjsweb.spread(_el$2, $52FdA$solidjsweb.mergeProps({
+      get classList() {
+        return {
+          empty: searchFieldEmpty()
+        };
+      },
+      get style() {
+        return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+      },
+      get onClick() {
+        return $52FdA$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);
+    $52FdA$solidjsweb.insert(_el$2, isNewModal ? $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+      get when() {
+        return !searchFieldEmpty();
+      },
+      get fallback() {
+        return $52FdA$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {});
+      },
+      get children() {
+        return $52FdA$solidjsweb.createComponent(BackIcon_, {});
+      }
+    }) : $52FdA$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {}));
+    $52FdA$solidjsweb.runHydrationEvents();
+    return _el$2;
+  })();
   return (() => {
-    var _el$ = $52FdA$solidjsweb.getNextElement($29e5dbeb69da7a36$var$_tmpl$2),
-      _el$7 = _el$.firstChild,
+    var _el$3 = $52FdA$solidjsweb.getNextElement($29e5dbeb69da7a36$var$_tmpl$5),
+      _el$12 = _el$3.firstChild,
+      [_el$13, _co$3] = $52FdA$solidjsweb.getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $52FdA$solidjsweb.getNextMarker(_el$14.nextSibling),
+      _el$5 = _el$15.nextSibling,
+      _el$7 = _el$5.firstChild,
       [_el$8, _co$] = $52FdA$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;
-    $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
-      when: on_back_,
+      _el$6 = _el$8.nextSibling,
+      _el$9 = _el$6.nextSibling,
+      [_el$10, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$9.nextSibling),
+      _el$16 = _el$5.nextSibling,
+      [_el$17, _co$5] = $52FdA$solidjsweb.getNextMarker(_el$16.nextSibling),
+      _el$18 = _el$17.nextSibling,
+      [_el$19, _co$6] = $52FdA$solidjsweb.getNextMarker(_el$18.nextSibling);
+    _el$3.classList.toggle("in-modal", !!!!on_back_);
+    $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+      get when() {
+        return getBackButtonWidth() !== undefined && on_back_;
+      },
       get children() {
-        var _el$2 = $52FdA$solidjsweb.getNextElement($29e5dbeb69da7a36$var$_tmpl$);
-        $52FdA$solidjsweb.addEventListener(_el$2, "click", $52FdA$depictaiutilishared.catchify(on_back_), true);
-        $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent(BackIcon_, {}));
-        $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setAttribute(_el$2, "aria-label", i18n_.back_()));
-        $52FdA$solidjsweb.runHydrationEvents();
-        return _el$2;
+        var _el$4 = $52FdA$solidjsweb.getNextElement($29e5dbeb69da7a36$var$_tmpl$3);
+        $52FdA$solidjsweb.effect(() => (getBackButtonWidth(), _el$4.style.setProperty("width", getBackButtonWidth() + "px")));
+        return _el$4;
       }
-    }), _el$8, _co$);
+    }), _el$13, _co$3);
+    $52FdA$solidjsweb.insert(_el$3, !isNewModal && $52FdA$solidjsweb.createComponent(BackButton, {}), _el$15, _co$4);
     $52FdA$solidjsweb.use(el => {
       field_div = el;
       field_element_ref_ === null || field_element_ref_ === void 0 || field_element_ref_(el);
-    }, _el$3);
-    $52FdA$solidjsweb.addEventListener(_el$3, "click", $52FdA$depictaiutilishared.catchify(_ref2 => {
+    }, _el$5);
+    $52FdA$solidjsweb.addEventListener(_el$5, "click", $52FdA$depictaiutilishared.catchify(_ref2 => {
       let {
         target: target,
         currentTarget: currentTarget,
@@ -3677,7 +3755,8 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
         }
       }
     }), true);
-    _el$4.$$pointerdown = _ref3 => {
+    $52FdA$solidjsweb.insert(_el$5, isNewModal && $52FdA$solidjsweb.createComponent(ClearButton, {}), _el$8, _co$);
+    _el$6.$$pointerdown = _ref3 => {
       let {
         pointerType: pointerType
       } = _ref3;
@@ -3697,7 +3776,7 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
         $52FdA$solidjs.runWithOwner(owner_of_field_element, () => $52FdA$solidjs.onCleanup(() => window.removeEventListener("pointerup", handler)));
       }
     };
-    $52FdA$solidjsweb.addEventListener(_el$4, "select", $52FdA$depictaiutilishared.catchify(() => {
+    $52FdA$solidjsweb.addEventListener(_el$6, "select", $52FdA$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;
@@ -3709,14 +3788,14 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
           once: true
         });
     }));
-    $52FdA$solidjsweb.addEventListener(_el$4, "input", $52FdA$depictaiutilishared.catchify(() => {
+    $52FdA$solidjsweb.addEventListener(_el$6, "input", $52FdA$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);
-    $52FdA$solidjsweb.addEventListener(_el$4, "keydown", $52FdA$depictaiutilishared.catchify(e => {
+    $52FdA$solidjsweb.addEventListener(_el$6, "keydown", $52FdA$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
@@ -3730,45 +3809,36 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       input_element = el;
       input_field_ref_ === null || input_field_ref_ === void 0 || input_field_ref_(el);
     });
-    typeof _ref$ === "function" && $52FdA$solidjsweb.use(_ref$, _el$4);
-    _el$4.classList.toggle("has-adjacent-back-button", !!!!on_back_);
-    $52FdA$solidjsweb.addEventListener(_el$5, "click", $52FdA$depictaiutilishared.catchify(() => {
-      search_field_value_[1]("");
-      clear_filters_(true);
-      if (!disabled_) input_element.focus();
-    }), true);
-    $52FdA$solidjsweb.insert(_el$5, $52FdA$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {}));
-    var _ref$2 = submit_button_ref_;
-    typeof _ref$2 === "function" ? $52FdA$solidjsweb.use(_ref$2, _el$6) : submit_button_ref_ = _el$6;
-    $52FdA$solidjsweb.spread(_el$6, $52FdA$solidjsweb.mergeProps({
-      get onClick() {
-        return $52FdA$depictaiutilishared.catchify(() => submit_query_());
+    typeof _ref$ === "function" && $52FdA$solidjsweb.use(_ref$, _el$6);
+    _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $52FdA$solidjsweb.insert(_el$5, !isNewModal && $52FdA$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
+    $52FdA$solidjsweb.insert(_el$3, isNewModal && $52FdA$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
+    $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+      when: !isNewModal,
+      get children() {
+        var _el$11 = $52FdA$solidjsweb.getNextElement($29e5dbeb69da7a36$var$_tmpl$4);
+        $52FdA$solidjsweb.addEventListener(_el$11, "click", $52FdA$depictaiutilishared.catchify(() => submit_query_()), true);
+        var _ref$2 = submit_button_ref_;
+        typeof _ref$2 === "function" ? $52FdA$solidjsweb.use(_ref$2, _el$11) : submit_button_ref_ = _el$11;
+        $52FdA$solidjsweb.insert(_el$11, $52FdA$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {}));
+        $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setAttribute(_el$11, "aria-label", i18n_.search_submit_button_aria_label_()));
+        $52FdA$solidjsweb.runHydrationEvents();
+        return _el$11;
       }
-    }, () => isNewModal ? {
-      tabindex: "-1"
-    } : {
-      "aria-label": i18n_.search_submit_button_aria_label_()
-    }), false, true);
-    $52FdA$solidjsweb.insert(_el$6, $52FdA$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {}));
+    }), _el$19, _co$6);
     $52FdA$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 = $52FdA$solidjs.createMemo(() => search_field_value_[0]() ? "" : "display: none")();
-      _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$4, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$4, "placeholder", _p$.t = _v$2);
-      _v$3 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$5, "title", _p$.a = _v$3);
-      _p$.o = $52FdA$solidjsweb.style(_el$5, _v$4, _p$.o);
+        _v$2 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$6, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$6, "placeholder", _p$.t = _v$2);
       return _p$;
     }, {
       e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined
+      t: undefined
     });
-    $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setProperty(_el$4, "value", search_field_value_[0]()));
+    $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setProperty(_el$6, "value", searchFieldValue()));
     $52FdA$solidjsweb.runHydrationEvents();
-    return _el$;
+    return _el$3;
   })();
 }
 $52FdA$solidjsweb.delegateEvents(["click", "keydown", "input", "pointerdown"]);
@@ -3951,7 +4021,7 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
     };
   });
   const search_field = $29e5dbeb69da7a36$export$b94867ecbd698f21({
-    BackIcon_: () => $52FdA$solidjsweb.createComponent((0, $820f2920cc576f7e$export$8d8893ffd8aca39a), {}),
+    BackIcon_: (0, $820f2920cc576f7e$export$8d8893ffd8aca39a),
     input_field_ref_: element => set_input_field(element),
     override_on_enter_: e => {
       var _on_enter_in_search_f;
@@ -3970,7 +4040,6 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = (() => {
     var _el$4 = $52FdA$solidjsweb.getNextElement($9035b24c2dbd3f36$var$_tmpl$3),
       _el$5 = _el$4.firstChild,
@@ -5239,7 +5308,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
     return _el$7;
   })();
   const search_field = $29e5dbeb69da7a36$export$b94867ecbd698f21({
-    BackIcon_: () => $52FdA$solidjsweb.createComponent((0, $50b50df3efaa8776$export$11e9f390c90a537f), {}),
+    BackIcon_: (0, $50b50df3efaa8776$export$11e9f390c90a537f),
     input_field_ref_: element => set_input_field(element),
     override_on_enter_: e => {
       var _on_enter_in_search_f;
@@ -5258,7 +5327,6 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -13591,7 +13659,7 @@ function $a60bc7692ce52705$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
@@ -13673,7 +13741,7 @@ function $a60bc7692ce52705$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/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.3.14";
+export const version = "4.4.0";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {

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.14";
+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++) {
@@ -3511,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_,
@@ -3539,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,
@@ -3587,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;
@@ -3607,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;
@@ -3619,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
@@ -3640,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"]);
@@ -3861,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;
@@ -3880,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,
@@ -5149,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;
@@ -5168,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);
@@ -13501,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
@@ -13583,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