@depict-ai/ui 4.3.14 → 4.4.1

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$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.1";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -2965,11 +2965,12 @@ let $c3820807ac1e6fd7$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c3820807ac1e6fd7$export$44dad306455dddf || ($c3820807ac1e6fd7$export$44dad306455dddf = {}));
-var $584c06c09cf4609d$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
-  $584c06c09cf4609d$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
+var $584c06c09cf4609d$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
+  $584c06c09cf4609d$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
+  $584c06c09cf4609d$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></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_,
@@ -2980,7 +2981,7 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     i18n_: i18n_,
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
-    submit_button_ref_: submit_button_ref_
+    buttonInFieldRef_: buttonInFieldRef_
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -2994,19 +2995,65 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   })); // focus field on render
   const owner_of_field_element = $b8hua$getOwner();
   const isNewModal = BackIcon_[(0, $b026fa9c9c904a98$export$1ea76ea778b880dd)] === 2;
-  return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $b8hua$createSignal();
+  const getBackButtonWidth = () => {
+    var _backButtonWidthAcces;
+    return (_backButtonWidthAcces = backButtonWidthAccessor()) === null || _backButtonWidthAcces === void 0 ? void 0 : _backButtonWidthAcces();
+  };
+  const searchFieldEmpty = $b8hua$createMemo(() => !searchFieldValue());
+  const BackButton = () => $b8hua$createComponent((0, $b8hua$Show), {
     when: on_back_,
     get children() {
-      return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.back_(), true), false), $b8hua$escape($b8hua$createComponent(BackIcon_, {})));
+      return $b8hua$ssrElement("button", $b8hua$mergeProps({
+        "class": "back",
+        type: "button",
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $fc830a7ee59416ef$export$ebdc3711f7e02ccd(el));
+          $b8hua$onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), () => isNewModal ? $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})) : $b8hua$escape($b8hua$createComponent(BackIcon_, {})), true);
     }
-  })), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_field_field_aria_label_(), true), false) + $b8hua$ssrAttribute("value", $b8hua$escape(search_field_value_[0](), true), false) + $b8hua$ssrAttribute("placeholder", $b8hua$escape(i18n_.placeholder_text_(), true), false), $b8hua$ssrAttribute("title", $b8hua$escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $b8hua$ssrStyle($b8hua$createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})), $b8hua$ssrElement("button", $b8hua$mergeProps({
-    "class": "submit major",
-    type: "button"
-  }, () => isNewModal ? {
-    tabindex: "-1"
+  });
+  const ClearButton = () => $b8hua$ssrElement("button", $b8hua$mergeProps({
+    type: "button",
+    get ["class"]() {
+      return "clear ".concat(searchFieldEmpty() ? "empty" : "");
+    },
+    get style() {
+      return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+    }
+  }, () => searchFieldEmpty() ? {
+    "aria-hidden": "true"
   } : {
-    "aria-label": i18n_.search_submit_button_aria_label_()
-  }), () => $b8hua$escape($b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {})), false));
+    title: i18n_.clear_filters_query_sorting_after_submit_()
+  }), () => isNewModal ? $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+    get when() {
+      return !searchFieldEmpty();
+    },
+    get fallback() {
+      return $b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {});
+    },
+    get children() {
+      return $b8hua$createComponent(BackIcon_, {});
+    }
+  })) : $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})), true);
+  return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$3, $b8hua$ssrHydrationKey(), "search-field ".concat(!!on_back_ ? "in-modal" : ""), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+    get when() {
+      return getBackButtonWidth() !== undefined && on_back_;
+    },
+    get children() {
+      return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$, $b8hua$ssrHydrationKey(), "width:" + ($b8hua$escape(getBackButtonWidth(), true) + "px"));
+    }
+  })), !isNewModal && $b8hua$escape($b8hua$createComponent(BackButton, {})), isNewModal && $b8hua$escape($b8hua$createComponent(ClearButton, {})), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_field_field_aria_label_(), true), false) + $b8hua$ssrAttribute("value", $b8hua$escape(searchFieldValue(), true), false) + $b8hua$ssrAttribute("placeholder", $b8hua$escape(i18n_.placeholder_text_(), true), false), !isNewModal && $b8hua$escape($b8hua$createComponent(ClearButton, {})), isNewModal && $b8hua$escape($b8hua$createComponent(BackButton, {})), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+    when: !isNewModal,
+    get children() {
+      return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("aria-label", $b8hua$escape(i18n_.search_submit_button_aria_label_(), true), false), $b8hua$escape($b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {})));
+    }
+  })));
 }
 function $e56d241d0f33d459$export$fe334901e8bebd57() {
   const cleanup_fns = [];
@@ -3173,7 +3220,7 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
     };
   });
   const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
