@depict-ai/ui 4.10.11 → 4.10.13

package/latest/index.cjs

@@ -109,7 +109,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.11";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.10.13";
 function $b54e6192d0caa293$export$d9f36cf74e24d595(media_query) {
   const signal = $gVhhF$solidjs.createSignal(false);
   $gVhhF$solidjs.onCleanup($gVhhF$depictaiutilishared.javascript_media_query(media_query, ({
@@ -2714,7 +2714,16 @@ function $0fe1e7efdf4200d6$export$ca21a16d65b3dd8({
       var _c$ = $gVhhF$solidjsweb.memo(() => !!get_show_extras());
       return () => _c$() ? i18n_.view_less_() : i18n_.view_more_();
     })());
-    $gVhhF$solidjsweb.effect(() => _el$.classList.toggle("expanded", !!get_show_extras()));
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$ = get_show_extras(),
+        _v$2 = !!get_show_extras();
+      _v$ !== _p$.e && $gVhhF$solidjsweb.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
+    });
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -3033,7 +3042,7 @@ function $c1dc1554c1b94233$export$430444115f70a734({
     return _el$;
   })();
 }
-var $0b7222ba8a8bb72f$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.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 $0b7222ba8a8bb72f$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.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><!$><!/><!$><!/><!$><!/>`),
   $0b7222ba8a8bb72f$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=slider><div class=progress>`),
   $0b7222ba8a8bb72f$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=range-group><input type=range step=any><input type=range step=any>`);
 function $0b7222ba8a8bb72f$export$e0d834a0ad870cda({
@@ -3167,7 +3176,8 @@ function $0b7222ba8a8bb72f$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);
     $gVhhF$solidjsweb.insert(_el$9, pre_price, _el$11, _co$);
     $gVhhF$solidjsweb.insert(_el$9, $gVhhF$solidjsweb.createComponent((0, $d659702496cb72ea$export$a71e92cfbb498adc), {
@@ -3231,7 +3241,8 @@ function $0b7222ba8a8bb72f$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)];
@@ -3265,7 +3276,8 @@ function $0b7222ba8a8bb72f$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 $0b7222ba8a8bb72f$var$LinearSlider({
@@ -3274,12 +3286,17 @@ function $0b7222ba8a8bb72f$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_ + $gVhhF$depictaiutilishared.standard_price_format(value, priceFormatting.places_after_comma_, priceFormatting.decimal_places_delimiter_, priceFormatting.thousands_delimiter_) + priceFormatting.post_;
+  };
   const progress_styling = $gVhhF$solidjs.createMemo(() => {
     const min = min_();
     const span = max_() - min;
@@ -3336,20 +3353,24 @@ function $0b7222ba8a8bb72f$var$LinearSlider({
     $gVhhF$solidjsweb.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 && $gVhhF$solidjsweb.setProperty(_el$28, "disabled", _p$.e = _v$10);
       _v$11 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$28, "aria-label", _p$.t = _v$11);
-      _v$12 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$28, "min", _p$.a = _v$12);
-      _v$13 !== _p$.o && $gVhhF$solidjsweb.setAttribute(_el$28, "max", _p$.o = _v$13);
-      _v$14 !== _p$.i && $gVhhF$solidjsweb.setProperty(_el$29, "disabled", _p$.i = _v$14);
-      _v$15 !== _p$.n && $gVhhF$solidjsweb.setAttribute(_el$29, "aria-label", _p$.n = _v$15);
-      _v$16 !== _p$.s && $gVhhF$solidjsweb.setAttribute(_el$29, "min", _p$.s = _v$16);
-      _v$17 !== _p$.h && $gVhhF$solidjsweb.setAttribute(_el$29, "max", _p$.h = _v$17);
+      _v$12 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$28, "aria-valuetext", _p$.a = _v$12);
+      _v$13 !== _p$.o && $gVhhF$solidjsweb.setAttribute(_el$28, "min", _p$.o = _v$13);
+      _v$14 !== _p$.i && $gVhhF$solidjsweb.setAttribute(_el$28, "max", _p$.i = _v$14);
+      _v$15 !== _p$.n && $gVhhF$solidjsweb.setProperty(_el$29, "disabled", _p$.n = _v$15);
+      _v$16 !== _p$.s && $gVhhF$solidjsweb.setAttribute(_el$29, "aria-label", _p$.s = _v$16);
+      _v$17 !== _p$.h && $gVhhF$solidjsweb.setAttribute(_el$29, "aria-valuetext", _p$.h = _v$17);
+      _v$18 !== _p$.r && $gVhhF$solidjsweb.setAttribute(_el$29, "min", _p$.r = _v$18);
+      _v$19 !== _p$.d && $gVhhF$solidjsweb.setAttribute(_el$29, "max", _p$.d = _v$19);
       return _p$;
     }, {
       e: undefined,
@@ -3359,7 +3380,9 @@ function $0b7222ba8a8bb72f$var$LinearSlider({
       i: undefined,
       n: undefined,
       s: undefined,
-      h: undefined
+      h: undefined,
+      r: undefined,
+      d: undefined
     });
     $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setProperty(_el$28, "value", $gVhhF$solidjs.createMemo(() => {
       min_();
@@ -4241,6 +4264,13 @@ const $0ef1681699140f1a$export$414f6a19d38e655c = ({
                 _el$7 = _el$6.nextSibling,
                 [_el$8, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$7.nextSibling);
               $gVhhF$solidjsweb.spread(_el$2, $gVhhF$solidjsweb.mergeProps(attributes, {
+                "type": "button",
+                get ["aria-pressed"]() {
+                  return is_selected();
+                },
+                get ["aria-label"]() {
+                  return $gVhhF$solidjsweb.memo(() => value().count_ != undefined)() ? `${label()}, ${value().count_}` : label();
+                },
                 get disabled() {
                   return $gVhhF$solidjsweb.memo(() => !!count_zero())() && !is_selected();
                 },
@@ -4444,7 +4474,14 @@ function $b51a2b8b9355e66c$export$82ed4b28ecb67608({
       return !!data?.some(item => $daa394359b026187$export$325f75597868c4f0(item) === value);
     });
     const value = $gVhhF$solidjs.createMemo(() => checkbox().value_);
-    const label_text = $gVhhF$solidjs.createMemo(() => checkbox().name_ || value() + "");
+    const label_text = $gVhhF$solidjs.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 = $gVhhF$solidjs.createMemo(() => checkbox().count_);
     const colorNameDatasetValue = $gVhhF$solidjs.createMemo(() => {
       if (backendFilterV2()) return label_text();
@@ -4916,7 +4953,7 @@ $gVhhF$solidjsweb.delegateEvents(["input", "click"]);
 var $aff9a96d30ed3563$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=filter-collapsible>`),
   $aff9a96d30ed3563$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class=clear-group><!$><!/><span>`),
   $aff9a96d30ed3563$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=view-more-clear><!$><!/><!$><!/>`),
-  $aff9a96d30ed3563$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=filter-collapsible-body><div class=filter-part><!$><!/><!$><!/></div><!$><!/>`),
+  $aff9a96d30ed3563$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=filter-collapsible-body><fieldset class=filter-part><!$><!/><!$><!/></fieldset><!$><!/>`),
   $aff9a96d30ed3563$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<details class=filter-collapsible>`),
   $aff9a96d30ed3563$var$_tmpl$6 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<summary class=filter-group-summary><div class=summary><span></span><div class=selected-w-sign><!$><!/><!$><!/>`),
   $aff9a96d30ed3563$var$_tmpl$7 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=ungrouped>`),
@@ -5006,6 +5043,7 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
             const a_filter_is_selected = $gVhhF$solidjs.createMemo(() => selected_filters_in_group().size);
             const [get_details_width, set_get_details_width] = $gVhhF$solidjs.createSignal();
             const details_element_width_ = $gVhhF$solidjs.createMemo(() => get_details_width?.()?.());
+            const title_id = $gVhhF$depictaiutilishared.make_random_classname();
             return $gVhhF$solidjsweb.createComponent((0, $a69e505a12a77874$export$6c6d7a51fa9aa15d), {
               is_open_: is_open,
               get details_() {
@@ -5026,6 +5064,7 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
                     [_el$25, _co$7] = $gVhhF$solidjsweb.getNextMarker(_el$24.nextSibling),
                     _el$26 = _el$25.nextSibling,
                     [_el$27, _co$8] = $gVhhF$solidjsweb.getNextMarker(_el$26.nextSibling);
+                  $gVhhF$solidjsweb.setAttribute(_el$22, "id", title_id);
                   $gVhhF$solidjsweb.insert(_el$22, section_);
                   $gVhhF$solidjsweb.insert(_el$23, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
                     get when() {
@@ -5060,6 +5099,7 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
                   [_el$7, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$6.nextSibling),
                   _el$17 = _el$3.nextSibling,
                   [_el$18, _co$6] = $gVhhF$solidjsweb.getNextMarker(_el$17.nextSibling);
+                $gVhhF$solidjsweb.setAttribute(_el$3, "aria-labelledby", title_id);
                 $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent(SearchThisFilterGroup_, {}), _el$5, _co$);
                 $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
                   get each() {
@@ -7582,7 +7622,7 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
   })));
   return container;
 }
-const $d212a67662c5cf38$var$customUrls = (url, width) => {
+const $d212a67662c5cf38$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.
@@ -7591,18 +7631,21 @@ const $d212a67662c5cf38$var$customUrls = (url, width) => {
   return `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`;
 };
 function $d212a67662c5cf38$export$9d4a4b669b1929ab(props) {
+  const resolvedCustomUrls = props.imageResizer_ ?? $d212a67662c5cf38$var$defaultCustomUrls;
   return $gVhhF$solidjsweb.createComponent((0, $a33065cfed827fc0$export$e4b984597b71e989), $gVhhF$solidjsweb.mergeProps(props, {
     get imgProps() {
       return {
         ...props.imgProps,
-        customUrls: $d212a67662c5cf38$var$customUrls
+        customUrls: resolvedCustomUrls
       };
     }
   }));
 }
 function $d212a67662c5cf38$export$140423fa4bfb6d63(props) {
   return $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), $gVhhF$solidjsweb.mergeProps(props, {
-    customUrls: $d212a67662c5cf38$var$customUrls
+    get customUrls() {
+      return props.imageResizer_ ?? $d212a67662c5cf38$var$defaultCustomUrls;
+    }
   }));
 }
 let $20ff40266d725403$var$cachedHlsModule;
@@ -7627,7 +7670,8 @@ function $32c662f618f5d80d$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] = $gVhhF$solidjs.createSignal();
@@ -7677,7 +7721,8 @@ function $32c662f618f5d80d$export$780a853d15174484({
                 src: mediaUrl_,
                 "class": "d-standard-content",
                 onDecoded: () => setHasLoaded(true),
-                ref: el => el.addEventListener("load", $gVhhF$depictaiutilisharedlatest.catchify(() => setAspectRatio(el.naturalWidth / el.naturalHeight)))
+                ref: el => el.addEventListener("load", $gVhhF$depictaiutilisharedlatest.catchify(() => setAspectRatio(el.naturalWidth / el.naturalHeight))),
+                imageResizer_: imageResizer_
               });
             }
           }), $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Match), {
@@ -7728,7 +7773,7 @@ function $32c662f618f5d80d$export$780a853d15174484({
     }
   }));
 }
-function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, products_request_loading_) {
+function $0a80939bf0a1e9cc$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();
@@ -7783,7 +7828,8 @@ function $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_
               ...prev.aspectRatios,
               [componentCacheKey]: Math.round(aspectRatio * 100) / 100
             }
-          }))
+          })),
+          imageResizer_: imageResizer_
         });
         contentComponents.set(componentCacheKey, component);
       }
@@ -7845,7 +7891,8 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
   filterModalParent_: filterModalParent_,
   showSliderArrow_: showSliderArrow_,
   hideCount0FilterOptions_: hideCount0FilterOptions_,
-  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_
+  switchToFiltersDrawerBreakpoint_: switchToFiltersDrawerBreakpoint_,
+  imageResizer_: imageResizer_
 }) {
   let results_for;
   let only_show_filters_opener_;
@@ -7941,7 +7988,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({
     setMetaRequestsForQuery(prev => prev.set(query.id_type_ + query.id_to_query_for_, listing));
     return result;
   }));
-  const contentBlocksByRow = $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, () => plp_products_.loading);
+  const contentBlocksByRow = $0a80939bf0a1e9cc$export$7a92d995f1bf3592(history_content_blocks_, plp_meta, content_blocks_by_row_, router_, () => plp_products_.loading, imageResizer_);
   const countOfProductsForUI = $13796d59ea8af231$export$a86bc18439445599(plp_products_, all_products_loaded_, currentlyLoadedDisplays);
   const available_sortings_ = $gVhhF$solidjs.createMemo(() => plp_products_()?.sorts?.map(sort => ({
     ...sort,
@@ -8493,7 +8540,8 @@ function $0540c3739b32dc79$export$b73ed90f0ee50dc3({
   outerRef_: outerRef_,
   animationDuration_: animationDuration_,
   priceFormatting_: priceFormatting_,
-  pseudoRouter_: pseudoRouter_
+  pseudoRouter_: pseudoRouter_,
+  imageResizer_: imageResizer_
 }) {
   const variantToUse = $gVhhF$solidjs.createMemo(() => {
     const display = display_();
@@ -8567,7 +8615,8 @@ function $0540c3739b32dc79$export$b73ed90f0ee50dc3({
               },
               imgProps: {
                 keyRatioUpdating: true
-              }
+              },
+              imageResizer_: imageResizer_
             });
           }
         }));
@@ -8768,7 +8817,8 @@ function $912d9a717ceee184$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
@@ -8833,6 +8883,7 @@ function $912d9a717ceee184$export$ebf0b1d4f90c09ae({
                 userWantsExpandedSignal_: userWantsExpandedSignal_,
                 textFadeInAnimationRunning_: textFadeInAnimationRunning,
                 priceFormatting_: priceFormatting_,
+                imageResizer_: imageResizer_,
                 outerRef_: el => $gVhhF$solidjs.createEffect(() => {
                   if (index !== 0) return;
                   const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
@@ -8891,7 +8942,8 @@ function $bda357ff87c46163$export$44809a8a3e867e30({
   placeholderImageAspectRatio_: placeholderImageAspectRatio_,
   animationDuration_: animationDuration_,
   priceFormatting_: priceFormatting_,
-  pseudoRouter_: pseudoRouter_
+  pseudoRouter_: pseudoRouter_,
+  imageResizer_: imageResizer_
 }) {
   let container;
   const useWantsExpandedSignal_ = $gVhhF$solidjs.createSignal(false);
@@ -8978,7 +9030,8 @@ function $bda357ff87c46163$export$44809a8a3e867e30({
             return display_()?.image_urls?.[0];
           },
           aspectRatio: placeholderImageAspectRatio_,
-          autoAdjustAspectRatio: true
+          autoAdjustAspectRatio: true,
+          imageResizer_: imageResizer_
         });
       }
     }), _el$3, _co$);
@@ -8991,7 +9044,8 @@ function $bda357ff87c46163$export$44809a8a3e867e30({
       FavoriteButton_: FavoriteButton_,
       priceFormatting_: priceFormatting_,
       pseudoRouter_: pseudoRouter_,
-      containerHeight_: containerHeight_
+      containerHeight_: containerHeight_,
+      imageResizer_: imageResizer_
     }), _el$5, _co$2);
     $gVhhF$solidjsweb.effect(() => _el$.classList.toggle("placeholder", !display_()));
     $gVhhF$solidjsweb.runHydrationEvents();
@@ -9251,7 +9305,8 @@ function $a3bbfa5fdaa39f3a$export$2c9f9bf2092486aa(props) {
         animationDuration_: expandingAnimationDuration,
         expandedLooksSignal_: $a3bbfa5fdaa39f3a$var$expandedLooksSignal_,
         priceFormatting_: () => props.priceFormatting_,
-        pseudoRouter_: pseudoRouter
+        pseudoRouter_: pseudoRouter,
+        imageResizer_: props.imageResizer_
       }),
       recommendations_resource_: looksResource,
       title_: () => props.title_,
@@ -11134,7 +11189,8 @@ function $1f3b5fa875714dea$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 = $gVhhF$solidjs.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 => (() => {
@@ -11190,7 +11246,8 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
       get children() {
         var _el$3 = $gVhhF$solidjsweb.getNextElement($1f3b5fa875714dea$var$_tmpl$2);
         $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent($1f3b5fa875714dea$export$ea41102db9bd68c3, {
-          image_urls_: image_urls
+          image_urls_: image_urls,
+          imageResizer_: imageResizer_
         }));
         return _el$3;
       }
@@ -11233,7 +11290,8 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
   })();
 }
 function $1f3b5fa875714dea$export$ea41102db9bd68c3({
-  image_urls_: image_urls_
+  image_urls_: image_urls_,
+  imageResizer_: imageResizer_
 }) {
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
@@ -11256,7 +11314,8 @@ function $1f3b5fa875714dea$export$ea41102db9bd68c3({
               },
               imgProps: {
                 style: "object-fit: cover;"
-              }
+              },
+              imageResizer_: imageResizer_
             })
           });
         }
@@ -11286,7 +11345,8 @@ function $83e616b38be339e4$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 = $gVhhF$solidjs.createMemo(() => Object.fromEntries((listing_suggestions_() || []).map(listing => [listing.listing_id, listing])));
   const productCards = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.For), {
@@ -11304,7 +11364,8 @@ function $83e616b38be339e4$export$c8d7e00464029b45({
         merchant_: merchant_,
         keyboardNavigationGroupIndex_: itemIndex_,
         index_: index,
-        selected_index_: selected_index_
+        selected_index_: selected_index_,
+        imageResizer_: imageResizer_
       });
     }
   });
@@ -11686,7 +11747,8 @@ function $11597ae03e703a47$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;
@@ -11897,7 +11959,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
               },
               imgProps: {
                 alt: "Product image"
-              }
+              },
+              imageResizer_: imageResizer_
             }),
             ...instant_results_options_
           }), _el$4, _co$);
@@ -11928,7 +11991,8 @@ function $11597ae03e703a47$var$RawSearchModalV2({
                 selected_index_: selected_index_,
                 currently_showing_suggestions_: currently_showing_suggestions_,
                 modalLayoutStacked_: modalLayoutStacked_,
-                showPlaceholders_: () => !suggestions_response_.latest
+                showPlaceholders_: () => !suggestions_response_.latest,
+                imageResizer_: imageResizer_
               });
             }
           });
@@ -15026,6 +15090,7 @@ class $2c61e4cd8229c49a$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,
@@ -15156,6 +15221,7 @@ class $2c61e4cd8229c49a$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);
@@ -15939,7 +16005,8 @@ function $14f289047713d67a$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/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.10.11";
+export const version = "4.10.13";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -632,14 +632,19 @@ export function ShopifyContainedImage(props: {
   class?: string;
   imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
+export type ImageResizer = (url: string, width: number) => string;
 /**
  * Hacks ShopifyContainedImage work even for non-shopify image urls by forcing the format to be WebP
  */
-export function ModernResponsiveContainedImage(props: Parameters<typeof ShopifyContainedImage>[0]): import("solid-js").JSX.Element;
+export function ModernResponsiveContainedImage(props: Parameters<typeof ShopifyContainedImage>[0] & {
+  imageResizer_?: ImageResizer;
+}): import("solid-js").JSX.Element;
 /**
  * Wrapper around ShopifyResponsiveImg (component that just does an image, without wrapping in div). The wrapper allows ShopifyResponsiveImg to work both with shopify CDN URLs and arbitrary URLs, where the latter will be fed through Depict's cloudflare resizer.
  */
-export function ModernResponsiveImage(props: Parameters<typeof ShopifyResponsiveImg>[0]): import("solid-js").JSX.Element;
+export function ModernResponsiveImage(props: Parameters<typeof ShopifyResponsiveImg>[0] & {
+  imageResizer_?: ImageResizer;
+}): import("solid-js").JSX.Element;
 export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -730,7 +735,8 @@ declare function RawSearchModalV2<InputDisplay extends Display, OutputDisplay ex
   sorting_query_param_,
   filter_query_param_prefix_,
   setSearchFieldOuterWidth_,
-  forceUseDiv_
+  forceUseDiv_,
+  imageResizer_
 }: {
   search_field_value_: Signal<string>;
   get_search_query_: Accessor<string>;
@@ -767,6 +773,7 @@ declare function RawSearchModalV2<InputDisplay extends Display, OutputDisplay ex
   enable_category_suggestions_?: boolean;
   dont_sync_search_field_value_except_on_submit_?: boolean;
   content_search_enabled_: Accessor<boolean>;
+  imageResizer_?: ImageResizer;
 }): HTMLDivElement[];
 export const SearchModalV2: typeof RawSearchModalV2;
 /**
@@ -855,6 +862,13 @@ export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformed
    * We recommend to just use an incrementing number for this, e.g. "1", "2", "3", ...
    */
   uniqueInstanceKeyForState?: string;
+  /**
+   * Optional function to override the default image resizing CDN. When provided, this function is called
+   * with the original image URL and desired width, and should return the resized image URL.
+   * By default, Depict uses Cloudflare's image resizer for non-Shopify images, and Shopify's built-in
+   * resizer for Shopify CDN images.
+   */
+  imageResizer?: (url: string, width: number) => string;
 } & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
   /**
    * Functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
@@ -1150,7 +1164,8 @@ export function LookCard({
   placeholderImageAspectRatio_,
   animationDuration_,
   priceFormatting_,
-  pseudoRouter_
+  pseudoRouter_,
+  imageResizer_
 }: {
   display_: Accessor<FeaturedInDisplay | null>;
   FavoriteButton_?: (props: {
@@ -1161,6 +1176,7 @@ export function LookCard({
   expandedLooksSignal_: Signal<Set<symbol>>;
   priceFormatting_: Accessor<plp_shared_i18n["price_formatting_"]>;
   pseudoRouter_: PseudoRouter;
+  imageResizer_?: ImageResizer;
 }): JSX.Element;
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
@@ -1193,6 +1209,7 @@ export function LooksSliderOrGrid(props: {
   };
   onNavigation_?: OnNavigation;
   priceFormatting_: plp_shared_i18n["price_formatting_"];
+  imageResizer_?: (url: string, width: number) => string;
 }): HTMLDivElement;
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
@@ -1427,6 +1444,7 @@ type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay exten
   enable_content_search?: boolean;
   unique_instance_key_for_state?: string;
   searchModalComponent: typeof SearchModalV2<InputDisplay, OutputDisplay> | typeof ClassicSearchModal;
+  imageResizer_?: (url: string, width: number) => string;
   disable_scrolling_during_modal?: boolean;
   bottom_distance_under_modal?: Accessor<number | undefined>;
   override_modal_element?: HTMLElement | ShadowRoot;
@@ -1462,6 +1480,7 @@ export class DepictSearch<InputDisplay extends Display, OutputDisplay extends Mo
     display_transformers,
     api,
     searchModalComponent,
+    imageResizer_,
     disable_scrolling_during_modal,
     bottom_distance_under_modal,
     override_modal_element,
@@ -1623,5 +1642,6 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   filterModalParent_?: HTMLElement | ShadowRoot;
   showSliderArrow_?: boolean;
   hideCount0FilterOptions_?: boolean;
+  imageResizer_?: (url: string, width: number) => string;
 }): import("@depict-ai/utilishared/latest").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";