@depict-ai/ui 4.0.1 → 4.0.3

package/latest/index.js

@@ -1,13 +1,13 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, catchify as $9HbP8$catchify, make_random_classname as $9HbP8$make_random_classname, ContainedImage as $9HbP8$ContainedImage, standard_price_format as $9HbP8$standard_price_format, javascript_media_query as $9HbP8$javascript_media_query, dlog as $9HbP8$dlog, camelCasifyObject as $9HbP8$camelCasifyObject, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, observer as $9HbP8$observer, report as $9HbP8$report, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, dwarn as $9HbP8$dwarn, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, fetch_retry as $9HbP8$fetch_retry, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, is_debug as $9HbP8$is_debug, ListenableSet as $9HbP8$ListenableSet1, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { add_to_version_info as $9HbP8$add_to_version_info, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, catchify as $9HbP8$catchify, make_random_classname as $9HbP8$make_random_classname, ContainedImage as $9HbP8$ContainedImage, standard_price_format as $9HbP8$standard_price_format, javascript_media_query as $9HbP8$javascript_media_query, dlog as $9HbP8$dlog, camelCasifyObject as $9HbP8$camelCasifyObject, buildThresholdList as $9HbP8$buildThresholdList, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, observer as $9HbP8$observer, report as $9HbP8$report, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, ListenableSet as $9HbP8$ListenableSet, findMostFrequentItem as $9HbP8$findMostFrequentItem, queueMacroTask as $9HbP8$queueMacroTask, dwarn as $9HbP8$dwarn, slider_fading_factory as $9HbP8$slider_fading_factory, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, use_href_accessor as $9HbP8$use_href_accessor, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, fetch_retry as $9HbP8$fetch_retry, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, is_debug as $9HbP8$is_debug, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
 import { createSignal as $9HbP8$createSignal, createResource as $9HbP8$createResource, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, createMemo as $9HbP8$createMemo, onCleanup as $9HbP8$onCleanup, Show as $9HbP8$Show, createComputed as $9HbP8$createComputed, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, on as $9HbP8$on, Index as $9HbP8$Index, batch as $9HbP8$batch, ErrorBoundary as $9HbP8$ErrorBoundary, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, mergeProps as $9HbP8$mergeProps1, createUniqueId as $9HbP8$createUniqueId, createRenderEffect as $9HbP8$createRenderEffect, createSelector as $9HbP8$createSelector, children as $9HbP8$children, splitProps as $9HbP8$splitProps, createRoot as $9HbP8$createRoot, Suspense as $9HbP8$Suspense, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
 import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, addEventListener as $9HbP8$addEventListener, insert as $9HbP8$insert, memo as $9HbP8$memo, runHydrationEvents as $9HbP8$runHydrationEvents, createComponent as $9HbP8$createComponent, getNextMarker as $9HbP8$getNextMarker, use as $9HbP8$use, effect as $9HbP8$effect, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, delegateEvents as $9HbP8$delegateEvents, style as $9HbP8$style, className as $9HbP8$className, spread as $9HbP8$spread, mergeProps as $9HbP8$mergeProps, setProperty as $9HbP8$setProperty, isServer as $9HbP8$isServer, Dynamic as $9HbP8$Dynamic } from "solid-js/web";
-import { ListenableSet as $9HbP8$ListenableSet, catchify as $9HbP8$catchify1, use_href_accessor as $9HbP8$use_href_accessor1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
+import { ListenableSet as $9HbP8$ListenableSet1, catchify as $9HbP8$catchify1, use_href_accessor as $9HbP8$use_href_accessor1, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
 
 /*! 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.1";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.3";
 function $136f1d4d6c7ba6ac$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $9HbP8$createSignal();
   const deparallelizedFetcher = $9HbP8$deparallelize_no_drop(async dependencyValue => {
@@ -2344,6 +2344,7 @@ function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
   return size;
 }
 const $e8ffe11ed01df0fe$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
+const $e8ffe11ed01df0fe$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $9HbP8$createMemo(() => {
@@ -2408,6 +2409,21 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   let timeoutSet = false;
   let gotCleanedUp = false;
   img.classList.add("s-responsive-image");
+  if (listingContext) {
+    let prevValue;
+    const aspectRatios = listingContext[$e8ffe11ed01df0fe$export$f8945274f08a3105] ||= new (0, $9HbP8$ListenableSet)();
+    img.addEventListener("load", $9HbP8$catchify(() => {
+      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
+      const aspectRatio_ = img.naturalWidth / img.naturalHeight;
+      if (prevValue) aspectRatios.delete(prevValue);
+      const newValue = !isNaN(aspectRatio_) ? {
+        aspectRatio_: aspectRatio_
+      } : undefined;
+      if (newValue) aspectRatios.add(newValue);
+      prevValue = newValue;
+    }));
+    $9HbP8$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
+  }
   $9HbP8$onCleanup(() => gotCleanedUp = true);
   $9HbP8$spread(img, $9HbP8$mergeProps1(otherOptions), false, true);
   $9HbP8$createEffect(() => {
@@ -2475,9 +2491,28 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$660070e2a394b3c3$export$d7b7ab832c20e2f4] = $9HbP8$createSignal();
   const [currentImageSize, setCurrentImageSize] = context?.[$660070e2a394b3c3$export$d7b7ab832c20e2f4] || $660070e2a394b3c3$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const aspectRatiosSet = context ?
+  // If the context exists we have to create the set here as getting it here would be too late when it's created by ShopifyResponsiveImg below
+  context[(0, $e8ffe11ed01df0fe$export$f8945274f08a3105)] ||= new (0, $9HbP8$ListenableSet)() : undefined;
+  const [aspectRatios, setAspectRatios] = $9HbP8$createSignal(aspectRatiosSet, {
+    equals: false
+  });
+  const aspectRatioToUse = $9HbP8$createMemo(() => {
+    const aspectRatiosSet = aspectRatios(); // This signal "changes" to the same set every time the set changes, so we can use it as a dependency here
+    useMostPrevalentAspectRatio: {
+      if (!aspectRatiosSet || !props.autoAdjustAspectRatio) break useMostPrevalentAspectRatio;
+      // Get the aspect ratio that most of the loaded images inside the ListingProvider we are, load
+      const asArray = [...aspectRatiosSet].map(({
+        aspectRatio_: aspectRatio_
+      }) => aspectRatio_);
+      const mostPrevalentAspectRatio = $9HbP8$findMostFrequentItem(asArray);
+      if (mostPrevalentAspectRatio) return `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${mostPrevalentAspectRatio})`;
+    }
+    return props.aspectRatio;
+  });
   const container = $9HbP8$createComponent((0, $f18d425032111270$export$94026ee33dbabc26), {
     get aspectRatio() {
-      return props.aspectRatio;
+      return aspectRatioToUse();
     },
     get ["class"]() {
       return props.class;
@@ -2486,6 +2521,10 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   const owner = $9HbP8$getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
+  for (const event of ["add", "delete"]) {
+    aspectRatiosSet?.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
+    $9HbP8$onCleanup(() => aspectRatiosSet?.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
+  }
   $9HbP8$createEffect(() => {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
@@ -3500,7 +3539,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
               get src() {
                 return props.src_;
               },
-              aspectRatio: `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, 1)`
+              autoAdjustAspectRatio: true,
+              aspectRatio: 1
             }),
             ...instant_results_options_
           }), _el$4, _co$);
@@ -3676,7 +3716,7 @@ const $024fbc0a2d796fad$var$TabsContext = /*@__PURE__*/$9HbP8$createContext();
 const $024fbc0a2d796fad$var$useTabs = () => $9HbP8$useContext($024fbc0a2d796fad$var$TabsContext);
 function $024fbc0a2d796fad$export$b2539bed5023c21c(props) {
   return $9HbP8$createComponent($024fbc0a2d796fad$var$TabsContext.Provider, {
-    value: new (0, $9HbP8$ListenableSet)(),
+    value: new (0, $9HbP8$ListenableSet1)(),
     get children() {
       return $9HbP8$createComponent($024fbc0a2d796fad$var$ActualTabs, $9HbP8$mergeProps(props, {
         get children() {
@@ -3841,7 +3881,15 @@ async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_
         const actually_close = () => {
           dispose();
           on_dispose?.();
-          modal_els.forEach(el => el.remove());
+          const {
+            activeElement: activeElement
+          } = document;
+          modal_els.forEach(el => {
+            if (el.contains(activeElement))
+              // Fix page jumping to the bottom when closing modal with scape after animation in safari
+              activeElement?.blur?.();
+            el.remove();
+          });
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -12483,7 +12531,7 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
     number_: num_results,
     i18n_: i18n_
   });
-  const queries_without_content_results_ = new (0, $9HbP8$ListenableSet1)();
+  const queries_without_content_results_ = new (0, $9HbP8$ListenableSet)();
   const [check_query, set_check_query] = $9HbP8$createSignal(false);
   const placeholders_enabled = $9HbP8$createMemo(() => {
     // don't show placeholders when the user toggles filters

package/locales/ES10/index.cjs

@@ -32,6 +32,7 @@ $parcel$export(module.exports, "it", () => $50cd633c714251ff$export$3486a10f30cf
 $parcel$export(module.exports, "it_IT", () => $50cd633c714251ff$export$f9b5ea3bf81395b7);
 $parcel$export(module.exports, "no", () => $50cd633c714251ff$export$401451a107dc42ce);
 $parcel$export(module.exports, "nb_NO", () => $50cd633c714251ff$export$9493b74ae2e265b1);
+$parcel$export(module.exports, "nb", () => $50cd633c714251ff$export$38ef0e3f791a121e);
 $parcel$export(module.exports, "no_NO", () => $50cd633c714251ff$export$f096898031724516);
 $parcel$export(module.exports, "pl", () => $50cd633c714251ff$export$6ea5311eda92944f);
 $parcel$export(module.exports, "pl_PL", () => $50cd633c714251ff$export$cac2311efb6f04b1);
@@ -1126,6 +1127,11 @@ const $50cd633c714251ff$export$9493b74ae2e265b1 = {
   ...(0, $198e62eb02da5caf$export$dcb702a89633f297),
   backend_locale_: "nb_NO"
 };
+const $50cd633c714251ff$export$38ef0e3f791a121e = {
+  ...(0, $198e62eb02da5caf$export$e3024c30c728ef08),
+  ...(0, $198e62eb02da5caf$export$dcb702a89633f297),
+  backend_locale_: "nb"
+};
 const $50cd633c714251ff$export$f096898031724516 = {
   ...(0, $198e62eb02da5caf$export$e3024c30c728ef08),
   ...(0, $198e62eb02da5caf$export$dcb702a89633f297),

package/locales/ES10/index.d.ts

@@ -110,6 +110,7 @@ export const it: Locale;
 export const it_IT: Locale;
 export const no: Locale;
 export const nb_NO: Locale;
+export const nb: Locale;
 export const no_NO: Locale;
 export const pl: Locale;
 export const pl_PL: Locale;

package/locales/ES10/index.js

@@ -1085,6 +1085,11 @@ const $72b32e7f8dfbdf34$export$9493b74ae2e265b1 = {
   ...(0, $38f06990a10567ed$export$dcb702a89633f297),
   backend_locale_: "nb_NO"
 };
+const $72b32e7f8dfbdf34$export$38ef0e3f791a121e = {
+  ...(0, $38f06990a10567ed$export$e3024c30c728ef08),
+  ...(0, $38f06990a10567ed$export$dcb702a89633f297),
+  backend_locale_: "nb"
+};
 const $72b32e7f8dfbdf34$export$f096898031724516 = {
   ...(0, $38f06990a10567ed$export$e3024c30c728ef08),
   ...(0, $38f06990a10567ed$export$dcb702a89633f297),
@@ -1126,4 +1131,4 @@ const $72b32e7f8dfbdf34$export$c395d7caf3689a53 = {
   backend_locale_: "sv_SE"
 };
 const $72b32e7f8dfbdf34$export$d7f512c98c859244 = $72b32e7f8dfbdf34$export$84584c2a98eb6753;
-export { $72b32e7f8dfbdf34$export$67ff43e65e668f2b as cz, $72b32e7f8dfbdf34$export$8c8450b83b664ba4 as da, $72b32e7f8dfbdf34$export$6de2d8c8de3011d9 as da_DK, $72b32e7f8dfbdf34$export$9c64ee4d84d79ce1 as nl, $72b32e7f8dfbdf34$export$56f6972fd618655a as nl_BE, $72b32e7f8dfbdf34$export$ecbd6264f248e614 as nl_NL, $72b32e7f8dfbdf34$export$84584c2a98eb6753 as en, $72b32e7f8dfbdf34$export$c8af9ccf06a8b16a as en_AU, $72b32e7f8dfbdf34$export$a2bced10ed717c1f as en_CA, $72b32e7f8dfbdf34$export$6ac7ea553f9cecc6 as en_EU, $72b32e7f8dfbdf34$export$b76508d27899e649 as en_GB, $72b32e7f8dfbdf34$export$df031397bb44d506 as en_IE, $72b32e7f8dfbdf34$export$25dc44e90bc68e13 as en_US, $72b32e7f8dfbdf34$export$ed5179c818622fb as fi, $72b32e7f8dfbdf34$export$beb170d4da98ae91 as fi_FI, $72b32e7f8dfbdf34$export$acb2a88f7d552ebf as fr, $72b32e7f8dfbdf34$export$30f960919adb1a48 as fr_FR, $72b32e7f8dfbdf34$export$2fa162a495d26869 as de, $72b32e7f8dfbdf34$export$cdfc1e873a859e64 as de_AT, $72b32e7f8dfbdf34$export$24592eff4b41c0d as de_CH, $72b32e7f8dfbdf34$export$5d6cddfc629f77eb as de_DE, $72b32e7f8dfbdf34$export$3486a10f30cf1ee4 as it, $72b32e7f8dfbdf34$export$f9b5ea3bf81395b7 as it_IT, $72b32e7f8dfbdf34$export$401451a107dc42ce as no, $72b32e7f8dfbdf34$export$9493b74ae2e265b1 as nb_NO, $72b32e7f8dfbdf34$export$f096898031724516 as no_NO, $72b32e7f8dfbdf34$export$6ea5311eda92944f as pl, $72b32e7f8dfbdf34$export$cac2311efb6f04b1 as pl_PL, $72b32e7f8dfbdf34$export$84175d5f1cb4e39d as pt, $72b32e7f8dfbdf34$export$ca5e4045a55e76d2 as es, $72b32e7f8dfbdf34$export$97f82aee9c1ce125 as es_ES, $72b32e7f8dfbdf34$export$65540e5f7f6e7dce as sv, $72b32e7f8dfbdf34$export$c395d7caf3689a53 as sv_SE, $72b32e7f8dfbdf34$export$d7f512c98c859244 as defaultLocale };
+export { $72b32e7f8dfbdf34$export$67ff43e65e668f2b as cz, $72b32e7f8dfbdf34$export$8c8450b83b664ba4 as da, $72b32e7f8dfbdf34$export$6de2d8c8de3011d9 as da_DK, $72b32e7f8dfbdf34$export$9c64ee4d84d79ce1 as nl, $72b32e7f8dfbdf34$export$56f6972fd618655a as nl_BE, $72b32e7f8dfbdf34$export$ecbd6264f248e614 as nl_NL, $72b32e7f8dfbdf34$export$84584c2a98eb6753 as en, $72b32e7f8dfbdf34$export$c8af9ccf06a8b16a as en_AU, $72b32e7f8dfbdf34$export$a2bced10ed717c1f as en_CA, $72b32e7f8dfbdf34$export$6ac7ea553f9cecc6 as en_EU, $72b32e7f8dfbdf34$export$b76508d27899e649 as en_GB, $72b32e7f8dfbdf34$export$df031397bb44d506 as en_IE, $72b32e7f8dfbdf34$export$25dc44e90bc68e13 as en_US, $72b32e7f8dfbdf34$export$ed5179c818622fb as fi, $72b32e7f8dfbdf34$export$beb170d4da98ae91 as fi_FI, $72b32e7f8dfbdf34$export$acb2a88f7d552ebf as fr, $72b32e7f8dfbdf34$export$30f960919adb1a48 as fr_FR, $72b32e7f8dfbdf34$export$2fa162a495d26869 as de, $72b32e7f8dfbdf34$export$cdfc1e873a859e64 as de_AT, $72b32e7f8dfbdf34$export$24592eff4b41c0d as de_CH, $72b32e7f8dfbdf34$export$5d6cddfc629f77eb as de_DE, $72b32e7f8dfbdf34$export$3486a10f30cf1ee4 as it, $72b32e7f8dfbdf34$export$f9b5ea3bf81395b7 as it_IT, $72b32e7f8dfbdf34$export$401451a107dc42ce as no, $72b32e7f8dfbdf34$export$9493b74ae2e265b1 as nb_NO, $72b32e7f8dfbdf34$export$38ef0e3f791a121e as nb, $72b32e7f8dfbdf34$export$f096898031724516 as no_NO, $72b32e7f8dfbdf34$export$6ea5311eda92944f as pl, $72b32e7f8dfbdf34$export$cac2311efb6f04b1 as pl_PL, $72b32e7f8dfbdf34$export$84175d5f1cb4e39d as pt, $72b32e7f8dfbdf34$export$ca5e4045a55e76d2 as es, $72b32e7f8dfbdf34$export$97f82aee9c1ce125 as es_ES, $72b32e7f8dfbdf34$export$65540e5f7f6e7dce as sv, $72b32e7f8dfbdf34$export$c395d7caf3689a53 as sv_SE, $72b32e7f8dfbdf34$export$d7f512c98c859244 as defaultLocale };

package/locales/latest/index.cjs

@@ -32,6 +32,7 @@ $parcel$export(module.exports, "it", () => $2d187e768d780a64$export$3486a10f30cf
 $parcel$export(module.exports, "it_IT", () => $2d187e768d780a64$export$f9b5ea3bf81395b7);
 $parcel$export(module.exports, "no", () => $2d187e768d780a64$export$401451a107dc42ce);
 $parcel$export(module.exports, "nb_NO", () => $2d187e768d780a64$export$9493b74ae2e265b1);
+$parcel$export(module.exports, "nb", () => $2d187e768d780a64$export$38ef0e3f791a121e);
 $parcel$export(module.exports, "no_NO", () => $2d187e768d780a64$export$f096898031724516);
 $parcel$export(module.exports, "pl", () => $2d187e768d780a64$export$6ea5311eda92944f);
 $parcel$export(module.exports, "pl_PL", () => $2d187e768d780a64$export$cac2311efb6f04b1);
@@ -1126,6 +1127,11 @@ const $2d187e768d780a64$export$9493b74ae2e265b1 = {
   ...(0, $0a060b0fa5b7442d$export$dcb702a89633f297),
   backend_locale_: "nb_NO"
 };
+const $2d187e768d780a64$export$38ef0e3f791a121e = {
+  ...(0, $0a060b0fa5b7442d$export$e3024c30c728ef08),
+  ...(0, $0a060b0fa5b7442d$export$dcb702a89633f297),
+  backend_locale_: "nb"
+};
 const $2d187e768d780a64$export$f096898031724516 = {
   ...(0, $0a060b0fa5b7442d$export$e3024c30c728ef08),
   ...(0, $0a060b0fa5b7442d$export$dcb702a89633f297),

package/locales/latest/index.d.ts

@@ -110,6 +110,7 @@ export const it: Locale;
 export const it_IT: Locale;
 export const no: Locale;
 export const nb_NO: Locale;
+export const nb: Locale;
 export const no_NO: Locale;
 export const pl: Locale;
 export const pl_PL: Locale;

package/locales/latest/index.js

@@ -1085,6 +1085,11 @@ const $70cb39a790dd4f65$export$9493b74ae2e265b1 = {
   ...(0, $2c5d03375c4a5b27$export$dcb702a89633f297),
   backend_locale_: "nb_NO"
 };
+const $70cb39a790dd4f65$export$38ef0e3f791a121e = {
+  ...(0, $2c5d03375c4a5b27$export$e3024c30c728ef08),
+  ...(0, $2c5d03375c4a5b27$export$dcb702a89633f297),
+  backend_locale_: "nb"
+};
 const $70cb39a790dd4f65$export$f096898031724516 = {
   ...(0, $2c5d03375c4a5b27$export$e3024c30c728ef08),
   ...(0, $2c5d03375c4a5b27$export$dcb702a89633f297),
@@ -1126,4 +1131,4 @@ const $70cb39a790dd4f65$export$c395d7caf3689a53 = {
   backend_locale_: "sv_SE"
 };
 const $70cb39a790dd4f65$export$d7f512c98c859244 = $70cb39a790dd4f65$export$84584c2a98eb6753;
-export { $70cb39a790dd4f65$export$67ff43e65e668f2b as cz, $70cb39a790dd4f65$export$8c8450b83b664ba4 as da, $70cb39a790dd4f65$export$6de2d8c8de3011d9 as da_DK, $70cb39a790dd4f65$export$9c64ee4d84d79ce1 as nl, $70cb39a790dd4f65$export$56f6972fd618655a as nl_BE, $70cb39a790dd4f65$export$ecbd6264f248e614 as nl_NL, $70cb39a790dd4f65$export$84584c2a98eb6753 as en, $70cb39a790dd4f65$export$c8af9ccf06a8b16a as en_AU, $70cb39a790dd4f65$export$a2bced10ed717c1f as en_CA, $70cb39a790dd4f65$export$6ac7ea553f9cecc6 as en_EU, $70cb39a790dd4f65$export$b76508d27899e649 as en_GB, $70cb39a790dd4f65$export$df031397bb44d506 as en_IE, $70cb39a790dd4f65$export$25dc44e90bc68e13 as en_US, $70cb39a790dd4f65$export$ed5179c818622fb as fi, $70cb39a790dd4f65$export$beb170d4da98ae91 as fi_FI, $70cb39a790dd4f65$export$acb2a88f7d552ebf as fr, $70cb39a790dd4f65$export$30f960919adb1a48 as fr_FR, $70cb39a790dd4f65$export$2fa162a495d26869 as de, $70cb39a790dd4f65$export$cdfc1e873a859e64 as de_AT, $70cb39a790dd4f65$export$24592eff4b41c0d as de_CH, $70cb39a790dd4f65$export$5d6cddfc629f77eb as de_DE, $70cb39a790dd4f65$export$3486a10f30cf1ee4 as it, $70cb39a790dd4f65$export$f9b5ea3bf81395b7 as it_IT, $70cb39a790dd4f65$export$401451a107dc42ce as no, $70cb39a790dd4f65$export$9493b74ae2e265b1 as nb_NO, $70cb39a790dd4f65$export$f096898031724516 as no_NO, $70cb39a790dd4f65$export$6ea5311eda92944f as pl, $70cb39a790dd4f65$export$cac2311efb6f04b1 as pl_PL, $70cb39a790dd4f65$export$84175d5f1cb4e39d as pt, $70cb39a790dd4f65$export$ca5e4045a55e76d2 as es, $70cb39a790dd4f65$export$97f82aee9c1ce125 as es_ES, $70cb39a790dd4f65$export$65540e5f7f6e7dce as sv, $70cb39a790dd4f65$export$c395d7caf3689a53 as sv_SE, $70cb39a790dd4f65$export$d7f512c98c859244 as defaultLocale };
+export { $70cb39a790dd4f65$export$67ff43e65e668f2b as cz, $70cb39a790dd4f65$export$8c8450b83b664ba4 as da, $70cb39a790dd4f65$export$6de2d8c8de3011d9 as da_DK, $70cb39a790dd4f65$export$9c64ee4d84d79ce1 as nl, $70cb39a790dd4f65$export$56f6972fd618655a as nl_BE, $70cb39a790dd4f65$export$ecbd6264f248e614 as nl_NL, $70cb39a790dd4f65$export$84584c2a98eb6753 as en, $70cb39a790dd4f65$export$c8af9ccf06a8b16a as en_AU, $70cb39a790dd4f65$export$a2bced10ed717c1f as en_CA, $70cb39a790dd4f65$export$6ac7ea553f9cecc6 as en_EU, $70cb39a790dd4f65$export$b76508d27899e649 as en_GB, $70cb39a790dd4f65$export$df031397bb44d506 as en_IE, $70cb39a790dd4f65$export$25dc44e90bc68e13 as en_US, $70cb39a790dd4f65$export$ed5179c818622fb as fi, $70cb39a790dd4f65$export$beb170d4da98ae91 as fi_FI, $70cb39a790dd4f65$export$acb2a88f7d552ebf as fr, $70cb39a790dd4f65$export$30f960919adb1a48 as fr_FR, $70cb39a790dd4f65$export$2fa162a495d26869 as de, $70cb39a790dd4f65$export$cdfc1e873a859e64 as de_AT, $70cb39a790dd4f65$export$24592eff4b41c0d as de_CH, $70cb39a790dd4f65$export$5d6cddfc629f77eb as de_DE, $70cb39a790dd4f65$export$3486a10f30cf1ee4 as it, $70cb39a790dd4f65$export$f9b5ea3bf81395b7 as it_IT, $70cb39a790dd4f65$export$401451a107dc42ce as no, $70cb39a790dd4f65$export$9493b74ae2e265b1 as nb_NO, $70cb39a790dd4f65$export$38ef0e3f791a121e as nb, $70cb39a790dd4f65$export$f096898031724516 as no_NO, $70cb39a790dd4f65$export$6ea5311eda92944f as pl, $70cb39a790dd4f65$export$cac2311efb6f04b1 as pl_PL, $70cb39a790dd4f65$export$84175d5f1cb4e39d as pt, $70cb39a790dd4f65$export$ca5e4045a55e76d2 as es, $70cb39a790dd4f65$export$97f82aee9c1ce125 as es_ES, $70cb39a790dd4f65$export$65540e5f7f6e7dce as sv, $70cb39a790dd4f65$export$c395d7caf3689a53 as sv_SE, $70cb39a790dd4f65$export$d7f512c98c859244 as defaultLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "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,9 +236,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^3.0.3",
+    "@depict-ai/plp-styling": "^3.0.4",
     "@depict-ai/types": "^5.0.3",
-    "@depict-ai/utilishared": "^2.0.10",
+    "@depict-ai/utilishared": "^2.0.11",
     "solid-js": "^1.8.7"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -92,7 +92,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.1";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.3";
 function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $3hooq$solidjs.createSignal();
   const deparallelizedFetcher = $3hooq$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -1960,6 +1960,7 @@ function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
   return size;
 }
 const $858fdcf73148519f$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
+const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $3hooq$solidjs.createMemo(() => {
@@ -2024,6 +2025,21 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   let timeoutSet = false;
   let gotCleanedUp = false;
   img.classList.add("s-responsive-image");
+  if (listingContext) {
+    let prevValue;
+    const aspectRatios = listingContext[$858fdcf73148519f$export$f8945274f08a3105] || (listingContext[$858fdcf73148519f$export$f8945274f08a3105] = new (0, $3hooq$depictaiutilishared.ListenableSet)());
+    img.addEventListener("load", $3hooq$depictaiutilishared.catchify(() => {
+      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
+      const aspectRatio_ = img.naturalWidth / img.naturalHeight;
+      if (prevValue) aspectRatios.delete(prevValue);
+      const newValue = !isNaN(aspectRatio_) ? {
+        aspectRatio_: aspectRatio_
+      } : undefined;
+      if (newValue) aspectRatios.add(newValue);
+      prevValue = newValue;
+    }));
+    $3hooq$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
+  }
   $3hooq$solidjs.onCleanup(() => gotCleanedUp = true);
   $3hooq$solidjsweb.spread(img, $3hooq$solidjs.mergeProps(otherOptions), false, true);
   $3hooq$solidjs.createEffect(() => {
@@ -2091,9 +2107,29 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$28535bb7671c63d1$export$d7b7ab832c20e2f4] = $3hooq$solidjs.createSignal();
   const [currentImageSize, setCurrentImageSize] = (context === null || context === void 0 ? void 0 : context[$28535bb7671c63d1$export$d7b7ab832c20e2f4]) || $28535bb7671c63d1$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const aspectRatiosSet = context ? context[(0, $858fdcf73148519f$export$f8945274f08a3105)] || (context[(0, $858fdcf73148519f$export$f8945274f08a3105)] = new (0, $3hooq$depictaiutilishared.ListenableSet)()) : undefined;
+  const [aspectRatios, setAspectRatios] = $3hooq$solidjs.createSignal(aspectRatiosSet, {
+    equals: false
+  });
+  const aspectRatioToUse = $3hooq$solidjs.createMemo(() => {
+    const aspectRatiosSet = aspectRatios(); // This signal "changes" to the same set every time the set changes, so we can use it as a dependency here
+    useMostPrevalentAspectRatio: {
+      if (!aspectRatiosSet || !props.autoAdjustAspectRatio) break useMostPrevalentAspectRatio;
+      // Get the aspect ratio that most of the loaded images inside the ListingProvider we are, load
+      const asArray = [...aspectRatiosSet].map(_ref => {
+        let {
+          aspectRatio_: aspectRatio_
+        } = _ref;
+        return aspectRatio_;
+      });
+      const mostPrevalentAspectRatio = $3hooq$depictaiutilishared.findMostFrequentItem(asArray);
+      if (mostPrevalentAspectRatio) return "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(mostPrevalentAspectRatio, ")");
+    }
+    return props.aspectRatio;
+  });
   const container = $3hooq$solidjsweb.createComponent((0, $ce467edb5343cfcd$export$94026ee33dbabc26), {
     get aspectRatio() {
-      return props.aspectRatio;
+      return aspectRatioToUse();
     },
     get ["class"]() {
       return props.class;
@@ -2102,6 +2138,10 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
   const owner = $3hooq$solidjs.getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
+  for (const event of ["add", "delete"]) {
+    aspectRatiosSet === null || aspectRatiosSet === void 0 || aspectRatiosSet.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
+    $3hooq$solidjs.onCleanup(() => aspectRatiosSet === null || aspectRatiosSet === void 0 ? void 0 : aspectRatiosSet.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
+  }
   $3hooq$solidjs.createEffect(() => {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
@@ -2977,7 +3017,8 @@ function $43600b30502feeda$var$RawSearchModalV2(_ref) {
               get src() {
                 return props.src_;
               },
-              aspectRatio: "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", 1)")
+              autoAdjustAspectRatio: true,
+              aspectRatio: 1
             }),
             ...instant_results_options_
           })));
@@ -3198,7 +3239,17 @@ async function $4cf7d9829d60d844$export$79b1565500412d9b(search_modal, modal_fn_
         const actually_close = () => {
           dispose();
           on_dispose === null || on_dispose === void 0 || on_dispose();
-          modal_els.forEach(el => el.remove());
+          const {
+            activeElement: activeElement
+          } = document;
+          modal_els.forEach(el => {
+            if (el.contains(activeElement)) {
+              var _blur, _ref;
+              // Fix page jumping to the bottom when closing modal with scape after animation in safari
+              activeElement === null || activeElement === void 0 || (_blur = (_ref = activeElement).blur) === null || _blur === void 0 || _blur.call(_ref);
+            }
+            el.remove();
+          });
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time

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.1";
+export const version = "4.0.3";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -407,6 +407,28 @@ export function ShopifyResponsiveImg(props: {
 } & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
   src: string;
 }): JSX.Element;
+type ImagePlaceholderBaseOptions = {
+  style?: JSX.CSSProperties;
+  class?: string;
+};
+type ImagePlaceholderBlockOptions = {
+  width: string;
+  height: string;
+};
+type ImagePlaceholderImageOptions = {
+  aspectRatio: number | string;
+};
+/**
+ * A placeholder that can be used instead of an image or other block of content while it's loading.
+ * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
+ * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
+ * @property width If width and height is set, the defined width and height will be used.
+ * @property height If width and height is set, the defined width and height will be used.
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
+export function DefaultInstantCardPlaceholder(): HTMLDivElement;
 export const shopifyContainedImageContextSymbol: unique symbol;
 /**
  * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
@@ -417,11 +439,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * @property aspectRatio aspect ratio of the image
  * @property class extra class to add to the container
  * @property alt alt text for the image
+ * @property autoAdjustAspectRatio whether to automatically adjust the aspect ratio of the image to the majority of the aspect ratios of loaded images in the current listing provider. Defaults to false. Can be overriden with css variable --image-aspect-ratio
  * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number | string;
+  autoAdjustAspectRatio?: boolean;
   class?: string;
   imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
@@ -489,28 +513,6 @@ interface Styles {
   [selector: string]: JSX.CSSProperties;
 }
 export const styles_to_valid_css_string: (styles: Styles) => string;
-type ImagePlaceholderBaseOptions = {
-  style?: JSX.CSSProperties;
-  class?: string;
-};
-type ImagePlaceholderBlockOptions = {
-  width: string;
-  height: string;
-};
-type ImagePlaceholderImageOptions = {
-  aspectRatio: number | string;
-};
-/**
- * A placeholder that can be used instead of an image or other block of content while it's loading.
- * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
- * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
- * @property width If width and height is set, the defined width and height will be used.
- * @property height If width and height is set, the defined width and height will be used.
- * @property class extra classes to add to the placeholder
- * @property style extra styles to add to the placeholder
- */
-export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
-export function DefaultInstantCardPlaceholder(): HTMLDivElement;
 /**
  * Second generation search modal - the solid component that gets added to <body> when the search modal is opened
  */

package/server/ES10/index.js

@@ -1,7 +1,7 @@
-import { add_to_version_info as $b8hua$add_to_version_info, deparallelize_no_drop as $b8hua$deparallelize_no_drop, catchify as $b8hua$catchify, make_random_classname as $b8hua$make_random_classname, ContainedImage as $b8hua$ContainedImage, standard_price_format as $b8hua$standard_price_format, javascript_media_query as $b8hua$javascript_media_query, dlog as $b8hua$dlog, camelCasifyObject as $b8hua$camelCasifyObject, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, observer as $b8hua$observer, report as $b8hua$report, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, queueMacroTask as $b8hua$queueMacroTask, dwarn as $b8hua$dwarn, slider_fading_factory as $b8hua$slider_fading_factory, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, use_href_accessor as $b8hua$use_href_accessor, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, base_url as $b8hua$base_url, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, slider_fractional_factory as $b8hua$slider_fractional_factory, useExpandingContainer as $b8hua$useExpandingContainer, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, snakeCasifyObject as $b8hua$snakeCasifyObject, fetch_retry as $b8hua$fetch_retry, make_url_with_query_params as $b8hua$make_url_with_query_params, sort_obj as $b8hua$sort_obj, ListenableSet as $b8hua$ListenableSet1, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { add_to_version_info as $b8hua$add_to_version_info, deparallelize_no_drop as $b8hua$deparallelize_no_drop, catchify as $b8hua$catchify, make_random_classname as $b8hua$make_random_classname, ContainedImage as $b8hua$ContainedImage, standard_price_format as $b8hua$standard_price_format, javascript_media_query as $b8hua$javascript_media_query, dlog as $b8hua$dlog, camelCasifyObject as $b8hua$camelCasifyObject, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, observer as $b8hua$observer, report as $b8hua$report, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, ListenableSet as $b8hua$ListenableSet, findMostFrequentItem as $b8hua$findMostFrequentItem, queueMacroTask as $b8hua$queueMacroTask, dwarn as $b8hua$dwarn, slider_fading_factory as $b8hua$slider_fading_factory, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, use_href_accessor as $b8hua$use_href_accessor, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, base_url as $b8hua$base_url, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, slider_fractional_factory as $b8hua$slider_fractional_factory, useExpandingContainer as $b8hua$useExpandingContainer, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, snakeCasifyObject as $b8hua$snakeCasifyObject, fetch_retry as $b8hua$fetch_retry, make_url_with_query_params as $b8hua$make_url_with_query_params, sort_obj as $b8hua$sort_obj, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
 import { createSignal as $b8hua$createSignal, createResource as $b8hua$createResource, createEffect as $b8hua$createEffect, untrack as $b8hua$untrack, createMemo as $b8hua$createMemo, onCleanup as $b8hua$onCleanup, Show as $b8hua$Show, createComputed as $b8hua$createComputed, For as $b8hua$For, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, on as $b8hua$on, Index as $b8hua$Index, batch as $b8hua$batch, ErrorBoundary as $b8hua$ErrorBoundary, createContext as $b8hua$createContext, useContext as $b8hua$useContext, mergeProps as $b8hua$mergeProps1, createUniqueId as $b8hua$createUniqueId, createRenderEffect as $b8hua$createRenderEffect, createSelector as $b8hua$createSelector, children as $b8hua$children, splitProps as $b8hua$splitProps, createRoot as $b8hua$createRoot, Suspense as $b8hua$Suspense, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
 import { ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, createComponent as $b8hua$createComponent, ssrAttribute as $b8hua$ssrAttribute, ssrClassList as $b8hua$ssrClassList, ssrStyle as $b8hua$ssrStyle, ssrElement as $b8hua$ssrElement, mergeProps as $b8hua$mergeProps, insert as $b8hua$insert, spread as $b8hua$spread, isServer as $b8hua$isServer, Dynamic as $b8hua$Dynamic } from "solid-js/web";
-import { ListenableSet as $b8hua$ListenableSet, catchify as $b8hua$catchify1, use_href_accessor as $b8hua$use_href_accessor1, report as $b8hua$report1 } from "@depict-ai/utilishared/ES10";
+import { ListenableSet as $b8hua$ListenableSet1, catchify as $b8hua$catchify1, use_href_accessor as $b8hua$use_href_accessor1, report as $b8hua$report1 } from "@depict-ai/utilishared/ES10";
 import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
 import $b8hua$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $b8hua$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
@@ -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.1";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.3";
 function $a604a8ffa4e4c03f$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $b8hua$createSignal();
   const deparallelizedFetcher = $b8hua$deparallelize_no_drop(async dependencyValue => {
@@ -1878,6 +1878,7 @@ function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
   return size;
 }
 const $56047603f9d212b6$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
+const $56047603f9d212b6$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $b8hua$createMemo(() => {
@@ -1942,6 +1943,21 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   let timeoutSet = false;
   let gotCleanedUp = false;
   img.classList.add("s-responsive-image");
+  if (listingContext) {
+    let prevValue;
+    const aspectRatios = listingContext[$56047603f9d212b6$export$f8945274f08a3105] || (listingContext[$56047603f9d212b6$export$f8945274f08a3105] = new (0, $b8hua$ListenableSet)());
+    img.addEventListener("load", $b8hua$catchify(() => {
+      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
+      const aspectRatio_ = img.naturalWidth / img.naturalHeight;
+      if (prevValue) aspectRatios.delete(prevValue);
+      const newValue = !isNaN(aspectRatio_) ? {
+        aspectRatio_: aspectRatio_
+      } : undefined;
+      if (newValue) aspectRatios.add(newValue);
+      prevValue = newValue;
+    }));
+    $b8hua$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
+  }
   $b8hua$onCleanup(() => gotCleanedUp = true);
   $b8hua$spread(img, $b8hua$mergeProps1(otherOptions), false, true);
   $b8hua$createEffect(() => {
@@ -2009,9 +2025,29 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$4df489344a0f97c7$export$d7b7ab832c20e2f4] = $b8hua$createSignal();
   const [currentImageSize, setCurrentImageSize] = (context === null || context === void 0 ? void 0 : context[$4df489344a0f97c7$export$d7b7ab832c20e2f4]) || $4df489344a0f97c7$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const aspectRatiosSet = context ? context[(0, $56047603f9d212b6$export$f8945274f08a3105)] || (context[(0, $56047603f9d212b6$export$f8945274f08a3105)] = new (0, $b8hua$ListenableSet)()) : undefined;
+  const [aspectRatios, setAspectRatios] = $b8hua$createSignal(aspectRatiosSet, {
+    equals: false
+  });
+  const aspectRatioToUse = $b8hua$createMemo(() => {
+    const aspectRatiosSet = aspectRatios(); // This signal "changes" to the same set every time the set changes, so we can use it as a dependency here
+    useMostPrevalentAspectRatio: {
+      if (!aspectRatiosSet || !props.autoAdjustAspectRatio) break useMostPrevalentAspectRatio;
+      // Get the aspect ratio that most of the loaded images inside the ListingProvider we are, load
+      const asArray = [...aspectRatiosSet].map(_ref => {
+        let {
+          aspectRatio_: aspectRatio_
+        } = _ref;
+        return aspectRatio_;
+      });
+      const mostPrevalentAspectRatio = $b8hua$findMostFrequentItem(asArray);
+      if (mostPrevalentAspectRatio) return "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(mostPrevalentAspectRatio, ")");
+    }
+    return props.aspectRatio;
+  });
   const container = $b8hua$createComponent((0, $801e8845d3fa3653$export$94026ee33dbabc26), {
     get aspectRatio() {
-      return props.aspectRatio;
+      return aspectRatioToUse();
     },
     get ["class"]() {
       return props.class;
@@ -2020,6 +2056,10 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
   const owner = $b8hua$getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
+  for (const event of ["add", "delete"]) {
+    aspectRatiosSet === null || aspectRatiosSet === void 0 || aspectRatiosSet.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
+    $b8hua$onCleanup(() => aspectRatiosSet === null || aspectRatiosSet === void 0 ? void 0 : aspectRatiosSet.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
+  }
   $b8hua$createEffect(() => {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
@@ -2895,7 +2935,8 @@ function $06fcd2a345efd24d$var$RawSearchModalV2(_ref) {
               get src() {
                 return props.src_;
               },
-              aspectRatio: "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", 1)")
+              autoAdjustAspectRatio: true,
+              aspectRatio: 1
             }),
             ...instant_results_options_
           })));
@@ -2973,7 +3014,7 @@ const $6a439680ae7e9ba3$var$TabsContext = /*@__PURE__*/$b8hua$createContext();
 const $6a439680ae7e9ba3$var$useTabs = () => $b8hua$useContext($6a439680ae7e9ba3$var$TabsContext);
 function $6a439680ae7e9ba3$export$b2539bed5023c21c(props) {
   return $b8hua$createComponent($6a439680ae7e9ba3$var$TabsContext.Provider, {
-    value: new (0, $b8hua$ListenableSet)(),
+    value: new (0, $b8hua$ListenableSet1)(),
     get children() {
       return $b8hua$createComponent($6a439680ae7e9ba3$var$ActualTabs, $b8hua$mergeProps(props, {
         get children() {
@@ -3116,7 +3157,17 @@ async function $d5f1e6a0f9117286$export$79b1565500412d9b(search_modal, modal_fn_
         const actually_close = () => {
           dispose();
           on_dispose === null || on_dispose === void 0 || on_dispose();
-          modal_els.forEach(el => el.remove());
+          const {
+            activeElement: activeElement
+          } = document;
+          modal_els.forEach(el => {
+            if (el.contains(activeElement)) {
+              var _blur, _ref;
+              // Fix page jumping to the bottom when closing modal with scape after animation in safari
+              activeElement === null || activeElement === void 0 || (_blur = (_ref = activeElement).blur) === null || _blur === void 0 || _blur.call(_ref);
+            }
+            el.remove();
+          });
         };
         if (animation_started && +new Date() - animation_started > 1000)
           // Animation broke, close it this time
@@ -10890,7 +10941,7 @@ function $d53ebed6f63304e4$export$6d0c9c22f6652669(_ref) {
     number_: num_results,
     i18n_: i18n_
   });
-  const queries_without_content_results_ = new (0, $b8hua$ListenableSet1)();
+  const queries_without_content_results_ = new (0, $b8hua$ListenableSet)();
   const [check_query, set_check_query] = $b8hua$createSignal(false);
   const placeholders_enabled = $b8hua$createMemo(() => {
     // don't show placeholders when the user toggles filters