@depict-ai/ui 4.4.0 → 4.4.2

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.2";
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -3600,6 +3600,16 @@ 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 $34934309832515dc$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=21 height=20 viewBox="0 0 21 20"fill=none><path fill-rule=evenodd d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z"fill=#0f0f0f>`);
+function $34934309832515dc$export$f7658c347b037c3f() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (() => {
+    var _el$ = $52FdA$solidjsweb.getNextElement($34934309832515dc$var$_tmpl$);
+    $52FdA$solidjsweb.spread(_el$, props, true, true);
+    $52FdA$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+}
 var $29e5dbeb69da7a36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class=back type=button>`),
   $29e5dbeb69da7a36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button type=button class=clear>`),
   $29e5dbeb69da7a36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=spacer>`),
@@ -3618,7 +3628,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 +3672,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 {
@@ -3689,7 +3701,7 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
         return !searchFieldEmpty();
       },
       get fallback() {
-        return $52FdA$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {});
+        return $52FdA$solidjsweb.createComponent((0, $34934309832515dc$export$f7658c347b037c3f), {});
       },
       get children() {
         return $52FdA$solidjsweb.createComponent(BackIcon_, {});
@@ -3805,11 +3817,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 +3830,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 +13622,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 +13669,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 +13736,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 +13753,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 +13978,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 +13988,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 +14023,7 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -15066,7 +15078,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 +15097,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 +15144,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.2";
 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.2";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -3510,6 +3510,16 @@ 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 $83c36ed4520d0335$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<svg xmlns=http://www.w3.org/2000/svg width=21 height=20 viewBox="0 0 21 20"fill=none><path fill-rule=evenodd d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z"fill=#0f0f0f>`);