-    BackIcon_: () => $b8hua$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;
@@ -3192,7 +3239,6 @@ function $40411f2ec772c376$var$RawClassicSearchModal(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = $b8hua$ssr($40411f2ec772c376$var$_tmpl$3, $b8hua$ssrHydrationKey(), "depict-search-modal", "".concat("body", " ").concat($b8hua$escape($b8hua$escape(random_classname, true), true)), $b8hua$escape(search_field), $b8hua$escape($b8hua$createComponent((0, $74777e8fe65b3dcb$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "Autocomplete/suggestions failed",
@@ -4230,7 +4276,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
   };
   const discoverMoreSection = $b8hua$ssr($06fcd2a345efd24d$var$_tmpl$2, $b8hua$ssrHydrationKey(), get_search_field_value_() ? $b8hua$escape(i18n_.modal_view_all_results_()($b8hua$ssr($06fcd2a345efd24d$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$escape(formattedTotalNumberResults())))) : $b8hua$escape(i18n_.modal_discover_more_()));
   const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
-    BackIcon_: () => $b8hua$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;
@@ -4249,7 +4295,6 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($b8hua$catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -11027,7 +11072,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
     bodyAlignmentSignal_: [, setBodyAlignment_],
     backdropStyleSignal_: [, setBackdropStyle_],
     setPollAlignment_: setPollAlignment_,
-    submitButton_: submitButton_,
+    buttonInField_: buttonInField_,
     modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
   } = _ref;
   return $b8hua$createRoot(dispose => {
@@ -11070,7 +11115,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([{
+    if (pxOffCenter > 10) buttonInField_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -11137,6 +11182,8 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
+      // Just copy-pasted below line without thinking, it might be wrong
+      const pxOffCenter = Math.abs($b8hua$untrack(innerWidthReactive) / 2 - (left + width / 2));
       $d7833ca17fc05c5e$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
@@ -11152,12 +11199,12 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_.animate([{
+      }).finished, buttonInField_.animate([{
         opacity: 0
       }, {
         opacity: 1
       }], {
-        duration: closeDuration_ / 3,
+        duration: pxOffCenter > 10 ? closeDuration_ / 3 : 1,
         delay: closeDuration_ * (2 / 3),
         fill: "forwards"
       }).finished]);
@@ -11368,7 +11415,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
       if (!input_field_accessor_value) break add_input_field;
       let input_element;
       let div_with_field_class;
-      let submitButton_;
+      let buttonInField;
       const search_field = SafeSearchField({
         i18n_: i18n_,
         search_field_value_: search_field_value_,
@@ -11378,7 +11425,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
         field_element_ref_: el => div_with_field_class = el,
         disabled_: true,
         BackIcon_: BackIcon_,
-        submit_button_ref_: el => submitButton_ = el
+        buttonInFieldRef_: el => buttonInField = el
       });
       if (!search_field) break add_input_field;
       setModalBodyStyle({});
@@ -11413,7 +11460,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -12436,7 +12483,7 @@ function $a3026fb727bc7550$export$316f6f283ae64765(props) {
   const shared_properties = $eb064bc3350276c1$export$12fa711345994013(depict_search);
   return $83e8cf2c0b87a58a$export$23fca46f3143581f(() => {
     let input_element;
-    let submitButton_;
+    let buttonInField;
     const search_field = $b8hua$createComponent((0, $584c06c09cf4609d$export$b94867ecbd698f21), {
       get BackIcon_() {
         return shared_properties.BackIcon_;
@@ -12455,7 +12502,7 @@ function $a3026fb727bc7550$export$316f6f283ae64765(props) {
       },
       disabled_: true,
       input_field_ref_: el => input_element = el,
-      submit_button_ref_: el => submitButton_ = el,
+      buttonInFieldRef_: el => buttonInField = el,
       field_element_ref_: field => {
         const bodyAlignmentSignal_ = $b8hua$createSignal({
           position: "fixed"
@@ -12502,7 +12549,7 @@ function $a3026fb727bc7550$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }

package/server/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.14";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.4.1";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -2885,10 +2885,11 @@ let $0b6e2070a98de347$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($0b6e2070a98de347$export$44dad306455dddf || ($0b6e2070a98de347$export$44dad306455dddf = {}));
-var $66b8b9a9613c141d$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
-  $66b8b9a9613c141d$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
+var $66b8b9a9613c141d$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
+  $66b8b9a9613c141d$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
+  $66b8b9a9613c141d$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></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_,
@@ -2899,7 +2900,7 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   i18n_: i18n_,
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
-  submit_button_ref_: submit_button_ref_
+  buttonInFieldRef_: buttonInFieldRef_
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -2913,19 +2914,62 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   })); // focus field on render
   const owner_of_field_element = $5vyXB$solidjs.getOwner();
   const isNewModal = BackIcon_[(0, $ad1fa088e5509cca$export$1ea76ea778b880dd)] === 2;
-  return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $5vyXB$solidjs.createSignal();
+  const getBackButtonWidth = () => backButtonWidthAccessor()?.();
+  const searchFieldEmpty = $5vyXB$solidjs.createMemo(() => !searchFieldValue());
+  const BackButton = () => $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     when: on_back_,
     get children() {
-      return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.back_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackIcon_, {})));
+      return $5vyXB$solidjsweb.ssrElement("button", $5vyXB$solidjsweb.mergeProps({
+        "class": "back",
+        type: "button",
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $f13855d1b951b24a$export$ebdc3711f7e02ccd(el));
+          $5vyXB$solidjs.onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), () => isNewModal ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})) : $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackIcon_, {})), true);
     }
-  })), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $5vyXB$solidjsweb.ssrAttribute("value", $5vyXB$solidjsweb.escape(search_field_value_[0](), true), false) + $5vyXB$solidjsweb.ssrAttribute("placeholder", $5vyXB$solidjsweb.escape(i18n_.placeholder_text_(), true), false), $5vyXB$solidjsweb.ssrAttribute("title", $5vyXB$solidjsweb.escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $5vyXB$solidjsweb.ssrStyle($5vyXB$solidjs.createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})), $5vyXB$solidjsweb.ssrElement("button", $5vyXB$solidjsweb.mergeProps({
-    "class": "submit major",
-    type: "button"
-  }, () => isNewModal ? {
-    tabindex: "-1"
+  });
+  const ClearButton = () => $5vyXB$solidjsweb.ssrElement("button", $5vyXB$solidjsweb.mergeProps({
+    type: "button",
+    get ["class"]() {
+      return `clear ${searchFieldEmpty() ? "empty" : ""}`;
+    },
+    get style() {
+      return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+    }
+  }, () => searchFieldEmpty() ? {
+    "aria-hidden": "true"
   } : {
-    "aria-label": i18n_.search_submit_button_aria_label_()
-  }), () => $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {})), false));
+    title: i18n_.clear_filters_query_sorting_after_submit_()
+  }), () => isNewModal ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return !searchFieldEmpty();
+    },
+    get fallback() {
+      return $5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {});
+    },
+    get children() {
+      return $5vyXB$solidjsweb.createComponent(BackIcon_, {});
+    }
+  })) : $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})), true);
+  return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `search-field ${!!on_back_ ? "in-modal" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return getBackButtonWidth() !== undefined && on_back_;
+    },
+    get children() {
+      return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), "width:" + ($5vyXB$solidjsweb.escape(getBackButtonWidth(), true) + "px"));
+    }
+  })), !isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackButton, {})), isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(ClearButton, {})), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $5vyXB$solidjsweb.ssrAttribute("value", $5vyXB$solidjsweb.escape(searchFieldValue(), true), false) + $5vyXB$solidjsweb.ssrAttribute("placeholder", $5vyXB$solidjsweb.escape(i18n_.placeholder_text_(), true), false), !isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(ClearButton, {})), isNewModal && $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(BackButton, {})), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    when: !isNewModal,
+    get children() {
+      return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("aria-label", $5vyXB$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {})));
+    }
+  })));
 }
 function $ca1176b694a6ee2e$export$fe334901e8bebd57() {
   const cleanup_fns = [];
@@ -3089,7 +3133,7 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
     };
   });
   const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
-    BackIcon_: () => $5vyXB$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_,
@@ -3105,7 +3149,6 @@ function $44f0b2e312a9b710$var$RawClassicSearchModal({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = $5vyXB$solidjsweb.ssr($44f0b2e312a9b710$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `depict-search-modal`, `${`body` || ""} ${$5vyXB$solidjsweb.escape($5vyXB$solidjsweb.escape(random_classname, true), true)}`, $5vyXB$solidjsweb.escape(search_field), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "Autocomplete/suggestions failed",
@@ -4100,7 +4143,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
   };
   const discoverMoreSection = $5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), get_search_field_value_() ? $5vyXB$solidjsweb.escape(i18n_.modal_view_all_results_()($5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(formattedTotalNumberResults())))) : $5vyXB$solidjsweb.escape(i18n_.modal_discover_more_()));
   const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
-    BackIcon_: () => $5vyXB$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_,
@@ -4116,7 +4159,6 @@ function $11597ae03e703a47$var$RawSearchModalV2({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -10397,7 +10439,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $5vyXB$solidjs.createRoot(dispose => {
@@ -10440,7 +10482,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([{
+    if (pxOffCenter > 10) buttonInField_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -10507,6 +10549,8 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
+      // Just copy-pasted below line without thinking, it might be wrong
+      const pxOffCenter = Math.abs($5vyXB$solidjs.untrack(innerWidthReactive) / 2 - (left + width / 2));
       $6892e0748f94faa6$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
@@ -10522,12 +10566,12 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_.animate([{
+      }).finished, buttonInField_.animate([{
         opacity: 0
       }, {
         opacity: 1
       }], {
-        duration: closeDuration_ / 3,
+        duration: pxOffCenter > 10 ? closeDuration_ / 3 : 1,
         delay: closeDuration_ * (2 / 3),
         fill: "forwards"
       }).finished]);
@@ -10720,7 +10764,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
       if (!input_field_accessor_value) break add_input_field;
       let input_element;
       let div_with_field_class;
-      let submitButton_;
+      let buttonInField;
       const search_field = SafeSearchField({
         i18n_: i18n_,
         search_field_value_: search_field_value_,
@@ -10730,7 +10774,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
         field_element_ref_: el => div_with_field_class = el,
         disabled_: true,
         BackIcon_: BackIcon_,
-        submit_button_ref_: el => submitButton_ = el
+        buttonInFieldRef_: el => buttonInField = el
       });
       if (!search_field) break add_input_field;
       setModalBodyStyle({});
@@ -10764,7 +10808,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -11602,7 +11646,7 @@ function $c0a0659cf97e8eb2$export$316f6f283ae64765(props) {
   const shared_properties = $2c61e4cd8229c49a$export$12fa711345994013(depict_search);
   return $95837413165cc2df$export$23fca46f3143581f(() => {
     let input_element;
-    let submitButton_;
+    let buttonInField;
     const search_field = $5vyXB$solidjsweb.createComponent((0, $66b8b9a9613c141d$export$b94867ecbd698f21), {
       get BackIcon_() {
         return shared_properties.BackIcon_;
@@ -11621,7 +11665,7 @@ function $c0a0659cf97e8eb2$export$316f6f283ae64765(props) {
       },
       disabled_: true,
       input_field_ref_: el => input_element = el,
-      submit_button_ref_: el => submitButton_ = el,
+      buttonInFieldRef_: el => buttonInField = el,
       field_element_ref_: field => {
         const bodyAlignmentSignal_ = $5vyXB$solidjs.createSignal({
           position: "fixed"
@@ -11668,7 +11712,7 @@ function $c0a0659cf97e8eb2$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }

package/server/latest/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.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {