@depict-ai/ui 4.0.18 → 4.0.20

package/server/latest/index.cjs

@@ -89,7 +89,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.18";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.20";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -2146,8 +2146,8 @@ function $3a1c4fee88fb8672$export$9ca09caa9c849d9c() {
 var $1f3b5fa875714dea$var$_tmpl$ = ["<a", ">", "</a>"],
   $1f3b5fa875714dea$var$_tmpl$2 = ["<div", ' class="', '"><div class="image-part" style="', '">', "</div><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $1f3b5fa875714dea$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
-const $1f3b5fa875714dea$var$aspectRatioWidthComponent = 402.67;
-const $1f3b5fa875714dea$var$aspectRatioHeightComponent = 203.64;
+const $1f3b5fa875714dea$var$aspectRatioWidthComponent = 400;
+const $1f3b5fa875714dea$var$aspectRatioHeightComponent = 200;
 const $1f3b5fa875714dea$var$listingSuggestionCollageAspectRatio = $1f3b5fa875714dea$var$aspectRatioWidthComponent / $1f3b5fa875714dea$var$aspectRatioHeightComponent;
 function $1f3b5fa875714dea$export$67152d26d4f56ee8({
   listing_: listing_,
@@ -2709,9 +2709,10 @@ function $3b9f2020814c7876$export$66d1697a0f27069c(modalLayoutStacked) {
   };
 }
 var $11597ae03e703a47$var$_tmpl$ = ["<div", ' class="instant-results-wrapper" style="', '"><h2>', "</h2><!--$-->", "<!--/--></div>"],
-  $11597ae03e703a47$var$_tmpl$2 = ["<div", ' class="', '"></div>'],
-  $11597ae03e703a47$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="', '"></div><div class="discover-more"><button class="major" type="button">', "</button></div></div><!--$-->", "<!--/--></div>"],
-  $11597ae03e703a47$var$_tmpl$4 = ["<b", ">", "</b>"];
+  $11597ae03e703a47$var$_tmpl$2 = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
+  $11597ae03e703a47$var$_tmpl$3 = ["<b", ">", "</b>"],
+  $11597ae03e703a47$var$_tmpl$4 = ["<div", ' class="', '"></div>'],
+  $11597ae03e703a47$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
  */
@@ -2986,6 +2987,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
     if (forceUseDiv_) return $5vyXB$solidjsweb.ssrElement("div", props, () => $5vyXB$solidjsweb.escape(props.children), true);
     return $5vyXB$solidjsweb.ssrElement("dialog", props, () => $5vyXB$solidjsweb.escape(props.children), true);
   };
+  const discoverMoreSection = $5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), get_search_field_value_() ? $5vyXB$solidjsweb.escape(i18n_.modal_view_all_results_()($5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(formattedTotalNumberResults())))) : $5vyXB$solidjsweb.escape(i18n_.modal_discover_more_()));
   const search_field = $66b8b9a9613c141d$export$b94867ecbd698f21({
     BackIcon_: () => $5vyXB$solidjsweb.createComponent((0, $b8660a70353e03cf$export$11e9f390c90a537f), {}),
     input_field_ref_: element => set_input_field(element),
@@ -3019,7 +3021,7 @@ function $11597ae03e703a47$var$RawSearchModalV2({
     },
     onClose: close_modal_,
     get children() {
-      return [$5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `depict-search-modal-backdrop ${$5vyXB$solidjsweb.escape($5vyXB$solidjsweb.escape(backdropRandomClassname, true), true)}`), $5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `depict-search-modal ${modalLayoutStacked_() ? "stacked" : ""}`, `body ${$5vyXB$solidjsweb.escape($5vyXB$solidjsweb.escape(random_classname_body, true), true)}`, $5vyXB$solidjsweb.escape(search_field), `padded ${noResults() ? "no-results" : ""}`, get_search_field_value_() ? $5vyXB$solidjsweb.escape(i18n_.modal_view_all_results_()($5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$4, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape(formattedTotalNumberResults())))) : $5vyXB$solidjsweb.escape(i18n_.modal_discover_more_()), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $b776f25acdda22eb$export$f021bdedd3ec901a), {
+      return [$5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$4, $5vyXB$solidjsweb.ssrHydrationKey(), `depict-search-modal-backdrop ${$5vyXB$solidjsweb.escape($5vyXB$solidjsweb.escape(backdropRandomClassname, true), true)}`), $5vyXB$solidjsweb.ssr($11597ae03e703a47$var$_tmpl$5, $5vyXB$solidjsweb.ssrHydrationKey(), `depict-search-modal ${modalLayoutStacked_() ? "stacked" : ""}`, `body ${$5vyXB$solidjsweb.escape($5vyXB$solidjsweb.escape(random_classname_body, true), true)}`, $5vyXB$solidjsweb.escape(search_field), `padded ${noResults() ? "no-results" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $b776f25acdda22eb$export$f021bdedd3ec901a), {
         styles: mergedCssObject
       })))];
     }
@@ -10428,6 +10430,67 @@ function $3716b8caf7f959e2$var$make_state_saved_rows(
   }));
   return rows;
 }
+function $6892e0748f94faa6$export$e06dee46ebe7faa9({
+  setBackdropStyle_: setBackdropStyle_,
+  setBodyAlignment_: setBodyAlignment_,
+  openDuration_: openDuration_
+}) {
+  setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: `opacity ${openDuration_}ms ease-in`
+  }));
+  requestAnimationFrame(() => setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 1
+  })));
+  setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: `opacity ${openDuration_}ms ease-in ${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": `${openDuration_}ms`
+  }));
+  requestAnimationFrame(() => setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 1
+  })));
+}
+function $6892e0748f94faa6$export$23d40cc5971c3acd({
+  setBackdropStyle_: setBackdropStyle_,
+  setBodyAlignment_: setBodyAlignment_,
+  closeDuration_: closeDuration_
+}) {
+  setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: `opacity ${closeDuration_}ms ease-out`
+  }));
+  setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: `opacity ${closeDuration_}ms ease-out`
+  }));
+}
+function $6892e0748f94faa6$export$dab9321f3c157061(alignmentSignals, modalVersion) {
+  const [, setBodyAlignment_] = alignmentSignals.body_;
+  const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $5vyXB$solidjs.createSignal({});
+  // For default centered modal, also run our fading animations if search modal v2
+  modalVersion === 2 && $6892e0748f94faa6$export$e06dee46ebe7faa9({
+    openDuration_: 125,
+    setBodyAlignment_: setBodyAlignment_,
+    setBackdropStyle_: setBackdropStyle_
+  });
+  const closingAnimation = modalVersion === 2 ? async () => {
+    $6892e0748f94faa6$export$23d40cc5971c3acd({
+      closeDuration_: 100,
+      setBodyAlignment_: setBodyAlignment_,
+      setBackdropStyle_: setBackdropStyle_
+    });
+    await new Promise(r => setTimeout(r, 100));
+  } : undefined;
+  return closingAnimation;
+}
 var $5cbaffcb5602e671$var$_tmpl$ = ["<div", ' class="depict plp search">', "</div>"];
 function $5cbaffcb5602e671$export$44f738469d5570cf({
   actualField_: actualField_,
@@ -10441,7 +10504,15 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
 }) {
   return $5vyXB$solidjs.createRoot(dispose => {
     const [innerWidthReactive, setInnerWidthReactive] = $5vyXB$solidjs.createSignal(innerWidth);
-    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const [innerHeightReactive, setInnerHeightReactive] = $5vyXB$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,
@@ -10470,6 +10541,12 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
         zIndex: +zIndexOfFake + 1
       } : {})
     });
+    const absoluteFieldTop = $5vyXB$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;
+    });
     const pxOffCenter = Math.abs($5vyXB$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;
@@ -10503,7 +10580,10 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
           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: `${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);
@@ -10521,7 +10601,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
       clearTimeout(disableResizePollingTimeout);
       setPollAlignment_(false);
     });
-    $5cbaffcb5602e671$export$e06dee46ebe7faa9({
+    $6892e0748f94faa6$export$e06dee46ebe7faa9({
       setBackdropStyle_: setBackdropStyle_,
       setBodyAlignment_: setBodyAlignment_,
       openDuration_: openDuration_
@@ -10535,7 +10615,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
-      $5cbaffcb5602e671$export$23d40cc5971c3acd({
+      $6892e0748f94faa6$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
         closeDuration_: closeDuration_
@@ -10564,67 +10644,6 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
     };
   });
 }
-function $5cbaffcb5602e671$export$e06dee46ebe7faa9({
-  setBackdropStyle_: setBackdropStyle_,
-  setBodyAlignment_: setBodyAlignment_,
-  openDuration_: openDuration_
-}) {
-  setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: `opacity ${openDuration_}ms ease-in`
-  }));
-  requestAnimationFrame(() => setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 1
-  })));
-  setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: `opacity ${openDuration_}ms ease-in ${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": `${openDuration_}ms`
-  }));
-  requestAnimationFrame(() => setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 1
-  })));
-}
-function $5cbaffcb5602e671$export$23d40cc5971c3acd({
-  setBackdropStyle_: setBackdropStyle_,
-  setBodyAlignment_: setBodyAlignment_,
-  closeDuration_: closeDuration_
-}) {
-  setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: `opacity ${closeDuration_}ms ease-out`
-  }));
-  setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: `opacity ${closeDuration_}ms ease-out`
-  }));
-}
-function $5cbaffcb5602e671$export$dab9321f3c157061(alignmentSignals, modalVersion) {
-  const [, setBodyAlignment_] = alignmentSignals.body_;
-  const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $5vyXB$solidjs.createSignal({});
-  // For default centered modal, also run our fading animations if search modal v2
-  modalVersion === 2 && $5cbaffcb5602e671$export$e06dee46ebe7faa9({
-    openDuration_: 125,
-    setBodyAlignment_: setBodyAlignment_,
-    setBackdropStyle_: setBackdropStyle_
-  });
-  const closingAnimation = modalVersion === 2 ? async () => {
-    $5cbaffcb5602e671$export$23d40cc5971c3acd({
-      closeDuration_: 100,
-      setBodyAlignment_: setBodyAlignment_,
-      setBackdropStyle_: setBackdropStyle_
-    });
-    await new Promise(r => setTimeout(r, 100));
-  } : undefined;
-  return closingAnimation;
-}
 var $f1d7cb69f839a526$var$_tmpl$ = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
   $f1d7cb69f839a526$var$_tmpl$2 = ["<div", ' class="depict plp search"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $f1d7cb69f839a526$export$a54ec244c8863715({
@@ -11214,7 +11233,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
           if (!open_signal_value[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 = $5cbaffcb5602e671$export$dab9321f3c157061(search_page_aligned_modal_alignment_signals_, modalVersion);
+            const closingAnimation = $6892e0748f94faa6$export$dab9321f3c157061(search_page_aligned_modal_alignment_signals_, modalVersion);
             open_modal_({
               closing_animation_: closingAnimation,
               ...options_arg,
@@ -11224,7 +11243,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
           }
           // Open centered modal
           const centeredModalAlignmentSignals = $2005eec80e40088f$export$41b4894022a3580f();
-          const closingAnimation = $5cbaffcb5602e671$export$dab9321f3c157061(centeredModalAlignmentSignals, modalVersion);
+          const closingAnimation = $6892e0748f94faa6$export$dab9321f3c157061(centeredModalAlignmentSignals, modalVersion);
           if (signal_value_is_options) {
             const [options_arg, ...rest] = open_signal_value;
             open_modal_({
@@ -11461,7 +11480,7 @@ const $9c143d25df1fc2a2$export$d86a33413558014e = openModalParams => {
     field_: $5vyXB$solidjs.createSignal({}),
     backdrop_: $5vyXB$solidjs.createSignal({})
   };
-  const closingAnimation = $5cbaffcb5602e671$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
+  const closingAnimation = $6892e0748f94faa6$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
   $5vyXB$solidjs.createRoot(dispose => {
     dispose_aligner = () => {
       cleanup?.();

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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.18";
+export const version = "4.0.20";
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
  */
@@ -1211,7 +1211,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared").Node_Array;
+}): import("@depict-ai/utilishared/latest").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1351,7 +1351,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

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.0.18";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.20";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -2064,8 +2064,8 @@ function $0eb1f9e7ee46f1c2$export$9ca09caa9c849d9c() {
 var $4ce5b8892775b62d$var$_tmpl$ = ["<a", ">", "</a>"],
   $4ce5b8892775b62d$var$_tmpl$2 = ["<div", ' class="', '"><div class="image-part" style="', '">', "</div><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $4ce5b8892775b62d$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
-const $4ce5b8892775b62d$var$aspectRatioWidthComponent = 402.67;
-const $4ce5b8892775b62d$var$aspectRatioHeightComponent = 203.64;
+const $4ce5b8892775b62d$var$aspectRatioWidthComponent = 400;
+const $4ce5b8892775b62d$var$aspectRatioHeightComponent = 200;
 const $4ce5b8892775b62d$var$listingSuggestionCollageAspectRatio = $4ce5b8892775b62d$var$aspectRatioWidthComponent / $4ce5b8892775b62d$var$aspectRatioHeightComponent;
 function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   listing_: listing_,
@@ -2627,9 +2627,10 @@ function $140dbdee2e0b252f$export$66d1697a0f27069c(modalLayoutStacked) {
   };
 }
 var $500a16dd18ee5a71$var$_tmpl$ = ["<div", ' class="instant-results-wrapper" style="', '"><h2>', "</h2><!--$-->", "<!--/--></div>"],
-  $500a16dd18ee5a71$var$_tmpl$2 = ["<div", ' class="', '"></div>'],
-  $500a16dd18ee5a71$var$_tmpl$3 = ["<div", ' class="', '"><div class="', '"><!--$-->', '<!--/--><div class="', '"></div><div class="discover-more"><button class="major" type="button">', "</button></div></div><!--$-->", "<!--/--></div>"],
-  $500a16dd18ee5a71$var$_tmpl$4 = ["<b", ">", "</b>"];
+  $500a16dd18ee5a71$var$_tmpl$2 = ["<div", ' class="discover-more"><button class="major" type="button">', "</button></div>"],
+  $500a16dd18ee5a71$var$_tmpl$3 = ["<b", ">", "</b>"],
+  $500a16dd18ee5a71$var$_tmpl$4 = ["<div", ' class="', '"></div>'],
+  $500a16dd18ee5a71$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
  */
@@ -2904,6 +2905,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
     if (forceUseDiv_) return $i7OB2$ssrElement("div", props, () => $i7OB2$escape(props.children), true);
     return $i7OB2$ssrElement("dialog", props, () => $i7OB2$escape(props.children), true);
   };
+  const discoverMoreSection = $i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$2, $i7OB2$ssrHydrationKey(), get_search_field_value_() ? $i7OB2$escape(i18n_.modal_view_all_results_()($i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$escape(formattedTotalNumberResults())))) : $i7OB2$escape(i18n_.modal_discover_more_()));
   const search_field = $5285d2814d0fac0c$export$b94867ecbd698f21({
     BackIcon_: () => $i7OB2$createComponent((0, $5cec65dd06ade2c4$export$11e9f390c90a537f), {}),
     input_field_ref_: element => set_input_field(element),
@@ -2937,7 +2939,7 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
     },
     onClose: close_modal_,
     get children() {
-      return [$i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `depict-search-modal-backdrop ${$i7OB2$escape($i7OB2$escape(backdropRandomClassname, true), true)}`), $i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$3, $i7OB2$ssrHydrationKey(), `depict-search-modal ${modalLayoutStacked_() ? "stacked" : ""}`, `body ${$i7OB2$escape($i7OB2$escape(random_classname_body, true), true)}`, $i7OB2$escape(search_field), `padded ${noResults() ? "no-results" : ""}`, get_search_field_value_() ? $i7OB2$escape(i18n_.modal_view_all_results_()($i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$4, $i7OB2$ssrHydrationKey(), $i7OB2$escape(formattedTotalNumberResults())))) : $i7OB2$escape(i18n_.modal_discover_more_()), $i7OB2$escape($i7OB2$createComponent((0, $19f1f3e588d63502$export$f021bdedd3ec901a), {
+      return [$i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$4, $i7OB2$ssrHydrationKey(), `depict-search-modal-backdrop ${$i7OB2$escape($i7OB2$escape(backdropRandomClassname, true), true)}`), $i7OB2$ssr($500a16dd18ee5a71$var$_tmpl$5, $i7OB2$ssrHydrationKey(), `depict-search-modal ${modalLayoutStacked_() ? "stacked" : ""}`, `body ${$i7OB2$escape($i7OB2$escape(random_classname_body, true), true)}`, $i7OB2$escape(search_field), `padded ${noResults() ? "no-results" : ""}`, $i7OB2$escape($i7OB2$createComponent((0, $19f1f3e588d63502$export$f021bdedd3ec901a), {
         styles: mergedCssObject
       })))];
     }
@@ -10346,6 +10348,67 @@ function $49de9d31aeea1b5e$var$make_state_saved_rows(
   }));
   return rows;
 }
+function $0a901077d5c8a2b2$export$e06dee46ebe7faa9({
+  setBackdropStyle_: setBackdropStyle_,
+  setBodyAlignment_: setBodyAlignment_,
+  openDuration_: openDuration_
+}) {
+  setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: `opacity ${openDuration_}ms ease-in`
+  }));
+  requestAnimationFrame(() => setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 1
+  })));
+  setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: `opacity ${openDuration_}ms ease-in ${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": `${openDuration_}ms`
+  }));
+  requestAnimationFrame(() => setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 1
+  })));
+}
+function $0a901077d5c8a2b2$export$23d40cc5971c3acd({
+  setBackdropStyle_: setBackdropStyle_,
+  setBodyAlignment_: setBodyAlignment_,
+  closeDuration_: closeDuration_
+}) {
+  setBackdropStyle_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: `opacity ${closeDuration_}ms ease-out`
+  }));
+  setBodyAlignment_(prev => ({
+    ...prev,
+    opacity: 0,
+    transition: `opacity ${closeDuration_}ms ease-out`
+  }));
+}
+function $0a901077d5c8a2b2$export$dab9321f3c157061(alignmentSignals, modalVersion) {
+  const [, setBodyAlignment_] = alignmentSignals.body_;
+  const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $i7OB2$createSignal({});
+  // For default centered modal, also run our fading animations if search modal v2
+  modalVersion === 2 && $0a901077d5c8a2b2$export$e06dee46ebe7faa9({
+    openDuration_: 125,
+    setBodyAlignment_: setBodyAlignment_,
+    setBackdropStyle_: setBackdropStyle_
+  });
+  const closingAnimation = modalVersion === 2 ? async () => {
+    $0a901077d5c8a2b2$export$23d40cc5971c3acd({
+      closeDuration_: 100,
+      setBodyAlignment_: setBodyAlignment_,
+      setBackdropStyle_: setBackdropStyle_
+    });
+    await new Promise(r => setTimeout(r, 100));
+  } : undefined;
+  return closingAnimation;
+}
 var $0e562a5b247b1fc2$var$_tmpl$ = ["<div", ' class="depict plp search">', "</div>"];
 function $0e562a5b247b1fc2$export$44f738469d5570cf({
   actualField_: actualField_,
@@ -10359,7 +10422,15 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
 }) {
   return $i7OB2$createRoot(dispose => {
     const [innerWidthReactive, setInnerWidthReactive] = $i7OB2$createSignal(innerWidth);
-    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const [innerHeightReactive, setInnerHeightReactive] = $i7OB2$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,
@@ -10388,6 +10459,12 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
         zIndex: +zIndexOfFake + 1
       } : {})
     });
+    const absoluteFieldTop = $i7OB2$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;
+    });
     const pxOffCenter = Math.abs($i7OB2$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;
@@ -10421,7 +10498,10 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
           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: `${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);
@@ -10439,7 +10519,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
       clearTimeout(disableResizePollingTimeout);
       setPollAlignment_(false);
     });
-    $0e562a5b247b1fc2$export$e06dee46ebe7faa9({
+    $0a901077d5c8a2b2$export$e06dee46ebe7faa9({
       setBackdropStyle_: setBackdropStyle_,
       setBodyAlignment_: setBodyAlignment_,
       openDuration_: openDuration_
@@ -10453,7 +10533,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
-      $0e562a5b247b1fc2$export$23d40cc5971c3acd({
+      $0a901077d5c8a2b2$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
         closeDuration_: closeDuration_
@@ -10482,67 +10562,6 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
     };
   });
 }
-function $0e562a5b247b1fc2$export$e06dee46ebe7faa9({
-  setBackdropStyle_: setBackdropStyle_,
-  setBodyAlignment_: setBodyAlignment_,
-  openDuration_: openDuration_
-}) {
-  setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: `opacity ${openDuration_}ms ease-in`
-  }));
-  requestAnimationFrame(() => setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 1
-  })));
-  setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: `opacity ${openDuration_}ms ease-in ${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": `${openDuration_}ms`
-  }));
-  requestAnimationFrame(() => setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 1
-  })));
-}
-function $0e562a5b247b1fc2$export$23d40cc5971c3acd({
-  setBackdropStyle_: setBackdropStyle_,
-  setBodyAlignment_: setBodyAlignment_,
-  closeDuration_: closeDuration_
-}) {
-  setBackdropStyle_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: `opacity ${closeDuration_}ms ease-out`
-  }));
-  setBodyAlignment_(prev => ({
-    ...prev,
-    opacity: 0,
-    transition: `opacity ${closeDuration_}ms ease-out`
-  }));
-}
-function $0e562a5b247b1fc2$export$dab9321f3c157061(alignmentSignals, modalVersion) {
-  const [, setBodyAlignment_] = alignmentSignals.body_;
-  const [, setBackdropStyle_] = alignmentSignals.backdrop_ || $i7OB2$createSignal({});
-  // For default centered modal, also run our fading animations if search modal v2
-  modalVersion === 2 && $0e562a5b247b1fc2$export$e06dee46ebe7faa9({
-    openDuration_: 125,
-    setBodyAlignment_: setBodyAlignment_,
-    setBackdropStyle_: setBackdropStyle_
-  });
-  const closingAnimation = modalVersion === 2 ? async () => {
-    $0e562a5b247b1fc2$export$23d40cc5971c3acd({
-      closeDuration_: 100,
-      setBodyAlignment_: setBodyAlignment_,
-      setBackdropStyle_: setBackdropStyle_
-    });
-    await new Promise(r => setTimeout(r, 100));
-  } : undefined;
-  return closingAnimation;
-}
 var $7097477c78a89208$var$_tmpl$ = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
   $7097477c78a89208$var$_tmpl$2 = ["<div", ' class="depict plp search"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $7097477c78a89208$export$a54ec244c8863715({
@@ -11132,7 +11151,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
           if (!open_signal_value[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 = $0e562a5b247b1fc2$export$dab9321f3c157061(search_page_aligned_modal_alignment_signals_, modalVersion);
+            const closingAnimation = $0a901077d5c8a2b2$export$dab9321f3c157061(search_page_aligned_modal_alignment_signals_, modalVersion);
             open_modal_({
               closing_animation_: closingAnimation,
               ...options_arg,
@@ -11142,7 +11161,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
           }
           // Open centered modal
           const centeredModalAlignmentSignals = $1801dbce7adb3f19$export$41b4894022a3580f();
-          const closingAnimation = $0e562a5b247b1fc2$export$dab9321f3c157061(centeredModalAlignmentSignals, modalVersion);
+          const closingAnimation = $0a901077d5c8a2b2$export$dab9321f3c157061(centeredModalAlignmentSignals, modalVersion);
           if (signal_value_is_options) {
             const [options_arg, ...rest] = open_signal_value;
             open_modal_({
@@ -11379,7 +11398,7 @@ const $6891c018a834cfdd$export$d86a33413558014e = openModalParams => {
     field_: $i7OB2$createSignal({}),
     backdrop_: $i7OB2$createSignal({})
   };
-  const closingAnimation = $0e562a5b247b1fc2$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
+  const closingAnimation = $0a901077d5c8a2b2$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
   $i7OB2$createRoot(dispose => {
     dispose_aligner = () => {
       cleanup?.();