@depict-ai/ui 4.0.18 → 4.0.20

package/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.18";
+const $aa1938dec50d6c12$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
@@ -2821,8 +2821,8 @@ function $317500f39819fba6$export$9ca09caa9c849d9c() {
 var $d1e7b96fb13cd1d3$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<a>`),
   $d1e7b96fb13cd1d3$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=listing-card><div class=image-part></div><!$><!/><h3 class=title>`),
   $d1e7b96fb13cd1d3$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=empty-image>`);
-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) {
   let {
@@ -2984,7 +2984,7 @@ function $d1e7b96fb13cd1d3$export$ea41102db9bd68c3(_ref3) {
 function $d1e7b96fb13cd1d3$var$EmptyImage() {
   return (() => {
     var _el$7 = $52FdA$solidjsweb.getNextElement($d1e7b96fb13cd1d3$var$_tmpl$3);
-    _el$7.style.setProperty("aspect-ratio", "1.977362011392654");
+    _el$7.style.setProperty("aspect-ratio", "2");
     $52FdA$solidjsweb.insert(_el$7, $52FdA$solidjsweb.createComponent((0, $317500f39819fba6$export$9ca09caa9c849d9c), {}));
     return _el$7;
   })();
@@ -3605,11 +3605,12 @@ function $58ffab03481f8973$export$66d1697a0f27069c(modalLayoutStacked) {
 var $43600b30502feeda$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=instant-results-wrapper><h2></h2><!$><!/>`),
   $43600b30502feeda$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div>`),
   $43600b30502feeda$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<dialog>`),
-  $43600b30502feeda$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal-backdrop>`),
-  $43600b30502feeda$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded></div><div class=discover-more><button class=major type=button></button></div></div><!$><!/>`),
-  $43600b30502feeda$var$_tmpl$6 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=left>`),
-  $43600b30502feeda$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=right>`),
-  $43600b30502feeda$var$_tmpl$8 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`);
+  $43600b30502feeda$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=discover-more><button class=major type=button>`),
+  $43600b30502feeda$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<b>`),
+  $43600b30502feeda$var$_tmpl$6 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal-backdrop>`),
+  $43600b30502feeda$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=depict-search-modal><div class=body><!$><!/><div class=padded></div></div><!$><!/>`),
+  $43600b30502feeda$var$_tmpl$8 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=left>`),
+  $43600b30502feeda$var$_tmpl$9 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=right>`);
 /**
  * Second generation search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -3911,6 +3912,21 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
       return _el$6;
     })();
   };
+  const discoverMoreSection = (() => {
+    var _el$7 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$4),
+      _el$8 = _el$7.firstChild;
+    $52FdA$solidjsweb.addEventListener(_el$8, "click", $52FdA$depictaiutilishared.catchify(() => submit_query_()), true);
+    $52FdA$solidjsweb.insert(_el$8, (() => {
+      var _c$ = $52FdA$solidjsweb.memo(() => !!get_search_field_value_());
+      return () => _c$() ? i18n_.modal_view_all_results_()((() => {
+        var _el$9 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$5);
+        $52FdA$solidjsweb.insert(_el$9, formattedTotalNumberResults);
+        return _el$9;
+      })()) : i18n_.modal_discover_more_();
+    })());
+    $52FdA$solidjsweb.runHydrationEvents();
+    return _el$7;
+  })();
   const search_field = $29e5dbeb69da7a36$export$b94867ecbd698f21({
     BackIcon_: () => $52FdA$solidjsweb.createComponent((0, $50b50df3efaa8776$export$11e9f390c90a537f), {}),
     input_field_ref_: element => set_input_field(element),
@@ -3960,24 +3976,22 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
     },
     get children() {
       return [(() => {
-        var _el$7 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$4);
-        $52FdA$solidjsweb.addEventListener(_el$7, "click", close_modal_, true);
-        $52FdA$solidjsweb.effect(_$p => $52FdA$solidjsweb.classList(_el$7, {
+        var _el$10 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$6);
+        $52FdA$solidjsweb.addEventListener(_el$10, "click", close_modal_, true);
+        $52FdA$solidjsweb.effect(_$p => $52FdA$solidjsweb.classList(_el$10, {
           [backdropRandomClassname]: true
         }, _$p));
         $52FdA$solidjsweb.runHydrationEvents();
-        return _el$7;
+        return _el$10;
       })(), (() => {
-        var _el$8 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$5),
-          _el$9 = _el$8.firstChild,
-          _el$13 = _el$9.firstChild,
-          [_el$14, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$13.nextSibling),
-          _el$10 = _el$14.nextSibling,
-          _el$11 = _el$10.nextSibling,
+        var _el$11 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$7),
           _el$12 = _el$11.firstChild,
-          _el$15 = _el$9.nextSibling,
-          [_el$16, _co$3] = $52FdA$solidjsweb.getNextMarker(_el$15.nextSibling);
-        $52FdA$solidjsweb.addEventListener(_el$8, "click", $52FdA$depictaiutilishared.catchify(_ref3 => {
+          _el$14 = _el$12.firstChild,
+          [_el$15, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$14.nextSibling),
+          _el$13 = _el$15.nextSibling,
+          _el$16 = _el$12.nextSibling,
+          [_el$17, _co$3] = $52FdA$solidjsweb.getNextMarker(_el$16.nextSibling);
+        $52FdA$solidjsweb.addEventListener(_el$11, "click", $52FdA$depictaiutilishared.catchify(_ref3 => {
           let {
             target: target,
             currentTarget: currentTarget
@@ -3989,10 +4003,11 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
           const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => setModalBodyWidth(records.at(-1).contentRect.width)));
           resizeObserver.observe(element);
           $52FdA$solidjs.onCleanup(() => resizeObserver.disconnect());
-        }, _el$9);
-        $52FdA$solidjsweb.insert(_el$9, search_field, _el$14, _co$2);
+        }, _el$12);
+        $52FdA$solidjsweb.insert(_el$12, search_field, _el$15, _co$2);
         $52FdA$solidjsweb.use(el => {
-          $52FdA$depictaiutilishared.catchify((0, $246adc3df5966856$export$50b90be27d8502d9))(el, bodyAlignmentSignal, bottom_distance_under_modal_);
+          $52FdA$depictaiutilishared.catchify((0, $246adc3df5966856$export$50b90be27d8502d9))(el, bodyAlignmentSignal, bottom_distance_under_modal_ || (() => 0.03 // 3% under SearchModalV2 by default
+          ));
           // Workaround part 2 of https://github.com/solidjs/solid/issues/2030
           // We can't just re-render the components in the two different <Show> branches because <Show> would infinite loop because it depends on the resource created by the components
           // We could also lift out the createResource from InstantResults into this component, but this component is already huge.
@@ -4000,41 +4015,32 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
           const showStackedDOM = $52FdA$solidjs.createMemo(() => modalLayoutStacked_() || noResults());
           $52FdA$solidjs.createEffect(() => {
             if (showStackedDOM()) {
-              el.replaceChildren(...renderedTextSuggestions(), ...renderedVisualSuggestions());
+              el.replaceChildren(...renderedTextSuggestions(), ...renderedVisualSuggestions(), discoverMoreSection);
               return;
             }
             el.replaceChildren(...[(() => {
-              var _el$17 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$6);
-              $52FdA$solidjsweb.insert(_el$17, renderedTextSuggestions);
-              return _el$17;
-            })(), (() => {
-              var _el$18 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$7);
-              $52FdA$solidjsweb.insert(_el$18, renderedVisualSuggestions);
+              var _el$18 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$8);
+              $52FdA$solidjsweb.insert(_el$18, renderedTextSuggestions);
               return _el$18;
-            })()]);
+            })(), (() => {
+              var _el$19 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$9);
+              $52FdA$solidjsweb.insert(_el$19, renderedVisualSuggestions);
+              return _el$19;
+            })(), discoverMoreSection]);
           });
-        }, _el$10);
-        $52FdA$solidjsweb.addEventListener(_el$12, "click", $52FdA$depictaiutilishared.catchify(() => submit_query_()), true);
-        $52FdA$solidjsweb.insert(_el$12, (() => {
-          var _c$ = $52FdA$solidjsweb.memo(() => !!get_search_field_value_());
-          return () => _c$() ? i18n_.modal_view_all_results_()((() => {
-            var _el$19 = $52FdA$solidjsweb.getNextElement($43600b30502feeda$var$_tmpl$8);
-            $52FdA$solidjsweb.insert(_el$19, formattedTotalNumberResults);
-            return _el$19;
-          })()) : i18n_.modal_discover_more_();
-        })());
-        $52FdA$solidjsweb.insert(_el$8, $52FdA$solidjsweb.createComponent((0, $cc66bbf6e783bb58$export$f021bdedd3ec901a), {
+        }, _el$13);
+        $52FdA$solidjsweb.insert(_el$11, $52FdA$solidjsweb.createComponent((0, $cc66bbf6e783bb58$export$f021bdedd3ec901a), {
           styles: mergedCssObject
-        }), _el$16, _co$3);
+        }), _el$17, _co$3);
         $52FdA$solidjsweb.effect(_p$ => {
           var _v$ = !!modalLayoutStacked_(),
             _v$2 = {
               [random_classname_body]: true
             },
             _v$3 = !!noResults();
-          _v$ !== _p$.e && _el$8.classList.toggle("stacked", _p$.e = _v$);
-          _p$.t = $52FdA$solidjsweb.classList(_el$9, _v$2, _p$.t);
-          _v$3 !== _p$.a && _el$10.classList.toggle("no-results", _p$.a = _v$3);
+          _v$ !== _p$.e && _el$11.classList.toggle("stacked", _p$.e = _v$);
+          _p$.t = $52FdA$solidjsweb.classList(_el$12, _v$2, _p$.t);
+          _v$3 !== _p$.a && _el$13.classList.toggle("no-results", _p$.a = _v$3);
           return _p$;
         }, {
           e: undefined,
@@ -4042,7 +4048,7 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
           a: undefined
         });
         $52FdA$solidjsweb.runHydrationEvents();
-        return _el$8;
+        return _el$11;
       })()];
     }
   })];
@@ -13615,6 +13621,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_ || $52FdA$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$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict plp search">`);
 function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
   let {
@@ -13629,7 +13698,15 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
   } = _ref;
   return $52FdA$solidjs.createRoot(dispose => {
     const [innerWidthReactive, setInnerWidthReactive] = $52FdA$solidjs.createSignal(innerWidth);
-    const resizeObserver = new ResizeObserver(records => setInnerWidthReactive(records.at(-1).contentRect.width));
+    const [innerHeightReactive, setInnerHeightReactive] = $52FdA$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,
@@ -13662,6 +13739,12 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
         zIndex: +zIndexOfFake + 1
       } : {})
     });
+    const absoluteFieldTop = $52FdA$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($52FdA$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;
@@ -13695,7 +13778,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);
@@ -13713,7 +13799,7 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
       clearTimeout(disableResizePollingTimeout);
       setPollAlignment_(false);
     });
-    $a60bc7692ce52705$export$e06dee46ebe7faa9({
+    $ce2f7ec02a8f2173$export$e06dee46ebe7faa9({
       setBackdropStyle_: setBackdropStyle_,
       setBodyAlignment_: setBodyAlignment_,
       openDuration_: openDuration_
@@ -13727,7 +13813,7 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
         width: width,
         left: left
       } = fakeField.getBoundingClientRect();
-      $a60bc7692ce52705$export$23d40cc5971c3acd({
+      $ce2f7ec02a8f2173$export$23d40cc5971c3acd({
         setBackdropStyle_: setBackdropStyle_,
         setBodyAlignment_: setBodyAlignment_,
         closeDuration_: closeDuration_
@@ -13756,69 +13842,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_ || $52FdA$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$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
   $739c927cbecd26b0$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict plp search"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
 function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
@@ -14547,7 +14570,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,
@@ -14557,7 +14580,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_({
@@ -14811,7 +14834,7 @@ const $a24cfef36ef12dc5$export$d86a33413558014e = openModalParams => {
     field_: $52FdA$solidjs.createSignal({}),
     backdrop_: $52FdA$solidjs.createSignal({})
   };
-  const closingAnimation = $a60bc7692ce52705$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
+  const closingAnimation = $ce2f7ec02a8f2173$export$dab9321f3c157061(alignmentSignals_, openModalParams.runAnimations_ ? 2 : 1);
   $52FdA$solidjs.createRoot(dispose => {
     dispose_aligner = () => {
       var _cleanup;

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 _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;