@depict-ai/ui 4.4.0 → 4.4.1

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.4.0";
+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++) {
@@ -3618,7 +3618,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.
@@ -3662,6 +3662,8 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   });
   const ClearButton = () => (() => {
     var _el$2 = $52FdA$solidjsweb.getNextElement($29e5dbeb69da7a36$var$_tmpl$2);
+    var _ref$ = buttonInFieldRef_;
+    typeof _ref$ === "function" ? $52FdA$solidjsweb.use(_ref$, _el$2) : buttonInFieldRef_ = _el$2;
     $52FdA$solidjsweb.spread(_el$2, $52FdA$solidjsweb.mergeProps({
       get classList() {
         return {
@@ -3805,11 +3807,11 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
         if (!dont_submit) submit_query_();
       }
     }), true);
-    var _ref$ = $52FdA$depictaiutilishared.catchify(el => {
+    var _ref$2 = $52FdA$depictaiutilishared.catchify(el => {
       input_element = el;
       input_field_ref_ === null || input_field_ref_ === void 0 || input_field_ref_(el);
     });
-    typeof _ref$ === "function" && $52FdA$solidjsweb.use(_ref$, _el$6);
+    typeof _ref$2 === "function" && $52FdA$solidjsweb.use(_ref$2, _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);
@@ -3818,8 +3820,6 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       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();
@@ -13612,7 +13612,7 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
     bodyAlignmentSignal_: [, setBodyAlignment_],
     backdropStyleSignal_: [, setBackdropStyle_],
     setPollAlignment_: setPollAlignment_,
-    submitButton_: submitButton_,
+    buttonInField_: buttonInField_,
     modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
   } = _ref;
   return $52FdA$solidjs.createRoot(dispose => {
@@ -13659,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_ === null || submitButton_ === void 0 || submitButton_.animate([{
+    if (pxOffCenter > 10) buttonInField_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -13726,6 +13726,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($52FdA$solidjs.untrack(innerWidthReactive) / 2 - (left + width / 2));
       $ce2f7ec02a8f2173$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
@@ -13741,12 +13743,12 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_ === null || submitButton_ === void 0 ? void 0 : 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]);
@@ -13966,7 +13968,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_,
@@ -13976,7 +13978,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({});
@@ -14011,7 +14013,7 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -15066,7 +15068,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 = $52FdA$solidjsweb.createComponent((0, $29e5dbeb69da7a36$export$b94867ecbd698f21), {
       get BackIcon_() {
         return shared_properties.BackIcon_;
@@ -15085,7 +15087,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_ = $52FdA$solidjs.createSignal({
           position: "fixed"
@@ -15132,7 +15134,7 @@ function $98aef9965764903d$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }

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.4.0";
+export const version = "4.4.1";
 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.4.0";
+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++) {
@@ -3528,7 +3528,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.
@@ -3572,6 +3572,8 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   });
   const ClearButton = () => (() => {
     var _el$2 = $8tj43$getNextElement($584c06c09cf4609d$var$_tmpl$2);
+    var _ref$ = buttonInFieldRef_;
+    typeof _ref$ === "function" ? $8tj43$use(_ref$, _el$2) : buttonInFieldRef_ = _el$2;
     $8tj43$spread(_el$2, $8tj43$mergeProps({
       get classList() {
         return {
@@ -3715,11 +3717,11 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
         if (!dont_submit) submit_query_();
       }
     }), true);
-    var _ref$ = $8tj43$catchify(el => {
+    var _ref$2 = $8tj43$catchify(el => {
       input_element = el;
       input_field_ref_ === null || input_field_ref_ === void 0 || input_field_ref_(el);
     });
-    typeof _ref$ === "function" && $8tj43$use(_ref$, _el$6);
+    typeof _ref$2 === "function" && $8tj43$use(_ref$2, _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);
@@ -3728,8 +3730,6 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       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();
@@ -13522,7 +13522,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
     bodyAlignmentSignal_: [, setBodyAlignment_],
     backdropStyleSignal_: [, setBackdropStyle_],
     setPollAlignment_: setPollAlignment_,
-    submitButton_: submitButton_,
+    buttonInField_: buttonInField_,
     modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
   } = _ref;
   return $8tj43$createRoot(dispose => {
@@ -13569,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_ === null || submitButton_ === void 0 || submitButton_.animate([{
+    if (pxOffCenter > 10) buttonInField_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -13636,6 +13636,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($8tj43$untrack(innerWidthReactive) / 2 - (left + width / 2));
       $d7833ca17fc05c5e$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
@@ -13651,12 +13653,12 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_ === null || submitButton_ === void 0 ? void 0 : 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]);
@@ -13876,7 +13878,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_,
@@ -13886,7 +13888,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({});
@@ -13921,7 +13923,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -14976,7 +14978,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 = $8tj43$createComponent((0, $584c06c09cf4609d$export$b94867ecbd698f21), {
       get BackIcon_() {
         return shared_properties.BackIcon_;
@@ -14995,7 +14997,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_ = $8tj43$createSignal({
           position: "fixed"
@@ -15042,7 +15044,7 @@ function $a3026fb727bc7550$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }

package/latest/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.4.0";
+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++) {
@@ -3427,7 +3427,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.
@@ -3468,6 +3468,8 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   });
   const ClearButton = () => (() => {
     var _el$2 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$2);
+    var _ref$ = buttonInFieldRef_;
+    typeof _ref$ === "function" ? $gVhhF$solidjsweb.use(_ref$, _el$2) : buttonInFieldRef_ = _el$2;
     $gVhhF$solidjsweb.spread(_el$2, $gVhhF$solidjsweb.mergeProps({
       get classList() {
         return {
@@ -3608,11 +3610,11 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
         if (!dont_submit) submit_query_();
       }
     }), true);
-    var _ref$ = $gVhhF$depictaiutilishared.catchify(el => {
+    var _ref$2 = $gVhhF$depictaiutilishared.catchify(el => {
       input_element = el;
       input_field_ref_?.(el);
     });
-    typeof _ref$ === "function" && $gVhhF$solidjsweb.use(_ref$, _el$6);
+    typeof _ref$2 === "function" && $gVhhF$solidjsweb.use(_ref$2, _el$6);
     _el$6.classList.toggle("has-adjacent-back-button", !!!!on_back_);
     $gVhhF$solidjsweb.insert(_el$5, !isNewModal && $gVhhF$solidjsweb.createComponent(ClearButton, {}), _el$10, _co$2);
     $gVhhF$solidjsweb.insert(_el$3, isNewModal && $gVhhF$solidjsweb.createComponent(BackButton, {}), _el$17, _co$5);
@@ -3621,8 +3623,6 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       get children() {
         var _el$11 = $gVhhF$solidjsweb.getNextElement($66b8b9a9613c141d$var$_tmpl$4);
         $gVhhF$solidjsweb.addEventListener(_el$11, "click", $gVhhF$depictaiutilishared.catchify(() => submit_query_()), true);
-        var _ref$2 = submit_button_ref_;
-        typeof _ref$2 === "function" ? $gVhhF$solidjsweb.use(_ref$2, _el$11) : submit_button_ref_ = _el$11;
         $gVhhF$solidjsweb.insert(_el$11, $gVhhF$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {}));
         $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setAttribute(_el$11, "aria-label", i18n_.search_submit_button_aria_label_()));
         $gVhhF$solidjsweb.runHydrationEvents();
@@ -12818,7 +12818,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $gVhhF$solidjs.createRoot(dispose => {
@@ -12865,7 +12865,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
     const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
     setPollAlignment_(true);
     // Fade out submit button so there aren't two overlapping buttons for a split second
-    submitButton_?.animate([{
+    if (pxOffCenter > 10) buttonInField_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -12932,6 +12932,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($gVhhF$solidjs.untrack(innerWidthReactive) / 2 - (left + width / 2));
       $6892e0748f94faa6$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
@@ -12947,12 +12949,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]);
@@ -13154,7 +13156,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_,
@@ -13164,7 +13166,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({});
@@ -13198,7 +13200,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -14068,7 +14070,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 = $gVhhF$solidjsweb.createComponent((0, $66b8b9a9613c141d$export$b94867ecbd698f21), {
       get BackIcon_() {
         return shared_properties.BackIcon_;
@@ -14087,7 +14089,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_ = $gVhhF$solidjs.createSignal({
           position: "fixed"
@@ -14134,7 +14136,7 @@ function $c0a0659cf97e8eb2$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }

package/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.4.0";
+export const version = "4.4.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {

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.4.0";
+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++) {
@@ -3340,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.
@@ -3381,6 +3381,8 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
   });
   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 {
@@ -3521,11 +3523,11 @@ 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$6);
+    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);
@@ -3534,8 +3536,6 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       get children() {
         var _el$11 = $9HbP8$getNextElement($5285d2814d0fac0c$var$_tmpl$4);
         $9HbP8$addEventListener(_el$11, "click", $9HbP8$catchify(() => submit_query_()), true);
-        var _ref$2 = submit_button_ref_;
-        typeof _ref$2 === "function" ? $9HbP8$use(_ref$2, _el$11) : submit_button_ref_ = _el$11;
         $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();
@@ -12731,7 +12731,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $9HbP8$createRoot(dispose => {
@@ -12778,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
@@ -12845,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_,
@@ -12860,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]);
@@ -13067,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_,
@@ -13077,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({});
@@ -13111,7 +13113,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -13981,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_;
@@ -14000,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"
@@ -14047,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.4.0",
+  "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.1.0",
+    "@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.4.0";
+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++) {
@@ -3071,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.
@@ -11162,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 => {
@@ -11205,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_ === null || submitButton_ === void 0 || submitButton_.animate([{
+    if (pxOffCenter > 10) buttonInField_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -11272,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_,
@@ -11287,12 +11289,12 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_ === null || submitButton_ === void 0 ? void 0 : 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]);
@@ -11503,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_,
@@ -11513,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({});
@@ -11548,7 +11550,7 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -12571,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_;
@@ -12590,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"
@@ -12637,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.4.0";
+export const version = "4.4.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {

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.4.0";
+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++) {
@@ -2981,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.
@@ -11072,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 => {
@@ -11115,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_ === null || submitButton_ === void 0 || submitButton_.animate([{
+    if (pxOffCenter > 10) buttonInField_.animate([{
       opacity: 1
     }, {
       opacity: 0
@@ -11182,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_,
@@ -11197,12 +11199,12 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         duration: closeDuration_,
         fill: "forwards",
         easing: "ease-out"
-      }).finished, submitButton_ === null || submitButton_ === void 0 ? void 0 : 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]);
@@ -11413,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_,
@@ -11423,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({});
@@ -11458,7 +11460,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -12481,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_;
@@ -12500,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"
@@ -12547,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.4.0";
+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++) {
@@ -2900,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.
@@ -10439,7 +10439,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $5vyXB$solidjs.createRoot(dispose => {
@@ -10482,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
@@ -10549,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_,
@@ -10564,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]);
@@ -10762,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_,
@@ -10772,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({});
@@ -10806,7 +10808,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -11644,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_;
@@ -11663,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"
@@ -11710,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.4.0";
+export const version = "4.4.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$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.4.0";
+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++) {
@@ -2813,7 +2813,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.
@@ -10352,7 +10352,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $i7OB2$createRoot(dispose => {
@@ -10395,7 +10395,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
@@ -10462,6 +10462,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($i7OB2$untrack(innerWidthReactive) / 2 - (left + width / 2));
       $0a901077d5c8a2b2$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
@@ -10477,12 +10479,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]);
@@ -10675,7 +10677,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_,
@@ -10685,7 +10687,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({});
@@ -10719,7 +10721,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -11557,7 +11559,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 = $i7OB2$createComponent((0, $5285d2814d0fac0c$export$b94867ecbd698f21), {
       get BackIcon_() {
         return shared_properties.BackIcon_;
@@ -11576,7 +11578,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_ = $i7OB2$createSignal({
           position: "fixed"
@@ -11623,7 +11625,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }