@depict-ai/ui 4.10.11 → 4.10.13

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.11";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.10.13";
 function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   const signal = $9HbP8$createSignal(false);
   $9HbP8$onCleanup($9HbP8$javascript_media_query(media_query, ({
@@ -2612,7 +2612,16 @@ function $67b173f9db427028$export$ca21a16d65b3dd8({
       var _c$ = $9HbP8$memo(() => !!get_show_extras());
       return () => _c$() ? i18n_.view_less_() : i18n_.view_more_();
     })());
-    $9HbP8$effect(() => _el$.classList.toggle("expanded", !!get_show_extras()));
+    $9HbP8$effect(_p$ => {
+      var _v$ = get_show_extras(),
+        _v$2 = !!get_show_extras();
+      _v$ !== _p$.e && $9HbP8$setAttribute(_el$, "aria-expanded", _p$.e = _v$);
+      _v$2 !== _p$.t && _el$.classList.toggle("expanded", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     $9HbP8$runHydrationEvents();
     return _el$;
   })();
@@ -2931,7 +2940,7 @@ function $eb8d9bf3b5700c26$export$430444115f70a734({
     return _el$;
   })();
 }
-var $a6b08770e164eced$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=range><div class=input-group><div class=field><input type=number></div><div class=separator>-</div><div class=field><input type=number></div></div><!$><!/><div class=value-text><span class=min><!$><!/><!$><!/><!$><!/></span><span class=max><!$><!/><!$><!/><!$><!/>`),
+var $a6b08770e164eced$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=range><div class=input-group><div class=field><input type=number></div><div class=separator aria-hidden=true>-</div><div class=field><input type=number></div></div><!$><!/><div class=value-text><span class=min><!$><!/><!$><!/><!$><!/></span><span class=max><!$><!/><!$><!/><!$><!/>`),
   $a6b08770e164eced$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=slider><div class=progress>`),
   $a6b08770e164eced$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=range-group><input type=range step=any><input type=range step=any>`);
 function $a6b08770e164eced$export$e0d834a0ad870cda({
@@ -3065,7 +3074,8 @@ function $a6b08770e164eced$var$RangeSelector({
       min_: min_,
       current_range_: current_range_,
       i18n_: i18n_,
-      should_be_disabled_: should_be_disabled_
+      should_be_disabled_: should_be_disabled_,
+      priceFormatting_: price_formatting_
     }), _el$24, _co$7);
     $9HbP8$insert(_el$9, pre_price, _el$11, _co$);
     $9HbP8$insert(_el$9, $9HbP8$createComponent((0, $8c0f86cb3e266eeb$export$a71e92cfbb498adc), {
@@ -3129,7 +3139,8 @@ function $a6b08770e164eced$var$ExponentialSlider({
   min_: min_,
   i18n_: i18n_,
   max_: max_,
-  should_be_disabled_: should_be_disabled_
+  should_be_disabled_: should_be_disabled_,
+  priceFormatting_: priceFormatting_
 }) {
   // inspired by https://observablehq.com/@mbostock/nonlinear-slider
   const transform_linear_to_nonlinear = ([smaller, larger]) => [Math.sqrt(smaller), Math.sqrt(larger)];
@@ -3163,7 +3174,8 @@ function $a6b08770e164eced$var$ExponentialSlider({
     max_: modified_max,
     offset_value_calculator_: offset_value_calculator_,
     i18n_: i18n_,
-    should_be_disabled_: should_be_disabled_
+    should_be_disabled_: should_be_disabled_,
+    priceFormatting_: priceFormatting_
   });
 }
 function $a6b08770e164eced$var$LinearSlider({
@@ -3172,12 +3184,17 @@ function $a6b08770e164eced$var$LinearSlider({
   current_range_: current_range_,
   offset_value_calculator_: offset_value_calculator_,
   i18n_: i18n_,
-  should_be_disabled_: should_be_disabled_
+  should_be_disabled_: should_be_disabled_,
+  priceFormatting_: priceFormatting_
 }) {
   let range_input_1;
   let range_input_2;
   let clickable_slider;
   const [get_current_range, set_current_range] = current_range_;
+  const formatRealPrice = value => {
+    const priceFormatting = priceFormatting_();
+    return priceFormatting.pre_ + $9HbP8$standard_price_format(value, priceFormatting.places_after_comma_, priceFormatting.decimal_places_delimiter_, priceFormatting.thousands_delimiter_) + priceFormatting.post_;
+  };
   const progress_styling = $9HbP8$createMemo(() => {
     const min = min_();
     const span = max_() - min;
@@ -3234,20 +3251,24 @@ function $a6b08770e164eced$var$LinearSlider({
     $9HbP8$effect(_p$ => {
       var _v$10 = should_be_disabled_(),
         _v$11 = i18n_.range_filter_low_point_aria_label_(),
-        _v$12 = min_(),
-        _v$13 = max_(),
-        _v$14 = should_be_disabled_(),
-        _v$15 = i18n_.range_filter_high_point_aria_label_(),
-        _v$16 = min_(),
-        _v$17 = max_();
+        _v$12 = formatRealPrice(get_current_range()[0]),
+        _v$13 = min_(),
+        _v$14 = max_(),
+        _v$15 = should_be_disabled_(),
+        _v$16 = i18n_.range_filter_high_point_aria_label_(),
+        _v$17 = formatRealPrice(get_current_range()[1]),
+        _v$18 = min_(),
+        _v$19 = max_();
       _v$10 !== _p$.e && $9HbP8$setProperty(_el$28, "disabled", _p$.e = _v$10);
       _v$11 !== _p$.t && $9HbP8$setAttribute(_el$28, "aria-label", _p$.t = _v$11);
-      _v$12 !== _p$.a && $9HbP8$setAttribute(_el$28, "min", _p$.a = _v$12);
-      _v$13 !== _p$.o && $9HbP8$setAttribute(_el$28, "max", _p$.o = _v$13);
-      _v$14 !== _p$.i && $9HbP8$setProperty(_el$29, "disabled", _p$.i = _v$14);
-      _v$15 !== _p$.n && $9HbP8$setAttribute(_el$29, "aria-label", _p$.n = _v$15);
-      _v$16 !== _p$.s && $9HbP8$setAttribute(_el$29, "min", _p$.s = _v$16);
-      _v$17 !== _p$.h && $9HbP8$setAttribute(_el$29, "max", _p$.h = _v$17);
+      _v$12 !== _p$.a && $9HbP8$setAttribute(_el$28, "aria-valuetext", _p$.a = _v$12);
+      _v$13 !== _p$.o && $9HbP8$setAttribute(_el$28, "min", _p$.o = _v$13);
+      _v$14 !== _p$.i && $9HbP8$setAttribute(_el$28, "max", _p$.i = _v$14);
+      _v$15 !== _p$.n && $9HbP8$setProperty(_el$29, "disabled", _p$.n = _v$15);
+      _v$16 !== _p$.s && $9HbP8$setAttribute(_el$29, "aria-label", _p$.s = _v$16);
+      _v$17 !== _p$.h && $9HbP8$setAttribute(_el$29, "aria-valuetext", _p$.h = _v$17);
+      _v$18 !== _p$.r && $9HbP8$setAttribute(_el$29, "min", _p$.r = _v$18);
+      _v$19 !== _p$.d && $9HbP8$setAttribute(_el$29, "max", _p$.d = _v$19);
       return _p$;
     }, {
       e: undefined,
@@ -3257,7 +3278,9 @@ function $a6b08770e164eced$var$LinearSlider({
       i: undefined,
       n: undefined,
       s: undefined,
-      h: undefined
+      h: undefined,
+      r: undefined,
+      d: undefined
     });
     $9HbP8$effect(() => $9HbP8$setProperty(_el$28, "value", $9HbP8$createMemo(() => {
       min_();
@@ -4139,6 +4162,13 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
                 _el$7 = _el$6.nextSibling,
                 [_el$8, _co$2] = $9HbP8$getNextMarker(_el$7.nextSibling);
               $9HbP8$spread(_el$2, $9HbP8$mergeProps1(attributes, {
+                "type": "button",
+                get ["aria-pressed"]() {
+                  return is_selected();
+                },
+                get ["aria-label"]() {
+                  return $9HbP8$memo(() => value().count_ != undefined)() ? `${label()}, ${value().count_}` : label();
+                },
                 get disabled() {
                   return $9HbP8$memo(() => !!count_zero())() && !is_selected();
                 },
@@ -4342,7 +4372,14 @@ function $e731d52d97444b7c$export$82ed4b28ecb67608({
       return !!data?.some(item => $91aa8ee9f431800d$export$325f75597868c4f0(item) === value);
     });
     const value = $9HbP8$createMemo(() => checkbox().value_);
-    const label_text = $9HbP8$createMemo(() => checkbox().name_ || value() + "");
+    const label_text = $9HbP8$createMemo(() => {
+      const name = checkbox().name_;
+      if (name) return name;
+      const value_string = value() + "";
+      if (backendFilterV2()) return value_string;
+      // Legacy values are "Name;#hex" - split is used to get the name so that screen readers don't announce the hex code
+      return value_string.split(";")[0] || value_string;
+    });
     const count = $9HbP8$createMemo(() => checkbox().count_);
     const colorNameDatasetValue = $9HbP8$createMemo(() => {
       if (backendFilterV2()) return label_text();
@@ -4814,7 +4851,7 @@ $9HbP8$delegateEvents(["input", "click"]);
 var $fab07f52c9861732$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=filter-collapsible>`),
   $fab07f52c9861732$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<button class=clear-group><!$><!/><span>`),
   $fab07f52c9861732$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=view-more-clear><!$><!/><!$><!/>`),
-  $fab07f52c9861732$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class=filter-collapsible-body><div class=filter-part><!$><!/><!$><!/></div><!$><!/>`),
+  $fab07f52c9861732$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class=filter-collapsible-body><fieldset class=filter-part><!$><!/><!$><!/></fieldset><!$><!/>`),
   $fab07f52c9861732$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<details class=filter-collapsible>`),
   $fab07f52c9861732$var$_tmpl$6 = /*#__PURE__*/$9HbP8$template(`<summary class=filter-group-summary><div class=summary><span></span><div class=selected-w-sign><!$><!/><!$><!/>`),
   $fab07f52c9861732$var$_tmpl$7 = /*#__PURE__*/$9HbP8$template(`<div class=ungrouped>`),
@@ -4904,6 +4941,7 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
             const a_filter_is_selected = $9HbP8$createMemo(() => selected_filters_in_group().size);
             const [get_details_width, set_get_details_width] = $9HbP8$createSignal();
             const details_element_width_ = $9HbP8$createMemo(() => get_details_width?.()?.());
+            const title_id = $9HbP8$make_random_classname();
             return $9HbP8$createComponent((0, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d), {
               is_open_: is_open,
               get details_() {
@@ -4924,6 +4962,7 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
                     [_el$25, _co$7] = $9HbP8$getNextMarker(_el$24.nextSibling),
                     _el$26 = _el$25.nextSibling,
                     [_el$27, _co$8] = $9HbP8$getNextMarker(_el$26.nextSibling);
+                  $9HbP8$setAttribute(_el$22, "id", title_id);
                   $9HbP8$insert(_el$22, section_);
                   $9HbP8$insert(_el$23, $9HbP8$createComponent((0, $9HbP8$Show), {
                     get when() {
@@ -4958,6 +4997,7 @@ function $fab07f52c9861732$var$ActualFilterBody(props) {
                   [_el$7, _co$2] = $9HbP8$getNextMarker(_el$6.nextSibling),
                   _el$17 = _el$3.nextSibling,
                   [_el$18, _co$6] = $9HbP8$getNextMarker(_el$17.nextSibling);
+                $9HbP8$setAttribute(_el$3, "aria-labelledby", title_id);
                 $9HbP8$insert(_el$3, $9HbP8$createComponent(SearchThisFilterGroup_, {}), _el$5, _co$);
                 $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Index), {
                   get each() {
@@ -7480,7 +7520,7 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   })));
   return container;
 }
-const $70bb27cc6be01fc7$var$customUrls = (url, width) => {
+const $70bb27cc6be01fc7$var$defaultCustomUrls = (url, width) => {
   if (url?.startsWith?.("https://cdn.shopify.com"))
     // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
     // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
@@ -7489,18 +7529,21 @@ const $70bb27cc6be01fc7$var$customUrls = (url, width) => {
   return `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`;
 };
 function $70bb27cc6be01fc7$export$9d4a4b669b1929ab(props) {
+  const resolvedCustomUrls = props.imageResizer_ ?? $70bb27cc6be01fc7$var$defaultCustomUrls;
   return $9HbP8$createComponent((0, $660070e2a394b3c3$export$e4b984597b71e989), $9HbP8$mergeProps1(props, {
     get imgProps() {
       return {
         ...props.imgProps,
-        customUrls: $70bb27cc6be01fc7$var$customUrls
+        customUrls: resolvedCustomUrls
       };
     }
   }));
 }
 function $70bb27cc6be01fc7$export$140423fa4bfb6d63(props) {
   return $9HbP8$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), $9HbP8$mergeProps1(props, {
-    customUrls: $70bb27cc6be01fc7$var$customUrls
+    get customUrls() {
+      return props.imageResizer_ ?? $70bb27cc6be01fc7$var$defaultCustomUrls;
+    }
   }));
 }
 let $e422ea9eccb7892b$var$cachedHlsModule;
@@ -7525,7 +7568,8 @@ function $f916989c4b1be9f7$export$780a853d15174484({
   router_: router_,
   setAspectRatioWas_: setAspectRatioWas_,
   mediaUrl_: mediaUrl_,
-  aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_
+  aspectRatioWhenAloneInRow_: aspectRatioWhenAloneInRow_,
+  imageResizer_: imageResizer_
 }) {
   let wroteAspectRatioToContainer = false; // Only write this once so we don't get into a aspect ratio changed -> size changed -> image source changed -> aspect ratio slightly changed infinite loop
   const [wrapperSize, setWrapperSize] = $9HbP8$createSignal();
@@ -7575,7 +7619,8 @@ function $f916989c4b1be9f7$export$780a853d15174484({
                 src: mediaUrl_,
                 "class": "d-standard-content",
                 onDecoded: () => setHasLoaded(true),
-                ref: el => el.addEventListener("load", $9HbP8$catchify(() => setAspectRatio(el.naturalWidth / el.naturalHeight)))
+                ref: el => el.addEventListener("load", $9HbP8$catchify(() => setAspectRatio(el.naturalWidth / el.naturalHeight))),
+                imageResizer_: imageResizer_
               });
             }
           }), $9HbP8$createComponent((0, $9HbP8$Match), {
@@ -7626,7 +7671,7 @@ function $f916989c4b1be9f7$export$780a853d15174484({
     }
   }));
 }
-function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_) {
+function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_, imageResizer_) {
   let hasSeenContentBlock = false;
   const [historyContentBlocks, setHistoryContentBlocks] = history_content_blocks_;
   const contentComponents = new Map();
@@ -7681,7 +7726,8 @@ function $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_
               ...prev.aspectRatios,
               [componentCacheKey]: Math.round(aspectRatio * 100) / 100
             }
-          }))
+          })),
+          imageResizer_: imageResizer_
         });
         contentComponents.set(componentCacheKey, component);
       }
@@ -7743,7 +7789,8 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
   filterModalParent_: filterModalParent_,
   showSliderArrow_: showSliderArrow_,
   hideCount0FilterOptions_: hideCount0FilterOptions_,
-  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
+  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_,
+  imageResizer_: imageResizer_
 }) {
   let results_for;
   let only_show_filters_opener_;
@@ -7839,7 +7886,7 @@ function $df5d81d0fe61ff21$export$f7d2f673fc2f091d({
     setMetaRequestsForQuery(prev => prev.set(query.id_type_ + query.id_to_query_for_, listing));
     return result;
   }));
-  const contentBlocksByRow = $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, () => plp_products_.loading);
+  const contentBlocksByRow = $486360b09f0d5729$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, () => plp_products_.loading, imageResizer_);
   const countOfProductsForUI = $3ef0154d1cf118ed$export$a86bc18439445599(plp_products_, all_products_loaded_, currentlyLoadedDisplays);
   const available_sortings_ = $9HbP8$createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
@@ -8391,7 +8438,8 @@ function $08a49ecdcd5beaca$export$b73ed90f0ee50dc3({
   outerRef_: outerRef_,
   animationDuration_: animationDuration_,
   priceFormatting_: priceFormatting_,
-  pseudoRouter_: pseudoRouter_
+  pseudoRouter_: pseudoRouter_,
+  imageResizer_: imageResizer_
 }) {
   const variantToUse = $9HbP8$createMemo(() => {
     const display = display_();
@@ -8465,7 +8513,8 @@ function $08a49ecdcd5beaca$export$b73ed90f0ee50dc3({
               },
               imgProps: {
                 keyRatioUpdating: true
-              }
+              },
+              imageResizer_: imageResizer_
             });
           }
         }));
@@ -8666,7 +8715,8 @@ function $11fb4b33b36ecfac$export$ebf0b1d4f90c09ae({
   supportsHover_: supportsHover_,
   priceFormatting_: priceFormatting_,
   pseudoRouter_: pseudoRouter_,
-  containerHeight_: containerHeight_
+  containerHeight_: containerHeight_,
+  imageResizer_: imageResizer_
 }) {
   let isAffectedByChromeBug = false;
   // If the user requests the drawer to be expanded or not
@@ -8731,6 +8781,7 @@ function $11fb4b33b36ecfac$export$ebf0b1d4f90c09ae({
                 userWantsExpandedSignal_: userWantsExpandedSignal_,
                 textFadeInAnimationRunning_: textFadeInAnimationRunning,
                 priceFormatting_: priceFormatting_,
+                imageResizer_: imageResizer_,
                 outerRef_: el => $9HbP8$createEffect(() => {
                   if (index !== 0) return;
                   const resizeObserver = new ResizeObserver($9HbP8$catchify1(records => setLookItemHeight(records.at(-1).contentRect.height)));
@@ -8789,7 +8840,8 @@ function $e9d1d09be9e6471e$export$44809a8a3e867e30({
   placeholderImageAspectRatio_: placeholderImageAspectRatio_,
   animationDuration_: animationDuration_,
   priceFormatting_: priceFormatting_,
-  pseudoRouter_: pseudoRouter_
+  pseudoRouter_: pseudoRouter_,
+  imageResizer_: imageResizer_
 }) {
   let container;
   const useWantsExpandedSignal_ = $9HbP8$createSignal(false);
@@ -8876,7 +8928,8 @@ function $e9d1d09be9e6471e$export$44809a8a3e867e30({
             return display_()?.image_urls?.[0];
           },
           aspectRatio: placeholderImageAspectRatio_,
-          autoAdjustAspectRatio: true
+          autoAdjustAspectRatio: true,
+          imageResizer_: imageResizer_
         });
       }
     }), _el$3, _co$);
@@ -8889,7 +8942,8 @@ function $e9d1d09be9e6471e$export$44809a8a3e867e30({
       FavoriteButton_: FavoriteButton_,
       priceFormatting_: priceFormatting_,
       pseudoRouter_: pseudoRouter_,
-      containerHeight_: containerHeight_
+      containerHeight_: containerHeight_,
+      imageResizer_: imageResizer_
     }), _el$5, _co$2);
     $9HbP8$effect(() => _el$.classList.toggle("placeholder", !display_()));
     $9HbP8$runHydrationEvents();
@@ -9149,7 +9203,8 @@ function $07ef910e8ef6b783$export$2c9f9bf2092486aa(props) {
         animationDuration_: expandingAnimationDuration,
         expandedLooksSignal_: $07ef910e8ef6b783$var$expandedLooksSignal_,
         priceFormatting_: () => props.priceFormatting_,
-        pseudoRouter_: pseudoRouter
+        pseudoRouter_: pseudoRouter,
+        imageResizer_: props.imageResizer_
       }),
       recommendations_resource_: looksResource,
       title_: () => props.title_,
@@ -11032,7 +11087,8 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   merchant_: merchant_,
   keyboardNavigationGroupIndex_: keyboardNavigationGroupIndex_,
   index_: index_,
-  selected_index_: [read_selected_index_, write_selected_index_]
+  selected_index_: [read_selected_index_, write_selected_index_],
+  imageResizer_: imageResizer_
 }) {
   const href = $9HbP8$createMemo(() => listing_()?.page_url); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
   const LinkToListing = props => (() => {
@@ -11088,7 +11144,8 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
       get children() {
         var _el$3 = $9HbP8$getNextElement($4ce5b8892775b62d$var$_tmpl$2);
         $9HbP8$insert(_el$3, $9HbP8$createComponent($4ce5b8892775b62d$export$ea41102db9bd68c3, {
-          image_urls_: image_urls
+          image_urls_: image_urls,
+          imageResizer_: imageResizer_
         }));
         return _el$3;
       }
@@ -11131,7 +11188,8 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   })();
 }
 function $4ce5b8892775b62d$export$ea41102db9bd68c3({
-  image_urls_: image_urls_
+  image_urls_: image_urls_,
+  imageResizer_: imageResizer_
 }) {
   return $9HbP8$createComponent((0, $9HbP8$Show), {
     get when() {
@@ -11154,7 +11212,8 @@ function $4ce5b8892775b62d$export$ea41102db9bd68c3({
               },
               imgProps: {
                 style: "object-fit: cover;"
-              }
+              },
+              imageResizer_: imageResizer_
             })
           });
         }
@@ -11184,7 +11243,8 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
   selected_index_: selected_index_,
   modalLayoutStacked_: modalLayoutStacked_,
   showPlaceholders_: showPlaceholders_,
-  currently_showing_suggestions_: [, set_currently_showing_suggestions]
+  currently_showing_suggestions_: [, set_currently_showing_suggestions],
+  imageResizer_: imageResizer_
 }) {
   const listings_by_id = $9HbP8$createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $9HbP8$createComponent((0, $9HbP8$For), {
@@ -11202,7 +11262,8 @@ function $44f30a4222ce604b$export$c8d7e00464029b45({
         merchant_: merchant_,
         keyboardNavigationGroupIndex_: itemIndex_,
         index_: index,
-        selected_index_: selected_index_
+        selected_index_: selected_index_,
+        imageResizer_: imageResizer_
       });
     }
   });
@@ -11584,7 +11645,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
   sorting_query_param_: sorting_query_param_,
   filter_query_param_prefix_: filter_query_param_prefix_,
   setSearchFieldOuterWidth_: setSearchFieldOuterWidth_,
-  forceUseDiv_: forceUseDiv_
+  forceUseDiv_: forceUseDiv_,
+  imageResizer_: imageResizer_
 }) {
   let on_enter_in_search_field_function;
   let listingSuggestionsDebounceTimeout;
@@ -11795,7 +11857,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
               },
               imgProps: {
                 alt: "Product image"
-              }
+              },
+              imageResizer_: imageResizer_
             }),
             ...instant_results_options_
           }), _el$4, _co$);
@@ -11826,7 +11889,8 @@ function $500a16dd18ee5a71$var$RawSearchModalV2({
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
                 modalLayoutStacked_: modalLayoutStacked_,
-                showPlaceholders_: () => !suggestions_response_.latest
+                showPlaceholders_: () => !suggestions_response_.latest,
+                imageResizer_: imageResizer_
               });
             }
           });
@@ -14924,6 +14988,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
     display_transformers: display_transformers,
     api: api,
     searchModalComponent: searchModalComponent,
+    imageResizer_: imageResizer_,
     // Stuff needed for non-standard customer deployments that we shouldn't actually expose
     disable_scrolling_during_modal = true,
     bottom_distance_under_modal: bottom_distance_under_modal,
@@ -15054,6 +15119,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
           },
           i18n_: i18n_,
           enable_category_suggestions_: enable_category_suggestions,
+          imageResizer_: imageResizer_,
           disable_scrolling_: disable_scrolling_during_modal,
           bottom_distance_under_modal_: bottom_distance_under_modal
         }, override_modal_element);
@@ -15837,7 +15903,8 @@ function $442f32a4d80abbde$export$e2bf8ce7779e827e(props) {
       product_card_template_: product_card_template,
       sorting_query_param_: sorting_query_param_,
       filter_query_param_prefix_: filter_query_param_prefix_,
-      switchToFiltersDrawerBreakpoint_: () => props.switchToFiltersDrawerBreakpoint_
+      switchToFiltersDrawerBreakpoint_: () => props.switchToFiltersDrawerBreakpoint_,
+      imageResizer_: props.imageResizer_
     });
   }, "Entire CategoryPage failed");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.10.11",
+  "version": "4.10.13",
   "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": "^4.6.3",
-    "@depict-ai/types": "^5.6.1",
-    "@depict-ai/utilishared": "^2.6.1",
+    "@depict-ai/plp-styling": "^4.6.5",
+    "@depict-ai/types": "^5.6.3",
+    "@depict-ai/utilishared": "^2.6.3",
     "solid-js": "^1.9.10"
   },
   "type": "module",