+function $83c36ed4520d0335$export$f7658c347b037c3f() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (() => {
+    var _el$ = $8tj43$getNextElement($83c36ed4520d0335$var$_tmpl$);
+    $8tj43$spread(_el$, props, true, true);
+    $8tj43$runHydrationEvents();
+    return _el$;
+  })();
+}
 var $584c06c09cf4609d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<button class=back type=button>`),
   $584c06c09cf4609d$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<button type=button class=clear>`),
   $584c06c09cf4609d$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=spacer>`),
@@ -3528,7 +3538,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 +3582,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 {
@@ -3599,7 +3611,7 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
         return !searchFieldEmpty();
       },
       get fallback() {
-        return $8tj43$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {});
+        return $8tj43$createComponent((0, $83c36ed4520d0335$export$f7658c347b037c3f), {});
       },
       get children() {
         return $8tj43$createComponent(BackIcon_, {});
@@ -3715,11 +3727,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 +3740,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 +13532,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 +13579,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 +13646,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 +13663,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 +13888,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 +13898,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 +13933,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -14976,7 +14988,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 +15007,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 +15054,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.2";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -3410,6 +3410,15 @@ 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 $0175183387c8923a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg width=21 height=20 viewBox="0 0 21 20"fill=none><path fill-rule=evenodd d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z"fill=#0f0f0f>`);
+function $0175183387c8923a$export$f7658c347b037c3f(props = {}) {
+  return (() => {
+    var _el$ = $gVhhF$solidjsweb.getNextElement($0175183387c8923a$var$_tmpl$);
+    $gVhhF$solidjsweb.spread(_el$, props, true, true);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+}
 var $66b8b9a9613c141d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class=back type=button>`),
   $66b8b9a9613c141d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button type=button class=clear>`),
   $66b8b9a9613c141d$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=spacer>`),
@@ -3427,7 +3436,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 +3477,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 {
@@ -3495,7 +3506,7 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
         return !searchFieldEmpty();
       },
       get fallback() {
-        return $gVhhF$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {});
+        return $gVhhF$solidjsweb.createComponent((0, $0175183387c8923a$export$f7658c347b037c3f), {});
       },
       get children() {
         return $gVhhF$solidjsweb.createComponent(BackIcon_, {});
@@ -3608,11 +3619,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 +3632,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 +12827,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $gVhhF$solidjs.createRoot(dispose => {
@@ -12865,7 +12874,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 +12941,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 +12958,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 +13165,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 +13175,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 +13209,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -14068,7 +14079,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 +14098,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 +14145,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.2";
 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.2";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -3323,6 +3323,15 @@ let $f86ba724282f6690$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
+var $081752ca508a876f$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http://www.w3.org/2000/svg width=21 height=20 viewBox="0 0 21 20"fill=none><path fill-rule=evenodd d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z"fill=#0f0f0f>`);
+function $081752ca508a876f$export$f7658c347b037c3f(props = {}) {
+  return (() => {
+    var _el$ = $9HbP8$getNextElement($081752ca508a876f$var$_tmpl$);
+    $9HbP8$spread(_el$, props, true, true);
+    $9HbP8$runHydrationEvents();
+    return _el$;
+  })();
+}
 var $5285d2814d0fac0c$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class=back type=button>`),
   $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<button type=button class=clear>`),
   $5285d2814d0fac0c$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=spacer>`),
@@ -3340,7 +3349,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 +3390,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 {
@@ -3408,7 +3419,7 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
         return !searchFieldEmpty();
       },
       get fallback() {
-        return $9HbP8$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {});
+        return $9HbP8$createComponent((0, $081752ca508a876f$export$f7658c347b037c3f), {});
       },
       get children() {
         return $9HbP8$createComponent(BackIcon_, {});
@@ -3521,11 +3532,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 +3545,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 +12740,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $9HbP8$createRoot(dispose => {
@@ -12778,7 +12787,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 +12854,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 +12871,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 +13078,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 +13088,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 +13122,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -13981,7 +13992,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 +14011,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 +14058,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.2",
   "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.2",
     "@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.2";
 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,6 +3055,17 @@ 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 $34934309832515dc$var$_tmpl$ = '<path fill-rule="evenodd" d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z" fill="#0f0f0f"></path>';
+function $34934309832515dc$export$f7658c347b037c3f() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return $3hooq$solidjsweb.ssrElement("svg", $3hooq$solidjsweb.mergeProps({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "21",
+    height: "20",
+    viewBox: "0 0 21 20",
+    fill: "none"
+  }, props), () => $3hooq$solidjsweb.ssr($34934309832515dc$var$_tmpl$), true);
+}
 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>"];
@@ -3071,7 +3082,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.
@@ -3125,7 +3136,7 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       return !searchFieldEmpty();
     },
     get fallback() {
-      return $3hooq$solidjsweb.createComponent((0, $5b88b077e48a4451$export$82eafebb825fc23f), {});
+      return $3hooq$solidjsweb.createComponent((0, $34934309832515dc$export$f7658c347b037c3f), {});
     },
     get children() {
       return $3hooq$solidjsweb.createComponent(BackIcon_, {});
@@ -11162,7 +11173,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 +11216,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 +11283,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 +11300,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 +11516,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 +11526,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 +11561,7 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -12571,7 +12584,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 +12603,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 +12650,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.2";
 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.2";
 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,6 +2965,17 @@ 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 $83c36ed4520d0335$var$_tmpl$ = '<path fill-rule="evenodd" d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z" fill="#0f0f0f"></path>';
+function $83c36ed4520d0335$export$f7658c347b037c3f() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return $b8hua$ssrElement("svg", $b8hua$mergeProps({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "21",
+    height: "20",
+    viewBox: "0 0 21 20",
+    fill: "none"
+  }, props), () => $b8hua$ssr($83c36ed4520d0335$var$_tmpl$), true);
+}
 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>"];
@@ -2981,7 +2992,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.
@@ -3035,7 +3046,7 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       return !searchFieldEmpty();
     },
     get fallback() {
-      return $b8hua$createComponent((0, $ef0f18a578b32578$export$82eafebb825fc23f), {});
+      return $b8hua$createComponent((0, $83c36ed4520d0335$export$f7658c347b037c3f), {});
     },
     get children() {
       return $b8hua$createComponent(BackIcon_, {});
@@ -11072,7 +11083,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 +11126,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 +11193,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 +11210,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 +11426,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 +11436,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 +11471,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -12481,7 +12494,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 +12513,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 +12560,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.2";
 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,6 +2885,16 @@ 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 $0175183387c8923a$var$_tmpl$ = '<path fill-rule="evenodd" d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z" fill="#0f0f0f"></path>';
+function $0175183387c8923a$export$f7658c347b037c3f(props = {}) {
+  return $5vyXB$solidjsweb.ssrElement("svg", $5vyXB$solidjsweb.mergeProps({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "21",
+    height: "20",
+    viewBox: "0 0 21 20",
+    fill: "none"
+  }, props), () => $5vyXB$solidjsweb.ssr($0175183387c8923a$var$_tmpl$), true);
+}
 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>"];
@@ -2900,7 +2910,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.
@@ -2951,7 +2961,7 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       return !searchFieldEmpty();
     },
     get fallback() {
-      return $5vyXB$solidjsweb.createComponent((0, $87d7574e1d89d69b$export$82eafebb825fc23f), {});
+      return $5vyXB$solidjsweb.createComponent((0, $0175183387c8923a$export$f7658c347b037c3f), {});
     },
     get children() {
       return $5vyXB$solidjsweb.createComponent(BackIcon_, {});
@@ -10439,7 +10449,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $5vyXB$solidjs.createRoot(dispose => {
@@ -10482,7 +10492,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 +10559,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 +10576,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 +10774,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 +10784,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 +10818,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -11644,7 +11656,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 +11675,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 +11722,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.2";
 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.2";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -2798,6 +2798,16 @@ let $f86ba724282f6690$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
+var $081752ca508a876f$var$_tmpl$ = '<path fill-rule="evenodd" d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z" fill="#0f0f0f"></path>';
+function $081752ca508a876f$export$f7658c347b037c3f(props = {}) {
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "21",
+    height: "20",
+    viewBox: "0 0 21 20",
+    fill: "none"
+  }, props), () => $i7OB2$ssr($081752ca508a876f$var$_tmpl$), true);
+}
 var $5285d2814d0fac0c$var$_tmpl$ = ["<div", ' style="', '" class="spacer"></div>'],
   $5285d2814d0fac0c$var$_tmpl$2 = ["<button", ' class="submit major" type="button"', ">", "</button>"],
   $5285d2814d0fac0c$var$_tmpl$3 = ["<div", ' class="', '" role="search"><!--$-->', "<!--/--><!--$-->", '<!--/--><div class="field"><!--$-->', '<!--/--><input class="', '" tabindex="0"', "><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
@@ -2813,7 +2823,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.
@@ -2864,7 +2874,7 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       return !searchFieldEmpty();
     },
     get fallback() {
-      return $i7OB2$createComponent((0, $16f0ed5ea30d8d9c$export$82eafebb825fc23f), {});
+      return $i7OB2$createComponent((0, $081752ca508a876f$export$f7658c347b037c3f), {});
     },
     get children() {
       return $i7OB2$createComponent(BackIcon_, {});
@@ -10352,7 +10362,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
   bodyAlignmentSignal_: [, setBodyAlignment_],
   backdropStyleSignal_: [, setBackdropStyle_],
   setPollAlignment_: setPollAlignment_,
-  submitButton_: submitButton_,
+  buttonInField_: buttonInField_,
   modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
 }) {
   return $i7OB2$createRoot(dispose => {
@@ -10395,7 +10405,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 +10472,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 +10489,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 +10687,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 +10697,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 +10731,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
             bodyAlignmentSignal_: modal_body_style,
             backdropStyleSignal_: modal_backdrop_style,
             setPollAlignment_: setPollAlignment_,
-            submitButton_: submitButton_,
+            buttonInField_: buttonInField,
             modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
           });
         }
@@ -11557,7 +11569,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 +11588,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 +11635,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
               bodyAlignmentSignal_: bodyAlignmentSignal_,
               backdropStyleSignal_: backdropAlignmentSignal_,
               setPollAlignment_: setPollAlignment_,
-              submitButton_: submitButton_,
+              buttonInField_: buttonInField,
               modalSearchFieldOuterWidth_: modalSearchFieldOuterWidth_
             });
           }