@depict-ai/ui 4.3.14 → 4.4.1

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.14";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.4.1";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -3324,9 +3324,12 @@ let $f86ba724282f6690$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
 var $5285d2814d0fac0c$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class=back type=button>`),
-  $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$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>`);
+  $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<button type=button class=clear>`),
+  $5285d2814d0fac0c$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=spacer>`),
+  $5285d2814d0fac0c$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<button class="submit major"type=button>`),
+  $5285d2814d0fac0c$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<div class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
 function $5285d2814d0fac0c$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_,
@@ -3337,7 +3340,7 @@ function $5285d2814d0fac0c$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.
@@ -3351,30 +3354,104 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
   })); // focus field on render
   const owner_of_field_element = $9HbP8$getOwner();
   const isNewModal = BackIcon_[(0, $66db7a014e20802e$export$1ea76ea778b880dd)] === 2;
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $9HbP8$createSignal();
+  const getBackButtonWidth = () => backButtonWidthAccessor()?.();
+  const searchFieldEmpty = $9HbP8$createMemo(() => !searchFieldValue());
+  const BackButton = () => $9HbP8$createComponent((0, $9HbP8$Show), {
+    when: on_back_,
+    get children() {
+      var _el$ = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$);
+      $9HbP8$spread(_el$, $9HbP8$mergeProps({
+        get onClick() {
+          return $9HbP8$catchify(on_back_);
+        },
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $2449872a62a75a20$export$ebdc3711f7e02ccd(el));
+          $9HbP8$onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), false, true);
+      $9HbP8$insert(_el$, isNewModal ? $9HbP8$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {}) : $9HbP8$createComponent(BackIcon_, {}));
+      $9HbP8$runHydrationEvents();
+      return _el$;
+    }
+  });
+  const ClearButton = () => (() => {
+    var _el$2 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$2);
+    var _ref$ = buttonInFieldRef_;
+    typeof _ref$ === "function" ? $9HbP8$use(_ref$, _el$2) : buttonInFieldRef_ = _el$2;
+    $9HbP8$spread(_el$2, $9HbP8$mergeProps({
+      get classList() {
+        return {
+          empty: searchFieldEmpty()
+        };
+      },
+      get style() {
+        return isNewModal || !searchFieldEmpty() ? "" : "display: none";
+      },
+      get onClick() {
+        return $9HbP8$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);
+    $9HbP8$insert(_el$2, isNewModal ? $9HbP8$createComponent((0, $9HbP8$Show), {
+      get when() {
+        return !searchFieldEmpty();
+      },
+      get fallback() {
+        return $9HbP8$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {});
+      },
+      get children() {
+        return $9HbP8$createComponent(BackIcon_, {});
+      }
+    }) : $9HbP8$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {}));
+    $9HbP8$runHydrationEvents();
+    return _el$2;
+  })();
   return (() => {
-    var _el$ = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$2),
-      _el$7 = _el$.firstChild,
+    var _el$3 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$5),
+      _el$12 = _el$3.firstChild,
+      [_el$13, _co$3] = $9HbP8$getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $9HbP8$getNextMarker(_el$14.nextSibling),
+      _el$5 = _el$15.nextSibling,
+      _el$7 = _el$5.firstChild,
       [_el$8, _co$] = $9HbP8$getNextMarker(_el$7.nextSibling),
-      _el$3 = _el$8.nextSibling,
-      _el$4 = _el$3.firstChild,
-      _el$5 = _el$4.nextSibling,
-      _el$6 = _el$3.nextSibling;
-    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $9HbP8$Show), {
-      when: on_back_,
+      _el$6 = _el$8.nextSibling,
+      _el$9 = _el$6.nextSibling,
+      [_el$10, _co$2] = $9HbP8$getNextMarker(_el$9.nextSibling),
+      _el$16 = _el$5.nextSibling,
+      [_el$17, _co$5] = $9HbP8$getNextMarker(_el$16.nextSibling),
+      _el$18 = _el$17.nextSibling,
+      [_el$19, _co$6] = $9HbP8$getNextMarker(_el$18.nextSibling);
+    _el$3.classList.toggle("in-modal", !!!!on_back_);
+    $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
+      get when() {
+        return getBackButtonWidth() !== undefined && on_back_;
+      },
       get children() {
-        var _el$2 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$);
-        $9HbP8$addEventListener(_el$2, "click", $9HbP8$catchify(on_back_), true);
-        $9HbP8$insert(_el$2, $9HbP8$createComponent(BackIcon_, {}));
-        $9HbP8$effect(() => $9HbP8$setAttribute(_el$2, "aria-label", i18n_.back_()));
-        $9HbP8$runHydrationEvents();
-        return _el$2;
+        var _el$4 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$3);
+        $9HbP8$effect(() => (getBackButtonWidth(), _el$4.style.setProperty("width", getBackButtonWidth() + "px")));
+        return _el$4;
       }
-    }), _el$8, _co$);
+    }), _el$13, _co$3);
+    $9HbP8$insert(_el$3, !isNewModal && $9HbP8$createComponent(BackButton, {}), _el$15, _co$4);
     $9HbP8$use(el => {
       field_div = el;
       field_element_ref_?.(el);
-    }, _el$3);
-    $9HbP8$addEventListener(_el$3, "click", $9HbP8$catchify(({
+    }, _el$5);
+    $9HbP8$addEventListener(_el$5, "click", $9HbP8$catchify(({
       target: target,
       currentTarget: currentTarget,
       detail: detail
@@ -3398,7 +3475,8 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
         }
       }
     }), true);
-    _el$4.$$pointerdown = ({
+    $9HbP8$insert(_el$5, isNewModal && $9HbP8$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).
@@ -3416,7 +3494,7 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
         $9HbP8$runWithOwner(owner_of_field_element, () => $9HbP8$onCleanup(() => window.removeEventListener("pointerup", handler)));
       }
     };
-    $9HbP8$addEventListener(_el$4, "select", $9HbP8$catchify(() => {
+    $9HbP8$addEventListener(_el$6, "select", $9HbP8$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;
@@ -3428,14 +3506,14 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
           once: true
         });
     }));
-    $9HbP8$addEventListener(_el$4, "input", $9HbP8$catchify(() => {
+    $9HbP8$addEventListener(_el$6, "input", $9HbP8$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);
-    $9HbP8$addEventListener(_el$4, "keydown", $9HbP8$catchify(e => {
+    $9HbP8$addEventListener(_el$6, "keydown", $9HbP8$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
@@ -3445,49 +3523,38 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
         if (!dont_submit) submit_query_();
       }
     }), true);
-    var _ref$ = $9HbP8$catchify(el => {
+    var _ref$2 = $9HbP8$catchify(el => {
       input_element = el;
       input_field_ref_?.(el);
     });
-    typeof _ref$ === "function" && $9HbP8$use(_ref$, _el$4);
-    _el$4.classList.toggle("has-adjacent-back-button", !!!!on_back_);
-    $9HbP8$addEventListener(_el$5, "click", $9HbP8$catchify(() => {
-      search_field_value_[1]("");
-      clear_filters_(true);
-      if (!disabled_) input_element.focus();
-    }), true);
-    $9HbP8$insert(_el$5, $9HbP8$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {}));
-    var _ref$2 = submit_button_ref_;
-    typeof _ref$2 === "function" ? $9HbP8$use(_ref$2, _el$6) : submit_button_ref_ = _el$6;
-    $9HbP8$spread(_el$6, $9HbP8$mergeProps({
-      get onClick() {
-        return $9HbP8$catchify(() => submit_query_());
+    typeof _ref$2 === "function" && $9HbP8$use(_ref$2, _el$6);
+    _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
+    $9HbP8$insert(_el$5, !isNewModal && $9HbP8$createComponent(ClearButton, {}), _el$10, _co$2);
+    $9HbP8$insert(_el$3, isNewModal && $9HbP8$createComponent(BackButton, {}), _el$17, _co$5);
+    $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
+      when: !isNewModal,
+      get children() {
+        var _el$11 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$4);
+        $9HbP8$addEventListener(_el$11, "click", $9HbP8$catchify(() => submit_query_()), true);
+        $9HbP8$insert(_el$11, $9HbP8$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {}));
+        $9HbP8$effect(() => $9HbP8$setAttribute(_el$11, "aria-label", i18n_.search_submit_button_aria_label_()));
+        $9HbP8$runHydrationEvents();
+        return _el$11;
       }
-    }, () => isNewModal ? {
-      tabindex: "-1"
-    } : {
-      "aria-label": i18n_.search_submit_button_aria_label_()
-    }), false, true);
-    $9HbP8$insert(_el$6, $9HbP8$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {}));
+    }), _el$19, _co$6);
     $9HbP8$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 = $9HbP8$createMemo(() => search_field_value_[0]() ? "" : "display: none")();
-      _v$ !== _p$.e && $9HbP8$setAttribute(_el$4, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$4, "placeholder", _p$.t = _v$2);
-      _v$3 !== _p$.a && $9HbP8$setAttribute(_el$5, "title", _p$.a = _v$3);
-      _p$.o = $9HbP8$style(_el$5, _v$4, _p$.o);
+        _v$2 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $9HbP8$setAttribute(_el$6, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$6, "placeholder", _p$.t = _v$2);
       return _p$;
     }, {
       e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined
+      t: undefined
     });
-    $9HbP8$effect(() => $9HbP8$setProperty(_el$4, "value", search_field_value_[0]()));
+    $9HbP8$effect(() => $9HbP8$setProperty(_el$6, "value", searchFieldValue()));
     $9HbP8$runHydrationEvents();
-    return _el$;
+    return _el$3;
   })();
 }
 $9HbP8$delegateEvents(["click", "keydown", "input", "pointerdown"]);
@@ -3667,7 +3734,7 @@ function $42912431795f188e$var$RawClassicSearchModal({
     };
   });
   const search_field = $5285d2814d0fac0c$export$b94867ecbd698f21({
-    BackIcon_: () => $9HbP8$createComponent((0, $ffb84ffbf4014982$export$8d8893ffd8aca39a), {}),
+    BackIcon_: (0, $ffb84ffbf4014982$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_,
@@ -3683,7 +3750,6 @@ function $42912431795f188e$var$RawClassicSearchModal({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = (() => {
     var _el$4 = $9HbP8$getNextElement($42912431795f188e$var$_tmpl$3),
       _el$5 = _el$4.firstChild,
@@ -4907,7 +4973,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
     return _el$7;
   })();
   const search_field = $5285d2814d0fac0c$export$b94867ecbd698f21({
-    BackIcon_: () => $9HbP8$createComponent((0, $5cec65dd06ade2c4$export$11e9f390c90a537f), {}),
+    BackIcon_: (0, $5cec65dd06ade2c4$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_,
@@ -4923,7 +4989,6 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($9HbP8$catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -12666,7 +12731,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $9HbP8$createRoot(dispose => {
@@ -12713,7 +12778,7 @@ function $0e562a5b247b1fc2$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
@@ -12780,6 +12845,8 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
+      // Just copy-pasted below line without thinking, it might be wrong
+      const pxOffCenter = Math.abs($9HbP8$untrack(innerWidthReactive) / 2 - (left + width / 2));
       $0a901077d5c8a2b2$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
@@ -12795,12 +12862,12 @@ function $0e562a5b247b1fc2$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]);
@@ -13002,7 +13069,7 @@ function $7097477c78a89208$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_,
@@ -13012,7 +13079,7 @@ function $7097477c78a89208$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({});
@@ -13046,7 +13113,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -13916,7 +13983,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
   const shared_properties = $806c97b931758897$export$12fa711345994013(depict_search);
   return $16b52438165aafe2$export$23fca46f3143581f(() => {
     let input_element;
-    let submitButton_;
+    let buttonInField;
     const search_field = $9HbP8$createComponent((0, $5285d2814d0fac0c$export$b94867ecbd698f21), {
       get BackIcon_() {
         return shared_properties.BackIcon_;
@@ -13935,7 +14002,7 @@ function $58b3487626e85ece$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_ = $9HbP8$createSignal({
           position: "fixed"
@@ -13982,7 +14049,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.3.14",
+  "version": "4.4.1",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,7 +236,7 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.0.4",
+    "@depict-ai/plp-styling": "^4.1.1",
     "@depict-ai/types": "^5.1.2",
     "@depict-ai/utilishared": "^2.1.2",
     "solid-js": "^1.8.12"

package/server/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.1";
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -3055,11 +3055,12 @@ let $c95c6dd9e93acd82$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c95c6dd9e93acd82$export$44dad306455dddf || ($c95c6dd9e93acd82$export$44dad306455dddf = {}));
-var $29e5dbeb69da7a36$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
-  $29e5dbeb69da7a36$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 $29e5dbeb69da7a36$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
+  $29e5dbeb69da7a36$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
+  $29e5dbeb69da7a36$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></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_,
@@ -3070,7 +3071,7 @@ function $29e5dbeb69da7a36$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.
@@ -3084,19 +3085,65 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   })); // focus field on render
   const owner_of_field_element = $3hooq$solidjs.getOwner();
   const isNewModal = BackIcon_[(0, $072ab198d82c3eb7$export$1ea76ea778b880dd)] === 2;
-  return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+  const [backButtonWidthAccessor, setBackButtonWidthAccessor] = $3hooq$solidjs.createSignal();
+  const getBackButtonWidth = () => {
+    var _backButtonWidthAcces;
+    return (_backButtonWidthAcces = backButtonWidthAccessor()) === null || _backButtonWidthAcces === void 0 ? void 0 : _backButtonWidthAcces();
+  };
+  const searchFieldEmpty = $3hooq$solidjs.createMemo(() => !searchFieldValue());
+  const BackButton = () => $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     when: on_back_,
     get children() {
-      return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.back_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackIcon_, {})));
+      return $3hooq$solidjsweb.ssrElement("button", $3hooq$solidjsweb.mergeProps({
+        "class": "back",
+        type: "button",
+        get ["aria-label"]() {
+          return i18n_.back_();
+        }
+      }, isNewModal && {
+        ref: el => {
+          setBackButtonWidthAccessor(() => $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd(el));
+          $3hooq$solidjs.onCleanup(() => setBackButtonWidthAccessor());
+        }
+      }), () => isNewModal ? $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {})) : $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackIcon_, {})), true);
     }
-  })), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("value", $3hooq$solidjsweb.escape(search_field_value_[0](), true), false) + $3hooq$solidjsweb.ssrAttribute("placeholder", $3hooq$solidjsweb.escape(i18n_.placeholder_text_(), true), false), $3hooq$solidjsweb.ssrAttribute("title", $3hooq$solidjsweb.escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $3hooq$solidjsweb.ssrStyle($3hooq$solidjs.createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {})), $3hooq$solidjsweb.ssrElement("button", $3hooq$solidjsweb.mergeProps({
-    "class": "submit major",
-    type: "button"
-  }, () => isNewModal ? {
-    tabindex: "-1"
+  });
+  const ClearButton = () => $3hooq$solidjsweb.ssrElement("button", $3hooq$solidjsweb.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_()
-  }), () => $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {})), false));
+    title: i18n_.clear_filters_query_sorting_after_submit_()
+  }), () => isNewModal ? $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+    get when() {
+      return !searchFieldEmpty();
+    },
+    get fallback() {
+      return $3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {});
+    },
+    get children() {
+      return $3hooq$solidjsweb.createComponent(BackIcon_, {});
+    }
+  })) : $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {})), true);
+  return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), "search-field ".concat(!!on_back_ ? "in-modal" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+    get when() {
+      return getBackButtonWidth() !== undefined && on_back_;
+    },
+    get children() {
+      return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "width:" + ($3hooq$solidjsweb.escape(getBackButtonWidth(), true) + "px"));
+    }
+  })), !isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {})), "query ".concat(!!on_back_ ? "has-adjacent-back-button" : ""), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_field_field_aria_label_(), true), false) + $3hooq$solidjsweb.ssrAttribute("value", $3hooq$solidjsweb.escape(searchFieldValue(), true), false) + $3hooq$solidjsweb.ssrAttribute("placeholder", $3hooq$solidjsweb.escape(i18n_.placeholder_text_(), true), false), !isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(ClearButton, {})), isNewModal && $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(BackButton, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+    when: !isNewModal,
+    get children() {
+      return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("aria-label", $3hooq$solidjsweb.escape(i18n_.search_submit_button_aria_label_(), true), false), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {})));
+    }
+  })));
 }
 function $8c2e68c6d458169b$export$fe334901e8bebd57() {
   const cleanup_fns = [];
@@ -3263,7 +3310,7 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
     };
   });
   const search_field = $29e5dbeb69da7a36$export$b94867ecbd698f21({
-    BackIcon_: () => $3hooq$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;
@@ -3282,7 +3329,6 @@ function $9035b24c2dbd3f36$var$RawClassicSearchModal(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   const modal_element = $3hooq$solidjsweb.ssr($9035b24c2dbd3f36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), "depict-search-modal", "".concat("body", " ").concat($3hooq$solidjsweb.escape($3hooq$solidjsweb.escape(random_classname, true), true)), $3hooq$solidjsweb.escape(search_field), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $1b3cf201cdd38687$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "Autocomplete/suggestions failed",
@@ -4320,7 +4366,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
   };
   const discoverMoreSection = $3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), get_search_field_value_() ? $3hooq$solidjsweb.escape(i18n_.modal_view_all_results_()($3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(formattedTotalNumberResults())))) : $3hooq$solidjsweb.escape(i18n_.modal_discover_more_()));
   const search_field = $29e5dbeb69da7a36$export$b94867ecbd698f21({
-    BackIcon_: () => $3hooq$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;
@@ -4339,7 +4385,6 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
       input_el.setSelectionRange(start, end);
     }
   });
-  search_field.classList.add("in-modal");
   if (setSearchFieldOuterWidth_) {
     const resizeObserver = new ResizeObserver($3hooq$depictaiutilishared.catchify(records => setSearchFieldOuterWidth_(records.at(-1).contentRect.width)));
     resizeObserver.observe(search_field);
@@ -11117,7 +11162,7 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
     bodyAlignmentSignal_: [, setBodyAlignment_],
     backdropStyleSignal_: [, setBackdropStyle_],
     setPollAlignment_: setPollAlignment_,
-    submitButton_: submitButton_,
+    buttonInField_: buttonInField_,
     modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
   } = _ref;
   return $3hooq$solidjs.createRoot(dispose => {
@@ -11160,7 +11205,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([{
+    if (pxOffCenter > 10) buttonInField_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -11227,6 +11272,8 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
+      // Just copy-pasted below line without thinking, it might be wrong
+      const pxOffCenter = Math.abs($3hooq$solidjs.untrack(innerWidthReactive) / 2 - (left + width / 2));
       $ce2f7ec02a8f2173$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
@@ -11242,12 +11289,12 @@ function $a60bc7692ce52705$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]);
@@ -11458,7 +11505,7 @@ function $739c927cbecd26b0$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_,
@@ -11468,7 +11515,7 @@ function $739c927cbecd26b0$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({});
@@ -11503,7 +11550,7 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -12526,7 +12573,7 @@ function $98aef9965764903d$export$316f6f283ae64765(props) {
   const shared_properties = $ddd39c5f36f49703$export$12fa711345994013(depict_search);
   return $d05611ff6b8c8357$export$23fca46f3143581f(() => {
     let input_element;
-    let submitButton_;
+    let buttonInField;
     const search_field = $3hooq$solidjsweb.createComponent((0, $29e5dbeb69da7a36$export$b94867ecbd698f21), {
       get BackIcon_() {
         return shared_properties.BackIcon_;
@@ -12545,7 +12592,7 @@ function $98aef9965764903d$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_ = $3hooq$solidjs.createSignal({
           position: "fixed"
@@ -12592,7 +12639,7 @@ function $98aef9965764903d$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }

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