@depict-ai/ui 4.0.17 → 4.0.19

package/server/ES10/index.cjs

@@ -95,7 +95,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.17";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.19";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -2248,8 +2248,8 @@ function $317500f39819fba6$export$9ca09caa9c849d9c() {
 var $d1e7b96fb13cd1d3$var$_tmpl$ = ["<a", ">", "</a>"],
   $d1e7b96fb13cd1d3$var$_tmpl$2 = ["<div", ' class="', '"><div class="image-part" style="', '">', "</div><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $d1e7b96fb13cd1d3$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
-const $d1e7b96fb13cd1d3$var$aspectRatioWidthComponent = 402.67;
-const $d1e7b96fb13cd1d3$var$aspectRatioHeightComponent = 203.64;
+const $d1e7b96fb13cd1d3$var$aspectRatioWidthComponent = 400;
+const $d1e7b96fb13cd1d3$var$aspectRatioHeightComponent = 200;
 const $d1e7b96fb13cd1d3$var$listingSuggestionCollageAspectRatio = $d1e7b96fb13cd1d3$var$aspectRatioWidthComponent / $d1e7b96fb13cd1d3$var$aspectRatioHeightComponent;
 function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
   var _image_urls$length, _image_urls;
@@ -2845,9 +2845,10 @@ function $58ffab03481f8973$export$66d1697a0f27069c(modalLayoutStacked) {
   };
 }
 var $43600b30502feeda$var$_tmpl$ = ["<div", ' class="instant-results-wrapper" style="', '"><h2>', "</h2><!--$-->", "<!--/--></div>"],
-  $43600b30502feeda$var$_tmpl$2 = ["<div", ' class="', '"></div>'],
-  $43600b30502feeda$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="', '"></div><div class="discover-more"><button class="major" type="button">', "</button></div></div><!--$-->", "<!--/--></div>"],
-  $43600b30502feeda$var$_tmpl$4 = ["<b", ">", "</b>"];
+  $43600b30502feeda$var$_tmpl$2 = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
+  $43600b30502feeda$var$_tmpl$3 = ["<b", ">", "</b>"],
+  $43600b30502feeda$var$_tmpl$4 = ["<div", ' class="', '"></div>'],
+  $43600b30502feeda$var$_tmpl$5 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="', '"></div></div><!--$-->', "<!--/--></div>"];
 /**
  * Second generation search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -3130,6 +3131,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
     if (forceUseDiv_) return $3hooq$solidjsweb.ssrElement("div", props, () => $3hooq$solidjsweb.escape(props.children), true);
     return $3hooq$solidjsweb.ssrElement("dialog", props, () => $3hooq$solidjsweb.escape(props.children), true);
   };
+  const discoverMoreSection = $3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), get_search_field_value_() ? $3hooq$solidjsweb.escape(i18n_.modal_view_all_results_()($3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(formattedTotalNumberResults())))) : $3hooq$solidjsweb.escape(i18n_.modal_discover_more_()));
   const search_field = $29e5dbeb69da7a36$export$b94867ecbd698f21({
     BackIcon_: () => $3hooq$solidjsweb.createComponent((0, $50b50df3efaa8776$export$11e9f390c90a537f), {}),
     input_field_ref_: element => set_input_field(element),
@@ -3166,7 +3168,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
     },
     onClose: close_modal_,
     get children() {
-      return [$3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "depict-search-modal-backdrop ".concat($3hooq$solidjsweb.escape($3hooq$solidjsweb.escape(backdropRandomClassname, true), true))), $3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), "depict-search-modal ".concat(modalLayoutStacked_() ? "stacked" : ""), "body ".concat($3hooq$solidjsweb.escape($3hooq$solidjsweb.escape(random_classname_body, true), true)), $3hooq$solidjsweb.escape(search_field), "padded ".concat(noResults() ? "no-results" : ""), get_search_field_value_() ? $3hooq$solidjsweb.escape(i18n_.modal_view_all_results_()($3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$4, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape(formattedTotalNumberResults())))) : $3hooq$solidjsweb.escape(i18n_.modal_discover_more_()), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $cc66bbf6e783bb58$export$f021bdedd3ec901a), {
+      return [$3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$4, $3hooq$solidjsweb.ssrHydrationKey(), "depict-search-modal-backdrop ".concat($3hooq$solidjsweb.escape($3hooq$solidjsweb.escape(backdropRandomClassname, true), true))), $3hooq$solidjsweb.ssr($43600b30502feeda$var$_tmpl$5, $3hooq$solidjsweb.ssrHydrationKey(), "depict-search-modal ".concat(modalLayoutStacked_() ? "stacked" : ""), "body ".concat($3hooq$solidjsweb.escape($3hooq$solidjsweb.escape(random_classname_body, true), true)), $3hooq$solidjsweb.escape(search_field), "padded ".concat(noResults() ? "no-results" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $cc66bbf6e783bb58$export$f021bdedd3ec901a), {
         styles: mergedCssObject
       })))];
     }
@@ -11180,6 +11182,69 @@ function $eab939d0b95b75ee$var$make_state_saved_rows(_ref2, i18n_) {
   }));
   return rows;
 }
+function $ce2f7ec02a8f2173$export$e06dee46ebe7faa9(_ref) {
+  let {
+    setBackdropStyle_: setBackdropStyle_,
+    setBodyAlignment_: setBodyAlignment_,
+    openDuration_: openDuration_
+  } = _ref;
+  setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: "opacity ".concat(openDuration_, "ms ease-in")
+  }));
+  requestAnimationFrame(() => setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 1
+  })));
+  setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: "opacity ".concat(openDuration_, "ms ease-in ").concat(openDuration_ / 5, "ms"),
+    // Add a slight delay so the brightness of the modal isn't so jarring before the background has gotten darkened
+    "--js-animation-duration": "".concat(openDuration_, "ms")
+  }));
+  requestAnimationFrame(() => setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 1
+  })));
+}
+function $ce2f7ec02a8f2173$export$23d40cc5971c3acd(_ref2) {
+  let {
+    setBackdropStyle_: setBackdropStyle_,
+    setBodyAlignment_: setBodyAlignment_,
+    closeDuration_: closeDuration_
+  } = _ref2;
+  setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: "opacity ".concat(closeDuration_, "ms ease-out")
+  }));
+  setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: "opacity ".concat(closeDuration_, "ms ease-out")
+  }));
+}
+function $ce2f7ec02a8f2173$export$dab9321f3c157061(alignmentSignals, modalVersion) {
+  const [, setBodyAlignment_] = alignmentSignals.body_;
+  const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $3hooq$solidjs.createSignal({});
+  // For default centered modal, also run our fading animations if search modal v2
+  modalVersion === 2 && $ce2f7ec02a8f2173$export$e06dee46ebe7faa9({
+    openDuration_: 125,
+    setBodyAlignment_: setBodyAlignment_,
+    setBackdropStyle_: setBackdropStyle_
+  });
+  const closingAnimation = modalVersion === 2 ? async () => {
+    $ce2f7ec02a8f2173$export$23d40cc5971c3acd({
+      closeDuration_: 100,
+      setBodyAlignment_: setBodyAlignment_,
+      setBackdropStyle_: setBackdropStyle_
+    });
+    await new Promise(r => setTimeout(r, 100));
+  } : undefined;
+  return closingAnimation;
+}
 var $a60bc7692ce52705$var$_tmpl$ = ["<div", ' class="depict plp search">', "</div>"];
 function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
   let {
@@ -11194,7 +11259,15 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
   } = _ref;
   return $3hooq$solidjs.createRoot(dispose => {
     const [innerWidthReactive, setInnerWidthReactive] = $3hooq$solidjs.createSignal(innerWidth);
-    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const [innerHeightReactive, setInnerHeightReactive] = $3hooq$solidjs.createSignal(innerHeight);
+    const resizeObserver = new ResizeObserver(records => {
+      const {
+        width: width,
+        height: height
+      } = records.at(-1).contentRect;
+      setInnerWidthReactive(width);
+      setInnerHeightReactive(height);
+    });
     const {
       left: left,
       top: top,
@@ -11223,6 +11296,13 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
+    const absoluteFieldTop = $3hooq$solidjs.createMemo(() => {
+      innerHeightReactive();
+      innerWidthReactive();
+      // This is very semi-scientific but I hope it works (seems to, albeit laggy see comment where this value gets used)
+      return fakeField.getBoundingClientRect().top;
+    });
+    $3hooq$solidjs.createEffect(() => console.log("absoluteFieldTop", fakeField, absoluteFieldTop(), "changing", addedToBody));
     const pxOffCenter = Math.abs($3hooq$solidjs.untrack(innerWidthReactive) / 2 - (left + width / 2));
     const openDuration_ = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
     const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
@@ -11256,7 +11336,10 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
           Object.assign(addedToBody.style, {
             // This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
             left: "".concat(innerWidthReactive() / 2 - inModalFieldWidth() / 2, "px"),
-            width: inModalFieldWidthPx()
+            width: inModalFieldWidthPx(),
+            // Lord forgive me for this is laggy. Example: on preview browser when resizing the screen in both x and y direction at the sam time. But it's too hard to change the code now, so that it doesn't happen.
+            // Basically we'd want one align_field running in only the y-axis on the field that's still in the DOM and another one in the x-axis on the fake field. Or something…
+            top: absoluteFieldTop() + "px"
           });
           // We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
           setPollAlignment_(true);
@@ -11274,7 +11357,7 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
       clearTimeout(disableResizePollingTimeout);
       setPollAlignment_(false);
     });
-    $a60bc7692ce52705$export$e06dee46ebe7faa9({
+    $ce2f7ec02a8f2173$export$e06dee46ebe7faa9({
       setBackdropStyle_: setBackdropStyle_,
       setBodyAlignment_: setBodyAlignment_,
       openDuration_: openDuration_
@@ -11288,7 +11371,7 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
-      $a60bc7692ce52705$export$23d40cc5971c3acd({
+      $ce2f7ec02a8f2173$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
         closeDuration_: closeDuration_
@@ -11317,69 +11400,6 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
     };
   });
 }
-function $a60bc7692ce52705$export$e06dee46ebe7faa9(_ref2) {
-  let {
-    setBackdropStyle_: setBackdropStyle_,
-    setBodyAlignment_: setBodyAlignment_,
-    openDuration_: openDuration_
-  } = _ref2;
-  setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: "opacity ".concat(openDuration_, "ms ease-in")
-  }));
-  requestAnimationFrame(() => setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 1
-  })));
-  setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: "opacity ".concat(openDuration_, "ms ease-in ").concat(openDuration_ / 5, "ms"),
-    // Add a slight delay so the brightness of the modal isn't so jarring before the background has gotten darkened
-    "--js-animation-duration": "".concat(openDuration_, "ms")
-  }));
-  requestAnimationFrame(() => setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 1
-  })));
-}
-function $a60bc7692ce52705$export$23d40cc5971c3acd(_ref3) {
-  let {
-    setBackdropStyle_: setBackdropStyle_,
-    setBodyAlignment_: setBodyAlignment_,
-    closeDuration_: closeDuration_
-  } = _ref3;
-  setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: "opacity ".concat(closeDuration_, "ms ease-out")
-  }));
-  setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: "opacity ".concat(closeDuration_, "ms ease-out")
-  }));
-}
-function $a60bc7692ce52705$export$dab9321f3c157061(alignmentSignals, modalVersion) {
-  const [, setBodyAlignment_] = alignmentSignals.body_;
-  const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $3hooq$solidjs.createSignal({});
-  // For default centered modal, also run our fading animations if search modal v2
-  modalVersion === 2 && $a60bc7692ce52705$export$e06dee46ebe7faa9({
-    openDuration_: 125,
-    setBodyAlignment_: setBodyAlignment_,
-    setBackdropStyle_: setBackdropStyle_
-  });
-  const closingAnimation = modalVersion === 2 ? async () => {
-    $a60bc7692ce52705$export$23d40cc5971c3acd({
-      closeDuration_: 100,
-      setBodyAlignment_: setBodyAlignment_,
-      setBackdropStyle_: setBackdropStyle_
-    });
-    await new Promise(r => setTimeout(r, 100));
-  } : undefined;
-  return closingAnimation;
-}
 var $739c927cbecd26b0$var$_tmpl$ = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
   $739c927cbecd26b0$var$_tmpl$2 = ["<div", ' class="depict plp search"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
@@ -12067,7 +12087,7 @@ class $ddd39c5f36f49703$export$ac6237957a15b3f0 {
           if (!((_ = open_signal_value[0]) !== null && _ !== void 0 && _.alignmentSignals_) && search_page_aligned_modal_alignment_signals_) {
             // Open modal aligned with search page if no alignment specified and possible to align with search page
             const [options_arg, ...rest] = open_signal_value === true ? [{}] : open_signal_value;
-            const closingAnimation = $a60bc7692ce52705$export$dab9321f3c157061(search_page_aligned_modal_alignment_signals_, modalVersion);
+            const closingAnimation = $ce2f7ec02a8f2173$export$dab9321f3c157061(search_page_aligned_modal_alignment_signals_, modalVersion);
             open_modal_({
               closing_animation_: closingAnimation,
               ...options_arg,
@@ -12077,7 +12097,7 @@ class $ddd39c5f36f49703$export$ac6237957a15b3f0 {
           }
           // Open centered modal
           const centeredModalAlignmentSignals = $996102a9349df6d7$export$41b4894022a3580f();
-          const closingAnimation = $a60bc7692ce52705$export$dab9321f3c157061(centeredModalAlignmentSignals, modalVersion);
+          const closingAnimation = $ce2f7ec02a8f2173$export$dab9321f3c157061(centeredModalAlignmentSignals, modalVersion);
           if (signal_value_is_options) {
             const [options_arg, ...rest] = open_signal_value;
             open_modal_({
@@ -12331,7 +12351,7 @@ const $a24cfef36ef12dc5$export$d86a33413558014e = openModalParams => {
     field_: $3hooq$solidjs.createSignal({}),
     backdrop_: $3hooq$solidjs.createSignal({})
   };
-  const closingAnimation = $a60bc7692ce52705$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
+  const closingAnimation = $ce2f7ec02a8f2173$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
   $3hooq$solidjs.createRoot(dispose => {
     dispose_aligner = () => {
       var _cleanup;

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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.17";
+export const version = "4.0.19";
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
  */

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.0.17";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.19";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -2163,8 +2163,8 @@ function $4a3ed70b3b7c60d5$export$9ca09caa9c849d9c() {
 var $26db6925469636a4$var$_tmpl$ = ["<a", ">", "</a>"],
   $26db6925469636a4$var$_tmpl$2 = ["<div", ' class="', '"><div class="image-part" style="', '">', "</div><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $26db6925469636a4$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
-const $26db6925469636a4$var$aspectRatioWidthComponent = 402.67;
-const $26db6925469636a4$var$aspectRatioHeightComponent = 203.64;
+const $26db6925469636a4$var$aspectRatioWidthComponent = 400;
+const $26db6925469636a4$var$aspectRatioHeightComponent = 200;
 const $26db6925469636a4$var$listingSuggestionCollageAspectRatio = $26db6925469636a4$var$aspectRatioWidthComponent / $26db6925469636a4$var$aspectRatioHeightComponent;
 function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
   var _image_urls$length, _image_urls;
@@ -2760,9 +2760,10 @@ function $1abb91ab5abc8994$export$66d1697a0f27069c(modalLayoutStacked) {
   };
 }
 var $06fcd2a345efd24d$var$_tmpl$ = ["<div", ' class="instant-results-wrapper" style="', '"><h2>', "</h2><!--$-->", "<!--/--></div>"],
-  $06fcd2a345efd24d$var$_tmpl$2 = ["<div", ' class="', '"></div>'],
-  $06fcd2a345efd24d$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="', '"></div><div class="discover-more"><button class="major" type="button">', "</button></div></div><!--$-->", "<!--/--></div>"],
-  $06fcd2a345efd24d$var$_tmpl$4 = ["<b", ">", "</b>"];
+  $06fcd2a345efd24d$var$_tmpl$2 = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
+  $06fcd2a345efd24d$var$_tmpl$3 = ["<b", ">", "</b>"],
+  $06fcd2a345efd24d$var$_tmpl$4 = ["<div", ' class="', '"></div>'],
+  $06fcd2a345efd24d$var$_tmpl$5 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="', '"></div></div><!--$-->', "<!--/--></div>"];
 /**
  * Second generation search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -3045,6 +3046,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
     if (forceUseDiv_) return $b8hua$ssrElement("div", props, () => $b8hua$escape(props.children), true);
     return $b8hua$ssrElement("dialog", props, () => $b8hua$escape(props.children), true);
   };
+  const discoverMoreSection = $b8hua$ssr($06fcd2a345efd24d$var$_tmpl$2, $b8hua$ssrHydrationKey(), get_search_field_value_() ? $b8hua$escape(i18n_.modal_view_all_results_()($b8hua$ssr($06fcd2a345efd24d$var$_tmpl$3, $b8hua$ssrHydrationKey(), $b8hua$escape(formattedTotalNumberResults())))) : $b8hua$escape(i18n_.modal_discover_more_()));
   const search_field = $584c06c09cf4609d$export$b94867ecbd698f21({
     BackIcon_: () => $b8hua$createComponent((0, $c2fe922d21c40514$export$11e9f390c90a537f), {}),
     input_field_ref_: element => set_input_field(element),
@@ -3081,7 +3083,7 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
     },
     onClose: close_modal_,
     get children() {
-      return [$b8hua$ssr($06fcd2a345efd24d$var$_tmpl$2, $b8hua$ssrHydrationKey(), "depict-search-modal-backdrop ".concat($b8hua$escape($b8hua$escape(backdropRandomClassname, true), true))), $b8hua$ssr($06fcd2a345efd24d$var$_tmpl$3, $b8hua$ssrHydrationKey(), "depict-search-modal ".concat(modalLayoutStacked_() ? "stacked" : ""), "body ".concat($b8hua$escape($b8hua$escape(random_classname_body, true), true)), $b8hua$escape(search_field), "padded ".concat(noResults() ? "no-results" : ""), get_search_field_value_() ? $b8hua$escape(i18n_.modal_view_all_results_()($b8hua$ssr($06fcd2a345efd24d$var$_tmpl$4, $b8hua$ssrHydrationKey(), $b8hua$escape(formattedTotalNumberResults())))) : $b8hua$escape(i18n_.modal_discover_more_()), $b8hua$escape($b8hua$createComponent((0, $a86e71c0015bd8ab$export$f021bdedd3ec901a), {
+      return [$b8hua$ssr($06fcd2a345efd24d$var$_tmpl$4, $b8hua$ssrHydrationKey(), "depict-search-modal-backdrop ".concat($b8hua$escape($b8hua$escape(backdropRandomClassname, true), true))), $b8hua$ssr($06fcd2a345efd24d$var$_tmpl$5, $b8hua$ssrHydrationKey(), "depict-search-modal ".concat(modalLayoutStacked_() ? "stacked" : ""), "body ".concat($b8hua$escape($b8hua$escape(random_classname_body, true), true)), $b8hua$escape(search_field), "padded ".concat(noResults() ? "no-results" : ""), $b8hua$escape($b8hua$createComponent((0, $a86e71c0015bd8ab$export$f021bdedd3ec901a), {
         styles: mergedCssObject
       })))];
     }
@@ -11095,6 +11097,69 @@ function $d53ebed6f63304e4$var$make_state_saved_rows(_ref2, i18n_) {
   }));
   return rows;
 }
+function $d7833ca17fc05c5e$export$e06dee46ebe7faa9(_ref) {
+  let {
+    setBackdropStyle_: setBackdropStyle_,
+    setBodyAlignment_: setBodyAlignment_,
+    openDuration_: openDuration_
+  } = _ref;
+  setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: "opacity ".concat(openDuration_, "ms ease-in")
+  }));
+  requestAnimationFrame(() => setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 1
+  })));
+  setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: "opacity ".concat(openDuration_, "ms ease-in ").concat(openDuration_ / 5, "ms"),
+    // Add a slight delay so the brightness of the modal isn't so jarring before the background has gotten darkened
+    "--js-animation-duration": "".concat(openDuration_, "ms")
+  }));
+  requestAnimationFrame(() => setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 1
+  })));
+}
+function $d7833ca17fc05c5e$export$23d40cc5971c3acd(_ref2) {
+  let {
+    setBackdropStyle_: setBackdropStyle_,
+    setBodyAlignment_: setBodyAlignment_,
+    closeDuration_: closeDuration_
+  } = _ref2;
+  setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: "opacity ".concat(closeDuration_, "ms ease-out")
+  }));
+  setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: "opacity ".concat(closeDuration_, "ms ease-out")
+  }));
+}
+function $d7833ca17fc05c5e$export$dab9321f3c157061(alignmentSignals, modalVersion) {
+  const [, setBodyAlignment_] = alignmentSignals.body_;
+  const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $b8hua$createSignal({});
+  // For default centered modal, also run our fading animations if search modal v2
+  modalVersion === 2 && $d7833ca17fc05c5e$export$e06dee46ebe7faa9({
+    openDuration_: 125,
+    setBodyAlignment_: setBodyAlignment_,
+    setBackdropStyle_: setBackdropStyle_
+  });
+  const closingAnimation = modalVersion === 2 ? async () => {
+    $d7833ca17fc05c5e$export$23d40cc5971c3acd({
+      closeDuration_: 100,
+      setBodyAlignment_: setBodyAlignment_,
+      setBackdropStyle_: setBackdropStyle_
+    });
+    await new Promise(r => setTimeout(r, 100));
+  } : undefined;
+  return closingAnimation;
+}
 var $937791b86d3d1509$var$_tmpl$ = ["<div", ' class="depict plp search">', "</div>"];
 function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
   let {
@@ -11109,7 +11174,15 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
   } = _ref;
   return $b8hua$createRoot(dispose => {
     const [innerWidthReactive, setInnerWidthReactive] = $b8hua$createSignal(innerWidth);
-    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const [innerHeightReactive, setInnerHeightReactive] = $b8hua$createSignal(innerHeight);
+    const resizeObserver = new ResizeObserver(records => {
+      const {
+        width: width,
+        height: height
+      } = records.at(-1).contentRect;
+      setInnerWidthReactive(width);
+      setInnerHeightReactive(height);
+    });
     const {
       left: left,
       top: top,
@@ -11138,6 +11211,13 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
+    const absoluteFieldTop = $b8hua$createMemo(() => {
+      innerHeightReactive();
+      innerWidthReactive();
+      // This is very semi-scientific but I hope it works (seems to, albeit laggy see comment where this value gets used)
+      return fakeField.getBoundingClientRect().top;
+    });
+    $b8hua$createEffect(() => console.log("absoluteFieldTop", fakeField, absoluteFieldTop(), "changing", addedToBody));
     const pxOffCenter = Math.abs($b8hua$untrack(innerWidthReactive) / 2 - (left + width / 2));
     const openDuration_ = pxOffCenter > 100 ? 250 : 125; // faster animations if little left-right movement
     const closeDuration_ = pxOffCenter > 100 ? 150 : 100;
@@ -11171,7 +11251,10 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
           Object.assign(addedToBody.style, {
             // This is left: 50%, transform: translateX(-50) with extra steps but when using it safari and firefox glitch out like crazy
             left: "".concat(innerWidthReactive() / 2 - inModalFieldWidth() / 2, "px"),
-            width: inModalFieldWidthPx()
+            width: inModalFieldWidthPx(),
+            // Lord forgive me for this is laggy. Example: on preview browser when resizing the screen in both x and y direction at the sam time. But it's too hard to change the code now, so that it doesn't happen.
+            // Basically we'd want one align_field running in only the y-axis on the field that's still in the DOM and another one in the x-axis on the fake field. Or something…
+            top: absoluteFieldTop() + "px"
           });
           // We might only have changed the left position which align_field doesn't know about, make it poll the position for a while
           setPollAlignment_(true);
@@ -11189,7 +11272,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
       clearTimeout(disableResizePollingTimeout);
       setPollAlignment_(false);
     });
-    $937791b86d3d1509$export$e06dee46ebe7faa9({
+    $d7833ca17fc05c5e$export$e06dee46ebe7faa9({
       setBackdropStyle_: setBackdropStyle_,
       setBodyAlignment_: setBodyAlignment_,
       openDuration_: openDuration_
@@ -11203,7 +11286,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
-      $937791b86d3d1509$export$23d40cc5971c3acd({
+      $d7833ca17fc05c5e$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
         closeDuration_: closeDuration_
@@ -11232,69 +11315,6 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
     };
   });
 }
-function $937791b86d3d1509$export$e06dee46ebe7faa9(_ref2) {
-  let {
-    setBackdropStyle_: setBackdropStyle_,
-    setBodyAlignment_: setBodyAlignment_,
-    openDuration_: openDuration_
-  } = _ref2;
-  setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: "opacity ".concat(openDuration_, "ms ease-in")
-  }));
-  requestAnimationFrame(() => setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 1
-  })));
-  setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: "opacity ".concat(openDuration_, "ms ease-in ").concat(openDuration_ / 5, "ms"),
-    // Add a slight delay so the brightness of the modal isn't so jarring before the background has gotten darkened
-    "--js-animation-duration": "".concat(openDuration_, "ms")
-  }));
-  requestAnimationFrame(() => setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 1
-  })));
-}
-function $937791b86d3d1509$export$23d40cc5971c3acd(_ref3) {
-  let {
-    setBackdropStyle_: setBackdropStyle_,
-    setBodyAlignment_: setBodyAlignment_,
-    closeDuration_: closeDuration_
-  } = _ref3;
-  setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: "opacity ".concat(closeDuration_, "ms ease-out")
-  }));
-  setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: "opacity ".concat(closeDuration_, "ms ease-out")
-  }));
-}
-function $937791b86d3d1509$export$dab9321f3c157061(alignmentSignals, modalVersion) {
-  const [, setBodyAlignment_] = alignmentSignals.body_;
-  const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $b8hua$createSignal({});
-  // For default centered modal, also run our fading animations if search modal v2
-  modalVersion === 2 && $937791b86d3d1509$export$e06dee46ebe7faa9({
-    openDuration_: 125,
-    setBodyAlignment_: setBodyAlignment_,
-    setBackdropStyle_: setBackdropStyle_
-  });
-  const closingAnimation = modalVersion === 2 ? async () => {
-    $937791b86d3d1509$export$23d40cc5971c3acd({
-      closeDuration_: 100,
-      setBodyAlignment_: setBodyAlignment_,
-      setBackdropStyle_: setBackdropStyle_
-    });
-    await new Promise(r => setTimeout(r, 100));
-  } : undefined;
-  return closingAnimation;
-}
 var $da279c5a540c6846$var$_tmpl$ = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
   $da279c5a540c6846$var$_tmpl$2 = ["<div", ' class="depict plp search"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
@@ -11982,7 +12002,7 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
           if (!((_ = open_signal_value[0]) !== null && _ !== void 0 && _.alignmentSignals_) && search_page_aligned_modal_alignment_signals_) {
             // Open modal aligned with search page if no alignment specified and possible to align with search page
             const [options_arg, ...rest] = open_signal_value === true ? [{}] : open_signal_value;
-            const closingAnimation = $937791b86d3d1509$export$dab9321f3c157061(search_page_aligned_modal_alignment_signals_, modalVersion);
+            const closingAnimation = $d7833ca17fc05c5e$export$dab9321f3c157061(search_page_aligned_modal_alignment_signals_, modalVersion);
             open_modal_({
               closing_animation_: closingAnimation,
               ...options_arg,
@@ -11992,7 +12012,7 @@ class $eb064bc3350276c1$export$ac6237957a15b3f0 {
           }
           // Open centered modal
           const centeredModalAlignmentSignals = $8e8ce3f7a5eb11a6$export$41b4894022a3580f();
-          const closingAnimation = $937791b86d3d1509$export$dab9321f3c157061(centeredModalAlignmentSignals, modalVersion);
+          const closingAnimation = $d7833ca17fc05c5e$export$dab9321f3c157061(centeredModalAlignmentSignals, modalVersion);
           if (signal_value_is_options) {
             const [options_arg, ...rest] = open_signal_value;
             open_modal_({
@@ -12246,7 +12266,7 @@ const $169c13c0531d91d2$export$d86a33413558014e = openModalParams => {
     field_: $b8hua$createSignal({}),
     backdrop_: $b8hua$createSignal({})
   };
-  const closingAnimation = $937791b86d3d1509$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
+  const closingAnimation = $d7833ca17fc05c5e$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
   $b8hua$createRoot(dispose => {
     dispose_aligner = () => {
       var _cleanup;